diff --git a/src/lib/components/DesignGuides/styleGuide.mdx b/src/lib/components/DesignGuides/styleGuide.mdx
index fdb8fde3d925b6c5da0b245d1a2f6cd1511c7818..80a4311fae6086714ab46ca8a746a2f0515f64c3 100644
--- a/src/lib/components/DesignGuides/styleGuide.mdx
+++ b/src/lib/components/DesignGuides/styleGuide.mdx
@@ -2,9 +2,9 @@ import { Meta, Unstyled } from '@storybook/blocks';
import { ColorPalette, ColorItem, IconGallery, IconItem, Canvas } from '@storybook/blocks';
import { Button } from '../buttons/.';
-import { TextInput } from '@graphpolaris/shared/lib/components/inputs';
+import { TextInput } from '@/lib/components/inputs';
import { Icon } from '../icon/.';
-import { visualizationColors } from 'config';
+import { visualizationColors } from '@/config';
<Meta title="Design guide" />
@@ -36,7 +36,7 @@ Style files can be found in:
- colors.ts: For getting colors palettes as dictionaries. E.g.:
```jsx
-import { visualizationColors } from '../../../../config/src/colors.ts';
+import { visualizationColors } from '@/config';
```
## Colors
diff --git a/src/lib/components/colorComponents/colorPicker/index.tsx b/src/lib/components/colorComponents/colorPicker/index.tsx
index b8a98fe826d381def971e7cb1bd2f6e6c84aa9e8..be64f75ce17f674ac30076851c78f3d4104b5e87 100644
--- a/src/lib/components/colorComponents/colorPicker/index.tsx
+++ b/src/lib/components/colorComponents/colorPicker/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
import { visualizationColors } from '@/config';
import { Popover, PopoverTrigger, PopoverContent } from '@/lib/components/layout/Popover';
diff --git a/src/lib/components/icon/overview.mdx b/src/lib/components/icon/overview.mdx
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/src/lib/mock-data/query-result/big2ndChamberQueryResult.json b/src/lib/mock-data/query-result/big2ndChamberQueryResult.json
index 28eea626372b69c3f814c9eda5066be87593058e..e3b732f6d45dd5b27415d04c3861456617ae2de5 100644
--- a/src/lib/mock-data/query-result/big2ndChamberQueryResult.json
+++ b/src/lib/mock-data/query-result/big2ndChamberQueryResult.json
@@ -3924,8 +3924,8 @@
"_id": "1163",
"attributes": {},
"label": "onderdeel_van",
- "source": "117",
- "target": "36"
+ "source": "kamerleden/117",
+ "target": "commisies/36"
},
{
"_id": "263",
diff --git a/src/lib/mock-data/query-result/smallVillainQueryResults.json b/src/lib/mock-data/query-result/smallVillainQueryResults.json
index e98d282129a9a9b325196764fcddaaa798b56b58..b4b3152d905b6262a6993667a67f67c545297a69 100644
--- a/src/lib/mock-data/query-result/smallVillainQueryResults.json
+++ b/src/lib/mock-data/query-result/smallVillainQueryResults.json
@@ -19,7 +19,7 @@
{
"_id": "escape/escape",
"from": "agent/007",
- "to": "villain",
+ "to": "villain/Le Chiffre",
"attributes": {
"name": "Escape"
}
diff --git a/src/lib/mock-data/query-result/testUnMatchHeadersDataResults.json b/src/lib/mock-data/query-result/testUnMatchHeadersDataResults.json
index 1cadc3be1d5f1bbcca0afd37f31954d186f01f10..4e3fc4e7399b5f5cfa0030fc6fbecd1175aca602 100644
--- a/src/lib/mock-data/query-result/testUnMatchHeadersDataResults.json
+++ b/src/lib/mock-data/query-result/testUnMatchHeadersDataResults.json
@@ -22,6 +22,7 @@
"_id": "worker/1",
"_key": "1",
"_rev": "_cYl-Qmq-_H",
+ "label": "worker",
"attributes": {
"name": "John Doe",
"age": 30,
@@ -32,6 +33,7 @@
"_id": "worker/3",
"_key": "2",
"_rev": "_cYl-Qmq--5",
+ "label": "worker",
"attributes": {
"name": "Bob Johnson",
"age": 35
@@ -41,6 +43,7 @@
"_id": "worker/2",
"_key": "2",
"_rev": "_cYl-Qmq--5",
+ "label": "worker",
"attributes": {
"age": 38,
"height": 195.2
diff --git a/src/lib/mock-data/query-result/typesMockQueryResults.json b/src/lib/mock-data/query-result/typesMockQueryResults.json
index 45546ae09dccc9a994ef1e77da42ca7bdd005845..6875775fb61ee15b323ed7ff0d48f1dcc3746b58 100644
--- a/src/lib/mock-data/query-result/typesMockQueryResults.json
+++ b/src/lib/mock-data/query-result/typesMockQueryResults.json
@@ -20,6 +20,7 @@
"nodes": [
{
"_id": "worker/1",
+ "label": "worker",
"_key": "1",
"_rev": "_cYl-Qmq-_H",
"attributes": {
@@ -37,6 +38,7 @@
"_id": "worker/2",
"_key": "2",
"_rev": "_cYl-Qmq--5",
+ "label": "worker",
"attributes": {
"name": "Bob Johnson",
"age": 35,
@@ -52,6 +54,7 @@
"_id": "worker/3",
"_key": "3",
"_rev": "_cYl-Qmq--3",
+ "label": "worker",
"attributes": {
"name": "Jane Smith",
"age": 28,
@@ -67,6 +70,7 @@
"_id": "worker/4",
"_key": "4",
"_rev": "_cYl-Qmq--z",
+ "label": "worker",
"attributes": {
"name": "Bob Knee",
"age": 35,
@@ -82,6 +86,7 @@
"_id": "worker/5",
"_key": "5",
"_rev": "_cYl-Qmq--x",
+ "label": "worker",
"attributes": {
"name": "Alice Brown",
"age": 25,
@@ -97,6 +102,7 @@
"_id": "worker/6",
"_key": "6",
"_rev": "_cYl-Qmq--v",
+ "label": "worker",
"attributes": {
"name": "Michael Davis",
"age": 40,
@@ -112,6 +118,7 @@
"_id": "worker/7",
"_key": "7",
"_rev": "_cYl-Qmq--p",
+ "label": "worker",
"attributes": {
"name": "Sophia Turner",
"age": 27,
@@ -127,6 +134,7 @@
"_id": "worker/8",
"_key": "8",
"_rev": "_cYl-Qmq--n",
+ "label": "worker",
"attributes": {
"name": "David Miller",
"age": 34,
@@ -140,6 +148,7 @@
},
{
"_id": "worker/9",
+ "label": "worker",
"_key": "9",
"_rev": "_cYl-Qmq--l",
"attributes": {
@@ -155,6 +164,7 @@
},
{
"_id": "worker/10",
+ "label": "worker",
"_key": "10",
"_rev": "_cYl-Qmq--j",
"attributes": {
@@ -170,6 +180,7 @@
},
{
"_id": "worker/11",
+ "label": "worker",
"_key": "11",
"_rev": "_cYl-Qmq--f",
"attributes": {
diff --git a/src/lib/mock-data/schema/simpleAirportRaw.ts b/src/lib/mock-data/schema/simpleAirportRaw.ts
index 5a2fdbe30c713d2322ddbba0c9465c332a2c9a6b..c77808b0afee62963834656590f2e416f51d34d0 100644
--- a/src/lib/mock-data/schema/simpleAirportRaw.ts
+++ b/src/lib/mock-data/schema/simpleAirportRaw.ts
@@ -1,4 +1,4 @@
-import { SchemaFromBackend } from '../../schema';
+import { SchemaFromBackend } from 'ts-common';
import { SchemaUtils } from '../../schema/schema-utils';
export const simpleSchemaAirportRaw: SchemaFromBackend = {
diff --git a/src/lib/querybuilder/panel/stories/querybuilder-simple.stories.tsx b/src/lib/querybuilder/panel/stories/querybuilder-simple.stories.tsx
index c8a823cadf6d326a819f296a1c193f26088ea843..492dc9c8e20428c8a3937958751dcc4014f54429 100644
--- a/src/lib/querybuilder/panel/stories/querybuilder-simple.stories.tsx
+++ b/src/lib/querybuilder/panel/stories/querybuilder-simple.stories.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
import { setQuerybuilderGraph, setSchema, store } from '@/lib/data-access/store';
import { Meta } from '@storybook/react';
import { Provider } from 'react-redux';
import QueryBuilder from '../QueryBuilder';
-import { QueryElementTypes, QueryMultiGraphology } from '../../model';
+import { QueryMultiGraphology } from '../../model';
+import { QueryElementTypes } from 'ts-common';
import { SchemaUtils } from '../../../schema/schema-utils';
const Component: Meta<typeof QueryBuilder> = {
diff --git a/src/lib/querybuilder/panel/stories/querybuilder-single-entity.stories.tsx b/src/lib/querybuilder/panel/stories/querybuilder-single-entity.stories.tsx
index 0959697976f4db7f269aff054dae03c8a8f3e1d2..8fd1d57e3482730d9d6584450618076abfce8239 100644
--- a/src/lib/querybuilder/panel/stories/querybuilder-single-entity.stories.tsx
+++ b/src/lib/querybuilder/panel/stories/querybuilder-single-entity.stories.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
import { setQuerybuilderGraph, store } from '@/lib/data-access/store';
import { Meta } from '@storybook/react';
import { Provider } from 'react-redux';
import QueryBuilder from '../QueryBuilder';
-import { QueryElementTypes, QueryMultiGraphology } from '../../model';
+import { QueryMultiGraphology } from '../../model';
+import { QueryElementTypes } from 'ts-common';
const Component: Meta<typeof QueryBuilder> = {
component: QueryBuilder,
diff --git a/src/lib/querybuilder/panel/stories/querybuilder-single-relationship.stories.tsx b/src/lib/querybuilder/panel/stories/querybuilder-single-relationship.stories.tsx
index e8c073455cac2b3ae5ec0941cec41f4a2d726a2d..2ec3b2ee76220aac1fd688926ed4d2d497d04e0d 100644
--- a/src/lib/querybuilder/panel/stories/querybuilder-single-relationship.stories.tsx
+++ b/src/lib/querybuilder/panel/stories/querybuilder-single-relationship.stories.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
import { setQuerybuilderGraph, store } from '@/lib/data-access/store';
import { Meta } from '@storybook/react';
import { Provider } from 'react-redux';
import QueryBuilder from '../QueryBuilder';
-import { QueryElementTypes, QueryMultiGraphology } from '../../model';
+import { QueryMultiGraphology } from '../../model';
+import { QueryElementTypes } from 'ts-common';
const Component: Meta<typeof QueryBuilder> = {
component: QueryBuilder,
diff --git a/src/lib/vis/visualizations/arcplotvis/arcplotvis.stories.tsx b/src/lib/vis/visualizations/arcplotvis/arcplotvis.stories.tsx
index 310e73cf0ebb4fc7e4834921cad0de3d40e75e88..1512c49f8acee3afa1b8b9ac36aeb92b2e84555a 100644
--- a/src/lib/vis/visualizations/arcplotvis/arcplotvis.stories.tsx
+++ b/src/lib/vis/visualizations/arcplotvis/arcplotvis.stories.tsx
@@ -4,7 +4,6 @@ import { Provider } from 'react-redux';
import { graphQueryResultSlice, querybuilderSlice, schemaSlice, visualizationSlice } from '../../../data-access/store';
import { mockData } from '../../../mock-data';
import ArcPlotComponent from './arcplotvis';
-// import { mockLargeQueryResults } from '@/lib/mock-data';
const Mockstore = configureStore({
reducer: {
@@ -37,7 +36,6 @@ const Component: Meta<typeof ArcPlotComponent.component> = {
export const SmallVillainDoubleArchData = {
args: {
...(await mockData.smallVillainDoubleArchQueryResults()),
- // configuration: ArcPlotComponent.configuration,
updateSettings: () => {},
settings: {
...ArcPlotComponent.settings,
@@ -48,7 +46,6 @@ export const SmallVillainDoubleArchData = {
export const SmallVillainData = {
args: {
...(await mockData.smallVillainQueryResults()),
- // configuration: ArcPlotComponent.configuration,
updateSettings: () => {},
settings: {
...ArcPlotComponent.settings,
@@ -76,6 +73,11 @@ export const movie_recommendationPersonActedInMovieQueryResultData = {
},
};
+/*
+// TODO!: mockLargeQueryResults does not have the required structure
+// has: attributes{label, ...}, _id
+// needs: attributes, label, _id
+
export const LargeData = {
args: {
...(await mockData.mockLargeQueryResults()),
@@ -84,19 +86,8 @@ export const LargeData = {
...ArcPlotComponent.settings,
},
},
-
- // args: {
- // ...(await mockData.marieBoucherSample()),
- // updateSettings: () => {},
- // schema: marieBoucherSampleSchemaRaw,
- // settings: {
- // ...PaohVisComponent.settings,
- // rowNode: 'merchant',
- // columnNode: 'merchant',
- // attributeRowShow: ['_id', '# Connections', 'name2', 'birth'],
- // },
- // },
};
+*/
export const Empty = {
args: {
@@ -104,7 +95,6 @@ export const Empty = {
nodes: [],
edges: [],
},
- configuration: ArcPlotComponent.configuration,
settings: {
...ArcPlotComponent.settings,
},
diff --git a/src/lib/vis/visualizations/matrixvis/matrix.stories.tsx b/src/lib/vis/visualizations/matrixvis/matrix.stories.tsx
index f97d79a62b3d070fe8c1754c047f0198050f3b14..419f44324093dff75441a41e63248c8ed405bb1a 100644
--- a/src/lib/vis/visualizations/matrixvis/matrix.stories.tsx
+++ b/src/lib/vis/visualizations/matrixvis/matrix.stories.tsx
@@ -42,11 +42,6 @@ export const TestWithData = {
ml: {},
settings: MatrixVisComponent.settings,
},
- play: async () => {
- // const dispatch = Mockstore.dispatch;
- // const schema = SchemaUtils.schemaBackend2Graphology(simpleSchemaAirportRaw);
- // dispatch(setSchema(schema.export()));
- },
};
export const TestWithNoData = {
diff --git a/src/lib/vis/visualizations/tablevis/components/Table.tsx b/src/lib/vis/visualizations/tablevis/components/Table.tsx
index e8e41ec9cfa075ec302986159537e96dc3123b77..5a58f4ad9401062330e12543abc1ef7571169ddd 100644
--- a/src/lib/vis/visualizations/tablevis/components/Table.tsx
+++ b/src/lib/vis/visualizations/tablevis/components/Table.tsx
@@ -1,8 +1,8 @@
-import React, { useState, useEffect, useMemo, useRef } from 'react';
+import { useState, useEffect, useRef } from 'react';
import { Pagination } from '@/lib/components/pagination';
import { BarPlot } from '@/lib/components/charts/barplot';
-import { NodeAttributes } from '@/lib/data-access/store/graphQueryResultSlice';
-import { SchemaAttributeTypes } from '@/lib/schema';
+import { NodeAttributes } from 'ts-common';
+import { SchemaAttributeTypes } from 'ts-common';
import { Icon } from '@/lib/components';
import { group } from 'd3';
@@ -140,7 +140,7 @@ export const Table = ({ data, itemsPerPage, showBarPlot, showAttributes, selecte
// TODO !FIXME: remove firstRowData and get type from schema information
let categoryCounts = [];
const firstRowData = data[data.length > fetchAttributes ? fetchAttributes : 0];
- const _data2Render = showAttributes.map((dataColumn: string, i) => {
+ const _data2Render = showAttributes.map((dataColumn: string) => {
const newData2Render: Data2RenderI = {
name: dataColumn,
typeData: firstRowData.type[dataColumn] || 'string',
diff --git a/src/lib/vis/visualizations/tablevis/tablevis.stories.tsx b/src/lib/vis/visualizations/tablevis/tablevis.stories.tsx
index 5e3939da4724af36049fcc259252824735399da5..6369ca3821e181a6c896f111d4ca2127adc0e363 100644
--- a/src/lib/vis/visualizations/tablevis/tablevis.stories.tsx
+++ b/src/lib/vis/visualizations/tablevis/tablevis.stories.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
import { Meta } from '@storybook/react';
import { graphQueryResultSlice, querybuilderSlice, schemaSlice, visualizationSlice } from '../../../data-access/store';
import { configureStore } from '@reduxjs/toolkit';
@@ -39,10 +38,19 @@ export const TestWithAirport = {
args: {
...(await mockData.bigMockQueryResults()),
schema: simpleSchemaAirportRaw,
+ // graphMetadata: has more fields, just for SB. Data has an old structure
+ graphMetadata: {
+ nodes: {
+ labels: ['airports'],
+ },
+ edges: {
+ labels: ['routes'],
+ },
+ },
settings: {
...TableComponent.settings,
displayAttributes: ['city', 'country', 'lat', 'long', 'name', 'state', 'vip'],
- displayEntity: 'airports',
+ selectedEntity: 'airports',
},
},
};
@@ -54,7 +62,7 @@ export const TestWithBig2ndChamber = {
settings: {
...TableComponent.settings,
displayAttributes: ['naam', 'anc', 'img', 'leeftijd', 'height', 'partij', 'woonplaats'],
- displayEntity: 'kamerleden',
+ selectedEntity: 'kamerleden',
},
},
};
@@ -65,7 +73,7 @@ export const TestWithTypesMock = {
settings: {
...TableComponent.settings,
displayAttributes: ['name', 'age', 'height', 'sacked', 'birthdate', 'startingSchedule', 'commutingDuration', 'firstLogin'],
- displayEntity: 'worker',
+ selectedEntity: 'worker',
},
},
};
@@ -77,7 +85,7 @@ export const TestUnMatchHeadersData = {
settings: {
...TableComponent.settings,
displayAttributes: ['name', 'age', 'height'],
- displayEntity: 'worker',
+ selectedEntity: 'worker',
},
},
};
diff --git a/src/lib/vis/visualizations/vis0D/Vis0D.tsx b/src/lib/vis/visualizations/vis0D/Vis0D.tsx
index df6806ba6ff46f7914549b510f9b08b3317cf715..399ba3ac58b01cd244e7f10a9d959f31198429a4 100644
--- a/src/lib/vis/visualizations/vis0D/Vis0D.tsx
+++ b/src/lib/vis/visualizations/vis0D/Vis0D.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useImperativeHandle, forwardRef, useEffect, useState, Fragment } from 'react';
+import React, { useRef, useImperativeHandle, forwardRef, useEffect, useState } from 'react';
import { VisualizationPropTypes, VISComponentType, VisualizationSettingsPropTypes } from '../../common';
import { SettingsContainer } from '@/lib/vis/components/config';
import html2canvas from 'html2canvas';
diff --git a/src/lib/vis/visualizations/vis0D/vis0D.stories.tsx b/src/lib/vis/visualizations/vis0D/vis0D.stories.tsx
index b89f3bf4c0e2a19e8c27ddeb4da7d0745d40e6f2..97036b7696ac6b5ddcabcbaf8b30bcfa5bc5b430 100644
--- a/src/lib/vis/visualizations/vis0D/vis0D.stories.tsx
+++ b/src/lib/vis/visualizations/vis0D/vis0D.stories.tsx
@@ -36,13 +36,87 @@ const Mockstore: any = configureStore({
export const TestWithData = {
args: {
data: {
- nodes: 12313,
- edges: [],
+ nodes: [
+ { id: 'node1', label: 'Node 1' },
+ { id: 'node2', label: 'Node 2' },
+ ],
+ edges: [
+ {
+ source: 'node1',
+ target: 'node2',
+ label: 'Edge between Node 1 and Node 2',
+ },
+ ],
},
ml: {},
settings: {
...Vis0DComponent.settings,
- title: 'KPI Count Movie',
+ title: 'KPI Count Movie Votes',
+ selectedEntity: 'Movie', // The selected entity (must exist in the graphMetadata structure).
+ selectedAttribute: 'votes', // An attribute from the entity's attributes list.
+ selectedStat: 'count', // A valid statistic for the selected attribute.
+ },
+ graphMetadata: {
+ nodes: {
+ count: 2,
+ labels: ['Movie', 'Person'],
+ types: {
+ Movie: {
+ count: 1,
+ attributes: {
+ votes: {
+ type: 'number',
+ statistics: {
+ count: 12345,
+ min: 0,
+ max: 1000,
+ avg: 450,
+ },
+ },
+ rating: {
+ type: 'number',
+ statistics: {
+ count: 12345,
+ min: 1,
+ max: 10,
+ avg: 7.5,
+ },
+ },
+ },
+ },
+ Person: {
+ count: 1,
+ attributes: {
+ age: {
+ type: 'number',
+ statistics: {
+ count: 100,
+ min: 18,
+ max: 70,
+ avg: 35,
+ },
+ },
+ },
+ },
+ },
+ },
+ edges: {
+ count: 1,
+ labels: ['ACTED_IN'],
+ types: {
+ ACTED_IN: {
+ count: 1,
+ attributes: {
+ role: {
+ type: 'string',
+ statistics: {
+ uniqueCount: 1,
+ },
+ },
+ },
+ },
+ },
+ },
},
},
};