Minor UI improvements

rsconcept/frontend/src/components/DataTable/index.tsx

@@ -27,6 +27,7 @@ extends Pick<TableOptions<TData>,
 > {
   dense?: boolean
   headPosition?: string
+  noFooter?: boolean // Disables footer rendering
   conditionalRowStyles?: IConditionalStyle<TData>[]
   onRowClicked?: (rowData: TData, event: React.MouseEvent<Element, MouseEvent>) => void
   onRowDoubleClicked?: (rowData: TData, event: React.MouseEvent<Element, MouseEvent>) => void
@@ -54,7 +55,7 @@ extends Pick<TableOptions<TData>,
  * No sticky header if omitted
 */
 export default function DataTable<TData extends RowData>({
-  dense, headPosition, conditionalRowStyles,
+  dense, headPosition, conditionalRowStyles, noFooter,
   onRowClicked, onRowDoubleClicked, noDataComponent,
 
   enableRowSelection,
@@ -115,8 +116,7 @@ export default function DataTable<TData extends RowData>({
         className={`clr-app shadow-border`}
         style={{
           top: headPosition,
-          position: 'sticky',
+          position: 'sticky'
-          visibility: !isEmpty ? 'visible' : 'hidden'
         }}
       >
       {tableImpl.getHeaderGroups().map(
@@ -184,6 +184,7 @@ export default function DataTable<TData extends RowData>({
       ))}
       </tbody>
       
+      {!noFooter && 
       <tfoot>
       {tableImpl.getFooterGroups().map(
       (footerGroup: HeaderGroup<TData>) => (
@@ -198,7 +199,7 @@ export default function DataTable<TData extends RowData>({
           ))}
         </tr>
         ))}
-      </tfoot>
+      </tfoot>}
     </table>
     
     {enablePagination && !isEmpty &&

rsconcept/frontend/src/components/Help/HelpConstituenta.tsx

@@ -5,7 +5,7 @@ function HelpConstituenta() {
   return (
   <div>
     <h1>Подсказки</h1>
-    <p><b className='text-warning'>Изменения сохраняются ПОСЛЕ нажатия на кнопку снизу или справа вверху</b></p>
+    <p><b className='text-warning'>Изменения сохраняются ПОСЛЕ нажатия на соответствующую кнопку снизу или по центру</b></p>
     <p><b>Клик на формальное выражение</b> - обратите внимание на кнопки снизу<br/>Горячие клавиши указаны в подсказках при наведении</p>
     <p><b>Поля Термин и Определение</b> - Ctrl + Пробел открывает диалог редактирования отсылок<br/>Перед открытием диалога переместите текстовый курсор на заменяемое слово или ссылку</p>
     <p><b>Список конституент справа</b> - обратите внимание на настройки фильтрации</p>

rsconcept/frontend/src/components/Icons.tsx

@@ -270,8 +270,10 @@ export function ArrowRightIcon(props: IconProps) {
 
 export function CloneIcon(props: IconProps) {
   return (
-    <IconSVG viewbox='0 0 512 512' {...props}>
+    <IconSVG viewbox='0 0 24 24' {...props}>
-      <path d='M64 464h224c8.8 0 16-7.2 16-16v-64h48v64c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V224c0-35.3 28.65-64 64-64h64v48H64c-8.84 0-16 7.2-16 16v224c0 8.8 7.16 16 16 16zm96-400c0-35.35 28.7-64 64-64h224c35.3 0 64 28.65 64 64v224c0 35.3-28.7 64-64 64H224c-35.3 0-64-28.7-64-64V64zm64 240h224c8.8 0 16-7.2 16-16V64c0-8.84-7.2-16-16-16H224c-8.8 0-16 7.16-16 16v224c0 8.8 7.2 16 16 16z' />
+      <path d='M11 10H9v3H6v2h3v3h2v-3h3v-2h-3z' />
+      <path d='M4 22h12c1.103 0 2-.897 2-2V8c0-1.103-.897-2-2-2H4c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2zM4 8h12l.002 12H4V8z' />
+      <path d='M20 2H8v2h12v12h2V4c0-1.103-.897-2-2-2z' />
     </IconSVG>
   );
 }
@@ -279,7 +281,8 @@ export function CloneIcon(props: IconProps) {
 export function DumpBinIcon(props: IconProps) {
   return (
     <IconSVG viewbox='0 0 24 24' {...props}>
-      <path d='M19 4h-3.5l-1-1h-5l-1 1H5v2h14M6 19a2 2 0 002 2h8a2 2 0 002-2V7H6v12z' />
+      <path d='M5 20a2 2 0 002 2h10a2 2 0 002-2V8h2V6h-4V4a2 2 0 00-2-2H9a2 2 0 00-2 2v2H3v2h2zM9 4h6v2H9zM8 8h9v12H7V8z' />
+      <path d='M9 10h2v8H9zm4 0h2v8h-2z' />
     </IconSVG>
   );
 }
@@ -295,7 +298,7 @@ export function ArrowsRotateIcon(props: IconProps) {
 export function SaveIcon(props: IconProps) {
   return (
     <IconSVG viewbox='0 0 24 24' {...props}>
-      <path d='M19.35 10.04A7.49 7.49 0 0012 4C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 000 14a6 6 0 006 6h13a5 5 0 005-5c0-2.64-2.05-4.78-4.65-4.96M19 18H6a4 4 0 01-4-4c0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95A5.469 5.469 0 0112 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11A2.98 2.98 0 0122 15a3 3 0 01-3 3M8 13h2.55v3h2.9v-3H16l-4-4-4 4z' />
+      <path d='M5 21h14a2 2 0 002-2V8a1 1 0 00-.29-.71l-4-4A1 1 0 0016 3H5a2 2 0 00-2 2v14a2 2 0 002 2zm10-2H9v-5h6zM13 7h-2V5h2zM5 5h2v4h8V5h.59L19 8.41V19h-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5H5z' />
     </IconSVG>
   );
 }
@@ -303,8 +306,8 @@ export function SaveIcon(props: IconProps) {
 export function HelpIcon(props: IconProps) {
   return (
     <IconSVG viewbox='0 0 24 24' {...props}>
-      <path d='M12 6a3.939 3.939 0 00-3.934 3.934h2C10.066 8.867 10.934 8 12 8s1.934.867 1.934 1.934c0 .598-.481 1.032-1.216 1.626a9.208 9.208 0 00-.691.599c-.998.997-1.027 2.056-1.027 2.174V15h2l-.001-.633c.001-.016.033-.386.441-.793.15-.15.339-.3.535-.458.779-.631 1.958-1.584 1.958-3.182A3.937 3.937 0 0012 6zm-1 10h2v2h-2z' />
       <path d='M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z' />
+      <path d='M11 11h2v6h-2zm0-4h2v2h-2z' />
     </IconSVG>
   );
 }

rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx

@@ -6,7 +6,7 @@ import MiniButton from '../../components/Common/MiniButton';
 import SubmitButton from '../../components/Common/SubmitButton';
 import TextArea from '../../components/Common/TextArea';
 import HelpConstituenta from '../../components/Help/HelpConstituenta';
-import { DumpBinIcon, HelpIcon, PenIcon, SaveIcon, SmallPlusIcon } from '../../components/Icons';
+import { CloneIcon, DumpBinIcon, HelpIcon, PenIcon, SaveIcon, SmallPlusIcon } from '../../components/Icons';
 import RefsInput from '../../components/RefsInput';
 import { useRSForm } from '../../context/RSFormContext';
 import useWindowSize from '../../hooks/useWindowSize';
@@ -123,6 +123,22 @@ function EditorConstituenta({
     onCreateCst(data);
   }
 
+  function handleCloneCst() {
+    if (!activeID || !schema || !activeCst) {
+      return;
+    }
+    const data: ICstCreateData = {
+      insert_after: activeID,
+      cst_type: activeCst.cst_type,
+      alias: '',
+      term_raw: activeCst.term_raw,
+      definition_formal: activeCst.definition_formal,
+      definition_raw: activeCst.definition_raw,
+      convention: activeCst.convention,
+    };
+    onCreateCst(data, true);
+  }
+
   function handleRename() {
     if (!activeID || !activeCst) {
       return;
@@ -162,7 +178,7 @@ function EditorConstituenta({
             icon={<PenIcon size={4} color={isEnabled ? 'text-primary' : ''} />}
           />
         </div>
-        <div className='flex justify-end'>
+        <div className='flex justify-end items-center'>
           <MiniButton
             tooltip='Сохранить изменения'
             disabled={!isModified || !isEnabled}
@@ -170,11 +186,17 @@ function EditorConstituenta({
             onClick={() => handleSubmit()}
           />
           <MiniButton
-            tooltip='Создать конституенты после данной'
+            tooltip='Создать конституенту после данной'
             disabled={!isEnabled}
             onClick={handleCreateCst}
             icon={<SmallPlusIcon size={5} color={isEnabled ? 'text-success' : ''} />} 
           />
+          <MiniButton
+            tooltip='Клонировать конституенту'
+            disabled={!isEnabled}
+            onClick={handleCloneCst}
+            icon={<CloneIcon size={5} color={isEnabled ? 'text-success' : ''} />} 
+          />
           <MiniButton
             tooltip='Удалить редактируемую конституенту'
             disabled={!isEnabled}
@@ -249,7 +271,7 @@ function EditorConstituenta({
       </div>
     </form>
     {(windowSize.width ?? 0) >= SIDELIST_HIDE_THRESHOLD &&
-    <div className='self-stretch w-full border mt-10'>
+    <div className='w-full h-fit border mt-10'>
       <ViewSideConstituents
         expression={expression}
         baseHeight={UNFOLDED_HEIGHT}

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

@@ -6,7 +6,6 @@ import { GraphCanvas, GraphCanvasRef, GraphEdge,
 import Button from '../../components/Common/Button';
 import Checkbox from '../../components/Common/Checkbox';
 import ConceptTooltip from '../../components/Common/ConceptTooltip';
-import Divider from '../../components/Common/Divider';
 import MiniButton from '../../components/Common/MiniButton';
 import SelectSingle from '../../components/Common/SelectSingle';
 import HelpTermGraph from '../../components/Help/HelpTermGraph';
@@ -354,97 +353,121 @@ function EditorTermGraph({ onOpenEdit, onCreateCst, onDeleteCst }: EditorTermGra
     : 'calc(100vh - 3rem - 4px)';
   }, [noNavigation]);
 
+  const dismissedHeight = useMemo(
+    () => {
+      return !noNavigation ? 
+        'calc(100vh - 28rem - 4px)'
+      : 'calc(100vh - 22.2rem - 4px)';
+    }, [noNavigation]);
+
   const dismissedStyle = useCallback(
   (cstID: number) => {
     return selectedDismissed.includes(cstID) ? {outlineWidth: '2px', outlineStyle: 'solid'}: {};
   }, [selectedDismissed]);
 
-  return (
+  return (<>
-    <div className='flex justify-between w-full outline-none' tabIndex={0} onKeyDown={handleKeyDown}>
     {showOptions && 
     <DlgGraphOptions
       hideWindow={() => setShowOptions(false)}
       initial={getOptions()}
       onConfirm={handleChangeOptions}
     />}
-    <div className='flex flex-col border min-w-[13.5rem] max-w-[13.5rem] px-2 pb-2 mt-4 text-sm select-none h-fit'>
-      {hoverCst && 
-      <div className='relative'>
-        <InfoConstituenta
-          data={hoverCst}
-          className='absolute top-[2.2rem] left-[2.6rem] z-tooltip w-[25rem] min-h-[11rem] overflow-y-auto border h-fit clr-app px-3' 
-        />
-      </div>}
 
-      <div className='flex items-center justify-between py-1'>
+    <div className='relative w-full z-pop'>
-        <div className='mr-3 text-base'>
+    <div className='absolute top-0 right-0 flex items-start justify-center w-full'>
-          Выбор {allSelected.length} из {schema?.stats?.count_all ?? 0}
+      <MiniButton
-        </div>
+        tooltip='Новая конституента'
-        <div className='min-w-fit'>
+        icon={<SmallPlusIcon color={isEditable ? 'text-success': ''} size={5}/>}
-          <MiniButton
+        disabled={!isEditable}
-            tooltip='Новая конституента'
+        onClick={handleCreateCst}
-            icon={<SmallPlusIcon color={isEditable ? 'text-success': ''} size={5}/>}
+      />
-            disabled={!isEditable}
+      <MiniButton
-            onClick={handleCreateCst}
+        tooltip='Удалить выбранные'
-          />
+        icon={<DumpBinIcon color={isEditable && !nothingSelected ? 'text-warning' : ''} size={5}/>}
-          <MiniButton
+        disabled={!isEditable || nothingSelected}
-            tooltip='Удалить выбранные'
+        onClick={handleDeleteCst}
-            icon={<DumpBinIcon color={isEditable && !nothingSelected ? 'text-warning' : ''} size={5}/>}
+      />
-            disabled={!isEditable || nothingSelected}
+      <MiniButton
-            onClick={handleDeleteCst}
+        icon={<ArrowsRotateIcon size={5} />}
-          />
+        tooltip='Восстановить камеру'
-        </div>
+        onClick={handleResetViewpoint}
+      />
+      <div className='px-1 py-1' id='items-graph-help' >
+        <HelpIcon color='text-primary' size={5} />
       </div>
-      <div className='flex items-center w-full gap-1'>
+    </div>
-        <Button
+    </div>
-          icon={<FilterCogIcon size={6} />}
+
-          dense
+    <ConceptTooltip anchorSelect='#items-graph-help'>
-          tooltip='Настройки фильтрации узлов и связей'
+      <div className='text-sm max-w-[calc(100vw-20rem)]'>
-          dimensions='min-h-[2.3rem] min-w-[2.3rem]'
+        <HelpTermGraph />
-          onClick={() => setShowOptions(true)}
+      </div>
-        />
+    </ConceptTooltip>
+    
+    <div className='flex justify-between w-full outline-none' tabIndex={0} onKeyDown={handleKeyDown}>
+    <div className='flex flex-col gap-4 max-w-[13.5rem] min-w-[13.5rem]'>
+      <div className='flex flex-col border px-2 pb-2 mt-4 text-sm select-none h-fit'>
+        {hoverCst && 
+        <div className='relative'>
+          <InfoConstituenta
+            data={hoverCst}
+            className='absolute top-[2.2rem] left-[2.6rem] z-tooltip w-[25rem] min-h-[11rem] overflow-y-auto border h-fit clr-app px-3' 
+          />
+        </div>}
+        
+        <div className='flex items-center justify-between py-1'>
+          <div className='mr-3 text-base'>
+            Выбор {allSelected.length} из {schema?.stats?.count_all ?? 0}
+          </div>
+        </div>
+        <div className='flex items-center w-full gap-1'>
+          <Button
+            icon={<FilterCogIcon size={6} />}
+            dense
+            tooltip='Настройки фильтрации узлов и связей'
+            dimensions='min-h-[2.3rem] min-w-[2.3rem]'
+            onClick={() => setShowOptions(true)}
+          />
+          <SelectSingle
+            className='min-w-[9.8rem]'
+            options={SelectorGraphColoring}
+            isSearchable={false}
+            placeholder='Выберите цвет'
+            value={coloringScheme ? { value: coloringScheme, label: mapLabelColoring.get(coloringScheme) } : null}
+            onChange={data => setColoringScheme(data?.value ?? SelectorGraphColoring[0].value)}
+          />
+        </div>
         <SelectSingle
-          className='min-w-[9.8rem]'
+          className='w-full mt-1'
-          options={SelectorGraphColoring}
+          options={SelectorGraphLayout}
           isSearchable={false}
-          placeholder='Выберите цвет'
+          placeholder='Способ расположения'
-          value={coloringScheme ? { value: coloringScheme, label: mapLabelColoring.get(coloringScheme) } : null}
+          value={layout ? { value: layout, label: mapLableLayout.get(layout) } : null}
-          onChange={data => setColoringScheme(data?.value ?? SelectorGraphColoring[0].value)}
+          onChange={data => handleChangeLayout(data?.value ?? SelectorGraphLayout[0].value)}
         />
+        <div className='flex flex-col gap-1 mt-2'>
+          <Checkbox
+            label='Скрыть текст' 
+            value={noTerms} 
+            setValue={ value => setNoTerms(value) }
+          />
+          <Checkbox
+            label='Транзитивная редукция' 
+            value={noTransitive} 
+            setValue={ value => setNoTransitive(value) }
+          />
+          <Checkbox
+            disabled={!is3D}
+            label='Анимация вращения' 
+            value={orbit} 
+            setValue={ value => setOrbit(value) }
+          />
+        </div>
       </div>
-      <SelectSingle
-        className='w-full mt-1'
-        options={SelectorGraphLayout}
-        isSearchable={false}
-        placeholder='Способ расположения'
-        value={layout ? { value: layout, label: mapLableLayout.get(layout) } : null}
-        onChange={data => handleChangeLayout(data?.value ?? SelectorGraphLayout[0].value)}
-      />
-      <div className='flex flex-col gap-1 mt-2'>
-      <Checkbox
-        label='Скрыть текст' 
-        value={noTerms} 
-        setValue={ value => setNoTerms(value) }
-      />
-      <Checkbox
-        label='Транзитивная редукция' 
-        value={noTransitive} 
-        setValue={ value => setNoTransitive(value) }
-      />
-      <Checkbox
-        disabled={!is3D}
-        label='Анимация вращения' 
-        value={orbit} 
-        setValue={ value => setOrbit(value) }
-      />
-      </div>
-
-      {dismissed.length > 0 && <Divider margins='mt-3 mb-2' />}
-
       {dismissed.length > 0 &&
-      <div className='flex flex-col overflow-y-auto'>
+      <div className='flex border flex-col text-sm'>
-        <p className='text-center'><b>Скрытые конституенты</b></p>
+        <p className='text-center py-2'><b>Скрытые конституенты</b></p>
-        <div className='flex flex-wrap justify-center gap-2 py-2'>
+        <div className='flex flex-wrap justify-center pb-2 gap-2 overflow-y-auto' style={{height: dismissedHeight}}>
         {dismissed.map(cstID => {
           const cst = schema!.items.find(cst => cst.id === cstID)!;
           const adjustedColoring = coloringScheme === 'none' ? 'status': coloringScheme;
@@ -452,7 +475,7 @@ function EditorTermGraph({ onOpenEdit, onCreateCst, onDeleteCst }: EditorTermGra
             <div
               key={`${cst.alias}`}
               id={`${prefixes.cst_list}${cst.alias}`}
-              className='w-fit min-w-[3rem] rounded-md text-center cursor-pointer'
+              className='w-fit min-w-[3rem] rounded-md text-center cursor-pointer select-none'
               style={{ 
                 backgroundColor: getCstNodeColor(cst, adjustedColoring, colors),
                 ...dismissedStyle(cstID)
@@ -476,21 +499,6 @@ function EditorTermGraph({ onOpenEdit, onCreateCst, onDeleteCst }: EditorTermGra
       className='relative'
       style={{width: canvasWidth, height: canvasHeight}}
     >
-      <div className='relative top-4 right-0 flex mt-1 ml-2 z-pop flex-start'>
-        <div className='px-1 py-1' id='items-graph-help' >
-          <HelpIcon color='text-primary' size={5} />
-        </div>
-        <MiniButton
-          icon={<ArrowsRotateIcon size={5} />}
-          tooltip='Восстановить камеру'
-          onClick={handleResetViewpoint}
-        />
-      </div>
-      <ConceptTooltip anchorSelect='#items-graph-help'>
-        <div className='text-sm max-w-[calc(100vw-20rem)]'>
-        <HelpTermGraph />
-        </div>
-      </ConceptTooltip>
       <GraphCanvas
         draggable
         ref={graphRef}
@@ -516,7 +524,7 @@ function EditorTermGraph({ onOpenEdit, onCreateCst, onDeleteCst }: EditorTermGra
       />
     </div>
     </div>
-  </div>);
+  </div></>);
 }
 
 

rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx

@@ -30,7 +30,7 @@ import EditorItems from './EditorItems';
 import EditorRSForm from './EditorRSForm';
 import EditorTermGraph from './EditorTermGraph';
 import RSFormStats from './elements/RSFormStats';
-import RSTabsMenu from './RSTabsMenu';
+import RSTabsMenu from './elements/RSTabsMenu';
 
 export enum RSTabID {
   CARD = 0,

rsconcept/frontend/src/pages/RSFormPage/elements/RSTabsMenu.tsx

@@ -1,13 +1,13 @@
 import { useNavigate } from 'react-router-dom';
 
-import Button from '../../components/Common/Button';
+import Button from '../../../components/Common/Button';
-import Dropdown from '../../components/Common/Dropdown';
+import Dropdown from '../../../components/Common/Dropdown';
-import DropdownButton from '../../components/Common/DropdownButton';
+import DropdownButton from '../../../components/Common/DropdownButton';
-import DropdownCheckbox from '../../components/Common/DropdownCheckbox';
+import DropdownCheckbox from '../../../components/Common/DropdownCheckbox';
-import { CloneIcon, CrownIcon, DownloadIcon, DumpBinIcon, EyeIcon, EyeOffIcon, MenuIcon, PenIcon, PlusIcon, ShareIcon, UploadIcon } from '../../components/Icons';
+import { CloneIcon, CrownIcon, DownloadIcon, DumpBinIcon, EyeIcon, EyeOffIcon, MenuIcon, PenIcon, PlusIcon, ShareIcon, UploadIcon } from '../../../components/Icons';
-import { useAuth } from '../../context/AuthContext';
+import { useAuth } from '../../../context/AuthContext';
-import { useRSForm } from '../../context/RSFormContext';
+import { useRSForm } from '../../../context/RSFormContext';
-import useDropdown from '../../hooks/useDropdown';
+import useDropdown from '../../../hooks/useDropdown';
 
 interface RSTabsMenuProps {
   showUploadDialog: () => void

rsconcept/frontend/src/pages/RSFormPage/elements/ViewSideConstituents.tsx

@@ -102,7 +102,6 @@ function ViewSideConstituents({ expression, baseHeight, activeID, onOpenEdit }:
       filtered = applyGraphFilter(schema, activeID, filterSource);
     }
     if (filterText) {
-      console.log(filterText);
       filtered = filtered.filter((cst) => matchConstituenta(filterText, cst, filterMatch));
     }
     setFilteredData(filtered);
@@ -141,6 +140,7 @@ function ViewSideConstituents({ expression, baseHeight, activeID, onOpenEdit }:
       header: 'Имя',
       size: 65,
       minSize: 65,
+      footer: undefined,
       cell: props => {
         const cst = props.row.original;
         return (<>
@@ -282,6 +282,7 @@ function ViewSideConstituents({ expression, baseHeight, activeID, onOpenEdit }:
         conditionalRowStyles={conditionalRowStyles}
         headPosition='0'
         dense
+        noFooter
 
         enableHiding
         columnVisibility={columnVisibility}