diff --git a/apps/web/tsconfig.json b/apps/web/tsconfig.json
index b3699e023145ee54f284835814870ffc0dd47707..3c254f20dfcda8bc981d86791615ae3e11763176 100644
--- a/apps/web/tsconfig.json
+++ b/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" }]
diff --git a/libs/shared/lib/data-access/store/visualizationSlice.ts b/libs/shared/lib/data-access/store/visualizationSlice.ts
index 2b21a8796aa66291e7be866dcf1632faa6388215..c5b1d281c4207ab828f8b45bb885db3327853f1c 100644
--- a/libs/shared/lib/data-access/store/visualizationSlice.ts
+++ b/libs/shared/lib/data-access/store/visualizationSlice.ts
@@ -1,6 +1,6 @@
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 {
diff --git a/libs/shared/lib/vis/index.tsx b/libs/shared/lib/vis/index.tsx
index 6cbdbd9c09955dc799f97ffabd0254b4be5fb2c0..30215155e35cf32c33604aa9fc2611059ba4481a 100644
--- a/libs/shared/lib/vis/index.tsx
+++ b/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>
+ )
+ );
};
diff --git a/libs/shared/lib/vis/panel/dialog.tsx b/libs/shared/lib/vis/panel/dialog.tsx
index f2559879d11734bb4069627fcb39d85c1b477518..5902931be45b358bd6b4eeeeb90371be6997fb9c 100644
--- a/libs/shared/lib/vis/panel/dialog.tsx
+++ b/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]);
diff --git a/libs/shared/lib/vis/panel/visualization.tsx b/libs/shared/lib/vis/panel/visualization.tsx
index 6457f891e207941032f2b52e1343108518a405a5..504d09ddc800d18aeecd0619479dff49eac78b96 100644
--- a/libs/shared/lib/vis/panel/visualization.tsx
+++ b/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>
);
diff --git a/libs/shared/lib/vis/Types.tsx b/libs/shared/lib/vis/types.ts
similarity index 84%
rename from libs/shared/lib/vis/Types.tsx
rename to libs/shared/lib/vis/types.ts
index 4c66c45b7920a3cc7c095fcc9704e91a336ce994..ef3523875ffe9b3ca2b2d0c423503bec4d8a6616 100644
--- a/libs/shared/lib/vis/Types.tsx
+++ b/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;
};
diff --git a/libs/shared/lib/vis/visualizations/mapvis/mapvis.tsx b/libs/shared/lib/vis/visualizations/mapvis/mapvis.tsx
index 4a49bb17f7679f65b15709a66525fa06f4cde83d..65dd5a40bb6f4d8b655dc409cc831ff6d74ea0e1 100644
--- a/libs/shared/lib/vis/visualizations/mapvis/mapvis.tsx
+++ b/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 = {};
diff --git a/libs/shared/lib/vis/visualizations/matrix/components/MatrixPixi.tsx b/libs/shared/lib/vis/visualizations/matrix/components/MatrixPixi.tsx
index 772898d3c0d12499e28bf878ac7f31d75971f194..4ed2df8868f9bcf76f87614567b70feedf1ddf1d 100644
--- a/libs/shared/lib/vis/visualizations/matrix/components/MatrixPixi.tsx
+++ b/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;
diff --git a/libs/shared/lib/vis/visualizations/matrix/matrixvis.tsx b/libs/shared/lib/vis/visualizations/matrix/matrixvis.tsx
index 8f1e9032b9948e97a6416c949921a5bc2f68fb86..5bfd89dcc74f775b02257d020d62fa26b9164b17 100644
--- a/libs/shared/lib/vis/visualizations/matrix/matrixvis.tsx
+++ b/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;
diff --git a/libs/shared/lib/vis/visualizations/nodelink/nodelinkvis.tsx b/libs/shared/lib/vis/visualizations/nodelink/nodelinkvis.tsx
index 827c543fd1f22e34489fb05ca9ae802c40f9aaaf..b7274128576aa480816090b2bf939e886f30781a 100644
--- a/libs/shared/lib/vis/visualizations/nodelink/nodelinkvis.tsx
+++ b/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]);
diff --git a/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx b/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx
index 59c6653b650ba5742aa735fab22e7f9101945416..915e793f0fb388ff87c2c1a86a4429698b3f62ad 100644
--- a/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx
+++ b/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;
});
diff --git a/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.tsx b/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.tsx
index 3bfc68c491ec2bb51af804698f20a0276d791bee..a4deeeec0131a7f386e56cfe14655945c326a4cd 100644
--- a/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.tsx
+++ b/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.tsx
@@ -1,6 +1,6 @@
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;
diff --git a/libs/shared/lib/vis/visualizations/table_vis/tableVis.tsx b/libs/shared/lib/vis/visualizations/table_vis/tableVis.tsx
index cfa411105c83b5a3a03a03d2381bd71564cb864a..f8ca400e5965c137b61556a0d39b001f18e06e48 100644
--- a/libs/shared/lib/vis/visualizations/table_vis/tableVis.tsx
+++ b/libs/shared/lib/vis/visualizations/table_vis/tableVis.tsx
@@ -1,7 +1,7 @@
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;
diff --git a/libs/shared/tsconfig.json b/libs/shared/tsconfig.json
index 42051d2258490585640ab28d0dd68c98e7e373a5..e2ac4877f4cb9b4e9d80b082b8b6d6cbc7de47c9 100644
--- a/libs/shared/tsconfig.json
+++ b/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" }]
}