chore: optimize tsc

apps/web/tsconfig.json

@@ -20,6 +20,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
+    "incremental": true,
     "baseUrl": ".",
     "types": ["vite/client"],
     "paths": {
@@ -31,7 +32,16 @@
       "reselect": ["./node_modules/reselect"]
     }
   },
-  "exclude": ["node_modules", "public", "dist", "build"],
+  "exclude": [
+    "dist",
+    "build",
+    "node_modules",
+    "public",
+    "vitest.setup.ts", // excludes Vitest setup file
+    "tailwind.config.js", // excludes Tailwind CSS configuration file
+    "postcss.config.js", // excludes PostCSS configuration file
+    "tsconfig.tsbuildinfo" // excludes TypeScript build info file
+  ],
   "include": ["vite.config.ts", "../../libs/shared/lib/**/*", "../../libs/config/src/**/*", "src/**/*"],
   "files": ["vite.config.ts"],
   "references": [{ "path": "./tsconfig.node.json" }]

libs/shared/lib/data-access/store/visualizationSlice.ts

 import { createSelector, createSlice, PayloadAction } from '@reduxjs/toolkit';
 import type { RootState } from './store';
-import { globalConfigSchemaTypes, localConfigSchemaType } from '../../vis/Types';
+import { globalConfigSchemaTypes, localConfigSchemaType } from '../../vis/types';
 import { isEqual } from 'lodash-es';
 
 export enum Visualizations {

libs/shared/lib/vis/index.tsx

@@ -8,7 +8,7 @@ import {
   useVisualizationSettings,
   useVisualizationState,
 } from '@graphpolaris/shared/lib/data-access/store/hooks';
-import { localConfigPropTypes, globalConfigPropTypes, VISComponentType } from './Types';
+import { localConfigPropTypes, globalConfigPropTypes, VISComponentType } from './types';
 import { MatrixVisComponent, NodeLinkComponent, PaohVisComponent, RawJSONComponent, TableComponent } from './visualizations';
 
 // export * from './rawjsonvis';
@@ -27,60 +27,58 @@ export const Visualizations = {
   MatrixVis: MatrixVisComponent,
 };
 
-export const createVisualizationComponent = () => {
-  return () => {
-    const dispatch = useAppDispatch();
-    const vis = useVisualizationState();
-    const settings = useVisualizationSettings();
-    const graphQueryResult = useGraphQueryResult();
-    const schema = useSchemaGraph();
-    const ml = useML();
+export const VisualizationComponent = () => {
+  const dispatch = useAppDispatch();
+  const vis = useVisualizationState();
+  const settings = useVisualizationSettings();
+  const graphQueryResult = useGraphQueryResult();
+  const schema = useSchemaGraph();
+  const ml = useML();
 
-    const VisualizationComponent: VISComponentType = Visualizations[vis.activeVisualization];
+  const VisualizationComponent: VISComponentType = Visualizations[vis.activeVisualization];
 
-    useEffect(() => {
-      if (VisualizationComponent) {
-        dispatch(addVisualization({ id: VisualizationComponent.displayName, settings: VisualizationComponent.localConfigSchema }));
-      }
-    }, [dispatch, VisualizationComponent]);
-
-    if (!VisualizationComponent) {
-      return <div className="w-full h-full flex items-center justify-center">Visualization not found</div>;
+  useEffect(() => {
+    if (VisualizationComponent) {
+      dispatch(addVisualization({ id: VisualizationComponent.displayName, settings: VisualizationComponent.localConfigSchema }));
     }
+  }, [dispatch, VisualizationComponent]);
+
+  if (!VisualizationComponent) {
+    return <div className="w-full h-full flex items-center justify-center">Visualization not found</div>;
+  }
 
-    const globalConfig: globalConfigPropTypes =
-      settings.general &&
-      Object.keys(settings.general).reduce((propsObject, val) => {
-        return {
-          ...propsObject,
-          [val]: vis.settings.general[val].value,
-        };
-      }, {});
+  const globalConfig: globalConfigPropTypes =
+    settings.general &&
+    Object.keys(settings.general).reduce((propsObject, val) => {
+      return {
+        ...propsObject,
+        [val]: vis.settings.general[val].value,
+      };
+    }, {});
 
-    const displayName = vis.activeVisualization as keyof typeof Visualizations;
+  const displayName = vis.activeVisualization as keyof typeof Visualizations;
 
-    const localConfig: localConfigPropTypes<typeof displayName> =
-      settings[vis.activeVisualization] &&
-      (Object.keys(settings[vis.activeVisualization]).reduce((propsObject, val) => {
-        return {
-          ...propsObject,
-          [val]: vis.settings[vis.activeVisualization][val].value,
-        };
-      }, {}) as localConfigPropTypes<typeof displayName>);
+  const localConfig: localConfigPropTypes<typeof displayName> =
+    settings[vis.activeVisualization] &&
+    (Object.keys(settings[vis.activeVisualization]).reduce((propsObject, val) => {
+      return {
+        ...propsObject,
+        [val]: vis.settings[vis.activeVisualization][val].value,
+      };
+    }, {}) as localConfigPropTypes<typeof displayName>);
 
-    return (
-      localConfig && (
-        <div className="w-full h-full">
-          <VisualizationComponent.VIS
-            data={graphQueryResult}
-            schema={schema}
-            ml={ml}
-            dispatch={dispatch}
-            globalConfig={globalConfig}
-            localConfig={localConfig}
-          />
-        </div>
-      )
-    );
-  };
+  return (
+    localConfig && (
+      <div className="w-full h-full">
+        <VisualizationComponent.VIS
+          data={graphQueryResult}
+          schema={schema}
+          ml={ml}
+          dispatch={dispatch}
+          globalConfig={globalConfig}
+          localConfig={localConfig}
+        />
+      </div>
+    )
+  );
 };

libs/shared/lib/vis/panel/dialog.tsx

@@ -4,7 +4,7 @@ import { DialogProps } from '@graphpolaris/shared/lib/components/Dialog';
 import { useAppDispatch, useVisualizationState } from '@graphpolaris/shared/lib/data-access';
 import { updateGeneralSettings, updateVisualizationSettings } from '@graphpolaris/shared/lib/data-access/store/visualizationSlice';
 import Input from '@graphpolaris/shared/lib/components/inputs';
-import { globalConfigSchemaTypes, localConfigSchemaType } from '@graphpolaris/shared/lib/vis/Types';
+import { globalConfigSchemaTypes, localConfigSchemaType } from '@graphpolaris/shared/lib/vis/types';
 
 export default function VisualizationDialog(props: DialogProps) {
   const dispatch = useAppDispatch();
@@ -24,7 +24,7 @@ export default function VisualizationDialog(props: DialogProps) {
         updateVisualizationSettings({
           id: vis.activeVisualization,
           settings: settingsSpecific,
-        })
+        }),
       );
     }
   }, [settingsSpecific]);

libs/shared/lib/vis/panel/visualization.tsx

@@ -5,7 +5,7 @@ import { Visualizations, setActiveVisualization } from '@graphpolaris/shared/lib
 import { DropdownItem, DropdownItemContainer } from '@graphpolaris/shared/lib/components/dropdowns';
 import ControlContainer from '@graphpolaris/shared/lib/components/controls';
 import { Button } from '@graphpolaris/shared/lib/components/buttons';
-import { createVisualizationComponent } from '../';
+import { VisualizationComponent } from '../';
 import VisualizationDialog from './dialog';
 
 export const VisualizationPanel = () => {
@@ -16,9 +16,6 @@ export const VisualizationPanel = () => {
   const [visDropdownOpen, setVisDropdownOpen] = useState<boolean>(false);
   const [showVisSettings, setShowVisSettings] = useState<boolean>(false);
 
-  const createVisComponent = createVisualizationComponent();
-  const visualizationInstance = createVisComponent();
-
   return (
     <div className="vis-panel h-full w-full overflow-y-auto" style={graphQueryResult.nodes.length === 0 ? { overflow: 'hidden' } : {}}>
       <VisualizationDialog open={showVisSettings} onClose={() => setShowVisSettings(false)} />
@@ -70,7 +67,9 @@ export const VisualizationPanel = () => {
           {query.nodes.length > 0 ? <p>Query resulted in empty dataset</p> : <p>Query for data to visualize</p>}
         </div>
       ) : (
-        <div className="w-full h-full">{visualizationInstance}</div>
+        <div className="w-full h-full">
+          <VisualizationComponent />
+        </div>
       )}
     </div>
   );

libs/shared/lib/vis/Types.tsx → libs/shared/lib/vis/types.ts

@@ -24,18 +24,18 @@ export type localConfigSchemaType = {
 export type localConfigPropTypes<T extends keyof typeof Visualizations> = T extends 'TableVis'
   ? TableProps
   : T extends 'PaohVis'
-  ? PaohVisProps
-  : T extends 'RawJSONVis'
-  ? RawJSONVisProps
-  : T extends 'SemanticSubstrates'
-  ? SemanticSubstratesProps
-  : T extends 'NodeLinkVis'
-  ? NodeLinkProps
-  : never;
+    ? PaohVisProps
+    : T extends 'RawJSONVis'
+      ? RawJSONVisProps
+      : T extends 'SemanticSubstrates'
+        ? SemanticSubstratesProps
+        : T extends 'NodeLinkVis'
+          ? NodeLinkProps
+          : never;
 
 export type VISComponentType = {
   displayName: string;
-  VIS: FC<any>;
+  VIS: any;
   localConfigSchema: localConfigSchemaType;
 };
 

libs/shared/lib/vis/visualizations/mapvis/mapvis.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { MapPanel, LayerPanel } from './components';
 import GraphModel from './graphModel';
 import { GraphType, Layer } from './Types';
-import { VISComponentType, VisualizationPropTypes, localConfigSchemaType } from '../../Types';
+import { VISComponentType, VisualizationPropTypes, localConfigSchemaType } from '../../types';
 
 export type MapProps = {};
 

libs/shared/lib/vis/visualizations/matrix/components/MatrixPixi.tsx

@@ -23,7 +23,7 @@ import { NLPopup } from './MatrixPopup';
 import { Actions, Interpolations } from 'pixi-actions';
 
 import Color from 'color';
-import { localConfigSchemaType } from '../../../Types';
+import { localConfigSchemaType } from '../../../types';
 import { createColumn } from './ColumnGraphicsComponent';
 import { ReorderingManager } from './ReorderingManager';
 import { TextLabel } from './TextLabel';
@@ -161,7 +161,7 @@ export const MatrixPixi = (props: Props) => {
 
   function onButtonDown(event: FederatedPointerEvent) {
     console.log(
-      event.currentTarget
+      event.currentTarget,
       // graph.nodes.find((node) => node.id === event.currentTarget.name)
     );
   }
@@ -247,7 +247,7 @@ export const MatrixPixi = (props: Props) => {
 
     if (columnTextPositions.length !== columnPositions.length)
       throw new Error(
-        'columnTextPositions and columnPositions have different length ' + columnTextPositions.length + ' / ' + columnPositions.length
+        'columnTextPositions and columnPositions have different length ' + columnTextPositions.length + ' / ' + columnPositions.length,
       );
 
     for (let i = 0; i < columns.length; i++) {
@@ -273,7 +273,7 @@ export const MatrixPixi = (props: Props) => {
     rowOrder: string[],
     colorScale: any,
     cellWidth: number,
-    cellHeight: number
+    cellHeight: number,
   ) => {
     const rows = rowsLabelLayer.children;
     let rowPositions: Point[] = [];
@@ -323,11 +323,14 @@ export const MatrixPixi = (props: Props) => {
 
     viewport.current.addChild(columnLayer);
 
-    const groupByType = props.graph.nodes.reduce((group: any, node: Node) => {
-      if (!group[node.label]) group[node.label] = [];
-      group[node.label].push(node);
-      return group;
-    }, {} as { [key: string]: Node[] });
+    const groupByType = props.graph.nodes.reduce(
+      (group: any, node: Node) => {
+        if (!group[node.label]) group[node.label] = [];
+        group[node.label].push(node);
+        return group;
+      },
+      {} as { [key: string]: Node[] },
+    );
 
     // order groupByType by size
     const ordered = Object.entries(groupByType).sort((a: any[], b: any[]) => b[1].length - a[1].length);
@@ -565,7 +568,7 @@ export const MatrixPixi = (props: Props) => {
         oneColumn.alpha = 0;
         Actions.sequence(
           Actions.delay(j * 0.005 * Math.random()),
-          Actions.fadeIn(oneColumn, config.ANIMATION_DURATION, Interpolations.pow2out)
+          Actions.fadeIn(oneColumn, config.ANIMATION_DURATION, Interpolations.pow2out),
         ).play();
       } else {
         oneColumn.alpha = 1;
@@ -668,7 +671,7 @@ export const MatrixPixi = (props: Props) => {
         textLabel.alpha = 0;
         Actions.sequence(
           Actions.delay(i * 0.005 * Math.random()),
-          Actions.fadeIn(textLabel, config.ANIMATION_DURATION, Interpolations.pow2out)
+          Actions.fadeIn(textLabel, config.ANIMATION_DURATION, Interpolations.pow2out),
         ).play();
       } else {
         textLabel.alpha = 1;

libs/shared/lib/vis/visualizations/matrix/matrixvis.tsx

@@ -4,7 +4,7 @@ import { GraphQueryResult, useGraphQueryResult } from '../../../data-access/stor
 import { ML } from '../../../data-access/store/mlSlice';
 import { LinkType, NodeType } from './Types';
 import { MatrixPixi } from './components/MatrixPixi';
-import { VisualizationPropTypes, VISComponentType, localConfigSchemaType } from '../../Types';
+import { VisualizationPropTypes, VISComponentType, localConfigSchemaType } from '../../types';
 
 interface Props {
   loading?: boolean;
@@ -22,7 +22,7 @@ export const MatrixVis = React.memo(({ data, ml, dispatch, localConfig }: Visual
   useEffect(() => {
     if (data) {
       setGraph(
-        data
+        data,
         // parseQueryResult(graphQueryResult, ml, {
         //   defaultX: (ref.current?.clientWidth || 1000) / 2,
         //   defaultY: (ref.current?.clientHeight || 1000) / 2,
@@ -63,3 +63,4 @@ export const MatrixVisComponent: VISComponentType = {
   VIS: MatrixVis,
   localConfigSchema: localConfigSchema,
 };
+export default MatrixVisComponent;

libs/shared/lib/vis/visualizations/nodelink/nodelinkvis.tsx

@@ -5,7 +5,7 @@ import { NLPixi } from './components/NLPixi';
 import { parseQueryResult } from './components/query2NL';
 import { useImmer } from 'use-immer';
 import { ML, setShortestPathSource, setShortestPathTarget } from '../../../data-access/store/mlSlice';
-import { VisualizationPropTypes, VISComponentType } from '../../Types';
+import { VisualizationPropTypes, VISComponentType } from '../../types';
 
 export interface NodeLinkProps {}
 
@@ -45,7 +45,7 @@ export const NodeLinkVis = React.memo(({ data, ml, dispatch }: VisualizationProp
         parseQueryResult(data, ml, {
           defaultX: (ref.current?.clientWidth || 1000) / 2,
           defaultY: (ref.current?.clientHeight || 1000) / 2,
-        })
+        }),
       );
     }
   }, [data, ml]);

libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx

@@ -27,7 +27,7 @@ import { HyperEdgeRange } from './components/HyperEdgesRange';
 import ToPaohvisDataParserUseCase from './utils/ToPaohvisDataParserUsecase';
 import MakePaohvisMenu from './components/MakePaohvisMenu';
 import { RowLabelColumn } from './components/RowLabelColumn';
-import { VISComponentType } from '../../Types';
+import { VISComponentType } from '../../types';
 
 type PaohvisViewModelState = {
   rowHeight: number;
@@ -132,7 +132,7 @@ export const PaohVis = (props: PaohVisProps) => {
     entityOrRelationType: string,
     attribute: string,
     predicate: string,
-    compareValue: string
+    compareValue: string,
   ): void {
     const attributeName: string = attribute.split(':')[0];
     const attributeType: string = attribute.split(':')[1];
@@ -373,7 +373,7 @@ export const PaohVis = (props: PaohVisProps) => {
     relationName: string,
     isEntityVerticalEqualToRelationFrom: boolean,
     chosenAttribute: Attribute,
-    nodeOrder: PaohvisNodeOrder
+    nodeOrder: PaohvisNodeOrder,
   ): void {
     setViewModel((draft) => {
       draft.entityVertical = entityVertical;
@@ -564,7 +564,7 @@ export const PaohVis = (props: PaohVisProps) => {
         gapBetweenRanges={props.gapBetweenRanges}
         onMouseEnter={onMouseEnterHyperEdge}
         onMouseLeave={onMouseLeaveHyperEdge}
-      />
+      />,
     );
     colOffset += hyperEdgeRange.hyperEdges.length;
   });

libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.tsx

 import React, { useEffect } from 'react';
 import ReactJSONView from 'react-json-view';
-import { VisualizationPropTypes, VISComponentType } from '../../Types';
+import { VisualizationPropTypes, VISComponentType } from '../../types';
 
 export interface RawJSONVisProps {}
 
@@ -35,3 +35,5 @@ export const RawJSONComponent: VISComponentType = {
   VIS: RawJSONVis,
   localConfigSchema: localConfigSchema,
 };
+
+export default RawJSONComponent;

libs/shared/lib/vis/visualizations/table_vis/tableVis.tsx

 import React, { useMemo, useRef } from 'react';
 import { Table, AugmentedNodeAttributes } from './components/Table';
 import { SchemaAttribute } from '../../../schema';
-import { VisualizationPropTypes, VISComponentType, localConfigSchemaType } from '../../Types';
+import { VisualizationPropTypes, VISComponentType, localConfigSchemaType } from '../../types';
 
 export type TableProps = {
   showBarplot: boolean;
@@ -26,7 +26,7 @@ export const TableVis = ({ data, schema, localConfig }: VisualizationPropTypes<t
           type: Object.fromEntries(types.map((t) => [t.name, t.type])),
         };
       }),
-    [data.nodes]
+    [data.nodes],
   );
 
   return (
@@ -59,3 +59,4 @@ export const TableComponent: VISComponentType = {
   VIS: TableVis,
   localConfigSchema: localConfigSchema,
 };
+export default TableComponent;

libs/shared/tsconfig.json

@@ -22,6 +22,7 @@
     "resolveJsonModule": true,
     "noEmit": true,
     "baseUrl": ".",
+    "incremental": true,
     "noImplicitOverride": false,
     "paths": {
       "@graphpolaris/shared/lib/*": ["./lib/*"],
@@ -33,7 +34,16 @@
     },
     "types": ["node", "vite/client"]
   },
-  "exclude": ["dist", "build", "node_modules"],
+  "exclude": [
+    "dist",
+    "build",
+    "node_modules",
+    "public",
+    "vitest.setup.ts", // excludes Vitest setup file
+    "tailwind.config.js", // excludes Tailwind CSS configuration file
+    "postcss.config.js", // excludes PostCSS configuration file
+    "tsconfig.tsbuildinfo" // excludes TypeScript build info file
+  ],
   "include": ["src", "lib", "../../libs/config/src/**/*"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }