diff --git a/apps/web/src/app/app.tsx b/apps/web/src/app/app.tsx
index f77bd93e000a5089d10e9a32e950338f2c221e11..259f2b7f0cf625d91047389266b27e2906319bed 100644
--- a/apps/web/src/app/app.tsx
+++ b/apps/web/src/app/app.tsx
@@ -18,7 +18,7 @@ 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 Sidebar from '@graphpolaris/shared/lib/sidebar';
import { useVisualizationManager } from '@graphpolaris/shared/lib/vis/hooks';
import { ConfigPanel } from '@graphpolaris/shared/lib/vis/components/config';
@@ -73,7 +73,7 @@ export function App(props: App) {
</aside>
<main className="flex w-screen h-[calc(100%-4.2rem)]">
<Resizable divisorSize={3} horizontal={true} defaultProportion={0.33}>
- <DataViewer auth={authCheck} />
+ <Sidebar auth={authCheck} />
<div className="h-full w-full">
<Resizable divisorSize={3} horizontal={false}>
<div className="w-full h-full border">
diff --git a/libs/shared/lib/data-access/store/visualizationSlice.ts b/libs/shared/lib/data-access/store/visualizationSlice.ts
index 1299b0488d0c1bf65147d0bb75d6e24bc64135d8..46d3a32b3f7617e2d7facfb61df885aac9eab2bb 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/visualization.types';
+import { VisualizationConfiguration } from '../../vis/shared';
import { isEqual } from 'lodash-es';
export type VisStateSettings = {
diff --git a/libs/shared/lib/data-viewer/index.tsx b/libs/shared/lib/sidebar/index.tsx
similarity index 98%
rename from libs/shared/lib/data-viewer/index.tsx
rename to libs/shared/lib/sidebar/index.tsx
index 1df6c93a7935ea5f1c444dc77516f09a4a74d2fe..5af63b646daa1638f8f4ba57470134da151ddc20 100644
--- a/libs/shared/lib/data-viewer/index.tsx
+++ b/libs/shared/lib/sidebar/index.tsx
@@ -6,7 +6,7 @@ import Searchbar from './search/searchbar';
import ColorMode from '../components/color-mode';
import ControlContainer from '../components/controls';
-export default function DataViewer({ auth }: { auth: boolean }) {
+export default function Sidebar({ auth }: { auth: boolean }) {
const [tab, setTab] = useState('Schema');
const [showDialog, setShowDialog] = useState<boolean>(true);
diff --git a/libs/shared/lib/data-viewer/search/searchbar.tsx b/libs/shared/lib/sidebar/search/searchbar.tsx
similarity index 100%
rename from libs/shared/lib/data-viewer/search/searchbar.tsx
rename to libs/shared/lib/sidebar/search/searchbar.tsx
diff --git a/libs/shared/lib/data-viewer/search/similarity.ts b/libs/shared/lib/sidebar/search/similarity.ts
similarity index 100%
rename from libs/shared/lib/data-viewer/search/similarity.ts
rename to libs/shared/lib/sidebar/search/similarity.ts
diff --git a/libs/shared/lib/vis/components/bar.tsx b/libs/shared/lib/vis/components/bar.tsx
index 72736b772af6193179c77992fef9752412bdf282..23f2c1d916e45ca4030444635eaf2f53e855f9e6 100644
--- a/libs/shared/lib/vis/components/bar.tsx
+++ b/libs/shared/lib/vis/components/bar.tsx
@@ -1,19 +1,17 @@
-import React, { useState } from 'react';
+import React from 'react';
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 } from '../hooks';
-import { VisualizationManager } from '../visualization.types';
+import { VisualizationManager } from '../shared';
type Props = {
manager: VisualizationManager;
};
export default function VisualizationBar({ manager }: Props) {
- const [visDropdownOpen, setVisDropdownOpen] = useState<boolean>(false);
-
const handleDragStart = (e: React.DragEvent<HTMLDivElement>, visId: string) => {
e.dataTransfer.setData('text/plain', visId);
};
@@ -72,7 +70,7 @@ export default function VisualizationBar({ manager }: Props) {
<TooltipTrigger>
<Button type="secondary" variant="ghost" size="xs" iconComponent={<Add />} onClick={() => {}} />
</TooltipTrigger>
- <TooltipContent side={'bottom'} disabled={visDropdownOpen}>
+ <TooltipContent side={'bottom'}>
<p>Add visualization</p>
</TooltipContent>
</Tooltip>
@@ -85,8 +83,6 @@ export default function VisualizationBar({ manager }: Props) {
key={key}
className="text-sm px-2 py-1 rounded cursor-pointer hover:bg-secondary-200"
onClick={(e) => {
- e.preventDefault();
- setVisDropdownOpen(false);
manager.changeActive(key);
}}
>
diff --git a/libs/shared/lib/vis/components/config/panel.tsx b/libs/shared/lib/vis/components/config/panel.tsx
index 2ffd796423c78d5afaee3baa2fa24792a19a2fb1..3268205e8f2165052b929881a4302e2d0998555a 100644
--- a/libs/shared/lib/vis/components/config/panel.tsx
+++ b/libs/shared/lib/vis/components/config/panel.tsx
@@ -3,7 +3,7 @@ import { Button, Icon } from '../../../components';
import { Delete, Person } from '@mui/icons-material';
import Input from '../../../components/inputs';
import { VISUALIZATION_TYPES } from '../../hooks';
-import { VisualizationManager } from '../../visualization.types';
+import { VisualizationManager } from '../../shared';
import { SettingsHeader } from './components';
import { useSessionCache } from '../../../data-access';
diff --git a/libs/shared/lib/vis/components/panel.tsx b/libs/shared/lib/vis/components/panel.tsx
index 1e9260879f6f0380823850e8985541a105d7db13..50556010dbedaf23e2e3efb3eab6cdbf1514cfec 100644
--- a/libs/shared/lib/vis/components/panel.tsx
+++ b/libs/shared/lib/vis/components/panel.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import { useGraphQueryResult, useQuerybuilderGraph } from '@graphpolaris/shared/lib/data-access';
import VisualizationBar from './bar';
-import { VisualizationManager } from '../visualization.types';
+import { VisualizationManager } from '../shared';
import { Recommender, NoData, Querying } from '../views';
export const VisualizationPanel = ({ manager }: { manager: VisualizationManager }) => {
diff --git a/libs/shared/lib/vis/hooks/useVisualizationManager.tsx b/libs/shared/lib/vis/hooks/useVisualizationManager.tsx
index c2ebee597d66a4cd5cd7eddeb9687f190da028f0..bd029a3cf0e993b8946d0adcbf7b676863633eb4 100644
--- a/libs/shared/lib/vis/hooks/useVisualizationManager.tsx
+++ b/libs/shared/lib/vis/hooks/useVisualizationManager.tsx
@@ -1,5 +1,5 @@
import React, { useState, useEffect, Suspense } from 'react';
-import { VISComponentType, VisualizationConfiguration } from '../visualization.types';
+import { VISComponentType, VisualizationConfiguration } from '../shared';
import {
removeVisualization,
reorderVisState,
@@ -15,7 +15,7 @@ import {
useSessionCache,
useVisualization,
} from '../../data-access';
-import { VisualizationManager } from '../visualization.types';
+import { VisualizationManager } from '../shared';
import { HoverType, SelectType, addHover, addSelect } from '../../data-access/store/interactionSlice';
export const Visualizations: Record<string, Function> = {
diff --git a/libs/shared/lib/vis/shared/index.ts b/libs/shared/lib/vis/shared/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7c0954347fda348698be19f898b1549a9da32c75
--- /dev/null
+++ b/libs/shared/lib/vis/shared/index.ts
@@ -0,0 +1 @@
+export type { VisualizationConfiguration, VISComponentType, VisualizationPropTypes, VisualizationManager } from './types';
diff --git a/libs/shared/lib/vis/visualization.types.ts b/libs/shared/lib/vis/shared/types.ts
similarity index 71%
rename from libs/shared/lib/vis/visualization.types.ts
rename to libs/shared/lib/vis/shared/types.ts
index 9a3479e8579b7b9c6b624c12be441b718f5cf7db..746b19811c22239091da6054ed1b416942a623a0 100644
--- a/libs/shared/lib/vis/visualization.types.ts
+++ b/libs/shared/lib/vis/shared/types.ts
@@ -1,9 +1,9 @@
-import { GraphQueryResult } from '../data-access/store/graphQueryResultSlice';
-import { ML } from '../data-access/store/mlSlice';
-import { SchemaGraph } from '../schema';
-import type { AppDispatch } from '../data-access';
+import { GraphQueryResult } from '../../data-access/store/graphQueryResultSlice';
+import { ML } from '../../data-access/store/mlSlice';
+import { SchemaGraph } from '../../schema';
+import type { AppDispatch } from '../../data-access';
import { FC } from 'react';
-import { Visualizations } from './hooks/useVisualizationManager';
+import { Visualizations } from '../hooks';
export type VisualizationConfiguration = { [id: string]: any };
@@ -24,7 +24,7 @@ export type VisualizationPropTypes = {
handleSelect: (val: any) => void;
};
-export interface VisualizationManager {
+export type VisualizationManager = {
renderComponent: () => React.ReactNode;
renderSettings: () => React.ReactNode;
active: string | undefined;
@@ -33,4 +33,4 @@ export interface VisualizationManager {
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.tsx b/libs/shared/lib/vis/visualizations/mapvis/mapvis.tsx
index c3f0045c21374209c54a6601406f9b83e69ea9fa..363603889d55d4ffa2604e801680315d3fbceeb5 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 '../../visualization.types';
+import { VISComponentType, VisualizationPropTypes } from '../../shared';
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 ae3cb0b29e1b40474ffe520530bc1b96b661abb0..00c79f3989e350f7d0a6220f44b74f61ff9c9b44 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 '../../../visualization.types';
+import { VisualizationConfiguration } from '../../../shared';
type Props = {
// onClick: (node: NodeType, pos: IPointData) => void;
diff --git a/libs/shared/lib/vis/visualizations/matrixvis/matrixvis.tsx b/libs/shared/lib/vis/visualizations/matrixvis/matrixvis.tsx
index c58e4daeeece3bd4ffbd4c4672428e95d30fe92e..95583b1200a17dd442d7901fcfad9c914d777b8c 100644
--- a/libs/shared/lib/vis/visualizations/matrixvis/matrixvis.tsx
+++ b/libs/shared/lib/vis/visualizations/matrixvis/matrixvis.tsx
@@ -3,7 +3,7 @@ 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 '../../visualization.types';
+import { VisualizationPropTypes, VISComponentType } from '../../shared';
import Input from '@graphpolaris/shared/lib/components/inputs';
import { GraphMetaData } from '@graphpolaris/shared/lib/data-access/statistics';
import { SettingsContainer } from '@graphpolaris/shared/lib/vis/components/config';
diff --git a/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx b/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx
index 2fcb9ab4cb9d602952dc29f339c091cd80f2bb48..3c4a9097e2fa4b7f8c02856646709c4a70ee973b 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 '../../../visualization.types';
+import { VisualizationConfiguration } from '../../../shared';
type Props = {
onClick: (node: NodeType, pos: IPointData) => void;
diff --git a/libs/shared/lib/vis/visualizations/nodelinkvis/nodelinkvis.tsx b/libs/shared/lib/vis/visualizations/nodelinkvis/nodelinkvis.tsx
index 5c8ba45319d562c717d6af5ef66b2d4d928efcda..abefb821bc0e5699fe912e1f0e9dc6e9571a2c06 100644
--- a/libs/shared/lib/vis/visualizations/nodelinkvis/nodelinkvis.tsx
+++ b/libs/shared/lib/vis/visualizations/nodelinkvis/nodelinkvis.tsx
@@ -4,7 +4,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 '../../visualization.types';
+import { VisualizationPropTypes, VISComponentType } from '../../shared';
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/components/config';
diff --git a/libs/shared/lib/vis/visualizations/paohvis/components/MakePaohvisMenu.tsx b/libs/shared/lib/vis/visualizations/paohvis/components/MakePaohvisMenu.tsx
index 0f676c0fa2e0617c393173464e26bcc71cc86337..7d4474ace44a8d08c9a2f8a8b647079b31c895f7 100644
--- a/libs/shared/lib/vis/visualizations/paohvis/components/MakePaohvisMenu.tsx
+++ b/libs/shared/lib/vis/visualizations/paohvis/components/MakePaohvisMenu.tsx
@@ -26,7 +26,7 @@ import { useImmer } from 'use-immer';
import { useGraphQueryResult, useSchemaGraph } from '@graphpolaris/shared/lib/data-access';
import { calculateAttributesAndRelations, calculateAttributesFromRelation } from '../utils/utils';
import calcEntitiesFromQueryResult from '../utils/CalcEntitiesFromQueryResult';
-import { isNodeLinkResult } from '../../../shared/ResultNodeLinkParserUseCase';
+import { isNodeLinkResult } from '../utils/ResultNodeLinkParserUseCase';
import { select } from 'd3';
import { Button } from '../../../../components/buttons';
@@ -38,7 +38,7 @@ type MakePaohvisMenuProps = {
relationName: string,
isEntityFromRelationFrom: boolean,
chosenAttribute: Attribute,
- nodeOrder: PaohvisNodeOrder
+ nodeOrder: PaohvisNodeOrder,
) => void;
};
@@ -325,7 +325,7 @@ export const MakePaohvisMenu = (props: MakePaohvisMenuProps) => {
{
orderBy: state.sortOrder,
isReverseOrder: state.isReverseOrder,
- }
+ },
);
} else {
setState((draft) => {
diff --git a/libs/shared/lib/vis/visualizations/paohvis/components/PaohvisFilterComponent.tsx b/libs/shared/lib/vis/visualizations/paohvis/components/PaohvisFilterComponent.tsx
index de427444589e55e3cdbbfc3b9539bd643a05ec09..4b014f72b6a8b54ff55ec0892b8bd6d65ffdfab0 100644
--- a/libs/shared/lib/vis/visualizations/paohvis/components/PaohvisFilterComponent.tsx
+++ b/libs/shared/lib/vis/visualizations/paohvis/components/PaohvisFilterComponent.tsx
@@ -13,7 +13,7 @@ import styles from './PaohvisFilterComponent.module.scss';
import { AttributeNames, FilterType } from '../Types';
import { useImmer } from 'use-immer';
import { useGraphQueryResult, useSchemaGraph } from '@graphpolaris/shared/lib/data-access';
-import { isNodeLinkResult } from '../../../shared/ResultNodeLinkParserUseCase';
+import { isNodeLinkResult } from '../utils/ResultNodeLinkParserUseCase';
import { calculateAttributesAndRelations, calculateAttributesFromRelation } from '../utils/utils';
import { boolPredicates, numberPredicates, textPredicates } from '../models/FilterPredicates';
import { style } from 'd3';
@@ -77,19 +77,19 @@ export const PaohvisFilterComponent = (props: PaohvisFilterProps) => {
// check all text attributes
if (attributesPerEntityOrRelation[filterTarget].textAttributeNames.length > 0)
attributesPerEntityOrRelation[filterTarget].textAttributeNames.map((attributeName) =>
- draft.attributeNamesOptions.push(`${attributeName}:text`)
+ draft.attributeNamesOptions.push(`${attributeName}:text`),
);
// check all number attributes
if (attributesPerEntityOrRelation[filterTarget].numberAttributeNames.length > 0)
attributesPerEntityOrRelation[filterTarget].numberAttributeNames.map((attributeName) =>
- draft.attributeNamesOptions.push(`${attributeName}:number`)
+ draft.attributeNamesOptions.push(`${attributeName}:number`),
);
// check all bool attributes
if (attributesPerEntityOrRelation[filterTarget].boolAttributeNames.length > 0)
attributesPerEntityOrRelation[filterTarget].boolAttributeNames.map((attributeName) =>
- draft.attributeNamesOptions.push(`${attributeName}:bool`)
+ draft.attributeNamesOptions.push(`${attributeName}:bool`),
);
return draft;
});
@@ -159,7 +159,7 @@ export const PaohvisFilterComponent = (props: PaohvisFilterProps) => {
console.log(
containsFilterTargetChosenAttribute(draft.attributeNameAndType),
isPredicateValid(draft.predicate),
- isCompareValueTypeValid(draft.compareValue)
+ isCompareValueTypeValid(draft.compareValue),
);
draft.isFilterButtonEnabled = isFilterConfigurationValid(draft);
diff --git a/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx b/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx
index 32782fdf12a1da0fc5ff30474f7850b6fa441533..a9060ba684527164542ce3cb7af7ac60d597436b 100644
--- a/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx
+++ b/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx
@@ -17,9 +17,9 @@ import { useImmer } from 'use-immer';
import { getWidthOfText } from '../../../schema/schema-utils';
import { useGraphQueryResult, useSchemaGraph } from '../../../data-access';
-import { isNodeLinkResult } from '../../shared/ResultNodeLinkParserUseCase';
+import { isNodeLinkResult } from './utils/ResultNodeLinkParserUseCase';
import { calculateAttributesAndRelations, calculateAttributesFromRelation } from './utils/utils';
-import VisConfigPanelComponent from '../../shared/VisConfigPanel/VisConfigPanel';
+import VisConfigPanelComponent from './utils/VisConfigPanel';
import { PaohvisFilterComponent } from './components/PaohvisFilterComponent';
import Tooltip from './components/Tooltip';
import { pointer, select, selectAll } from 'd3';
@@ -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 '../../visualization.types';
+import { VISComponentType, VisualizationPropTypes } from '../../shared';
import { GraphMetaData } from '@graphpolaris/shared/lib/data-access/statistics';
-import { SettingsContainer, SettingsHeader } from '@graphpolaris/shared/lib/vis/components/config';
+import { SettingsContainer } 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/paohvis/utils/AttributesFilterUseCase.tsx b/libs/shared/lib/vis/visualizations/paohvis/utils/AttributesFilterUseCase.tsx
index 685d7d2597de366cae81d50bd6a5afd896e912a5..bc64b802a93e7112e4cb01683173507aec5fca65 100644
--- a/libs/shared/lib/vis/visualizations/paohvis/utils/AttributesFilterUseCase.tsx
+++ b/libs/shared/lib/vis/visualizations/paohvis/utils/AttributesFilterUseCase.tsx
@@ -5,7 +5,7 @@
*/
import { FilterInfo, PaohvisFilters } from '../Types';
-import { AxisType, isNotInGroup } from '../../../shared/ResultNodeLinkParserUseCase';
+import { AxisType, isNotInGroup } from './ResultNodeLinkParserUseCase';
import { boolPredicates, numberPredicates, textPredicates } from '../models/FilterPredicates';
import { Edge, GraphQueryResult, Node } from '@graphpolaris/shared/lib/data-access';
diff --git a/libs/shared/lib/vis/visualizations/paohvis/utils/CalcEntitiesFromQueryResult.tsx b/libs/shared/lib/vis/visualizations/paohvis/utils/CalcEntitiesFromQueryResult.tsx
index c6988eab456eec6753ddc67f1879ea7745112670..4303c89a0a6597a01efdb4bb438a8abc71ecf249 100644
--- a/libs/shared/lib/vis/visualizations/paohvis/utils/CalcEntitiesFromQueryResult.tsx
+++ b/libs/shared/lib/vis/visualizations/paohvis/utils/CalcEntitiesFromQueryResult.tsx
@@ -5,7 +5,7 @@
*/
import { GraphQueryResult } from '@graphpolaris/shared/lib/data-access';
-import { getGroupName } from '../../../shared/ResultNodeLinkParserUseCase';
+import { getGroupName } from './ResultNodeLinkParserUseCase';
/**
* This calculates all entities from the query result.
diff --git a/libs/shared/lib/vis/visualizations/paohvis/utils/ResultNodeLinkParserUseCase.tsx b/libs/shared/lib/vis/visualizations/paohvis/utils/ResultNodeLinkParserUseCase.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..2af931efa0be54e2dd8f0bce197b3add43e065f4
--- /dev/null
+++ b/libs/shared/lib/vis/visualizations/paohvis/utils/ResultNodeLinkParserUseCase.tsx
@@ -0,0 +1,102 @@
+/**
+ * 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 '../../nodelinkvis/types';
+import { Edge, Node, GraphQueryResult } from '../../../../data-access/store';
+
+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/visualizations/paohvis/utils/ToPaohvisDataParserUsecase.tsx b/libs/shared/lib/vis/visualizations/paohvis/utils/ToPaohvisDataParserUsecase.tsx
index 63d1303023cae44cd7c1de9c6fd443dad8d447f5..e6e83d038110869df51a8a0142bf92e1d40d1fab 100644
--- a/libs/shared/lib/vis/visualizations/paohvis/utils/ToPaohvisDataParserUsecase.tsx
+++ b/libs/shared/lib/vis/visualizations/paohvis/utils/ToPaohvisDataParserUsecase.tsx
@@ -4,7 +4,7 @@
* © Copyright Utrecht University (Department of Information and Computing Sciences)
*/
-import { AxisType, getGroupName } from '../../../shared/ResultNodeLinkParserUseCase';
+import { AxisType, getGroupName } from './ResultNodeLinkParserUseCase';
import { Edge, GraphQueryResult, Node } from '@graphpolaris/shared/lib/data-access';
import {
@@ -66,7 +66,7 @@ export default class ToPaohvisDataParserUseCase {
const hyperEdgeDegree: Record<string, number> = ToPaohvisDataParserUseCase.GetHyperEdgeDegreeDict(
nodes,
edges,
- axisInfo.isYAxisEntityEqualToRelationFrom
+ axisInfo.isYAxisEntityEqualToRelationFrom,
);
//parse nodes
@@ -75,7 +75,7 @@ export default class ToPaohvisDataParserUseCase {
hyperEdgeDegree,
nodeOrder,
this.yAxisNodeGroup,
- this.xAxisNodeGroup
+ this.xAxisNodeGroup,
);
const maxLabelWidth = calcMaxRowLabelWidth(rowInfo.rowLabels);
@@ -120,7 +120,7 @@ export default class ToPaohvisDataParserUseCase {
hyperEdgeDegree: Record<string, number>,
nodeOrder: PaohvisNodeOrder,
yAxisNodeType: string,
- xAxisNodeType: string
+ xAxisNodeType: string,
): PaohvisNodeInfo {
const rowNodes = filterRowNodes(nodes, hyperEdgeDegree, yAxisNodeType);
SortUseCase.sortNodes(nodeOrder, rowNodes, hyperEdgeDegree);
diff --git a/libs/shared/lib/vis/visualizations/paohvis/utils/VisConfigPanel.module.scss b/libs/shared/lib/vis/visualizations/paohvis/utils/VisConfigPanel.module.scss
new file mode 100644
index 0000000000000000000000000000000000000000..0b117146151f8374de1b3031143a6027acb18a45
--- /dev/null
+++ b/libs/shared/lib/vis/visualizations/paohvis/utils/VisConfigPanel.module.scss
@@ -0,0 +1,101 @@
+/**
+ * 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/visualizations/paohvis/utils/VisConfigPanel.tsx b/libs/shared/lib/vis/visualizations/paohvis/utils/VisConfigPanel.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b0575f99e70ee168341b5e293769b202335f5cb8
--- /dev/null
+++ b/libs/shared/lib/vis/visualizations/paohvis/utils/VisConfigPanel.tsx
@@ -0,0 +1,29 @@
+import React, { useState } from 'react';
+import styles from './VisConfigPanel.module.scss';
+
+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/visualizations/rawjsonvis/rawjsonvis.tsx b/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.tsx
index 691b28d858dbd666def308716cf677c2d576445d..b4e64596b56e4608fa0f38448cc5f975192bc0ec 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 '../../visualization.types';
+import { VisualizationPropTypes, VISComponentType } from '../../shared';
import { GraphMetaData } from '@graphpolaris/shared/lib/data-access/statistics';
import { SettingsContainer } from '@graphpolaris/shared/lib/vis/components/config';
import Input from '@graphpolaris/shared/lib/components/inputs';
diff --git a/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx b/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx
index a0af56f16ad724421536a29052648b7ec5713b0a..6f94fbc27a8351dce580e0ec70fb55d3ca57bd58 100644
--- a/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx
+++ b/libs/shared/lib/vis/visualizations/tablevis/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 } from '../../visualization.types';
+import { VisualizationPropTypes, VISComponentType } from '../../shared';
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/components/config';