From a470a6c475f2fecd8edcb19c8545e0b749b1258c Mon Sep 17 00:00:00 2001 From: Ivan <8611739+IRBorisov@users.noreply.github.com> Date: Wed, 26 Feb 2025 20:34:58 +0300 Subject: [PATCH] M: Refactor tooltips loading --- rsconcept/frontend/src/app/GlobalTooltips.tsx | 36 ------------------- .../oss/components/OperationTooltip.tsx | 20 +++++++++++ .../pages/OssPage/EditorOssGraph/OssFlow.tsx | 4 +-- .../OssPage/EditorOssGraph/graph/NodeCore.tsx | 4 +-- .../features/oss/pages/OssPage/OssPage.tsx | 5 +++ .../features/oss/stores/operationTooltip.ts | 13 +++++++ .../rsform/components/BadgeConstituenta.tsx | 4 +-- .../rsform/components/ConstituentaTooltip.tsx | 21 +++++++++++ .../src/features/rsform/components/index.tsx | 1 + .../RSFormPage/EditorTermGraph/ViewHidden.tsx | 4 +-- .../rsform/pages/RSFormPage/RSFormPage.tsx | 3 ++ .../src/features/rsform/stores/cstTooltip.ts | 13 +++++++ rsconcept/frontend/src/stores/tooltips.ts | 19 ---------- 13 files changed, 84 insertions(+), 63 deletions(-) create mode 100644 rsconcept/frontend/src/features/oss/components/OperationTooltip.tsx create mode 100644 rsconcept/frontend/src/features/oss/stores/operationTooltip.ts create mode 100644 rsconcept/frontend/src/features/rsform/components/ConstituentaTooltip.tsx create mode 100644 rsconcept/frontend/src/features/rsform/stores/cstTooltip.ts delete mode 100644 rsconcept/frontend/src/stores/tooltips.ts diff --git a/rsconcept/frontend/src/app/GlobalTooltips.tsx b/rsconcept/frontend/src/app/GlobalTooltips.tsx index 23665738..b78785b3 100644 --- a/rsconcept/frontend/src/app/GlobalTooltips.tsx +++ b/rsconcept/frontend/src/app/GlobalTooltips.tsx @@ -1,24 +1,9 @@ 'use client'; -import React, { Suspense } from 'react'; - import { Tooltip } from '@/components/Container'; -import { Loader } from '@/components/Loader'; -import { useTooltipsStore } from '@/stores/tooltips'; import { globalIDs } from '@/utils/constants'; -const InfoConstituenta = React.lazy(() => - import('@/features/rsform/components/InfoConstituenta').then(module => ({ default: module.InfoConstituenta })) -); - -const InfoOperation = React.lazy(() => - import('@/features/oss/components/InfoOperation').then(module => ({ default: module.InfoOperation })) -); - export const GlobalTooltips = () => { - const hoverCst = useTooltipsStore(state => state.activeCst); - const hoverOperation = useTooltipsStore(state => state.activeOperation); - return ( <> { layer='z-topmost' className='max-w-[calc(min(40rem,100dvw-2rem))] text-justify' /> - - ); }; diff --git a/rsconcept/frontend/src/features/oss/components/OperationTooltip.tsx b/rsconcept/frontend/src/features/oss/components/OperationTooltip.tsx new file mode 100644 index 00000000..4e24f408 --- /dev/null +++ b/rsconcept/frontend/src/features/oss/components/OperationTooltip.tsx @@ -0,0 +1,20 @@ +import { Tooltip } from '@/components/Container'; +import { globalIDs } from '@/utils/constants'; + +import { useOperationTooltipStore } from '../stores/operationTooltip'; + +import { InfoOperation } from './InfoOperation'; + +export function OperationTooltip() { + const hoverOperation = useOperationTooltipStore(state => state.activeOperation); + return ( + + ); +} diff --git a/rsconcept/frontend/src/features/oss/pages/OssPage/EditorOssGraph/OssFlow.tsx b/rsconcept/frontend/src/features/oss/pages/OssPage/EditorOssGraph/OssFlow.tsx index 6345a90f..30b79a85 100644 --- a/rsconcept/frontend/src/features/oss/pages/OssPage/EditorOssGraph/OssFlow.tsx +++ b/rsconcept/frontend/src/features/oss/pages/OssPage/EditorOssGraph/OssFlow.tsx @@ -14,13 +14,13 @@ import { import { Overlay } from '@/components/Container'; import { useMainHeight } from '@/stores/appLayout'; import { useDialogsStore } from '@/stores/dialogs'; -import { useTooltipsStore } from '@/stores/tooltips'; import { PARAMETER } from '@/utils/constants'; import { useMutatingOss } from '../../../backend/useMutatingOss'; import { useUpdatePositions } from '../../../backend/useUpdatePositions'; import { GRID_SIZE } from '../../../models/ossAPI'; import { type OssNode } from '../../../models/ossLayout'; +import { useOperationTooltipStore } from '../../../stores/operationTooltip'; import { useOSSGraphStore } from '../../../stores/ossGraph'; import { useOssEdit } from '../OssEditContext'; @@ -47,7 +47,7 @@ export function OssFlow() { const isProcessing = useMutatingOss(); - const setHoverOperation = useTooltipsStore(state => state.setActiveOperation); + const setHoverOperation = useOperationTooltipStore(state => state.setActiveOperation); const showGrid = useOSSGraphStore(state => state.showGrid); const edgeAnimate = useOSSGraphStore(state => state.edgeAnimate); diff --git a/rsconcept/frontend/src/features/oss/pages/OssPage/EditorOssGraph/graph/NodeCore.tsx b/rsconcept/frontend/src/features/oss/pages/OssPage/EditorOssGraph/graph/NodeCore.tsx index 204cb7b1..5e8565ea 100644 --- a/rsconcept/frontend/src/features/oss/pages/OssPage/EditorOssGraph/graph/NodeCore.tsx +++ b/rsconcept/frontend/src/features/oss/pages/OssPage/EditorOssGraph/graph/NodeCore.tsx @@ -3,11 +3,11 @@ import { Overlay } from '@/components/Container'; import { IconConsolidation, IconRSForm } from '@/components/Icons'; import { Indicator } from '@/components/View'; -import { useTooltipsStore } from '@/stores/tooltips'; import { globalIDs } from '@/utils/constants'; import { OperationType } from '../../../../backend/types'; import { type OssNodeInternal } from '../../../../models/ossLayout'; +import { useOperationTooltipStore } from '../../../../stores/operationTooltip'; // characters - threshold for long labels - small font const LONG_LABEL_CHARS = 14; @@ -17,7 +17,7 @@ interface NodeCoreProps { } export function NodeCore({ node }: NodeCoreProps) { - const setHover = useTooltipsStore(state => state.setActiveOperation); + const setHover = useOperationTooltipStore(state => state.setActiveOperation); const hasFile = !!node.data.operation.result; const longLabel = node.data.label.length > LONG_LABEL_CHARS; diff --git a/rsconcept/frontend/src/features/oss/pages/OssPage/OssPage.tsx b/rsconcept/frontend/src/features/oss/pages/OssPage/OssPage.tsx index 0ff838a6..122e910b 100644 --- a/rsconcept/frontend/src/features/oss/pages/OssPage/OssPage.tsx +++ b/rsconcept/frontend/src/features/oss/pages/OssPage/OssPage.tsx @@ -6,6 +6,7 @@ import { useParams } from 'react-router'; import { z } from 'zod'; import { urls, useBlockNavigation, useConceptNavigation } from '@/app'; +import { ConstituentaTooltip } from '@/features/rsform/components'; import { isAxiosError } from '@/backend/apiTransport'; import { TextURL } from '@/components/Control'; @@ -13,6 +14,8 @@ import { type ErrorData } from '@/components/InfoError'; import { useQueryStrings } from '@/hooks/useQueryStrings'; import { useModificationStore } from '@/stores/modification'; +import { OperationTooltip } from '../../components/OperationTooltip'; + import { OssEditState, OssTabID } from './OssEditContext'; import { OssTabs } from './OssTabs'; @@ -43,6 +46,8 @@ export function OssPage() { return ( + + diff --git a/rsconcept/frontend/src/features/oss/stores/operationTooltip.ts b/rsconcept/frontend/src/features/oss/stores/operationTooltip.ts new file mode 100644 index 00000000..04c83a64 --- /dev/null +++ b/rsconcept/frontend/src/features/oss/stores/operationTooltip.ts @@ -0,0 +1,13 @@ +import { create } from 'zustand'; + +import { type IOperation } from '../models/oss'; + +interface OperationTooltipStore { + activeOperation: IOperation | null; + setActiveOperation: (value: IOperation | null) => void; +} + +export const useOperationTooltipStore = create()(set => ({ + activeOperation: null, + setActiveOperation: value => set({ activeOperation: value }) +})); diff --git a/rsconcept/frontend/src/features/rsform/components/BadgeConstituenta.tsx b/rsconcept/frontend/src/features/rsform/components/BadgeConstituenta.tsx index 92a2229c..7fdcac5e 100644 --- a/rsconcept/frontend/src/features/rsform/components/BadgeConstituenta.tsx +++ b/rsconcept/frontend/src/features/rsform/components/BadgeConstituenta.tsx @@ -1,12 +1,12 @@ import clsx from 'clsx'; import { type Styling } from '@/components/props'; -import { useTooltipsStore } from '@/stores/tooltips'; import { APP_COLORS } from '@/styling/colors'; import { globalIDs } from '@/utils/constants'; import { colorFgCstStatus } from '../colors'; import { CstClass, type IConstituenta } from '../models/rsform'; +import { useCstTooltipStore } from '../stores/cstTooltip'; interface BadgeConstituentaProps extends Styling { /** Prefix for tooltip ID. */ @@ -20,7 +20,7 @@ interface BadgeConstituentaProps extends Styling { * Displays a badge with a constituenta alias and information tooltip. */ export function BadgeConstituenta({ value, prefixID, className, style }: BadgeConstituentaProps) { - const setActiveCst = useTooltipsStore(state => state.setActiveCst); + const setActiveCst = useCstTooltipStore(state => state.setActiveCst); return (
state.activeCst); + return ( + + ); +} diff --git a/rsconcept/frontend/src/features/rsform/components/index.tsx b/rsconcept/frontend/src/features/rsform/components/index.tsx index a719d782..18532e98 100644 --- a/rsconcept/frontend/src/features/rsform/components/index.tsx +++ b/rsconcept/frontend/src/features/rsform/components/index.tsx @@ -1,3 +1,4 @@ +export { ConstituentaTooltip } from './ConstituentaTooltip'; export { PickMultiConstituenta } from './PickMultiConstituenta'; export { PickSubstitutions } from './PickSubstitutions'; export { ToolbarRSFormCard } from './ToolbarRSFormCard'; diff --git a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/ViewHidden.tsx b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/ViewHidden.tsx index 6821b0c5..d9ba5f62 100644 --- a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/ViewHidden.tsx +++ b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/ViewHidden.tsx @@ -7,12 +7,12 @@ import { MiniButton } from '@/components/Control'; import { IconDropArrow, IconDropArrowUp } from '@/components/Icons'; import { useWindowSize } from '@/hooks/useWindowSize'; import { useFitHeight } from '@/stores/appLayout'; -import { useTooltipsStore } from '@/stores/tooltips'; import { APP_COLORS } from '@/styling/colors'; import { globalIDs, PARAMETER, prefixes } from '@/utils/constants'; import { colorBgGraphNode } from '../../../colors'; import { type IConstituenta } from '../../../models/rsform'; +import { useCstTooltipStore } from '../../../stores/cstTooltip'; import { useTermGraphStore } from '../../../stores/termGraph'; import { useRSEdit } from '../RSEditContext'; @@ -28,7 +28,7 @@ export function ViewHidden({ items }: ViewHiddenProps) { const localSelected = items.filter(id => selected.includes(id)); const isFolded = useTermGraphStore(state => state.foldHidden); const toggleFolded = useTermGraphStore(state => state.toggleFoldHidden); - const setActiveCst = useTooltipsStore(state => state.setActiveCst); + const setActiveCst = useCstTooltipStore(state => state.setActiveCst); const hiddenHeight = useFitHeight(windowSize.isSmall ? '10.4rem + 2px' : '12.5rem + 2px'); function handleClick(event: React.MouseEvent, cstID: number) { diff --git a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/RSFormPage.tsx b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/RSFormPage.tsx index f3a9208e..ad312acf 100644 --- a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/RSFormPage.tsx +++ b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/RSFormPage.tsx @@ -14,6 +14,8 @@ import { type ErrorData } from '@/components/InfoError'; import { useQueryStrings } from '@/hooks/useQueryStrings'; import { useModificationStore } from '@/stores/modification'; +import { ConstituentaTooltip } from '../../components/ConstituentaTooltip'; + import { RSEditState, RSTabID } from './RSEditContext'; import { RSTabs } from './RSTabs'; @@ -57,6 +59,7 @@ export function RSFormPage() { )} > + diff --git a/rsconcept/frontend/src/features/rsform/stores/cstTooltip.ts b/rsconcept/frontend/src/features/rsform/stores/cstTooltip.ts new file mode 100644 index 00000000..ee0e563a --- /dev/null +++ b/rsconcept/frontend/src/features/rsform/stores/cstTooltip.ts @@ -0,0 +1,13 @@ +import { create } from 'zustand'; + +import { type IConstituenta } from '../models/rsform'; + +interface CstTooltipStore { + activeCst: IConstituenta | null; + setActiveCst: (value: IConstituenta | null) => void; +} + +export const useCstTooltipStore = create()(set => ({ + activeCst: null, + setActiveCst: value => set({ activeCst: value }) +})); diff --git a/rsconcept/frontend/src/stores/tooltips.ts b/rsconcept/frontend/src/stores/tooltips.ts deleted file mode 100644 index 67a69723..00000000 --- a/rsconcept/frontend/src/stores/tooltips.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { create } from 'zustand'; - -import { type IOperation } from '@/features/oss'; -import { type IConstituenta } from '@/features/rsform'; - -interface TooltipsStore { - activeCst: IConstituenta | null; - setActiveCst: (value: IConstituenta | null) => void; - activeOperation: IOperation | null; - setActiveOperation: (value: IOperation | null) => void; -} - -export const useTooltipsStore = create()(set => ({ - activeCst: null, - setActiveCst: value => set({ activeCst: value }), - - activeOperation: null, - setActiveOperation: value => set({ activeOperation: value }) -}));