106 lines
3.6 KiB
TypeScript
106 lines
3.6 KiB
TypeScript
'use client';
|
||
|
||
import { Controller, useForm } from 'react-hook-form';
|
||
|
||
import { MiniButton } from '@/components/control';
|
||
import { Checkbox } from '@/components/input';
|
||
import { ModalForm } from '@/components/modal';
|
||
|
||
import { CstType } from '../backend/types';
|
||
import { IconCstType } from '../components/icon-cst-type';
|
||
import { labelCstType } from '../labels';
|
||
import { cstTypeToFilterKey, type GraphFilterParams, useTermGraphStore } from '../stores/term-graph';
|
||
|
||
export function DlgGraphParams() {
|
||
const params = useTermGraphStore(state => state.filter);
|
||
const setParams = useTermGraphStore(state => state.setFilter);
|
||
|
||
const { handleSubmit, control } = useForm<GraphFilterParams>({
|
||
defaultValues: { ...params }
|
||
});
|
||
|
||
function onSubmit(data: GraphFilterParams) {
|
||
setParams(data);
|
||
}
|
||
|
||
return (
|
||
<ModalForm
|
||
header='Настройки графа термов'
|
||
onSubmit={event => void handleSubmit(onSubmit)(event)}
|
||
submitText='Применить'
|
||
className='flex gap-6 justify-between px-6 pb-3 w-120'
|
||
>
|
||
<div className='flex flex-col gap-1'>
|
||
<h1 className='mb-2'>Преобразования</h1>
|
||
<Controller
|
||
control={control}
|
||
name='noText'
|
||
render={({ field }) => <Checkbox {...field} label='Скрыть текст' title='Не отображать термины' />}
|
||
/>
|
||
<Controller
|
||
control={control}
|
||
name='foldDerived'
|
||
render={({ field }) => (
|
||
<Checkbox {...field} label='Скрыть порожденные' title='Не отображать порожденные понятия' />
|
||
)}
|
||
/>
|
||
<Controller
|
||
control={control}
|
||
name='noHermits'
|
||
render={({ field }) => <Checkbox {...field} label='Скрыть несвязанные' title='Неиспользуемые конституенты' />}
|
||
/>
|
||
<Controller
|
||
control={control}
|
||
name='noTemplates'
|
||
render={({ field }) => (
|
||
<Checkbox
|
||
{...field}
|
||
label='Скрыть шаблоны'
|
||
titleHtml='Терм-функции и предикат-функции <br/>с параметризованными аргументами'
|
||
/>
|
||
)}
|
||
/>
|
||
<Controller
|
||
control={control}
|
||
name='noTransitive'
|
||
render={({ field }) => (
|
||
<Checkbox
|
||
{...field}
|
||
label='Транзитивная редукция'
|
||
titleHtml='Удалить связи, образующие <br/>транзитивные пути в графе'
|
||
/>
|
||
)}
|
||
/>
|
||
</div>
|
||
<div className='flex flex-col gap-1'>
|
||
<h1 className='mb-1'>Типы конституент</h1>
|
||
<div>
|
||
{Object.values(CstType).map(cstType => {
|
||
const fieldName = cstTypeToFilterKey[cstType];
|
||
return (
|
||
<Controller
|
||
key={fieldName}
|
||
control={control}
|
||
name={fieldName}
|
||
render={({ field }) => (
|
||
<MiniButton
|
||
onClick={() => field.onChange(!field.value)}
|
||
title={labelCstType(cstType)}
|
||
icon={
|
||
<IconCstType
|
||
size='2rem'
|
||
value={cstType}
|
||
className={field.value ? 'text-constructive' : 'text-destructive'}
|
||
/>
|
||
}
|
||
/>
|
||
)}
|
||
/>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</ModalForm>
|
||
);
|
||
}
|