From c976ec15071e18f17fe39b132fff4d7efa3d0964 Mon Sep 17 00:00:00 2001
From: 2427021 <s.a.vink@students.uu.nl>
Date: Fri, 5 Apr 2024 16:28:11 +0200
Subject: [PATCH] feat(visManager): fixed storybooks
---
.../lib/vis/hooks/useVisualizationManager.tsx | 3 +-
libs/shared/lib/vis/views/recommender.tsx | 2 +-
.../visualizations/mapvis/mapvis.stories.tsx | 45 ++---
.../matrixvis/matrix.stories.tsx | 87 ++++-----
.../nodelinkvis/nodelinkvis.stories.tsx | 174 +++++++-----------
.../paohvis/paohvis.stories.tsx | 100 +++++-----
.../rawjsonvis/rawjsonvis.stories.tsx | 88 +++------
.../visualizations/rawjsonvis/rawjsonvis.tsx | 2 -
.../semanticsubstrates.stories.tsx | 0
.../semanticsubstrates/semanticsubstrates.tsx | 0
.../subcomponents/OptimizedAutocomplete.tsx | 94 ----------
.../utils/ToPlotDataParserUseCase.tsx | 0
.../semanticsubstratesvis.stories.tsx | 69 +++----
.../semanticsubstratesvis.tsx | 33 +++-
.../tablevis/tablevis.stories.tsx | 69 +++----
.../vis/visualizations/tablevis/tablevis.tsx | 2 +-
16 files changed, 279 insertions(+), 489 deletions(-)
delete mode 100644 libs/shared/lib/vis/visualizations/semanticsubstrates/semanticsubstrates.stories.tsx
delete mode 100644 libs/shared/lib/vis/visualizations/semanticsubstrates/semanticsubstrates.tsx
delete mode 100644 libs/shared/lib/vis/visualizations/semanticsubstrates/subcomponents/OptimizedAutocomplete.tsx
delete mode 100644 libs/shared/lib/vis/visualizations/semanticsubstrates/utils/ToPlotDataParserUseCase.tsx
diff --git a/libs/shared/lib/vis/hooks/useVisualizationManager.tsx b/libs/shared/lib/vis/hooks/useVisualizationManager.tsx
index d39d750df..268c948ac 100644
--- a/libs/shared/lib/vis/hooks/useVisualizationManager.tsx
+++ b/libs/shared/lib/vis/hooks/useVisualizationManager.tsx
@@ -23,8 +23,9 @@ export const Visualizations: Record<string, Function> = {
PaohVis: () => import('../visualizations/paohvis/paohvis'),
RawJSONVis: () => import('../visualizations/rawjsonvis/rawjsonvis'),
NodeLinkVis: () => import('../visualizations/nodelinkvis/nodelinkvis'),
- // MapVis: () => import('../visualizations/mapvis/mapvis'),
MatrixVis: () => import('../visualizations/matrixvis/matrixvis'),
+ SemanticSubstratesVis: () => import('../visualizations/semanticsubstratesvis/semanticsubstratesvis'),
+ // MapVis: () => import('../visualizations/mapvis/mapvis'),
};
export const VISUALIZATION_TYPES: string[] = Object.keys(Visualizations);
diff --git a/libs/shared/lib/vis/views/recommender.tsx b/libs/shared/lib/vis/views/recommender.tsx
index 09ea04509..1bc681b19 100644
--- a/libs/shared/lib/vis/views/recommender.tsx
+++ b/libs/shared/lib/vis/views/recommender.tsx
@@ -7,7 +7,7 @@ const options = {
TableVis: '',
NodeLinkVis: '',
PaohVis: '',
- // 'Semantic Substrates': '',
+ SemanticSubstratesVis: '',
MatrixVis: '',
};
diff --git a/libs/shared/lib/vis/visualizations/mapvis/mapvis.stories.tsx b/libs/shared/lib/vis/visualizations/mapvis/mapvis.stories.tsx
index e2edc474b..a89ba6db0 100644
--- a/libs/shared/lib/vis/visualizations/mapvis/mapvis.stories.tsx
+++ b/libs/shared/lib/vis/visualizations/mapvis/mapvis.stories.tsx
@@ -1,21 +1,23 @@
import React from 'react';
import { Meta } from '@storybook/react';
-import { VisualizationPanel } from '../../components/panel';
import { Provider } from 'react-redux';
import { configureStore } from '@reduxjs/toolkit';
-import {
- setNewGraphQueryResult,
- graphQueryResultSlice,
- querybuilderSlice,
- schemaSlice,
- visualizationSlice,
-} from '../../../data-access/store';
+import { graphQueryResultSlice, querybuilderSlice, schemaSlice, visualizationSlice } from '../../../data-access/store';
import { mockMobilityQueryResult, bigMockQueryResults } from '../../../mock-data';
-import { setActiveVisualization } from '@graphpolaris/shared/lib/data-access/store/visualizationSlice';
+import { MapComponent } from './mapvis';
-const Component: Meta<typeof VisualizationPanel> = {
+const Mockstore = configureStore({
+ reducer: {
+ schema: schemaSlice.reducer,
+ graphQueryResult: graphQueryResultSlice.reducer,
+ visualize: visualizationSlice.reducer,
+ querybuilder: querybuilderSlice.reducer,
+ },
+});
+
+const Component: Meta<typeof MapComponent.component> = {
title: 'Visualizations/MapVis',
- component: VisualizationPanel,
+ component: MapComponent.component,
decorators: [
(story) => (
<Provider store={Mockstore}>
@@ -32,28 +34,15 @@ const Component: Meta<typeof VisualizationPanel> = {
],
};
-const Mockstore = configureStore({
- reducer: {
- schema: schemaSlice.reducer,
- graphQueryResult: graphQueryResultSlice.reducer,
- visualize: visualizationSlice.reducer,
- querybuilder: querybuilderSlice.reducer,
- },
-});
-
export const DutchVehicleTheft = {
- play: async () => {
- const dispatch = Mockstore.dispatch;
- dispatch(setNewGraphQueryResult({ queryID: '1', result: { type: 'nodelink', payload: mockMobilityQueryResult } }));
- dispatch(setActiveVisualization('MapVis'));
+ args: {
+ data: mockMobilityQueryResult,
},
};
export const AmericanFlights = {
- play: async () => {
- const dispatch = Mockstore.dispatch;
- dispatch(setNewGraphQueryResult({ queryID: '1', result: { type: 'nodelink', payload: bigMockQueryResults } }));
- dispatch(setActiveVisualization('MapVis'));
+ args: {
+ data: bigMockQueryResults,
},
};
diff --git a/libs/shared/lib/vis/visualizations/matrixvis/matrix.stories.tsx b/libs/shared/lib/vis/visualizations/matrixvis/matrix.stories.tsx
index 4186e5e1d..5fdecb241 100644
--- a/libs/shared/lib/vis/visualizations/matrixvis/matrix.stories.tsx
+++ b/libs/shared/lib/vis/visualizations/matrixvis/matrix.stories.tsx
@@ -17,10 +17,11 @@ import {
import { SchemaUtils } from '../../../schema/schema-utils';
import { simpleSchemaAirportRaw } from '../../../mock-data/schema/simpleAirportRaw';
import { setActiveVisualization } from '@graphpolaris/shared/lib/data-access/store/visualizationSlice';
+import MatrixVisComponent from './matrixvis';
-const Component: Meta<typeof VisualizationPanel> = {
+const Component: Meta<typeof MatrixVisComponent.component> = {
title: 'Visualizations/MatrixVis',
- component: VisualizationPanel,
+ component: MatrixVisComponent.component,
decorators: [
(story) => (
<Provider store={Mockstore}>
@@ -49,75 +50,55 @@ const Mockstore: any = configureStore({
export const TestWithData = {
layout: 'fullscreen',
args: {
- loading: false,
+ data: {
+ nodes: [
+ { id: 'agent/007', attributes: { name: 'Daniel Craig' } },
+ { id: 'villain', attributes: { name: 'Le Chiffre' } },
+ ],
+ edges: [{ id: 'escape/escape', from: 'agent/007', to: 'villain', attributes: { name: 'Escape' } }],
+ },
+ ml: {},
+ configuration: MatrixVisComponent.configuration,
},
play: async () => {
- const dispatch = Mockstore.dispatch;
- const schema = SchemaUtils.schemaBackend2Graphology(simpleSchemaAirportRaw);
- dispatch(setSchema(schema.export()));
- dispatch(
- setNewGraphQueryResult({
- queryID: '1',
- result: {
- type: 'nodelink',
- payload: {
- nodes: [
- { id: 'agent/007', attributes: { name: 'Daniel Craig' } },
- { id: 'villain', attributes: { name: 'Le Chiffre' } },
- ],
- edges: [{ id: 'escape/escape', from: 'agent/007', to: 'villain', attributes: { name: 'Escape' } }],
- },
- },
- }),
- );
- dispatch(setActiveVisualization('MatrixVis'));
+ // const dispatch = Mockstore.dispatch;
+ // const schema = SchemaUtils.schemaBackend2Graphology(simpleSchemaAirportRaw);
+ // dispatch(setSchema(schema.export()));
},
};
export const TestWithNoData = {
- args: { loading: false },
- play: async () => {
- const dispatch = Mockstore.dispatch;
- dispatch(
- setNewGraphQueryResult({
- queryID: '1',
- result: {
- type: 'nodelink',
- payload: {
- nodes: [],
- edges: [],
- },
- },
- }),
- );
- dispatch(setActiveVisualization('MatrixVis'));
+ args: {
+ data: {
+ nodes: [],
+ edges: [],
+ },
+ ml: {},
+ configuration: MatrixVisComponent.configuration,
},
};
export const TestWithBig2ndChamber = {
- args: { loading: false },
- play: async () => {
- const dispatch = Mockstore.dispatch;
- dispatch(setNewGraphQueryResult({ queryID: '1', result: { type: 'nodelink', payload: big2ndChamberQueryResult } }));
- dispatch(setActiveVisualization('MatrixVis'));
+ args: {
+ data: big2ndChamberQueryResult,
+ ml: {},
+ configuration: MatrixVisComponent.configuration,
},
};
export const TestWithSmallFlights = {
- args: { loading: false },
- play: async () => {
- const dispatch = Mockstore.dispatch;
- dispatch(setNewGraphQueryResult({ queryID: '1', result: { type: 'nodelink', payload: smallFlightsQueryResults } }));
- dispatch(setActiveVisualization('MatrixVis'));
+ args: {
+ data: smallFlightsQueryResults,
+ ml: {},
+ configuration: MatrixVisComponent.configuration,
},
};
export const TestWithLargeQueryResult = {
- args: { loading: false },
- play: async () => {
- const dispatch = Mockstore.dispatch;
- dispatch(setNewGraphQueryResult({ queryID: '1', result: { type: 'nodelink', payload: mockLargeQueryResults } }));
- dispatch(setActiveVisualization('MatrixVis'));
+ args: {
+ data: mockLargeQueryResults,
+ ml: {},
+ configuration: MatrixVisComponent.configuration,
},
};
diff --git a/libs/shared/lib/vis/visualizations/nodelinkvis/nodelinkvis.stories.tsx b/libs/shared/lib/vis/visualizations/nodelinkvis/nodelinkvis.stories.tsx
index 56538de9c..a19fe1e7f 100644
--- a/libs/shared/lib/vis/visualizations/nodelinkvis/nodelinkvis.stories.tsx
+++ b/libs/shared/lib/vis/visualizations/nodelinkvis/nodelinkvis.stories.tsx
@@ -1,13 +1,6 @@
import React from 'react';
import { Meta } from '@storybook/react';
-import { VisualizationPanel } from '../../components/panel';
-import {
- setNewGraphQueryResult,
- graphQueryResultSlice,
- querybuilderSlice,
- schemaSlice,
- visualizationSlice,
-} from '../../../data-access/store';
+import { graphQueryResultSlice, querybuilderSlice, schemaSlice, visualizationSlice } from '../../../data-access/store';
import { configureStore } from '@reduxjs/toolkit';
import { Provider } from 'react-redux';
import {
@@ -17,11 +10,20 @@ import {
recommendationPersonActedInMovieQueryResultPayload,
slackReactionToThreadedMessageQueryResultPayload,
} from '../../../mock-data';
-import { setActiveVisualization } from '@graphpolaris/shared/lib/data-access/store/visualizationSlice';
+import { NodeLinkComponent } from './nodelinkvis';
-const Component: Meta<typeof VisualizationPanel> = {
+const Mockstore = configureStore({
+ reducer: {
+ schema: schemaSlice.reducer,
+ graphQueryResult: graphQueryResultSlice.reducer,
+ visualize: visualizationSlice.reducer,
+ querybuilder: querybuilderSlice.reducer,
+ },
+});
+
+const Component: Meta<typeof NodeLinkComponent.component> = {
title: 'Visualizations/NodeLinkVis',
- component: VisualizationPanel,
+ component: NodeLinkComponent.component,
decorators: [
(story) => (
<Provider store={Mockstore}>
@@ -38,127 +40,93 @@ const Component: Meta<typeof VisualizationPanel> = {
],
};
-const Mockstore = configureStore({
- reducer: {
- schema: schemaSlice.reducer,
- graphQueryResult: graphQueryResultSlice.reducer,
- visualize: visualizationSlice.reducer,
- querybuilder: querybuilderSlice.reducer,
- },
-});
-
export const TestWithData = {
- layout: 'fullscreen',
- play: async () => {
- const dispatch = Mockstore.dispatch;
-
- dispatch(
- setNewGraphQueryResult({
- queryID: '1',
- result: {
- type: 'nodelink',
- payload: {
- nodes: [
- { id: 'agent/007', attributes: { name: 'Daniel Craig' } },
- { id: 'villain', attributes: { name: 'Le Chiffre' } },
- ],
- edges: [{ id: 'escape/escape', from: 'agent/007', to: 'villain', attributes: { name: 'Escape' } }],
- },
- },
- }),
- );
- dispatch(setActiveVisualization('NodeLinkVis'));
+ args: {
+ data: {
+ nodes: [
+ { id: 'agent/007', attributes: { name: 'Daniel Craig' } },
+ { id: 'villain', attributes: { name: 'Le Chiffre' } },
+ ],
+ edges: [{ id: 'escape/escape', from: 'agent/007', to: 'villain', attributes: { name: 'Escape' } }],
+ },
+ ml: {},
+ configuration: NodeLinkComponent.configuration,
+ dispatch: () => {},
},
};
export const TestWithDoubleArchData = {
- layout: 'fullscreen',
- play: async () => {
- const dispatch = Mockstore.dispatch;
-
- dispatch(
- setNewGraphQueryResult({
- queryID: '1',
- result: {
- type: 'nodelink',
- payload: {
- nodes: [
- { id: 'agent/007', attributes: { name: 'Daniel Craig' } },
- { id: 'villain', attributes: { name: 'Le Chiffre' } },
- ],
- edges: [
- { id: 'escape/escape', from: 'agent/007', to: 'villain', attributes: { name: 'Escape' } },
- { id: 'escape/escape', to: 'agent/007', from: 'villain', attributes: { name: 'Escape' } },
- ],
- },
- },
- }),
- );
- dispatch(setActiveVisualization(Visualizations.NodeLink));
+ args: {
+ data: {
+ nodes: [
+ { id: 'agent/007', attributes: { name: 'Daniel Craig' } },
+ { id: 'villain', attributes: { name: 'Le Chiffre' } },
+ ],
+ edges: [
+ { id: 'escape/escape', from: 'agent/007', to: 'villain', attributes: { name: 'Escape' } },
+ { id: 'escape/escape', to: 'agent/007', from: 'villain', attributes: { name: 'Escape' } },
+ ],
+ },
+ ml: {},
+ configuration: NodeLinkComponent.configuration,
+ dispatch: () => {},
},
};
export const TestWithNoData = {
- args: { loading: false },
- play: async () => {
- const dispatch = Mockstore.dispatch;
- dispatch(
- setNewGraphQueryResult({
- queryID: '1',
- result: {
- type: 'nodelink',
- payload: {
- nodes: [],
- edges: [],
- },
- },
- }),
- );
- dispatch(setActiveVisualization('NodeLinkVis'));
+ args: {
+ data: {
+ nodes: [],
+ edges: [],
+ },
+ ml: {},
+ configuration: NodeLinkComponent.configuration,
+ dispatch: () => {},
},
};
export const TestWithBig2ndChamber = {
- play: async () => {
- const dispatch = Mockstore.dispatch;
- dispatch(setNewGraphQueryResult({ queryID: '1', result: { type: 'nodelink', payload: big2ndChamberQueryResult } }));
- dispatch(setActiveVisualization('NodeLinkVis'));
+ args: {
+ data: big2ndChamberQueryResult,
+ ml: {},
+ configuration: NodeLinkComponent.configuration,
+ dispatch: () => {},
},
};
export const TestWithSmallFlights = {
- args: { loading: false },
- play: async () => {
- const dispatch = Mockstore.dispatch;
- dispatch(setNewGraphQueryResult({ queryID: '1', result: { type: 'nodelink', payload: smallFlightsQueryResults } }));
- dispatch(setActiveVisualization('NodeLinkVis'));
+ args: {
+ data: smallFlightsQueryResults,
+ ml: {},
+ configuration: NodeLinkComponent.configuration,
+ dispatch: () => {},
},
};
export const TestWithLargeQueryResult = {
- args: { loading: false },
- play: async () => {
- const dispatch = Mockstore.dispatch;
- dispatch(setNewGraphQueryResult({ queryID: '1', result: { type: 'nodelink', payload: mockLargeQueryResults } }));
- dispatch(setActiveVisualization('NodeLinkVis'));
+ args: {
+ data: mockLargeQueryResults,
+ ml: {},
+ configuration: NodeLinkComponent.configuration,
+ dispatch: () => {},
},
};
export const TestWithRecommendationPersonActedInMovieQueryResult = {
- args: { loading: false },
- play: async () => {
- const dispatch = Mockstore.dispatch;
- dispatch(setNewGraphQueryResult(recommendationPersonActedInMovieQueryResultPayload));
- dispatch(setActiveVisualization(Visualizations.NodeLink));
+ args: {
+ data: recommendationPersonActedInMovieQueryResultPayload.result.payload,
+ ml: {},
+ configuration: NodeLinkComponent.configuration,
+ dispatch: () => {},
},
};
export const TestWithSlackReactionToThreadedMessageQueryResult = {
- args: { loading: false },
- play: async () => {
- const dispatch = Mockstore.dispatch;
- dispatch(setNewGraphQueryResult(slackReactionToThreadedMessageQueryResultPayload));
- dispatch(setActiveVisualization(Visualizations.NodeLink));
+ args: {
+ data: slackReactionToThreadedMessageQueryResultPayload.result.payload,
+ ml: {},
+ configuration: NodeLinkComponent.configuration,
+ dispatch: () => {},
},
};
diff --git a/libs/shared/lib/vis/visualizations/paohvis/paohvis.stories.tsx b/libs/shared/lib/vis/visualizations/paohvis/paohvis.stories.tsx
index 9b2b279fa..0bb20c19e 100644
--- a/libs/shared/lib/vis/visualizations/paohvis/paohvis.stories.tsx
+++ b/libs/shared/lib/vis/visualizations/paohvis/paohvis.stories.tsx
@@ -1,14 +1,7 @@
-import {
- setNewGraphQueryResult,
- graphQueryResultSlice,
- querybuilderSlice,
- schemaSlice,
- setSchema,
- visualizationSlice,
-} from '../../../data-access/store';
+import React from 'react';
+import { graphQueryResultSlice, querybuilderSlice, schemaSlice, setSchema, visualizationSlice } from '../../../data-access/store';
import { configureStore } from '@reduxjs/toolkit';
import { Meta } from '@storybook/react';
-import { VisualizationPanel } from '../../components/panel';
import { Provider } from 'react-redux';
import { SchemaUtils } from '../../../schema/schema-utils';
import {
@@ -20,11 +13,20 @@ import {
mockRecommendationsActorMovie,
} from '../../../mock-data';
import { simpleSchemaAirportRaw } from '../../../mock-data/schema/simpleAirportRaw';
-import { setActiveVisualization } from '@graphpolaris/shared/lib/data-access/store/visualizationSlice';
+import PaohVisComponent from './paohvis';
+
+const Mockstore = configureStore({
+ reducer: {
+ schema: schemaSlice.reducer,
+ graphQueryResult: graphQueryResultSlice.reducer,
+ visualize: visualizationSlice.reducer,
+ querybuilder: querybuilderSlice.reducer,
+ },
+});
-const Component: Meta<typeof VisualizationPanel> = {
+const Component: Meta<typeof PaohVisComponent.component> = {
title: 'Visualizations/Paohvis',
- component: VisualizationPanel,
+ component: PaohVisComponent.component,
decorators: [
(story) => (
<Provider store={Mockstore}>
@@ -41,16 +43,23 @@ const Component: Meta<typeof VisualizationPanel> = {
],
};
-const Mockstore = configureStore({
- reducer: {
- schema: schemaSlice.reducer,
- graphQueryResult: graphQueryResultSlice.reducer,
- visualize: visualizationSlice.reducer,
- querybuilder: querybuilderSlice.reducer,
- },
-});
-
export const TestWithData = {
+ args: {
+ data: {
+ nodes: [
+ { id: '1/a', label: 'a', attributes: { a: 's1' } },
+ { id: '1/b1', label: 'b1', attributes: { a: 's1' } },
+ { id: '1/b2', label: 'b2', attributes: { a: 's1' } },
+ { id: '1/b3', label: 'b3', attributes: { a: 's1' } },
+ ],
+ edges: [
+ { id: '1c/z1', label: 'z1', from: '1/b1', to: '1/a', attributes: { a: 's1' } },
+ { id: '1c/z2', label: 'z2', from: '1/a', to: '1/b1', attributes: { a: 's1' } },
+ { id: '1c/z3', label: 'z3', from: '1/b2', to: '1/b3', attributes: { a: 's2' } },
+ ],
+ },
+ configuration: PaohVisComponent.configuration,
+ },
play: async () => {
const dispatch = Mockstore.dispatch;
const schema = SchemaUtils.schemaBackend2Graphology({
@@ -71,72 +80,55 @@ export const TestWithData = {
},
],
});
-
dispatch(setSchema(schema.export()));
- dispatch(
- setNewGraphQueryResult({
- queryID: '1',
- result: {
- type: 'nodelink',
- payload: {
- nodes: [
- { id: '1/a', label: 'a', attributes: { a: 's1' } },
- { id: '1/b1', label: 'b1', attributes: { a: 's1' } },
- { id: '1/b2', label: 'b2', attributes: { a: 's1' } },
- { id: '1/b3', label: 'b3', attributes: { a: 's1' } },
- ],
- edges: [
- { id: '1c/z1', label: 'z1', from: '1/b1', to: '1/a', attributes: { a: 's1' } },
- { id: '1c/z2', label: 'z2', from: '1/a', to: '1/b1', attributes: { a: 's1' } },
- { id: '1c/z3', label: 'z3', from: '1/b2', to: '1/b3', attributes: { a: 's2' } },
- ],
- },
- },
- }),
- );
- dispatch(setActiveVisualization('PaohVis'));
},
};
export const TestWithMarieBoucherSample = {
+ args: {
+ data: marieBoucherSample,
+ configuration: PaohVisComponent.configuration,
+ },
play: async () => {
const dispatch = Mockstore.dispatch;
const schema = SchemaUtils.schemaBackend2Graphology(marieBoucherSampleSchemaRaw);
-
dispatch(setSchema(schema.export()));
- dispatch(setNewGraphQueryResult({ queryID: '1', result: { type: 'nodelink', payload: marieBoucherSample } }));
- dispatch(setActiveVisualization('PaohVis'));
},
};
export const TestWithBig2ndChamber = {
+ args: {
+ data: big2ndChamberQueryResult,
+ configuration: PaohVisComponent.configuration,
+ },
play: async () => {
const dispatch = Mockstore.dispatch;
const schema = SchemaUtils.schemaBackend2Graphology(big2ndChamberSchemaRaw);
dispatch(setSchema(schema.export()));
- dispatch(setNewGraphQueryResult({ queryID: '1', result: { type: 'nodelink', payload: big2ndChamberQueryResult } }));
- dispatch(setActiveVisualization('PaohVis'));
},
};
export const TestWithAirport = {
+ args: {
+ data: bigMockQueryResults,
+ configuration: PaohVisComponent.configuration,
+ },
play: async () => {
const dispatch = Mockstore.dispatch;
const schema = SchemaUtils.schemaBackend2Graphology(simpleSchemaAirportRaw);
-
dispatch(setSchema(schema.export()));
- dispatch(setNewGraphQueryResult({ queryID: '1', result: { type: 'nodelink', payload: bigMockQueryResults } }));
- dispatch(setActiveVisualization('PaohVis'));
},
};
export const TestWithRecommendationsActorMovie = {
+ args: {
+ data: mockRecommendationsActorMovie,
+ configuration: PaohVisComponent.configuration,
+ },
play: async () => {
const dispatch = Mockstore.dispatch;
const schema = SchemaUtils.schemaBackend2Graphology(marieBoucherSampleSchemaRaw);
dispatch(setSchema(schema.export()));
- dispatch(setNewGraphQueryResult({ queryID: '1', result: { type: 'nodelink', payload: mockRecommendationsActorMovie } }));
- dispatch(setActiveVisualization('PaohVis'));
},
};
diff --git a/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.stories.tsx b/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.stories.tsx
index 2b051e6f0..bdfc75c5b 100644
--- a/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.stories.tsx
+++ b/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.stories.tsx
@@ -1,23 +1,23 @@
import React from 'react';
import { Meta } from '@storybook/react';
-import { VisualizationPanel } from '../../components/panel';
-import {
- setNewGraphQueryResult,
- graphQueryResultSlice,
- querybuilderSlice,
- resetGraphQueryResults,
- schemaSlice,
- store,
- visualizationSlice,
-} from '../../../data-access/store';
+import { graphQueryResultSlice, querybuilderSlice, schemaSlice, visualizationSlice } from '../../../data-access/store';
import { configureStore } from '@reduxjs/toolkit';
import { Provider } from 'react-redux';
import { mockLargeQueryResults } from '../../../mock-data/query-result';
-import { setActiveVisualization } from '@graphpolaris/shared/lib/data-access/store/visualizationSlice';
+import RawJSONComponent from './rawjsonvis';
-const Component: Meta<typeof VisualizationPanel> = {
+const Mockstore = configureStore({
+ reducer: {
+ schema: schemaSlice.reducer,
+ graphQueryResult: graphQueryResultSlice.reducer,
+ visualize: visualizationSlice.reducer,
+ querybuilder: querybuilderSlice.reducer,
+ },
+});
+
+const Component: Meta<typeof RawJSONComponent.component> = {
title: 'Visualizations/RawJSONVIS',
- component: VisualizationPanel,
+ component: RawJSONComponent.component,
decorators: [
(story) => (
<Provider store={Mockstore}>
@@ -34,61 +34,33 @@ const Component: Meta<typeof VisualizationPanel> = {
],
};
-const Mockstore = configureStore({
- reducer: {
- schema: schemaSlice.reducer,
- graphQueryResult: graphQueryResultSlice.reducer,
- visualize: visualizationSlice.reducer,
- querybuilder: querybuilderSlice.reducer,
- },
-});
-
export const SimpleData = {
- play: async () => {
- const dispatch = Mockstore.dispatch;
- dispatch(
- setNewGraphQueryResult({
- queryID: '1',
- result: {
- type: 'nodelink',
- payload: {
- nodes: [
- { id: 'agent/007', attributes: { name: 'Daniel Craig' } },
- { id: 'villain', attributes: { name: 'Le Chiffre' } },
- ],
- edges: [],
- },
- },
- }),
- );
- dispatch(setActiveVisualization('RawJSONVis'));
+ args: {
+ data: {
+ nodes: [
+ { id: 'agent/007', attributes: { name: 'Daniel Craig' } },
+ { id: 'villain', attributes: { name: 'Le Chiffre' } },
+ ],
+ edges: [],
+ },
+ configuration: RawJSONComponent.configuration,
},
};
export const LargeData = {
args: {
- loading: false,
- },
- play: async () => {
- const dispatch = Mockstore.dispatch;
- dispatch(
- setNewGraphQueryResult({
- queryID: '1',
- result: {
- type: 'nodelink',
- payload: mockLargeQueryResults,
- },
- }),
- );
- dispatch(setActiveVisualization('RawJSONVis'));
+ data: mockLargeQueryResults,
+ configuration: RawJSONComponent.configuration,
},
};
export const Empty = {
- play: async () => {
- const dispatch = store.dispatch;
- dispatch(resetGraphQueryResults());
- dispatch(setActiveVisualization('RawJSONVis'));
+ args: {
+ data: {
+ nodes: [],
+ edges: [],
+ },
+ configuration: RawJSONComponent.configuration,
},
};
diff --git a/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.tsx b/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.tsx
index 2d9d64834..fa8ec2355 100644
--- a/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.tsx
+++ b/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.tsx
@@ -22,8 +22,6 @@ const configuration: RawJSONVisProps = {
};
export const RawJSONVis = React.memo(({ data, configuration }: VisualizationPropTypes) => {
- console.log(configuration);
-
return (
<ReactJSONView
src={data}
diff --git a/libs/shared/lib/vis/visualizations/semanticsubstrates/semanticsubstrates.stories.tsx b/libs/shared/lib/vis/visualizations/semanticsubstrates/semanticsubstrates.stories.tsx
deleted file mode 100644
index e69de29bb..000000000
diff --git a/libs/shared/lib/vis/visualizations/semanticsubstrates/semanticsubstrates.tsx b/libs/shared/lib/vis/visualizations/semanticsubstrates/semanticsubstrates.tsx
deleted file mode 100644
index e69de29bb..000000000
diff --git a/libs/shared/lib/vis/visualizations/semanticsubstrates/subcomponents/OptimizedAutocomplete.tsx b/libs/shared/lib/vis/visualizations/semanticsubstrates/subcomponents/OptimizedAutocomplete.tsx
deleted file mode 100644
index 194a3bbf5..000000000
--- a/libs/shared/lib/vis/visualizations/semanticsubstrates/subcomponents/OptimizedAutocomplete.tsx
+++ /dev/null
@@ -1,94 +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.*/
-
-import React from 'react';
-import { VariableSizeList, ListChildComponentProps } from 'react-window';
-import styles from './OptimizedAutocomplete.module.scss';
-
-const LISTBOX_PADDING = 8; // px
-
-function renderRow(props: ListChildComponentProps) {
- const { data, index, style } = props;
- return React.cloneElement(data[index], {
- style: {
- ...style,
- top: (style.top as number) + LISTBOX_PADDING,
- },
- });
-}
-
-const OuterElementContext = React.createContext({});
-
-const OuterElementType = React.forwardRef<HTMLDivElement>((props, ref) => {
- const outerProps = React.useContext(OuterElementContext);
- return <div ref={ref} {...props} {...outerProps} />;
-});
-
-function useResetCache(data: any) {
- const ref = React.useRef<VariableSizeList>(null);
- React.useEffect(() => {
- if (ref.current != null) {
- ref.current.resetAfterIndex(0, true);
- }
- }, [data]);
- return ref;
-}
-
-// Adapter for react-window
-const ListboxComponent = React.forwardRef<HTMLDivElement>(function ListboxComponent(props: any, ref) {
- const { children, ...other } = props;
- const itemData = React.Children.toArray(children);
- const itemCount = itemData.length;
- const itemSize = 36;
-
- return <div ref={ref}></div>;
-});
-
-const renderGroup = (params: any) => [<div key={params.key}>{params.group}</div>, params.children];
-
-type OptimizedAutocomplete = {
- currentValue: string;
- options: string[];
- useMaterialStyle?: { label: string; helperText: string };
- /** Called when the value of the input field changes. */
- onChange?(value: string): void;
- /** Called when the user leaves focus of the input field. */
- onLeave?(value: string): void;
-};
-/** Renders the autocomplete input field with the given props. */
-export default function OptimizedAutocomplete(props: OptimizedAutocomplete) {
- let newValue = props.currentValue;
- console.log(props);
-
- return (
- <input
- id="optimized-autocomplete"
- style={{ width: 200 }}
- className={styles.listbox}
- // defaultValue={props.currentValue}
- placeholder={props.currentValue}
- // renderOption={(props, option, state) => <Typography noWrap>{option}</Typography>}
- onChange={(e) => {
- let value = e.target.value;
- console.log(value);
-
- newValue = value || '?';
- if (props.onChange) props.onChange(newValue);
- }}
- onBlur={() => {
- if (props.onLeave) props.onLeave(newValue);
- }}
- onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>): void => {
- if (e.key == 'Enter' && props.onLeave) props.onLeave(newValue);
- }}
- />
- );
-}
diff --git a/libs/shared/lib/vis/visualizations/semanticsubstrates/utils/ToPlotDataParserUseCase.tsx b/libs/shared/lib/vis/visualizations/semanticsubstrates/utils/ToPlotDataParserUseCase.tsx
deleted file mode 100644
index e69de29bb..000000000
diff --git a/libs/shared/lib/vis/visualizations/semanticsubstratesvis/semanticsubstratesvis.stories.tsx b/libs/shared/lib/vis/visualizations/semanticsubstratesvis/semanticsubstratesvis.stories.tsx
index 752304cb0..ef0adea22 100644
--- a/libs/shared/lib/vis/visualizations/semanticsubstratesvis/semanticsubstratesvis.stories.tsx
+++ b/libs/shared/lib/vis/visualizations/semanticsubstratesvis/semanticsubstratesvis.stories.tsx
@@ -1,16 +1,7 @@
import React from 'react';
import { Meta } from '@storybook/react';
-import { VisualizationPanel } from '../../visualizationPanel';
-import { SchemaUtils } from '../../../schema/schema-utils';
-
-import {
- setNewGraphQueryResult,
- graphQueryResultSlice,
- querybuilderSlice,
- schemaSlice,
- setSchema,
- visualizationSlice,
-} from '../../../data-access/store';
+import { SemSubstrVisComponent } from './semanticsubstratesvis';
+import { graphQueryResultSlice, querybuilderSlice, schemaSlice, visualizationSlice } from '../../../data-access/store';
import { configureStore } from '@reduxjs/toolkit';
import { Provider } from 'react-redux';
import {
@@ -20,15 +11,19 @@ import {
marieBoucherSampleSchemaRaw,
big2ndChamberSchemaRaw,
} from '../../../mock-data';
-import { setActiveVisualization } from '@graphpolaris/shared/lib/data-access/store/visualizationSlice';
-const Component: Meta<typeof VisualizationPanel> = {
- /* 👇 The title prop is optional.
- * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
- * to learn how to generate automatic titles
- */
- title: 'Visualizations/VisSemanticSubstrates',
- component: VisualizationPanel,
+const Mockstore = configureStore({
+ reducer: {
+ schema: schemaSlice.reducer,
+ graphQueryResult: graphQueryResultSlice.reducer,
+ visualize: visualizationSlice.reducer,
+ querybuilder: querybuilderSlice.reducer,
+ },
+});
+
+const Component: Meta<typeof SemSubstrVisComponent.component> = {
+ title: 'Visualizations/SemanticSubstrates',
+ component: SemSubstrVisComponent.component,
decorators: [
(story) => (
<Provider store={Mockstore}>
@@ -45,42 +40,24 @@ const Component: Meta<typeof VisualizationPanel> = {
],
};
-const Mockstore = configureStore({
- reducer: {
- schema: schemaSlice.reducer,
- graphQueryResult: graphQueryResultSlice.reducer,
- visualize: visualizationSlice.reducer,
- querybuilder: querybuilderSlice.reducer,
- },
-});
-
export const TestWithBig2ndChamber = {
- play: async () => {
- const dispatch = Mockstore.dispatch;
- const schema = SchemaUtils.schemaBackend2Graphology(big2ndChamberSchemaRaw);
- dispatch(setSchema(schema.export()));
- dispatch(setNewGraphQueryResult({ queryID: '1', result: { type: 'nodelink', payload: big2ndChamberQueryResult } }));
- dispatch(setActiveVisualization('SemSubstrVis'));
+ args: {
+ data: big2ndChamberQueryResult,
+ configuration: SemSubstrVisComponent.configuration,
},
};
export const TestWithRecommendationsActorMovie = {
- play: async () => {
- const dispatch = Mockstore.dispatch;
- const schema = SchemaUtils.schemaBackend2Graphology(marieBoucherSampleSchemaRaw);
- dispatch(setSchema(schema.export()));
- dispatch(setNewGraphQueryResult({ queryID: '1', result: { type: 'nodelink', payload: mockRecommendationsActorMovie } }));
- dispatch(setActiveVisualization('SemSubstrVis'));
+ args: {
+ data: mockRecommendationsActorMovie,
+ configuration: SemSubstrVisComponent.configuration,
},
};
export const TestWithGOTcharacter2character = {
- play: async () => {
- const dispatch = Mockstore.dispatch;
- const schema = SchemaUtils.schemaBackend2Graphology(marieBoucherSampleSchemaRaw);
- dispatch(setSchema(schema.export()));
- dispatch(setNewGraphQueryResult({ queryID: '1', result: { type: 'nodelink', payload: gotCharacter2Character } }));
- dispatch(setActiveVisualization('SemSubstrVis'));
+ args: {
+ data: gotCharacter2Character,
+ configuration: SemSubstrVisComponent.configuration,
},
};
diff --git a/libs/shared/lib/vis/visualizations/semanticsubstratesvis/semanticsubstratesvis.tsx b/libs/shared/lib/vis/visualizations/semanticsubstratesvis/semanticsubstratesvis.tsx
index 56bc0a031..ed0ae4038 100644
--- a/libs/shared/lib/vis/visualizations/semanticsubstratesvis/semanticsubstratesvis.tsx
+++ b/libs/shared/lib/vis/visualizations/semanticsubstratesvis/semanticsubstratesvis.tsx
@@ -1,8 +1,10 @@
import React, { useRef, useState, useMemo, useEffect } from 'react';
import Scatterplot, { KeyedScatterplotProps } from './components/Scatterplot';
+import { GraphMetaData } from '@graphpolaris/shared/lib/data-access/statistics';
+import { SettingsContainer } from '@graphpolaris/shared/lib/vis/components/config';
import { categoricalColors } from 'config/src/colors';
-import { VISComponentType, VisualizationPropTypes } from '../../types';
+import { VisualizationPropTypes, VISComponentType } from '../../common';
import { findConnectionsNodes, getRegionData, setExtension, filterArray, getUniqueValues } from './components/utils';
import { Node } from '@graphpolaris/shared/lib/data-access/store/graphQueryResultSlice';
@@ -24,13 +26,19 @@ import { MultiGraph } from 'graphology';
import { select, selectAll, scaleOrdinal } from 'd3';
import { buildGraphology, configVisualRegion, config, numColorsCategorical, marginAxis, isColorCircleFix } from './utils';
+import { Input } from '../../..';
export type SemSubstrProps = {
showColor: boolean;
};
+const configuration: SemSubstrProps = {
+ showColor: true,
+};
+
const displayName = 'SemSubstrVis';
-export const VisSemanticSubstrates = ({ data: graphQueryResult, schema, settings }: VisualizationPropTypes) => {
+
+export const VisSemanticSubstrates = ({ data: graphQueryResult, configuration }: VisualizationPropTypes) => {
const nodes = graphQueryResult.nodes;
const edges = graphQueryResult.edges;
@@ -415,10 +423,27 @@ export const VisSemanticSubstrates = ({ data: graphQueryResult, schema, settings
);
};
+const SemSubstrSettings = ({
+ configuration,
+ graph,
+ updateSettings,
+}: {
+ configuration: SemSubstrProps;
+ graph: GraphMetaData;
+ updateSettings: (val: any) => void;
+}) => {
+ return (
+ <SettingsContainer>
+ <Input type="boolean" label="Show color" value={configuration.showColor} onChange={(val) => updateSettings({ showColor: val })} />
+ </SettingsContainer>
+ );
+};
+
export const SemSubstrVisComponent: VISComponentType = {
displayName: displayName,
- VIS: VisSemanticSubstrates,
- settings: {},
+ component: VisSemanticSubstrates,
+ settings: SemSubstrSettings,
+ configuration: configuration,
};
export default SemSubstrVisComponent;
diff --git a/libs/shared/lib/vis/visualizations/tablevis/tablevis.stories.tsx b/libs/shared/lib/vis/visualizations/tablevis/tablevis.stories.tsx
index edf3eabf7..26488d4a2 100644
--- a/libs/shared/lib/vis/visualizations/tablevis/tablevis.stories.tsx
+++ b/libs/shared/lib/vis/visualizations/tablevis/tablevis.stories.tsx
@@ -1,14 +1,6 @@
import React from 'react';
import { Meta } from '@storybook/react';
-import { VisualizationPanel } from '../../components/panel';
-import {
- setNewGraphQueryResult,
- graphQueryResultSlice,
- querybuilderSlice,
- schemaSlice,
- setSchema,
- visualizationSlice,
-} from '../../../data-access/store';
+import { graphQueryResultSlice, querybuilderSlice, schemaSlice, visualizationSlice } from '../../../data-access/store';
import { configureStore } from '@reduxjs/toolkit';
import { Provider } from 'react-redux';
import {
@@ -18,14 +10,21 @@ import {
typesMockQueryResults,
typesMockSchemaRaw,
} from '../../../mock-data';
-
-import { SchemaUtils } from '../../../schema/schema-utils';
import { simpleSchemaAirportRaw } from '../../../mock-data/schema/simpleAirportRaw';
-import { setActiveVisualization } from '@graphpolaris/shared/lib/data-access/store/visualizationSlice';
+import TableComponent from './tablevis';
+
+const Mockstore = configureStore({
+ reducer: {
+ schema: schemaSlice.reducer,
+ graphQueryResult: graphQueryResultSlice.reducer,
+ visualize: visualizationSlice.reducer,
+ querybuilder: querybuilderSlice.reducer,
+ },
+});
-const Component: Meta<typeof VisualizationPanel> = {
+const Component: Meta<typeof TableComponent.component> = {
title: 'Visualizations/TableVis',
- component: VisualizationPanel,
+ component: TableComponent.component,
decorators: [
(story) => (
<Provider store={Mockstore}>
@@ -42,45 +41,27 @@ const Component: Meta<typeof VisualizationPanel> = {
],
};
-const Mockstore = configureStore({
- reducer: {
- schema: schemaSlice.reducer,
- graphQueryResult: graphQueryResultSlice.reducer,
- visualize: visualizationSlice.reducer,
- querybuilder: querybuilderSlice.reducer,
- },
-});
-
export const TestWithAirport = {
- play: async () => {
- const dispatch = Mockstore.dispatch;
- const schema = SchemaUtils.schemaBackend2Graphology(simpleSchemaAirportRaw);
-
- dispatch(setSchema(schema.export()));
- dispatch(setNewGraphQueryResult({ queryID: '1', result: { type: 'nodelink', payload: bigMockQueryResults } }));
- dispatch(setActiveVisualization('TableVis'));
+ args: {
+ data: bigMockQueryResults,
+ schema: simpleSchemaAirportRaw,
+ configuration: TableComponent.configuration,
},
};
export const TestWithBig2ndChamber = {
- play: async () => {
- const dispatch = Mockstore.dispatch;
- const schema = SchemaUtils.schemaBackend2Graphology(big2ndChamberSchemaRaw);
-
- dispatch(setSchema(schema.export()));
- dispatch(setNewGraphQueryResult({ queryID: '1', result: { type: 'nodelink', payload: big2ndChamberQueryResult } }));
- dispatch(setActiveVisualization('TableVis'));
+ args: {
+ data: big2ndChamberQueryResult,
+ schema: big2ndChamberSchemaRaw,
+ configuration: TableComponent.configuration,
},
};
export const TestWithTypesMock = {
- play: async () => {
- const dispatch = Mockstore.dispatch;
- const schema = SchemaUtils.schemaBackend2Graphology(typesMockSchemaRaw);
-
- dispatch(setSchema(schema.export()));
- dispatch(setNewGraphQueryResult({ queryID: '1', result: { type: 'nodelink', payload: typesMockQueryResults } }));
- dispatch(setActiveVisualization('TableVis'));
+ args: {
+ data: typesMockQueryResults,
+ schema: typesMockSchemaRaw,
+ configuration: TableComponent.configuration,
},
};
diff --git a/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx b/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx
index 6a6b8908b..552b40db3 100644
--- a/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx
+++ b/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx
@@ -20,7 +20,7 @@ const configuration: TableProps = {
export const TableVis = ({ data, schema, configuration }: VisualizationPropTypes) => {
const ref = useRef<HTMLDivElement>(null);
- console.log(configuration);
+
const attributesArray = useMemo<AugmentedNodeAttributes[]>(
() =>
data.nodes.map((node) => {
--
GitLab