F: Rework graph filter params dialog

rsconcept/frontend/src/dialogs/DlgGraphParams.tsx

@@ -1,109 +1,117 @@
 'use client';
 
+import { Controller, useForm } from 'react-hook-form';
+
 import { Checkbox } from '@/components/ui/Input';
 import { ModalForm } from '@/components/ui/Modal';
-import usePartialUpdate from '@/hooks/usePartialUpdate';
 import { GraphFilterParams } from '@/models/miscellaneous';
 import { CstType } from '@/models/rsform';
-import { useDialogsStore } from '@/stores/dialogs';
+import { useTermGraphStore } from '@/stores/termGraph';
 import { labelCstType } from '@/utils/labels';
 
-export interface DlgGraphParamsProps {
-  initial: GraphFilterParams;
-  onConfirm: (params: GraphFilterParams) => void;
-}
-
 function DlgGraphParams() {
-  const { initial, onConfirm } = useDialogsStore(state => state.props as DlgGraphParamsProps);
+  const params = useTermGraphStore(state => state.filter);
-  const [params, updateParams] = usePartialUpdate(initial);
+  const setParams = useTermGraphStore(state => state.setFilter);
 
-  function handleSubmit() {
+  const { handleSubmit, control } = useForm<GraphFilterParams>({
-    onConfirm(params);
+    defaultValues: { ...params }
-    return true;
+  });
+
+  function onSubmit(data: GraphFilterParams) {
+    setParams(data);
   }
 
   return (
     <ModalForm
       canSubmit
       header='Настройки графа термов'
-      onSubmit={handleSubmit}
+      onSubmit={event => void handleSubmit(onSubmit)(event)}
       submitText='Применить'
       className='flex gap-6 justify-between px-6 pb-3 w-[30rem]'
     >
       <div className='flex flex-col gap-1'>
         <h1 className='mb-2'>Преобразования</h1>
-        <Checkbox
+        <Controller
-          label='Скрыть текст'
+          control={control}
-          title='Не отображать термины'
+          name='noText'
-          value={params.noText}
+          render={({ field }) => <Checkbox {...field} label='Скрыть текст' title='Не отображать термины' />}
-          onChange={value => updateParams({ noText: value })}
         />
-        <Checkbox
+        <Controller
-          label='Скрыть несвязанные'
+          control={control}
-          title='Неиспользуемые конституенты'
+          name='noHermits'
-          value={params.noHermits}
+          render={({ field }) => <Checkbox {...field} label='Скрыть несвязанные' title='Неиспользуемые конституенты' />}
-          onChange={value => updateParams({ noHermits: value })}
         />
-        <Checkbox
+        <Controller
-          label='Скрыть шаблоны'
+          control={control}
-          titleHtml='Терм-функции и предикат-функции <br/>с параметризованными аргументами'
+          name='noTemplates'
-          value={params.noTemplates}
+          render={({ field }) => (
-          onChange={value => updateParams({ noTemplates: value })}
+            <Checkbox
+              {...field}
+              label='Скрыть шаблоны'
+              titleHtml='Терм-функции и предикат-функции <br/>с параметризованными аргументами'
+            />
+          )}
         />
-        <Checkbox
+        <Controller
-          label='Транзитивная редукция'
+          control={control}
-          titleHtml='Удалить связи, образующие <br/>транзитивные пути в графе'
+          name='noTransitive'
-          value={params.noTransitive}
+          render={({ field }) => (
-          onChange={value => updateParams({ noTransitive: value })}
+            <Checkbox
+              {...field}
+              label='Транзитивная редукция'
+              titleHtml='Удалить связи, образующие <br/>транзитивные пути в графе'
+            />
+          )}
         />
-        <Checkbox
+        <Controller
-          label='Свернуть порожденные'
+          control={control}
-          title='Не отображать порожденные понятия'
+          name='foldDerived'
-          value={params.foldDerived}
+          render={({ field }) => (
-          onChange={value => updateParams({ foldDerived: value })}
+            <Checkbox {...field} label='Свернуть порожденные' title='Не отображать порожденные понятия' />
+          )}
         />
       </div>
       <div className='flex flex-col gap-1'>
         <h1 className='mb-2'>Типы конституент</h1>
-        <Checkbox
+        <Controller
-          label={labelCstType(CstType.BASE)}
+          control={control}
-          value={params.allowBase}
+          name='allowBase'
-          onChange={value => updateParams({ allowBase: value })}
+          render={({ field }) => <Checkbox {...field} label={labelCstType(CstType.BASE)} />}
         />
-        <Checkbox
+        <Controller
-          label={labelCstType(CstType.STRUCTURED)}
+          control={control}
-          value={params.allowStruct}
+          name='allowStruct'
-          onChange={value => updateParams({ allowStruct: value })}
+          render={({ field }) => <Checkbox {...field} label={labelCstType(CstType.STRUCTURED)} />}
         />
-        <Checkbox
+        <Controller
-          label={labelCstType(CstType.TERM)}
+          control={control}
-          value={params.allowTerm}
+          name='allowTerm'
-          onChange={value => updateParams({ allowTerm: value })}
+          render={({ field }) => <Checkbox {...field} label={labelCstType(CstType.TERM)} />}
         />
-        <Checkbox
+        <Controller
-          label={labelCstType(CstType.AXIOM)}
+          control={control}
-          value={params.allowAxiom}
+          name='allowAxiom'
-          onChange={value => updateParams({ allowAxiom: value })}
+          render={({ field }) => <Checkbox {...field} label={labelCstType(CstType.AXIOM)} />}
         />
-        <Checkbox
+        <Controller
-          label={labelCstType(CstType.FUNCTION)}
+          control={control}
-          value={params.allowFunction}
+          name='allowFunction'
-          onChange={value => updateParams({ allowFunction: value })}
+          render={({ field }) => <Checkbox {...field} label={labelCstType(CstType.FUNCTION)} />}
         />
-        <Checkbox
+        <Controller
-          label={labelCstType(CstType.PREDICATE)}
+          control={control}
-          value={params.allowPredicate}
+          name='allowPredicate'
-          onChange={value => updateParams({ allowPredicate: value })}
+          render={({ field }) => <Checkbox {...field} label={labelCstType(CstType.PREDICATE)} />}
         />
-        <Checkbox
+        <Controller
-          label={labelCstType(CstType.CONSTANT)}
+          control={control}
-          value={params.allowConstant}
+          name='allowConstant'
-          onChange={value => updateParams({ allowConstant: value })}
+          render={({ field }) => <Checkbox {...field} label={labelCstType(CstType.CONSTANT)} />}
         />
-        <Checkbox
+        <Controller
-          label={labelCstType(CstType.THEOREM)}
+          control={control}
-          value={params.allowTheorem}
+          name='allowTheorem'
-          onChange={value => updateParams({ allowTheorem: value })}
+          render={({ field }) => <Checkbox {...field} label={labelCstType(CstType.THEOREM)} />}
         />
       </div>
     </ModalForm>

rsconcept/frontend/src/dialogs/DlgRenameCst.tsx

@@ -39,7 +39,6 @@ function DlgRenameCst() {
   const validated = alias !== target.alias && validateNewAlias(alias, cst_type, schema);
 
   function onSubmit(data: ICstRenameDTO) {
-    console.log(data);
     cstRename({ itemID: schema.id, data: data });
   }
 

rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/TGFlow.tsx

@@ -152,7 +152,7 @@ function TGFlow() {
 
   useEffect(() => {
     setNeedReset(true);
-  }, [controller.schema, filter.noText, focusCst, coloring, flow.viewportInitialized]);
+  }, [controller.schema, focusCst, coloring, filter]);
 
   useEffect(() => {
     if (!needReset || !flow.viewportInitialized) {
@@ -286,7 +286,7 @@ function TGFlow() {
         <ToolbarTermGraph
           noText={filter.noText}
           foldDerived={filter.foldDerived}
-          showParamsDialog={() => showParams({ initial: filter, onConfirm: setFilter })}
+          showParamsDialog={() => showParams()}
           onCreate={handleCreateCst}
           onDelete={handleDeleteCst}
           onFitView={() => setToggleResetView(prev => !prev)}

rsconcept/frontend/src/stores/dialogs.ts

@@ -14,7 +14,6 @@ import { DlgEditOperationProps } from '@/dialogs/DlgEditOperation/DlgEditOperati
 import { DlgEditReferenceProps } from '@/dialogs/DlgEditReference/DlgEditReference';
 import { DlgEditVersionsProps } from '@/dialogs/DlgEditVersions/DlgEditVersions';
 import { DlgEditWordFormsProps } from '@/dialogs/DlgEditWordForms/DlgEditWordForms';
-import { DlgGraphParamsProps } from '@/dialogs/DlgGraphParams';
 import { DlgInlineSynthesisProps } from '@/dialogs/DlgInlineSynthesis/DlgInlineSynthesis';
 import { DlgRelocateConstituentsProps } from '@/dialogs/DlgRelocateConstituents';
 import { DlgRenameCstProps } from '@/dialogs/DlgRenameCst';
@@ -47,7 +46,7 @@ interface DialogsStore {
   showCloneLibraryItem: (props: DlgCloneLibraryItemProps) => void;
   showCreateVersion: (props: DlgCreateVersionProps) => void;
   showDeleteOperation: (props: DlgDeleteOperationProps) => void;
-  showGraphParams: (props: DlgGraphParamsProps) => void;
+  showGraphParams: () => void;
   showRelocateConstituents: (props: DlgRelocateConstituentsProps) => void;
   showRenameCst: (props: DlgRenameCstProps) => void;
   showQR: (props: DlgShowQRProps) => void;
@@ -77,7 +76,7 @@ export const useDialogsStore = create<DialogsStore>()(set => ({
   showCloneLibraryItem: props => set({ active: DialogType.CLONE_LIBRARY_ITEM, props: props }),
   showCreateVersion: props => set({ active: DialogType.CREATE_VERSION, props: props }),
   showDeleteOperation: props => set({ active: DialogType.DELETE_OPERATION, props: props }),
-  showGraphParams: props => set({ active: DialogType.GRAPH_PARAMETERS, props: props }),
+  showGraphParams: () => set({ active: DialogType.GRAPH_PARAMETERS, props: undefined }),
   showRelocateConstituents: props => set({ active: DialogType.RELOCATE_CONSTITUENTS, props: props }),
   showRenameCst: props => set({ active: DialogType.RENAME_CONSTITUENTA, props: props }),
   showQR: props => set({ active: DialogType.SHOW_QR_CODE, props: props }),