From 1678a7ebc90a001e3d156b1749ea34f9f6622c48 Mon Sep 17 00:00:00 2001
From: "Vink, S.A. (Sjoerd)" <s.a.vink@uu.nl>
Date: Thu, 11 Jan 2024 12:16:34 +0000
Subject: [PATCH] feat(visSettings): restructured all visualizations to allow
for settings panel
solves #DEV-160
---
apps/web/src/app/app.tsx | 2 +-
apps/web/src/app/panels/Visualization.tsx | 74 +++------
.../src/app/panels/VisualizationDialog.tsx | 106 ++++++++++++
.../forms/AddDatabase/newdatabase.tsx | 8 +-
.../DatabaseManagement/forms/settings.tsx | 8 +-
.../buttons/buttons.module.scss.d.ts | 1 -
libs/shared/lib/components/inputs/index.tsx | 94 ++++++++---
libs/shared/lib/data-access/store/hooks.ts | 3 +-
libs/shared/lib/data-access/store/index.ts | 1 +
.../data-access/store/visualizationSlice.ts | 56 ++++++-
libs/shared/lib/schema/panel/schemaDialog.tsx | 4 +-
libs/shared/lib/vis/Types.tsx | 49 ++++++
libs/shared/lib/vis/documentation.mdx | 152 ++++++++++++++++++
libs/shared/lib/vis/index.tsx | 79 +++++++++
libs/shared/lib/vis/mapvis/mapvis.stories.tsx | 45 ------
libs/shared/lib/vis/mapvis/mapvis.tsx | 31 ----
libs/shared/lib/vis/panel/dialog.tsx | 103 ++++++++++++
libs/shared/lib/vis/panel/index.ts | 1 +
libs/shared/lib/vis/panel/visualization.tsx | 77 +++++++++
libs/shared/lib/vis/rawjsonvis/rawjsonvis.tsx | 61 -------
.../shared/ResultNodeLinkParserUseCase.tsx | 2 +-
libs/shared/lib/vis/table_vis/tableVis.tsx | 38 -----
.../{index.ts => visualizations/index.tsx} | 1 -
.../vis/{ => visualizations}/mapvis/README.md | 0
.../vis/{ => visualizations}/mapvis/Types.tsx | 0
.../mapvis/archive/geovis/NodeLinkMap.tsx | 2 +-
.../mapvis/archive/geovis/Tooltip.tsx | 0
.../geovis/archive/NodeLinkViewModel.tsx | 0
.../geovis/archive/aggregateCommand.tsx | 0
.../archive/geovis/archive/unfoldingEdges.tsx | 0
.../archive/geovis/archive/viewModel.tsx | 0
.../mapvis/archive/geovis/config.tsx | 0
.../archive/geovis/core/attributeFaceting.tsx | 0
.../mapvis/archive/geovis/core/edge.tsx | 0
.../mapvis/archive/geovis/core/graph.tsx | 0
.../mapvis/archive/geovis/core/index.tsx | 0
.../mapvis/archive/geovis/core/node.tsx | 0
.../archive/geovis/layers/GeoBaseLayer.tsx | 0
.../archive/geovis/layers/GeoClusterLayer.tsx | 0
.../geovis/layers/GeoFacetingLayer.tsx | 0
.../geovis/layers/GeoNodeLinkLayer.tsx | 0
.../mapvis/archive/geovis/layers/index.tsx | 0
.../mapvis/archive/geovis/readability.tsx | 0
.../mapvis/archive/geovis/types.tsx | 0
.../mapvis/archive/geovis/utils.tsx | 0
.../mapvis/components/BaseMap.tsx | 0
.../mapvis/components/FilterMenu.tsx | 0
.../mapvis/components/LayerPanel.tsx | 0
.../mapvis/components/MapPanel.tsx | 0
.../mapvis/components/SecondaryMenu.tsx | 0
.../mapvis/components/SelectedMenu.tsx | 0
.../mapvis/components/index.tsx | 0
.../mapvis/graphModel.tsx | 0
.../choropleth-layer/ChoroplethLayer.tsx | 2 +-
.../choropleth-layer/ChoroplethOptions.tsx | 0
.../layers/edge-arc-layer/ArcLayerOptions.tsx | 0
.../layers/edge-arc-layer/EdgeArcLayer.tsx | 0
.../mapvis/layers/edge-layer/EdgeLayer.tsx | 0
.../mapvis/layers/edge-layer/EdgeOptions.tsx | 0
.../mapvis/layers/heatmap-layer/HeatLayer.tsx | 0
.../layers/heatmap-layer/HeatLayerOptions.tsx | 0
.../mapvis/layers/icon-layer/IconLayer.tsx | 0
.../mapvis/layers/icon-layer/IconOptions.tsx | 0
.../mapvis/layers/index.tsx | 0
.../mapvis/layers/node-layer/NodeLayer.tsx | 0
.../mapvis/layers/node-layer/NodeOptions.tsx | 0
.../layers/nodelink-layer/NodeLinkLayer.tsx | 0
.../layers/nodelink-layer/NodeLinkOptions.tsx | 0
.../layers/nodelink-layer/shapeFactory.tsx | 0
.../visualizations/mapvis/mapvis.stories.tsx | 60 +++++++
.../lib/vis/visualizations/mapvis/mapvis.tsx | 40 +++++
.../mapvis/shared/ColorPicker.tsx | 0
.../vis/{ => visualizations}/mapvis/utlis.tsx | 0
.../{ => visualizations}/nodelink/Types.tsx | 0
.../nodelink/components/NLExport.tsx | 0
.../nodelink/components/NLForce.tsx | 0
.../nodelink/components/NLMachineLearning.tsx | 4 +-
.../nodelink/components/NLPixi.tsx | 0
.../nodelink/components/NLPopup.tsx | 0
.../nodelink/components/query2NL.tsx | 5 +-
.../nodelink/components/utils.tsx | 0
.../nodelink/nodelinkvis.module.scss | 0
.../nodelink/nodelinkvis.module.scss.d.ts | 0
.../nodelink/nodelinkvis.stories.tsx | 35 ++--
.../nodelink/nodelinkvis.tsx | 36 +++--
.../{ => visualizations}/paohvis/Types.tsx | 0
.../paohvis/components/HyperEdgesRange.tsx | 0
.../paohvis/components/MakePaohvisMenu.scss | 0
.../paohvis/components/MakePaohvisMenu.tsx | 8 +-
.../PaohvisFilterComponent.module.scss | 0
.../PaohvisFilterComponent.module.scss.d.ts | 0
.../components/PaohvisFilterComponent.tsx | 2 +-
.../paohvis/components/RowLabelColumn.tsx | 0
.../paohvis/components/Tooltip.scss | 0
.../paohvis/components/Tooltip.tsx | 0
.../paohvis/models/FilterPredicates.tsx | 0
.../paohvis/models/PaohvisHolder.test.tsx | 0
.../paohvis/models/PaohvisHolder.tsx | 0
.../paohvis/models/PaohvisListener.tsx | 0
.../paohvis/paohvis.module.scss | 0
.../paohvis/paohvis.module.scss.d.ts | 0
.../paohvis/paohvis.stories.tsx | 70 ++++----
.../{ => visualizations}/paohvis/paohvis.tsx | 21 ++-
.../paohvis/utils/AttributesFilterUseCase.tsx | 2 +-
.../utils/CalcEntitiesFromQueryResult.tsx | 2 +-
...EntityAttrAndRelNamesFromSchemaUseCase.tsx | 0
.../paohvis/utils/SortUseCase.tsx | 0
.../utils/ToPaohvisDataParserUsecase.tsx | 2 +-
.../paohvis/utils/utils.tsx | 2 +-
.../{ => visualizations}/rawjsonvis/index.ts | 0
.../rawjsonvis/rawjsonvis.module.scss | 0
.../rawjsonvis/rawjsonvis.module.scss.d.ts | 0
.../rawjsonvis/rawjsonvis.spec.tsx | 0
.../rawjsonvis/rawjsonvis.stories.tsx | 59 ++++---
.../visualizations/rawjsonvis/rawjsonvis.tsx | 37 +++++
.../semanticsubstrates/Types.tsx | 0
.../SemanticSubstrateConfigPanel.tsx | 0
.../SemanticSubstratesConfigPanelViewModel.t | 4 +-
...SemanticSubstratesConfigPanelViewModel.tsx | 0
.../semanticsubstrates/configpanel/Types.tsx | 0
.../semanticsubstrates/index.ts | 0
.../semanticsubstrates.module.scss | 0
.../semanticsubstrates.module.scss.d.ts | 0
.../semanticsubstrates.stories.tsx | 40 +++--
.../semanticsubstrates/semanticsubstrates.tsx | 8 +-
.../AddPlotButtonComponent.module.scss | 126 +++++++--------
.../AddPlotButtonComponent.module.scss.d.ts | 0
.../subcomponents/AddPlotButtonComponent.tsx | 0
.../subcomponents/AddPlotPopup.tsx | 0
.../subcomponents/BrushComponent.tsx | 0
.../LinesBetweenPlotsComponent.tsx | 0
.../OptimizedAutocomplete.module.scss | 0
.../OptimizedAutocomplete.module.scss.d.ts | 0
.../subcomponents/OptimizedAutocomplete.tsx | 0
.../PlotAxisLabelStyles.module.css | 0
.../PlotAxisLabelStyles.module.css.d.ts | 0
.../subcomponents/PlotAxisLabelsComponent.tsx | 0
.../subcomponents/PlotComponent.tsx | 0
.../subcomponents/PlotTitleComponent.tsx | 0
.../subcomponents/PlotTitleStyles.module.css | 0
.../PlotTitleStyles.module.css.d.ts | 0
.../subcomponents/SVGCheckBoxComponent.tsx | 0
.../CalcConnectionLinePositionsUseCase.tsx | 0
.../utils/CalcDefaultPlotSpecsUseCase.tsx | 0
.../semanticsubstrates/utils/CalcDistance.tsx | 0
.../CalcEntityAttrNamesFromResultUseCase.tsx | 0
.../CalcEntityAttrNamesFromSchemaUseCase.tsx | 0
.../utils/CalcScaledPositionsUseCase.tsx | 0
.../utils/CalcXYMinMaxUseCase.tsx | 0
.../utils/FilterUseCase.tsx | 0
.../semanticsubstrates/utils/RotateVec.tsx | 0
.../utils/ToPlotDataParserUseCase.tsx | 4 +-
.../table_vis/components/Table.tsx | 0
.../table_vis/components/table.module.scss | 0
.../components/table.module.scss.d.ts | 1 -
.../vis/visualizations/table_vis/tableVis.tsx | 61 +++++++
.../table_vis/tablevis.stories.tsx | 47 ++----
157 files changed, 1164 insertions(+), 512 deletions(-)
create mode 100644 apps/web/src/app/panels/VisualizationDialog.tsx
create mode 100644 libs/shared/lib/vis/Types.tsx
create mode 100644 libs/shared/lib/vis/documentation.mdx
create mode 100644 libs/shared/lib/vis/index.tsx
delete mode 100644 libs/shared/lib/vis/mapvis/mapvis.stories.tsx
delete mode 100644 libs/shared/lib/vis/mapvis/mapvis.tsx
create mode 100644 libs/shared/lib/vis/panel/dialog.tsx
create mode 100644 libs/shared/lib/vis/panel/index.ts
create mode 100644 libs/shared/lib/vis/panel/visualization.tsx
delete mode 100644 libs/shared/lib/vis/rawjsonvis/rawjsonvis.tsx
delete mode 100644 libs/shared/lib/vis/table_vis/tableVis.tsx
rename libs/shared/lib/vis/{index.ts => visualizations/index.tsx} (82%)
rename libs/shared/lib/vis/{ => visualizations}/mapvis/README.md (100%)
rename libs/shared/lib/vis/{ => visualizations}/mapvis/Types.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/mapvis/archive/geovis/NodeLinkMap.tsx (97%)
rename libs/shared/lib/vis/{ => visualizations}/mapvis/archive/geovis/Tooltip.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/mapvis/archive/geovis/archive/NodeLinkViewModel.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/mapvis/archive/geovis/archive/aggregateCommand.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/mapvis/archive/geovis/archive/unfoldingEdges.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/mapvis/archive/geovis/archive/viewModel.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/mapvis/archive/geovis/config.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/mapvis/archive/geovis/core/attributeFaceting.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/mapvis/archive/geovis/core/edge.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/mapvis/archive/geovis/core/graph.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/mapvis/archive/geovis/core/index.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/mapvis/archive/geovis/core/node.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/mapvis/archive/geovis/layers/GeoBaseLayer.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/mapvis/archive/geovis/layers/GeoClusterLayer.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/mapvis/archive/geovis/layers/GeoFacetingLayer.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/mapvis/archive/geovis/layers/GeoNodeLinkLayer.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/mapvis/archive/geovis/layers/index.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/mapvis/archive/geovis/readability.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/mapvis/archive/geovis/types.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/mapvis/archive/geovis/utils.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/mapvis/components/BaseMap.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/mapvis/components/FilterMenu.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/mapvis/components/LayerPanel.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/mapvis/components/MapPanel.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/mapvis/components/SecondaryMenu.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/mapvis/components/SelectedMenu.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/mapvis/components/index.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/mapvis/graphModel.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/mapvis/layers/choropleth-layer/ChoroplethLayer.tsx (99%)
rename libs/shared/lib/vis/{ => visualizations}/mapvis/layers/choropleth-layer/ChoroplethOptions.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/mapvis/layers/edge-arc-layer/ArcLayerOptions.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/mapvis/layers/edge-arc-layer/EdgeArcLayer.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/mapvis/layers/edge-layer/EdgeLayer.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/mapvis/layers/edge-layer/EdgeOptions.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/mapvis/layers/heatmap-layer/HeatLayer.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/mapvis/layers/heatmap-layer/HeatLayerOptions.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/mapvis/layers/icon-layer/IconLayer.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/mapvis/layers/icon-layer/IconOptions.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/mapvis/layers/index.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/mapvis/layers/node-layer/NodeLayer.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/mapvis/layers/node-layer/NodeOptions.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/mapvis/layers/nodelink-layer/NodeLinkLayer.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/mapvis/layers/nodelink-layer/NodeLinkOptions.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/mapvis/layers/nodelink-layer/shapeFactory.tsx (100%)
create mode 100644 libs/shared/lib/vis/visualizations/mapvis/mapvis.stories.tsx
create mode 100644 libs/shared/lib/vis/visualizations/mapvis/mapvis.tsx
rename libs/shared/lib/vis/{ => visualizations}/mapvis/shared/ColorPicker.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/mapvis/utlis.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/nodelink/Types.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/nodelink/components/NLExport.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/nodelink/components/NLForce.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/nodelink/components/NLMachineLearning.tsx (97%)
rename libs/shared/lib/vis/{ => visualizations}/nodelink/components/NLPixi.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/nodelink/components/NLPopup.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/nodelink/components/query2NL.tsx (98%)
rename libs/shared/lib/vis/{ => visualizations}/nodelink/components/utils.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/nodelink/nodelinkvis.module.scss (100%)
rename libs/shared/lib/vis/{ => visualizations}/nodelink/nodelinkvis.module.scss.d.ts (100%)
rename libs/shared/lib/vis/{ => visualizations}/nodelink/nodelinkvis.stories.tsx (72%)
rename libs/shared/lib/vis/{ => visualizations}/nodelink/nodelinkvis.tsx (84%)
rename libs/shared/lib/vis/{ => visualizations}/paohvis/Types.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/paohvis/components/HyperEdgesRange.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/paohvis/components/MakePaohvisMenu.scss (100%)
rename libs/shared/lib/vis/{ => visualizations}/paohvis/components/MakePaohvisMenu.tsx (99%)
rename libs/shared/lib/vis/{ => visualizations}/paohvis/components/PaohvisFilterComponent.module.scss (100%)
rename libs/shared/lib/vis/{ => visualizations}/paohvis/components/PaohvisFilterComponent.module.scss.d.ts (100%)
rename libs/shared/lib/vis/{ => visualizations}/paohvis/components/PaohvisFilterComponent.tsx (99%)
rename libs/shared/lib/vis/{ => visualizations}/paohvis/components/RowLabelColumn.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/paohvis/components/Tooltip.scss (100%)
rename libs/shared/lib/vis/{ => visualizations}/paohvis/components/Tooltip.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/paohvis/models/FilterPredicates.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/paohvis/models/PaohvisHolder.test.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/paohvis/models/PaohvisHolder.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/paohvis/models/PaohvisListener.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/paohvis/paohvis.module.scss (100%)
rename libs/shared/lib/vis/{ => visualizations}/paohvis/paohvis.module.scss.d.ts (100%)
rename libs/shared/lib/vis/{ => visualizations}/paohvis/paohvis.stories.tsx (68%)
rename libs/shared/lib/vis/{ => visualizations}/paohvis/paohvis.tsx (97%)
rename libs/shared/lib/vis/{ => visualizations}/paohvis/utils/AttributesFilterUseCase.tsx (98%)
rename libs/shared/lib/vis/{ => visualizations}/paohvis/utils/CalcEntitiesFromQueryResult.tsx (92%)
rename libs/shared/lib/vis/{ => visualizations}/paohvis/utils/CalcEntityAttrAndRelNamesFromSchemaUseCase.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/paohvis/utils/SortUseCase.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/paohvis/utils/ToPaohvisDataParserUsecase.tsx (99%)
rename libs/shared/lib/vis/{ => visualizations}/paohvis/utils/utils.tsx (99%)
rename libs/shared/lib/vis/{ => visualizations}/rawjsonvis/index.ts (100%)
rename libs/shared/lib/vis/{ => visualizations}/rawjsonvis/rawjsonvis.module.scss (100%)
rename libs/shared/lib/vis/{ => visualizations}/rawjsonvis/rawjsonvis.module.scss.d.ts (100%)
rename libs/shared/lib/vis/{ => visualizations}/rawjsonvis/rawjsonvis.spec.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/rawjsonvis/rawjsonvis.stories.tsx (52%)
create mode 100644 libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.tsx
rename libs/shared/lib/vis/{ => visualizations}/semanticsubstrates/Types.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/semanticsubstrates/configpanel/SemanticSubstrateConfigPanel.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/semanticsubstrates/configpanel/SemanticSubstratesConfigPanelViewModel.t (98%)
rename libs/shared/lib/vis/{ => visualizations}/semanticsubstrates/configpanel/SemanticSubstratesConfigPanelViewModel.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/semanticsubstrates/configpanel/Types.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/semanticsubstrates/index.ts (100%)
rename libs/shared/lib/vis/{ => visualizations}/semanticsubstrates/semanticsubstrates.module.scss (100%)
rename libs/shared/lib/vis/{ => visualizations}/semanticsubstrates/semanticsubstrates.module.scss.d.ts (100%)
rename libs/shared/lib/vis/{ => visualizations}/semanticsubstrates/semanticsubstrates.stories.tsx (70%)
rename libs/shared/lib/vis/{ => visualizations}/semanticsubstrates/semanticsubstrates.tsx (98%)
rename libs/shared/lib/vis/{ => visualizations}/semanticsubstrates/subcomponents/AddPlotButtonComponent.module.scss (94%)
rename libs/shared/lib/vis/{ => visualizations}/semanticsubstrates/subcomponents/AddPlotButtonComponent.module.scss.d.ts (100%)
rename libs/shared/lib/vis/{ => visualizations}/semanticsubstrates/subcomponents/AddPlotButtonComponent.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/semanticsubstrates/subcomponents/AddPlotPopup.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/semanticsubstrates/subcomponents/BrushComponent.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/semanticsubstrates/subcomponents/LinesBetweenPlotsComponent.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/semanticsubstrates/subcomponents/OptimizedAutocomplete.module.scss (100%)
rename libs/shared/lib/vis/{ => visualizations}/semanticsubstrates/subcomponents/OptimizedAutocomplete.module.scss.d.ts (100%)
rename libs/shared/lib/vis/{ => visualizations}/semanticsubstrates/subcomponents/OptimizedAutocomplete.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/semanticsubstrates/subcomponents/PlotAxisLabelStyles.module.css (100%)
rename libs/shared/lib/vis/{ => visualizations}/semanticsubstrates/subcomponents/PlotAxisLabelStyles.module.css.d.ts (100%)
rename libs/shared/lib/vis/{ => visualizations}/semanticsubstrates/subcomponents/PlotAxisLabelsComponent.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/semanticsubstrates/subcomponents/PlotComponent.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/semanticsubstrates/subcomponents/PlotTitleComponent.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/semanticsubstrates/subcomponents/PlotTitleStyles.module.css (100%)
rename libs/shared/lib/vis/{ => visualizations}/semanticsubstrates/subcomponents/PlotTitleStyles.module.css.d.ts (100%)
rename libs/shared/lib/vis/{ => visualizations}/semanticsubstrates/subcomponents/SVGCheckBoxComponent.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/semanticsubstrates/utils/CalcConnectionLinePositionsUseCase.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/semanticsubstrates/utils/CalcDefaultPlotSpecsUseCase.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/semanticsubstrates/utils/CalcDistance.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/semanticsubstrates/utils/CalcEntityAttrNamesFromResultUseCase.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/semanticsubstrates/utils/CalcEntityAttrNamesFromSchemaUseCase.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/semanticsubstrates/utils/CalcScaledPositionsUseCase.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/semanticsubstrates/utils/CalcXYMinMaxUseCase.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/semanticsubstrates/utils/FilterUseCase.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/semanticsubstrates/utils/RotateVec.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/semanticsubstrates/utils/ToPlotDataParserUseCase.tsx (98%)
rename libs/shared/lib/vis/{ => visualizations}/table_vis/components/Table.tsx (100%)
rename libs/shared/lib/vis/{ => visualizations}/table_vis/components/table.module.scss (100%)
rename libs/shared/lib/vis/{ => visualizations}/table_vis/components/table.module.scss.d.ts (85%)
create mode 100644 libs/shared/lib/vis/visualizations/table_vis/tableVis.tsx
rename libs/shared/lib/vis/{ => visualizations}/table_vis/tablevis.stories.tsx (63%)
diff --git a/apps/web/src/app/app.tsx b/apps/web/src/app/app.tsx
index 0969d61a0..9ddedfcbd 100644
--- a/apps/web/src/app/app.tsx
+++ b/apps/web/src/app/app.tsx
@@ -28,7 +28,7 @@ import {
import { Query2BackendQuery, QueryBuilder, QueryMultiGraph } from '@graphpolaris/shared/lib/querybuilder';
import { Schema } from '@graphpolaris/shared/lib/schema/panel';
import { Navbar } from '../components/navbar/navbar';
-import { VisualizationPanel } from './panels/Visualization';
+import { VisualizationPanel } from '@graphpolaris/shared/lib/vis/panel';
import { SchemaFromBackend } from '@graphpolaris/shared/lib/schema';
import { LinkPredictionInstance, setMLResult, allMLTypes } from '@graphpolaris/shared/lib/data-access/store/mlSlice';
import { Resizable } from '@graphpolaris/shared/lib/components/Resizable';
diff --git a/apps/web/src/app/panels/Visualization.tsx b/apps/web/src/app/panels/Visualization.tsx
index 883093ed9..6f83691ec 100644
--- a/apps/web/src/app/panels/Visualization.tsx
+++ b/apps/web/src/app/panels/Visualization.tsx
@@ -1,16 +1,12 @@
-import React, { useMemo, useState } from 'react';
-import { RawJSONVis, NodeLinkVis, PaohVis, SemanticSubstrates, TableVis } from '@graphpolaris/shared/lib/vis';
+import React, { useState } from 'react';
import { useAppDispatch, useGraphQueryResult, useQuerybuilderGraph, useVisualizationState } from '@graphpolaris/shared/lib/data-access';
import { LoadingSpinner } from '@graphpolaris/shared/lib/components/LoadingSpinner';
import { Visualizations, setActiveVisualization } from '@graphpolaris/shared/lib/data-access/store/visualizationSlice';
-import { DropdownItem, DropdownItemContainer, MenuDropdown } from '@graphpolaris/shared/lib/components/dropdowns';
+import { DropdownItem, DropdownItemContainer } from '@graphpolaris/shared/lib/components/dropdowns';
import ControlContainer from '@graphpolaris/shared/lib/components/controls';
import { Button } from '@graphpolaris/shared/lib/components/buttons';
-
-type VisOptionFunction = () => {
- payload: Visualizations;
- type: 'visualization/setActiveVisualization';
-};
+import { createVisualizationComponent } from '@graphpolaris/shared/lib/vis';
+import VisualizationDialog from './VisualizationDialog';
export const VisualizationPanel = () => {
const vis = useVisualizationState();
@@ -18,51 +14,26 @@ export const VisualizationPanel = () => {
const query = useQuerybuilderGraph();
const dispatch = useAppDispatch();
const [visDropdownOpen, setVisDropdownOpen] = useState<boolean>(false);
+ const [showVisSettings, setShowVisSettings] = useState<boolean>(false);
- const visOptions: Record<string, VisOptionFunction> = {
- Table: () => dispatch(setActiveVisualization(Visualizations.Table)),
- NodeLink: () => dispatch(setActiveVisualization(Visualizations.NodeLink)),
- PaohVis: () => dispatch(setActiveVisualization(Visualizations.Paohvis)),
- 'JSON Structure': () => dispatch(setActiveVisualization(Visualizations.RawJSON)),
- };
-
- const visualizationComponent = useMemo(() => {
- switch (vis.activeVisualization) {
- case Visualizations.Table:
- return (
- <div id={Visualizations.Table} className="tabContent w-full h-full py-8">
- <TableVis showBarplot={true} />
- </div>
- );
- case Visualizations.NodeLink:
- return (
- <div id={Visualizations.NodeLink} className="tabContent w-full h-full">
- <NodeLinkVis />
- </div>
- );
- case Visualizations.RawJSON:
- return (
- <div id={Visualizations.RawJSON} className="tabContent w-full h-full">
- <RawJSONVis />
- </div>
- );
- case Visualizations.Paohvis:
- return (
- <div id={Visualizations.Paohvis} className="tabContent w-full h-full">
- <PaohVis rowHeight={30} hyperedgeColumnWidth={30} gapBetweenRanges={3} />
- </div>
- );
- default:
- return null;
- }
- }, [graphQueryResult, vis]);
+ const createVisComponent = createVisualizationComponent();
+ const visualizationInstance = createVisComponent();
return (
<div className="vis-panel h-full w-full overflow-y-auto" style={graphQueryResult.nodes.length === 0 ? { overflow: 'hidden' } : {}}>
+ <VisualizationDialog open={showVisSettings} onClose={() => setShowVisSettings(false)} />
<div className="sticky top-0 flex items-center justify-between z-[2] py-0 px-2 bg-secondary-100 border-b border-secondary-200">
<h1 className="text-xs font-semibold text-secondary-800">{vis.activeVisualization} visualization</h1>
<ControlContainer>
- <Button type="secondary" variant="ghost" size="xs" iconName="Settings" onClick={() => {}} />
+ <Button
+ type="secondary"
+ variant="ghost"
+ size="xs"
+ iconName="Settings"
+ onClick={() => {
+ setShowVisSettings(!showVisSettings);
+ }}
+ />
<Button
type="secondary"
variant="ghost"
@@ -74,13 +45,13 @@ export const VisualizationPanel = () => {
/>
{visDropdownOpen && (
<DropdownItemContainer align="top-6 right-6">
- {Object.keys(visOptions).map((key) => (
+ {Object.keys(Visualizations).map((key) => (
<DropdownItem
key={key}
value={key}
onClick={() => {
- visOptions[key]();
setVisDropdownOpen(false);
+ dispatch(setActiveVisualization(Visualizations[key as keyof typeof Visualizations]));
}}
/>
))}
@@ -89,18 +60,17 @@ export const VisualizationPanel = () => {
</ControlContainer>
</div>
- {graphQueryResult.queryingBackend && (
+ {graphQueryResult.queryingBackend ? (
<div className="w-full h-full flex flex-col items-center justify-center overflow-hidden">
<LoadingSpinner>Querying backend...</LoadingSpinner>
</div>
- )}
- {!graphQueryResult.queryingBackend && graphQueryResult.nodes.length === 0 ? (
+ ) : graphQueryResult.nodes.length === 0 ? (
<div className="w-full h-full flex flex-col items-center justify-center">
<p>No data available to be shown</p>
{query.nodes.length > 0 ? <p>Query resulted in empty dataset</p> : <p>Query for data to visualize</p>}
</div>
) : (
- <div className="w-full h-full">{visualizationComponent}</div>
+ <div className="w-full h-full">{visualizationInstance}</div>
)}
</div>
);
diff --git a/apps/web/src/app/panels/VisualizationDialog.tsx b/apps/web/src/app/panels/VisualizationDialog.tsx
new file mode 100644
index 000000000..2c360bfc9
--- /dev/null
+++ b/apps/web/src/app/panels/VisualizationDialog.tsx
@@ -0,0 +1,106 @@
+import React, { useState, useEffect } from 'react';
+import { FormActions, FormBody, FormCard, FormControl, FormDiv, FormHBar, FormTitle } from '@graphpolaris/shared/lib/components/forms';
+import { DialogProps } from '@graphpolaris/shared/lib/components/Dialog';
+import { useAppDispatch, useVisualizationState } from '@graphpolaris/shared/lib/data-access';
+import { updateGeneralSettings, updateVisualizationSettings } from '@graphpolaris/shared/lib/data-access/store/visualizationSlice';
+import Input from '@graphpolaris/shared/lib/components/inputs';
+import { globalConfigSchemaTypes, localConfigSchemaType } from '@graphpolaris/shared/lib/vis/Types';
+
+export default function VisualizationDialog(props: DialogProps) {
+ const dispatch = useAppDispatch();
+ const vis = useVisualizationState();
+ const [settingsGeneral, setSettingsGeneral] = useState<globalConfigSchemaTypes>(vis.settings.general);
+ const [settingsSpecific, setSettingsSpecific] = useState<localConfigSchemaType>(vis.settings[vis.activeVisualization]);
+
+ useEffect(() => {
+ if (vis.settings.general !== settingsGeneral) {
+ dispatch(updateGeneralSettings(settingsGeneral));
+ }
+ }, [settingsGeneral]);
+
+ useEffect(() => {
+ if (vis.settings[vis.activeVisualization] !== settingsSpecific) {
+ dispatch(
+ updateVisualizationSettings({
+ id: vis.activeVisualization,
+ settings: settingsSpecific,
+ }),
+ );
+ }
+ }, [settingsSpecific]);
+
+ useEffect(() => {
+ setSettingsSpecific(vis.settings[vis.activeVisualization]);
+ }, [vis.settings[vis.activeVisualization]]);
+
+ return (
+ <>
+ {props.open && (
+ <FormDiv>
+ <FormCard>
+ <FormBody
+ onSubmit={(e) => {
+ e.preventDefault();
+ props.onClose();
+ }}
+ >
+ <FormTitle title="Settings" onClose={props.onClose} />
+ <FormHBar />
+
+ {settingsGeneral && (
+ <>
+ <p className="font-sm font-bold pl-2">General</p>
+ {Object.keys(settingsGeneral).map((val) => (
+ <FormControl key={val}>
+ <Input
+ {...settingsGeneral[val]}
+ value={vis.settings.general[val].value as any}
+ onChange={(value: any) => {
+ setSettingsGeneral((prevSettings) => ({
+ ...prevSettings,
+ [val]: { ...prevSettings[val], value: value },
+ }));
+ }}
+ />
+ </FormControl>
+ ))}
+ </>
+ )}
+
+ {settingsSpecific && (
+ <>
+ <FormHBar />
+ <p className="font-sm font-bold pl-2">Specific</p>
+ {Object.keys(settingsSpecific).map((val) => {
+ const currentSetting = settingsSpecific[val];
+ const shouldShowSetting = currentSetting.condition ? currentSetting.condition?.(settingsSpecific) : true;
+ console.log(currentSetting, shouldShowSetting);
+ return (
+ shouldShowSetting && (
+ <FormControl key={val}>
+ <Input
+ {...settingsSpecific[val]}
+ value={settingsSpecific[val]?.value as any}
+ onChange={(value: any) => {
+ setSettingsSpecific((prevSettings) => ({
+ ...prevSettings,
+ [val]: { ...prevSettings[val], value: value },
+ }));
+ }}
+ />
+ </FormControl>
+ )
+ );
+ })}
+ </>
+ )}
+
+ <FormHBar />
+ <FormActions onClose={props.onClose} />
+ </FormBody>
+ </FormCard>
+ </FormDiv>
+ )}
+ </>
+ );
+}
diff --git a/apps/web/src/components/navbar/DatabaseManagement/forms/AddDatabase/newdatabase.tsx b/apps/web/src/components/navbar/DatabaseManagement/forms/AddDatabase/newdatabase.tsx
index ba97cb833..571d597b3 100644
--- a/apps/web/src/components/navbar/DatabaseManagement/forms/AddDatabase/newdatabase.tsx
+++ b/apps/web/src/components/navbar/DatabaseManagement/forms/AddDatabase/newdatabase.tsx
@@ -216,10 +216,10 @@ export const NewDatabaseForm = (props: { onClose(): void; open: boolean }) => {
required
value={databaseNameMapping[state.type]}
options={databaseNameMapping}
- onChange={(value: string) => {
+ onChange={(value: string | number) => {
setState({
...state,
- type: databaseNameMapping.indexOf(value),
+ type: databaseNameMapping.indexOf(String(value)),
});
}}
/>
@@ -230,10 +230,10 @@ export const NewDatabaseForm = (props: { onClose(): void; open: boolean }) => {
required
value={state.protocol}
options={databaseProtocolMapping}
- onChange={(value: string) => {
+ onChange={(value: string | number) => {
setState({
...state,
- protocol: value,
+ protocol: String(value),
});
}}
/>
diff --git a/apps/web/src/components/navbar/DatabaseManagement/forms/settings.tsx b/apps/web/src/components/navbar/DatabaseManagement/forms/settings.tsx
index 109aa2953..9c6fc99af 100644
--- a/apps/web/src/components/navbar/DatabaseManagement/forms/settings.tsx
+++ b/apps/web/src/components/navbar/DatabaseManagement/forms/settings.tsx
@@ -163,10 +163,10 @@ export const SettingsForm = (props: { onClose(): void; open: boolean; database:
required
value={databaseNameMapping[state.type]}
options={databaseNameMapping}
- onChange={(value: string) => {
+ onChange={(value: string | number) => {
setState({
...state,
- type: databaseNameMapping.indexOf(value),
+ type: databaseNameMapping.indexOf(String(value)),
});
}}
/>
@@ -177,10 +177,10 @@ export const SettingsForm = (props: { onClose(): void; open: boolean; database:
required
value={state.protocol}
options={databaseProtocolMapping}
- onChange={(value: string) => {
+ onChange={(value: string | number) => {
setState({
...state,
- protocol: value,
+ protocol: String(value),
});
}}
/>
diff --git a/libs/shared/lib/components/buttons/buttons.module.scss.d.ts b/libs/shared/lib/components/buttons/buttons.module.scss.d.ts
index 3165183bc..090a2928f 100644
--- a/libs/shared/lib/components/buttons/buttons.module.scss.d.ts
+++ b/libs/shared/lib/components/buttons/buttons.module.scss.d.ts
@@ -1,7 +1,6 @@
declare const classNames: {
readonly btn: 'btn';
readonly 'btn-lg': 'btn-lg';
- readonly '5': '5';
readonly 'btn-icon-only': 'btn-icon-only';
readonly 'btn-md': 'btn-md';
readonly 'btn-sm': 'btn-sm';
diff --git a/libs/shared/lib/components/inputs/index.tsx b/libs/shared/lib/components/inputs/index.tsx
index 1681881ca..1a3c860d8 100644
--- a/libs/shared/lib/components/inputs/index.tsx
+++ b/libs/shared/lib/components/inputs/index.tsx
@@ -2,23 +2,21 @@ import React from 'react';
import styles from './inputs.module.scss';
import { DropdownButton, DropdownContainer, DropdownItem, DropdownItemContainer } from '../dropdowns';
-type BaseProps = {
- type: 'slider' | 'text' | 'checkbox' | 'dropdown' | 'radio';
-};
-
-type SliderProps = BaseProps & {
+type SliderProps = {
label: string;
+ type: 'slider';
value: number;
min: number;
max: number;
step: number;
showValue?: boolean;
unit?: string;
- onChange: (value: number) => void;
+ onChange?: (value: number) => void;
};
-type TextProps = BaseProps & {
+type TextProps = {
label: string;
+ type: 'text';
placeholder?: string;
value: string;
required?: boolean;
@@ -26,34 +24,45 @@ type TextProps = BaseProps & {
visible?: boolean;
disabled?: boolean;
validate?: (value: any) => boolean;
- onChange: (value: string) => void;
+ onChange?: (value: string) => void;
};
-type CheckboxProps = BaseProps & {
+type CheckboxProps = {
label?: string;
+ type: 'checkbox';
options: Array<string>;
value: Array<string>;
- onChange: (value: Array<string>) => void;
+ onChange?: (value: Array<string>) => void;
+};
+
+type BooleanProps = {
+ label: string;
+ type: 'boolean';
+ options?: any;
+ value: boolean;
+ onChange?: (value: boolean) => void;
};
-type RadioProps = BaseProps & {
+type RadioProps = {
label?: string;
+ type: 'radio';
options: Array<string>;
value: string;
- onChange: (value: string) => void;
+ onChange?: (value: string) => void;
};
-type DropdownProps = BaseProps & {
+type DropdownProps = {
label?: string;
- value: string;
- options: Array<string>;
- onChange: (value: string) => void;
+ value: string | number;
+ type: 'dropdown';
+ options: any;
+ onChange?: (value: string | number) => void;
required?: boolean;
};
-type InputProps = SliderProps | TextProps | CheckboxProps | DropdownProps | RadioProps;
+export type InputProps = TextProps | SliderProps | CheckboxProps | DropdownProps | RadioProps | BooleanProps;
-const Input: React.FC<InputProps> = (props) => {
+const Input = (props: InputProps) => {
switch (props.type) {
case 'slider':
return <Slider {...(props as SliderProps)} />;
@@ -65,6 +74,8 @@ const Input: React.FC<InputProps> = (props) => {
return <DropDown {...(props as DropdownProps)} />;
case 'radio':
return <Radio {...(props as RadioProps)} />;
+ case 'boolean':
+ return <Boolean {...(props as BooleanProps)} />;
default:
return null;
}
@@ -90,7 +101,9 @@ export const Slider = ({ label, value, min, max, step, unit, showValue = true, o
step={step}
value={value}
onChange={(e) => {
- onChange(parseFloat(e.target.value));
+ if (onChange) {
+ onChange(parseFloat(e.target.value));
+ }
}}
aria-labelledby="input-slider"
/>
@@ -125,12 +138,14 @@ export const Text = ({
className={`px-3 py-2 bg-light border border-secondary-300 placeholder-secondary-400 focus:outline-none block w-full sm:text-sm focus:ring-1 ${
isValid ? '' : 'input-error'
}`}
- value={value}
+ value={value.toString()}
onChange={(e) => {
if (required && validate) {
setIsValid(validate(e.target.value));
}
- onChange(e.target.value);
+ if (onChange) {
+ onChange(e.target.value);
+ }
}}
required={required}
disabled={disabled}
@@ -152,7 +167,9 @@ export const Radio = ({ label, value, options, onChange }: RadioProps) => {
name={option}
checked={value === option}
onChange={() => {
- onChange(option);
+ if (onChange) {
+ onChange(option);
+ }
}}
className="radio radio-xs radio-primary"
/>
@@ -179,7 +196,9 @@ export const Checkbox = ({ label, value, options, onChange }: CheckboxProps) =>
checked={Array.isArray(value) && value.includes(option)}
onChange={(event) => {
const updatedValue = event.target.checked ? [...value, option] : value.filter((val) => val !== option);
- onChange(updatedValue);
+ if (onChange) {
+ onChange(updatedValue);
+ }
}}
className="checkbox checkbox-xs"
/>
@@ -190,6 +209,26 @@ export const Checkbox = ({ label, value, options, onChange }: CheckboxProps) =>
);
};
+export const Boolean = ({ label, value, onChange }: BooleanProps) => {
+ return (
+ <div>
+ <label className="label cursor-pointer w-fit gap-2 px-0 py-1">
+ <span className="label-text">{label}</span>
+ <input
+ type="checkbox"
+ checked={value}
+ onChange={(event) => {
+ if (onChange) {
+ onChange(event.target.checked);
+ }
+ }}
+ className="checkbox checkbox-xs"
+ />
+ </label>
+ </div>
+ );
+};
+
export const DropDown = ({ label, value, options, onChange, required = false }: DropdownProps) => {
const dropdownRef = React.useRef<HTMLDivElement>(null);
const [isDropdownOpen, setIsDropdownOpen] = React.useState<boolean>(false);
@@ -229,12 +268,15 @@ export const DropDown = ({ label, value, options, onChange, required = false }:
{isDropdownOpen && (
<DropdownItemContainer align="left-0">
{options &&
- options.map((item, index) => (
+ options.map((item: any, index: number) => (
<DropdownItem
key={index}
- value={item}
+ value={item.toString()}
onClick={() => {
- onChange(item);
+ const parsedValue = typeof item === 'number' ? item.toString() : item;
+ if (onChange) {
+ onChange(parsedValue);
+ }
setIsDropdownOpen(false);
}}
/>
diff --git a/libs/shared/lib/data-access/store/hooks.ts b/libs/shared/lib/data-access/store/hooks.ts
index da9e43a2c..e22bf1997 100644
--- a/libs/shared/lib/data-access/store/hooks.ts
+++ b/libs/shared/lib/data-access/store/hooks.ts
@@ -10,7 +10,7 @@ import {
} from '@graphpolaris/shared/lib/data-access/store/querybuilderSlice';
import { sessionCacheState } from './sessionSlice';
import { authState } from './authSlice';
-import { visualizationState } from './visualizationSlice';
+import { visualizationState, visualizationSettings } from './visualizationSlice';
import { allMLEnabled, selectML } from './mlSlice';
import { searchResultState, searchResultData, searchResultSchema, searchResultQB, recentSearches } from './searchResultSlice';
@@ -50,3 +50,4 @@ export const useRecentSearches = () => useAppSelector(recentSearches);
// Visualization Slices
export const useVisualizationState = () => useAppSelector(visualizationState);
+export const useVisualizationSettings = () => useAppSelector(visualizationSettings);
diff --git a/libs/shared/lib/data-access/store/index.ts b/libs/shared/lib/data-access/store/index.ts
index d5ba3f4cb..7bff27287 100644
--- a/libs/shared/lib/data-access/store/index.ts
+++ b/libs/shared/lib/data-access/store/index.ts
@@ -13,6 +13,7 @@ export {
} from './graphQueryResultSlice';
export { mlSlice } from './mlSlice';
export { searchResultSlice } from './searchResultSlice';
+export { visualizationSlice } from './visualizationSlice';
// Exported types
export type { Node, Edge, GraphQueryResult } from './graphQueryResultSlice';
diff --git a/libs/shared/lib/data-access/store/visualizationSlice.ts b/libs/shared/lib/data-access/store/visualizationSlice.ts
index b7415b457..d149f2f63 100644
--- a/libs/shared/lib/data-access/store/visualizationSlice.ts
+++ b/libs/shared/lib/data-access/store/visualizationSlice.ts
@@ -1,32 +1,78 @@
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import type { RootState } from './store';
+import { globalConfigSchemaTypes, localConfigSchemaType } from '../../vis/Types';
export enum Visualizations {
- NodeLink = 'NodeLink',
- Paohvis = 'Paohvis',
- RawJSON = 'RawJSON',
- Table = 'Table',
+ NodeLink = 'NodeLinkVis',
+ Paohvis = 'PaohVis',
+ RawJSON = 'RawJSONVis',
+ Table = 'TableVis',
}
type VisState = {
activeVisualization: Visualizations;
+ settings: {
+ general: globalConfigSchemaTypes;
+ [id: string]: localConfigSchemaType;
+ };
};
export const initialState: VisState = {
activeVisualization: Visualizations.NodeLink,
+ settings: {
+ general: {
+ // Example general setting
+ showLegend: {
+ value: false,
+ label: 'Show legend',
+ type: 'boolean',
+ },
+ },
+ },
};
export const visualizationSlice = createSlice({
name: 'visualization',
initialState,
reducers: {
+ addVisualization: (state, action: PayloadAction<{ id: string; settings: localConfigSchemaType }>) => {
+ const { id, settings } = action.payload;
+ state.settings[id] = settings;
+ },
+ removeVisualization: (state, action: PayloadAction<string>) => {
+ if (state.settings[action.payload]) {
+ delete state.settings[action.payload];
+ }
+ },
+ updateVisualizationSettings: (state, action: PayloadAction<{ id: string; settings: any }>) => {
+ const { id, settings } = action.payload;
+ state.settings[id] = { ...state.settings[id], ...settings };
+ },
+ updateGeneralSettings: (state, action: PayloadAction<any>) => {
+ state.settings.general = action.payload;
+ },
setActiveVisualization: (state, action: PayloadAction<Visualizations>) => {
state.activeVisualization = action.payload;
},
+ updateSettings: (state, action: PayloadAction<any>) => {
+ state.settings.visualization = action.payload;
+ },
},
});
-export const { setActiveVisualization } = visualizationSlice.actions;
+export const {
+ addVisualization,
+ removeVisualization,
+ updateVisualizationSettings,
+ updateGeneralSettings,
+ setActiveVisualization,
+ updateSettings,
+} = visualizationSlice.actions;
export const visualizationState = (state: RootState) => state.visualize;
+export const visualizationSettings = (state: RootState) => ({
+ general: state.visualize.settings.general,
+ [state.visualize.activeVisualization]: state.visualize.settings[state.visualize.activeVisualization],
+});
+
export default visualizationSlice.reducer;
diff --git a/libs/shared/lib/schema/panel/schemaDialog.tsx b/libs/shared/lib/schema/panel/schemaDialog.tsx
index 54b8ad354..e8fbeaca8 100644
--- a/libs/shared/lib/schema/panel/schemaDialog.tsx
+++ b/libs/shared/lib/schema/panel/schemaDialog.tsx
@@ -73,7 +73,7 @@ export const SchemaDialog = (props: DialogProps) => {
label="Type of Connection"
value={state.connectionType}
options={['Default', 'Step', 'Straight', 'Bezier']}
- onChange={(value: string) => {
+ onChange={(value: string | number) => {
setState({ ...state, connectionType: value as any });
}}
/>
@@ -85,7 +85,7 @@ export const SchemaDialog = (props: DialogProps) => {
label="Layout Type"
value={state.layoutName}
options={Object.values(Layouts)}
- onChange={(value: string) => {
+ onChange={(value: string | number) => {
setState({ ...state, layoutName: value as any });
}}
/>
diff --git a/libs/shared/lib/vis/Types.tsx b/libs/shared/lib/vis/Types.tsx
new file mode 100644
index 000000000..4c66c45b7
--- /dev/null
+++ b/libs/shared/lib/vis/Types.tsx
@@ -0,0 +1,49 @@
+import { NodeLinkProps, PaohVisProps, RawJSONVisProps, SemanticSubstratesProps, TableProps } from './visualizations';
+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 { InputProps } from '../components/inputs';
+import { FC } from 'react';
+import { Visualizations } from '.';
+
+export type settingConifgTypes = InputProps;
+
+export type globalConfigSchemaTypes = {
+ [id: string]: settingConifgTypes;
+};
+
+export type globalConfigPropTypes = {
+ [id: string]: any;
+};
+
+export type localConfigSchemaType = {
+ [id: string]: settingConifgTypes & { condition?: (config: Record<string, any>) => boolean };
+};
+
+export type localConfigPropTypes<T extends keyof typeof Visualizations> = T extends 'TableVis'
+ ? TableProps
+ : T extends 'PaohVis'
+ ? PaohVisProps
+ : T extends 'RawJSONVis'
+ ? RawJSONVisProps
+ : T extends 'SemanticSubstrates'
+ ? SemanticSubstratesProps
+ : T extends 'NodeLinkVis'
+ ? NodeLinkProps
+ : never;
+
+export type VISComponentType = {
+ displayName: string;
+ VIS: FC<any>;
+ localConfigSchema: localConfigSchemaType;
+};
+
+export type VisualizationPropTypes<T extends keyof typeof Visualizations> = {
+ data: GraphQueryResult;
+ schema: SchemaGraph;
+ ml: ML;
+ dispatch: AppDispatch;
+ globalConfig: globalConfigPropTypes;
+ localConfig: localConfigPropTypes<T>;
+};
diff --git a/libs/shared/lib/vis/documentation.mdx b/libs/shared/lib/vis/documentation.mdx
new file mode 100644
index 000000000..34ce016ac
--- /dev/null
+++ b/libs/shared/lib/vis/documentation.mdx
@@ -0,0 +1,152 @@
+import { Meta, Unstyled } from '@storybook/blocks';
+
+<Meta title="Visualizations/Implementation" />
+
+# Visualization documentation
+
+## Contents
+
+1. [Introduction](#Introduction)
+2. [Overview](#Overview)
+3. [Implementation](#Implementation)
+4. [Props](#Props)
+
+## Introduction
+
+This is the documentation for implementing visualizations within the GraphPolaris system.
+
+## Overview
+
+The basic code implementation looks like this:
+
+```jsx
+import React from 'react';
+import { VisualizationPropTypes, VISComponentType, localConfigSchemaType } from '@graphpolaris/shared/lib/vis/Types';
+
+/**
+ * Props specific to the Visualization component.
+ */
+export type VisualizationProps = {};
+
+/**
+ * Visualization Component
+ * @param {object} props - Props for the Visualization component.
+ * @param {GraphQueryResult} props.data - Queried data from the database.
+ * @param {object} props.schema - Database schema.
+ * @param {any} props.ml - Machine-learning results.
+ * @param {function} props.dispatch - Redux dispatch for state management.
+ * @param {object} props.globalConfig - Global configurations for the panel (applicable to all visualizations).
+ * @param {object} props.localConfig - Local configuration props unique to this visualization.
+ * @returns {JSX.Element} - Rendered content of the visualization.
+ */
+export const Visualization = ({ data, schema, ml, dispatch, globalConfig, localConfig }: VisualizationPropTypes) => {
+ // Perform additional processing specific to this visualization using the provided props
+
+ return (
+ // Rendered visualization content
+ );
+};
+
+/**
+ * Schema for local configuration attributes.
+ */
+const localConfigSchema: localConfigSchemaType = {};
+
+/**
+ * Visualization Component Object
+ * Contains information and configurations for the exported visualization component.
+ */
+export const VisualizationComponent: VISComponentType = {
+ displayName: 'Visualization',
+ VIS: Visualization,
+ localConfigSchema: localConfigSchema,
+};
+```
+
+## Implementation
+
+### VisualizationProps
+
+This is where the types are defined for the local configuration of the visualization. It has to define all values that are in the localConfigSchema. This is exported and used in the visualization factory for the local config types.
+
+Example:
+
+```jsx
+export type TableProps = {
+ showBarplot: boolean,
+ itemsPerPage: number,
+};
+```
+
+### localConfigSchema
+
+Here are the parameters set that can be changed by a user. These values are displayed in the settings panel. It needs to be in the form of a reusable input component.
+
+Example:
+
+```jsx
+const localConfigSchema: localConfigSchemaType = {
+ showBarplot: {
+ value: true,
+ type: 'boolean',
+ label: 'Show barplot',
+ },
+ itemsPerPage: {
+ value: 10,
+ type: 'dropdown',
+ label: 'Items per page',
+ options: [10, 20, 30],
+ },
+};
+```
+
+#### Conditional rendering
+
+It is possible to only show certain settings based on a condition.
+
+```jsx
+const localConfigSchema: localConfigSchemaType = {
+ showBarplot: {
+ value: true,
+ type: 'boolean',
+ label: 'Show barplot',
+ },
+ itemsPerPage: {
+ value: 10,
+ type: 'dropdown',
+ label: 'Items per page',
+ options: [10, 20, 30],
+ condition: (localConf) => localConf.showBarplot.value === false,
+ },
+};
+```
+
+### VisualizationComponent
+
+The visualization component is what gets exported and is used in the factory. It must have a displayName, VIS and localConfigSchema.
+
+## Props
+
+### Data prop
+
+Contains the queried data from the database.
+
+### Schema prop
+
+Contains the database schema.
+
+### ML prop
+
+Contains the Machine-Learning results.
+
+### Dispatch prop
+
+Contains the dispatch for the redux state.
+
+### Global config prop
+
+Contains the global configurations for the panel that is the same for every visualization.
+
+### Local config prop
+
+Contains the local config props that are unique per visualization.
diff --git a/libs/shared/lib/vis/index.tsx b/libs/shared/lib/vis/index.tsx
new file mode 100644
index 000000000..3abc7b697
--- /dev/null
+++ b/libs/shared/lib/vis/index.tsx
@@ -0,0 +1,79 @@
+import React from 'react';
+import { useAppDispatch } from '@graphpolaris/shared/lib/data-access';
+import { addVisualization } from '../data-access/store/visualizationSlice';
+import {
+ useGraphQueryResult,
+ useML,
+ useSchemaGraph,
+ useVisualizationSettings,
+ useVisualizationState,
+} from '@graphpolaris/shared/lib/data-access/store/hooks';
+import { localConfigPropTypes, globalConfigPropTypes, VISComponentType } from './Types';
+import { NodeLinkComponent, PaohVisComponent, RawJSONComponent, TableComponent } from './visualizations';
+
+// export * from './rawjsonvis';
+// export * from './nodelink/nodelinkvis';
+// export * from './paohvis/paohvis';
+// export * from './semanticsubstrates/semanticsubstrates';
+// export * from './table_vis/tableVis';
+// export * from './mapvis/mapvis';
+
+export const Visualizations = {
+ TableVis: TableComponent,
+ PaohVis: PaohVisComponent,
+ RawJSONVis: RawJSONComponent,
+ NodeLinkVis: NodeLinkComponent,
+ MapVis: '',
+};
+
+export const createVisualizationComponent = () => {
+ return () => {
+ const dispatch = useAppDispatch();
+ const vis = useVisualizationState();
+ const settings = useVisualizationSettings();
+ const graphQueryResult = useGraphQueryResult();
+ const schema = useSchemaGraph();
+ const ml = useML();
+
+ const VisualizationComponent: VISComponentType = Visualizations[vis.activeVisualization];
+
+ React.useEffect(() => {
+ dispatch(addVisualization({ id: VisualizationComponent.displayName, settings: VisualizationComponent.localConfigSchema }));
+ }, [vis.activeVisualization]);
+
+ const globalConfig: globalConfigPropTypes =
+ settings.general &&
+ Object.keys(settings.general).reduce((propsObject, val) => {
+ return {
+ ...propsObject,
+ [val]: vis.settings.general[val].value,
+ };
+ }, {});
+
+ const displayName = vis.activeVisualization as keyof typeof Visualizations;
+
+ const localConfig: localConfigPropTypes<typeof displayName> =
+ settings[vis.activeVisualization] &&
+ (Object.keys(settings[vis.activeVisualization]).reduce((propsObject, val) => {
+ return {
+ ...propsObject,
+ [val]: vis.settings[vis.activeVisualization][val].value,
+ };
+ }, {}) as localConfigPropTypes<typeof displayName>);
+
+ return (
+ localConfig && (
+ <div className="w-full h-full">
+ <VisualizationComponent.VIS
+ data={graphQueryResult}
+ schema={schema}
+ ml={ml}
+ dispatch={dispatch}
+ globalConfig={globalConfig}
+ localConfig={localConfig}
+ />
+ </div>
+ )
+ );
+ };
+};
diff --git a/libs/shared/lib/vis/mapvis/mapvis.stories.tsx b/libs/shared/lib/vis/mapvis/mapvis.stories.tsx
deleted file mode 100644
index 195aebdf7..000000000
--- a/libs/shared/lib/vis/mapvis/mapvis.stories.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from 'react';
-import MapVis from './mapvis';
-import { Provider } from 'react-redux';
-import { configureStore } from '@reduxjs/toolkit';
-import { assignNewGraphQueryResult, graphQueryResultSlice } from '../../data-access/store';
-import { mockMobilityQueryResult, bigMockQueryResults } from '../../mock-data';
-
-const Mockstore = configureStore({
- reducer: {
- graphQueryResult: graphQueryResultSlice.reducer,
- },
-});
-
-export default {
- title: 'Visualizations/MapVis',
- component: MapVis,
- decorators: [
- (story: any) => (
- <Provider store={Mockstore}>
- <div
- style={{
- width: '100%',
- height: '100vh',
- }}
- >
- {story()}
- </div>
- </Provider>
- ),
- ],
-};
-
-const Template = (args: any) => <MapVis {...args} />;
-
-export const DutchVehicleTheft: any = Template.bind({});
-DutchVehicleTheft.play = async () => {
- const dispatch = Mockstore.dispatch;
- dispatch(assignNewGraphQueryResult({ queryID: '1', result: { type: 'nodelink', payload: mockMobilityQueryResult } }));
-};
-
-export const AmericanFlights: any = Template.bind({});
-AmericanFlights.play = async () => {
- const dispatch = Mockstore.dispatch;
- dispatch(assignNewGraphQueryResult({ queryID: '1', result: { type: 'nodelink', payload: bigMockQueryResults } }));
-};
diff --git a/libs/shared/lib/vis/mapvis/mapvis.tsx b/libs/shared/lib/vis/mapvis/mapvis.tsx
deleted file mode 100644
index e2a5810ff..000000000
--- a/libs/shared/lib/vis/mapvis/mapvis.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react';
-import {MapPanel, LayerPanel} from './components';
-import {useGraphQueryResult} from '../../data-access/store';
-import GraphModel from './graphModel';
-import {GraphType, Layer} from './Types';
-
-export default function MapVis() {
- const [layers, setLayers] = React.useState<Layer[]>([]);
- const [showFilter, setShowFilter] = React.useState<boolean>(false);
-
- const graphQueryResult = useGraphQueryResult();
- if (!graphQueryResult) return <p>No loading graph data</p>;
-
- let graph: GraphType | null = null;
- try {
- graph = React.useMemo(() => {
- const graphModel = new GraphModel();
- graphModel.consumeMessageFromBackend(graphQueryResult);
- return graphModel;
- }, [graphQueryResult]);
- } catch (error) {
- return <p>Error creating graph</p>;
- }
-
- return (
- <div className="flex flex-row justify-between overflow-hidden w-screen h-screen font-sans">
- <MapPanel graph={graph} layers={layers} showFilter={showFilter} setShowFilter={setShowFilter}/>
- <LayerPanel layers={layers} setLayers={setLayers} graphInfo={graph.getGraphInfo()} setShowFilter={setShowFilter}/>
- </div>
- );
-}
diff --git a/libs/shared/lib/vis/panel/dialog.tsx b/libs/shared/lib/vis/panel/dialog.tsx
new file mode 100644
index 000000000..f2559879d
--- /dev/null
+++ b/libs/shared/lib/vis/panel/dialog.tsx
@@ -0,0 +1,103 @@
+import React, { useState, useEffect } from 'react';
+import { FormActions, FormBody, FormCard, FormControl, FormDiv, FormHBar, FormTitle } from '@graphpolaris/shared/lib/components/forms';
+import { DialogProps } from '@graphpolaris/shared/lib/components/Dialog';
+import { useAppDispatch, useVisualizationState } from '@graphpolaris/shared/lib/data-access';
+import { updateGeneralSettings, updateVisualizationSettings } from '@graphpolaris/shared/lib/data-access/store/visualizationSlice';
+import Input from '@graphpolaris/shared/lib/components/inputs';
+import { globalConfigSchemaTypes, localConfigSchemaType } from '@graphpolaris/shared/lib/vis/Types';
+
+export default function VisualizationDialog(props: DialogProps) {
+ const dispatch = useAppDispatch();
+ const vis = useVisualizationState();
+ const [settingsGeneral, setSettingsGeneral] = useState<globalConfigSchemaTypes>(vis.settings.general);
+ const [settingsSpecific, setSettingsSpecific] = useState<localConfigSchemaType>(vis.settings[vis.activeVisualization]);
+
+ useEffect(() => {
+ if (vis.settings.general !== settingsGeneral) {
+ dispatch(updateGeneralSettings(settingsGeneral));
+ }
+ }, [settingsGeneral]);
+
+ useEffect(() => {
+ if (vis.settings[vis.activeVisualization] !== settingsSpecific) {
+ dispatch(
+ updateVisualizationSettings({
+ id: vis.activeVisualization,
+ settings: settingsSpecific,
+ })
+ );
+ }
+ }, [settingsSpecific]);
+
+ useEffect(() => {
+ setSettingsSpecific(vis.settings[vis.activeVisualization]);
+ }, [vis.settings[vis.activeVisualization]]);
+
+ return (
+ <>
+ {props.open && (
+ <FormDiv>
+ <FormCard>
+ <FormBody
+ onSubmit={(e) => {
+ e.preventDefault();
+ props.onClose();
+ }}
+ >
+ <FormTitle title="Settings" onClose={props.onClose} />
+ <FormHBar />
+
+ {settingsGeneral && (
+ <>
+ {Object.keys(settingsGeneral).map((val) => (
+ <FormControl key={val}>
+ <Input
+ {...settingsGeneral[val]}
+ value={vis.settings.general[val].value as any}
+ onChange={(value: any) => {
+ setSettingsGeneral((prevSettings) => ({
+ ...prevSettings,
+ [val]: { ...prevSettings[val], value: value },
+ }));
+ }}
+ />
+ </FormControl>
+ ))}
+ </>
+ )}
+
+ {Object.keys(settingsSpecific).length > 0 && (
+ <>
+ <FormHBar />
+ {Object.keys(settingsSpecific).map((val) => {
+ const currentSetting = settingsSpecific[val];
+ const shouldShowSetting = currentSetting.condition ? currentSetting.condition?.(settingsSpecific) : true;
+ return (
+ shouldShowSetting && (
+ <FormControl key={val}>
+ <Input
+ {...settingsSpecific[val]}
+ value={settingsSpecific[val]?.value as any}
+ onChange={(value: any) => {
+ setSettingsSpecific((prevSettings) => ({
+ ...prevSettings,
+ [val]: { ...prevSettings[val], value: value },
+ }));
+ }}
+ />
+ </FormControl>
+ )
+ );
+ })}
+ </>
+ )}
+
+ <FormHBar />
+ <FormActions onClose={props.onClose} />
+ </FormBody>
+ </FormCard>
+ </FormDiv>
+ )}
+ </>
+ );
+}
diff --git a/libs/shared/lib/vis/panel/index.ts b/libs/shared/lib/vis/panel/index.ts
new file mode 100644
index 000000000..676d86491
--- /dev/null
+++ b/libs/shared/lib/vis/panel/index.ts
@@ -0,0 +1 @@
+export * from './visualization';
diff --git a/libs/shared/lib/vis/panel/visualization.tsx b/libs/shared/lib/vis/panel/visualization.tsx
new file mode 100644
index 000000000..6457f891e
--- /dev/null
+++ b/libs/shared/lib/vis/panel/visualization.tsx
@@ -0,0 +1,77 @@
+import React, { useState } from 'react';
+import { useAppDispatch, useGraphQueryResult, useQuerybuilderGraph, useVisualizationState } from '@graphpolaris/shared/lib/data-access';
+import { LoadingSpinner } from '@graphpolaris/shared/lib/components/LoadingSpinner';
+import { Visualizations, setActiveVisualization } from '@graphpolaris/shared/lib/data-access/store/visualizationSlice';
+import { DropdownItem, DropdownItemContainer } from '@graphpolaris/shared/lib/components/dropdowns';
+import ControlContainer from '@graphpolaris/shared/lib/components/controls';
+import { Button } from '@graphpolaris/shared/lib/components/buttons';
+import { createVisualizationComponent } from '../';
+import VisualizationDialog from './dialog';
+
+export const VisualizationPanel = () => {
+ const vis = useVisualizationState();
+ const graphQueryResult = useGraphQueryResult();
+ const query = useQuerybuilderGraph();
+ const dispatch = useAppDispatch();
+ const [visDropdownOpen, setVisDropdownOpen] = useState<boolean>(false);
+ const [showVisSettings, setShowVisSettings] = useState<boolean>(false);
+
+ const createVisComponent = createVisualizationComponent();
+ const visualizationInstance = createVisComponent();
+
+ return (
+ <div className="vis-panel h-full w-full overflow-y-auto" style={graphQueryResult.nodes.length === 0 ? { overflow: 'hidden' } : {}}>
+ <VisualizationDialog open={showVisSettings} onClose={() => setShowVisSettings(false)} />
+ <div className="sticky top-0 flex items-center justify-between z-[2] py-0 px-2 bg-secondary-100 border-b border-secondary-200">
+ <h1 className="text-xs font-semibold text-secondary-800">{vis.activeVisualization} visualization</h1>
+ <ControlContainer>
+ <Button
+ type="secondary"
+ variant="ghost"
+ size="xs"
+ iconName="Settings"
+ onClick={() => {
+ setShowVisSettings(!showVisSettings);
+ }}
+ />
+ <Button
+ type="secondary"
+ variant="ghost"
+ size="xs"
+ iconName="Apps"
+ onClick={() => {
+ setVisDropdownOpen(!visDropdownOpen);
+ }}
+ />
+ {visDropdownOpen && (
+ <DropdownItemContainer align="top-6 right-6">
+ {Object.keys(Visualizations).map((key) => (
+ <DropdownItem
+ key={key}
+ value={key}
+ onClick={() => {
+ setVisDropdownOpen(false);
+ dispatch(setActiveVisualization(Visualizations[key as keyof typeof Visualizations]));
+ }}
+ />
+ ))}
+ </DropdownItemContainer>
+ )}
+ </ControlContainer>
+ </div>
+
+ {graphQueryResult.queryingBackend ? (
+ <div className="w-full h-full flex flex-col items-center justify-center overflow-hidden">
+ <LoadingSpinner>Querying backend...</LoadingSpinner>
+ </div>
+ ) : graphQueryResult.nodes.length === 0 ? (
+ <div className="w-full h-full flex flex-col items-center justify-center">
+ <p>No data available to be shown</p>
+ {query.nodes.length > 0 ? <p>Query resulted in empty dataset</p> : <p>Query for data to visualize</p>}
+ </div>
+ ) : (
+ <div className="w-full h-full">{visualizationInstance}</div>
+ )}
+ </div>
+ );
+};
diff --git a/libs/shared/lib/vis/rawjsonvis/rawjsonvis.tsx b/libs/shared/lib/vis/rawjsonvis/rawjsonvis.tsx
deleted file mode 100644
index 51c2ab500..000000000
--- a/libs/shared/lib/vis/rawjsonvis/rawjsonvis.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { useAppDispatch, useGraphQueryResult } from '../../data-access/store';
-import React, { useEffect, useState } from 'react';
-import ReactJSONView from 'react-json-view';
-
-import styles from './rawjsonvis.module.scss';
-
-/* eslint-disable-next-line */
-export interface RawJSONVisProps {
- loading?: boolean;
-}
-
-export const RawJSONVis = React.memo((props: RawJSONVisProps) => {
- const graphQueryResult = useGraphQueryResult();
- const dispatch = useAppDispatch();
- console.log('update rawjson');
-
- useEffect(() => {
- console.log('update rawjson useEffect');
- }, [graphQueryResult]);
-
- useEffect(() => {
- return () => {
- console.log('unloaded RawJSONVis');
- };
- }, []);
-
- const loading = props.loading;
-
- return (
- <div>
- {loading && (
- <div
- style={{
- marginTop: '50px',
- paddingLeft: '30px',
- }}
- >
- <svg className={styles.rotating} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
- <circle className={styles.ring} cx="25" cy="25" r="20"></circle>
- <circle className={styles.ball} cx="25" cy="5" r="3.5"></circle>
- </svg>
- </div>
- )}
- {!loading && (
- <div style={{ overflowY: 'auto' }}>
- <div
- style={{
- marginTop: '50px',
- paddingLeft: '30px',
- }}
- className="font-mono text-sm"
- >
- <ReactJSONView src={graphQueryResult} collapsed={1} quotesOnKeys={false} displayDataTypes={false} />
- </div>
- </div>
- )}
- </div>
- );
-});
-
-RawJSONVis.displayName = 'RawJSONVis';
diff --git a/libs/shared/lib/vis/shared/ResultNodeLinkParserUseCase.tsx b/libs/shared/lib/vis/shared/ResultNodeLinkParserUseCase.tsx
index 22fcd08e2..0154edafb 100644
--- a/libs/shared/lib/vis/shared/ResultNodeLinkParserUseCase.tsx
+++ b/libs/shared/lib/vis/shared/ResultNodeLinkParserUseCase.tsx
@@ -3,7 +3,7 @@
* Utrecht University within the Software Project course.
* © Copyright Utrecht University (Department of Information and Computing Sciences)
*/
-import { GraphType, LinkType, NodeType } from '../nodelink/Types';
+import { GraphType, LinkType, NodeType } from '../visualizations/nodelink/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. */
diff --git a/libs/shared/lib/vis/table_vis/tableVis.tsx b/libs/shared/lib/vis/table_vis/tableVis.tsx
deleted file mode 100644
index b15ade80a..000000000
--- a/libs/shared/lib/vis/table_vis/tableVis.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { useGraphQueryResult, useSchemaGraph } from '../../data-access/store';
-import React, { useMemo, useRef } from 'react';
-import { Table, AugmentedNodeAttributes } from './components/Table';
-import { SchemaAttribute } from '../../schema';
-
-export const TableVis = React.memo(({ showBarplot }: { showBarplot: boolean }) => {
- const ref = useRef<HTMLDivElement>(null);
- const graphQueryResult = useGraphQueryResult();
- const schema = useSchemaGraph();
-
- const attributesArray = useMemo<AugmentedNodeAttributes[]>(
- () =>
- graphQueryResult.nodes.map((node) => {
- const types: SchemaAttribute[] =
- schema.nodes.find((n) => n.key === node.label)?.attributes?.attributes ??
- schema.edges.find((r) => r.key === node.label)?.attributes?.attributes ??
- [];
-
- return {
- attribute: node.attributes,
- type: Object.fromEntries(types.map((t) => [t.name, t.type])),
- };
- }),
- [graphQueryResult.nodes],
- );
-
- return (
- <>
- <div className="h-full w-full" ref={ref}>
- {attributesArray.length > 0 && <Table data={attributesArray} itemsPerPage={10} showBarPlot={showBarplot} />}
- </div>
- </>
- );
-});
-
-TableVis.displayName = 'TableVis';
-
-export default TableVis;
diff --git a/libs/shared/lib/vis/index.ts b/libs/shared/lib/vis/visualizations/index.tsx
similarity index 82%
rename from libs/shared/lib/vis/index.ts
rename to libs/shared/lib/vis/visualizations/index.tsx
index 29b87b7d3..f47266be8 100644
--- a/libs/shared/lib/vis/index.ts
+++ b/libs/shared/lib/vis/visualizations/index.tsx
@@ -3,4 +3,3 @@ export * from './nodelink/nodelinkvis';
export * from './paohvis/paohvis';
export * from './semanticsubstrates/semanticsubstrates';
export * from './table_vis/tableVis';
-// export * from './geovis/NodeLinkMap';
diff --git a/libs/shared/lib/vis/mapvis/README.md b/libs/shared/lib/vis/visualizations/mapvis/README.md
similarity index 100%
rename from libs/shared/lib/vis/mapvis/README.md
rename to libs/shared/lib/vis/visualizations/mapvis/README.md
diff --git a/libs/shared/lib/vis/mapvis/Types.tsx b/libs/shared/lib/vis/visualizations/mapvis/Types.tsx
similarity index 100%
rename from libs/shared/lib/vis/mapvis/Types.tsx
rename to libs/shared/lib/vis/visualizations/mapvis/Types.tsx
diff --git a/libs/shared/lib/vis/mapvis/archive/geovis/NodeLinkMap.tsx b/libs/shared/lib/vis/visualizations/mapvis/archive/geovis/NodeLinkMap.tsx
similarity index 97%
rename from libs/shared/lib/vis/mapvis/archive/geovis/NodeLinkMap.tsx
rename to libs/shared/lib/vis/visualizations/mapvis/archive/geovis/NodeLinkMap.tsx
index 0a791268c..3b0554486 100644
--- a/libs/shared/lib/vis/mapvis/archive/geovis/NodeLinkMap.tsx
+++ b/libs/shared/lib/vis/visualizations/mapvis/archive/geovis/NodeLinkMap.tsx
@@ -5,7 +5,7 @@
*/
import React, { useState } from 'react';
-import { useGraphQueryResult } from '../../../../data-access/store';
+import { useGraphQueryResult } from '../../../../../data-access';
import { MapView, PickingInfo } from '@deck.gl/core/typed';
import DeckGL from '@deck.gl/react/typed';
import { getTooltip } from './Tooltip';
diff --git a/libs/shared/lib/vis/mapvis/archive/geovis/Tooltip.tsx b/libs/shared/lib/vis/visualizations/mapvis/archive/geovis/Tooltip.tsx
similarity index 100%
rename from libs/shared/lib/vis/mapvis/archive/geovis/Tooltip.tsx
rename to libs/shared/lib/vis/visualizations/mapvis/archive/geovis/Tooltip.tsx
diff --git a/libs/shared/lib/vis/mapvis/archive/geovis/archive/NodeLinkViewModel.tsx b/libs/shared/lib/vis/visualizations/mapvis/archive/geovis/archive/NodeLinkViewModel.tsx
similarity index 100%
rename from libs/shared/lib/vis/mapvis/archive/geovis/archive/NodeLinkViewModel.tsx
rename to libs/shared/lib/vis/visualizations/mapvis/archive/geovis/archive/NodeLinkViewModel.tsx
diff --git a/libs/shared/lib/vis/mapvis/archive/geovis/archive/aggregateCommand.tsx b/libs/shared/lib/vis/visualizations/mapvis/archive/geovis/archive/aggregateCommand.tsx
similarity index 100%
rename from libs/shared/lib/vis/mapvis/archive/geovis/archive/aggregateCommand.tsx
rename to libs/shared/lib/vis/visualizations/mapvis/archive/geovis/archive/aggregateCommand.tsx
diff --git a/libs/shared/lib/vis/mapvis/archive/geovis/archive/unfoldingEdges.tsx b/libs/shared/lib/vis/visualizations/mapvis/archive/geovis/archive/unfoldingEdges.tsx
similarity index 100%
rename from libs/shared/lib/vis/mapvis/archive/geovis/archive/unfoldingEdges.tsx
rename to libs/shared/lib/vis/visualizations/mapvis/archive/geovis/archive/unfoldingEdges.tsx
diff --git a/libs/shared/lib/vis/mapvis/archive/geovis/archive/viewModel.tsx b/libs/shared/lib/vis/visualizations/mapvis/archive/geovis/archive/viewModel.tsx
similarity index 100%
rename from libs/shared/lib/vis/mapvis/archive/geovis/archive/viewModel.tsx
rename to libs/shared/lib/vis/visualizations/mapvis/archive/geovis/archive/viewModel.tsx
diff --git a/libs/shared/lib/vis/mapvis/archive/geovis/config.tsx b/libs/shared/lib/vis/visualizations/mapvis/archive/geovis/config.tsx
similarity index 100%
rename from libs/shared/lib/vis/mapvis/archive/geovis/config.tsx
rename to libs/shared/lib/vis/visualizations/mapvis/archive/geovis/config.tsx
diff --git a/libs/shared/lib/vis/mapvis/archive/geovis/core/attributeFaceting.tsx b/libs/shared/lib/vis/visualizations/mapvis/archive/geovis/core/attributeFaceting.tsx
similarity index 100%
rename from libs/shared/lib/vis/mapvis/archive/geovis/core/attributeFaceting.tsx
rename to libs/shared/lib/vis/visualizations/mapvis/archive/geovis/core/attributeFaceting.tsx
diff --git a/libs/shared/lib/vis/mapvis/archive/geovis/core/edge.tsx b/libs/shared/lib/vis/visualizations/mapvis/archive/geovis/core/edge.tsx
similarity index 100%
rename from libs/shared/lib/vis/mapvis/archive/geovis/core/edge.tsx
rename to libs/shared/lib/vis/visualizations/mapvis/archive/geovis/core/edge.tsx
diff --git a/libs/shared/lib/vis/mapvis/archive/geovis/core/graph.tsx b/libs/shared/lib/vis/visualizations/mapvis/archive/geovis/core/graph.tsx
similarity index 100%
rename from libs/shared/lib/vis/mapvis/archive/geovis/core/graph.tsx
rename to libs/shared/lib/vis/visualizations/mapvis/archive/geovis/core/graph.tsx
diff --git a/libs/shared/lib/vis/mapvis/archive/geovis/core/index.tsx b/libs/shared/lib/vis/visualizations/mapvis/archive/geovis/core/index.tsx
similarity index 100%
rename from libs/shared/lib/vis/mapvis/archive/geovis/core/index.tsx
rename to libs/shared/lib/vis/visualizations/mapvis/archive/geovis/core/index.tsx
diff --git a/libs/shared/lib/vis/mapvis/archive/geovis/core/node.tsx b/libs/shared/lib/vis/visualizations/mapvis/archive/geovis/core/node.tsx
similarity index 100%
rename from libs/shared/lib/vis/mapvis/archive/geovis/core/node.tsx
rename to libs/shared/lib/vis/visualizations/mapvis/archive/geovis/core/node.tsx
diff --git a/libs/shared/lib/vis/mapvis/archive/geovis/layers/GeoBaseLayer.tsx b/libs/shared/lib/vis/visualizations/mapvis/archive/geovis/layers/GeoBaseLayer.tsx
similarity index 100%
rename from libs/shared/lib/vis/mapvis/archive/geovis/layers/GeoBaseLayer.tsx
rename to libs/shared/lib/vis/visualizations/mapvis/archive/geovis/layers/GeoBaseLayer.tsx
diff --git a/libs/shared/lib/vis/mapvis/archive/geovis/layers/GeoClusterLayer.tsx b/libs/shared/lib/vis/visualizations/mapvis/archive/geovis/layers/GeoClusterLayer.tsx
similarity index 100%
rename from libs/shared/lib/vis/mapvis/archive/geovis/layers/GeoClusterLayer.tsx
rename to libs/shared/lib/vis/visualizations/mapvis/archive/geovis/layers/GeoClusterLayer.tsx
diff --git a/libs/shared/lib/vis/mapvis/archive/geovis/layers/GeoFacetingLayer.tsx b/libs/shared/lib/vis/visualizations/mapvis/archive/geovis/layers/GeoFacetingLayer.tsx
similarity index 100%
rename from libs/shared/lib/vis/mapvis/archive/geovis/layers/GeoFacetingLayer.tsx
rename to libs/shared/lib/vis/visualizations/mapvis/archive/geovis/layers/GeoFacetingLayer.tsx
diff --git a/libs/shared/lib/vis/mapvis/archive/geovis/layers/GeoNodeLinkLayer.tsx b/libs/shared/lib/vis/visualizations/mapvis/archive/geovis/layers/GeoNodeLinkLayer.tsx
similarity index 100%
rename from libs/shared/lib/vis/mapvis/archive/geovis/layers/GeoNodeLinkLayer.tsx
rename to libs/shared/lib/vis/visualizations/mapvis/archive/geovis/layers/GeoNodeLinkLayer.tsx
diff --git a/libs/shared/lib/vis/mapvis/archive/geovis/layers/index.tsx b/libs/shared/lib/vis/visualizations/mapvis/archive/geovis/layers/index.tsx
similarity index 100%
rename from libs/shared/lib/vis/mapvis/archive/geovis/layers/index.tsx
rename to libs/shared/lib/vis/visualizations/mapvis/archive/geovis/layers/index.tsx
diff --git a/libs/shared/lib/vis/mapvis/archive/geovis/readability.tsx b/libs/shared/lib/vis/visualizations/mapvis/archive/geovis/readability.tsx
similarity index 100%
rename from libs/shared/lib/vis/mapvis/archive/geovis/readability.tsx
rename to libs/shared/lib/vis/visualizations/mapvis/archive/geovis/readability.tsx
diff --git a/libs/shared/lib/vis/mapvis/archive/geovis/types.tsx b/libs/shared/lib/vis/visualizations/mapvis/archive/geovis/types.tsx
similarity index 100%
rename from libs/shared/lib/vis/mapvis/archive/geovis/types.tsx
rename to libs/shared/lib/vis/visualizations/mapvis/archive/geovis/types.tsx
diff --git a/libs/shared/lib/vis/mapvis/archive/geovis/utils.tsx b/libs/shared/lib/vis/visualizations/mapvis/archive/geovis/utils.tsx
similarity index 100%
rename from libs/shared/lib/vis/mapvis/archive/geovis/utils.tsx
rename to libs/shared/lib/vis/visualizations/mapvis/archive/geovis/utils.tsx
diff --git a/libs/shared/lib/vis/mapvis/components/BaseMap.tsx b/libs/shared/lib/vis/visualizations/mapvis/components/BaseMap.tsx
similarity index 100%
rename from libs/shared/lib/vis/mapvis/components/BaseMap.tsx
rename to libs/shared/lib/vis/visualizations/mapvis/components/BaseMap.tsx
diff --git a/libs/shared/lib/vis/mapvis/components/FilterMenu.tsx b/libs/shared/lib/vis/visualizations/mapvis/components/FilterMenu.tsx
similarity index 100%
rename from libs/shared/lib/vis/mapvis/components/FilterMenu.tsx
rename to libs/shared/lib/vis/visualizations/mapvis/components/FilterMenu.tsx
diff --git a/libs/shared/lib/vis/mapvis/components/LayerPanel.tsx b/libs/shared/lib/vis/visualizations/mapvis/components/LayerPanel.tsx
similarity index 100%
rename from libs/shared/lib/vis/mapvis/components/LayerPanel.tsx
rename to libs/shared/lib/vis/visualizations/mapvis/components/LayerPanel.tsx
diff --git a/libs/shared/lib/vis/mapvis/components/MapPanel.tsx b/libs/shared/lib/vis/visualizations/mapvis/components/MapPanel.tsx
similarity index 100%
rename from libs/shared/lib/vis/mapvis/components/MapPanel.tsx
rename to libs/shared/lib/vis/visualizations/mapvis/components/MapPanel.tsx
diff --git a/libs/shared/lib/vis/mapvis/components/SecondaryMenu.tsx b/libs/shared/lib/vis/visualizations/mapvis/components/SecondaryMenu.tsx
similarity index 100%
rename from libs/shared/lib/vis/mapvis/components/SecondaryMenu.tsx
rename to libs/shared/lib/vis/visualizations/mapvis/components/SecondaryMenu.tsx
diff --git a/libs/shared/lib/vis/mapvis/components/SelectedMenu.tsx b/libs/shared/lib/vis/visualizations/mapvis/components/SelectedMenu.tsx
similarity index 100%
rename from libs/shared/lib/vis/mapvis/components/SelectedMenu.tsx
rename to libs/shared/lib/vis/visualizations/mapvis/components/SelectedMenu.tsx
diff --git a/libs/shared/lib/vis/mapvis/components/index.tsx b/libs/shared/lib/vis/visualizations/mapvis/components/index.tsx
similarity index 100%
rename from libs/shared/lib/vis/mapvis/components/index.tsx
rename to libs/shared/lib/vis/visualizations/mapvis/components/index.tsx
diff --git a/libs/shared/lib/vis/mapvis/graphModel.tsx b/libs/shared/lib/vis/visualizations/mapvis/graphModel.tsx
similarity index 100%
rename from libs/shared/lib/vis/mapvis/graphModel.tsx
rename to libs/shared/lib/vis/visualizations/mapvis/graphModel.tsx
diff --git a/libs/shared/lib/vis/mapvis/layers/choropleth-layer/ChoroplethLayer.tsx b/libs/shared/lib/vis/visualizations/mapvis/layers/choropleth-layer/ChoroplethLayer.tsx
similarity index 99%
rename from libs/shared/lib/vis/mapvis/layers/choropleth-layer/ChoroplethLayer.tsx
rename to libs/shared/lib/vis/visualizations/mapvis/layers/choropleth-layer/ChoroplethLayer.tsx
index a99e8ac79..bd72091c9 100644
--- a/libs/shared/lib/vis/mapvis/layers/choropleth-layer/ChoroplethLayer.tsx
+++ b/libs/shared/lib/vis/visualizations/mapvis/layers/choropleth-layer/ChoroplethLayer.tsx
@@ -4,7 +4,7 @@ import { ArcLayer, GeoJsonLayer, ScatterplotLayer } from '@deck.gl/layers/typed'
import { getDistance } from '../../utlis';
import * as d3 from 'd3';
import ChoroplethOptions from './ChoroplethOptions';
-import { europeData, usaData, worldData, netherlands } from '../../../../mock-data/geo-json';
+import { europeData, usaData, worldData, netherlands } from '../../../../../mock-data/geo-json';
import { Edge, Node, LayerProps, GeoJSONData } from '../../Types';
export const circumferencesMap = {
diff --git a/libs/shared/lib/vis/mapvis/layers/choropleth-layer/ChoroplethOptions.tsx b/libs/shared/lib/vis/visualizations/mapvis/layers/choropleth-layer/ChoroplethOptions.tsx
similarity index 100%
rename from libs/shared/lib/vis/mapvis/layers/choropleth-layer/ChoroplethOptions.tsx
rename to libs/shared/lib/vis/visualizations/mapvis/layers/choropleth-layer/ChoroplethOptions.tsx
diff --git a/libs/shared/lib/vis/mapvis/layers/edge-arc-layer/ArcLayerOptions.tsx b/libs/shared/lib/vis/visualizations/mapvis/layers/edge-arc-layer/ArcLayerOptions.tsx
similarity index 100%
rename from libs/shared/lib/vis/mapvis/layers/edge-arc-layer/ArcLayerOptions.tsx
rename to libs/shared/lib/vis/visualizations/mapvis/layers/edge-arc-layer/ArcLayerOptions.tsx
diff --git a/libs/shared/lib/vis/mapvis/layers/edge-arc-layer/EdgeArcLayer.tsx b/libs/shared/lib/vis/visualizations/mapvis/layers/edge-arc-layer/EdgeArcLayer.tsx
similarity index 100%
rename from libs/shared/lib/vis/mapvis/layers/edge-arc-layer/EdgeArcLayer.tsx
rename to libs/shared/lib/vis/visualizations/mapvis/layers/edge-arc-layer/EdgeArcLayer.tsx
diff --git a/libs/shared/lib/vis/mapvis/layers/edge-layer/EdgeLayer.tsx b/libs/shared/lib/vis/visualizations/mapvis/layers/edge-layer/EdgeLayer.tsx
similarity index 100%
rename from libs/shared/lib/vis/mapvis/layers/edge-layer/EdgeLayer.tsx
rename to libs/shared/lib/vis/visualizations/mapvis/layers/edge-layer/EdgeLayer.tsx
diff --git a/libs/shared/lib/vis/mapvis/layers/edge-layer/EdgeOptions.tsx b/libs/shared/lib/vis/visualizations/mapvis/layers/edge-layer/EdgeOptions.tsx
similarity index 100%
rename from libs/shared/lib/vis/mapvis/layers/edge-layer/EdgeOptions.tsx
rename to libs/shared/lib/vis/visualizations/mapvis/layers/edge-layer/EdgeOptions.tsx
diff --git a/libs/shared/lib/vis/mapvis/layers/heatmap-layer/HeatLayer.tsx b/libs/shared/lib/vis/visualizations/mapvis/layers/heatmap-layer/HeatLayer.tsx
similarity index 100%
rename from libs/shared/lib/vis/mapvis/layers/heatmap-layer/HeatLayer.tsx
rename to libs/shared/lib/vis/visualizations/mapvis/layers/heatmap-layer/HeatLayer.tsx
diff --git a/libs/shared/lib/vis/mapvis/layers/heatmap-layer/HeatLayerOptions.tsx b/libs/shared/lib/vis/visualizations/mapvis/layers/heatmap-layer/HeatLayerOptions.tsx
similarity index 100%
rename from libs/shared/lib/vis/mapvis/layers/heatmap-layer/HeatLayerOptions.tsx
rename to libs/shared/lib/vis/visualizations/mapvis/layers/heatmap-layer/HeatLayerOptions.tsx
diff --git a/libs/shared/lib/vis/mapvis/layers/icon-layer/IconLayer.tsx b/libs/shared/lib/vis/visualizations/mapvis/layers/icon-layer/IconLayer.tsx
similarity index 100%
rename from libs/shared/lib/vis/mapvis/layers/icon-layer/IconLayer.tsx
rename to libs/shared/lib/vis/visualizations/mapvis/layers/icon-layer/IconLayer.tsx
diff --git a/libs/shared/lib/vis/mapvis/layers/icon-layer/IconOptions.tsx b/libs/shared/lib/vis/visualizations/mapvis/layers/icon-layer/IconOptions.tsx
similarity index 100%
rename from libs/shared/lib/vis/mapvis/layers/icon-layer/IconOptions.tsx
rename to libs/shared/lib/vis/visualizations/mapvis/layers/icon-layer/IconOptions.tsx
diff --git a/libs/shared/lib/vis/mapvis/layers/index.tsx b/libs/shared/lib/vis/visualizations/mapvis/layers/index.tsx
similarity index 100%
rename from libs/shared/lib/vis/mapvis/layers/index.tsx
rename to libs/shared/lib/vis/visualizations/mapvis/layers/index.tsx
diff --git a/libs/shared/lib/vis/mapvis/layers/node-layer/NodeLayer.tsx b/libs/shared/lib/vis/visualizations/mapvis/layers/node-layer/NodeLayer.tsx
similarity index 100%
rename from libs/shared/lib/vis/mapvis/layers/node-layer/NodeLayer.tsx
rename to libs/shared/lib/vis/visualizations/mapvis/layers/node-layer/NodeLayer.tsx
diff --git a/libs/shared/lib/vis/mapvis/layers/node-layer/NodeOptions.tsx b/libs/shared/lib/vis/visualizations/mapvis/layers/node-layer/NodeOptions.tsx
similarity index 100%
rename from libs/shared/lib/vis/mapvis/layers/node-layer/NodeOptions.tsx
rename to libs/shared/lib/vis/visualizations/mapvis/layers/node-layer/NodeOptions.tsx
diff --git a/libs/shared/lib/vis/mapvis/layers/nodelink-layer/NodeLinkLayer.tsx b/libs/shared/lib/vis/visualizations/mapvis/layers/nodelink-layer/NodeLinkLayer.tsx
similarity index 100%
rename from libs/shared/lib/vis/mapvis/layers/nodelink-layer/NodeLinkLayer.tsx
rename to libs/shared/lib/vis/visualizations/mapvis/layers/nodelink-layer/NodeLinkLayer.tsx
diff --git a/libs/shared/lib/vis/mapvis/layers/nodelink-layer/NodeLinkOptions.tsx b/libs/shared/lib/vis/visualizations/mapvis/layers/nodelink-layer/NodeLinkOptions.tsx
similarity index 100%
rename from libs/shared/lib/vis/mapvis/layers/nodelink-layer/NodeLinkOptions.tsx
rename to libs/shared/lib/vis/visualizations/mapvis/layers/nodelink-layer/NodeLinkOptions.tsx
diff --git a/libs/shared/lib/vis/mapvis/layers/nodelink-layer/shapeFactory.tsx b/libs/shared/lib/vis/visualizations/mapvis/layers/nodelink-layer/shapeFactory.tsx
similarity index 100%
rename from libs/shared/lib/vis/mapvis/layers/nodelink-layer/shapeFactory.tsx
rename to libs/shared/lib/vis/visualizations/mapvis/layers/nodelink-layer/shapeFactory.tsx
diff --git a/libs/shared/lib/vis/visualizations/mapvis/mapvis.stories.tsx b/libs/shared/lib/vis/visualizations/mapvis/mapvis.stories.tsx
new file mode 100644
index 000000000..92ebf0d7e
--- /dev/null
+++ b/libs/shared/lib/vis/visualizations/mapvis/mapvis.stories.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { Meta } from '@storybook/react';
+import { VisualizationPanel } from '../../panel/visualization';
+import { Provider } from 'react-redux';
+import { configureStore } from '@reduxjs/toolkit';
+import {
+ assignNewGraphQueryResult,
+ graphQueryResultSlice,
+ querybuilderSlice,
+ schemaSlice,
+ visualizationSlice,
+} from '../../../data-access/store';
+import { mockMobilityQueryResult, bigMockQueryResults } from '../../../mock-data';
+import { Visualizations, setActiveVisualization } from '@graphpolaris/shared/lib/data-access/store/visualizationSlice';
+
+const Component: Meta<typeof VisualizationPanel> = {
+ title: 'Visualizations/MapVis',
+ component: VisualizationPanel,
+ decorators: [
+ (story) => (
+ <Provider store={Mockstore}>
+ <div
+ style={{
+ width: '100%',
+ height: '100vh',
+ }}
+ >
+ {story()}
+ </div>
+ </Provider>
+ ),
+ ],
+};
+
+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(assignNewGraphQueryResult({ queryID: '1', result: { type: 'nodelink', payload: mockMobilityQueryResult } }));
+ // dispatch(setActiveVisualization(Visualizations.MapVis));
+ },
+};
+
+export const AmericanFlights = {
+ play: async () => {
+ const dispatch = Mockstore.dispatch;
+ dispatch(assignNewGraphQueryResult({ queryID: '1', result: { type: 'nodelink', payload: bigMockQueryResults } }));
+ // dispatch(setActiveVisualization(Visualizations.MapVis));
+ },
+};
+
+export default Component;
diff --git a/libs/shared/lib/vis/visualizations/mapvis/mapvis.tsx b/libs/shared/lib/vis/visualizations/mapvis/mapvis.tsx
new file mode 100644
index 000000000..4a49bb17f
--- /dev/null
+++ b/libs/shared/lib/vis/visualizations/mapvis/mapvis.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { MapPanel, LayerPanel } from './components';
+import GraphModel from './graphModel';
+import { GraphType, Layer } from './Types';
+import { VISComponentType, VisualizationPropTypes, localConfigSchemaType } from '../../Types';
+
+export type MapProps = {};
+
+const displayName = 'MapVis';
+
+export default function MapVis({ data, schema, localConfig }: VisualizationPropTypes<typeof displayName>) {
+ const [layers, setLayers] = React.useState<Layer[]>([]);
+ const [showFilter, setShowFilter] = React.useState<boolean>(false);
+
+ let graph: GraphType | null = null;
+ try {
+ graph = React.useMemo(() => {
+ const graphModel = new GraphModel();
+ graphModel.consumeMessageFromBackend(data);
+ return graphModel;
+ }, [data]);
+ } catch (error) {
+ return <p>Error creating graph</p>;
+ }
+
+ return (
+ <div className="flex flex-row justify-between overflow-hidden w-screen h-screen font-sans">
+ <MapPanel graph={graph} layers={layers} showFilter={showFilter} setShowFilter={setShowFilter} />
+ <LayerPanel layers={layers} setLayers={setLayers} graphInfo={graph.getGraphInfo()} setShowFilter={setShowFilter} />
+ </div>
+ );
+}
+
+const localConfigSchema: localConfigSchemaType = {};
+
+export const TableComponent: VISComponentType = {
+ displayName: displayName,
+ VIS: MapVis,
+ localConfigSchema: localConfigSchema,
+};
diff --git a/libs/shared/lib/vis/mapvis/shared/ColorPicker.tsx b/libs/shared/lib/vis/visualizations/mapvis/shared/ColorPicker.tsx
similarity index 100%
rename from libs/shared/lib/vis/mapvis/shared/ColorPicker.tsx
rename to libs/shared/lib/vis/visualizations/mapvis/shared/ColorPicker.tsx
diff --git a/libs/shared/lib/vis/mapvis/utlis.tsx b/libs/shared/lib/vis/visualizations/mapvis/utlis.tsx
similarity index 100%
rename from libs/shared/lib/vis/mapvis/utlis.tsx
rename to libs/shared/lib/vis/visualizations/mapvis/utlis.tsx
diff --git a/libs/shared/lib/vis/nodelink/Types.tsx b/libs/shared/lib/vis/visualizations/nodelink/Types.tsx
similarity index 100%
rename from libs/shared/lib/vis/nodelink/Types.tsx
rename to libs/shared/lib/vis/visualizations/nodelink/Types.tsx
diff --git a/libs/shared/lib/vis/nodelink/components/NLExport.tsx b/libs/shared/lib/vis/visualizations/nodelink/components/NLExport.tsx
similarity index 100%
rename from libs/shared/lib/vis/nodelink/components/NLExport.tsx
rename to libs/shared/lib/vis/visualizations/nodelink/components/NLExport.tsx
diff --git a/libs/shared/lib/vis/nodelink/components/NLForce.tsx b/libs/shared/lib/vis/visualizations/nodelink/components/NLForce.tsx
similarity index 100%
rename from libs/shared/lib/vis/nodelink/components/NLForce.tsx
rename to libs/shared/lib/vis/visualizations/nodelink/components/NLForce.tsx
diff --git a/libs/shared/lib/vis/nodelink/components/NLMachineLearning.tsx b/libs/shared/lib/vis/visualizations/nodelink/components/NLMachineLearning.tsx
similarity index 97%
rename from libs/shared/lib/vis/nodelink/components/NLMachineLearning.tsx
rename to libs/shared/lib/vis/visualizations/nodelink/components/NLMachineLearning.tsx
index f6f46d863..771e88bc6 100644
--- a/libs/shared/lib/vis/nodelink/components/NLMachineLearning.tsx
+++ b/libs/shared/lib/vis/visualizations/nodelink/components/NLMachineLearning.tsx
@@ -1,6 +1,6 @@
import { useState } from 'react';
-import { AttributeData, NodeAttributeData } from '../../shared/InputDataTypes';
-import { AttributeCategory } from '../../shared/Types';
+import { AttributeData, NodeAttributeData } from '../../../shared/InputDataTypes';
+import { AttributeCategory } from '../../../shared/Types';
import { GraphType, LinkType, NodeType } from '../Types';
import { ML } from '@graphpolaris/shared/lib/data-access/store/mlSlice';
diff --git a/libs/shared/lib/vis/nodelink/components/NLPixi.tsx b/libs/shared/lib/vis/visualizations/nodelink/components/NLPixi.tsx
similarity index 100%
rename from libs/shared/lib/vis/nodelink/components/NLPixi.tsx
rename to libs/shared/lib/vis/visualizations/nodelink/components/NLPixi.tsx
diff --git a/libs/shared/lib/vis/nodelink/components/NLPopup.tsx b/libs/shared/lib/vis/visualizations/nodelink/components/NLPopup.tsx
similarity index 100%
rename from libs/shared/lib/vis/nodelink/components/NLPopup.tsx
rename to libs/shared/lib/vis/visualizations/nodelink/components/NLPopup.tsx
diff --git a/libs/shared/lib/vis/nodelink/components/query2NL.tsx b/libs/shared/lib/vis/visualizations/nodelink/components/query2NL.tsx
similarity index 98%
rename from libs/shared/lib/vis/nodelink/components/query2NL.tsx
rename to libs/shared/lib/vis/visualizations/nodelink/components/query2NL.tsx
index 57b39f3ba..4aa527a8d 100644
--- a/libs/shared/lib/vis/nodelink/components/query2NL.tsx
+++ b/libs/shared/lib/vis/visualizations/nodelink/components/query2NL.tsx
@@ -4,8 +4,8 @@
* © Copyright Utrecht University (Department of Information and Computing Sciences)
*/
import { GraphType, LinkType, NodeType } from '../Types';
-import { Edge, Node, GraphQueryResult } from '../../../data-access/store';
-import { ML } from '../../../data-access/store/mlSlice';
+import { Edge, Node, GraphQueryResult } from '../../../../data-access/store';
+import { ML } from '../../../../data-access/store/mlSlice';
import { processML } from './NLMachineLearning';
/** ResultNodeLinkParserUseCase implements methods to parse and translate websocket messages from the backend into a GraphType. */
@@ -281,7 +281,6 @@ export function parseQueryResult(queryResult: GraphQueryResult, ml: ML, options:
// toBeReturned = { ...toBeReturned, ...numberOfClusters };
// }
-
// return toBeReturned;
return processML(ml, toBeReturned);
}
diff --git a/libs/shared/lib/vis/nodelink/components/utils.tsx b/libs/shared/lib/vis/visualizations/nodelink/components/utils.tsx
similarity index 100%
rename from libs/shared/lib/vis/nodelink/components/utils.tsx
rename to libs/shared/lib/vis/visualizations/nodelink/components/utils.tsx
diff --git a/libs/shared/lib/vis/nodelink/nodelinkvis.module.scss b/libs/shared/lib/vis/visualizations/nodelink/nodelinkvis.module.scss
similarity index 100%
rename from libs/shared/lib/vis/nodelink/nodelinkvis.module.scss
rename to libs/shared/lib/vis/visualizations/nodelink/nodelinkvis.module.scss
diff --git a/libs/shared/lib/vis/nodelink/nodelinkvis.module.scss.d.ts b/libs/shared/lib/vis/visualizations/nodelink/nodelinkvis.module.scss.d.ts
similarity index 100%
rename from libs/shared/lib/vis/nodelink/nodelinkvis.module.scss.d.ts
rename to libs/shared/lib/vis/visualizations/nodelink/nodelinkvis.module.scss.d.ts
diff --git a/libs/shared/lib/vis/nodelink/nodelinkvis.stories.tsx b/libs/shared/lib/vis/visualizations/nodelink/nodelinkvis.stories.tsx
similarity index 72%
rename from libs/shared/lib/vis/nodelink/nodelinkvis.stories.tsx
rename to libs/shared/lib/vis/visualizations/nodelink/nodelinkvis.stories.tsx
index 83479342b..ea402d7a4 100644
--- a/libs/shared/lib/vis/nodelink/nodelinkvis.stories.tsx
+++ b/libs/shared/lib/vis/visualizations/nodelink/nodelinkvis.stories.tsx
@@ -1,19 +1,21 @@
import React from 'react';
import { Meta } from '@storybook/react';
-import { NodeLinkVis } from './nodelinkvis';
-
-import { assignNewGraphQueryResult, graphQueryResultSlice, resetGraphQueryResults, store } from '../../data-access/store';
+import { VisualizationPanel } from '../../panel/visualization';
+import {
+ assignNewGraphQueryResult,
+ graphQueryResultSlice,
+ querybuilderSlice,
+ schemaSlice,
+ visualizationSlice,
+} from '../../../data-access/store';
import { configureStore } from '@reduxjs/toolkit';
import { Provider } from 'react-redux';
-import { big2ndChamberQueryResult, smallFlightsQueryResults, mockLargeQueryResults } from '../../mock-data';
+import { big2ndChamberQueryResult, smallFlightsQueryResults, mockLargeQueryResults } from '../../../mock-data';
+import { Visualizations, setActiveVisualization } from '@graphpolaris/shared/lib/data-access/store/visualizationSlice';
-const Component: Meta<typeof NodeLinkVis> = {
- /* 👇 The title prop is optional.
- * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
- * to learn how to generate automatic titles
- */
+const Component: Meta<typeof VisualizationPanel> = {
title: 'Visualizations/NodeLinkVis',
- component: NodeLinkVis,
+ component: VisualizationPanel,
decorators: [
(story) => (
<Provider store={Mockstore}>
@@ -32,17 +34,18 @@ const Component: Meta<typeof NodeLinkVis> = {
const Mockstore = configureStore({
reducer: {
+ schema: schemaSlice.reducer,
graphQueryResult: graphQueryResultSlice.reducer,
+ visualize: visualizationSlice.reducer,
+ querybuilder: querybuilderSlice.reducer,
},
});
export const TestWithData = {
layout: 'fullscreen',
- args: {
- loading: false,
- },
play: async () => {
const dispatch = Mockstore.dispatch;
+
dispatch(
assignNewGraphQueryResult({
queryID: '1',
@@ -58,6 +61,7 @@ export const TestWithData = {
},
})
);
+ dispatch(setActiveVisualization(Visualizations.NodeLink));
},
};
@@ -77,14 +81,15 @@ export const TestWithNoData = {
},
})
);
+ dispatch(setActiveVisualization(Visualizations.NodeLink));
},
};
export const TestWithBig2ndChamber = {
- args: { loading: false },
play: async () => {
const dispatch = Mockstore.dispatch;
dispatch(assignNewGraphQueryResult({ queryID: '1', result: { type: 'nodelink', payload: big2ndChamberQueryResult } }));
+ dispatch(setActiveVisualization(Visualizations.NodeLink));
},
};
@@ -93,6 +98,7 @@ export const TestWithSmallFlights = {
play: async () => {
const dispatch = Mockstore.dispatch;
dispatch(assignNewGraphQueryResult({ queryID: '1', result: { type: 'nodelink', payload: smallFlightsQueryResults } }));
+ dispatch(setActiveVisualization(Visualizations.NodeLink));
},
};
@@ -101,6 +107,7 @@ export const TestWithLargeQueryResult = {
play: async () => {
const dispatch = Mockstore.dispatch;
dispatch(assignNewGraphQueryResult({ queryID: '1', result: { type: 'nodelink', payload: mockLargeQueryResults } }));
+ dispatch(setActiveVisualization(Visualizations.NodeLink));
},
};
diff --git a/libs/shared/lib/vis/nodelink/nodelinkvis.tsx b/libs/shared/lib/vis/visualizations/nodelink/nodelinkvis.tsx
similarity index 84%
rename from libs/shared/lib/vis/nodelink/nodelinkvis.tsx
rename to libs/shared/lib/vis/visualizations/nodelink/nodelinkvis.tsx
index 640c11db9..8bb1eff66 100644
--- a/libs/shared/lib/vis/nodelink/nodelinkvis.tsx
+++ b/libs/shared/lib/vis/visualizations/nodelink/nodelinkvis.tsx
@@ -1,16 +1,13 @@
-import { useAppDispatch, useGraphQueryResult, useML } from '../../data-access/store';
import React, { useEffect, useRef, useState } from 'react';
import * as PIXI from 'pixi.js';
import { GraphType, LinkType, NodeType } from './Types';
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 { ML, setShortestPathSource, setShortestPathTarget } from '../../../data-access/store/mlSlice';
+import { VisualizationPropTypes, VISComponentType } from '../../Types';
-interface Props {
- loading?: boolean;
- // currentColours: any;
-}
+export interface NodeLinkProps {}
/** Return default radius */
function Radius() {
@@ -32,28 +29,26 @@ export interface NodeLinkComponentState {
scalexy: number;
}
-export const NodeLinkVis = React.memo((props: Props) => {
+const displayName = 'NodeLinkVis';
+
+export const NodeLinkVis = React.memo(({ data, ml, dispatch }: VisualizationPropTypes<typeof displayName>) => {
const ref = useRef<HTMLDivElement>(null);
const [graph, setGraph] = useImmer<GraphType | undefined>(undefined);
const [highlightNodes, setHighlightNodes] = useState<NodeType[]>([]);
const [highlightedLinks, setHighlightedLinks] = useState<LinkType[]>([]);
- const graphQueryResult = useGraphQueryResult();
- const ml = useML();
- const dispatch = useAppDispatch();
-
useEffect(() => {
- if (graphQueryResult) {
- console.debug('graphQueryResult', graphQueryResult);
+ if (data) {
+ console.debug('graphQueryResult', data);
setGraph(
- parseQueryResult(graphQueryResult, ml, {
+ parseQueryResult(data, ml, {
defaultX: (ref.current?.clientWidth || 1000) / 2,
defaultY: (ref.current?.clientHeight || 1000) / 2,
- }),
+ })
);
}
- }, [graphQueryResult, ml]);
+ }, [data, ml]);
const onClickedNode = (node: NodeType, ml: ML) => {
console.log('shortestPath', graph, ml.shortestPath.enabled);
@@ -116,6 +111,13 @@ export const NodeLinkVis = React.memo((props: Props) => {
</>
);
});
-NodeLinkVis.displayName = 'NodeLinkVis';
+
+const localConfigSchema = {};
+
+export const NodeLinkComponent: VISComponentType = {
+ displayName: displayName,
+ VIS: NodeLinkVis,
+ localConfigSchema: localConfigSchema,
+};
export default NodeLinkVis;
diff --git a/libs/shared/lib/vis/paohvis/Types.tsx b/libs/shared/lib/vis/visualizations/paohvis/Types.tsx
similarity index 100%
rename from libs/shared/lib/vis/paohvis/Types.tsx
rename to libs/shared/lib/vis/visualizations/paohvis/Types.tsx
diff --git a/libs/shared/lib/vis/paohvis/components/HyperEdgesRange.tsx b/libs/shared/lib/vis/visualizations/paohvis/components/HyperEdgesRange.tsx
similarity index 100%
rename from libs/shared/lib/vis/paohvis/components/HyperEdgesRange.tsx
rename to libs/shared/lib/vis/visualizations/paohvis/components/HyperEdgesRange.tsx
diff --git a/libs/shared/lib/vis/paohvis/components/MakePaohvisMenu.scss b/libs/shared/lib/vis/visualizations/paohvis/components/MakePaohvisMenu.scss
similarity index 100%
rename from libs/shared/lib/vis/paohvis/components/MakePaohvisMenu.scss
rename to libs/shared/lib/vis/visualizations/paohvis/components/MakePaohvisMenu.scss
diff --git a/libs/shared/lib/vis/paohvis/components/MakePaohvisMenu.tsx b/libs/shared/lib/vis/visualizations/paohvis/components/MakePaohvisMenu.tsx
similarity index 99%
rename from libs/shared/lib/vis/paohvis/components/MakePaohvisMenu.tsx
rename to libs/shared/lib/vis/visualizations/paohvis/components/MakePaohvisMenu.tsx
index 049efdee8..0f676c0fa 100644
--- a/libs/shared/lib/vis/paohvis/components/MakePaohvisMenu.tsx
+++ b/libs/shared/lib/vis/visualizations/paohvis/components/MakePaohvisMenu.tsx
@@ -26,9 +26,9 @@ 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 '../../../shared/ResultNodeLinkParserUseCase';
import { select } from 'd3';
-import { Button } from '../../../components/buttons';
+import { Button } from '../../../../components/buttons';
/** The typing for the props of the Paohvis menu */
type MakePaohvisMenuProps = {
@@ -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/paohvis/components/PaohvisFilterComponent.module.scss b/libs/shared/lib/vis/visualizations/paohvis/components/PaohvisFilterComponent.module.scss
similarity index 100%
rename from libs/shared/lib/vis/paohvis/components/PaohvisFilterComponent.module.scss
rename to libs/shared/lib/vis/visualizations/paohvis/components/PaohvisFilterComponent.module.scss
diff --git a/libs/shared/lib/vis/paohvis/components/PaohvisFilterComponent.module.scss.d.ts b/libs/shared/lib/vis/visualizations/paohvis/components/PaohvisFilterComponent.module.scss.d.ts
similarity index 100%
rename from libs/shared/lib/vis/paohvis/components/PaohvisFilterComponent.module.scss.d.ts
rename to libs/shared/lib/vis/visualizations/paohvis/components/PaohvisFilterComponent.module.scss.d.ts
diff --git a/libs/shared/lib/vis/paohvis/components/PaohvisFilterComponent.tsx b/libs/shared/lib/vis/visualizations/paohvis/components/PaohvisFilterComponent.tsx
similarity index 99%
rename from libs/shared/lib/vis/paohvis/components/PaohvisFilterComponent.tsx
rename to libs/shared/lib/vis/visualizations/paohvis/components/PaohvisFilterComponent.tsx
index e64495e53..de4274445 100644
--- a/libs/shared/lib/vis/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 '../../../shared/ResultNodeLinkParserUseCase';
import { calculateAttributesAndRelations, calculateAttributesFromRelation } from '../utils/utils';
import { boolPredicates, numberPredicates, textPredicates } from '../models/FilterPredicates';
import { style } from 'd3';
diff --git a/libs/shared/lib/vis/paohvis/components/RowLabelColumn.tsx b/libs/shared/lib/vis/visualizations/paohvis/components/RowLabelColumn.tsx
similarity index 100%
rename from libs/shared/lib/vis/paohvis/components/RowLabelColumn.tsx
rename to libs/shared/lib/vis/visualizations/paohvis/components/RowLabelColumn.tsx
diff --git a/libs/shared/lib/vis/paohvis/components/Tooltip.scss b/libs/shared/lib/vis/visualizations/paohvis/components/Tooltip.scss
similarity index 100%
rename from libs/shared/lib/vis/paohvis/components/Tooltip.scss
rename to libs/shared/lib/vis/visualizations/paohvis/components/Tooltip.scss
diff --git a/libs/shared/lib/vis/paohvis/components/Tooltip.tsx b/libs/shared/lib/vis/visualizations/paohvis/components/Tooltip.tsx
similarity index 100%
rename from libs/shared/lib/vis/paohvis/components/Tooltip.tsx
rename to libs/shared/lib/vis/visualizations/paohvis/components/Tooltip.tsx
diff --git a/libs/shared/lib/vis/paohvis/models/FilterPredicates.tsx b/libs/shared/lib/vis/visualizations/paohvis/models/FilterPredicates.tsx
similarity index 100%
rename from libs/shared/lib/vis/paohvis/models/FilterPredicates.tsx
rename to libs/shared/lib/vis/visualizations/paohvis/models/FilterPredicates.tsx
diff --git a/libs/shared/lib/vis/paohvis/models/PaohvisHolder.test.tsx b/libs/shared/lib/vis/visualizations/paohvis/models/PaohvisHolder.test.tsx
similarity index 100%
rename from libs/shared/lib/vis/paohvis/models/PaohvisHolder.test.tsx
rename to libs/shared/lib/vis/visualizations/paohvis/models/PaohvisHolder.test.tsx
diff --git a/libs/shared/lib/vis/paohvis/models/PaohvisHolder.tsx b/libs/shared/lib/vis/visualizations/paohvis/models/PaohvisHolder.tsx
similarity index 100%
rename from libs/shared/lib/vis/paohvis/models/PaohvisHolder.tsx
rename to libs/shared/lib/vis/visualizations/paohvis/models/PaohvisHolder.tsx
diff --git a/libs/shared/lib/vis/paohvis/models/PaohvisListener.tsx b/libs/shared/lib/vis/visualizations/paohvis/models/PaohvisListener.tsx
similarity index 100%
rename from libs/shared/lib/vis/paohvis/models/PaohvisListener.tsx
rename to libs/shared/lib/vis/visualizations/paohvis/models/PaohvisListener.tsx
diff --git a/libs/shared/lib/vis/paohvis/paohvis.module.scss b/libs/shared/lib/vis/visualizations/paohvis/paohvis.module.scss
similarity index 100%
rename from libs/shared/lib/vis/paohvis/paohvis.module.scss
rename to libs/shared/lib/vis/visualizations/paohvis/paohvis.module.scss
diff --git a/libs/shared/lib/vis/paohvis/paohvis.module.scss.d.ts b/libs/shared/lib/vis/visualizations/paohvis/paohvis.module.scss.d.ts
similarity index 100%
rename from libs/shared/lib/vis/paohvis/paohvis.module.scss.d.ts
rename to libs/shared/lib/vis/visualizations/paohvis/paohvis.module.scss.d.ts
diff --git a/libs/shared/lib/vis/paohvis/paohvis.stories.tsx b/libs/shared/lib/vis/visualizations/paohvis/paohvis.stories.tsx
similarity index 68%
rename from libs/shared/lib/vis/paohvis/paohvis.stories.tsx
rename to libs/shared/lib/vis/visualizations/paohvis/paohvis.stories.tsx
index e1178e8fa..96dc4eaa8 100644
--- a/libs/shared/lib/vis/paohvis/paohvis.stories.tsx
+++ b/libs/shared/lib/vis/visualizations/paohvis/paohvis.stories.tsx
@@ -1,30 +1,35 @@
-import { assignNewGraphQueryResult, graphQueryResultSlice, schemaSlice, setSchema } from '../../data-access/store';
+import {
+ assignNewGraphQueryResult,
+ graphQueryResultSlice,
+ querybuilderSlice,
+ schemaSlice,
+ setSchema,
+ visualizationSlice,
+} from '../../../data-access/store';
import { configureStore } from '@reduxjs/toolkit';
-import { Meta, ComponentStory } from '@storybook/react';
+import { Meta } from '@storybook/react';
+import { VisualizationPanel } from '../../panel/visualization';
import { Provider } from 'react-redux';
+import { SchemaUtils } from '../../../schema/schema-utils';
+import { bigMockQueryResults, simpleSchemaRaw, smallFlightsQueryResults } from '../../../mock-data';
+import { simpleSchemaAirportRaw } from '../../../mock-data/schema/simpleAirportRaw';
+import { Visualizations, setActiveVisualization } from '@graphpolaris/shared/lib/data-access/store/visualizationSlice';
-import Paohvis from './paohvis';
-import { SchemaUtils } from '../../schema/schema-utils';
-import { bigMockQueryResults, simpleSchemaRaw, smallFlightsQueryResults } from '../../mock-data';
-import { simpleSchemaAirportRaw } from '../../mock-data/schema/simpleAirportRaw';
-
-const Component: Meta<typeof Paohvis> = {
- /* 👇 The title prop is optional.
- * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
- * to learn how to generate automatic titles
- */
+const Component: Meta<typeof VisualizationPanel> = {
title: 'Visualizations/Paohvis',
- component: Paohvis,
+ component: VisualizationPanel,
decorators: [
(story) => (
- <div
- style={{
- width: '83%',
- height: '95vh',
- }}
- >
- <Provider store={Mockstore}>{story()}</Provider>
- </div>
+ <Provider store={Mockstore}>
+ <div
+ style={{
+ width: '100%',
+ height: '100vh',
+ }}
+ >
+ {story()}
+ </div>
+ </Provider>
),
],
};
@@ -33,16 +38,12 @@ const Mockstore = configureStore({
reducer: {
schema: schemaSlice.reducer,
graphQueryResult: graphQueryResultSlice.reducer,
+ visualize: visualizationSlice.reducer,
+ querybuilder: querybuilderSlice.reducer,
},
});
export const TestWithData = {
- args: {
- loading: false,
- rowHeight: 30,
- hyperedgeColumnWidth: 50,
- gapBetweenRanges: 10,
- },
play: async () => {
const dispatch = Mockstore.dispatch;
const schema = SchemaUtils.schemaBackend2Graphology({
@@ -87,38 +88,29 @@ export const TestWithData = {
},
})
);
+ dispatch(setActiveVisualization(Visualizations.Paohvis));
},
};
export const TestWithAirportSimple = {
- args: {
- loading: false,
- rowHeight: 50,
- hyperedgeColumnWidth: 50,
- gapBetweenRanges: 10,
- },
play: async () => {
const dispatch = Mockstore.dispatch;
const schema = SchemaUtils.schemaBackend2Graphology(simpleSchemaRaw);
dispatch(setSchema(schema.export()));
dispatch(assignNewGraphQueryResult({ queryID: '1', result: { type: 'nodelink', payload: smallFlightsQueryResults } }));
+ dispatch(setActiveVisualization(Visualizations.Paohvis));
},
};
export const TestWithAirport = {
- args: {
- loading: false,
- rowHeight: 30,
- hyperedgeColumnWidth: 30,
- gapBetweenRanges: 3,
- },
play: async () => {
const dispatch = Mockstore.dispatch;
const schema = SchemaUtils.schemaBackend2Graphology(simpleSchemaAirportRaw);
dispatch(setSchema(schema.export()));
dispatch(assignNewGraphQueryResult({ queryID: '1', result: { type: 'nodelink', payload: bigMockQueryResults } }));
+ dispatch(setActiveVisualization(Visualizations.Paohvis));
},
};
diff --git a/libs/shared/lib/vis/paohvis/paohvis.tsx b/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx
similarity index 97%
rename from libs/shared/lib/vis/paohvis/paohvis.tsx
rename to libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx
index d3c435dcc..59c6653b6 100644
--- a/libs/shared/lib/vis/paohvis/paohvis.tsx
+++ b/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx
@@ -15,11 +15,11 @@ import {
} from './Types';
import { useImmer } from 'use-immer';
-import { getWidthOfText } from '../../schema/schema-utils';
-import { useGraphQueryResult, useSchemaGraph } from '../../data-access';
-import { isNodeLinkResult } from '../shared/ResultNodeLinkParserUseCase';
+import { getWidthOfText } from '../../../schema/schema-utils';
+import { useGraphQueryResult, useSchemaGraph } from '../../../data-access';
+import { isNodeLinkResult } from '../../shared/ResultNodeLinkParserUseCase';
import { calculateAttributesAndRelations, calculateAttributesFromRelation } from './utils/utils';
-import VisConfigPanelComponent from '../shared/VisConfigPanel/VisConfigPanel';
+import VisConfigPanelComponent from '../../shared/VisConfigPanel/VisConfigPanel';
import { PaohvisFilterComponent } from './components/PaohvisFilterComponent';
import Tooltip from './components/Tooltip';
import { pointer, select, selectAll } from 'd3';
@@ -27,6 +27,7 @@ import { HyperEdgeRange } from './components/HyperEdgesRange';
import ToPaohvisDataParserUseCase from './utils/ToPaohvisDataParserUsecase';
import MakePaohvisMenu from './components/MakePaohvisMenu';
import { RowLabelColumn } from './components/RowLabelColumn';
+import { VISComponentType } from '../../Types';
type PaohvisViewModelState = {
rowHeight: number;
@@ -55,14 +56,14 @@ type PaohvisViewModelState = {
};
};
-type Props = {
+export type PaohVisProps = {
rowHeight: number;
hyperedgeColumnWidth: number;
gapBetweenRanges: number;
data?: PaohvisData;
};
-export const PaohVis = (props: Props) => {
+export const PaohVis = (props: PaohVisProps) => {
const svgRef = useRef<SVGSVGElement>(null);
const graphQueryResult = useGraphQueryResult();
const schema = useSchemaGraph();
@@ -637,4 +638,12 @@ export const PaohVis = (props: Props) => {
);
};
+const localConfigSchema = {};
+
+export const PaohVisComponent: VISComponentType = {
+ displayName: 'PaohVis',
+ VIS: PaohVis,
+ localConfigSchema: localConfigSchema,
+};
+
export default PaohVis;
diff --git a/libs/shared/lib/vis/paohvis/utils/AttributesFilterUseCase.tsx b/libs/shared/lib/vis/visualizations/paohvis/utils/AttributesFilterUseCase.tsx
similarity index 98%
rename from libs/shared/lib/vis/paohvis/utils/AttributesFilterUseCase.tsx
rename to libs/shared/lib/vis/visualizations/paohvis/utils/AttributesFilterUseCase.tsx
index 07f5fae8b..685d7d259 100644
--- a/libs/shared/lib/vis/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 '../../../shared/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/paohvis/utils/CalcEntitiesFromQueryResult.tsx b/libs/shared/lib/vis/visualizations/paohvis/utils/CalcEntitiesFromQueryResult.tsx
similarity index 92%
rename from libs/shared/lib/vis/paohvis/utils/CalcEntitiesFromQueryResult.tsx
rename to libs/shared/lib/vis/visualizations/paohvis/utils/CalcEntitiesFromQueryResult.tsx
index b9a274bd9..c6988eab4 100644
--- a/libs/shared/lib/vis/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 '../../../shared/ResultNodeLinkParserUseCase';
/**
* This calculates all entities from the query result.
diff --git a/libs/shared/lib/vis/paohvis/utils/CalcEntityAttrAndRelNamesFromSchemaUseCase.tsx b/libs/shared/lib/vis/visualizations/paohvis/utils/CalcEntityAttrAndRelNamesFromSchemaUseCase.tsx
similarity index 100%
rename from libs/shared/lib/vis/paohvis/utils/CalcEntityAttrAndRelNamesFromSchemaUseCase.tsx
rename to libs/shared/lib/vis/visualizations/paohvis/utils/CalcEntityAttrAndRelNamesFromSchemaUseCase.tsx
diff --git a/libs/shared/lib/vis/paohvis/utils/SortUseCase.tsx b/libs/shared/lib/vis/visualizations/paohvis/utils/SortUseCase.tsx
similarity index 100%
rename from libs/shared/lib/vis/paohvis/utils/SortUseCase.tsx
rename to libs/shared/lib/vis/visualizations/paohvis/utils/SortUseCase.tsx
diff --git a/libs/shared/lib/vis/paohvis/utils/ToPaohvisDataParserUsecase.tsx b/libs/shared/lib/vis/visualizations/paohvis/utils/ToPaohvisDataParserUsecase.tsx
similarity index 99%
rename from libs/shared/lib/vis/paohvis/utils/ToPaohvisDataParserUsecase.tsx
rename to libs/shared/lib/vis/visualizations/paohvis/utils/ToPaohvisDataParserUsecase.tsx
index de75b4d88..63d130302 100644
--- a/libs/shared/lib/vis/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 '../../../shared/ResultNodeLinkParserUseCase';
import { Edge, GraphQueryResult, Node } from '@graphpolaris/shared/lib/data-access';
import {
diff --git a/libs/shared/lib/vis/paohvis/utils/utils.tsx b/libs/shared/lib/vis/visualizations/paohvis/utils/utils.tsx
similarity index 99%
rename from libs/shared/lib/vis/paohvis/utils/utils.tsx
rename to libs/shared/lib/vis/visualizations/paohvis/utils/utils.tsx
index 0d41d4617..669494fe1 100644
--- a/libs/shared/lib/vis/paohvis/utils/utils.tsx
+++ b/libs/shared/lib/vis/visualizations/paohvis/utils/utils.tsx
@@ -1,5 +1,5 @@
import { log } from 'console';
-import { SchemaAttribute, SchemaGraph, SchemaGraphologyEdge, SchemaGraphologyNode } from '../../../schema';
+import { SchemaAttribute, SchemaGraph, SchemaGraphologyEdge, SchemaGraphologyNode } from '../../../../schema';
import { AttributeNames, EntitiesFromSchema, RelationsFromSchema } from '../Types';
/**
diff --git a/libs/shared/lib/vis/rawjsonvis/index.ts b/libs/shared/lib/vis/visualizations/rawjsonvis/index.ts
similarity index 100%
rename from libs/shared/lib/vis/rawjsonvis/index.ts
rename to libs/shared/lib/vis/visualizations/rawjsonvis/index.ts
diff --git a/libs/shared/lib/vis/rawjsonvis/rawjsonvis.module.scss b/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.module.scss
similarity index 100%
rename from libs/shared/lib/vis/rawjsonvis/rawjsonvis.module.scss
rename to libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.module.scss
diff --git a/libs/shared/lib/vis/rawjsonvis/rawjsonvis.module.scss.d.ts b/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.module.scss.d.ts
similarity index 100%
rename from libs/shared/lib/vis/rawjsonvis/rawjsonvis.module.scss.d.ts
rename to libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.module.scss.d.ts
diff --git a/libs/shared/lib/vis/rawjsonvis/rawjsonvis.spec.tsx b/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.spec.tsx
similarity index 100%
rename from libs/shared/lib/vis/rawjsonvis/rawjsonvis.spec.tsx
rename to libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.spec.tsx
diff --git a/libs/shared/lib/vis/rawjsonvis/rawjsonvis.stories.tsx b/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.stories.tsx
similarity index 52%
rename from libs/shared/lib/vis/rawjsonvis/rawjsonvis.stories.tsx
rename to libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.stories.tsx
index ec51b4483..cdcef1260 100644
--- a/libs/shared/lib/vis/rawjsonvis/rawjsonvis.stories.tsx
+++ b/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.stories.tsx
@@ -1,32 +1,49 @@
import React from 'react';
-import { ComponentStory, Meta } from '@storybook/react';
-import { RawJSONVis } from './rawjsonvis';
-
-import { assignNewGraphQueryResult, graphQueryResultSlice, resetGraphQueryResults, store } from '../../data-access/store';
+import { Meta } from '@storybook/react';
+import { VisualizationPanel } from '../../panel/visualization';
+import {
+ assignNewGraphQueryResult,
+ graphQueryResultSlice,
+ querybuilderSlice,
+ resetGraphQueryResults,
+ schemaSlice,
+ store,
+ visualizationSlice,
+} from '../../../data-access/store';
import { configureStore } from '@reduxjs/toolkit';
import { Provider } from 'react-redux';
-import { mockLargeQueryResults } from '../../mock-data/query-result';
+import { mockLargeQueryResults } from '../../../mock-data/query-result';
+import { Visualizations, setActiveVisualization } from '@graphpolaris/shared/lib/data-access/store/visualizationSlice';
-const Component: Meta<typeof RawJSONVis> = {
- /* 👇 The title prop is optional.
- * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
- * to learn how to generate automatic titles
- */
+const Component: Meta<typeof VisualizationPanel> = {
title: 'Visualizations/RawJSONVIS',
- component: RawJSONVis,
- decorators: [(story) => <Provider store={Mockstore}>{story()}</Provider>],
+ component: VisualizationPanel,
+ decorators: [
+ (story) => (
+ <Provider store={Mockstore}>
+ <div
+ style={{
+ width: '100%',
+ height: '100vh',
+ }}
+ >
+ {story()}
+ </div>
+ </Provider>
+ ),
+ ],
};
const Mockstore = configureStore({
reducer: {
+ schema: schemaSlice.reducer,
graphQueryResult: graphQueryResultSlice.reducer,
+ visualize: visualizationSlice.reducer,
+ querybuilder: querybuilderSlice.reducer,
},
});
export const SimpleData = {
- args: {
- loading: false,
- },
play: async () => {
const dispatch = Mockstore.dispatch;
dispatch(
@@ -44,6 +61,7 @@ export const SimpleData = {
},
})
);
+ dispatch(setActiveVisualization(Visualizations.RawJSON));
},
};
@@ -62,22 +80,15 @@ export const LargeData = {
},
})
);
- },
-};
-
-export const Loading = {
- args: {
- loading: true,
+ dispatch(setActiveVisualization(Visualizations.RawJSON));
},
};
export const Empty = {
- args: {
- loading: false,
- },
play: async () => {
const dispatch = store.dispatch;
dispatch(resetGraphQueryResults());
+ dispatch(setActiveVisualization(Visualizations.RawJSON));
},
};
diff --git a/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.tsx b/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.tsx
new file mode 100644
index 000000000..3bfc68c49
--- /dev/null
+++ b/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.tsx
@@ -0,0 +1,37 @@
+import React, { useEffect } from 'react';
+import ReactJSONView from 'react-json-view';
+import { VisualizationPropTypes, VISComponentType } from '../../Types';
+
+export interface RawJSONVisProps {}
+
+const displayName = 'RawJSONVis';
+
+export const RawJSONVis = React.memo(({ data }: VisualizationPropTypes<typeof displayName>) => {
+ useEffect(() => {
+ console.log('update rawjson useEffect');
+ }, [data]);
+
+ return (
+ <div>
+ <div style={{ overflowY: 'auto' }}>
+ <div
+ style={{
+ marginTop: '50px',
+ paddingLeft: '30px',
+ }}
+ className="font-mono text-sm"
+ >
+ <ReactJSONView src={data} collapsed={1} quotesOnKeys={false} displayDataTypes={false} />
+ </div>
+ </div>
+ </div>
+ );
+});
+
+const localConfigSchema = {};
+
+export const RawJSONComponent: VISComponentType = {
+ displayName: displayName,
+ VIS: RawJSONVis,
+ localConfigSchema: localConfigSchema,
+};
diff --git a/libs/shared/lib/vis/semanticsubstrates/Types.tsx b/libs/shared/lib/vis/visualizations/semanticsubstrates/Types.tsx
similarity index 100%
rename from libs/shared/lib/vis/semanticsubstrates/Types.tsx
rename to libs/shared/lib/vis/visualizations/semanticsubstrates/Types.tsx
diff --git a/libs/shared/lib/vis/semanticsubstrates/configpanel/SemanticSubstrateConfigPanel.tsx b/libs/shared/lib/vis/visualizations/semanticsubstrates/configpanel/SemanticSubstrateConfigPanel.tsx
similarity index 100%
rename from libs/shared/lib/vis/semanticsubstrates/configpanel/SemanticSubstrateConfigPanel.tsx
rename to libs/shared/lib/vis/visualizations/semanticsubstrates/configpanel/SemanticSubstrateConfigPanel.tsx
diff --git a/libs/shared/lib/vis/semanticsubstrates/configpanel/SemanticSubstratesConfigPanelViewModel.t b/libs/shared/lib/vis/visualizations/semanticsubstrates/configpanel/SemanticSubstratesConfigPanelViewModel.t
similarity index 98%
rename from libs/shared/lib/vis/semanticsubstrates/configpanel/SemanticSubstratesConfigPanelViewModel.t
rename to libs/shared/lib/vis/visualizations/semanticsubstrates/configpanel/SemanticSubstratesConfigPanelViewModel.t
index 3075b2e5b..3cf928252 100644
--- a/libs/shared/lib/vis/semanticsubstrates/configpanel/SemanticSubstratesConfigPanelViewModel.t
+++ b/libs/shared/lib/vis/visualizations/semanticsubstrates/configpanel/SemanticSubstratesConfigPanelViewModel.t
@@ -1,7 +1,7 @@
import SemanticSubstratesConfigPanelViewModelImpl from './SemanticSubstratesConfigPanelViewModel';
import SemanticSubstratesViewModelImpl from '../SemanticSubstratesViewModel';
-import big2ndChamberQueryResult from '../../../../data/mock-data/query-result/big2ndChamberQueryResult';
-import smallFlightsQueryResults from '../../../../data/mock-data/query-result/smallFlightsQueryResults';
+import big2ndChamberQueryResult from '../../../../../data/mock-data/query-result/big2ndChamberQueryResult';
+import smallFlightsQueryResults from '../../../../../data/mock-data/query-result/smallFlightsQueryResults';
jest.mock('../../../view/result-visualisations/semantic-substrates/SemanticSubstratesStylesheet');
diff --git a/libs/shared/lib/vis/semanticsubstrates/configpanel/SemanticSubstratesConfigPanelViewModel.tsx b/libs/shared/lib/vis/visualizations/semanticsubstrates/configpanel/SemanticSubstratesConfigPanelViewModel.tsx
similarity index 100%
rename from libs/shared/lib/vis/semanticsubstrates/configpanel/SemanticSubstratesConfigPanelViewModel.tsx
rename to libs/shared/lib/vis/visualizations/semanticsubstrates/configpanel/SemanticSubstratesConfigPanelViewModel.tsx
diff --git a/libs/shared/lib/vis/semanticsubstrates/configpanel/Types.tsx b/libs/shared/lib/vis/visualizations/semanticsubstrates/configpanel/Types.tsx
similarity index 100%
rename from libs/shared/lib/vis/semanticsubstrates/configpanel/Types.tsx
rename to libs/shared/lib/vis/visualizations/semanticsubstrates/configpanel/Types.tsx
diff --git a/libs/shared/lib/vis/semanticsubstrates/index.ts b/libs/shared/lib/vis/visualizations/semanticsubstrates/index.ts
similarity index 100%
rename from libs/shared/lib/vis/semanticsubstrates/index.ts
rename to libs/shared/lib/vis/visualizations/semanticsubstrates/index.ts
diff --git a/libs/shared/lib/vis/semanticsubstrates/semanticsubstrates.module.scss b/libs/shared/lib/vis/visualizations/semanticsubstrates/semanticsubstrates.module.scss
similarity index 100%
rename from libs/shared/lib/vis/semanticsubstrates/semanticsubstrates.module.scss
rename to libs/shared/lib/vis/visualizations/semanticsubstrates/semanticsubstrates.module.scss
diff --git a/libs/shared/lib/vis/semanticsubstrates/semanticsubstrates.module.scss.d.ts b/libs/shared/lib/vis/visualizations/semanticsubstrates/semanticsubstrates.module.scss.d.ts
similarity index 100%
rename from libs/shared/lib/vis/semanticsubstrates/semanticsubstrates.module.scss.d.ts
rename to libs/shared/lib/vis/visualizations/semanticsubstrates/semanticsubstrates.module.scss.d.ts
diff --git a/libs/shared/lib/vis/semanticsubstrates/semanticsubstrates.stories.tsx b/libs/shared/lib/vis/visualizations/semanticsubstrates/semanticsubstrates.stories.tsx
similarity index 70%
rename from libs/shared/lib/vis/semanticsubstrates/semanticsubstrates.stories.tsx
rename to libs/shared/lib/vis/visualizations/semanticsubstrates/semanticsubstrates.stories.tsx
index 7e1351364..5d4f31bda 100644
--- a/libs/shared/lib/vis/semanticsubstrates/semanticsubstrates.stories.tsx
+++ b/libs/shared/lib/vis/visualizations/semanticsubstrates/semanticsubstrates.stories.tsx
@@ -1,20 +1,23 @@
-import { assignNewGraphQueryResult, graphQueryResultSlice, schemaSlice, setSchema } from '../../data-access/store';
+import {
+ assignNewGraphQueryResult,
+ graphQueryResultSlice,
+ querybuilderSlice,
+ schemaSlice,
+ setSchema,
+ visualizationSlice,
+} from '../../../data-access/store';
import { configureStore } from '@reduxjs/toolkit';
import { Meta } from '@storybook/react';
import { Provider } from 'react-redux';
+import { VisualizationPanel } from '../../panel/visualization';
+import { SchemaUtils } from '../../../schema/schema-utils';
+import { simpleSchemaAirportRaw } from '../../../mock-data/schema/simpleAirportRaw';
+import { bigMockQueryResults } from '../../../mock-data';
+import { Visualizations, setActiveVisualization } from '@graphpolaris/shared/lib/data-access/store/visualizationSlice';
-import SemanticSubstrates from './semanticsubstrates';
-import { SchemaUtils } from '../../schema/schema-utils';
-import { simpleSchemaAirportRaw } from '../../mock-data/schema/simpleAirportRaw';
-import { bigMockQueryResults } from '../../mock-data';
-
-const Component: Meta<typeof SemanticSubstrates> = {
- /* 👇 The title prop is optional.
- * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
- * to learn how to generate automatic titles
- */
+const Component: Meta<typeof VisualizationPanel> = {
title: 'Visualizations/SemanticSubstrates',
- component: SemanticSubstrates,
+ component: VisualizationPanel,
decorators: [(story) => <Provider store={Mockstore}>{story()}</Provider>],
};
@@ -22,13 +25,12 @@ const Mockstore = configureStore({
reducer: {
schema: schemaSlice.reducer,
graphQueryResult: graphQueryResultSlice.reducer,
+ visualize: visualizationSlice.reducer,
+ querybuilder: querybuilderSlice.reducer,
},
});
export const TestWithData = {
- args: {
- loading: false,
- },
play: async () => {
const dispatch = Mockstore.dispatch;
const schema = SchemaUtils.schemaBackend2Graphology({
@@ -73,16 +75,11 @@ export const TestWithData = {
},
})
);
+ // dispatch(setActiveVisualization(Visualizations.SemanticSubstrates));
},
};
export const TestWithAirport = {
- args: {
- loading: false,
- rowHeight: 30,
- hyperedgeColumnWidth: 30,
- gapBetweenRanges: 3,
- },
play: async () => {
const dispatch = Mockstore.dispatch;
const schema = SchemaUtils.schemaBackend2Graphology(simpleSchemaAirportRaw);
@@ -94,6 +91,7 @@ export const TestWithAirport = {
result: { type: 'nodelink', payload: bigMockQueryResults },
})
);
+ // dispatch(setActiveVisualization(Visualizations.SemanticSubstrates));
},
};
diff --git a/libs/shared/lib/vis/semanticsubstrates/semanticsubstrates.tsx b/libs/shared/lib/vis/visualizations/semanticsubstrates/semanticsubstrates.tsx
similarity index 98%
rename from libs/shared/lib/vis/semanticsubstrates/semanticsubstrates.tsx
rename to libs/shared/lib/vis/visualizations/semanticsubstrates/semanticsubstrates.tsx
index 3cf14ed04..5fd46c775 100644
--- a/libs/shared/lib/vis/semanticsubstrates/semanticsubstrates.tsx
+++ b/libs/shared/lib/vis/visualizations/semanticsubstrates/semanticsubstrates.tsx
@@ -1,12 +1,12 @@
import { useAppDispatch, useGraphQueryResult, useSchemaGraph } from '@graphpolaris/shared/lib/data-access/store';
import { useEffect, useRef, useState } from 'react';
import { AxisLabel, EntitiesFromSchema, MinMaxType, PlotSpecifications, PlotType, RelationType } from './Types';
-import { isNodeLinkResult } from '../shared/ResultNodeLinkParserUseCase';
+import { isNodeLinkResult } from '../../shared/ResultNodeLinkParserUseCase';
import styles from './semanticsubstrates.module.scss';
import AddPlotButtonComponent from './subcomponents/AddPlotButtonComponent';
import SVGCheckboxesWithSemanticSubstrLabel from './subcomponents/SVGCheckBoxComponent';
import AddPlotPopup from './subcomponents/AddPlotPopup';
-import VisConfigPanelComponent from '../shared/VisConfigPanel/VisConfigPanel';
+import VisConfigPanelComponent from '../../shared/VisConfigPanel/VisConfigPanel';
import Plot from './subcomponents/PlotComponent';
import LinesBetweenPlots from './subcomponents/LinesBetweenPlotsComponent';
import Color from 'color';
@@ -73,7 +73,9 @@ const relationScaleCalculation: (x: number) => number = (x: number) => {
return 1;
};
-export const SemanticSubstrates = () => {
+export type SemanticSubstratesProps = {};
+
+export const SemanticSubstrates = ({}: SemanticSubstratesProps) => {
const graphQueryResult = useGraphQueryResult();
const schema = useSchemaGraph();
const [entitiesFromSchema, setEntitiesFromSchema] = useState<EntitiesFromSchema>({ entityNames: [], attributesPerEntity: {} });
diff --git a/libs/shared/lib/vis/semanticsubstrates/subcomponents/AddPlotButtonComponent.module.scss b/libs/shared/lib/vis/visualizations/semanticsubstrates/subcomponents/AddPlotButtonComponent.module.scss
similarity index 94%
rename from libs/shared/lib/vis/semanticsubstrates/subcomponents/AddPlotButtonComponent.module.scss
rename to libs/shared/lib/vis/visualizations/semanticsubstrates/subcomponents/AddPlotButtonComponent.module.scss
index 4ab1febb1..52b6ee914 100644
--- a/libs/shared/lib/vis/semanticsubstrates/subcomponents/AddPlotButtonComponent.module.scss
+++ b/libs/shared/lib/vis/visualizations/semanticsubstrates/subcomponents/AddPlotButtonComponent.module.scss
@@ -1,63 +1,63 @@
-.root {
- &:hover {
- & .display {
- & .background {
- fill: '#009100';
- transition-delay: 0s;
- }
- & .plus {
- transform: translate(-4px, 0);
- transition-delay: 0s;
-
- & line {
- transition: 0.2s;
- transition-delay: 0s;
- stroke-width: 3;
- }
- & .xAxis {
- transform: translate(0, 0) scale(1, 1);
- }
- & .yAxis {
- transform: translate(0, 0);
- }
- & .nodes {
- opacity: 0;
- transition-delay: 0s;
- }
- }
- }
- }
-}
-
-.background {
- transition: 0.1s;
- transition-delay: 0.1s;
-}
-
-.plus {
- transform-box: fill-box;
- transform-origin: center center;
- transition: 0.2s;
- transition-delay: 0.1s;
- transform: translate(0, 0);
-
- & line {
- transition: 0.2s;
- transition-delay: 0.1s;
- stroke-width: 1;
- }
-
- & .nodes {
- transition-delay: 0.1s;
- }
-}
-
-.xAxis {
- transform-box: fill-box;
- transform-origin: center right;
- transform: translate(0, 5px) scale(1.4, 1);
-}
-
-.yAxis {
- transform: translate(-11px, 0);
-}
+.root {
+ &:hover {
+ & .display {
+ & .background {
+ fill: '#009100';
+ transition-delay: 0s;
+ }
+ & .plus {
+ transform: translate(-4px, 0);
+ transition-delay: 0s;
+
+ & line {
+ transition: 0.2s;
+ transition-delay: 0s;
+ stroke-width: 3;
+ }
+ & .xAxis {
+ transform: translate(0, 0) scale(1, 1);
+ }
+ & .yAxis {
+ transform: translate(0, 0);
+ }
+ & .nodes {
+ opacity: 0;
+ transition-delay: 0s;
+ }
+ }
+ }
+ }
+}
+
+.background {
+ transition: 0.1s;
+ transition-delay: 0.1s;
+}
+
+.plus {
+ transform-box: fill-box;
+ transform-origin: center center;
+ transition: 0.2s;
+ transition-delay: 0.1s;
+ transform: translate(0, 0);
+
+ & line {
+ transition: 0.2s;
+ transition-delay: 0.1s;
+ stroke-width: 1;
+ }
+
+ & .nodes {
+ transition-delay: 0.1s;
+ }
+}
+
+.xAxis {
+ transform-box: fill-box;
+ transform-origin: center right;
+ transform: translate(0, 5px) scale(1.4, 1);
+}
+
+.yAxis {
+ transform: translate(-11px, 0);
+}
diff --git a/libs/shared/lib/vis/semanticsubstrates/subcomponents/AddPlotButtonComponent.module.scss.d.ts b/libs/shared/lib/vis/visualizations/semanticsubstrates/subcomponents/AddPlotButtonComponent.module.scss.d.ts
similarity index 100%
rename from libs/shared/lib/vis/semanticsubstrates/subcomponents/AddPlotButtonComponent.module.scss.d.ts
rename to libs/shared/lib/vis/visualizations/semanticsubstrates/subcomponents/AddPlotButtonComponent.module.scss.d.ts
diff --git a/libs/shared/lib/vis/semanticsubstrates/subcomponents/AddPlotButtonComponent.tsx b/libs/shared/lib/vis/visualizations/semanticsubstrates/subcomponents/AddPlotButtonComponent.tsx
similarity index 100%
rename from libs/shared/lib/vis/semanticsubstrates/subcomponents/AddPlotButtonComponent.tsx
rename to libs/shared/lib/vis/visualizations/semanticsubstrates/subcomponents/AddPlotButtonComponent.tsx
diff --git a/libs/shared/lib/vis/semanticsubstrates/subcomponents/AddPlotPopup.tsx b/libs/shared/lib/vis/visualizations/semanticsubstrates/subcomponents/AddPlotPopup.tsx
similarity index 100%
rename from libs/shared/lib/vis/semanticsubstrates/subcomponents/AddPlotPopup.tsx
rename to libs/shared/lib/vis/visualizations/semanticsubstrates/subcomponents/AddPlotPopup.tsx
diff --git a/libs/shared/lib/vis/semanticsubstrates/subcomponents/BrushComponent.tsx b/libs/shared/lib/vis/visualizations/semanticsubstrates/subcomponents/BrushComponent.tsx
similarity index 100%
rename from libs/shared/lib/vis/semanticsubstrates/subcomponents/BrushComponent.tsx
rename to libs/shared/lib/vis/visualizations/semanticsubstrates/subcomponents/BrushComponent.tsx
diff --git a/libs/shared/lib/vis/semanticsubstrates/subcomponents/LinesBetweenPlotsComponent.tsx b/libs/shared/lib/vis/visualizations/semanticsubstrates/subcomponents/LinesBetweenPlotsComponent.tsx
similarity index 100%
rename from libs/shared/lib/vis/semanticsubstrates/subcomponents/LinesBetweenPlotsComponent.tsx
rename to libs/shared/lib/vis/visualizations/semanticsubstrates/subcomponents/LinesBetweenPlotsComponent.tsx
diff --git a/libs/shared/lib/vis/semanticsubstrates/subcomponents/OptimizedAutocomplete.module.scss b/libs/shared/lib/vis/visualizations/semanticsubstrates/subcomponents/OptimizedAutocomplete.module.scss
similarity index 100%
rename from libs/shared/lib/vis/semanticsubstrates/subcomponents/OptimizedAutocomplete.module.scss
rename to libs/shared/lib/vis/visualizations/semanticsubstrates/subcomponents/OptimizedAutocomplete.module.scss
diff --git a/libs/shared/lib/vis/semanticsubstrates/subcomponents/OptimizedAutocomplete.module.scss.d.ts b/libs/shared/lib/vis/visualizations/semanticsubstrates/subcomponents/OptimizedAutocomplete.module.scss.d.ts
similarity index 100%
rename from libs/shared/lib/vis/semanticsubstrates/subcomponents/OptimizedAutocomplete.module.scss.d.ts
rename to libs/shared/lib/vis/visualizations/semanticsubstrates/subcomponents/OptimizedAutocomplete.module.scss.d.ts
diff --git a/libs/shared/lib/vis/semanticsubstrates/subcomponents/OptimizedAutocomplete.tsx b/libs/shared/lib/vis/visualizations/semanticsubstrates/subcomponents/OptimizedAutocomplete.tsx
similarity index 100%
rename from libs/shared/lib/vis/semanticsubstrates/subcomponents/OptimizedAutocomplete.tsx
rename to libs/shared/lib/vis/visualizations/semanticsubstrates/subcomponents/OptimizedAutocomplete.tsx
diff --git a/libs/shared/lib/vis/semanticsubstrates/subcomponents/PlotAxisLabelStyles.module.css b/libs/shared/lib/vis/visualizations/semanticsubstrates/subcomponents/PlotAxisLabelStyles.module.css
similarity index 100%
rename from libs/shared/lib/vis/semanticsubstrates/subcomponents/PlotAxisLabelStyles.module.css
rename to libs/shared/lib/vis/visualizations/semanticsubstrates/subcomponents/PlotAxisLabelStyles.module.css
diff --git a/libs/shared/lib/vis/semanticsubstrates/subcomponents/PlotAxisLabelStyles.module.css.d.ts b/libs/shared/lib/vis/visualizations/semanticsubstrates/subcomponents/PlotAxisLabelStyles.module.css.d.ts
similarity index 100%
rename from libs/shared/lib/vis/semanticsubstrates/subcomponents/PlotAxisLabelStyles.module.css.d.ts
rename to libs/shared/lib/vis/visualizations/semanticsubstrates/subcomponents/PlotAxisLabelStyles.module.css.d.ts
diff --git a/libs/shared/lib/vis/semanticsubstrates/subcomponents/PlotAxisLabelsComponent.tsx b/libs/shared/lib/vis/visualizations/semanticsubstrates/subcomponents/PlotAxisLabelsComponent.tsx
similarity index 100%
rename from libs/shared/lib/vis/semanticsubstrates/subcomponents/PlotAxisLabelsComponent.tsx
rename to libs/shared/lib/vis/visualizations/semanticsubstrates/subcomponents/PlotAxisLabelsComponent.tsx
diff --git a/libs/shared/lib/vis/semanticsubstrates/subcomponents/PlotComponent.tsx b/libs/shared/lib/vis/visualizations/semanticsubstrates/subcomponents/PlotComponent.tsx
similarity index 100%
rename from libs/shared/lib/vis/semanticsubstrates/subcomponents/PlotComponent.tsx
rename to libs/shared/lib/vis/visualizations/semanticsubstrates/subcomponents/PlotComponent.tsx
diff --git a/libs/shared/lib/vis/semanticsubstrates/subcomponents/PlotTitleComponent.tsx b/libs/shared/lib/vis/visualizations/semanticsubstrates/subcomponents/PlotTitleComponent.tsx
similarity index 100%
rename from libs/shared/lib/vis/semanticsubstrates/subcomponents/PlotTitleComponent.tsx
rename to libs/shared/lib/vis/visualizations/semanticsubstrates/subcomponents/PlotTitleComponent.tsx
diff --git a/libs/shared/lib/vis/semanticsubstrates/subcomponents/PlotTitleStyles.module.css b/libs/shared/lib/vis/visualizations/semanticsubstrates/subcomponents/PlotTitleStyles.module.css
similarity index 100%
rename from libs/shared/lib/vis/semanticsubstrates/subcomponents/PlotTitleStyles.module.css
rename to libs/shared/lib/vis/visualizations/semanticsubstrates/subcomponents/PlotTitleStyles.module.css
diff --git a/libs/shared/lib/vis/semanticsubstrates/subcomponents/PlotTitleStyles.module.css.d.ts b/libs/shared/lib/vis/visualizations/semanticsubstrates/subcomponents/PlotTitleStyles.module.css.d.ts
similarity index 100%
rename from libs/shared/lib/vis/semanticsubstrates/subcomponents/PlotTitleStyles.module.css.d.ts
rename to libs/shared/lib/vis/visualizations/semanticsubstrates/subcomponents/PlotTitleStyles.module.css.d.ts
diff --git a/libs/shared/lib/vis/semanticsubstrates/subcomponents/SVGCheckBoxComponent.tsx b/libs/shared/lib/vis/visualizations/semanticsubstrates/subcomponents/SVGCheckBoxComponent.tsx
similarity index 100%
rename from libs/shared/lib/vis/semanticsubstrates/subcomponents/SVGCheckBoxComponent.tsx
rename to libs/shared/lib/vis/visualizations/semanticsubstrates/subcomponents/SVGCheckBoxComponent.tsx
diff --git a/libs/shared/lib/vis/semanticsubstrates/utils/CalcConnectionLinePositionsUseCase.tsx b/libs/shared/lib/vis/visualizations/semanticsubstrates/utils/CalcConnectionLinePositionsUseCase.tsx
similarity index 100%
rename from libs/shared/lib/vis/semanticsubstrates/utils/CalcConnectionLinePositionsUseCase.tsx
rename to libs/shared/lib/vis/visualizations/semanticsubstrates/utils/CalcConnectionLinePositionsUseCase.tsx
diff --git a/libs/shared/lib/vis/semanticsubstrates/utils/CalcDefaultPlotSpecsUseCase.tsx b/libs/shared/lib/vis/visualizations/semanticsubstrates/utils/CalcDefaultPlotSpecsUseCase.tsx
similarity index 100%
rename from libs/shared/lib/vis/semanticsubstrates/utils/CalcDefaultPlotSpecsUseCase.tsx
rename to libs/shared/lib/vis/visualizations/semanticsubstrates/utils/CalcDefaultPlotSpecsUseCase.tsx
diff --git a/libs/shared/lib/vis/semanticsubstrates/utils/CalcDistance.tsx b/libs/shared/lib/vis/visualizations/semanticsubstrates/utils/CalcDistance.tsx
similarity index 100%
rename from libs/shared/lib/vis/semanticsubstrates/utils/CalcDistance.tsx
rename to libs/shared/lib/vis/visualizations/semanticsubstrates/utils/CalcDistance.tsx
diff --git a/libs/shared/lib/vis/semanticsubstrates/utils/CalcEntityAttrNamesFromResultUseCase.tsx b/libs/shared/lib/vis/visualizations/semanticsubstrates/utils/CalcEntityAttrNamesFromResultUseCase.tsx
similarity index 100%
rename from libs/shared/lib/vis/semanticsubstrates/utils/CalcEntityAttrNamesFromResultUseCase.tsx
rename to libs/shared/lib/vis/visualizations/semanticsubstrates/utils/CalcEntityAttrNamesFromResultUseCase.tsx
diff --git a/libs/shared/lib/vis/semanticsubstrates/utils/CalcEntityAttrNamesFromSchemaUseCase.tsx b/libs/shared/lib/vis/visualizations/semanticsubstrates/utils/CalcEntityAttrNamesFromSchemaUseCase.tsx
similarity index 100%
rename from libs/shared/lib/vis/semanticsubstrates/utils/CalcEntityAttrNamesFromSchemaUseCase.tsx
rename to libs/shared/lib/vis/visualizations/semanticsubstrates/utils/CalcEntityAttrNamesFromSchemaUseCase.tsx
diff --git a/libs/shared/lib/vis/semanticsubstrates/utils/CalcScaledPositionsUseCase.tsx b/libs/shared/lib/vis/visualizations/semanticsubstrates/utils/CalcScaledPositionsUseCase.tsx
similarity index 100%
rename from libs/shared/lib/vis/semanticsubstrates/utils/CalcScaledPositionsUseCase.tsx
rename to libs/shared/lib/vis/visualizations/semanticsubstrates/utils/CalcScaledPositionsUseCase.tsx
diff --git a/libs/shared/lib/vis/semanticsubstrates/utils/CalcXYMinMaxUseCase.tsx b/libs/shared/lib/vis/visualizations/semanticsubstrates/utils/CalcXYMinMaxUseCase.tsx
similarity index 100%
rename from libs/shared/lib/vis/semanticsubstrates/utils/CalcXYMinMaxUseCase.tsx
rename to libs/shared/lib/vis/visualizations/semanticsubstrates/utils/CalcXYMinMaxUseCase.tsx
diff --git a/libs/shared/lib/vis/semanticsubstrates/utils/FilterUseCase.tsx b/libs/shared/lib/vis/visualizations/semanticsubstrates/utils/FilterUseCase.tsx
similarity index 100%
rename from libs/shared/lib/vis/semanticsubstrates/utils/FilterUseCase.tsx
rename to libs/shared/lib/vis/visualizations/semanticsubstrates/utils/FilterUseCase.tsx
diff --git a/libs/shared/lib/vis/semanticsubstrates/utils/RotateVec.tsx b/libs/shared/lib/vis/visualizations/semanticsubstrates/utils/RotateVec.tsx
similarity index 100%
rename from libs/shared/lib/vis/semanticsubstrates/utils/RotateVec.tsx
rename to libs/shared/lib/vis/visualizations/semanticsubstrates/utils/RotateVec.tsx
diff --git a/libs/shared/lib/vis/semanticsubstrates/utils/ToPlotDataParserUseCase.tsx b/libs/shared/lib/vis/visualizations/semanticsubstrates/utils/ToPlotDataParserUseCase.tsx
similarity index 98%
rename from libs/shared/lib/vis/semanticsubstrates/utils/ToPlotDataParserUseCase.tsx
rename to libs/shared/lib/vis/visualizations/semanticsubstrates/utils/ToPlotDataParserUseCase.tsx
index bcaa713af..487d5aa32 100644
--- a/libs/shared/lib/vis/semanticsubstrates/utils/ToPlotDataParserUseCase.tsx
+++ b/libs/shared/lib/vis/visualizations/semanticsubstrates/utils/ToPlotDataParserUseCase.tsx
@@ -4,8 +4,8 @@
* © Copyright Utrecht University (Department of Information and Computing Sciences)
*/
import { GraphQueryResult } from '@graphpolaris/shared/lib/data-access';
-import { ParseToUniqueEdges } from '../../shared/ResultNodeLinkParserUseCase';
-import { Edge, Node } from '../../../data-access/store';
+import { ParseToUniqueEdges } from '../../../shared/ResultNodeLinkParserUseCase';
+import { Edge, Node } from '../../../../data-access/store';
import { AxisLabel, PlotInputData, PlotSpecifications, RelationType } from '../Types';
/** A use case for parsing incoming node-link data to plot data */
diff --git a/libs/shared/lib/vis/table_vis/components/Table.tsx b/libs/shared/lib/vis/visualizations/table_vis/components/Table.tsx
similarity index 100%
rename from libs/shared/lib/vis/table_vis/components/Table.tsx
rename to libs/shared/lib/vis/visualizations/table_vis/components/Table.tsx
diff --git a/libs/shared/lib/vis/table_vis/components/table.module.scss b/libs/shared/lib/vis/visualizations/table_vis/components/table.module.scss
similarity index 100%
rename from libs/shared/lib/vis/table_vis/components/table.module.scss
rename to libs/shared/lib/vis/visualizations/table_vis/components/table.module.scss
diff --git a/libs/shared/lib/vis/table_vis/components/table.module.scss.d.ts b/libs/shared/lib/vis/visualizations/table_vis/components/table.module.scss.d.ts
similarity index 85%
rename from libs/shared/lib/vis/table_vis/components/table.module.scss.d.ts
rename to libs/shared/lib/vis/visualizations/table_vis/components/table.module.scss.d.ts
index 0dc7b2cfe..8798bcd00 100644
--- a/libs/shared/lib/vis/table_vis/components/table.module.scss.d.ts
+++ b/libs/shared/lib/vis/visualizations/table_vis/components/table.module.scss.d.ts
@@ -1,6 +1,5 @@
declare const classNames: {
readonly 'table-container': 'table-container';
readonly table: 'table';
- readonly '5': '5';
};
export = classNames;
diff --git a/libs/shared/lib/vis/visualizations/table_vis/tableVis.tsx b/libs/shared/lib/vis/visualizations/table_vis/tableVis.tsx
new file mode 100644
index 000000000..cfa411105
--- /dev/null
+++ b/libs/shared/lib/vis/visualizations/table_vis/tableVis.tsx
@@ -0,0 +1,61 @@
+import React, { useMemo, useRef } from 'react';
+import { Table, AugmentedNodeAttributes } from './components/Table';
+import { SchemaAttribute } from '../../../schema';
+import { VisualizationPropTypes, VISComponentType, localConfigSchemaType } from '../../Types';
+
+export type TableProps = {
+ showBarplot: boolean;
+ itemsPerPage: number;
+};
+
+const displayName = 'TableVis';
+
+export const TableVis = ({ data, schema, localConfig }: VisualizationPropTypes<typeof displayName>) => {
+ const ref = useRef<HTMLDivElement>(null);
+
+ const attributesArray = useMemo<AugmentedNodeAttributes[]>(
+ () =>
+ data.nodes.map((node) => {
+ const types: SchemaAttribute[] =
+ schema.nodes.find((n) => n.key === node.label)?.attributes?.attributes ??
+ schema.edges.find((r) => r.key === node.label)?.attributes?.attributes ??
+ [];
+
+ return {
+ attribute: node.attributes,
+ type: Object.fromEntries(types.map((t) => [t.name, t.type])),
+ };
+ }),
+ [data.nodes]
+ );
+
+ return (
+ <>
+ <div className="h-full w-full" ref={ref}>
+ {attributesArray.length > 0 && (
+ <Table data={attributesArray} itemsPerPage={localConfig.itemsPerPage} showBarPlot={localConfig.showBarplot} />
+ )}
+ </div>
+ </>
+ );
+};
+
+const localConfigSchema: localConfigSchemaType = {
+ showBarplot: {
+ value: true,
+ type: 'boolean',
+ label: 'Show barplot',
+ },
+ itemsPerPage: {
+ value: 10,
+ type: 'dropdown',
+ label: 'Items per page',
+ options: [10, 20, 30],
+ },
+};
+
+export const TableComponent: VISComponentType = {
+ displayName: displayName,
+ VIS: TableVis,
+ localConfigSchema: localConfigSchema,
+};
diff --git a/libs/shared/lib/vis/table_vis/tablevis.stories.tsx b/libs/shared/lib/vis/visualizations/table_vis/tablevis.stories.tsx
similarity index 63%
rename from libs/shared/lib/vis/table_vis/tablevis.stories.tsx
rename to libs/shared/lib/vis/visualizations/table_vis/tablevis.stories.tsx
index 0e68173d5..b7f5d6e33 100644
--- a/libs/shared/lib/vis/table_vis/tablevis.stories.tsx
+++ b/libs/shared/lib/vis/visualizations/table_vis/tablevis.stories.tsx
@@ -1,27 +1,25 @@
import React from 'react';
import { Meta } from '@storybook/react';
-import { TableVis } from './tableVis';
-
+import { VisualizationPanel } from '../../panel/visualization';
import {
assignNewGraphQueryResult,
graphQueryResultSlice,
+ querybuilderSlice,
schemaSlice,
setSchema,
-} from '../../data-access/store';
+ visualizationSlice,
+} from '../../../data-access/store';
import { configureStore } from '@reduxjs/toolkit';
import { Provider } from 'react-redux';
-import { smallFlightsQueryResults, simpleSchemaRaw, bigMockQueryResults } from '../../mock-data';
+import { smallFlightsQueryResults, simpleSchemaRaw, bigMockQueryResults } from '../../../mock-data';
-import { SchemaUtils } from '../../schema/schema-utils';
-import { simpleSchemaAirportRaw } from '../../mock-data/schema/simpleAirportRaw';
+import { SchemaUtils } from '../../../schema/schema-utils';
+import { simpleSchemaAirportRaw } from '../../../mock-data/schema/simpleAirportRaw';
+import { Visualizations, setActiveVisualization } from '@graphpolaris/shared/lib/data-access/store/visualizationSlice';
-const Component: Meta<typeof TableVis> = {
- /* 👇 The title prop is optional.
- * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
- * to learn how to generate automatic titles
- */
+const Component: Meta<typeof VisualizationPanel> = {
title: 'Visualizations/SimpleTableVis',
- component: TableVis,
+ component: VisualizationPanel,
decorators: [
(story) => (
<Provider store={Mockstore}>
@@ -42,44 +40,31 @@ const Mockstore = configureStore({
reducer: {
schema: schemaSlice.reducer,
graphQueryResult: graphQueryResultSlice.reducer,
+ visualize: visualizationSlice.reducer,
+ querybuilder: querybuilderSlice.reducer,
},
});
-/*
-export const TestWithBig2ndChamber = {
- args: { loading: false },
- play: async () => {
- const dispatch = Mockstore.dispatch;
-
- dispatch(assignNewGraphQueryResult({ queryID: '1', result: { type: 'nodelink', payload: big2ndChamberQueryResult } }));
- },
-};
-*/
-
export const TestWithAirport = {
- args: {
- loading: false,
- },
play: async () => {
const dispatch = Mockstore.dispatch;
const schema = SchemaUtils.schemaBackend2Graphology(simpleSchemaAirportRaw);
dispatch(setSchema(schema.export()));
dispatch(assignNewGraphQueryResult({ queryID: '1', result: { type: 'nodelink', payload: bigMockQueryResults } }));
+ dispatch(setActiveVisualization(Visualizations.Table));
},
};
-export default Component;
-
export const TestWithAirportSimple = {
- args: {
- loading: false,
- },
play: async () => {
const dispatch = Mockstore.dispatch;
const schema = SchemaUtils.schemaBackend2Graphology(simpleSchemaRaw);
dispatch(setSchema(schema.export()));
dispatch(assignNewGraphQueryResult({ queryID: '1', result: { type: 'nodelink', payload: smallFlightsQueryResults } }));
+ dispatch(setActiveVisualization(Visualizations.Table));
},
};
+
+export default Component;
--
GitLab