diff --git a/apps/web/src/app/app.tsx b/apps/web/src/app/app.tsx
index 90a1046f66dfac82f32a2b3460d80a9cc7649215..f77bd93e000a5089d10e9a32e950338f2c221e11 100644
--- a/apps/web/src/app/app.tsx
+++ b/apps/web/src/app/app.tsx
@@ -16,15 +16,11 @@ import { EventBus } from '@graphpolaris/shared/lib/data-access/api/eventBus';
import Onboarding from '../components/onboarding/onboarding';
import { wsQueryRequest } from '@graphpolaris/shared/lib/data-access/broker';
import { URLParams, setParam } from '@graphpolaris/shared/lib/data-access/api/url';
-
import { VisualizationPanel } from '@graphpolaris/shared/lib/vis';
import { QueryBuilder } from '@graphpolaris/shared/lib/querybuilder';
import DataViewer from '@graphpolaris/shared/lib/data-viewer';
-import { useVisualizationManager } from '@graphpolaris/shared/lib/vis/manager';
-import { ConfigPanel } from '@graphpolaris/shared/lib/vis/configuration';
-// const Schema = React.lazy(() => import('@graphpolaris/shared/lib/schema/panel'));
-// const VisualizationPanel = React.lazy(() => import('@graphpolaris/shared/lib/vis'));
-// const QueryBuilder = React.lazy(() => import('@graphpolaris/shared/lib/querybuilder'));
+import { useVisualizationManager } from '@graphpolaris/shared/lib/vis/hooks';
+import { ConfigPanel } from '@graphpolaris/shared/lib/vis/components/config';
export type App = {
load?: string;
diff --git a/libs/shared/lib/components/icon/icon.stories.tsx b/libs/shared/lib/components/icon/icon.stories.tsx
index 1b506cf2e62db8feac3eedc1eaa03056f5d8aa2c..b57f7c09eb64b72801e5339ffbe0a3227294fe79 100644
--- a/libs/shared/lib/components/icon/icon.stories.tsx
+++ b/libs/shared/lib/components/icon/icon.stories.tsx
@@ -2,10 +2,9 @@ import { StoryObj, Meta } from '@storybook/react';
import Icon from '../icon';
import { ArrowBack, DeleteOutline, KeyboardArrowLeft, Settings } from '@mui/icons-material';
-export default {
+const Component: Meta<typeof Icon> = {
title: 'Components/Icon',
component: Icon,
- decorators: [(Story) => <div className="p-5">{Story()}</div>],
argTypes: {
component: {
control: 'select',
@@ -16,14 +15,14 @@ export default {
options: [16, 20, 24, 28, 32, 40],
},
},
-} as Meta;
-type Story = StoryObj<typeof Icon>;
+ decorators: [(Story) => <div className="p-5">{Story()}</div>],
+};
-const BaseIcon: Story = {
- args: {
- name: 'ArrowBack',
- size: 24,
- },
+export default Component;
+type Story = StoryObj<typeof Component>;
+
+export const BaseIcon: Story = (args: any) => {
+ return <Icon component={<ArrowBack />} size={24} {...args} />;
};
-export const Default = { ...BaseIcon };
+BaseIcon.args = {};
diff --git a/libs/shared/lib/vis/encodings/selectors/axis.stories.tsx b/libs/shared/lib/components/selectors/axis.stories.tsx
similarity index 100%
rename from libs/shared/lib/vis/encodings/selectors/axis.stories.tsx
rename to libs/shared/lib/components/selectors/axis.stories.tsx
diff --git a/libs/shared/lib/vis/encodings/selectors/axis.tsx b/libs/shared/lib/components/selectors/axis.tsx
similarity index 85%
rename from libs/shared/lib/vis/encodings/selectors/axis.tsx
rename to libs/shared/lib/components/selectors/axis.tsx
index bd987f71de2e13f55bc3e4ecf79aa4ad7040585d..a31413955a697aec76e6422e0da6ddc47aff368d 100644
--- a/libs/shared/lib/vis/encodings/selectors/axis.tsx
+++ b/libs/shared/lib/components/selectors/axis.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import Input from '@graphpolaris/shared/lib/components/inputs';
-import { SelectorProps } from '../encodings.types';
+import { SelectorProps } from './encodings.types';
export default function Axis({ marking, onChange }: SelectorProps) {
return (
diff --git a/libs/shared/lib/vis/encodings/selectors/color.stories.tsx b/libs/shared/lib/components/selectors/color.stories.tsx
similarity index 100%
rename from libs/shared/lib/vis/encodings/selectors/color.stories.tsx
rename to libs/shared/lib/components/selectors/color.stories.tsx
diff --git a/libs/shared/lib/vis/encodings/selectors/color.tsx b/libs/shared/lib/components/selectors/color.tsx
similarity index 92%
rename from libs/shared/lib/vis/encodings/selectors/color.tsx
rename to libs/shared/lib/components/selectors/color.tsx
index e67a6059e14728a7231db1fea21344599468e60f..fe7fb86315bfde451a282b8893038b99eb083a1e 100644
--- a/libs/shared/lib/vis/encodings/selectors/color.tsx
+++ b/libs/shared/lib/components/selectors/color.tsx
@@ -1,5 +1,5 @@
import React, { useState } from 'react';
-import { SelectorProps } from '../encodings.types';
+import { SelectorProps } from './encodings.types';
import DropdownColorLegend from '@graphpolaris/shared/lib/components/colorComponents/colorDropdown';
import Input from '@graphpolaris/shared/lib/components/inputs';
diff --git a/libs/shared/lib/vis/encodings/encodings.types.ts b/libs/shared/lib/components/selectors/encodings.types.ts
similarity index 94%
rename from libs/shared/lib/vis/encodings/encodings.types.ts
rename to libs/shared/lib/components/selectors/encodings.types.ts
index 6b1b367b64a462bd03ba73038bb806d9206d12bf..38ee8f0dfc51f14476483984f62d11a7e6a7c3dd 100644
--- a/libs/shared/lib/vis/encodings/encodings.types.ts
+++ b/libs/shared/lib/components/selectors/encodings.types.ts
@@ -1,5 +1,5 @@
import { DimensionType } from '@graphpolaris/shared/lib/schema';
-import { EncodingSelector } from './selectors';
+import { EncodingSelector } from '.';
import { ElementStats } from '@graphpolaris/shared/lib/data-access/statistics';
export type SelectorType = keyof typeof EncodingSelector;
diff --git a/libs/shared/lib/vis/encodings/selectors/index.ts b/libs/shared/lib/components/selectors/index.ts
similarity index 100%
rename from libs/shared/lib/vis/encodings/selectors/index.ts
rename to libs/shared/lib/components/selectors/index.ts
diff --git a/libs/shared/lib/vis/encodings/selectors/opacity.stories.tsx b/libs/shared/lib/components/selectors/opacity.stories.tsx
similarity index 100%
rename from libs/shared/lib/vis/encodings/selectors/opacity.stories.tsx
rename to libs/shared/lib/components/selectors/opacity.stories.tsx
diff --git a/libs/shared/lib/vis/encodings/selectors/opacity.tsx b/libs/shared/lib/components/selectors/opacity.tsx
similarity index 92%
rename from libs/shared/lib/vis/encodings/selectors/opacity.tsx
rename to libs/shared/lib/components/selectors/opacity.tsx
index 2d16f8a76246d02ae330149946c872ab617897e8..160a7adb536621f0c8edf1f320813092bb7a8157 100644
--- a/libs/shared/lib/vis/encodings/selectors/opacity.tsx
+++ b/libs/shared/lib/components/selectors/opacity.tsx
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import Input from '@graphpolaris/shared/lib/components/inputs';
-import { SelectorProps } from '../encodings.types';
+import { SelectorProps } from './encodings.types';
export default function Opacity({ marking, onChange, statistics, dimension }: SelectorProps) {
const [custom, setCustom] = useState<boolean>(false);
diff --git a/libs/shared/lib/vis/encodings/selectors/shape.stories.tsx b/libs/shared/lib/components/selectors/shape.stories.tsx
similarity index 100%
rename from libs/shared/lib/vis/encodings/selectors/shape.stories.tsx
rename to libs/shared/lib/components/selectors/shape.stories.tsx
diff --git a/libs/shared/lib/vis/encodings/selectors/shape.tsx b/libs/shared/lib/components/selectors/shape.tsx
similarity index 74%
rename from libs/shared/lib/vis/encodings/selectors/shape.tsx
rename to libs/shared/lib/components/selectors/shape.tsx
index 1f0b3880973e5ae83cde4e5a560973ea418a9778..9238fc83e0a93f8c830b5966212950a46095f466 100644
--- a/libs/shared/lib/vis/encodings/selectors/shape.tsx
+++ b/libs/shared/lib/components/selectors/shape.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { SelectorProps } from '../encodings.types';
+import { SelectorProps } from './encodings.types';
export default function Shape({ marking, onChange, statistics, dimension }: SelectorProps) {
return <div>shape</div>;
diff --git a/libs/shared/lib/vis/encodings/selectors/size.stories.tsx b/libs/shared/lib/components/selectors/size.stories.tsx
similarity index 100%
rename from libs/shared/lib/vis/encodings/selectors/size.stories.tsx
rename to libs/shared/lib/components/selectors/size.stories.tsx
diff --git a/libs/shared/lib/vis/encodings/selectors/size.tsx b/libs/shared/lib/components/selectors/size.tsx
similarity index 91%
rename from libs/shared/lib/vis/encodings/selectors/size.tsx
rename to libs/shared/lib/components/selectors/size.tsx
index e5f68f47ba0d546551c863ecfeac11a8df938092..085f5c318897896cc6e482b417ae49d6aafce925 100644
--- a/libs/shared/lib/vis/encodings/selectors/size.tsx
+++ b/libs/shared/lib/components/selectors/size.tsx
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import Input from '@graphpolaris/shared/lib/components/inputs';
-import { SelectorProps } from '../encodings.types';
+import { SelectorProps } from './encodings.types';
export default function Size({ marking, onChange, statistics, dimension }: SelectorProps) {
const [item, setItem] = useState<string>('');
diff --git a/libs/shared/lib/components/tooltip/index.tsx b/libs/shared/lib/components/tooltip/index.tsx
index 79e5bfe8837fc3746903db753518aa3c339ff5aa..4d3d7c9913189121fbc259adbb0fad627b349b4f 100644
--- a/libs/shared/lib/components/tooltip/index.tsx
+++ b/libs/shared/lib/components/tooltip/index.tsx
@@ -55,51 +55,3 @@ const TooltipContent = React.forwardRef<
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
-
-// Old Tooltip
-
-export type TooltipProps2 = {
- position?: 'top' | 'bottom' | 'left' | 'right';
- children: ReactNode;
- tooltip: string;
- disabled?: boolean;
-};
-export default function Tooltip2({ position = 'bottom', children, tooltip, disabled = false }: TooltipProps2) {
- return (
- <div className="group relative cursor-pointer">
- <div className="">{children}</div>
- {!disabled && (
- <div className="z-50">
- <span
- className={`absolute hidden group-hover:inline-block bg-neutral-900 text-white text-xs p-2 whitespace-nowrap rounded ${
- position === 'top' ? 'left-1/2 -translate-x-1/2 bottom-[calc(100%+5px)]' : ''
- } ${position === 'bottom' ? 'left-1/2 -translate-x-1/2 top-[calc(100%+5px)]' : ''} ${
- position === 'left' ? 'top-1/2 -translate-y-1/2 right-[calc(100%+5px)]' : ''
- } ${position === 'right' ? 'top-1/2 -translate-y-1/2 left-[calc(100%+5px)]' : ''} `}
- >
- {tooltip}
- </span>
- <span
- className={`absolute hidden group-hover:inline-block border-[6px] ${
- position === 'top'
- ? 'left-1/2 -translate-x-1/2 bottom-full border-l-transparent border-r-transparent border-b-0 border-t-neutral-900'
- : ''
- } ${
- position === 'bottom'
- ? 'left-1/2 -translate-x-1/2 top-full border-l-transparent border-r-transparent border-t-0 border-b-neutral-900'
- : ''
- } ${
- position === 'left'
- ? 'top-1/2 -translate-y-1/2 right-full border-t-transparent border-b-transparent border-r-0 border-l-neutral-900'
- : ''
- } ${
- position === 'right'
- ? 'top-1/2 -translate-y-1/2 left-full border-t-transparent border-b-transparent border-l-0 border-r-neutral-900'
- : ''
- } `}
- ></span>
- </div>
- )}
- </div>
- );
-}
diff --git a/libs/shared/lib/data-access/store/visualizationSlice.ts b/libs/shared/lib/data-access/store/visualizationSlice.ts
index a07aabeb4311e45969d52fe71057bc55c474d1fb..1299b0488d0c1bf65147d0bb75d6e24bc64135d8 100644
--- a/libs/shared/lib/data-access/store/visualizationSlice.ts
+++ b/libs/shared/lib/data-access/store/visualizationSlice.ts
@@ -1,6 +1,6 @@
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import type { RootState } from './store';
-import { VisualizationConfiguration } from '../../vis/types';
+import { VisualizationConfiguration } from '../../vis/visualization.types';
import { isEqual } from 'lodash-es';
export type VisStateSettings = {
diff --git a/libs/shared/lib/vis/bar.tsx b/libs/shared/lib/vis/components/bar.tsx
similarity index 94%
rename from libs/shared/lib/vis/bar.tsx
rename to libs/shared/lib/vis/components/bar.tsx
index 884157e82271db4559934be76220549aef26abb5..72736b772af6193179c77992fef9752412bdf282 100644
--- a/libs/shared/lib/vis/bar.tsx
+++ b/libs/shared/lib/vis/components/bar.tsx
@@ -1,10 +1,11 @@
import React, { useState } from 'react';
-import { Button, Icon } from '../components';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../components/tooltip';
+import { Button } from '../../components';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../components/tooltip';
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
import { Add, Close, Fullscreen } from '@mui/icons-material';
-import ControlContainer from '../components/controls';
-import { Visualizations, VisualizationManager } from './manager';
+import ControlContainer from '../../components/controls';
+import { Visualizations } from '../hooks';
+import { VisualizationManager } from '../visualization.types';
type Props = {
manager: VisualizationManager;
diff --git a/libs/shared/lib/vis/configuration/components.tsx b/libs/shared/lib/vis/components/config/components.tsx
similarity index 100%
rename from libs/shared/lib/vis/configuration/components.tsx
rename to libs/shared/lib/vis/components/config/components.tsx
diff --git a/libs/shared/lib/vis/configuration/index.tsx b/libs/shared/lib/vis/components/config/index.tsx
similarity index 100%
rename from libs/shared/lib/vis/configuration/index.tsx
rename to libs/shared/lib/vis/components/config/index.tsx
diff --git a/libs/shared/lib/vis/configuration/panel.tsx b/libs/shared/lib/vis/components/config/panel.tsx
similarity index 84%
rename from libs/shared/lib/vis/configuration/panel.tsx
rename to libs/shared/lib/vis/components/config/panel.tsx
index fdd0fffdb1bdb3a2c04002d056681a148c657351..2ffd796423c78d5afaee3baa2fa24792a19a2fb1 100644
--- a/libs/shared/lib/vis/configuration/panel.tsx
+++ b/libs/shared/lib/vis/components/config/panel.tsx
@@ -1,10 +1,11 @@
import React from 'react';
-import { Button, Icon } from '../../components';
+import { Button, Icon } from '../../../components';
import { Delete, Person } from '@mui/icons-material';
-import Input from '../../components/inputs';
-import { VISUALIZATION_TYPES, VisualizationManager } from '../manager';
+import Input from '../../../components/inputs';
+import { VISUALIZATION_TYPES } from '../../hooks';
+import { VisualizationManager } from '../../visualization.types';
import { SettingsHeader } from './components';
-import { useSessionCache } from '../../data-access';
+import { useSessionCache } from '../../../data-access';
type Props = {
manager: VisualizationManager;
@@ -13,6 +14,8 @@ type Props = {
export function ConfigPanel({ manager }: Props) {
const session = useSessionCache();
+ const buildInfo = import.meta.env.GRAPHPOLARIS_VERSION;
+
return (
<div className="w-full h-full flex flex-col border justify-between">
<div>
@@ -86,19 +89,21 @@ export function ConfigPanel({ manager }: Props) {
)}
</div>
- <Button
- type="primary"
- variant="outline"
- size="xs"
- label="Report an issue"
- onClick={() =>
- window.open(
- 'https://app.asana.com/-/login?u=https%3A%2F%2Fform.asana.com%2F%3Fk%3D2QEC88Dl7ETs2wYYWjkMXg%26d%3D1206648675960041&error=01',
- '_blank',
- )
- }
- additionalClasses="m-2"
- />
+ {buildInfo === 'dev' && (
+ <Button
+ type="primary"
+ variant="outline"
+ size="xs"
+ label="Report an issue"
+ onClick={() =>
+ window.open(
+ 'https://app.asana.com/-/login?u=https%3A%2F%2Fform.asana.com%2F%3Fk%3D2QEC88Dl7ETs2wYYWjkMXg%26d%3D1206648675960041&error=01',
+ '_blank',
+ )
+ }
+ additionalClasses="m-2"
+ />
+ )}
</div>
);
}
diff --git a/libs/shared/lib/vis/panel.tsx b/libs/shared/lib/vis/components/panel.tsx
similarity index 89%
rename from libs/shared/lib/vis/panel.tsx
rename to libs/shared/lib/vis/components/panel.tsx
index 158830b99fe09528e96fa5e65bd07d666119178e..1e9260879f6f0380823850e8985541a105d7db13 100644
--- a/libs/shared/lib/vis/panel.tsx
+++ b/libs/shared/lib/vis/components/panel.tsx
@@ -1,8 +1,8 @@
import React from 'react';
import { useGraphQueryResult, useQuerybuilderGraph } from '@graphpolaris/shared/lib/data-access';
import VisualizationBar from './bar';
-import { VisualizationManager } from './manager';
-import { Recommender, NoData, Querying } from './screens';
+import { VisualizationManager } from '../visualization.types';
+import { Recommender, NoData, Querying } from '../views';
export const VisualizationPanel = ({ manager }: { manager: VisualizationManager }) => {
const query = useQuerybuilderGraph();
diff --git a/libs/shared/lib/vis/encodings/accessor.tsx b/libs/shared/lib/vis/encodings/accessor.tsx
deleted file mode 100644
index 63db7d674fda32ce1149e0570a54f20a38827327..0000000000000000000000000000000000000000
--- a/libs/shared/lib/vis/encodings/accessor.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import Input from '@graphpolaris/shared/lib/components/inputs';
-import { useGraphQueryResultMeta } from '@graphpolaris/shared/lib/data-access';
-import { DimensionType } from '@graphpolaris/shared/lib/schema';
-import { CompressedElement } from '@graphpolaris/shared/lib/data-access/statistics';
-
-type Props = {
- value: string | undefined;
- onChange: (val: string | number) => void;
- element: 'node' | 'edge';
- dimension?: DimensionType[];
- disabled?: boolean;
-};
-
-const extractAttributesByDimension = (summaryGraph: CompressedElement, dimensions: DimensionType[]): string[] => {
- const selectedAttributes: { [label: string]: string[] } = {};
-
- Object.keys(summaryGraph.types).map((label) => {
- selectedAttributes[label] = [];
- Object.keys(summaryGraph.types[label].attributes).map((attribute) => {
- const dim: DimensionType = summaryGraph.types[label]?.attributes[attribute].dimension as DimensionType;
- dimensions.includes(dim) && selectedAttributes[label].push(attribute);
- });
- });
-
- let commonAttributes: Set<string> = new Set();
- Object.values(selectedAttributes).forEach((attributes) => {
- if (commonAttributes.size === 0) {
- commonAttributes = new Set(attributes);
- } else {
- commonAttributes = new Set([...commonAttributes].filter((attr) => attributes.includes(attr)));
- }
- });
-
- return commonAttributes ? Array.from(commonAttributes) : [];
-};
-
-export default function Accessor({ value, onChange, element, dimension, disabled = false }: Props) {
- const resultStatistics = useGraphQueryResultMeta();
- const [options, setOptions] = useState<string[]>([]);
- const [loading, setLoading] = useState<boolean>(true);
-
- useEffect(() => {
- setLoading(Object.keys(resultStatistics.nodes.types).length === 0 && Object.keys(resultStatistics.edges.types).length === 0);
- }, [resultStatistics]);
-
- useEffect(() => {
- if (!loading) {
- setOptions(extractAttributesByDimension(resultStatistics[element === 'node' ? 'nodes' : 'edges'], dimension || ['categorical']));
- disabled = true;
- } else {
- disabled = false;
- }
- }, [resultStatistics, loading, element, dimension]);
-
- return (
- <div className="mb-2">
- <Input type="dropdown" value={value} onChange={(val: string | number) => onChange(val)} options={options} disabled={disabled} />
- </div>
- );
-}
diff --git a/libs/shared/lib/vis/encodings/index.ts b/libs/shared/lib/vis/encodings/index.ts
deleted file mode 100644
index ea02a99517ed43155ffe83c4c4eb877a3f02259a..0000000000000000000000000000000000000000
--- a/libs/shared/lib/vis/encodings/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type { Encoding, EncodingTypes, EncodingProps } from './encodings.types';
diff --git a/libs/shared/lib/vis/encodings/selector.tsx b/libs/shared/lib/vis/encodings/selector.tsx
deleted file mode 100644
index cc8e31c3c2d8dc8a9ed699bd0d464b11e910dea6..0000000000000000000000000000000000000000
--- a/libs/shared/lib/vis/encodings/selector.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { EncodingSelector } from './selectors';
-import { useGraphQueryResultMeta } from '@graphpolaris/shared/lib/data-access';
-import { ElementType } from './encodings.types';
-import { DimensionType } from '@graphpolaris/shared/lib/schema';
-
-type Props = {
- selectorType: keyof typeof EncodingSelector;
- marking: any;
- elementType: ElementType;
- onChange: (val: any) => void;
- accessorPath: string;
-};
-
-export default function Selector({ selectorType, elementType, marking, onChange, accessorPath }: Props) {
- const graphStatistics = useGraphQueryResultMeta();
- const SelectorComponent = EncodingSelector[selectorType];
- const [statistics, setStatistics] = useState<any>();
- const [dimension, setDimension] = useState<DimensionType>('categorical');
-
- useEffect(() => {
- const group = graphStatistics[elementType === 'node' ? 'nodes' : 'edges'];
-
- const combinedValues = Array.from(
- new Set(
- Object.keys(group.types).flatMap((label) => {
- const obj = group.types[label].attributes[accessorPath];
- const { dimension } = obj;
- setDimension(dimension);
-
- if (dimension === 'categorical') {
- const { values } = obj;
- return values || [];
- } else if (dimension === 'numerical') {
- console.log(obj);
- const { min, max } = obj.statistics;
- return [min, max];
- } else if (dimension === 'temporal') {
- const { minDate, maxDate } = obj.statistics;
- return [minDate, maxDate];
- } else if (dimension === 'spatial') {
- const { boundingBox } = obj.statistics;
- return boundingBox;
- }
- return [];
- }),
- ),
- );
-
- setStatistics(combinedValues);
- }, [accessorPath]);
-
- return <SelectorComponent marking={marking} onChange={onChange} dimension={dimension} statistics={statistics} />;
-}
diff --git a/libs/shared/lib/vis/hooks/index.ts b/libs/shared/lib/vis/hooks/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..917f8727a73755b43b2ea39696b23ceca4123722
--- /dev/null
+++ b/libs/shared/lib/vis/hooks/index.ts
@@ -0,0 +1 @@
+export { useVisualizationManager, Visualizations, VISUALIZATION_TYPES } from './useVisualizationManager';
diff --git a/libs/shared/lib/vis/manager/manager.tsx b/libs/shared/lib/vis/hooks/useVisualizationManager.tsx
similarity index 98%
rename from libs/shared/lib/vis/manager/manager.tsx
rename to libs/shared/lib/vis/hooks/useVisualizationManager.tsx
index f53ce861b7c23d6d1726574c798fbefd76fd5128..c2ebee597d66a4cd5cd7eddeb9687f190da028f0 100644
--- a/libs/shared/lib/vis/manager/manager.tsx
+++ b/libs/shared/lib/vis/hooks/useVisualizationManager.tsx
@@ -1,5 +1,5 @@
import React, { useState, useEffect, Suspense } from 'react';
-import { VISComponentType, VisualizationConfiguration } from '../types';
+import { VISComponentType, VisualizationConfiguration } from '../visualization.types';
import {
removeVisualization,
reorderVisState,
@@ -15,7 +15,7 @@ import {
useSessionCache,
useVisualization,
} from '../../data-access';
-import { VisualizationManager } from './manager.types';
+import { VisualizationManager } from '../visualization.types';
import { HoverType, SelectType, addHover, addSelect } from '../../data-access/store/interactionSlice';
export const Visualizations: Record<string, Function> = {
diff --git a/libs/shared/lib/vis/index.ts b/libs/shared/lib/vis/index.ts
index 56e72b21fd0c9f295ba3ec4e0519dec956262231..ac473812c0eb2ee567344f3224e7dfa6c367b18f 100644
--- a/libs/shared/lib/vis/index.ts
+++ b/libs/shared/lib/vis/index.ts
@@ -1 +1 @@
-export * from './panel';
+export * from './components/panel';
diff --git a/libs/shared/lib/vis/manager/index.ts b/libs/shared/lib/vis/manager/index.ts
deleted file mode 100644
index 0c29b4efbfb803105d102ca9581c3df1bc666395..0000000000000000000000000000000000000000
--- a/libs/shared/lib/vis/manager/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export type { VisualizationManager } from './manager.types';
-export { useVisualizationManager, Visualizations, VISUALIZATION_TYPES } from './manager';
diff --git a/libs/shared/lib/vis/manager/manager.types.tsx b/libs/shared/lib/vis/manager/manager.types.tsx
deleted file mode 100644
index f53318a09edb0f20cf7301003d2728fa9e4ef637..0000000000000000000000000000000000000000
--- a/libs/shared/lib/vis/manager/manager.types.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-
-export interface VisualizationManager {
- renderComponent: () => React.ReactNode;
- renderSettings: () => React.ReactNode;
- active: string | undefined;
- activeType: string | undefined;
- tabs: string[];
- changeActive: (id: string) => void;
- reorderVisualizations: (args: { draggedVisId: string; dropVisId: string }) => void;
- deleteVisualization: (id: string) => void;
-}
diff --git a/libs/shared/lib/vis/shared/AttributeDataType.test.tsx b/libs/shared/lib/vis/shared/AttributeDataType.test.tsx
deleted file mode 100644
index 43f9fe1b48895a00bbd573445bb52dc4bb7fbb42..0000000000000000000000000000000000000000
--- a/libs/shared/lib/vis/shared/AttributeDataType.test.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { assert, describe, expect, it } from 'vitest';
-
-import { isAttributeDataEntity } from './AttributeDataType';
-
-describe('AttributeDataType', () => {
- it('true', () => {
- expect(true).toEqual(true);
- });
-});
-
-// /**
-// * This program has been developed by students from the bachelor Computer Science at
-// * Utrecht University within the Software Project course.
-// * © Copyright Utrecht University (Department of Information and Computing Sciences)
-// */
-//
-// import { isAttributeDataEntity, isAttributeDataRelation } from './AttributeDataType';
-// import {
-// mockAttributeDataNLDifferentTypes1,
-// mockAttributeDataNLDifferentTypes2,
-// mockAttributeDataNLDifferentTypes3,
-// mockAttributeDataNLEdge1,
-// mockAttributeDataNLInvalidLengthNumerical,
-// mockAttributeDataNLInvalidType,
-// mockAttributeDataNLNode1,
-// mockAttributeDataNLNode1AttributeArrayIsNoArray,
-// mockAttributeDataNLUniqueCategoricalValuesIsNoArray,
-// mockAttributeDataNLUniqueCategoricalValuesLengthIsZero,
-// } from '@graphpolaris/shared/lib/mock-data/schema/MockAttributeDataBatchedNL';
-//
-// describe('AttributeDataType', () => {
-// it('should return true for a valid attributeData object with an entity', () => {
-// expect(isAttributeDataEntity(mockAttributeDataNLNode1)).toEqual(true);
-// });
-//
-// it('should return true for a valid attributeData object with an relation', () => {
-// expect(isAttributeDataRelation(mockAttributeDataNLEdge1)).toEqual(true);
-// });
-//
-// it('should return false if the attributes array is no array', () => {
-// expect(isAttributeDataEntity(mockAttributeDataNLNode1AttributeArrayIsNoArray)).toEqual(false);
-// });
-//
-// it('should return false if the unique-categorical-values array is no array', () => {
-// expect(isAttributeDataEntity(mockAttributeDataNLUniqueCategoricalValuesIsNoArray)).toEqual(
-// false,
-// );
-// });
-//
-// it('should return false if the unique-categorical-values array has length 0, while having "Categorical" type', () => {
-// expect(isAttributeDataEntity(mockAttributeDataNLUniqueCategoricalValuesLengthIsZero)).toEqual(
-// false,
-// );
-// });
-//
-// it('should return false if the unique-categorical-values have different types', () => {
-// expect(isAttributeDataEntity(mockAttributeDataNLDifferentTypes1)).toEqual(false);
-// expect(isAttributeDataEntity(mockAttributeDataNLDifferentTypes2)).toEqual(false);
-// expect(isAttributeDataEntity(mockAttributeDataNLDifferentTypes3)).toEqual(false);
-// });
-//
-// it('should return false if the unique-categorical-values array has an element with an invalid type', () => {
-// expect(isAttributeDataEntity(mockAttributeDataNLInvalidType)).toEqual(false);
-// });
-//
-// it('should return false if the unique-categorical-values array contains an element while the category is not "Categorical', () => {
-// expect(isAttributeDataEntity(mockAttributeDataNLInvalidLengthNumerical)).toEqual(false);
-// });
-// });
diff --git a/libs/shared/lib/vis/shared/AttributeDataType.tsx b/libs/shared/lib/vis/shared/AttributeDataType.tsx
deleted file mode 100644
index 2ba60eea09631cc9291e945975e7c4dc0e42b407..0000000000000000000000000000000000000000
--- a/libs/shared/lib/vis/shared/AttributeDataType.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-/**
- * This program has been developed by students from the bachelor Computer Science at
- * Utrecht University within the Software Project course.
- * © Copyright Utrecht University (Department of Information and Computing Sciences)
- */
-import { AttributeData, AttributeFromAttributeData } from './InputDataTypes';
-
-/**
- * Checks if an object has all the properties of an attributeData type. If true, the object will be casted to attributeDataType
- * @param {any} object The object to check if it is an attributeData object.
- * @returns If true, the object is a of type attributeDataType.
- */
-export function isAttributeDataEntity(object: any): object is AttributeData {
- if (
- typeof object === 'object' &&
- 'id' in object &&
- object.id != undefined &&
- 'length' in object &&
- object.length != undefined &&
- 'connectedRatio' in object &&
- object.connectedRatio != undefined &&
- 'summedNullAmount' in object &&
- object.summedNullAmount != undefined &&
- 'attributes' in object &&
- object.attributes != undefined
- ) {
- // Check the structure of a node.
- return (
- typeof object.id == 'string' &&
- typeof object.length == 'number' &&
- typeof object.connectedRatio == 'number' &&
- typeof object.summedNullAmount == 'number' &&
- isAttributeArray(object.attributes)
- );
- }
- return false;
-}
-
-/**
- * Checks if an object has all the properties of an attributeData type. If true, the object will be casted to attributeDataType
- * @param {any} object The object to check if it is an attributeData object.
- * @returns If true, the object is a of type attributeDataType.
- */
-export function isAttributeDataRelation(object: any): object is AttributeData {
- if (
- typeof object === 'object' &&
- 'id' in object &&
- object.id != undefined &&
- 'length' in object &&
- object.length != undefined &&
- 'fromRatio' in object &&
- object.fromRatio != undefined &&
- 'toRatio' in object &&
- object.toRatio != undefined &&
- 'summedNullAmount' in object &&
- object.summedNullAmount != undefined &&
- 'attributes' in object &&
- object.attributes != undefined
- ) {
- // Check the structure of a edge.
- return (
- typeof object.id == 'string' &&
- typeof object.length == 'number' &&
- typeof object.fromRatio == 'number' &&
- typeof object.toRatio == 'number' &&
- typeof object.summedNullAmount == 'number' &&
- isAttributeArray(object.attributes)
- );
- }
- return false;
-}
-/**
- * Checks if an object has the correct structure of an attribute from AttributeData.
- * @param {any} object The object to check.
- * @returns If true, the object has the correct structure of an attribute from AttributeData.
- */
-function isAttributeArray(object: any): object is AttributeFromAttributeData[] {
- if (!Array.isArray(object)) return false;
-
- return object.every(
- (attribute: AttributeFromAttributeData) =>
- typeof attribute.name == 'string' &&
- ['Categorical', 'Numerical', 'Other'].includes(attribute.type) &&
- typeof attribute.nullAmount == 'number' &&
- isCorrectUniqueCategoricalValues(attribute)
- );
-}
-
-/**
- * Checks whether uniqueCategoricalValues has the correct values.
- * @param attribute The attribute that contains the array (possibly null) with all unique values of the categories.
- * @returns If true, uniqueCategoricalValues is or null, or has an array with values of the same type.
- */
-function isCorrectUniqueCategoricalValues(attribute: any): attribute is AttributeFromAttributeData {
- const uniqueCategoricalValues = attribute.uniqueCategoricalValues;
-
- // Check if uniqueCategoricalValues is an array.
- if (!Array.isArray(uniqueCategoricalValues)) return false;
-
- // Check if uniqueCategoricalValues.type is Categorical.
- if (attribute.type === 'Categorical') {
- // If true, it has to have a length bigger than 0.
- if (uniqueCategoricalValues.length == 0) return false;
-
- // All types in the array has to be the same.
- if (typeof uniqueCategoricalValues[0] == 'string') {
- return uniqueCategoricalValues.every((value: any) => typeof value == 'string');
- } else if (typeof uniqueCategoricalValues[0] == 'number') {
- return uniqueCategoricalValues.every((value: any) => typeof value == 'number');
- } else if (typeof uniqueCategoricalValues[0] == 'boolean') {
- return uniqueCategoricalValues.every((value: any) => typeof value == 'boolean');
- } else return false;
- }
- // If the type is Numerical or Other (the two remaining), check if the length of the array is 0.
- else {
- if (uniqueCategoricalValues.length == 0) return true;
- else return false;
- }
-}
diff --git a/libs/shared/lib/vis/shared/InputDataTypes.tsx b/libs/shared/lib/vis/shared/InputDataTypes.tsx
deleted file mode 100644
index 4d97b65297bab87cb071bad6a1563d028632396d..0000000000000000000000000000000000000000
--- a/libs/shared/lib/vis/shared/InputDataTypes.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * This program has been developed by students from the bachelor Computer Science at
- * Utrecht University within the Software Project course.
- * © Copyright Utrecht University (Department of Information and Computing Sciences)
- */
-import { SchemaAttribute } from '../../schema';
-import { AttributeCategory } from './Types';
-
-/** Node type, consist of a name and a list of attributes */
-export type Node = {
- name: string;
- attributes: SchemaAttribute[];
-};
-
-/** Edge type, consist of a name, start point, end point and a list of attributes */
-export type Edge = {
- name: string;
- to: string;
- from: string;
- collection: string;
- attributes: SchemaAttribute[];
-};
-
-/** Type of the attribute-data, which could be either of a node (entity) or an edge (relation) */
-export type AttributeData = NodeAttributeData | EdgeAttributeData;
-
-/** Type for a node containing all attribute-data */
-export type NodeAttributeData = {
- id: string;
- attributes: AttributeFromAttributeData[];
- length: number;
- connectedRatio: number;
- summedNullAmount: number;
-};
-
-/** Type for an edge containing all attribute-data */
-export type EdgeAttributeData = {
- id: string;
- attributes: AttributeFromAttributeData[];
- length: number;
- fromRatio: number;
- toRatio: number;
- summedNullAmount: number;
-};
-
-/** Type for an attribute of a node or an edge, containing attribute-data */
-export type AttributeFromAttributeData = {
- name: string;
- type: AttributeCategory;
- nullAmount: number;
- uniqueCategoricalValues: null | string[] | number[] | boolean[];
-};
diff --git a/libs/shared/lib/vis/shared/ResultNodeLinkParserUseCase.tsx b/libs/shared/lib/vis/shared/ResultNodeLinkParserUseCase.tsx
deleted file mode 100644
index 611d8d1208a3ce5e43e3770d27a5bd1e91397edc..0000000000000000000000000000000000000000
--- a/libs/shared/lib/vis/shared/ResultNodeLinkParserUseCase.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-/**
- * This program has been developed by students from the bachelor Computer Science at
- * Utrecht University within the Software Project course.
- * © Copyright Utrecht University (Department of Information and Computing Sciences)
- */
-import { GraphType, LinkType, NodeType } from '../visualizations/nodelinkvis/types';
-import { Edge, Node, GraphQueryResult } from '../../data-access/store';
-import { ML } from '../../data-access/store/mlSlice';
-/** ResultNodeLinkParserUseCase implements methods to parse and translate websocket messages from the backend into a GraphType. */
-
-/**
- * This program has been developed by students from the bachelor Computer Science at
- * Utrecht University within the Software Project course.
- * © Copyright Utrecht University (Department of Information and Computing Sciences)
- */
-/** A node link data-type for a query result object from the backend. */
-// export type NodeLinkResultType = { DEPRECATED USE GraphQueryResult
-// nodes: Node[];
-// edges: Link[];
-// mlEdges?: Link[];
-// };
-
-/** Typing for nodes and links in the node-link result. Nodes and links should always have an id and attributes. */
-// export interface AxisType {
-// id: string;
-// attributes: Record<string, any>;
-// mldata?: Record<string, string[]> | number; // This is shortest path data . This name is needs to be changed together with backend TODO: Change this.
-// }
-
-/** Typing for a node in the node-link result */
-// export type Node = AxisType;
-
-/** Typing for a link in the node-link result */
-// export interface Link extends AxisType {
-// from: string;
-// to: string;
-// }
-
-export type AxisType = Node | Edge;
-
-/** Gets the group to which the node/edge belongs */
-export function getGroupName(axisType: AxisType): string {
- // FIXME: only works in arangodb
- return axisType.label;
-}
-
-/** Returns true if the given id belongs to the target group. */
-export function isNotInGroup(nodeOrEdge: AxisType, targetGroup: string): boolean {
- return getGroupName(nodeOrEdge) != targetGroup;
-}
-
-/** Checks if a query result form the backend contains valid NodeLinkResultType data.
- * @param {any} jsonObject The query result object received from the frontend.
- * @returns True and the jsonObject will be casted, false if the jsonObject did not contain all the data fields.
- */
-export function isNodeLinkResult(jsonObject: any): jsonObject is GraphQueryResult {
- if (typeof jsonObject === 'object' && jsonObject !== null && 'nodes' in jsonObject && 'edges' in jsonObject) {
- if (!Array.isArray(jsonObject.nodes) || !Array.isArray(jsonObject.edges)) return false;
-
- const validNodes = jsonObject.nodes.every((node: any) => 'id' in node && 'attributes' in node);
- const validEdges = jsonObject.edges.every((edge: any) => 'from' in edge && 'to' in edge);
-
- return validNodes && validEdges;
- } else return false;
-}
-
-/** Returns a record with a type of the nodes as key and a number that represents how many times this type is present in the nodeLinkResult as value. */
-export function getNodeTypes(nodeLinkResult: GraphQueryResult): Record<string, number> {
- const types: Record<string, number> = {};
-
- nodeLinkResult.nodes.forEach((node) => {
- const type = getGroupName(node);
- if (types[type] != undefined) types[type]++;
- else types[type] = 0;
- });
-
- return types;
-}
-
-export type UniqueEdge = {
- from: string;
- to: string;
- count: number;
- attributes: Record<string, any>;
-};
-
-export class ParseToUniqueEdges {
- /**
- * Parse a message (containing query result) edges to unique edges.
- * @param {Link[]} queryResultEdges Edges from a query result.
- * @param {boolean} isLinkPredictionData True if parsing LinkPredictionData, false otherwise.
- * @returns {UniqueEdge[]} Unique edges with a count property added.
- */
- public static parse(queryResultEdges: Edge[], isLinkPredictionData: boolean): UniqueEdge[] {
- // Edges to be returned
- const edges: UniqueEdge[] = [];
-
- // Collect the edges in map, to only keep unique edges
- // And count the number of same edges
- const edgesMap = new Map<string, number>();
- const attriMap = new Map<string, Record<string, any>>();
- if (queryResultEdges != null) {
- if (!isLinkPredictionData) {
- for (let j = 0; j < queryResultEdges.length; j++) {
- const newLink = queryResultEdges[j].from + ':' + queryResultEdges[j].to;
- edgesMap.set(newLink, (edgesMap.get(newLink) || 0) + 1);
- attriMap.set(newLink, queryResultEdges[j].attributes);
- }
-
- edgesMap.forEach((count, key) => {
- const fromTo = key.split(':');
- edges.push({
- from: fromTo[0],
- to: fromTo[1],
- count: count,
- attributes: attriMap.get(key) ?? [],
- });
- });
- } else {
- for (let i = 0; i < queryResultEdges.length; i++) {
- edges.push({
- from: queryResultEdges[i].from,
- to: queryResultEdges[i].to,
- count: queryResultEdges[i].attributes.jaccard_coefficient as number,
- attributes: queryResultEdges[i].attributes,
- });
- }
- }
- }
- return edges;
- }
-}
diff --git a/libs/shared/lib/vis/shared/SchemaResultType.test.tsx b/libs/shared/lib/vis/shared/SchemaResultType.test.tsx
deleted file mode 100644
index cb08d75ade15ae22bbc4021eec94f284586490df..0000000000000000000000000000000000000000
--- a/libs/shared/lib/vis/shared/SchemaResultType.test.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-/**
- * This program has been developed by students from the bachelor Computer Science at
- * Utrecht University within the Software Project course.
- * © Copyright Utrecht University (Department of Information and Computing Sciences)
- */
-import { assert, describe, expect, it } from 'vitest';
-import { isSchemaResult } from './SchemaResultType';
-
-/** Testsuite to test the schema result checker */
-describe('isSchemaResult', () => {
- it('should return true for a valid schema object', () => {
- const schema: any = {
- nodes: [],
- edges: [],
- };
- expect(isSchemaResult(schema)).toBe(true);
-
- schema.nodes.push({
- name: 'hoi',
- attributes: [{ name: 'attr', type: 'string' }],
- });
- schema.edges.push({
- name: 'edge',
- from: '1',
- to: '2',
- collection: 'flights',
- attributes: [],
- });
- expect(isSchemaResult(schema)).toBe(true);
-
- schema.TEST = 2;
- expect(isSchemaResult(schema)).toBe(true);
- });
-
- it('should return false for an invalid schema object', () => {
- const schema: any = {
- nodes: [],
- edges: [],
- };
- expect(isSchemaResult(schema)).toBe(true);
-
- schema.edges = 2;
- expect(isSchemaResult(schema)).toBe(false);
-
- schema.edges = [
- {
- name: 'test',
- from: '2',
- TO: '2',
- collection: 'flights',
- attributes: [],
- },
- ];
- expect(isSchemaResult(schema)).toBe(false);
-
- schema.edges = [
- {
- name: 'test',
- from: '2',
- to: '2',
- collection: 'flights',
- attributes: 2,
- },
- ];
- expect(isSchemaResult(schema)).toBe(false);
-
- schema.edges = [
- {
- name: 'test',
- from: '2',
- to: '2',
- collection: 'flights',
- attributes: [
- { name: 'attr', type: 'text' },
- { name: 'attr', type: 'ff at 20' },
- ],
- },
- ];
- expect(isSchemaResult(schema)).toBe(false);
-
- // It should return false for incomplete schema
- const onlyNodes: any = { nodes: [] };
- const onlyEdges: any = { egdes: [] };
- expect(isSchemaResult(onlyNodes)).toEqual(false);
- expect(isSchemaResult(onlyEdges)).toEqual(false);
- });
-});
diff --git a/libs/shared/lib/vis/shared/SchemaResultType.tsx b/libs/shared/lib/vis/shared/SchemaResultType.tsx
deleted file mode 100644
index 804ed3f9c469e44033f1970d9225877c421d9063..0000000000000000000000000000000000000000
--- a/libs/shared/lib/vis/shared/SchemaResultType.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * This program has been developed by students from the bachelor Computer Science at
- * Utrecht University within the Software Project course.
- * © Copyright Utrecht University (Department of Information and Computing Sciences)
- */
-
-/**
- * Checks if an object has all the properties of a schema result. If true, the object will be casted to SchemaResultType
- * @param {any} object The object to check if it is a SchemaResult object.
- * @returns If true, the object is a of type SchemaResultType.
- * @deprecated //TODO remove
- */
-export function isSchemaResult(object: any): object is any {
- if (typeof object === 'object' && 'nodes' in object && object.nodes != undefined && 'edges' in object && object.edges != undefined) {
- if (!Array.isArray(object.nodes) || !Array.isArray(object.edges)) return false;
-
- // Check the structure of all nodes
- const validNodes = object.nodes.every((node: any) => typeof node.name == 'string' && isAttributeArray(node.attributes));
-
- // Check the structure of all edges
- const validEdges = object.edges.every(
- (edge: any) =>
- typeof edge.name == 'string' &&
- typeof edge.collection == 'string' &&
- typeof edge.from == 'string' &&
- typeof edge.to == 'string' &&
- isAttributeArray(edge.attributes)
- );
- return validNodes && validEdges;
- }
- return false;
-}
-
-/**
- * Checks if an object has the structure of a SchemaAttribute.
- * @param {any} object The object to check.
- * @returns If true, the object has the structure of SchemaAttribute type.
- * @deprecated //TODO remove
- */
-function isAttributeArray(object: any): object is any[] {
- if (!Array.isArray(object)) {
- return false;
- }
-
- return object.every((attribute) => typeof attribute.name == 'string' && ['string', 'int', 'bool', 'float'].includes(attribute.type));
-}
diff --git a/libs/shared/lib/vis/shared/Types.tsx b/libs/shared/lib/vis/shared/Types.tsx
deleted file mode 100644
index 18616628186351da17989aa1487dde8cdd6e2ce2..0000000000000000000000000000000000000000
--- a/libs/shared/lib/vis/shared/Types.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-/**
- * This program has been developed by students from the bachelor Computer Science at
- * Utrecht University within the Software Project course.
- * © Copyright Utrecht University (Department of Information and Computing Sciences)
- */
-import { Edge, Node } from 'reactflow';
-
-/**
- * List of schema elements for react flow
- */
-export type SchemaElements = {
- nodes: Node[];
- edges: Edge[];
- selfEdges: Edge[];
-};
-
-/**
- * Point that has an x and y coordinate
- */
-export interface Point {
- x: number;
- y: number;
-}
-
-/**
- * Bounding box described by a top left and bottom right coordinate
- */
-export interface BoundingBox {
- topLeft: Point;
- bottomRight: Point;
-}
-
-/**
- * Typing for the Node Quality data of an entity.
- * It is used for the Node quality analytics and will be displayed in the corresponding popup.
- */
-export interface NodeQualityDataForEntities {
- nodeCount: number;
- attributeNullCount: number;
- notConnectedNodeCount: number;
-
- isAttributeDataIn: boolean; // is true when the data to display has arrived
-
- // for user interactions
- onClickCloseButton: () => void;
-}
-
-/**
- * Typing for the Node Quality data of a relation.
- * It is used for the Node quality analytics and will be displayed in the corresponding popup.
- */
-export interface NodeQualityDataForRelations {
- nodeCount: number;
- attributeNullCount: number;
- // from-entity node --relation--> to-entity node
- fromRatio: number; // the ratio of from-entity nodes to nodes that have this relation
- toRatio: number; // the ratio of to-entity nodes to nodes that have this relation
-
- isAttributeDataIn: boolean; // is true when the data to display has arrived
-
- // for user interactions
- onClickCloseButton: () => void;
-}
-
-/**
- * Typing for the Node Quality popup of an entity or relation node.
- */
-export interface NodeQualityPopupNode extends Node {
- data: NodeQualityDataForEntities | NodeQualityDataForRelations;
- nodeID: string; //ID of the node for which the popup is
-}
-
-/**
- * Typing for the attribute analytics popup menu data of an entity or relation.
- */
-export interface AttributeAnalyticsData {
- nodeType: NodeType;
- nodeID: string;
- attributes: AttributeWithData[];
- // nullAmount: number;
-
- isAttributeDataIn: boolean; // is true when the data to display has arrived
-
- // for user interactions
- onClickCloseButton: () => void;
- onClickPlaceInQueryBuilderButton: (name: string, type: string) => void;
- searchForAttributes: (id: string, searchbarValue: string) => void;
- resetAttributeFilters: (id: string) => void;
- applyAttributeFilters: (id: string, category: AttributeCategory, predicate: string, percentage: number) => void;
-}
-
-/** All possible options of categories of an attribute */
-export enum AttributeCategory {
- categorical = 'Categorical',
- numerical = 'Numerical',
- other = 'Other',
- undefined = 'undefined',
-}
-
-/** All possible options of node-types */
-export enum NodeType {
- entity = 'entity',
- relation = 'relation',
-}
-
-/**
- * Typing for the attribute analytics popup menu of entity or relation nodes
- */
-export interface AttributeAnalyticsPopupMenuNode extends Node {
- nodeID: string; //ID of the node for which the popup is
- data: AttributeAnalyticsData;
-}
-
-/** Typing of the attributes which are stored in the popup menu's */
-export type AttributeWithData = {
- attribute: any;
- category: AttributeCategory;
- nullAmount: number;
-};
diff --git a/libs/shared/lib/vis/shared/VisConfigPanel/ArrowRightIcon.svg b/libs/shared/lib/vis/shared/VisConfigPanel/ArrowRightIcon.svg
deleted file mode 100644
index 0b775d11e4de0393af2ccc0f37f91f7a0d09b6d0..0000000000000000000000000000000000000000
--- a/libs/shared/lib/vis/shared/VisConfigPanel/ArrowRightIcon.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><defs><clipPath><path fill="#00f" fill-opacity=".514" d="m-7 1024.36h34v34h-34z"/></clipPath><clipPath><path fill="#aade87" fill-opacity=".472" d="m-6 1028.36h32v32h-32z"/></clipPath></defs><path d="m345.44 248.29l-194.29 194.28c-12.359 12.365-32.397 12.365-44.75 0-12.354-12.354-12.354-32.391 0-44.744l171.91-171.91-171.91-171.9c-12.354-12.359-12.354-32.394 0-44.748 12.354-12.359 32.391-12.359 44.75 0l194.29 194.28c6.177 6.18 9.262 14.271 9.262 22.366 0 8.099-3.091 16.196-9.267 22.373" transform="matrix(.03541-.00013.00013.03541 2.98 3.02)" fill="#4d4d4d"/></svg>
\ No newline at end of file
diff --git a/libs/shared/lib/vis/shared/VisConfigPanel/QuestionMarkIcon.svg b/libs/shared/lib/vis/shared/VisConfigPanel/QuestionMarkIcon.svg
deleted file mode 100644
index 75c116bed4da2237ce27230a8b5d4ad888e0b9be..0000000000000000000000000000000000000000
--- a/libs/shared/lib/vis/shared/VisConfigPanel/QuestionMarkIcon.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg id="svg2" xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 200 200" version="1.0">
- <g id="layer1">
- <path id="path2413" d="m100 0c-55.2 0-100 44.8-100 100-5.0495e-15 55.2 44.8 100 100 100s100-44.8 100-100-44.8-100-100-100zm0 12.812c48.13 0 87.19 39.058 87.19 87.188s-39.06 87.19-87.19 87.19-87.188-39.06-87.188-87.19 39.058-87.188 87.188-87.188zm1.47 21.25c-5.45 0.03-10.653 0.737-15.282 2.063-4.699 1.346-9.126 3.484-12.876 6.219-3.238 2.362-6.333 5.391-8.687 8.531-4.159 5.549-6.461 11.651-7.063 18.687-0.04 0.468-0.07 0.868-0.062 0.876 0.016 0.016 21.702 2.687 21.812 2.687 0.053 0 0.113-0.234 0.282-0.937 1.941-8.085 5.486-13.521 10.968-16.813 4.32-2.594 9.808-3.612 15.778-2.969 2.74 0.295 5.21 0.96 7.38 2 2.71 1.301 5.18 3.361 6.94 5.813 1.54 2.156 2.46 4.584 2.75 7.312 0.08 0.759 0.05 2.48-0.03 3.219-0.23 1.826-0.7 3.378-1.5 4.969-0.81 1.597-1.48 2.514-2.76 3.812-2.03 2.077-5.18 4.829-10.78 9.407-3.6 2.944-6.04 5.156-8.12 7.343-4.943 5.179-7.191 9.069-8.564 14.719-0.905 3.72-1.256 7.55-1.156 13.19 0.025 1.4 0.062 2.73 0.062 2.97v0.43h21.598l0.03-2.4c0.03-3.27 0.21-5.37 0.56-7.41 0.57-3.27 1.43-5 3.94-7.81 1.6-1.8 3.7-3.76 6.93-6.47 4.77-3.991 8.11-6.99 11.26-10.125 4.91-4.907 7.46-8.26 9.28-12.187 1.43-3.092 2.22-6.166 2.46-9.532 0.06-0.816 0.07-3.03 0-3.968-0.45-7.043-3.1-13.253-8.15-19.032-0.8-0.909-2.78-2.887-3.72-3.718-4.96-4.394-10.69-7.353-17.56-9.094-4.19-1.062-8.23-1.6-13.35-1.75-0.78-0.023-1.59-0.036-2.37-0.032zm-10.908 103.6v22h21.998v-22h-21.998z"/>
- </g>
-</svg>
\ No newline at end of file
diff --git a/libs/shared/lib/vis/shared/VisConfigPanel/VisConfigPanel.module.scss b/libs/shared/lib/vis/shared/VisConfigPanel/VisConfigPanel.module.scss
deleted file mode 100644
index 4904ce9dbf522bf430586ca1694beaf9c8632116..0000000000000000000000000000000000000000
--- a/libs/shared/lib/vis/shared/VisConfigPanel/VisConfigPanel.module.scss
+++ /dev/null
@@ -1,99 +0,0 @@
-/**
- * This program has been developed by students from the bachelor Computer Science at
- * Utrecht University within the Software Project course.
- * © Copyright Utrecht University (Department of Information and Computing Sciences)
- */
-
-/* istanbul ignore file */
-/* The comment above was added so the code coverage wouldn't count this file towards code coverage.
- * We do not test components/renderfunctions/styling files.
- * See testing plan for more details.*/
-/** Stylesheet for the VisConfigPanelComponent */
-$expandButtonSize: 13px;
-
-:export {
- expandButtonSize: $expandButtonSize;
-}
-
-.container {
- height: 100%;
- position: absolute;
- top: 0;
- background-color: #f0f0f0;
-
- transition: right 0.2s, left 0.2s;
- z-index: 100;
-
- border-radius: 0 0 0 5px;
-
- .expandButton {
- position: absolute;
- height: 100%;
- width: $expandButtonSize;
- background-color: #f0f0f0;
- cursor: pointer;
- border-radius: 0 0 0 5px;
-
- &:hover {
- background-color: rgb(230, 230, 230);
- }
-
- svg {
- position: absolute;
- width: 100%;
- top: 50%;
- margin-top: -0.5em;
- }
- .arrowLeft {
- transform: rotate(180deg);
- }
- }
-
- .childrenContainer {
- width: 100%;
- height: 100%;
-
- .children {
- padding-left: 15px;
-
- width: 100%;
- height: 100%;
-
- overflow-x: hidden;
- overflow-y: auto;
-
- // SCROLLBAR STYLING
- /* Works on Firefox */
- scrollbar-width: thin;
- scrollbar-color: #bebebe #f0f0f0;
-
- /* Works on Chrome, Edge, and Safari */
- &::-webkit-scrollbar {
- width: 12px;
- }
-
- &::-webkit-scrollbar-track {
- background: #f0f0f0;
- }
-
- &::-webkit-scrollbar-thumb {
- background-color: #bebebe;
- border-radius: 20px;
- border: 3px solid #f0f0f0;
- }
- }
- }
-}
-
-/* .expandButton::after {
- content: '<';
- line-height: 1;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- font-size: 16px;
- display: block;
- position: absolute;
- top: 50%;
- text-align: center;
- margin-top: -0.5em;
-} */
diff --git a/libs/shared/lib/vis/shared/VisConfigPanel/VisConfigPanel.module.scss.d.ts b/libs/shared/lib/vis/shared/VisConfigPanel/VisConfigPanel.module.scss.d.ts
deleted file mode 100644
index 5099a5d37475d6ea75785f42f93dc56063d2e7e4..0000000000000000000000000000000000000000
--- a/libs/shared/lib/vis/shared/VisConfigPanel/VisConfigPanel.module.scss.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-declare const classNames: {
- readonly expandButtonSize: 'expandButtonSize';
- readonly container: 'container';
- readonly expandButton: 'expandButton';
- readonly arrowLeft: 'arrowLeft';
- readonly childrenContainer: 'childrenContainer';
- readonly children: 'children';
-};
-export = classNames;
diff --git a/libs/shared/lib/vis/shared/VisConfigPanel/VisConfigPanel.tsx b/libs/shared/lib/vis/shared/VisConfigPanel/VisConfigPanel.tsx
deleted file mode 100644
index 4b52f95953e7b12b880dc94424044bc759cd14b4..0000000000000000000000000000000000000000
--- a/libs/shared/lib/vis/shared/VisConfigPanel/VisConfigPanel.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * This program has been developed by students from the bachelor Computer Science at
- * Utrecht University within the Software Project course.
- * © Copyright Utrecht University (Department of Information and Computing Sciences)
- */
-
-/* istanbul ignore file */
-/* The comment above was added so the code coverage wouldn't count this file towards code coverage.
- * We do not test components/renderfunctions/styling files.
- * See testing plan for more details.*/
-
-/** A component for rendering a configuration panel to the right of the visualization. */
-
-import React, { useState } from 'react';
-import styles from './VisConfigPanel.module.scss';
-
-//TODO import { ReactComponent as ArrowRightSVG } from './ArrowRightIcon.svg';
-
-export default function VisConfigPanelComponent({
- width = 250,
- children,
- isLeft = false,
-}: {
- width?: number;
- children?: React.ReactNode;
- isLeft?: boolean;
-}) {
- const [show, setShow] = useState(false);
- const containerStyle = isLeft ? { left: show ? 0 : -width + 13, width: width } : { right: show ? 0 : -width + 13, width: width };
- const arrowStyle = isLeft ? { right: 0 } : { left: 0 };
-
- return (
- <div className={styles.container} style={containerStyle} key="placeholderKey">
- <div className={styles.expandButton} key="placeholderKey2" onClick={() => (show ? setShow(false) : setShow(true))} style={arrowStyle}>
- {/* <ArrowRightSVG className={show == isLeft ? '' : styles.arrowLeft} key="placeholderKey3" /> */}
- </div>
- <div className={styles.childrenContainer} key="placeholderKey4">
- <div className={styles.children} key="placeholderKey5">
- {children}
- </div>
- </div>
- </div>
- );
-}
diff --git a/libs/shared/lib/vis/screens/index.tsx b/libs/shared/lib/vis/views/index.tsx
similarity index 100%
rename from libs/shared/lib/vis/screens/index.tsx
rename to libs/shared/lib/vis/views/index.tsx
diff --git a/libs/shared/lib/vis/screens/noData.tsx b/libs/shared/lib/vis/views/noData.tsx
similarity index 100%
rename from libs/shared/lib/vis/screens/noData.tsx
rename to libs/shared/lib/vis/views/noData.tsx
diff --git a/libs/shared/lib/vis/screens/querying.tsx b/libs/shared/lib/vis/views/querying.tsx
similarity index 100%
rename from libs/shared/lib/vis/screens/querying.tsx
rename to libs/shared/lib/vis/views/querying.tsx
diff --git a/libs/shared/lib/vis/screens/recommender.tsx b/libs/shared/lib/vis/views/recommender.tsx
similarity index 100%
rename from libs/shared/lib/vis/screens/recommender.tsx
rename to libs/shared/lib/vis/views/recommender.tsx
diff --git a/libs/shared/lib/vis/types.ts b/libs/shared/lib/vis/visualization.types.ts
similarity index 61%
rename from libs/shared/lib/vis/types.ts
rename to libs/shared/lib/vis/visualization.types.ts
index 1f91885dd855ac99c7fc26bfad231a633971307c..9a3479e8579b7b9c6b624c12be441b718f5cf7db 100644
--- a/libs/shared/lib/vis/types.ts
+++ b/libs/shared/lib/vis/visualization.types.ts
@@ -3,7 +3,7 @@ import { ML } from '../data-access/store/mlSlice';
import { SchemaGraph } from '../schema';
import type { AppDispatch } from '../data-access';
import { FC } from 'react';
-import { Visualizations } from './manager/manager';
+import { Visualizations } from './hooks/useVisualizationManager';
export type VisualizationConfiguration = { [id: string]: any };
@@ -23,3 +23,14 @@ export type VisualizationPropTypes = {
handleHover: (val: any) => void;
handleSelect: (val: any) => void;
};
+
+export interface VisualizationManager {
+ renderComponent: () => React.ReactNode;
+ renderSettings: () => React.ReactNode;
+ active: string | undefined;
+ activeType: string | undefined;
+ tabs: string[];
+ changeActive: (id: string) => void;
+ reorderVisualizations: (args: { draggedVisId: string; dropVisId: string }) => void;
+ deleteVisualization: (id: string) => void;
+}
diff --git a/libs/shared/lib/vis/visualizations/mapvis/mapvis.stories.tsx b/libs/shared/lib/vis/visualizations/mapvis/mapvis.stories.tsx
index fb7db1d2b51f0f6108749715561210f73cbc105b..72c0ba81ed57a9bc6a738b96c19282e17821fd68 100644
--- a/libs/shared/lib/vis/visualizations/mapvis/mapvis.stories.tsx
+++ b/libs/shared/lib/vis/visualizations/mapvis/mapvis.stories.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import { Meta } from '@storybook/react';
-import { VisualizationPanel } from '../../panel';
+import { VisualizationPanel } from '../../components/panel';
import { Provider } from 'react-redux';
import { configureStore } from '@reduxjs/toolkit';
import {
diff --git a/libs/shared/lib/vis/visualizations/mapvis/mapvis.tsx b/libs/shared/lib/vis/visualizations/mapvis/mapvis.tsx
index d9f84a2cc491d570976c5318bde1f4babee9b79a..c3f0045c21374209c54a6601406f9b83e69ea9fa 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 } from '../../types';
+import { VISComponentType, VisualizationPropTypes } from '../../visualization.types';
import { GraphMetaData } from '@graphpolaris/shared/lib/data-access/statistics';
export type MapProps = {};
diff --git a/libs/shared/lib/vis/visualizations/matrixvis/components/MatrixPixi.tsx b/libs/shared/lib/vis/visualizations/matrixvis/components/MatrixPixi.tsx
index 7784f373e95dfb6ba976ab746294c9f364150b6a..ae3cb0b29e1b40474ffe520530bc1b96b661abb0 100644
--- a/libs/shared/lib/vis/visualizations/matrixvis/components/MatrixPixi.tsx
+++ b/libs/shared/lib/vis/visualizations/matrixvis/components/MatrixPixi.tsx
@@ -24,7 +24,7 @@ import { Actions, Interpolations } from 'pixi-actions';
import Color from 'color';
import { createColumn } from './ColumnGraphicsComponent';
import { ReorderingManager } from './ReorderingManager';
-import { VisualizationConfiguration } from '../../../types';
+import { VisualizationConfiguration } from '../../../visualization.types';
type Props = {
// onClick: (node: NodeType, pos: IPointData) => void;
diff --git a/libs/shared/lib/vis/visualizations/matrixvis/matrix.stories.tsx b/libs/shared/lib/vis/visualizations/matrixvis/matrix.stories.tsx
index 9b2fdec0db6784968daa9871041d6ebaa3fb3a11..32f4b231ced6b2d17dba7986d7fe0ff62e413d2b 100644
--- a/libs/shared/lib/vis/visualizations/matrixvis/matrix.stories.tsx
+++ b/libs/shared/lib/vis/visualizations/matrixvis/matrix.stories.tsx
@@ -3,7 +3,7 @@ import { Meta } from '@storybook/react';
import { configureStore } from '@reduxjs/toolkit';
import { Provider } from 'react-redux';
import { big2ndChamberQueryResult, smallFlightsQueryResults, mockLargeQueryResults } from '../../../mock-data';
-import { VisualizationPanel } from '../../panel';
+import { VisualizationPanel } from '../../components/panel';
import {
assignNewGraphQueryResult,
diff --git a/libs/shared/lib/vis/visualizations/matrixvis/matrixvis.tsx b/libs/shared/lib/vis/visualizations/matrixvis/matrixvis.tsx
index 9710f0646d79441490f17d026bbd38919c1d69ba..c58e4daeeece3bd4ffbd4c4672428e95d30fe92e 100644
--- a/libs/shared/lib/vis/visualizations/matrixvis/matrixvis.tsx
+++ b/libs/shared/lib/vis/visualizations/matrixvis/matrixvis.tsx
@@ -3,10 +3,10 @@ import { useImmer } from 'use-immer';
import { GraphQueryResult } from '../../../data-access/store';
import { LinkType, NodeType } from './Types';
import { MatrixPixi } from './components/MatrixPixi';
-import { VisualizationPropTypes, VISComponentType } from '../../types';
+import { VisualizationPropTypes, VISComponentType } from '../../visualization.types';
import Input from '@graphpolaris/shared/lib/components/inputs';
import { GraphMetaData } from '@graphpolaris/shared/lib/data-access/statistics';
-import { SettingsContainer } from '@graphpolaris/shared/lib/vis/configuration';
+import { SettingsContainer } from '@graphpolaris/shared/lib/vis/components/config';
import { dataColors, tailwindColors } from 'config';
export interface MatrixVisProps {
diff --git a/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx b/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx
index 3aba8b83cf7f94a20f5997be66f12bb151e54454..2fcb9ab4cb9d602952dc29f339c091cd80f2bb48 100644
--- a/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx
+++ b/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx
@@ -7,7 +7,7 @@ import * as force from './NLForce';
import { Viewport } from 'pixi-viewport';
import { useAppDispatch, useML, useSearchResultData } from '../../../../data-access';
import { NLPopup } from './NLPopup';
-import { VisualizationConfiguration } from '../../../types';
+import { VisualizationConfiguration } from '../../../visualization.types';
type Props = {
onClick: (node: NodeType, pos: IPointData) => void;
diff --git a/libs/shared/lib/vis/visualizations/nodelinkvis/nodelinkvis.stories.tsx b/libs/shared/lib/vis/visualizations/nodelinkvis/nodelinkvis.stories.tsx
index dbc1f31d96a6889b508b5f1bd5280a29af9badd5..0ca6d3a0e64d005c051238242f4d26f03c362aed 100644
--- a/libs/shared/lib/vis/visualizations/nodelinkvis/nodelinkvis.stories.tsx
+++ b/libs/shared/lib/vis/visualizations/nodelinkvis/nodelinkvis.stories.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import { Meta } from '@storybook/react';
-import { VisualizationPanel } from '../../panel';
+import { VisualizationPanel } from '../../components/panel';
import {
assignNewGraphQueryResult,
graphQueryResultSlice,
diff --git a/libs/shared/lib/vis/visualizations/nodelinkvis/nodelinkvis.tsx b/libs/shared/lib/vis/visualizations/nodelinkvis/nodelinkvis.tsx
index 9b8411bde2006008fa3ce168a3de770801fa5acd..5c8ba45319d562c717d6af5ef66b2d4d928efcda 100644
--- a/libs/shared/lib/vis/visualizations/nodelinkvis/nodelinkvis.tsx
+++ b/libs/shared/lib/vis/visualizations/nodelinkvis/nodelinkvis.tsx
@@ -4,10 +4,10 @@ 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 '../../visualization.types';
import Input from '@graphpolaris/shared/lib/components/inputs';
import { GraphMetaData } from '@graphpolaris/shared/lib/data-access/statistics';
-import { SettingsContainer, SettingsHeader } from '@graphpolaris/shared/lib/vis/configuration';
+import { SettingsContainer, SettingsHeader } from '@graphpolaris/shared/lib/vis/components/config';
import { validateProps } from '@deck.gl/core/typed/lifecycle/props';
export interface NodelinkVisProps {
diff --git a/libs/shared/lib/vis/visualizations/paohvis/paohvis.stories.tsx b/libs/shared/lib/vis/visualizations/paohvis/paohvis.stories.tsx
index fdd3696016d84adf1d6d8877be85d8bb87e94c0b..62909929e9a6159c79accfd69fbbfd2380530600 100644
--- a/libs/shared/lib/vis/visualizations/paohvis/paohvis.stories.tsx
+++ b/libs/shared/lib/vis/visualizations/paohvis/paohvis.stories.tsx
@@ -8,7 +8,7 @@ import {
} from '../../../data-access/store';
import { configureStore } from '@reduxjs/toolkit';
import { Meta } from '@storybook/react';
-import { VisualizationPanel } from '../../panel';
+import { VisualizationPanel } from '../../components/panel';
import { Provider } from 'react-redux';
import { SchemaUtils } from '../../../schema/schema-utils';
import { bigMockQueryResults, simpleSchemaRaw, smallFlightsQueryResults } from '../../../mock-data';
diff --git a/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx b/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx
index caca7777a6b832ca6d47cb38b98c506157c42c74..32782fdf12a1da0fc5ff30474f7850b6fa441533 100644
--- a/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx
+++ b/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx
@@ -27,9 +27,9 @@ import { HyperEdgeRange } from './components/HyperEdgesRange';
import ToPaohvisDataParserUseCase from './utils/ToPaohvisDataParserUsecase';
import MakePaohvisMenu from './components/MakePaohvisMenu';
import { RowLabelColumn } from './components/RowLabelColumn';
-import { VISComponentType, VisualizationPropTypes } from '../../types';
+import { VISComponentType, VisualizationPropTypes } from '../../visualization.types';
import { GraphMetaData } from '@graphpolaris/shared/lib/data-access/statistics';
-import { SettingsContainer, SettingsHeader } from '@graphpolaris/shared/lib/vis/configuration';
+import { SettingsContainer, SettingsHeader } from '@graphpolaris/shared/lib/vis/components/config';
import Input from '@graphpolaris/shared/lib/components/inputs';
type PaohvisViewModelState = {
diff --git a/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.stories.tsx b/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.stories.tsx
index adb53e6cf5f5f4182c5c93d019045b8fd996c5c7..9bfd96ee8a38749fd2e67d41ee96a40679f3a0da 100644
--- a/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.stories.tsx
+++ b/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.stories.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import { Meta } from '@storybook/react';
-import { VisualizationPanel } from '../../panel';
+import { VisualizationPanel } from '../../components/panel';
import {
assignNewGraphQueryResult,
graphQueryResultSlice,
diff --git a/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.tsx b/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.tsx
index 054e98f9f183006d8abb585ca6c502d0ed0d2dc5..691b28d858dbd666def308716cf677c2d576445d 100644
--- a/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.tsx
+++ b/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.tsx
@@ -1,8 +1,8 @@
import React, { useEffect } from 'react';
import ReactJSONView from 'react-json-view';
-import { VisualizationPropTypes, VISComponentType } from '../../types';
+import { VisualizationPropTypes, VISComponentType } from '../../visualization.types';
import { GraphMetaData } from '@graphpolaris/shared/lib/data-access/statistics';
-import { SettingsContainer } from '@graphpolaris/shared/lib/vis/configuration';
+import { SettingsContainer } from '@graphpolaris/shared/lib/vis/components/config';
import Input from '@graphpolaris/shared/lib/components/inputs';
export interface RawJSONVisProps {
diff --git a/libs/shared/lib/vis/visualizations/semanticsubstrates/semanticsubstrates.stories.tsx b/libs/shared/lib/vis/visualizations/semanticsubstrates/semanticsubstrates.stories.tsx
index 9c518a5bd37ea9499407ee54673165eeff4cd329..cd07451579f4050985b76f3a188f8047bcc0fe71 100644
--- a/libs/shared/lib/vis/visualizations/semanticsubstrates/semanticsubstrates.stories.tsx
+++ b/libs/shared/lib/vis/visualizations/semanticsubstrates/semanticsubstrates.stories.tsx
@@ -9,7 +9,7 @@ import {
import { configureStore } from '@reduxjs/toolkit';
import { Meta } from '@storybook/react';
import { Provider } from 'react-redux';
-import { VisualizationPanel } from '../../panel';
+import { VisualizationPanel } from '../../components/panel';
import { SchemaUtils } from '../../../schema/schema-utils';
import { simpleSchemaAirportRaw } from '../../../mock-data/schema/simpleAirportRaw';
import { bigMockQueryResults } from '../../../mock-data';
diff --git a/libs/shared/lib/vis/visualizations/tablevis/tablevis.stories.tsx b/libs/shared/lib/vis/visualizations/tablevis/tablevis.stories.tsx
index 698d5ddec794fef1542ff669be924319ac69666e..c0e5c5187c0e7f8cfe3e09346d645f83d9ef7aa7 100644
--- a/libs/shared/lib/vis/visualizations/tablevis/tablevis.stories.tsx
+++ b/libs/shared/lib/vis/visualizations/tablevis/tablevis.stories.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import { Meta } from '@storybook/react';
-import { VisualizationPanel } from '../../panel';
+import { VisualizationPanel } from '../../components/panel';
import {
assignNewGraphQueryResult,
graphQueryResultSlice,
diff --git a/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx b/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx
index ef6ead2a0c27c52258db67480f255847487a8431..a0af56f16ad724421536a29052648b7ec5713b0a 100644
--- a/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx
+++ b/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx
@@ -1,10 +1,10 @@
import React, { useMemo, useRef } from 'react';
import { Table, AugmentedNodeAttributes } from './components/Table';
import { SchemaAttribute } from '../../../schema';
-import { VisualizationPropTypes, VISComponentType } from '../../types';
+import { VisualizationPropTypes, VISComponentType } from '../../visualization.types';
import Input from '@graphpolaris/shared/lib/components/inputs';
import { GraphMetaData } from '@graphpolaris/shared/lib/data-access/statistics';
-import { SettingsContainer, SettingsHeader } from '@graphpolaris/shared/lib/vis/configuration';
+import { SettingsContainer, SettingsHeader } from '@graphpolaris/shared/lib/vis/components/config';
export type TableProps = {
showBarplot: boolean;