From a0564e7c447fcbb743fcf79f8569d5dd854d7029 Mon Sep 17 00:00:00 2001
From: Marcos Pieras <pieras.marcos@gmail.com>
Date: Tue, 23 Jul 2024 12:52:53 +0000
Subject: [PATCH] feat: add vis description to recommender panel
---
libs/shared/lib/vis/common/types.ts | 1 +
.../lib/vis/components/VisualizationPanel.tsx | 2 -
libs/shared/lib/vis/views/Recommender.tsx | 36 ++++++++++--
.../lib/vis/visualizations/mapvis/mapvis.tsx | 1 +
.../visualizations/matrixvis/matrixvis.tsx | 1 +
.../nodelinkvis/nodelinkvis.tsx | 1 +
.../vis/visualizations/paohvis/paohvis.tsx | 58 +++++++++----------
.../visualizations/rawjsonvis/rawjsonvis.tsx | 1 +
.../semanticsubstratesvis.tsx | 3 +-
.../vis/visualizations/tablevis/tablevis.tsx | 1 +
10 files changed, 69 insertions(+), 36 deletions(-)
diff --git a/libs/shared/lib/vis/common/types.ts b/libs/shared/lib/vis/common/types.ts
index d3eda36aa..988ab9acd 100644
--- a/libs/shared/lib/vis/common/types.ts
+++ b/libs/shared/lib/vis/common/types.ts
@@ -15,6 +15,7 @@ export type VisualizationSettingsType = {
export type VISComponentType<T> = {
displayName: keyof typeof Visualizations;
+ description: string;
component: React.FC<VisualizationPropTypes<T>>;
settingsComponent: FC<VisualizationSettingsPropTypes<T>>;
settings: T;
diff --git a/libs/shared/lib/vis/components/VisualizationPanel.tsx b/libs/shared/lib/vis/components/VisualizationPanel.tsx
index 881dafbb6..95a10c05b 100644
--- a/libs/shared/lib/vis/components/VisualizationPanel.tsx
+++ b/libs/shared/lib/vis/components/VisualizationPanel.tsx
@@ -27,10 +27,8 @@ type PromiseFunc = () => Promise<{ default: VISComponentType<any> }>;
export const Visualizations: Record<string, PromiseFunc> = {
TableVis: () => import('../visualizations/tablevis/tablevis'),
PaohVis: () => import('../visualizations/paohvis/paohvis'),
- // PaohVis: () => Promise.resolve({ default: Paohviz }),
RawJSONVis: () => import('../visualizations/rawjsonvis/rawjsonvis'),
NodeLinkVis: () => import('../visualizations/nodelinkvis/nodelinkvis'),
- // NodeLinkVis: () => Promise.resolve({ default: NodeLinkComponent }),
MatrixVis: () => import('../visualizations/matrixvis/matrixvis'),
SemanticSubstratesVis: () => import('../visualizations/semanticsubstratesvis/semanticsubstratesvis'),
MapVis: () => import('../visualizations/mapvis/mapvis'),
diff --git a/libs/shared/lib/vis/views/Recommender.tsx b/libs/shared/lib/vis/views/Recommender.tsx
index 1082b836a..74c730298 100644
--- a/libs/shared/lib/vis/views/Recommender.tsx
+++ b/libs/shared/lib/vis/views/Recommender.tsx
@@ -1,17 +1,43 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
import Info from '../../components/info';
import { addVisualization } from '../../data-access/store/visualizationSlice';
import { useAppDispatch } from '../../data-access';
import { Visualizations } from '../components/VisualizationPanel';
+type VisualizationDescription = {
+ name: string;
+ displayName: string;
+ description: string;
+};
+
export function Recommender() {
const dispatch = useAppDispatch();
+ const [visualizationDescriptions, setVisualizationDescriptions] = useState<VisualizationDescription[]>([]);
+
+ useEffect(() => {
+ const loadVisualizations = async () => {
+ const descriptions = await Promise.all(
+ Object.keys(Visualizations).map(async (key) => {
+ const visualizationModule = await Visualizations[key]();
+ const { default: visualizationComponent } = visualizationModule;
+ return {
+ name: key,
+ displayName: visualizationComponent.displayName,
+ description: visualizationComponent.description,
+ };
+ }),
+ );
+ setVisualizationDescriptions(descriptions);
+ };
+
+ loadVisualizations();
+ }, []);
return (
<div className="p-4">
<span className="text-md">Select a visualization</span>
<div className="grid grid-cols-3 gap-4 my-2">
- {Object.keys(Visualizations).map((name) => (
+ {visualizationDescriptions.map(({ name, displayName, description }) => (
<div
key={name}
className="p-4 cursor-pointer border hover:bg-secondary-100"
@@ -22,10 +48,12 @@ export function Recommender() {
}}
>
<div className="flex items-center justify-between">
- <span className="text-sm font-semibold truncate">{name}</span>
+ <span className="text-sm font-semibold truncate">{displayName}</span>
<Info tooltip="Here an explanation" placement="top" />
</div>
- {/* <image src={image} /> */}
+ <div className="flex items-center justify-between">
+ <span className="text-xs text-secondary-400 truncate">{description}</span>
+ </div>
</div>
))}
</div>
diff --git a/libs/shared/lib/vis/visualizations/mapvis/mapvis.tsx b/libs/shared/lib/vis/visualizations/mapvis/mapvis.tsx
index c4458e284..e6d90b7e2 100644
--- a/libs/shared/lib/vis/visualizations/mapvis/mapvis.tsx
+++ b/libs/shared/lib/vis/visualizations/mapvis/mapvis.tsx
@@ -197,6 +197,7 @@ export const MapVis = ({ data, settings, handleSelect, graphMetadata }: Visualiz
export const MapComponent: VISComponentType<MapProps> = {
displayName: 'MapVis',
+ description: 'Geographical Features',
component: MapVis,
settingsComponent: MapSettings,
settings: settings,
diff --git a/libs/shared/lib/vis/visualizations/matrixvis/matrixvis.tsx b/libs/shared/lib/vis/visualizations/matrixvis/matrixvis.tsx
index 3b9223034..8d9caf3e7 100644
--- a/libs/shared/lib/vis/visualizations/matrixvis/matrixvis.tsx
+++ b/libs/shared/lib/vis/visualizations/matrixvis/matrixvis.tsx
@@ -63,6 +63,7 @@ const MatrixSettings = ({ settings, updateSettings }: VisualizationSettingsPropT
export const MatrixVisComponent: VISComponentType<MatrixVisProps> = {
displayName: 'MatrixVis',
+ description: 'Overview & Details',
component: MatrixVis,
settingsComponent: MatrixSettings,
settings: settings,
diff --git a/libs/shared/lib/vis/visualizations/nodelinkvis/nodelinkvis.tsx b/libs/shared/lib/vis/visualizations/nodelinkvis/nodelinkvis.tsx
index 4daa88491..928272c33 100644
--- a/libs/shared/lib/vis/visualizations/nodelinkvis/nodelinkvis.tsx
+++ b/libs/shared/lib/vis/visualizations/nodelinkvis/nodelinkvis.tsx
@@ -219,6 +219,7 @@ const NodelinkSettings = ({ settings, graphMetadata, updateSettings }: Visualiza
export const NodeLinkComponent: VISComponentType<NodelinkVisProps> = {
displayName: 'NodeLinkVis',
+ description: 'General Patterns and Connections',
component: NodeLinkVis,
settingsComponent: NodelinkSettings,
settings: settings,
diff --git a/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx b/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx
index a643ea9d8..af58aef15 100644
--- a/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx
+++ b/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx
@@ -859,26 +859,26 @@ export const PaohVis = ({ data, graphMetadata, schema, settings, updateSettings
onWheel={onWheel}
>
<defs>
- <pattern id="diagonal-lines" patternUnits="userSpaceOnUse" width="8" height="8">
- <rect width="8" height="8" fill="#eaeaea" />
- <path d="M0,0 L8,8 M-2,2 L2,-2 M6,10 L10,6" stroke="lightgray" strokeWidth="1" />
- </pattern>
- </defs>
-
- <RowLabels
- dataRows={informationRow}
- rowHeight={settings.rowHeight}
- yOffset={computedSizesSvg.colWidth}
- rowLabelColumnWidth={widthTotalRowInformation}
- classTopTextColumns={classTopTextColumns}
- onMouseEnterRowLabels={onMouseEnterRowLabels}
- onMouseLeaveRowLabels={onMouseLeaveRowLabels}
- marginText={configPaohvis.marginText}
- handleClickHeaderSorting={handleClickHeaderSorting}
- sortState={sortingOrderRow}
- headerState={previousHeaderRow}
- configStyle={configStyle}
- />
+ <pattern id="diagonal-lines" patternUnits="userSpaceOnUse" width="8" height="8">
+ <rect width="8" height="8" fill="#eaeaea" />
+ <path d="M0,0 L8,8 M-2,2 L2,-2 M6,10 L10,6" stroke="lightgray" strokeWidth="1" />
+ </pattern>
+ </defs>
+
+ <RowLabels
+ dataRows={informationRow}
+ rowHeight={settings.rowHeight}
+ yOffset={computedSizesSvg.colWidth}
+ rowLabelColumnWidth={widthTotalRowInformation}
+ classTopTextColumns={classTopTextColumns}
+ onMouseEnterRowLabels={onMouseEnterRowLabels}
+ onMouseLeaveRowLabels={onMouseLeaveRowLabels}
+ marginText={configPaohvis.marginText}
+ handleClickHeaderSorting={handleClickHeaderSorting}
+ sortState={sortingOrderRow}
+ headerState={previousHeaderRow}
+ configStyle={configStyle}
+ />
<HyperEdgeRangesBlock
dataModel={dataModel}
@@ -893,15 +893,14 @@ export const PaohVis = ({ data, graphMetadata, schema, settings, updateSettings
columnHeaderInformation={informationColumn}
rowsMaxPerPage={configPaohvis.rowsMaxPerPage}
configStyle={configStyle}
- onMouseEnterHyperEdge={onMouseEnterHyperEdge}
- onMouseLeaveHyperEdge={onMouseLeaveHyperEdge}
- numRows={numRowsVisible}
- sortState={sortingOrderColumn}
- handleClickHeaderSorting={handleClickHeaderSortingColumns}
- headerState={previousHeaderColumn}
- />
- </svg>
-
+ onMouseEnterHyperEdge={onMouseEnterHyperEdge}
+ onMouseLeaveHyperEdge={onMouseLeaveHyperEdge}
+ numRows={numRowsVisible}
+ sortState={sortingOrderColumn}
+ handleClickHeaderSorting={handleClickHeaderSortingColumns}
+ headerState={previousHeaderColumn}
+ />
+ </svg>
);
};
@@ -1090,6 +1089,7 @@ const PaohSettings = ({ settings, graphMetadata, updateSettings }: Visualization
export const PaohVisComponent: VISComponentType<PaohVisProps> = {
displayName: 'PaohVis',
+ description: 'Paths and Connection',
component: PaohVis,
settingsComponent: PaohSettings,
settings: settings,
diff --git a/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.tsx b/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.tsx
index 461069b31..d12e94310 100644
--- a/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.tsx
+++ b/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.tsx
@@ -52,6 +52,7 @@ const RawJSONSettings = ({ settings, updateSettings }: VisualizationSettingsProp
export const RawJSONComponent: VISComponentType<RawJSONVisProps> = {
displayName: 'RawJSONVis',
component: RawJSONVis,
+ description: '(Raw) Data Export',
settingsComponent: RawJSONSettings,
settings: settings,
};
diff --git a/libs/shared/lib/vis/visualizations/semanticsubstratesvis/semanticsubstratesvis.tsx b/libs/shared/lib/vis/visualizations/semanticsubstratesvis/semanticsubstratesvis.tsx
index e7e90f844..583565e9c 100644
--- a/libs/shared/lib/vis/visualizations/semanticsubstratesvis/semanticsubstratesvis.tsx
+++ b/libs/shared/lib/vis/visualizations/semanticsubstratesvis/semanticsubstratesvis.tsx
@@ -36,7 +36,7 @@ const settings: SemSubstrProps = {
dataPanels: [],
};
-const displayName = 'SemSubstrVis';
+const displayName = 'SemanticSubstratesVis';
export const VisSemanticSubstrates = ({ data, graphMetadata, settings, updateSettings }: VisualizationPropTypes<SemSubstrProps>) => {
// for sizing the vis
@@ -929,6 +929,7 @@ const SemSubstrSettings = ({ settings, updateSettings, graphMetadata }: Visualiz
export const SemSubstrVisComponent: VISComponentType<SemSubstrProps> = {
displayName: displayName,
+ description: 'Node/Edge Attribute Exploration',
component: VisSemanticSubstrates,
settingsComponent: SemSubstrSettings,
settings: settings,
diff --git a/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx b/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx
index 37e198c9d..b6b51faae 100644
--- a/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx
+++ b/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx
@@ -197,6 +197,7 @@ const TableSettings = ({ settings, graphMetadata, updateSettings }: Visualizatio
export const TableComponent: VISComponentType<TableProps> = {
displayName: 'TableVis',
+ description: 'Node Attribute Statistics and Details',
component: TableVis,
settingsComponent: TableSettings,
settings: settings,
--
GitLab