From ceba6b882f40cf2b7068de058e12aacef7911066 Mon Sep 17 00:00:00 2001 From: Ivan <8611739+IRBorisov@users.noreply.github.com> Date: Wed, 21 Aug 2024 20:21:23 +0300 Subject: [PATCH] M: Improve graph UI --- rsconcept/frontend/eslint.config.js | 10 ++- rsconcept/frontend/src/components/Icons.tsx | 1 + .../select/PickMultiConstituenta.tsx | 3 +- .../select/ToolbarGraphSelection.tsx | 36 +++++++- rsconcept/frontend/src/models/rsformAPI.ts | 3 +- .../pages/ManualsPage/items/HelpThesaurus.tsx | 83 ++++++++++++++++++- .../EditorConstituenta/ControlsOverlay.tsx | 2 +- .../EditorTermGraph/EditorTermGraph.tsx | 3 +- .../RSFormPage/EditorTermGraph/TermGraph.tsx | 46 +++++----- 9 files changed, 151 insertions(+), 36 deletions(-) diff --git a/rsconcept/frontend/eslint.config.js b/rsconcept/frontend/eslint.config.js index ac9a52da..84572b68 100644 --- a/rsconcept/frontend/eslint.config.js +++ b/rsconcept/frontend/eslint.config.js @@ -11,7 +11,15 @@ export default [ ...typescriptPlugin.configs.recommendedTypeChecked, ...typescriptPlugin.configs.stylisticTypeChecked, { - ignores: ['**/parser.ts', '**/node_modules/**', '**/public/**', 'eslint.config.js'] + ignores: [ + '**/parser.ts', + '**/node_modules/**', + '**/public/**', + '**/dist/**', + 'eslint.config.js', + 'tailwind.config.js', + 'postcss.config.js' + ] }, { languageOptions: { diff --git a/rsconcept/frontend/src/components/Icons.tsx b/rsconcept/frontend/src/components/Icons.tsx index f173f330..0343ab82 100644 --- a/rsconcept/frontend/src/components/Icons.tsx +++ b/rsconcept/frontend/src/components/Icons.tsx @@ -119,6 +119,7 @@ export { BiCollapse as IconGraphCollapse } from 'react-icons/bi'; export { BiExpand as IconGraphExpand } from 'react-icons/bi'; export { LuMaximize as IconGraphMaximize } from 'react-icons/lu'; export { BiGitBranch as IconGraphInputs } from 'react-icons/bi'; +export { TbEarScan as IconGraphInverse } from 'react-icons/tb'; export { BiGitMerge as IconGraphOutputs } from 'react-icons/bi'; export { LuAtom as IconGraphCore } from 'react-icons/lu'; export { LuRotate3D as IconRotate3D } from 'react-icons/lu'; diff --git a/rsconcept/frontend/src/components/select/PickMultiConstituenta.tsx b/rsconcept/frontend/src/components/select/PickMultiConstituenta.tsx index ee7f0eb8..1e3cbf81 100644 --- a/rsconcept/frontend/src/components/select/PickMultiConstituenta.tsx +++ b/rsconcept/frontend/src/components/select/PickMultiConstituenta.tsx @@ -82,7 +82,8 @@ function PickMultiConstituenta({ id, schema, prefixID, rows, selected, setSelect {schema ? ( isBasicConcept(cst.cst_type)).map(cst => cst.id)} + isCore={cstID => isBasicConcept(schema.cstByID.get(cstID)?.cst_type)} + isOwned={cstID => !schema.cstByID.get(cstID)?.is_inherited ?? false} setSelected={setSelected} emptySelection={selected.length === 0} className='w-full ml-8' diff --git a/rsconcept/frontend/src/components/select/ToolbarGraphSelection.tsx b/rsconcept/frontend/src/components/select/ToolbarGraphSelection.tsx index 3a074964..6258a384 100644 --- a/rsconcept/frontend/src/components/select/ToolbarGraphSelection.tsx +++ b/rsconcept/frontend/src/components/select/ToolbarGraphSelection.tsx @@ -1,4 +1,5 @@ import clsx from 'clsx'; +import { useCallback } from 'react'; import { Graph } from '@/models/Graph'; @@ -7,8 +8,10 @@ import { IconGraphCore, IconGraphExpand, IconGraphInputs, + IconGraphInverse, IconGraphMaximize, IconGraphOutputs, + IconPredecessor, IconReset } from '../Icons'; import { CProps } from '../props'; @@ -16,7 +19,8 @@ import MiniButton from '../ui/MiniButton'; interface ToolbarGraphSelectionProps extends CProps.Styling { graph: Graph; - core: number[]; + isCore: (item: number) => boolean; + isOwned: (item: number) => boolean; setSelected: React.Dispatch>; emptySelection?: boolean; } @@ -24,11 +28,27 @@ interface ToolbarGraphSelectionProps extends CProps.Styling { function ToolbarGraphSelection({ className, graph, - core, + isCore, + isOwned, setSelected, emptySelection, ...restProps }: ToolbarGraphSelectionProps) { + const handleSelectCore = useCallback(() => { + const core = [...graph.nodes.keys()].filter(isCore); + setSelected([...core, ...graph.expandInputs(core)]); + }, [setSelected, graph, isCore]); + + const handleSelectOwned = useCallback( + () => setSelected([...graph.nodes.keys()].filter(isOwned)), + [setSelected, graph, isOwned] + ); + + const handleInvertSelection = useCallback( + () => setSelected(prev => [...graph.nodes.keys()].filter(item => !prev.includes(item))), + [setSelected, graph] + ); + return (
setSelected(prev => [...prev, ...graph.expandOutputs(prev)])} disabled={emptySelection} /> + } + onClick={handleInvertSelection} + /> } - onClick={() => setSelected([...core, ...graph.expandInputs(core)])} + onClick={handleSelectCore} + /> + } + onClick={handleSelectOwned} />
); diff --git a/rsconcept/frontend/src/models/rsformAPI.ts b/rsconcept/frontend/src/models/rsformAPI.ts index 2a6aac38..f209db0f 100644 --- a/rsconcept/frontend/src/models/rsformAPI.ts +++ b/rsconcept/frontend/src/models/rsformAPI.ts @@ -202,7 +202,7 @@ export function guessCstType(hint: string, defaultType: CstType = CstType.TERM): /** * Evaluate if {@link CstType} is basic concept. */ -export function isBasicConcept(type: CstType): boolean { +export function isBasicConcept(type?: CstType): boolean { // prettier-ignore switch (type) { case CstType.BASE: return true; @@ -213,6 +213,7 @@ export function isBasicConcept(type: CstType): boolean { case CstType.FUNCTION: return false; case CstType.PREDICATE: return false; case CstType.THEOREM: return false; + case undefined: return false; } } diff --git a/rsconcept/frontend/src/pages/ManualsPage/items/HelpThesaurus.tsx b/rsconcept/frontend/src/pages/ManualsPage/items/HelpThesaurus.tsx index 7e65e89b..f9242858 100644 --- a/rsconcept/frontend/src/pages/ManualsPage/items/HelpThesaurus.tsx +++ b/rsconcept/frontend/src/pages/ManualsPage/items/HelpThesaurus.tsx @@ -1,4 +1,4 @@ -import { IconRSForm } from '@/components/Icons'; +import { IconChild, IconPredecessor, IconRSForm } from '@/components/Icons'; import LinkTopic from '@/components/ui/LinkTopic'; import { HelpTopic } from '@/models/miscellaneous'; @@ -17,8 +17,8 @@ function HelpThesaurus() {

Концептуальная схема

{' '} - (система определений, КС) – совокупность - отдельных понятий и утверждений, а также связей между ними, задаваемых определениями. + (система определений, КС) – + совокупность отдельных понятий и утверждений, а также связей между ними, задаваемых определениями.

Экспликация КС – изложение (процесс и результат) концептуальной схемы с помощью заданного языка описания – @@ -30,7 +30,82 @@ function HelpThesaurus() {

Конституента

-

Раздел в разработке...

+

+ Конституента – это выделенная часть КС, являющаяся отдельным понятием, схемой построения понятия, либо + утверждением, связывающим введенные понятия.{' '} + в родоструктурной экспликации + являются Термин, Конвенция, Типизация (Структура), Формальное определение, Текстовое определение, Комментарий. +

+ + +
+ + + +
+ + + +
+ + + +
+ +

Операционная схема синтеза

Раздел в разработке...

diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/ControlsOverlay.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/ControlsOverlay.tsx index 85cc3bd5..45bcb38f 100644 --- a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/ControlsOverlay.tsx +++ b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/ControlsOverlay.tsx @@ -37,7 +37,7 @@ function ControlsOverlay({ constituenta, disabled, modified, processing, onRenam )} > Имя - {constituenta.alias} + {constituenta?.alias ?? ''} {!disabled || processing ? ( isBasicConcept(cst.cst_type)).map(cst => cst.id)} + isCore={cstID => isBasicConcept(controller.schema?.cstByID.get(cstID)?.cst_type)} + isOwned={cstID => !controller.schema?.cstByID.get(cstID)?.is_inherited ?? false} setSelected={controller.setSelected} emptySelection={controller.selected.length === 0} /> diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/TermGraph.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/TermGraph.tsx index a8864189..ec2e5bfe 100644 --- a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/TermGraph.tsx +++ b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/TermGraph.tsx @@ -114,30 +114,28 @@ function TermGraph({ const canvasHeight = useMemo(() => calculateHeight('1.75rem + 4px'), [calculateHeight]); return ( -
-
- -
+
+
); }