From 250fd993afbc6ce72e52197b05eeaf29107f3c3c Mon Sep 17 00:00:00 2001
From: Dennis Collaris <d.a.c.collaris@uu.nl>
Date: Mon, 24 Mar 2025 16:55:20 +0000
Subject: [PATCH] fix: VSCode problems
---
.vscode/settings.json | 10 ++
eslint.config.js | 2 +-
src/App.tsx | 24 ++--
src/app/navbar/navbar.tsx | 10 +-
src/app/onboarding/onboarding.tsx | 6 +-
src/app/onboarding/tooltip.tsx | 1 -
src/app/onboarding/use-cases/index.tsx | 2 +-
src/config/colors.ts | 2 +-
src/config/styling/variables.css | 1 -
src/lib/components/DataTypeIcon/index.tsx | 3 +-
.../components/DesignGuides/styleGuide.mdx | 1 +
.../accordion/accordion.stories.tsx | 5 +-
src/lib/components/accordion/index.tsx | 2 +-
src/lib/components/buttons/Button.tsx | 2 +-
src/lib/components/buttons/button.stories.tsx | 1 -
.../components/buttons/buttons.module.scss | 13 +-
src/lib/components/buttons/overview.mdx | 135 +++++++++++++-----
.../components/charts/Axis/axis.stories.tsx | 3 +-
src/lib/components/charts/Axis/index.tsx | 2 +-
.../charts/barplot/barplot.stories.tsx | 1 -
src/lib/components/charts/barplot/index.tsx | 6 +-
.../colorLegendCat/colorLegendCat.stories.tsx | 1 -
.../colorLegendSeqDiv.stories.tsx | 1 -
.../charts/colorLegendSeqDiv/index.tsx | 2 +-
src/lib/components/charts/heatmap1D/index.tsx | 4 +-
.../charts/indicatorGraph/index.tsx | 4 +-
.../components/charts/scatterplotD3/index.tsx | 8 +-
.../scatterplotD3/scatterplot.stories.tsx | 3 +-
.../charts/scatterplot_pixi/index.tsx | 2 +-
.../scatterplot_pixi/scatterplot.stories.tsx | 3 +-
src/lib/components/color-mode/index.tsx | 8 +-
.../colorLegendDropdown.stories.tsx | 2 +-
.../colorComponents/colorDropdown/index.tsx | 6 +-
.../colorLegend/colorLegendSeqDiv.stories.tsx | 1 -
.../colorComponents/colorLegend/index.tsx | 2 +-
.../colorPicker/colorPicker.stories.tsx | 9 +-
.../colorComponents/colorPicker/index.tsx | 2 +-
src/lib/components/controls/index.tsx | 2 +-
.../components/dropdowns/Dropdown.stories.tsx | 4 +-
src/lib/components/dropdowns/index.tsx | 4 +-
.../errorBoundary/ErrorBoundary.tsx | 4 +-
.../featureFlags/FeatureEnabled.tsx | 2 +-
.../components/featureFlags/featureFlags.ts | 2 +-
src/lib/components/featureFlags/index.ts | 2 +-
src/lib/components/icon/icon.stories.tsx | 2 +-
src/lib/components/icon/index.tsx | 3 +-
src/lib/components/index.ts | 10 +-
src/lib/components/info/index.tsx | 2 +-
src/lib/components/info/info.stories.tsx | 2 +-
src/lib/components/inputs/BooleanInput.tsx | 2 +-
src/lib/components/inputs/CheckboxInput.tsx | 2 +-
src/lib/components/inputs/DropdownInput.tsx | 6 +-
src/lib/components/inputs/EmailInput.tsx | 2 +-
src/lib/components/inputs/NumberInput.tsx | 6 +-
src/lib/components/inputs/RadioInput.tsx | 2 +-
src/lib/components/inputs/SliderInput.tsx | 8 +-
src/lib/components/inputs/TextInput.tsx | 8 +-
src/lib/components/inputs/TimeInput.tsx | 2 +-
.../components/inputs/ToggleSwitchInput.tsx | 4 +-
.../components/inputs/checkbox.stories.tsx | 7 +-
.../components/inputs/dropdown.stories.tsx | 3 +-
src/lib/components/inputs/index.tsx | 14 +-
src/lib/components/inputs/number.stories.tsx | 5 +-
src/lib/components/inputs/radio.stories.tsx | 2 +-
src/lib/components/inputs/slider.stories.tsx | 3 +-
src/lib/components/inputs/text.stories.tsx | 5 +-
src/lib/components/inputs/time.stories.tsx | 2 +-
.../inputs/toggleSwitch.stories.tsx | 3 +-
src/lib/components/layout/Dialog.tsx | 18 +--
src/lib/components/layout/Popover.tsx | 20 +--
src/lib/components/layout/Resizable.tsx | 10 +-
src/lib/components/layout/dialog.stories.tsx | 4 +-
src/lib/components/layout/index.ts | 2 +-
src/lib/components/layout/panel.stories.tsx | 2 -
src/lib/components/layout/popover.stories.tsx | 4 +-
.../nodeDetails/NodeDetails.stories.tsx | 2 +-
src/lib/components/pills/Pill.tsx | 6 +-
src/lib/components/pills/PillHandle.tsx | 2 +-
.../components/pills/stories/pill.stories.tsx | 3 +-
.../pills/stories/pillEntity.stories.tsx | 3 +-
.../pills/stories/pillLogic.stories.tsx | 3 +-
.../pills/stories/pillRelation.stories.tsx | 3 +-
src/lib/components/popover/Popover.tsx | 25 ++--
.../components/popover/PopoverProvider.tsx | 2 +-
.../components/popover/popover.stories.tsx | 14 +-
.../selectors/entityPillSelector.stories.tsx | 1 -
.../selectors/entityPillSelector.tsx | 6 +-
src/lib/components/selectors/textAndIcon.tsx | 4 +-
.../components/tableUI/TableUI.stories.tsx | 2 +-
src/lib/components/tableUI/TableUI.tsx | 5 +-
src/lib/components/tabs/Tab.tsx | 2 +-
.../components/textEditor/ErrorHandler.tsx | 2 -
src/lib/components/textEditor/Placeholder.tsx | 2 -
src/lib/components/textEditor/TextEditor.tsx | 14 +-
.../components/textEditor/VariableNode.tsx | 3 +-
.../plugins/InsertVariablesPlugin.tsx | 4 +-
.../textEditor/plugins/PreviewPlugin.tsx | 17 ++-
.../textEditor/plugins/SaveButtonPlugin.tsx | 2 +-
.../textEditor/plugins/StateChangePlugin.tsx | 4 +-
.../textEditor/plugins/ToolbarPlugin.tsx | 1 -
.../textEditor/textEditor.stories.tsx | 6 +-
src/lib/components/tooltip/Tooltip.tsx | 27 ++--
.../components/tooltip/tooltip.stories.tsx | 5 +-
src/lib/data-access/api/eventBus.tsx | 82 +++++------
src/lib/data-access/api/index.ts | 2 +-
src/lib/data-access/broker/broker.tsx | 2 +-
src/lib/data-access/broker/index.ts | 2 +-
src/lib/data-access/broker/wsProject.ts | 2 +-
src/lib/data-access/broker/wsQuery.ts | 2 +-
src/lib/data-access/broker/wsState.ts | 4 +-
.../data-access/security/dashboardAlerts.tsx | 4 +-
.../security/useAuthentication.tsx | 29 ++--
src/lib/data-access/store/authSlice.ts | 2 +-
.../store/authorizationResourcesSlice.ts | 2 +-
.../store/authorizationUsersSlice.ts | 2 +-
...QueryResultSlice.ts => graphQuerySlice.ts} | 14 +-
src/lib/data-access/store/hooks.ts | 62 ++++----
src/lib/data-access/store/index.ts | 6 +-
.../data-access/store/insightSharingSlice.ts | 2 +-
src/lib/data-access/store/interactionSlice.ts | 2 +-
src/lib/data-access/store/mlSlice.ts | 2 +-
src/lib/data-access/store/projectSlice.ts | 2 +-
src/lib/data-access/store/schemaSlice.spec.ts | 2 +-
src/lib/data-access/store/schemaSlice.ts | 6 +-
src/lib/data-access/store/sessionSlice.ts | 16 +--
src/lib/data-access/store/store.spec.ts | 2 +-
src/lib/data-access/store/store.ts | 20 +--
.../data-access/store/visualizationSlice.ts | 4 +-
src/lib/graph-layout/cytoscapeLayouts.ts | 2 +-
src/lib/graph-layout/dagreLayout.ts | 2 +-
src/lib/graph-layout/graphology.spec.ts | 3 +-
src/lib/graph-layout/graphologyLayouts.ts | 2 +-
src/lib/graph-layout/index.ts | 6 +-
src/lib/graph-layout/layout.ts | 2 +-
.../graph-layout/layoutCreatorUsecase.spec.ts | 2 +-
src/lib/graph-layout/layoutCreatorUsecase.ts | 4 +-
src/lib/graph-layout/listLayouts.ts | 2 +-
src/lib/graph-layout/mockdataLayout.spec.ts | 2 +-
src/lib/index.ts | 2 +-
src/lib/insight-sharing/FormInsight.tsx | 8 +-
src/lib/insight-sharing/InsightDialog.tsx | 14 +-
.../insight-sharing/components/AddItem.tsx | 14 +-
.../insight-sharing/components/Sidebar.tsx | 9 +-
.../components/StartScreen.tsx | 1 -
src/lib/inspector/InspectorPanel.tsx | 8 +-
src/lib/inspector/ResultInspector.tsx | 6 +-
src/lib/inspector/SelectionConfig.tsx | 4 +-
src/lib/management/Explorations.tsx | 1 -
src/lib/management/ManagementDialog.tsx | 12 +-
src/lib/management/ManagementTrigger.tsx | 8 +-
src/lib/management/Members.tsx | 10 +-
src/lib/management/Overview.tsx | 6 +-
src/lib/management/Settings.tsx | 2 -
src/lib/management/Workspace.tsx | 7 +-
src/lib/management/database/DatabaseForm.tsx | 6 +-
src/lib/management/database/DatabaseLine.tsx | 22 ++-
src/lib/management/database/Databases.tsx | 85 +++++------
.../management/database/MockSaveStates.tsx | 3 +-
.../management/database/UpsertDatabase.tsx | 8 +-
.../management/database/useHandleDatabase.ts | 20 +--
src/lib/management/index.ts | 2 +-
src/lib/mock-data/geo-json/index.tsx | 4 +-
src/lib/mock-data/index.ts | 2 +-
.../query-result/bigMockQueryResults.json | 2 +-
src/lib/mock-data/query-result/mockData.ts | 11 +-
.../query-result/mockMobilityQueryResult.json | 2 +-
.../schema/big2ndChamberSchemaRaw.ts | 2 +-
.../mock-data/schema/fincenWithAttributes.ts | 2 +-
src/lib/mock-data/schema/index.ts | 18 ++-
src/lib/mock-data/schema/mock-data.spec.ts | 18 ++-
.../schema/moviesSchemaWithAttributes.ts | 2 +-
.../schema/northwindWithAttributes.ts | 2 +-
.../schema/recommendationsWithAttributes.ts | 2 +-
.../mock-data/schema/slackWithAttributes.ts | 2 +-
.../mock-data/schema/typesMockSchemaRaw.ts | 2 +-
src/lib/querybuilder/index.ts | 2 +-
.../querybuilder/model/graphology/utils.ts | 22 +--
src/lib/querybuilder/model/index.ts | 2 +-
src/lib/querybuilder/model/reactflow/model.ts | 4 +-
src/lib/querybuilder/model/reactflow/utils.ts | 2 +-
.../querybuilder/panel/ManualQueryDialog.tsx | 2 +-
src/lib/querybuilder/panel/QueryBuilder.tsx | 12 +-
.../panel/QueryBuilderContextMenu.tsx | 14 +-
.../panel/QueryBuilderDispatcher.tsx | 4 +-
.../querybuilder/panel/QueryBuilderNav.tsx | 29 ++--
.../QueryBuilderLogicPillsPanel.tsx | 8 +-
.../QueryBuilderRelatedNodesPanel.tsx | 10 +-
.../panel/querysidepanel/QueryMLDialog.tsx | 7 +-
.../panel/querysidepanel/QuerySettings.tsx | 9 +-
.../panel/schemaquerybuilder.stories.tsx | 8 +-
.../stories/querybuilder-simple.stories.tsx | 4 +-
.../querybuilder-single-entity.stories.tsx | 4 +-
...erybuilder-single-relationship.stories.tsx | 4 +-
.../querybuilder/panel/utils/connectorDrop.ts | 2 +-
src/lib/querybuilder/pills/FilterHandle.tsx | 2 +-
.../pills/customFlowLines/connectionDrag.tsx | 1 -
.../pills/customFlowPills/edge-line.tsx | 1 -
.../entitypill/QueryEntityPill.tsx | 10 +-
.../customFlowPills/logicpill/LogicInput.tsx | 2 +-
.../logicpill/QueryLogicPill.tsx | 12 +-
.../relationpill/QueryRelationPill.tsx | 19 ++-
.../querybuilder/pills/dragging/dragPill.ts | 2 +-
.../pills/pillattributes/PillAttributes.tsx | 10 +-
.../pillattributes/PillAttributesItem.tsx | 8 +-
src/lib/schema/model/graphology.ts | 2 +-
.../LayoutDescription/SchemaLayoutConfig.tsx | 6 +-
src/lib/schema/panel/Schema.tsx | 10 +-
src/lib/schema/panel/SchemaList.tsx | 21 +--
src/lib/schema/panel/SchemaSettings.tsx | 4 +-
src/lib/schema/panel/schema.stories.tsx | 2 +-
src/lib/schema/pills/edges/NodeEdge.tsx | 2 +-
src/lib/schema/pills/edges/SelfEdge.tsx | 2 +-
.../pills/nodes/SchemaPopUp/SchemaPopUp.tsx | 8 +-
.../pills/nodes/entity/SchemaEntityPill.tsx | 4 +-
.../nodes/entity/SchemaListEntityPill.tsx | 4 +-
...attribute-analytics-popup-menu.stories.tsx | 4 +-
.../popup/attribute-analytics-popup-menu.tsx | 3 +-
.../node-quality-relation-popup.stories.tsx | 3 +-
...attribute-analytics-popup-menu.stories.tsx | 5 +-
.../attribute-analytics-popup-menu.tsx | 3 +-
.../popup/popupmenus/filterbar.stories.tsx | 3 +-
.../nodes/popup/popupmenus/filterbar.tsx | 2 +-
.../node-quality-entity-popup.stories.tsx | 3 +-
.../popupmenus/node-quality-entity-popup.tsx | 1 -
.../node-quality-relation-popup.stories.tsx | 3 +-
.../node-quality-relation-popup.tsx | 1 -
.../popup/popupmenus/searchbar.stories.tsx | 3 +-
.../nodes/relation/SchemaListRelationPill.tsx | 4 +-
.../nodes/relation/SchemaRelationPill.tsx | 12 +-
.../schema/schema-utils/flowUtils.test.tsx | 10 +-
src/lib/schema/schema-utils/index.ts | 4 +-
.../schema-utils/schemaUsecases.spec.ts | 2 +-
src/lib/schema/schema-utils/schemaUsecases.ts | 6 +-
.../schema/schema-utils/schemaUtils.spec.ts | 2 +-
src/lib/sidebar/index.tsx | 5 +-
src/lib/sidebar/search/NestedItem.tsx | 2 -
src/lib/sidebar/search/SearchBar.tsx | 8 +-
src/lib/vis/common/types.ts | 9 +-
src/lib/vis/components/VisualizationPanel.tsx | 30 ++--
.../vis/components/VisualizationTabBar.tsx | 12 +-
.../vis/components/config/SelectionConfig.tsx | 3 +-
.../components/config/VisualizationConfig.tsx | 18 +--
.../config/VisualizationSettings.tsx | 6 +-
src/lib/vis/components/config/components.tsx | 2 +-
src/lib/vis/components/config/index.tsx | 4 +-
src/lib/vis/views/NoData.tsx | 2 +-
src/lib/vis/views/Querying.tsx | 1 -
src/lib/vis/views/Recommender.tsx | 6 +-
src/lib/vis/views/index.tsx | 2 +-
.../arcplotvis/arcplotvis.spec.tsx | 3 +-
.../visualizations/arcplotvis/arcplotvis.tsx | 21 ++-
.../arcplotvis/arcplotvis.types.ts | 6 +-
.../arcplotvis/components/arcplotd3links.tsx | 1 -
src/lib/vis/visualizations/index.tsx | 8 +-
.../mapvis/components/ActionBar.tsx | 1 -
.../mapvis/components/Attribution.tsx | 2 -
.../mapvis/components/MapDataInspector.tsx | 8 +-
.../mapvis/components/MapSettings.tsx | 6 +-
.../mapvis/components/SearchBar.tsx | 4 +-
.../visualizations/mapvis/components/index.ts | 2 +-
.../mapvis/hooks/useCoordinateLookup.tsx | 6 +-
.../mapvis/hooks/useSelectionLayer.tsx | 2 +-
.../choropleth-layer/ChoroplethLayer.tsx | 29 ++--
.../choropleth-layer/ChoroplethOptions.tsx | 7 +-
.../mapvis/layers/heatmap-layer/HeatLayer.tsx | 4 +-
.../layers/heatmap-layer/HeatLayerOptions.tsx | 6 +-
.../visualizations/mapvis/layers/index.tsx | 12 +-
.../layers/nodelink-layer/NodeLinkLayer.tsx | 31 ++--
.../layers/nodelink-layer/NodeLinkOptions.tsx | 10 +-
.../visualizations/mapvis/mapvis.stories.tsx | 2 +-
src/lib/vis/visualizations/mapvis/mapvis.tsx | 30 ++--
.../vis/visualizations/mapvis/mapvis.types.ts | 2 +-
src/lib/vis/visualizations/mapvis/utils.ts | 3 +-
.../matrixvis/components/BitmapTextLabel.ts | 4 +-
.../components/ColumnGraphicsComponent.tsx | 4 +-
.../components/ColumnSpriteComponent.tsx | 8 +-
.../matrixvis/components/MatrixExport.tsx | 7 +-
.../matrixvis/components/MatrixPixi.tsx | 111 +++++++-------
.../components/ReorderingManager.tsx | 28 ++--
.../matrixvis/matrix.stories.tsx | 6 +-
.../visualizations/matrixvis/matrixvis.tsx | 12 +-
.../nodelinkvis/components/NLExport.tsx | 7 +-
.../nodelinkvis/components/NLForce.tsx | 25 ----
.../components/NLMachineLearning.tsx | 4 +-
.../nodelinkvis/components/NLPixi.tsx | 16 +--
.../nodelinkvis/components/NLPopup.tsx | 4 +-
.../nodelinkvis/components/query2NL.tsx | 4 +-
.../nodelinkvis/components/utils.tsx | 2 +-
.../nodelinkvis/nodelinkvis.stories.tsx | 7 +-
.../nodelinkvis/nodelinkvis.tsx | 22 +--
.../paohvis/components/HyperRangeBlock.tsx | 34 ++---
.../paohvis/components/RowLabels.tsx | 25 ++--
.../paohvis/paohvis.stories.tsx | 12 +-
.../vis/visualizations/paohvis/paohvis.tsx | 20 +--
src/lib/vis/visualizations/paohvis/types.ts | 2 +-
.../paohvis/utils/AttributesFilterUseCase.tsx | 6 +-
.../paohvis/utils/dataProcessing.tsx | 4 +-
.../visualizations/paohvis/utils/utils.tsx | 18 +--
.../rawjsonvis/rawjsonvis.spec.tsx | 3 +-
.../rawjsonvis/rawjsonvis.stories.tsx | 7 +-
.../visualizations/rawjsonvis/rawjsonvis.tsx | 8 +-
.../components/EdgesLayer.tsx | 4 +-
.../components/Scatterplot.tsx | 28 ++--
.../semanticsubstratesvis/components/types.ts | 2 +-
.../semanticsubstratesvis/components/utils.ts | 6 +-
.../configPanel/SemSubsConfigPanel.tsx | 14 +-
.../semanticsubstratesvis.stories.tsx | 6 +-
.../semanticsubstratesvis.tsx | 34 ++---
.../semanticsubstratesvis/utils.ts | 4 +-
.../tablevis/components/Table.tsx | 6 +-
.../tablevis/tablevis.stories.tsx | 4 +-
.../vis/visualizations/tablevis/tablevis.tsx | 2 +-
src/lib/vis/visualizations/vis0D/Vis0D.tsx | 12 +-
.../visualizations/vis0D/vis0D.stories.tsx | 2 +-
src/lib/vis/visualizations/vis1D/Vis1D.tsx | 12 +-
.../vis1D/components/CustomChartPlotly.tsx | 2 +-
.../vis1D/components/MakePlot.ts | 2 +-
.../visualizations/vis1D/vis1D.stories.tsx | 2 +-
src/main.tsx | 11 +-
tailwind.config.ts | 7 +-
tsconfig.app.json | 4 +-
tsconfig.node.json | 4 +-
vitest.config.js | 2 +-
323 files changed, 1219 insertions(+), 1308 deletions(-)
create mode 100644 .vscode/settings.json
rename src/lib/data-access/store/{graphQueryResultSlice.ts => graphQuerySlice.ts} (96%)
delete mode 100644 src/lib/vis/visualizations/nodelinkvis/components/NLForce.tsx
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 000000000..ea90b7e0f
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,10 @@
+{
+ "typescript.validate.enable": true,
+ "typescript.tsserver.experimental.enableProjectDiagnostics": true,
+ "editor.formatOnSave": true,
+ "editor.codeActionsOnSave": {
+ "source.fixAll": "always",
+ "source.organizeImports": "always",
+ "source.sortMembers": "always"
+ }
+}
diff --git a/eslint.config.js b/eslint.config.js
index 20b1b622a..daccc7a34 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -1,7 +1,7 @@
import js from '@eslint/js';
-import globals from 'globals';
import reactHooks from 'eslint-plugin-react-hooks';
import reactRefresh from 'eslint-plugin-react-refresh';
+import globals from 'globals';
import tseslint from 'typescript-eslint';
export default tseslint.config(
diff --git a/src/App.tsx b/src/App.tsx
index 5cb3ae631..9c708c7e6 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,22 +1,22 @@
-import { useEffect, useState } from 'react';
-import { useActiveQuery, useAppDispatch, useAuthCache, useML, useSessionCache } from '@/lib/data-access/store';
-import { addError, setCurrentTheme } from '@/lib/data-access/store/configSlice';
-import { resetGraphQueryResults, queryingBackend } from '@/lib/data-access/store/graphQueryResultSlice';
+import { ErrorBoundary } from '@/lib/components/errorBoundary';
import { FrozenOverlay, Resizable } from '@/lib/components/layout';
-import { DashboardAlerts } from '@/lib/data-access/security/dashboardAlerts';
import { EventBus } from '@/lib/data-access/api/eventBus';
import { URLParams, setParam } from '@/lib/data-access/api/url';
-import { VisualizationPanel } from '@/lib/vis';
+import { Broker, wsQueryRequest } from '@/lib/data-access/broker';
+import { DashboardAlerts } from '@/lib/data-access/security/dashboardAlerts';
+import { useActiveQuery, useAppDispatch, useAuthCache, useML, useSessionCache } from '@/lib/data-access/store';
+import { addError, setCurrentTheme } from '@/lib/data-access/store/configSlice';
+import { queryingBackend, resetGraphQueryResults } from '@/lib/data-access/store/graphQuerySlice';
+import { InsightDialog } from '@/lib/insight-sharing';
+import { InspectorPanel } from '@/lib/inspector';
import { QueryBuilder } from '@/lib/querybuilder';
+import { Schema } from '@/lib/schema/panel';
import { SideNavTab, Sidebar } from '@/lib/sidebar';
-import { InspectorPanel } from '@/lib/inspector';
import { SearchBar } from '@/lib/sidebar/search/SearchBar';
-import { Schema } from '@/lib/schema/panel';
-import { InsightDialog } from '@/lib/insight-sharing';
-import { Broker, wsQueryRequest } from '@/lib/data-access/broker';
-import { ErrorBoundary } from '@/lib/components/errorBoundary';
-import { Onboarding } from './app/onboarding/onboarding';
+import { VisualizationPanel } from '@/lib/vis';
+import { useEffect, useState } from 'react';
import { Navbar } from './app/navbar/navbar';
+import { Onboarding } from './app/onboarding/onboarding';
export type App = {
load?: string;
diff --git a/src/app/navbar/navbar.tsx b/src/app/navbar/navbar.tsx
index 230411c2c..25823d3b3 100644
--- a/src/app/navbar/navbar.tsx
+++ b/src/app/navbar/navbar.tsx
@@ -10,14 +10,14 @@
/* The comment above was added so the code coverage wouldn't count this file towards code coverage.
* We do not test components/renderfunctions/styling files.
* See testing plan for more details.*/
-import React, { useState, useRef, useEffect } from 'react';
-import GpLogo from './gp-logo';
import { getEnvVariable } from '@/config';
-import { useAuthentication, useAuthCache, Button, DropdownItem, useAppDispatch, useActiveSaveState } from '@/lib';
+import { Button, DropdownItem, useActiveSaveState, useAppDispatch, useAuthCache, useAuthentication } from '@/lib';
import { FeatureEnabled } from '@/lib/components/featureFlags';
-import { Popover, PopoverTrigger, PopoverContent } from '@/lib/components/popover';
-import { ManagementViews, ManagementTrigger } from '@/lib/management';
+import { Popover, PopoverContent, PopoverTrigger } from '@/lib/components/popover';
import { addError } from '@/lib/data-access/store/configSlice';
+import { ManagementTrigger, ManagementViews } from '@/lib/management';
+import { useEffect, useRef, useState } from 'react';
+import GpLogo from './gp-logo';
export const Navbar = () => {
const dispatch = useAppDispatch();
diff --git a/src/app/onboarding/onboarding.tsx b/src/app/onboarding/onboarding.tsx
index f904cd63f..2906e67e7 100644
--- a/src/app/onboarding/onboarding.tsx
+++ b/src/app/onboarding/onboarding.tsx
@@ -1,9 +1,9 @@
-import React, { useState, useEffect } from 'react';
+import { Button } from '@/lib/components/buttons';
+import { useEffect, useState } from 'react';
import Joyride, { ACTIONS, EVENTS, STATUS, Step } from 'react-joyride';
import { useLocation } from 'react-router-dom';
-import { Button } from '@/lib/components/buttons';
-import { useCases } from './use-cases';
import { OnboardingTooltip } from './tooltip';
+import { useCases } from './use-cases';
interface OnboardingState {
run?: boolean;
diff --git a/src/app/onboarding/tooltip.tsx b/src/app/onboarding/tooltip.tsx
index 9c74c1fde..a0efa188a 100644
--- a/src/app/onboarding/tooltip.tsx
+++ b/src/app/onboarding/tooltip.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
import { TooltipRenderProps } from 'react-joyride';
const OnboardingTooltip = (props: TooltipRenderProps) => {
diff --git a/src/app/onboarding/use-cases/index.tsx b/src/app/onboarding/use-cases/index.tsx
index 1805d31db..f64d3030d 100644
--- a/src/app/onboarding/use-cases/index.tsx
+++ b/src/app/onboarding/use-cases/index.tsx
@@ -1,5 +1,5 @@
-import { generalScript } from './general';
import { fraudScript } from './fraud';
+import { generalScript } from './general';
export const useCases = {
general: generalScript,
diff --git a/src/config/colors.ts b/src/config/colors.ts
index a9a1615c7..c26d37340 100644
--- a/src/config/colors.ts
+++ b/src/config/colors.ts
@@ -132,7 +132,7 @@ export const visualizationColors = {
'#212326',
'#151719',
],
- }
+ },
},
GPSelected: {
title: 'Selected',
diff --git a/src/config/styling/variables.css b/src/config/styling/variables.css
index 6e243e7d8..4f02332ac 100644
--- a/src/config/styling/variables.css
+++ b/src/config/styling/variables.css
@@ -108,7 +108,6 @@
--clr-cat-12: var(--clr-neutral-50);
--clr-cat-13: var(--clr-neutral-50);
--clr-cat-14: var(--clr-neutral-50);
-
}
@media (prefers-color-scheme: dark) {
diff --git a/src/lib/components/DataTypeIcon/index.tsx b/src/lib/components/DataTypeIcon/index.tsx
index 6b5bdc26e..8f626b006 100644
--- a/src/lib/components/DataTypeIcon/index.tsx
+++ b/src/lib/components/DataTypeIcon/index.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import { SchemaAttributeTypes } from '../../schema';
+import { SchemaAttributeTypes } from 'ts-common';
const IconMap: Record<SchemaAttributeTypes, string> = {
float: 'icon-[carbon--string-integer]',
diff --git a/src/lib/components/DesignGuides/styleGuide.mdx b/src/lib/components/DesignGuides/styleGuide.mdx
index 84309a9ba..6781b6b14 100644
--- a/src/lib/components/DesignGuides/styleGuide.mdx
+++ b/src/lib/components/DesignGuides/styleGuide.mdx
@@ -32,6 +32,7 @@ Style files can be found in:
```jsx
<div className="text-primary-500 border-secondary-200 hover:bg-accent-100"></div>
```
+
In "dark-mode" the colors will automatically be inverted. If you want to override
If you want to have a separate color for dark mode, you can use the "dark:" prefix. E.g.:
diff --git a/src/lib/components/accordion/accordion.stories.tsx b/src/lib/components/accordion/accordion.stories.tsx
index bb0c2b067..de538a5c7 100644
--- a/src/lib/components/accordion/accordion.stories.tsx
+++ b/src/lib/components/accordion/accordion.stories.tsx
@@ -1,6 +1,5 @@
-import React from 'react';
-import { StoryObj, Meta } from '@storybook/react';
-import { Accordion, AccordionItem, AccordionHead, AccordionBody } from '.';
+import { Meta, StoryObj } from '@storybook/react';
+import { Accordion, AccordionBody, AccordionHead, AccordionItem } from '.';
import { EntityPill, RelationPill } from '../pills';
export default {
diff --git a/src/lib/components/accordion/index.tsx b/src/lib/components/accordion/index.tsx
index ee5fbd542..eec3bf5df 100644
--- a/src/lib/components/accordion/index.tsx
+++ b/src/lib/components/accordion/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState, ReactElement } from 'react';
+import React, { ReactElement, useState } from 'react';
import { Button } from '../buttons';
type AccordionProps = {
diff --git a/src/lib/components/buttons/Button.tsx b/src/lib/components/buttons/Button.tsx
index 107559d85..404941775 100644
--- a/src/lib/components/buttons/Button.tsx
+++ b/src/lib/components/buttons/Button.tsx
@@ -1,7 +1,7 @@
import React, { useMemo } from 'react';
-import styles from './buttons.module.scss';
import { Icon } from '../icon';
import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';
+import styles from './buttons.module.scss';
export type ButtonProps = {
as?: 'button' | 'a' | 'div';
diff --git a/src/lib/components/buttons/button.stories.tsx b/src/lib/components/buttons/button.stories.tsx
index 869a4ab38..2eaa48424 100644
--- a/src/lib/components/buttons/button.stories.tsx
+++ b/src/lib/components/buttons/button.stories.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from '.';
diff --git a/src/lib/components/buttons/buttons.module.scss b/src/lib/components/buttons/buttons.module.scss
index 9ef8f2ce3..a28e90bee 100644
--- a/src/lib/components/buttons/buttons.module.scss
+++ b/src/lib/components/buttons/buttons.module.scss
@@ -39,8 +39,8 @@
}
.btn-icon-only {
line-height: 1;
- padding-left: 0!important;
- padding-right: 0!important;
+ padding-left: 0 !important;
+ padding-right: 0 !important;
}
.btn-2xl {
@apply text-lg min-h-11 min-w-11 px-3.5 py-2.5 gap-2 rounded;
@@ -71,7 +71,8 @@
@apply ring-primary-400 hover:ring-primary-500;
--btn-color: var(--clr-pri--600);
--focus-shadow-clr: var(--clr-pri--500);
- &:hover, &:focus {
+ &:hover,
+ &:focus {
--btn-color: var(--clr-pri--500);
--btn-color-light-hover: var(--clr-pri--600);
}
@@ -80,7 +81,8 @@
.btn-secondary {
@apply ring-secondary-400 hover:ring-secondary-500;
--btn-color: var(--clr-sec--700);
- &:hover, &:focus {
+ &:hover,
+ &:focus {
--btn-color: var(--clr-sec--800);
--btn-color-light-hover: var(--clr-sec--700);
}
@@ -89,7 +91,8 @@
@apply ring-danger-400 hover:ring-danger-500;
--btn-color: var(--clr-dang--600);
--focus-shadow-clr: var(--clr-dang--500);
- &:hover, &:focus {
+ &:hover,
+ &:focus {
--btn-color: var(--clr-dang--500);
--btn-color-light-hover: var(--clr-dang--600);
}
diff --git a/src/lib/components/buttons/overview.mdx b/src/lib/components/buttons/overview.mdx
index 1ebc20ede..1a0021bb0 100644
--- a/src/lib/components/buttons/overview.mdx
+++ b/src/lib/components/buttons/overview.mdx
@@ -13,30 +13,33 @@ A button is used a lot in GP.
### Variants and types
- <div className="grid grid-cols-2 gap-4 py-4">
- <div className="flex flex-col gap-3">
- <Button variantType="primary" variant="solid" label="Solid" onClick={() => alert('Button clicked')} />
- <Button variantType="primary" variant="outline" label="Outline" onClick={() => alert('Button clicked')} />
- <Button variantType="primary" variant="ghost" label="Ghost" onClick={() => alert('Button clicked')} />
- </div>
- <div className="flex flex-col gap-3">
- <Button variantType="secondary" variant="solid" label="Solid" onClick={() => alert('Button clicked')} />
- <Button variantType="secondary" variant="outline" label="Outline" onClick={() => alert('Button clicked')} />
- <Button variantType="secondary" variant="ghost" label="Ghost" onClick={() => alert('Button clicked')} />
- </div>
- <div className="flex flex-col gap-3">
- <Button variantType="danger" variant="solid" label="Solid" onClick={() => alert('Button clicked')} />
- <Button variantType="danger" variant="outline" label="Outline" onClick={() => alert('Button clicked')} />
- <Button variantType="danger" variant="ghost" label="Ghost" onClick={() => alert('Button clicked')} />
- </div>
- <div className="flex flex-col gap-3">
- <Button variantType="primary" variant="solid" label="Solid disabled" onClick={() => alert('Button clicked')} disabled />
- <Button variantType="secondary" variant="outline" label="Outline disabled" onClick={() => alert('Button clicked')} disabled />
- <Button variantType="danger" variant="ghost" label="Ghost disabled" onClick={() => alert('Button clicked')} disabled />
- </div>
+{' '}
+
+<div className="grid grid-cols-2 gap-4 py-4">
+ <div className="flex flex-col gap-3">
+ <Button variantType="primary" variant="solid" label="Solid" onClick={() => alert('Button clicked')} />
+ <Button variantType="primary" variant="outline" label="Outline" onClick={() => alert('Button clicked')} />
+ <Button variantType="primary" variant="ghost" label="Ghost" onClick={() => alert('Button clicked')} />
+ </div>
+ <div className="flex flex-col gap-3">
+ <Button variantType="secondary" variant="solid" label="Solid" onClick={() => alert('Button clicked')} />
+ <Button variantType="secondary" variant="outline" label="Outline" onClick={() => alert('Button clicked')} />
+ <Button variantType="secondary" variant="ghost" label="Ghost" onClick={() => alert('Button clicked')} />
+ </div>
+ <div className="flex flex-col gap-3">
+ <Button variantType="danger" variant="solid" label="Solid" onClick={() => alert('Button clicked')} />
+ <Button variantType="danger" variant="outline" label="Outline" onClick={() => alert('Button clicked')} />
+ <Button variantType="danger" variant="ghost" label="Ghost" onClick={() => alert('Button clicked')} />
</div>
+ <div className="flex flex-col gap-3">
+ <Button variantType="primary" variant="solid" label="Solid disabled" onClick={() => alert('Button clicked')} disabled />
+ <Button variantType="secondary" variant="outline" label="Outline disabled" onClick={() => alert('Button clicked')} disabled />
+ <Button variantType="danger" variant="ghost" label="Ghost disabled" onClick={() => alert('Button clicked')} disabled />
+ </div>
+</div>
### With Icon
+
<div className="grid gap-4">
<div className="flex flex-row gap-3">
<Button variantType="primary" variant="solid" label="leading (default)" iconComponent="icon-[ic--baseline-add]" />
@@ -46,26 +49,94 @@ A button is used a lot in GP.
</div>
### Sizes
- <div className="grid gap-4">
+
+{' '}
+
+<div className="grid gap-4">
<div className="flex flex-row gap-3">
- <Button variantType="primary" size="2xl" label="2xl size" iconComponent="icon-[ic--baseline-expand]" onClick={() => alert('Button clicked')} />
- <Button variantType="primary" size="xl" label="xl size" iconComponent="icon-[ic--baseline-expand]" onClick={() => alert('Button clicked')} />
- <Button variantType="primary" size="lg" label="lg size" iconComponent="icon-[ic--baseline-expand]" onClick={() => alert('Button clicked')} />
- <Button variantType="primary" size="md" label="md size (default)" iconComponent="icon-[ic--baseline-expand]" onClick={() => alert('Button clicked')} />
- <Button variantType="primary" size="sm" label="sm size" iconComponent="icon-[ic--baseline-expand]" onClick={() => alert('Button clicked')} />
- <Button variantType="primary" size="xs" label="xs size" iconComponent="icon-[ic--baseline-expand]" onClick={() => alert('Button clicked')} />
- <Button variantType="primary" size="2xs" label="2xs size" iconComponent="icon-[ic--baseline-expand]" onClick={() => alert('Button clicked')} />
- <Button variantType="primary" size="3xs" label="3xs size" iconComponent="icon-[ic--baseline-expand]" onClick={() => alert('Button clicked')} />
+ <Button
+ variantType="primary"
+ size="2xl"
+ label="2xl size"
+ iconComponent="icon-[ic--baseline-expand]"
+ onClick={() => alert('Button clicked')}
+ />
+ <Button
+ variantType="primary"
+ size="xl"
+ label="xl size"
+ iconComponent="icon-[ic--baseline-expand]"
+ onClick={() => alert('Button clicked')}
+ />
+ <Button
+ variantType="primary"
+ size="lg"
+ label="lg size"
+ iconComponent="icon-[ic--baseline-expand]"
+ onClick={() => alert('Button clicked')}
+ />
+ <Button
+ variantType="primary"
+ size="md"
+ label="md size (default)"
+ iconComponent="icon-[ic--baseline-expand]"
+ onClick={() => alert('Button clicked')}
+ />
+ <Button
+ variantType="primary"
+ size="sm"
+ label="sm size"
+ iconComponent="icon-[ic--baseline-expand]"
+ onClick={() => alert('Button clicked')}
+ />
+ <Button
+ variantType="primary"
+ size="xs"
+ label="xs size"
+ iconComponent="icon-[ic--baseline-expand]"
+ onClick={() => alert('Button clicked')}
+ />
+ <Button
+ variantType="primary"
+ size="2xs"
+ label="2xs size"
+ iconComponent="icon-[ic--baseline-expand]"
+ onClick={() => alert('Button clicked')}
+ />
+ <Button
+ variantType="primary"
+ size="3xs"
+ label="3xs size"
+ iconComponent="icon-[ic--baseline-expand]"
+ onClick={() => alert('Button clicked')}
+ />
</div>
</div>
### Other
+
<div className="grid gap-4">
<div className="flex flex-row gap-3">
<Button variantType="primary" variant="outline" size="xs" label="Rounded" rounded onClick={() => alert('Button clicked')} />
<Button variantType="primary" iconComponent="icon-[ic--baseline-add]" size="xs" rounded onClick={() => alert('Button clicked')} />
- <Button variantType="primary" variant="outline" iconComponent="icon-[ic--baseline-add]" iconPosition="trailing" label="Label and icon" size="2xs" rounded onClick={() => alert('Button clicked')} />
- <Button variantType="primary" variant="ghost" iconComponent="icon-[ic--baseline-add]" size="3xs" rounded onClick={() => alert('Button clicked')} />
+ <Button
+ variantType="primary"
+ variant="outline"
+ iconComponent="icon-[ic--baseline-add]"
+ iconPosition="trailing"
+ label="Label and icon"
+ size="2xs"
+ rounded
+ onClick={() => alert('Button clicked')}
+ />
+ <Button
+ variantType="primary"
+ variant="ghost"
+ iconComponent="icon-[ic--baseline-add]"
+ size="3xs"
+ rounded
+ onClick={() => alert('Button clicked')}
+ />
</div>
<div>
<Button block variantType="primary" size="xl" label="Block" onClick={() => alert('Button clicked')} />
diff --git a/src/lib/components/charts/Axis/axis.stories.tsx b/src/lib/components/charts/Axis/axis.stories.tsx
index f672fe09d..1f45cdf11 100644
--- a/src/lib/components/charts/Axis/axis.stories.tsx
+++ b/src/lib/components/charts/Axis/axis.stories.tsx
@@ -1,8 +1,7 @@
// BarPlot.stories.tsx
-import React from 'react';
import { Meta } from '@storybook/react';
-import AxisComponent from '.';
import { scaleLinear } from 'd3';
+import AxisComponent from '.';
export default {
title: 'Visual charts/Charts/Axis',
diff --git a/src/lib/components/charts/Axis/index.tsx b/src/lib/components/charts/Axis/index.tsx
index db98bf5be..410fda823 100644
--- a/src/lib/components/charts/Axis/index.tsx
+++ b/src/lib/components/charts/Axis/index.tsx
@@ -1,5 +1,5 @@
-import React, { useEffect, useRef } from 'react';
import * as d3 from 'd3';
+import React, { useEffect, useRef } from 'react';
export type AxisComponentProps = {
scale: d3.AxisScale<number | { valueOf(): number }>;
diff --git a/src/lib/components/charts/barplot/barplot.stories.tsx b/src/lib/components/charts/barplot/barplot.stories.tsx
index 4c3cea848..b9622d53d 100644
--- a/src/lib/components/charts/barplot/barplot.stories.tsx
+++ b/src/lib/components/charts/barplot/barplot.stories.tsx
@@ -1,5 +1,4 @@
// BarPlot.stories.tsx
-import React from 'react';
import { Meta } from '@storybook/react';
import { BarPlot } from '.';
diff --git a/src/lib/components/charts/barplot/index.tsx b/src/lib/components/charts/barplot/index.tsx
index ef65bdea3..b1c7ee6be 100644
--- a/src/lib/components/charts/barplot/index.tsx
+++ b/src/lib/components/charts/barplot/index.tsx
@@ -1,7 +1,7 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@/lib/components/tooltip';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/lib/components/tooltip';
+import { parseValue } from '@/lib/data-access/store/graphQuerySlice';
import { axisLeft, bin, extent, format, max, range, scaleBand, scaleLinear, select } from 'd3';
-import { parseValue } from '@/lib/data-access/store/graphQueryResultSlice';
+import { useEffect, useMemo, useRef, useState } from 'react';
export type BarPlotProps = {
data: { category: string; count: number }[];
diff --git a/src/lib/components/charts/colorLegendCat/colorLegendCat.stories.tsx b/src/lib/components/charts/colorLegendCat/colorLegendCat.stories.tsx
index 2c4e2a0de..c85bcfc34 100644
--- a/src/lib/components/charts/colorLegendCat/colorLegendCat.stories.tsx
+++ b/src/lib/components/charts/colorLegendCat/colorLegendCat.stories.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
import { Meta } from '@storybook/react';
import ColorLegendCat from '.';
diff --git a/src/lib/components/charts/colorLegendSeqDiv/colorLegendSeqDiv.stories.tsx b/src/lib/components/charts/colorLegendSeqDiv/colorLegendSeqDiv.stories.tsx
index 9d83cc515..b3608eb5d 100644
--- a/src/lib/components/charts/colorLegendSeqDiv/colorLegendSeqDiv.stories.tsx
+++ b/src/lib/components/charts/colorLegendSeqDiv/colorLegendSeqDiv.stories.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
import { Meta } from '@storybook/react';
import { ColorLegendSeqDiv } from '.';
diff --git a/src/lib/components/charts/colorLegendSeqDiv/index.tsx b/src/lib/components/charts/colorLegendSeqDiv/index.tsx
index b1639467c..d811ddd09 100644
--- a/src/lib/components/charts/colorLegendSeqDiv/index.tsx
+++ b/src/lib/components/charts/colorLegendSeqDiv/index.tsx
@@ -1,5 +1,5 @@
import { axisBottom, scaleLinear, select } from 'd3';
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
export type ColorLegendSeqDivProps = {
colors: string[];
diff --git a/src/lib/components/charts/heatmap1D/index.tsx b/src/lib/components/charts/heatmap1D/index.tsx
index 51a93ef78..082c5898d 100644
--- a/src/lib/components/charts/heatmap1D/index.tsx
+++ b/src/lib/components/charts/heatmap1D/index.tsx
@@ -1,6 +1,6 @@
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/lib/components/tooltip';
+import { bin, extent, range, scaleQuantize, select } from 'd3';
import { useEffect, useMemo, useRef, useState } from 'react';
-import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@/lib/components/tooltip';
-import { bin, extent, range, select, scaleQuantize } from 'd3';
import { visualizationColors } from 'ts-common';
export type heatmap1DProps = {
diff --git a/src/lib/components/charts/indicatorGraph/index.tsx b/src/lib/components/charts/indicatorGraph/index.tsx
index 871fe5573..f38ee902d 100644
--- a/src/lib/components/charts/indicatorGraph/index.tsx
+++ b/src/lib/components/charts/indicatorGraph/index.tsx
@@ -1,6 +1,6 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@/lib/components/tooltip';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/lib/components/tooltip';
import { scaleLinear, select } from 'd3';
+import { useEffect, useMemo, useRef, useState } from 'react';
export type IndicatorGraphProps = {
data: number;
diff --git a/src/lib/components/charts/scatterplotD3/index.tsx b/src/lib/components/charts/scatterplotD3/index.tsx
index faed9556c..e49016323 100644
--- a/src/lib/components/charts/scatterplotD3/index.tsx
+++ b/src/lib/components/charts/scatterplotD3/index.tsx
@@ -1,5 +1,5 @@
-import React, { useEffect, useRef } from 'react';
import * as d3 from 'd3';
+import React, { useEffect, useRef } from 'react';
export interface ScatterplotProps {
data: regionData;
@@ -74,7 +74,7 @@ const Scatterplot: React.FC<ScatterplotProps> = ({ data, visualConfig, xScale, o
const simulation = d3
.forceSimulation<DataPointXY>(dataCircles)
.force('x', d3.forceX(d => xScale(d.x!)).strength(4))
- .force('y', d3.forceY(d => yScale(0.0)).strength(0.1))
+ .force('y', d3.forceY(() => yScale(0.0)).strength(0.1))
.force('collide', d3.forceCollide(radius * 1.25).strength(0.5));
const circles = groupMargin
@@ -82,8 +82,8 @@ const Scatterplot: React.FC<ScatterplotProps> = ({ data, visualConfig, xScale, o
.data(dataCircles)
.enter()
.append('circle')
- .attr('class', (d, i) => `${data.idData[i]}`)
- .attr('cx', (d, i) => xScale(d.x))
+ .attr('class', (_, i) => `${data.idData[i]}`)
+ .attr('cx', d => xScale(d.x))
.attr('cy', d => yScale(d.y))
.attr('r', radius)
.attr('stroke', 'gray')
diff --git a/src/lib/components/charts/scatterplotD3/scatterplot.stories.tsx b/src/lib/components/charts/scatterplotD3/scatterplot.stories.tsx
index fdda32dc2..7e47709df 100644
--- a/src/lib/components/charts/scatterplotD3/scatterplot.stories.tsx
+++ b/src/lib/components/charts/scatterplotD3/scatterplot.stories.tsx
@@ -1,7 +1,6 @@
-import React from 'react';
import { Meta } from '@storybook/react';
-import Scatterplot, { VisualRegionConfig, regionData, DataPoint } from '.';
import { scaleLinear } from 'd3';
+import Scatterplot, { DataPoint, VisualRegionConfig, regionData } from '.';
const Component: Meta<typeof Scatterplot> = {
title: 'Visual charts/Charts/ScatterplotD3',
diff --git a/src/lib/components/charts/scatterplot_pixi/index.tsx b/src/lib/components/charts/scatterplot_pixi/index.tsx
index 3b78477bb..829b5d4f3 100644
--- a/src/lib/components/charts/scatterplot_pixi/index.tsx
+++ b/src/lib/components/charts/scatterplot_pixi/index.tsx
@@ -1,6 +1,6 @@
-import React, { useEffect, useRef } from 'react';
import * as d3 from 'd3';
import * as PIXI from 'pixi.js';
+import React, { useEffect, useRef } from 'react';
export interface ScatterplotProps {
data: regionData;
diff --git a/src/lib/components/charts/scatterplot_pixi/scatterplot.stories.tsx b/src/lib/components/charts/scatterplot_pixi/scatterplot.stories.tsx
index b191cde24..84babc987 100644
--- a/src/lib/components/charts/scatterplot_pixi/scatterplot.stories.tsx
+++ b/src/lib/components/charts/scatterplot_pixi/scatterplot.stories.tsx
@@ -1,8 +1,7 @@
// Scatterplot.stories.tsx
-import React from 'react';
import { Meta } from '@storybook/react';
-import Scatterplot, { VisualRegionConfig, regionData, DataPoint } from '.';
import { scaleLinear } from 'd3';
+import Scatterplot, { DataPoint, VisualRegionConfig, regionData } from '.';
const Component: Meta<typeof Scatterplot> = {
title: 'Visual charts/Charts/ScatterplotPIXI',
diff --git a/src/lib/components/color-mode/index.tsx b/src/lib/components/color-mode/index.tsx
index 749710828..89e2b156c 100644
--- a/src/lib/components/color-mode/index.tsx
+++ b/src/lib/components/color-mode/index.tsx
@@ -1,8 +1,8 @@
-import React, { useEffect } from 'react';
-import { Button } from '../buttons';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../components/tooltip';
-import { setTheme, Theme } from '@/lib/data-access/store/configSlice';
import { useAppDispatch, useConfig } from '@/lib/data-access/store';
+import { setTheme, Theme } from '@/lib/data-access/store/configSlice';
+import { useEffect } from 'react';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../components/tooltip';
+import { Button } from '../buttons';
const ColorMode = () => {
const config = useConfig();
diff --git a/src/lib/components/colorComponents/colorDropdown/colorLegendDropdown.stories.tsx b/src/lib/components/colorComponents/colorDropdown/colorLegendDropdown.stories.tsx
index 2451064d3..7658ecb79 100644
--- a/src/lib/components/colorComponents/colorDropdown/colorLegendDropdown.stories.tsx
+++ b/src/lib/components/colorComponents/colorDropdown/colorLegendDropdown.stories.tsx
@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
import DropdownColorLegend from '.';
const Component: Meta<typeof DropdownColorLegend> = {
diff --git a/src/lib/components/colorComponents/colorDropdown/index.tsx b/src/lib/components/colorComponents/colorDropdown/index.tsx
index e617a8760..0803b9a95 100644
--- a/src/lib/components/colorComponents/colorDropdown/index.tsx
+++ b/src/lib/components/colorComponents/colorDropdown/index.tsx
@@ -1,7 +1,7 @@
-import React, { useState } from 'react';
-import { DropdownTrigger, DropdownContainer, DropdownItemContainer } from '@/lib/components/dropdowns';
-import ColorLegend from '../colorLegend/index.js';
import { dataColors } from '@/config';
+import { DropdownContainer, DropdownItemContainer, DropdownTrigger } from '@/lib/components/dropdowns';
+import { useState } from 'react';
+import ColorLegend from '../colorLegend/index.js';
type TailwindColor = {
colors: string | { [key: number]: string };
diff --git a/src/lib/components/colorComponents/colorLegend/colorLegendSeqDiv.stories.tsx b/src/lib/components/colorComponents/colorLegend/colorLegendSeqDiv.stories.tsx
index 1e7cc8a2c..1adbdcec1 100644
--- a/src/lib/components/colorComponents/colorLegend/colorLegendSeqDiv.stories.tsx
+++ b/src/lib/components/colorComponents/colorLegend/colorLegendSeqDiv.stories.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
import { Meta } from '@storybook/react';
import ColorLegend from '.';
diff --git a/src/lib/components/colorComponents/colorLegend/index.tsx b/src/lib/components/colorComponents/colorLegend/index.tsx
index 8b527e81d..080e1ce6c 100644
--- a/src/lib/components/colorComponents/colorLegend/index.tsx
+++ b/src/lib/components/colorComponents/colorLegend/index.tsx
@@ -1,5 +1,5 @@
import { axisBottom, scaleLinear, select } from 'd3';
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
export type ColorLegendProps = {
colors: { [key: number]: string };
diff --git a/src/lib/components/colorComponents/colorPicker/colorPicker.stories.tsx b/src/lib/components/colorComponents/colorPicker/colorPicker.stories.tsx
index ca51c8978..4d6139acc 100644
--- a/src/lib/components/colorComponents/colorPicker/colorPicker.stories.tsx
+++ b/src/lib/components/colorComponents/colorPicker/colorPicker.stories.tsx
@@ -1,5 +1,6 @@
-import React, { useState } from 'react';
+import { nodeColorRGB } from '@/lib/vis/visualizations/mapvis/utils';
import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
import { ColorPicker } from '.';
const Component: Meta<typeof ColorPicker> = {
@@ -13,10 +14,10 @@ export default Component;
type Story = StoryObj<typeof Component>;
-export const ColorPickerStory: Story = (args: any) => {
- const [value, setValue] = useState<[number, number, number]>([251, 150, 55]);
+export const ColorPickerStory: Story = () => {
+ const [value, setValue] = useState<number>(0);
- return <ColorPicker value={value} onChange={setValue} />;
+ return <ColorPicker value={nodeColorRGB(value)} onChange={setValue} />;
};
ColorPickerStory.args = {};
diff --git a/src/lib/components/colorComponents/colorPicker/index.tsx b/src/lib/components/colorComponents/colorPicker/index.tsx
index f74bff712..650a6f395 100644
--- a/src/lib/components/colorComponents/colorPicker/index.tsx
+++ b/src/lib/components/colorComponents/colorPicker/index.tsx
@@ -1,5 +1,5 @@
import { visualizationColors } from '@/config';
-import { Popover, PopoverTrigger, PopoverContent } from '@/lib/components/layout/Popover';
+import { Popover, PopoverContent, PopoverTrigger } from '@/lib/components/layout/Popover';
type Props = {
value: [number, number, number];
diff --git a/src/lib/components/controls/index.tsx b/src/lib/components/controls/index.tsx
index a28c32b41..8fb1cbc07 100644
--- a/src/lib/components/controls/index.tsx
+++ b/src/lib/components/controls/index.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
type Props = {
children: ReactNode;
diff --git a/src/lib/components/dropdowns/Dropdown.stories.tsx b/src/lib/components/dropdowns/Dropdown.stories.tsx
index 371f96269..9dcbc1c1d 100644
--- a/src/lib/components/dropdowns/Dropdown.stories.tsx
+++ b/src/lib/components/dropdowns/Dropdown.stories.tsx
@@ -1,10 +1,10 @@
/* eslint-disable react-hooks/rules-of-hooks */
// Dropdown.stories.tsx
-import React, { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
-import { DropdownContainer, DropdownTrigger, DropdownItemContainer, DropdownItem } from './index';
+import { useState } from 'react';
import { Icon } from '../icon';
+import { DropdownContainer, DropdownItem, DropdownItemContainer, DropdownTrigger } from './index';
const metaDropdown: Meta<typeof DropdownContainer> = {
component: DropdownContainer,
diff --git a/src/lib/components/dropdowns/index.tsx b/src/lib/components/dropdowns/index.tsx
index d18577ba2..804b7cd4c 100644
--- a/src/lib/components/dropdowns/index.tsx
+++ b/src/lib/components/dropdowns/index.tsx
@@ -1,6 +1,6 @@
-import React, { useState, useRef, ReactNode } from 'react';
+import { Popover, PopoverContent, PopoverOptions, PopoverTrigger } from '@/lib/components/popover';
+import React, { ReactNode, useRef, useState } from 'react';
import { Icon } from '../icon';
-import { PopoverContent, PopoverTrigger, Popover, PopoverOptions } from '@/lib/components/popover';
export const DropdownContainer = ({ children, ...props }: { children: React.ReactNode } & PopoverOptions) => {
return (
diff --git a/src/lib/components/errorBoundary/ErrorBoundary.tsx b/src/lib/components/errorBoundary/ErrorBoundary.tsx
index 41d9f5c7e..e13290e1e 100644
--- a/src/lib/components/errorBoundary/ErrorBoundary.tsx
+++ b/src/lib/components/errorBoundary/ErrorBoundary.tsx
@@ -1,7 +1,7 @@
-import React, { Component, ErrorInfo, ReactNode } from 'react';
-import { Button } from '../buttons';
import { useAppDispatch } from '@/lib/data-access';
import { addInfo } from '@/lib/data-access/store/configSlice';
+import { Component, ErrorInfo, ReactNode } from 'react';
+import { Button } from '../buttons';
interface ErrorBoundaryProps {
children: ReactNode;
diff --git a/src/lib/components/featureFlags/FeatureEnabled.tsx b/src/lib/components/featureFlags/FeatureEnabled.tsx
index 75ba6e0b2..9998ecda5 100644
--- a/src/lib/components/featureFlags/FeatureEnabled.tsx
+++ b/src/lib/components/featureFlags/FeatureEnabled.tsx
@@ -1,5 +1,5 @@
-import { canViewFeature, FeatureFlagName } from '.';
import { ReactNode } from 'react';
+import { canViewFeature, FeatureFlagName } from '.';
export function FeatureEnabled({ featureFlag, children }: { featureFlag: FeatureFlagName; children: ReactNode }) {
return canViewFeature(featureFlag) ? children : null;
diff --git a/src/lib/components/featureFlags/featureFlags.ts b/src/lib/components/featureFlags/featureFlags.ts
index 0463406f0..e2ea91740 100644
--- a/src/lib/components/featureFlags/featureFlags.ts
+++ b/src/lib/components/featureFlags/featureFlags.ts
@@ -1,4 +1,4 @@
-import { getEnvVariable, EnvVarKey } from '@/config';
+import { EnvVarKey, getEnvVariable } from '@/config';
const getFeatureVariable = (flagId: EnvVarKey): boolean => {
// TODO: move feature flag storage to database instead of env variables
diff --git a/src/lib/components/featureFlags/index.ts b/src/lib/components/featureFlags/index.ts
index 20f816cf1..b4e54f764 100644
--- a/src/lib/components/featureFlags/index.ts
+++ b/src/lib/components/featureFlags/index.ts
@@ -1,2 +1,2 @@
-export * from './featureFlags';
export * from './FeatureEnabled';
+export * from './featureFlags';
diff --git a/src/lib/components/icon/icon.stories.tsx b/src/lib/components/icon/icon.stories.tsx
index fb79f1775..fb5821530 100644
--- a/src/lib/components/icon/icon.stories.tsx
+++ b/src/lib/components/icon/icon.stories.tsx
@@ -1,5 +1,5 @@
-import { StoryObj, Meta } from '@storybook/react';
import { Icon, sizesArray } from '@/lib/components/icon';
+import { Meta, StoryObj } from '@storybook/react';
/**
* # Icon Component
diff --git a/src/lib/components/icon/index.tsx b/src/lib/components/icon/index.tsx
index f208efb30..fbface6a3 100644
--- a/src/lib/components/icon/index.tsx
+++ b/src/lib/components/icon/index.tsx
@@ -1,5 +1,4 @@
-import React, { ReactElement, ReactNode } from 'react';
-import { SVGProps } from 'react';
+import React, { ReactElement, ReactNode, SVGProps } from 'react';
// Define Sizes and IconProps types
export const sizesArray = [8, 10, 12, 14, 16, 20, 24, 28, 32, 36, 40, 48, 56] as const;
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index ed9def1ff..6811af1cc 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -8,13 +8,13 @@ export * from './forms';
export * from './icon';
export * from './info';
export * from './inputs';
-export * from './pagination';
-export * from './tooltip';
+export * from './layout';
export * from './Legend';
export * from './LoadingSpinner';
export * from './nodeDetails';
-export * from './Popup';
-export * from './popover';
-export * from './layout';
+export * from './pagination';
export * from './pills';
+export * from './popover';
+export * from './Popup';
export * from './tabs';
+export * from './tooltip';
diff --git a/src/lib/components/info/index.tsx b/src/lib/components/info/index.tsx
index d091ffcb4..8e83ef381 100644
--- a/src/lib/components/info/index.tsx
+++ b/src/lib/components/info/index.tsx
@@ -1,5 +1,5 @@
import { Icon, Sizes } from '@/lib/components/icon';
-import { Tooltip, TooltipContent, TooltipTrigger, TooltipProvider } from '@/lib/components/tooltip';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/lib/components/tooltip';
type Props = {
tooltip: string;
diff --git a/src/lib/components/info/info.stories.tsx b/src/lib/components/info/info.stories.tsx
index b036825dd..c23128bfc 100644
--- a/src/lib/components/info/info.stories.tsx
+++ b/src/lib/components/info/info.stories.tsx
@@ -1,5 +1,5 @@
-import { StoryObj, Meta } from '@storybook/react';
import { sizesArray } from '@/lib/components/icon';
+import { Meta, StoryObj } from '@storybook/react';
import Info from '.';
export default {
diff --git a/src/lib/components/inputs/BooleanInput.tsx b/src/lib/components/inputs/BooleanInput.tsx
index 49d4821cf..d4e6aa3a7 100644
--- a/src/lib/components/inputs/BooleanInput.tsx
+++ b/src/lib/components/inputs/BooleanInput.tsx
@@ -1,5 +1,5 @@
import Info from '../info';
-import { Tooltip, TooltipTrigger, TooltipContent } from '../tooltip';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';
import { BooleanProps } from './types';
export const BooleanInput = ({ label, value, onChange, tooltip, info, size, required, className }: BooleanProps) => {
diff --git a/src/lib/components/inputs/CheckboxInput.tsx b/src/lib/components/inputs/CheckboxInput.tsx
index 1160390cd..1322f0f63 100644
--- a/src/lib/components/inputs/CheckboxInput.tsx
+++ b/src/lib/components/inputs/CheckboxInput.tsx
@@ -1,4 +1,4 @@
-import { Tooltip, TooltipTrigger, TooltipContent } from '../tooltip';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';
import { CheckboxProps } from './types';
export const CheckboxInput = ({ label, value, options, onChange, tooltip, disabled }: CheckboxProps) => {
diff --git a/src/lib/components/inputs/DropdownInput.tsx b/src/lib/components/inputs/DropdownInput.tsx
index 1159c4a76..3337eac70 100644
--- a/src/lib/components/inputs/DropdownInput.tsx
+++ b/src/lib/components/inputs/DropdownInput.tsx
@@ -1,9 +1,9 @@
import React, { useEffect, useRef } from 'react';
-import { DropdownContainer, DropdownTrigger, DropdownItemContainer, DropdownItem } from '../dropdowns';
+import { DropdownContainer, DropdownItem, DropdownItemContainer, DropdownTrigger } from '../dropdowns';
import Info from '../info';
-import { Tooltip, TooltipTrigger, TooltipContent } from '../tooltip';
-import { DropdownProps } from './types';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';
import { TextInput } from './TextInput';
+import { DropdownProps } from './types';
function parsedValue(item: number | string | { [key: string]: string }, key: boolean = false) {
switch (typeof item) {
diff --git a/src/lib/components/inputs/EmailInput.tsx b/src/lib/components/inputs/EmailInput.tsx
index a8f534609..bccab45b5 100644
--- a/src/lib/components/inputs/EmailInput.tsx
+++ b/src/lib/components/inputs/EmailInput.tsx
@@ -1,6 +1,6 @@
+import { Button, Input } from '@/lib/components';
import { useState } from 'react';
import { EmailProps } from './types';
-import { Button, Input } from '@/lib/components';
export const EmailInput = ({
placeholder,
diff --git a/src/lib/components/inputs/NumberInput.tsx b/src/lib/components/inputs/NumberInput.tsx
index d53eea620..5833b3678 100644
--- a/src/lib/components/inputs/NumberInput.tsx
+++ b/src/lib/components/inputs/NumberInput.tsx
@@ -1,9 +1,9 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
import { Button } from '../buttons';
import Info from '../info';
-import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '../tooltip';
-import { NumberProps } from './types';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../tooltip';
import styles from './inputs.module.scss';
+import { NumberProps } from './types';
export const NumberInput = ({
label,
diff --git a/src/lib/components/inputs/RadioInput.tsx b/src/lib/components/inputs/RadioInput.tsx
index ebdbf9841..a4aabe157 100644
--- a/src/lib/components/inputs/RadioInput.tsx
+++ b/src/lib/components/inputs/RadioInput.tsx
@@ -1,4 +1,4 @@
-import { Tooltip, TooltipTrigger, TooltipContent } from '../tooltip';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';
import { RadioProps } from './types';
export const RadioInput = ({ label, value, options, onChange, tooltip }: RadioProps) => {
diff --git a/src/lib/components/inputs/SliderInput.tsx b/src/lib/components/inputs/SliderInput.tsx
index 4f79c25c7..6647a02df 100644
--- a/src/lib/components/inputs/SliderInput.tsx
+++ b/src/lib/components/inputs/SliderInput.tsx
@@ -1,7 +1,7 @@
-import { Tooltip, TooltipTrigger, TooltipContent } from '../tooltip';
-import { SliderProps } from './types';
-import styles from './slider.module.scss';
import { useState } from 'react';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';
+import styles from './slider.module.scss';
+import { SliderProps } from './types';
export const SliderInput = ({
label,
@@ -45,7 +45,7 @@ export const SliderInput = ({
onChange(parseFloat(e.target.value));
}
}}
- onMouseUp={e => {
+ onMouseUp={() => {
if (onChangeConfirmed) {
onChangeConfirmed(currentValue);
}
diff --git a/src/lib/components/inputs/TextInput.tsx b/src/lib/components/inputs/TextInput.tsx
index 27bda5363..42a8ad0ad 100644
--- a/src/lib/components/inputs/TextInput.tsx
+++ b/src/lib/components/inputs/TextInput.tsx
@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
import Info from '../info';
-import { Tooltip, TooltipTrigger, TooltipContent } from '../tooltip';
-import { TextProps } from './types';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';
import styles from './inputs.module.scss';
+import { TextProps } from './types';
export const TextInput = ({
label,
@@ -23,7 +23,7 @@ export const TextInput = ({
className,
...props
}: TextProps) => {
- const [isValid, setIsValid] = React.useState<boolean>(true);
+ const [isValid, setIsValid] = useState<boolean>(true);
const handleInputChange = (inputValue: string) => {
if (required && validate) {
diff --git a/src/lib/components/inputs/TimeInput.tsx b/src/lib/components/inputs/TimeInput.tsx
index e5958d2c9..f55efa163 100644
--- a/src/lib/components/inputs/TimeInput.tsx
+++ b/src/lib/components/inputs/TimeInput.tsx
@@ -1,4 +1,4 @@
-import { Tooltip, TooltipTrigger, TooltipContent } from '../tooltip';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';
import { TimeProps } from './types';
export const TimeInput = ({ label, value, onChange, tooltip, showTimezone = true }: TimeProps) => {
diff --git a/src/lib/components/inputs/ToggleSwitchInput.tsx b/src/lib/components/inputs/ToggleSwitchInput.tsx
index e0a4e6973..879bc8342 100644
--- a/src/lib/components/inputs/ToggleSwitchInput.tsx
+++ b/src/lib/components/inputs/ToggleSwitchInput.tsx
@@ -1,5 +1,5 @@
-import { useState, useEffect } from 'react';
-import { Tooltip, TooltipTrigger, TooltipContent } from '../tooltip';
+import { useEffect, useState } from 'react';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';
import { ToggleSwitchProps } from './types';
export const ToggleSwitchInput = ({ label, classText, value, tooltip, onChange, position, className }: ToggleSwitchProps) => {
diff --git a/src/lib/components/inputs/checkbox.stories.tsx b/src/lib/components/inputs/checkbox.stories.tsx
index 686deb844..9fad80576 100644
--- a/src/lib/components/inputs/checkbox.stories.tsx
+++ b/src/lib/components/inputs/checkbox.stories.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { CheckboxInput } from './CheckboxInput';
@@ -17,7 +16,7 @@ export const CheckboxInputStory: Story = {
type: 'checkbox',
label: 'Checkbox component',
options: ['Option 1', 'Option 2'],
- onChange: value => {},
+ onChange: () => {},
},
};
@@ -27,7 +26,7 @@ export const CheckboxInputStoryDisabled: Story = {
label: 'Checkbox component (all disabled)',
options: ['Option 1', 'Option 2'],
disabled: [true, true],
- onChange: value => {},
+ onChange: () => {},
},
};
@@ -37,6 +36,6 @@ export const CheckboxInputStoryPartiallyDisabled: Story = {
label: 'Checkbox component (partially disabled)',
options: ['Option 1', 'Option 2'],
disabled: [true, false],
- onChange: value => {},
+ onChange: () => {},
},
};
diff --git a/src/lib/components/inputs/dropdown.stories.tsx b/src/lib/components/inputs/dropdown.stories.tsx
index afecde9fe..a97c6acc8 100644
--- a/src/lib/components/inputs/dropdown.stories.tsx
+++ b/src/lib/components/inputs/dropdown.stories.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { DropdownInput } from './DropdownInput';
@@ -18,6 +17,6 @@ export const DropdownInputStory: Story = {
label: 'Select component',
options: ['Option 1', 'Option 2'],
disabled: true,
- onChange: value => {},
+ onChange: () => {},
},
};
diff --git a/src/lib/components/inputs/index.tsx b/src/lib/components/inputs/index.tsx
index 7adc08750..806b75e7b 100644
--- a/src/lib/components/inputs/index.tsx
+++ b/src/lib/components/inputs/index.tsx
@@ -1,25 +1,25 @@
import { BooleanInput } from './BooleanInput';
import { CheckboxInput } from './CheckboxInput';
import { DropdownInput } from './DropdownInput';
+import { EmailInput } from './EmailInput';
import { NumberInput } from './NumberInput';
import { RadioInput } from './RadioInput';
import { SliderInput } from './SliderInput';
import { TextInput } from './TextInput';
import { TimeInput } from './TimeInput';
import { ToggleSwitchInput } from './ToggleSwitchInput';
-import { EmailInput } from './EmailInput';
import {
- InputProps,
- SliderProps,
- TextProps,
+ BooleanProps,
CheckboxProps,
DropdownProps,
- RadioProps,
- BooleanProps,
+ EmailProps,
+ InputProps,
NumberProps,
+ RadioProps,
+ SliderProps,
+ TextProps,
TimeProps,
ToggleSwitchProps,
- EmailProps,
} from './types';
export const Input = (props: InputProps) => {
diff --git a/src/lib/components/inputs/number.stories.tsx b/src/lib/components/inputs/number.stories.tsx
index 8b3a8aeba..ad0ba6133 100644
--- a/src/lib/components/inputs/number.stories.tsx
+++ b/src/lib/components/inputs/number.stories.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { NumberInput } from './NumberInput';
@@ -18,7 +17,7 @@ export const NumberInputStory: Story = {
label: 'Number input',
placeholder: 'Put here a number',
required: true,
- onChange: value => {},
+ onChange: () => {},
},
};
@@ -31,6 +30,6 @@ export const RequiredNumberInputStory: Story = {
validate: value => {
return value.length > 0;
},
- onChange: value => {},
+ onChange: () => {},
},
};
diff --git a/src/lib/components/inputs/radio.stories.tsx b/src/lib/components/inputs/radio.stories.tsx
index 43a265348..1e1171494 100644
--- a/src/lib/components/inputs/radio.stories.tsx
+++ b/src/lib/components/inputs/radio.stories.tsx
@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
import { RadioInput } from './RadioInput';
const Component: Meta<typeof RadioInput> = {
diff --git a/src/lib/components/inputs/slider.stories.tsx b/src/lib/components/inputs/slider.stories.tsx
index 8f2f5e3eb..a2b26f9f6 100644
--- a/src/lib/components/inputs/slider.stories.tsx
+++ b/src/lib/components/inputs/slider.stories.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { SliderInput } from './SliderInput';
@@ -22,6 +21,6 @@ export const SliderInputStory: Story = {
unit: 'px',
value: 50,
showValue: true,
- onChange: value => {},
+ onChange: () => {},
},
};
diff --git a/src/lib/components/inputs/text.stories.tsx b/src/lib/components/inputs/text.stories.tsx
index 5b61233eb..e9dcccd3b 100644
--- a/src/lib/components/inputs/text.stories.tsx
+++ b/src/lib/components/inputs/text.stories.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { TextInput } from './TextInput';
@@ -18,7 +17,7 @@ export const TextInputStory: Story = {
label: 'Text input',
placeholder: 'Put here some text',
required: true,
- onChange: value => {},
+ onChange: () => {},
},
};
@@ -31,6 +30,6 @@ export const RequiredTextInputStory: Story = {
validate: value => {
return value.length > 0;
},
- onChange: value => {},
+ onChange: () => {},
},
};
diff --git a/src/lib/components/inputs/time.stories.tsx b/src/lib/components/inputs/time.stories.tsx
index d36fa84be..e91d3dd6b 100644
--- a/src/lib/components/inputs/time.stories.tsx
+++ b/src/lib/components/inputs/time.stories.tsx
@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
import { TimeInput } from './TimeInput';
const Component: Meta<typeof TimeInput> = {
diff --git a/src/lib/components/inputs/toggleSwitch.stories.tsx b/src/lib/components/inputs/toggleSwitch.stories.tsx
index 48a39a385..57af717f8 100644
--- a/src/lib/components/inputs/toggleSwitch.stories.tsx
+++ b/src/lib/components/inputs/toggleSwitch.stories.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { ToggleSwitchInput } from './ToggleSwitchInput';
@@ -17,6 +16,6 @@ export const ToggleSwitchInputStory: Story = {
type: 'toggle',
label: 'Toggle Switch component',
value: false,
- onChange: value => {},
+ onChange: () => {},
},
};
diff --git a/src/lib/components/layout/Dialog.tsx b/src/lib/components/layout/Dialog.tsx
index 345fef11b..ea1ce519b 100644
--- a/src/lib/components/layout/Dialog.tsx
+++ b/src/lib/components/layout/Dialog.tsx
@@ -1,16 +1,16 @@
-import * as React from 'react';
import {
- useFloating,
+ FloatingFocusManager,
+ FloatingOverlay,
+ FloatingPortal,
useClick,
useDismiss,
- useRole,
+ useFloating,
+ useId,
useInteractions,
useMergeRefs,
- FloatingPortal,
- FloatingFocusManager,
- FloatingOverlay,
- useId,
+ useRole,
} from '@floating-ui/react';
+import * as React from 'react';
import { Button, ButtonProps } from '../buttons';
interface DialogOptions {
@@ -109,7 +109,7 @@ export const DialogTrigger = React.forwardRef<HTMLElement, React.HTMLProps<HTMLE
const ref = useMergeRefs([context.data.refs.setReference, propRef, childrenRef]);
// `asChild` allows the user to pass any element as the anchor
- if (asChild && React.isValidElement(children)) {
+ if (asChild && React.isValidElement(children) && children.props != null) {
return React.cloneElement(
children,
context.interactions.getReferenceProps({
@@ -117,7 +117,7 @@ export const DialogTrigger = React.forwardRef<HTMLElement, React.HTMLProps<HTMLE
...props,
...children.props,
'data-state': context.open ? 'open' : 'closed',
- }),
+ } as any), // Any because data-state is not an HTML property.
);
}
diff --git a/src/lib/components/layout/Popover.tsx b/src/lib/components/layout/Popover.tsx
index 7454f80c2..a21476fa0 100644
--- a/src/lib/components/layout/Popover.tsx
+++ b/src/lib/components/layout/Popover.tsx
@@ -1,20 +1,20 @@
-import * as React from 'react';
import {
- useFloating,
autoUpdate,
- offset,
flip,
+ FloatingFocusManager,
+ FloatingPortal,
+ offset,
+ Placement,
shift,
useClick,
useDismiss,
- useRole,
+ useFloating,
+ useId,
useInteractions,
useMergeRefs,
- Placement,
- FloatingPortal,
- FloatingFocusManager,
- useId,
+ useRole,
} from '@floating-ui/react';
+import * as React from 'react';
export interface PopoverOptions {
initialOpen?: boolean;
@@ -142,14 +142,14 @@ export const PopoverTrigger = React.forwardRef<HTMLElement, React.HTMLProps<HTML
const cursorClass = disabled ? 'cursor-not-allowed' : 'cursor-pointer';
// `asChild` allows the user to pass any element as the anchor
- if (asChild && React.isValidElement(children)) {
+ if (asChild && React.isValidElement(children) && children.props != null) {
return React.cloneElement(
children,
context.interactions.getReferenceProps({
ref,
...props,
...children.props,
- className: `${children.props.className || ''} ${cursorClass}`,
+ className: `${(children.props as React.HTMLProps<HTMLElement>).className ?? ''} ${cursorClass}`,
//'data-state': context.open ? 'open' : 'closed',
}),
);
diff --git a/src/lib/components/layout/Resizable.tsx b/src/lib/components/layout/Resizable.tsx
index 762266c05..2dfbe9599 100644
--- a/src/lib/components/layout/Resizable.tsx
+++ b/src/lib/components/layout/Resizable.tsx
@@ -72,7 +72,7 @@ export const Resizable = ({
}
}, [ref.current, windowSize]);
- function onMouseDown(e: React.MouseEvent<HTMLDivElement, MouseEvent>) {
+ function onMouseDown() {
setDragging(true);
window.addEventListener('mouseup', onMouseUp);
}
@@ -106,14 +106,14 @@ export const Resizable = ({
}
}
}
- function onTouchStart(e: React.TouchEvent<HTMLDivElement>) {
+ function onTouchStart() {
setDragging(true);
}
- function onTouchMove(e: React.TouchEvent<HTMLDivElement>) {}
- function onTouchEnd(e: React.TouchEvent<HTMLDivElement>) {
+ function onTouchMove() {}
+ function onTouchEnd() {
setDragging(false);
}
- function onTouchCancel(e: React.TouchEvent<HTMLDivElement>) {
+ function onTouchCancel() {
setDragging(false);
}
diff --git a/src/lib/components/layout/dialog.stories.tsx b/src/lib/components/layout/dialog.stories.tsx
index c66bee3e6..9736d894e 100644
--- a/src/lib/components/layout/dialog.stories.tsx
+++ b/src/lib/components/layout/dialog.stories.tsx
@@ -1,9 +1,9 @@
// Dialog.stories.tsx
/* eslint-disable react-hooks/rules-of-hooks */
-import React, { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
-import { Dialog, DialogTrigger, DialogContent, DialogHeading, DialogDescription, DialogClose } from './Dialog';
+import { useState } from 'react';
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogHeading, DialogTrigger } from './Dialog';
const metaDialog: Meta<typeof Dialog> = {
component: Dialog,
diff --git a/src/lib/components/layout/index.ts b/src/lib/components/layout/index.ts
index e2a065262..d64927efb 100644
--- a/src/lib/components/layout/index.ts
+++ b/src/lib/components/layout/index.ts
@@ -1,4 +1,4 @@
export * from './Dialog';
+export * from './FrozenOverlay';
export * from './Panel';
export * from './Resizable';
-export * from './FrozenOverlay';
diff --git a/src/lib/components/layout/panel.stories.tsx b/src/lib/components/layout/panel.stories.tsx
index 8ccb22c5c..48fcae5eb 100644
--- a/src/lib/components/layout/panel.stories.tsx
+++ b/src/lib/components/layout/panel.stories.tsx
@@ -1,6 +1,4 @@
// Panel.stories.tsx
-
-import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { Panel } from './Panel';
diff --git a/src/lib/components/layout/popover.stories.tsx b/src/lib/components/layout/popover.stories.tsx
index 4580b243c..dad407648 100644
--- a/src/lib/components/layout/popover.stories.tsx
+++ b/src/lib/components/layout/popover.stories.tsx
@@ -1,10 +1,10 @@
// Popover.stories.tsx
/* eslint-disable react-hooks/rules-of-hooks */
-import React, { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
-import { Popover, PopoverTrigger, PopoverContent, PopoverHeading, PopoverDescription, PopoverClose } from './Popover';
+import { useState } from 'react';
import { Icon } from '../icon';
+import { Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverHeading, PopoverTrigger } from './Popover';
const metaPopover: Meta<typeof Popover> = {
component: Popover,
title: 'Components/Layout/Popover',
diff --git a/src/lib/components/nodeDetails/NodeDetails.stories.tsx b/src/lib/components/nodeDetails/NodeDetails.stories.tsx
index 9ebc14c60..a83688634 100644
--- a/src/lib/components/nodeDetails/NodeDetails.stories.tsx
+++ b/src/lib/components/nodeDetails/NodeDetails.stories.tsx
@@ -1,7 +1,7 @@
-import type { Meta, StoryObj } from '@storybook/react';
import { NodeDetails, NodeDetailsProps } from '@/lib/components/nodeDetails';
import { SchemaPopUp, SchemaPopUpProps } from '@/lib/schema/pills/nodes/SchemaPopUp/SchemaPopUp';
import { NLPopUp, NLPopUpProps } from '@/lib/vis/visualizations/nodelinkvis/components/NLPopup';
+import type { Meta, StoryObj } from '@storybook/react';
const meta: Meta<typeof NodeDetails> = {
component: NodeDetails,
diff --git a/src/lib/components/pills/Pill.tsx b/src/lib/components/pills/Pill.tsx
index be1bab662..511973f6e 100644
--- a/src/lib/components/pills/Pill.tsx
+++ b/src/lib/components/pills/Pill.tsx
@@ -1,9 +1,9 @@
import React, { useContext, useState } from 'react';
-import { pillWidth, pillHeight, pillXPadding, pillInnerMargin, topLineHeight, pillBorderWidth, pillAttributesPadding } from './pill.const';
import { Position } from 'reactflow';
-import { PillHandle } from './PillHandle';
-import { PillContext } from './PillContext';
import { QueryRelationDirection } from 'ts-common';
+import { pillAttributesPadding, pillBorderWidth, pillHeight, pillInnerMargin, pillWidth, pillXPadding, topLineHeight } from './pill.const';
+import { PillContext } from './PillContext';
+import { PillHandle } from './PillHandle';
export type PillI = {
onHovered?: (hovered: boolean) => void;
diff --git a/src/lib/components/pills/PillHandle.tsx b/src/lib/components/pills/PillHandle.tsx
index ff27a3c29..ea2a0f51e 100644
--- a/src/lib/components/pills/PillHandle.tsx
+++ b/src/lib/components/pills/PillHandle.tsx
@@ -1,6 +1,6 @@
import React, { useContext, useMemo } from 'react';
import { Position } from 'reactflow';
-import { pillHeight, pillWidth, topLineHeight, pillBorderWidth } from './pill.const';
+import { pillBorderWidth, pillHeight, pillWidth, topLineHeight } from './pill.const';
import { PillContext } from './PillContext';
export const PillHandle = (props: {
diff --git a/src/lib/components/pills/stories/pill.stories.tsx b/src/lib/components/pills/stories/pill.stories.tsx
index 20c3c21d1..50250c5fe 100644
--- a/src/lib/components/pills/stories/pill.stories.tsx
+++ b/src/lib/components/pills/stories/pill.stories.tsx
@@ -1,6 +1,5 @@
-import React from 'react';
-import { Meta } from '@storybook/react';
import { configureStore } from '@reduxjs/toolkit';
+import { Meta } from '@storybook/react';
import { Provider } from 'react-redux';
import { Pill } from '../Pill';
diff --git a/src/lib/components/pills/stories/pillEntity.stories.tsx b/src/lib/components/pills/stories/pillEntity.stories.tsx
index 2ee0f8e12..9bca9774f 100644
--- a/src/lib/components/pills/stories/pillEntity.stories.tsx
+++ b/src/lib/components/pills/stories/pillEntity.stories.tsx
@@ -1,6 +1,5 @@
-import React from 'react';
-import { Meta } from '@storybook/react';
import { configureStore } from '@reduxjs/toolkit';
+import { Meta } from '@storybook/react';
import { Provider } from 'react-redux';
import { EntityPill } from '../Pill';
diff --git a/src/lib/components/pills/stories/pillLogic.stories.tsx b/src/lib/components/pills/stories/pillLogic.stories.tsx
index 5ef1affd2..969cd09d2 100644
--- a/src/lib/components/pills/stories/pillLogic.stories.tsx
+++ b/src/lib/components/pills/stories/pillLogic.stories.tsx
@@ -1,6 +1,5 @@
-import React from 'react';
-import { Meta } from '@storybook/react';
import { configureStore } from '@reduxjs/toolkit';
+import { Meta } from '@storybook/react';
import { Provider } from 'react-redux';
import { LogicPill } from '../Pill';
diff --git a/src/lib/components/pills/stories/pillRelation.stories.tsx b/src/lib/components/pills/stories/pillRelation.stories.tsx
index 535c07b97..4d84fa314 100644
--- a/src/lib/components/pills/stories/pillRelation.stories.tsx
+++ b/src/lib/components/pills/stories/pillRelation.stories.tsx
@@ -1,6 +1,5 @@
-import React from 'react';
-import { Meta } from '@storybook/react';
import { configureStore } from '@reduxjs/toolkit';
+import { Meta } from '@storybook/react';
import { Provider } from 'react-redux';
import { RelationPill } from '../Pill';
diff --git a/src/lib/components/popover/Popover.tsx b/src/lib/components/popover/Popover.tsx
index 1fe5c6fdd..e40db1e87 100644
--- a/src/lib/components/popover/Popover.tsx
+++ b/src/lib/components/popover/Popover.tsx
@@ -1,26 +1,25 @@
-import React, { useEffect } from 'react';
+import { Button, usePopoverGlobalContext } from '@/lib';
+import type { Alignment, Placement } from '@floating-ui/react';
import {
- useFloating,
+ arrow,
autoUpdate,
- offset,
flip,
- shift,
+ FloatingArrow,
+ FloatingPortal,
hide,
- arrow,
+ offset,
+ shift,
useClick,
- useHover,
- useFocus,
useDismiss,
- useRole,
+ useFloating,
+ useFocus,
+ useHover,
useInteractions,
useMergeRefs,
- FloatingPortal,
- FloatingArrow,
+ useRole,
} from '@floating-ui/react';
-import type { Placement, Alignment } from '@floating-ui/react';
-import { Button } from '@/lib';
+import React, { useEffect } from 'react';
import { v4 as uuidv4 } from 'uuid';
-import { usePopoverGlobalContext } from '@/lib';
export interface PopoverOptions {
id?: string;
diff --git a/src/lib/components/popover/PopoverProvider.tsx b/src/lib/components/popover/PopoverProvider.tsx
index b20952dd7..cc92d65c5 100644
--- a/src/lib/components/popover/PopoverProvider.tsx
+++ b/src/lib/components/popover/PopoverProvider.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
interface PopoverGlobalContextProps {
openPopover: (id: string) => void;
diff --git a/src/lib/components/popover/popover.stories.tsx b/src/lib/components/popover/popover.stories.tsx
index 3309a6bd1..de31d7bac 100644
--- a/src/lib/components/popover/popover.stories.tsx
+++ b/src/lib/components/popover/popover.stories.tsx
@@ -1,6 +1,6 @@
// Popover.stories.tsx
+import { Popover, PopoverContent, PopoverProvider, PopoverTrigger } from '@/lib';
import { Meta, StoryObj } from '@storybook/react';
-import { Popover, PopoverTrigger, PopoverContent, PopoverProvider } from '@/lib';
export default {
title: 'Components/Popover',
@@ -31,14 +31,6 @@ export default {
control: 'boolean',
description: 'Show a close button on the popover',
},
- delayOpen: {
- control: 'number',
- description: 'Delay (hover/focus trigger only) before the popover opens (ms)',
- },
- delayClose: {
- control: 'number',
- description: 'Delay (hover/focus trigger only) before the popover closes (ms)',
- },
id: {
control: { disable: true },
description: 'Unique identifier to manage multiple popovers, can be set manually else auto-generated',
@@ -56,12 +48,10 @@ export default {
description: 'Initial state of the popover',
},
children: { table: { disable: true } },
- boundaryElement: { table: { disable: true } },
interactive: { table: { disable: true } },
delay: { table: { disable: true } },
onOpenChange: { table: { disable: true } },
open: { table: { disable: true } },
- initialOpen: { table: { disable: true } },
},
} as Meta<typeof Popover>;
@@ -112,8 +102,6 @@ export const Default: Story = {
activation: 'click',
showArrow: true,
showCloseButton: false,
- delayOpen: 500,
- delayClose: 150,
initialOpen: false,
},
};
diff --git a/src/lib/components/selectors/entityPillSelector.stories.tsx b/src/lib/components/selectors/entityPillSelector.stories.tsx
index 33ef2c2b1..e2c1ea039 100644
--- a/src/lib/components/selectors/entityPillSelector.stories.tsx
+++ b/src/lib/components/selectors/entityPillSelector.stories.tsx
@@ -1,4 +1,3 @@
-import React, { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { EntityPillSelector } from './entityPillSelector';
diff --git a/src/lib/components/selectors/entityPillSelector.tsx b/src/lib/components/selectors/entityPillSelector.tsx
index 3604dbc8a..efdd47230 100644
--- a/src/lib/components/selectors/entityPillSelector.tsx
+++ b/src/lib/components/selectors/entityPillSelector.tsx
@@ -1,7 +1,7 @@
-import React, { useState } from 'react';
-import { Button } from '../buttons';
import { EntityPill } from '@/lib/components/pills/Pill';
-import { DropdownContainer, DropdownItemContainer, DropdownTrigger, DropdownItem } from '../dropdowns';
+import { useState } from 'react';
+import { Button } from '../buttons';
+import { DropdownContainer, DropdownItem, DropdownItemContainer, DropdownTrigger } from '../dropdowns';
export type EntityPillSelectorProps = {
selectedNode?: string;
diff --git a/src/lib/components/selectors/textAndIcon.tsx b/src/lib/components/selectors/textAndIcon.tsx
index 90523fd04..8946d573b 100644
--- a/src/lib/components/selectors/textAndIcon.tsx
+++ b/src/lib/components/selectors/textAndIcon.tsx
@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
-import { DropdownTrigger, DropdownContainer, DropdownItemContainer } from '@/lib/components/dropdowns';
+import { DropdownContainer, DropdownItemContainer, DropdownTrigger } from '@/lib/components/dropdowns';
import { Icon } from '@/lib/components/icon';
+import { useState } from 'react';
type DropdownTextAndIconProps = {
value: any;
diff --git a/src/lib/components/tableUI/TableUI.stories.tsx b/src/lib/components/tableUI/TableUI.stories.tsx
index 07311f9dd..577bcde32 100644
--- a/src/lib/components/tableUI/TableUI.stories.tsx
+++ b/src/lib/components/tableUI/TableUI.stories.tsx
@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
import { TableUI } from './TableUI'; // Import the TableUI component from the correct path
const metaTableUI: Meta<typeof TableUI> = {
diff --git a/src/lib/components/tableUI/TableUI.tsx b/src/lib/components/tableUI/TableUI.tsx
index 8caf318f9..0675c9e69 100644
--- a/src/lib/components/tableUI/TableUI.tsx
+++ b/src/lib/components/tableUI/TableUI.tsx
@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
import { Button } from '@/lib/components/buttons';
import { Input } from '@/lib/components/inputs';
+import { useState } from 'react';
interface FieldConfig<T> {
key: keyof T;
@@ -87,10 +87,11 @@ export const TableUI = <T extends Record<string, any>>({ data, fieldConfigs, dro
label=""
options={dropdownOptions[field.key.toString()] || []}
value={editItem ? editItem[field.key] : ''}
- onChange={value => handleInputChange(field.key, value.toString())}
+ onChange={value => handleInputChange(field.key, value?.toString() ?? '')}
/>
) : (
<Input
+ label=""
type="text"
size="xs"
value={editItem ? editItem[field.key] : ''}
diff --git a/src/lib/components/tabs/Tab.tsx b/src/lib/components/tabs/Tab.tsx
index b9c1f9fe4..62f6eb5ec 100644
--- a/src/lib/components/tabs/Tab.tsx
+++ b/src/lib/components/tabs/Tab.tsx
@@ -1,5 +1,5 @@
-import React, { forwardRef } from 'react';
import { ButtonProps } from '@/lib/components/buttons';
+import React, { forwardRef } from 'react';
type TabTypes = 'inline' | 'rounded' | 'simple';
diff --git a/src/lib/components/textEditor/ErrorHandler.tsx b/src/lib/components/textEditor/ErrorHandler.tsx
index a05e9c355..96c743d0b 100644
--- a/src/lib/components/textEditor/ErrorHandler.tsx
+++ b/src/lib/components/textEditor/ErrorHandler.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
// TODO: remove type any
export function ErrorHandler(error: any) {
console.error(error);
diff --git a/src/lib/components/textEditor/Placeholder.tsx b/src/lib/components/textEditor/Placeholder.tsx
index dbe71297b..8e2ba6168 100644
--- a/src/lib/components/textEditor/Placeholder.tsx
+++ b/src/lib/components/textEditor/Placeholder.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
export function Placeholder({ placeholder }: { placeholder?: string }) {
return placeholder && <div className="absolute inset-0 pointer-events-none flex p-3 text-secondary-400">{placeholder}</div>;
}
diff --git a/src/lib/components/textEditor/TextEditor.tsx b/src/lib/components/textEditor/TextEditor.tsx
index 9aae96b54..0a5a2f151 100644
--- a/src/lib/components/textEditor/TextEditor.tsx
+++ b/src/lib/components/textEditor/TextEditor.tsx
@@ -1,17 +1,17 @@
-import { useEffect, useRef, useCallback } from 'react';
import { LexicalComposer } from '@lexical/react/LexicalComposer';
-import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
import { ContentEditable } from '@lexical/react/LexicalContentEditable';
import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
import { SerializedEditorState } from 'lexical';
-import { ToolbarPlugin } from './plugins/ToolbarPlugin';
-import { PreviewPlugin } from './plugins/PreviewPlugin';
-import { InsertVariablesPlugin } from './plugins/InsertVariablesPlugin';
+import { useEffect, useRef } from 'react';
import { ErrorHandler } from './ErrorHandler';
import { Placeholder } from './Placeholder';
-import { VariableNode } from './VariableNode';
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { InsertVariablesPlugin } from './plugins/InsertVariablesPlugin';
+import { PreviewPlugin } from './plugins/PreviewPlugin';
import { EditorButtonPlugin } from './plugins/SaveButtonPlugin';
+import { ToolbarPlugin } from './plugins/ToolbarPlugin';
+import { VariableNode } from './VariableNode';
type TextEditorProps = {
children: React.ReactNode;
diff --git a/src/lib/components/textEditor/VariableNode.tsx b/src/lib/components/textEditor/VariableNode.tsx
index bd499248c..231b7d9db 100644
--- a/src/lib/components/textEditor/VariableNode.tsx
+++ b/src/lib/components/textEditor/VariableNode.tsx
@@ -1,5 +1,6 @@
-import type { NodeKey, LexicalEditor, DOMExportOutput, SerializedLexicalNode, Spread } from 'lexical';
+import type { DOMExportOutput, LexicalEditor, NodeKey, SerializedLexicalNode, Spread } from 'lexical';
import { DecoratorNode, EditorConfig } from 'lexical';
+import { JSX } from 'react';
export enum VariableType {
statistic = 'statistic',
diff --git a/src/lib/components/textEditor/plugins/InsertVariablesPlugin.tsx b/src/lib/components/textEditor/plugins/InsertVariablesPlugin.tsx
index cbcb1e141..eefe6d83e 100644
--- a/src/lib/components/textEditor/plugins/InsertVariablesPlugin.tsx
+++ b/src/lib/components/textEditor/plugins/InsertVariablesPlugin.tsx
@@ -1,8 +1,8 @@
+import { Input } from '@/lib/components/inputs';
+import { useGraphQueryResult, useVisualization } from '@/lib/data-access';
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
import { $getSelection, type BaseSelection } from 'lexical';
-import { Input } from '@/lib/components/inputs';
import { VariableNode, VariableType } from '../VariableNode';
-import { useGraphQueryResult, useVisualization } from '@/lib/data-access';
interface InsertVariablesPluginProps {
variableOptions: string[];
diff --git a/src/lib/components/textEditor/plugins/PreviewPlugin.tsx b/src/lib/components/textEditor/plugins/PreviewPlugin.tsx
index 98b27a522..4092dba11 100644
--- a/src/lib/components/textEditor/plugins/PreviewPlugin.tsx
+++ b/src/lib/components/textEditor/plugins/PreviewPlugin.tsx
@@ -1,14 +1,13 @@
-import { JSX, RefObject } from 'react';
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useGraphQuery, useVisualization } from '@/lib/data-access';
+import { VisualizationSettingsType } from '@/lib/vis/common';
+import { preparePlotData } from '@/lib/vis/visualizations/vis1D/components/MakePlot';
+import { Vis1DProps, getAttributeValues } from '@/lib/vis/visualizations/vis1D/model';
import { $generateHtmlFromNodes } from '@lexical/html';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { JSX, RefObject } from 'react';
import { VariableType } from '../VariableNode';
-import { useVisualization, useGraphQueryResult } from '@/lib/data-access';
-import { VisualizationSettingsType } from '@/lib/vis/common';
-
// @ts-expect-error missing import
import { newPlot, toImage } from 'plotly.js/dist/plotly';
-import { Vis1DProps, getAttributeValues } from '@/lib/vis/visualizations/vis1D/model';
-import { preparePlotData } from '@/lib/vis/visualizations/vis1D/components/MakePlot';
export function PreviewPlugin({ contentEditable }: { contentEditable: RefObject<HTMLDivElement | null> }): JSX.Element {
const [editor] = useLexicalComposerContext();
@@ -23,7 +22,7 @@ export function PreviewPlugin({ contentEditable }: { contentEditable: RefObject<
});
}
- const result = useGraphQueryResult();
+ const result = useGraphQuery();
/*
const getAttributeValues = useCallback(
@@ -56,7 +55,7 @@ export function PreviewPlugin({ contentEditable }: { contentEditable: RefObject<
switch (type) {
case VariableType.statistic: {
const [nodeType, feature, statistic] = name.split(' • ');
- const node = result.metaData?.nodes.types[nodeType];
+ const node = result.graph.metaData?.nodes.types[nodeType];
const attribute = node?.attributes[feature].statistics as any;
if (attribute == null) return '';
const value = attribute[statistic];
diff --git a/src/lib/components/textEditor/plugins/SaveButtonPlugin.tsx b/src/lib/components/textEditor/plugins/SaveButtonPlugin.tsx
index e87d5f77f..5b611dc00 100644
--- a/src/lib/components/textEditor/plugins/SaveButtonPlugin.tsx
+++ b/src/lib/components/textEditor/plugins/SaveButtonPlugin.tsx
@@ -1,6 +1,6 @@
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { Button, ButtonProps } from '../../buttons';
import { SerializedEditorState } from 'lexical';
+import { Button, ButtonProps } from '../../buttons';
export function EditorButtonPlugin(
props: {
diff --git a/src/lib/components/textEditor/plugins/StateChangePlugin.tsx b/src/lib/components/textEditor/plugins/StateChangePlugin.tsx
index bf3f902de..0415dea4c 100644
--- a/src/lib/components/textEditor/plugins/StateChangePlugin.tsx
+++ b/src/lib/components/textEditor/plugins/StateChangePlugin.tsx
@@ -1,6 +1,6 @@
-import React, { useEffect } from 'react';
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { LexicalEditor, EditorState } from 'lexical';
+import { EditorState, LexicalEditor } from 'lexical';
+import { useEffect } from 'react';
export function MyOnChangePlugin({ onChange }: { onChange: (val: EditorState, editor: LexicalEditor) => void }) {
const [editor] = useLexicalComposerContext();
diff --git a/src/lib/components/textEditor/plugins/ToolbarPlugin.tsx b/src/lib/components/textEditor/plugins/ToolbarPlugin.tsx
index 27a8859bc..f8e5579da 100644
--- a/src/lib/components/textEditor/plugins/ToolbarPlugin.tsx
+++ b/src/lib/components/textEditor/plugins/ToolbarPlugin.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
import { FORMAT_TEXT_COMMAND } from 'lexical';
import { Button } from '../../buttons';
diff --git a/src/lib/components/textEditor/textEditor.stories.tsx b/src/lib/components/textEditor/textEditor.stories.tsx
index e4b1a01f8..ec4388bd2 100644
--- a/src/lib/components/textEditor/textEditor.stories.tsx
+++ b/src/lib/components/textEditor/textEditor.stories.tsx
@@ -1,9 +1,9 @@
-import { useState } from 'react';
+import { configureStore } from '@reduxjs/toolkit';
import type { Meta, StoryObj } from '@storybook/react';
-import { TextEditor } from '.';
import { EditorState } from 'lexical';
+import { useState } from 'react';
import { Provider } from 'react-redux';
-import { configureStore } from '@reduxjs/toolkit';
+import { TextEditor } from '.';
import { graphQueryResultSlice, visualizationSlice } from '../../../lib/data-access/store';
const Mockstore = configureStore({
diff --git a/src/lib/components/tooltip/Tooltip.tsx b/src/lib/components/tooltip/Tooltip.tsx
index 5198f6b71..38f29e5cd 100644
--- a/src/lib/components/tooltip/Tooltip.tsx
+++ b/src/lib/components/tooltip/Tooltip.tsx
@@ -1,24 +1,25 @@
-import * as React from 'react';
+import { useControllableState } from '@/lib/components/primitives/useControllableState';
+import type { Placement } from '@floating-ui/react';
import {
- useFloating,
+ arrow,
autoUpdate,
- offset,
flip,
- shift,
+ FloatingArrow,
+ FloatingDelayGroup,
+ FloatingPortal,
hide,
- arrow,
- useHover,
- useFocus,
+ offset,
+ shift,
+ useDelayGroup,
useDismiss,
- useRole,
+ useFloating,
+ useFocus,
+ useHover,
useInteractions,
useMergeRefs,
- FloatingPortal,
- FloatingArrow,
+ useRole,
} from '@floating-ui/react';
-import type { Placement } from '@floating-ui/react';
-import { useDelayGroup, FloatingDelayGroup } from '@floating-ui/react';
-import { useControllableState } from '@/lib/components/primitives/useControllableState';
+import * as React from 'react';
interface TooltipOptions {
initialOpen?: boolean;
diff --git a/src/lib/components/tooltip/tooltip.stories.tsx b/src/lib/components/tooltip/tooltip.stories.tsx
index 5b8d63a8b..dd261c4a2 100644
--- a/src/lib/components/tooltip/tooltip.stories.tsx
+++ b/src/lib/components/tooltip/tooltip.stories.tsx
@@ -1,5 +1,5 @@
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/lib';
import { Meta, StoryObj } from '@storybook/react';
-import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@/lib';
export default {
title: 'Components/Tooltip',
@@ -15,7 +15,8 @@ export default {
parameters: {
docs: {
description: {
- component: 'The **Tooltip** component provides contextual information when users hover over an element. It supports various customization options, including delay, placement, and arrow display.',
+ component:
+ 'The **Tooltip** component provides contextual information when users hover over an element. It supports various customization options, including delay, placement, and arrow display.',
},
},
},
diff --git a/src/lib/data-access/api/eventBus.tsx b/src/lib/data-access/api/eventBus.tsx
index 48ac34255..f69b48a40 100644
--- a/src/lib/data-access/api/eventBus.tsx
+++ b/src/lib/data-access/api/eventBus.tsx
@@ -1,64 +1,62 @@
import {
- useAuthentication,
- useAuthCache,
+ readInSchemaFromBackend,
+ resetGraphQueryResults,
+ useActiveQuery,
+ useActiveSaveState,
useAppDispatch,
- useSessionCache,
+ useAuthCache,
+ useAuthentication,
+ useML,
useQuerybuilderHash,
- readInSchemaFromBackend,
+ useSessionCache,
useVisualization,
wsSchemaRequest,
- wsSchemaSubscription,
wsSchemaStatsRequest,
- useML,
- useActiveQuery,
- useActiveSaveState,
- resetGraphQueryResults,
+ wsSchemaSubscription,
} from '@/lib/data-access';
import { Broker, wsQueryCountSubscription, wsQueryErrorSubscription, wsQueryRequest, wsQuerySubscription } from '@/lib/data-access/broker';
-import { addInfo } from '@/lib/data-access/store/configSlice';
+import { addError, addInfo } from '@/lib/data-access/store/configSlice';
import { setMLResult } from '@/lib/data-access/store/mlSlice';
+import { isEqual } from 'lodash-es';
import { useEffect } from 'react';
import {
+ AbortedError,
+ GraphQueryTranslationResultMessage,
+ LinkPredictionInstance,
+ SaveState,
+ Schema,
+ allMLTypes,
+ wsReturnKey,
+} from 'ts-common';
+import {
+ DatabaseStatus,
+ nilUUID,
wsGetState,
+ wsGetStateSubscription,
wsGetStates,
- wsUpdateState,
- nilUUID,
wsGetStatesSubscription,
- wsDeleteStateSubscription,
- wsGetStateSubscription,
- wsTestSaveStateConnectionSubscription,
- DatabaseStatus,
wsTestSaveStateConnection,
+ wsTestSaveStateConnectionSubscription,
+ wsUpdateState,
} from '../broker/wsState';
+import { wsReconnectSubscription, wsUserGetPolicy } from '../broker/wsUser';
+import { authorized, setSessionID } from '../store/authSlice';
+import { abortedBackend, asyncSetNewGraphQueryResult, queryingBackend, setNewGraphQueryCountResult } from '../store/graphQuerySlice';
+import { unSelect } from '../store/interactionSlice';
+import { clearSchema, setSchemaAttributeInformation, setSchemaLoading, setSchemaState } from '../store/schemaSlice';
import {
addSaveState,
- testedSaveState,
- updateSaveStateList,
- updateSelectedSaveState,
- setFetchingSaveStates,
+ selectSaveState,
setActiveQueryID,
+ setFetchingSaveStates,
setQueryState,
setQuerybuilderNodes,
- selectSaveState,
+ testedSaveState,
+ updateSaveStateList,
+ updateSelectedSaveState,
} from '../store/sessionSlice';
-import { URLParams, getParam, setParam } from './url';
import { VisState, setVisualizationState } from '../store/visualizationSlice';
-import { isEqual } from 'lodash-es';
-import { clearSchema, setSchemaAttributeInformation, setSchemaLoading, setSchemaState } from '../store/schemaSlice';
-import { addError } from '@/lib/data-access/store/configSlice';
-import { unSelect } from '../store/interactionSlice';
-import { wsReconnectSubscription, wsUserGetPolicy } from '../broker/wsUser';
-import { authorized, setSessionID } from '../store/authSlice';
-import { abortedBackend, asyncSetNewGraphQueryResult, queryingBackend, setNewGraphQueryCountResult } from '../store/graphQueryResultSlice';
-import {
- SaveState,
- allMLTypes,
- AbortedError,
- LinkPredictionInstance,
- GraphQueryTranslationResultMessage,
- wsReturnKey,
- Schema,
-} from 'ts-common';
+import { URLParams, getParam } from './url';
export const EventBus = (props: { onRunQuery: (useCached: boolean) => void; onAuthorized: () => void }) => {
const { login } = useAuthentication();
@@ -314,12 +312,6 @@ export const EventBus = (props: { onRunQuery: (useCached: boolean) => void; onAu
}),
);
- unsubs.push(wsDeleteStateSubscription(data => {}));
-
- // Broker.instance().subscribe((response: TestDatabaseConnectionResponse) => {
- // if (response && response.status === 'success') dispatch(testedSaveState(response.saveStateID));
- // }, 'tested_connection');
-
login();
// Setup cleanup
@@ -337,7 +329,7 @@ export const EventBus = (props: { onRunQuery: (useCached: boolean) => void; onAu
useEffect(() => {
if (activeSS && activeSS.id in session.testedSaveState) {
console.log('Query State Hash Updated', queryHash, activeSS.id);
- wsUpdateState(activeSS, ({ data, status }) => {
+ wsUpdateState(activeSS, ({ data }) => {
// if (status === 'unchanged') {
// TODO: check if this is needed, but for now removed so that the query is always sent, solving issue with changing ss
// console.log('State unchanged, not updating');
diff --git a/src/lib/data-access/api/index.ts b/src/lib/data-access/api/index.ts
index f57cc72bf..3f75bb516 100644
--- a/src/lib/data-access/api/index.ts
+++ b/src/lib/data-access/api/index.ts
@@ -1,2 +1,2 @@
-export * from '../broker/wsState';
export * from '../broker/wsSchema';
+export * from '../broker/wsState';
diff --git a/src/lib/data-access/broker/broker.tsx b/src/lib/data-access/broker/broker.tsx
index 04ae34075..53d0c048d 100644
--- a/src/lib/data-access/broker/broker.tsx
+++ b/src/lib/data-access/broker/broker.tsx
@@ -5,9 +5,9 @@
*/
import { getEnvVariable } from '@/config';
-import { UseIsAuthorizedState } from '../store/authSlice';
import { ResponseCallback, ResponseCallbackParamsData, WsMessageBackend2Frontend, WsMessageBody, wsReturnKeyWithML } from 'ts-common';
import { v4 as uuidv4 } from 'uuid';
+import { UseIsAuthorizedState } from '../store/authSlice';
let keepAlivePing: ReturnType<typeof setInterval>;
diff --git a/src/lib/data-access/broker/index.ts b/src/lib/data-access/broker/index.ts
index 1ca07b467..cc270a286 100644
--- a/src/lib/data-access/broker/index.ts
+++ b/src/lib/data-access/broker/index.ts
@@ -1,4 +1,4 @@
export * from './broker';
-export * from './wsState';
export * from './wsQuery';
export * from './wsSchema';
+export * from './wsState';
diff --git a/src/lib/data-access/broker/wsProject.ts b/src/lib/data-access/broker/wsProject.ts
index c74de8ee0..441801d51 100644
--- a/src/lib/data-access/broker/wsProject.ts
+++ b/src/lib/data-access/broker/wsProject.ts
@@ -1,6 +1,6 @@
+import { ResponseCallback, SaveState, WsFrontendCall, wsKeys, wsReturnKey, wsSubKeys } from 'ts-common';
import { ProjectModel, ProjectRequest } from 'ts-common/src/model/webSocket/project';
import { Broker } from './broker';
-import { ResponseCallback, SaveState, WsFrontendCall, wsKeys, wsReturnKey, wsSubKeys } from 'ts-common';
type GetProjectResponse = (data: ProjectModel, status: string) => void;
type GetProjectsResponse = (data: ProjectModel[], status: string) => void;
diff --git a/src/lib/data-access/broker/wsQuery.ts b/src/lib/data-access/broker/wsQuery.ts
index 880ccae4b..0f7f96f20 100644
--- a/src/lib/data-access/broker/wsQuery.ts
+++ b/src/lib/data-access/broker/wsQuery.ts
@@ -1,7 +1,7 @@
// All database related API calls
-import { Broker } from './broker';
import { ML, Query, ResponseCallback, WsFrontendCall, wsKeys, wsReturnKey, wsSubKeys } from 'ts-common';
+import { Broker } from './broker';
export const wsQueryRequest: WsFrontendCall<{
saveStateID: string;
diff --git a/src/lib/data-access/broker/wsState.ts b/src/lib/data-access/broker/wsState.ts
index 10028798d..78ce63066 100644
--- a/src/lib/data-access/broker/wsState.ts
+++ b/src/lib/data-access/broker/wsState.ts
@@ -1,4 +1,3 @@
-import { Broker } from './broker';
import {
PartialSaveState,
ResponseCallback,
@@ -10,6 +9,7 @@ import {
wsSubKeys,
} from 'ts-common';
import { DatabaseInfo, DatabaseType } from 'ts-common/src/model/webSocket/dbConnection';
+import { Broker } from './broker';
export const databaseProtocolMapping: Record<DatabaseType, string[]> = {
[DatabaseType.Memgraph]: ['bolt://'],
@@ -118,7 +118,7 @@ export const wsUpdateState: WsFrontendCall<SaveState, wsReturnKey.saveState> = (
export const wsTestDatabaseConnection: WsFrontendCall<DatabaseInfo, wsReturnKey.testedConnection> = (dbConnection, callback) => {
if (!dbConnection) {
console.warn('dbConnection is undefined on wsTestDatabaseConnection');
- if (callback) callback({ data: { status: 'fail', saveStateID: '' }, status: 'error', defaultCallback: () => {} });
+ if (callback) callback({ data: { status: 'fail', saveStateID: '' }, status: 'error', defaultCallback: () => {}, callID: '-' });
return;
}
Broker.instance().sendMessage(
diff --git a/src/lib/data-access/security/dashboardAlerts.tsx b/src/lib/data-access/security/dashboardAlerts.tsx
index 1cb3a88e7..5d9f0f8be 100644
--- a/src/lib/data-access/security/dashboardAlerts.tsx
+++ b/src/lib/data-access/security/dashboardAlerts.tsx
@@ -1,8 +1,8 @@
-import React, { ReactNode, useEffect, useImperativeHandle, useRef } from 'react';
+import { ReactNode, useEffect, useImperativeHandle, useRef } from 'react';
import { useImmer } from 'use-immer';
+import { Icon } from '../../components';
import { useAppDispatch, useConfig } from '../store';
import { removeLastError, removeLastInfo, removeLastSuccess, removeLastWarning } from '../store/configSlice';
-import { Icon } from '../../components';
type Message = {
message: ReactNode;
diff --git a/src/lib/data-access/security/useAuthentication.tsx b/src/lib/data-access/security/useAuthentication.tsx
index d5abb6015..d6c5805bb 100644
--- a/src/lib/data-access/security/useAuthentication.tsx
+++ b/src/lib/data-access/security/useAuthentication.tsx
@@ -1,10 +1,9 @@
import { getEnvVariable } from '@/config';
-import { useAppDispatch, useSessionCache } from '../store';
-import { authenticated } from '../store/authSlice';
-import { addInfo, addError } from '../store/configSlice';
import { wsShareSaveState } from '../api';
import { getParam, URLParams } from '../api/url';
-import { UserAuthenticationHeader } from 'ts-common';
+import { useAppDispatch, useSessionCache } from '../store';
+import { authenticated } from '../store/authSlice';
+import { addError, addInfo } from '../store/configSlice';
const domain = getEnvVariable('BACKEND_URL');
const userURI = getEnvVariable('BACKEND_USER');
@@ -76,23 +75,23 @@ export const useAuthentication = () => {
},
],
},
- async data => {
+ ({ data }) => {
if (!data) {
dispatch(addError('Failed to share link'));
resolve(false);
} else {
// Authorization done, now just copy the link
const shareUrl = window.location.href;
- const copied = await copyToClipboard(shareUrl);
-
- if (copied) {
- dispatch(addInfo('Link copied to clipboard!'));
- resolve(true);
- } else {
- console.warn('Failed to copy link to clipboard');
- dispatch(addError('Failed to copy link to clipboard'));
- resolve(false);
- }
+ copyToClipboard(shareUrl).then(copied => {
+ if (copied) {
+ dispatch(addInfo('Link copied to clipboard!'));
+ resolve(true);
+ } else {
+ console.warn('Failed to copy link to clipboard');
+ dispatch(addError('Failed to copy link to clipboard'));
+ resolve(false);
+ }
+ });
}
},
);
diff --git a/src/lib/data-access/store/authSlice.ts b/src/lib/data-access/store/authSlice.ts
index e9051c434..4cb543ea8 100644
--- a/src/lib/data-access/store/authSlice.ts
+++ b/src/lib/data-access/store/authSlice.ts
@@ -1,7 +1,7 @@
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import type { RootState } from './store';
import { cloneDeep } from 'lodash-es';
import { UserAuthorizationHeaders } from 'ts-common';
+import type { RootState } from './store';
export const UserAuthorizationHeadersDefaults: UserAuthorizationHeaders = {
savestate: {
diff --git a/src/lib/data-access/store/authorizationResourcesSlice.ts b/src/lib/data-access/store/authorizationResourcesSlice.ts
index c5e757c9a..1b68bc031 100644
--- a/src/lib/data-access/store/authorizationResourcesSlice.ts
+++ b/src/lib/data-access/store/authorizationResourcesSlice.ts
@@ -1,6 +1,6 @@
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import type { RootState } from './store';
import { PolicyResourcesState } from 'ts-common';
+import type { RootState } from './store';
//TODO !FIXME: add middleware to fetch resources from backend
const initialState: PolicyResourcesState = {
diff --git a/src/lib/data-access/store/authorizationUsersSlice.ts b/src/lib/data-access/store/authorizationUsersSlice.ts
index 3e7f72ed1..014240c05 100644
--- a/src/lib/data-access/store/authorizationUsersSlice.ts
+++ b/src/lib/data-access/store/authorizationUsersSlice.ts
@@ -1,6 +1,6 @@
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import type { RootState } from './store';
import { UserPolicy } from 'ts-common';
+import type { RootState } from './store';
export interface PolicyUsersState {
users: UserPolicy[];
diff --git a/src/lib/data-access/store/graphQueryResultSlice.ts b/src/lib/data-access/store/graphQuerySlice.ts
similarity index 96%
rename from src/lib/data-access/store/graphQueryResultSlice.ts
rename to src/lib/data-access/store/graphQuerySlice.ts
index fb04f9948..7fadc07b7 100755
--- a/src/lib/data-access/store/graphQueryResultSlice.ts
+++ b/src/lib/data-access/store/graphQuerySlice.ts
@@ -1,6 +1,6 @@
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import type { AppDispatch, RootState } from './store';
import { GraphQueryCountResultFromBackend, GraphQueryResultMetaFromBackend, NodeAttributes, QueryStatusResult } from 'ts-common';
+import type { AppDispatch, RootState } from './store';
export type UniqueEdge = {
attributes: NodeAttributes;
source: string;
@@ -132,11 +132,11 @@ export const asyncSetNewGraphQueryResult = async (
};
// Other code such as selectors can use the imported `RootState` type
-export const selectGraphQuery = (state: RootState) => state.graphQueryResult;
-export const selectGraphQueryResult = (state: RootState) => state.graphQueryResult.graph;
-export const selectGraphQueryResultNodes = (state: RootState) => state.graphQueryResult.graph.nodes;
-export const selectGraphQueryResultLinks = (state: RootState) => state.graphQueryResult.graph.edges;
-export const selectGraphQueryResultMetaData = (state: RootState) => state.graphQueryResult.graph.metaData;
-export const selectGraphQueryCounts = (state: RootState) => state.graphQueryResult.graphCounts;
+export const selectGraphQuery = (state: RootState) => state.graphQuery;
+export const selectGraphQueryResult = (state: RootState) => state.graphQuery.graph;
+export const selectGraphQueryResultNodes = (state: RootState) => state.graphQuery.graph.nodes;
+export const selectGraphQueryResultLinks = (state: RootState) => state.graphQuery.graph.edges;
+export const selectGraphQueryResultMetaData = (state: RootState) => state.graphQuery.graph.metaData;
+export const selectGraphQueryCounts = (state: RootState) => state.graphQuery.graphCounts;
export default graphQueryResultSlice.reducer;
diff --git a/src/lib/data-access/store/hooks.ts b/src/lib/data-access/store/hooks.ts
index 7c5f7b80f..e9fd8d796 100644
--- a/src/lib/data-access/store/hooks.ts
+++ b/src/lib/data-access/store/hooks.ts
@@ -1,3 +1,4 @@
+import { ConfigStateI, configState } from '@/lib/data-access/store/configSlice';
import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
import {
GraphQueryResult,
@@ -5,46 +6,43 @@ import {
selectGraphQueryCounts,
selectGraphQueryResult,
selectGraphQueryResultMetaData,
-} from './graphQueryResultSlice';
-import { schemaGraph, selectSchemaLayout, schemaSettingsState, schemaStatsState, SchemaSliceI, schema } from './schemaSlice';
-import type { RootState, AppDispatch } from './store';
-import { ConfigStateI, configState } from '@/lib/data-access/store/configSlice';
+} from './graphQuerySlice';
+import { SchemaSliceI, schema, schemaGraph, schemaSettingsState, schemaStatsState, selectSchemaLayout } from './schemaSlice';
+import type { AppDispatch, RootState } from './store';
-import { activeSaveState, activeSaveStateQuery, selectQuerybuilderHash, SessionCacheI, sessionCacheState } from './sessionSlice';
-import { AuthSliceState, authState } from './authSlice';
-import { visualizationState, VisState, visualizationActive } from './visualizationSlice';
-import { allMLEnabled, selectML } from './mlSlice';
-import {
- searchResultState,
- searchResultData,
- searchResultSchema,
- searchResultQB,
- recentSearches,
- SearchCategoryMapI,
- CategoryDataI,
-} from './searchResultSlice';
-import { SchemaGraph } from '../../schema';
-import { SelectionStateI, FocusStateI, focusState, selectionState } from './interactionSlice';
-import { VisualizationSettingsType } from '../../vis/common';
-import { PolicyUsersState, selectPolicyState } from './authorizationUsersSlice';
-import { selectResourcesPolicyState } from './authorizationResourcesSlice';
-import { selectInsights } from './insightSharingSlice';
import {
- PolicyResourcesState,
+ GraphQueryCountResultFromBackend,
+ GraphQueryResultMetaFromBackend,
+ GraphStatistics,
InsightModel,
ML,
- GraphStatistics,
- SaveState,
- SaveStateAuthorizationHeaders,
+ PolicyResourcesState,
Query,
- SchemaSettings,
- SchemaGraphStats,
SaveStateWithAuthorization,
- GraphQueryResultMetaFromBackend,
- GraphQueryCountResultFromBackend,
+ SchemaGraphStats,
+ SchemaSettings,
} from 'ts-common';
-import { ProjectState, selectProject } from './projectSlice';
import { AllLayoutAlgorithms } from 'ts-common/src/model/layouts';
+import { SchemaGraph } from '../../schema';
+import { VisualizationSettingsType } from '../../vis/common';
+import { selectResourcesPolicyState } from './authorizationResourcesSlice';
+import { PolicyUsersState, selectPolicyState } from './authorizationUsersSlice';
+import { AuthSliceState, authState } from './authSlice';
+import { selectInsights } from './insightSharingSlice';
+import { FocusStateI, SelectionStateI, focusState, selectionState } from './interactionSlice';
+import { allMLEnabled, selectML } from './mlSlice';
+import { ProjectState, selectProject } from './projectSlice';
+import {
+ CategoryDataI,
+ SearchCategoryMapI,
+ recentSearches,
+ searchResultData,
+ searchResultQB,
+ searchResultSchema,
+ searchResultState,
+} from './searchResultSlice';
+import { SessionCacheI, activeSaveState, activeSaveStateQuery, selectQuerybuilderHash, sessionCacheState } from './sessionSlice';
+import { VisState, visualizationActive, visualizationState } from './visualizationSlice';
// Use throughout your app instead of plain `useDispatch` and `useSelector`
export const useAppDispatch: () => AppDispatch = useDispatch;
diff --git a/src/lib/data-access/store/index.ts b/src/lib/data-access/store/index.ts
index aaca74348..20d869b88 100644
--- a/src/lib/data-access/store/index.ts
+++ b/src/lib/data-access/store/index.ts
@@ -1,8 +1,8 @@
-export * from './store';
export * from './hooks';
+export * from './store';
-export { setSchema, readInSchemaFromBackend, schemaSlice, selectSchemaLayout } from './schemaSlice';
+export * from './graphQuerySlice';
export { mlSlice } from './mlSlice';
+export { readInSchemaFromBackend, schemaSlice, selectSchemaLayout, setSchema } from './schemaSlice';
export { searchResultSlice } from './searchResultSlice';
export { visualizationSlice } from './visualizationSlice';
-export * from './graphQueryResultSlice';
diff --git a/src/lib/data-access/store/insightSharingSlice.ts b/src/lib/data-access/store/insightSharingSlice.ts
index b8ab09bc7..2033e508a 100644
--- a/src/lib/data-access/store/insightSharingSlice.ts
+++ b/src/lib/data-access/store/insightSharingSlice.ts
@@ -1,6 +1,6 @@
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import { RootState } from '../store';
import { InsightModel } from 'ts-common';
+import { RootState } from '../store';
type InsightState = {
insights: InsightModel[];
diff --git a/src/lib/data-access/store/interactionSlice.ts b/src/lib/data-access/store/interactionSlice.ts
index 43e1b56b2..4a7c1dfb9 100644
--- a/src/lib/data-access/store/interactionSlice.ts
+++ b/src/lib/data-access/store/interactionSlice.ts
@@ -1,6 +1,6 @@
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { EdgeQueryResult, NodeQueryResult } from 'ts-common';
import type { RootState } from './store';
-import { NodeQueryResult, EdgeQueryResult } from 'ts-common';
export type HoverStateI = { [id: string]: any };
diff --git a/src/lib/data-access/store/mlSlice.ts b/src/lib/data-access/store/mlSlice.ts
index 47761ecf4..96715d3f1 100644
--- a/src/lib/data-access/store/mlSlice.ts
+++ b/src/lib/data-access/store/mlSlice.ts
@@ -1,6 +1,6 @@
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import type { RootState } from './store';
import { ML, MLTypes } from 'ts-common';
+import type { RootState } from './store';
/**************************************************************** */
diff --git a/src/lib/data-access/store/projectSlice.ts b/src/lib/data-access/store/projectSlice.ts
index efbf972ad..1d5bea403 100644
--- a/src/lib/data-access/store/projectSlice.ts
+++ b/src/lib/data-access/store/projectSlice.ts
@@ -1,6 +1,6 @@
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import { RootState } from './store';
import { ProjectModel } from 'ts-common/src/model/webSocket/project';
+import { RootState } from './store';
export interface ProjectState {
projects: { [id: number]: ProjectModel };
diff --git a/src/lib/data-access/store/schemaSlice.spec.ts b/src/lib/data-access/store/schemaSlice.spec.ts
index 7d37c3860..192b6a28e 100644
--- a/src/lib/data-access/store/schemaSlice.spec.ts
+++ b/src/lib/data-access/store/schemaSlice.spec.ts
@@ -1,5 +1,5 @@
import { MultiGraph } from 'graphology';
-import { assert, describe, expect, it } from 'vitest';
+import { describe, expect, it } from 'vitest';
describe('SchemaSlice Tests', () => {
it('should make a graphology graph', () => {
diff --git a/src/lib/data-access/store/schemaSlice.ts b/src/lib/data-access/store/schemaSlice.ts
index 1d194f6d2..b96e94886 100644
--- a/src/lib/data-access/store/schemaSlice.ts
+++ b/src/lib/data-access/store/schemaSlice.ts
@@ -1,10 +1,10 @@
import { Layouts } from '@/lib/graph-layout';
-import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import { SchemaUtils } from '../../schema/schema-utils';
-import type { RootState } from './store';
import { SchemaGraph, SchemaGraphology } from '@/lib/schema';
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { Schema, SchemaGraphStats, SchemaReturnFormat, SchemaSettings } from 'ts-common';
+import { SchemaUtils } from '../../schema/schema-utils';
import { wsUpdateSchemaSettings } from '../api';
+import type { RootState } from './store';
/**************************************************************** */
diff --git a/src/lib/data-access/store/sessionSlice.ts b/src/lib/data-access/store/sessionSlice.ts
index 23b894c98..e6247f734 100644
--- a/src/lib/data-access/store/sessionSlice.ts
+++ b/src/lib/data-access/store/sessionSlice.ts
@@ -1,10 +1,9 @@
+import { QueryMultiGraphology } from '@/lib/querybuilder';
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import type { RootState } from './store';
-import { DatabaseStatus } from '../broker/wsState';
-import { getParam, setParam, URLParams } from '../api/url';
-import { cloneDeep, isEqual } from 'lodash-es';
+import { MultiGraph } from 'graphology';
+import { isEqual } from 'lodash-es';
+import objectHash from 'object-hash';
import {
- CountQueryResultFromBackend,
defaultGraph,
Query,
QueryBuilderSettings,
@@ -12,14 +11,13 @@ import {
QueryMultiGraph,
QueryState,
QueryUnionType,
- SaveState,
SaveStateAuthorizationHeaders,
SaveStateWithAuthorization,
} from 'ts-common';
-import { QueryMultiGraphology } from '@/lib/querybuilder';
-import { MultiGraph } from 'graphology';
-import objectHash from 'object-hash';
+import { getParam, setParam, URLParams } from '../api/url';
import { wsUpdateQueryOrder } from '../broker/wsQuery';
+import { DatabaseStatus } from '../broker/wsState';
+import type { RootState } from './store';
/** Message format of the error message from the backend */
export type ErrorMessage = {
diff --git a/src/lib/data-access/store/store.spec.ts b/src/lib/data-access/store/store.spec.ts
index 3346fd37d..3e78912e1 100644
--- a/src/lib/data-access/store/store.spec.ts
+++ b/src/lib/data-access/store/store.spec.ts
@@ -1,4 +1,4 @@
-import { assert, describe, expect, it } from 'vitest';
+import { describe, expect, it } from 'vitest';
describe('sharedDataAccessStore', () => {
it('should work', () => {
diff --git a/src/lib/data-access/store/store.ts b/src/lib/data-access/store/store.ts
index 383de67f8..ed5a513aa 100644
--- a/src/lib/data-access/store/store.ts
+++ b/src/lib/data-access/store/store.ts
@@ -1,21 +1,21 @@
import { configureStore } from '@reduxjs/toolkit';
-import graphQueryResultSlice from './graphQueryResultSlice';
-import schemaSlice from './schemaSlice';
-import configSlice from './configSlice';
-import sessionSlice from './sessionSlice';
+import policyPermissionSlice from './authorizationResourcesSlice';
+import policyUsersSlice from './authorizationUsersSlice';
import authSlice from './authSlice';
+import configSlice from './configSlice';
+import graphQuerySlice from './graphQuerySlice';
+import insightSharingSlice from './insightSharingSlice';
+import interactionSlice from './interactionSlice';
import mlSlice from './mlSlice';
+import projectSlice from './projectSlice';
+import schemaSlice from './schemaSlice';
import searchResultSlice from './searchResultSlice';
+import sessionSlice from './sessionSlice';
import visualizationSlice from './visualizationSlice';
-import interactionSlice from './interactionSlice';
-import policyUsersSlice from './authorizationUsersSlice';
-import policyPermissionSlice from './authorizationResourcesSlice';
-import insightSharingSlice from './insightSharingSlice';
-import projectSlice from './projectSlice';
export const store = configureStore({
reducer: {
- graphQueryResult: graphQueryResultSlice,
+ graphQuery: graphQuerySlice,
schema: schemaSlice,
sessionCache: sessionSlice,
auth: authSlice,
diff --git a/src/lib/data-access/store/visualizationSlice.ts b/src/lib/data-access/store/visualizationSlice.ts
index 4bcb31f44..7838937e7 100644
--- a/src/lib/data-access/store/visualizationSlice.ts
+++ b/src/lib/data-access/store/visualizationSlice.ts
@@ -1,8 +1,8 @@
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import type { RootState } from './store';
-import { VisualizationSettingsType } from '../../vis/common';
import { isEqual } from 'lodash-es';
import { v4 as uuidv4 } from 'uuid';
+import { VisualizationSettingsType } from '../../vis/common';
+import type { RootState } from './store';
export type VisStateSettings = VisualizationSettingsType[];
export type VisState = {
diff --git a/src/lib/graph-layout/cytoscapeLayouts.ts b/src/lib/graph-layout/cytoscapeLayouts.ts
index a1873c202..d52062333 100644
--- a/src/lib/graph-layout/cytoscapeLayouts.ts
+++ b/src/lib/graph-layout/cytoscapeLayouts.ts
@@ -1,10 +1,10 @@
import cytoscape from 'cytoscape';
import Graph from 'graphology';
import { Attributes } from 'graphology-types';
+import { CytoscapeLayoutAlgorithms } from 'ts-common/src/model/layouts';
import { Layout } from './layout';
import { ILayoutFactory } from './layoutCreatorUsecase';
import { LayoutAlgorithm } from './types';
-import { CytoscapeLayoutAlgorithms } from 'ts-common/src/model/layouts';
export type CytoscapeProvider = 'Cytoscape';
diff --git a/src/lib/graph-layout/dagreLayout.ts b/src/lib/graph-layout/dagreLayout.ts
index 4e1738f62..d15840d9b 100644
--- a/src/lib/graph-layout/dagreLayout.ts
+++ b/src/lib/graph-layout/dagreLayout.ts
@@ -1,8 +1,8 @@
import Graph from 'graphology';
import { Attributes } from 'graphology-types';
+import { DagreLayoutAlgorithms } from 'ts-common/src/model/layouts';
import { Layout } from './layout';
import { ILayoutFactory } from './layoutCreatorUsecase';
-import { DagreLayoutAlgorithms } from 'ts-common/src/model/layouts';
export type DagreProvider = 'Dagre';
diff --git a/src/lib/graph-layout/graphology.spec.ts b/src/lib/graph-layout/graphology.spec.ts
index c7707747b..f987d7edb 100644
--- a/src/lib/graph-layout/graphology.spec.ts
+++ b/src/lib/graph-layout/graphology.spec.ts
@@ -1,6 +1,5 @@
-import Graph, { UndirectedGraph } from 'graphology';
import { MultiGraph } from 'graphology';
-import { assert, describe, expect, it } from 'vitest';
+import { describe, expect, it } from 'vitest';
describe('graphology connection', () => {
it('should create a graphology graph', () => {
diff --git a/src/lib/graph-layout/graphologyLayouts.ts b/src/lib/graph-layout/graphologyLayouts.ts
index 0039f82b9..8867f29ee 100644
--- a/src/lib/graph-layout/graphologyLayouts.ts
+++ b/src/lib/graph-layout/graphologyLayouts.ts
@@ -4,10 +4,10 @@ import forceAtlas2, { ForceAtlas2Settings } from 'graphology-layout-forceatlas2'
import FA2Layout from 'graphology-layout-forceatlas2/worker';
import noverlap from 'graphology-layout-noverlap';
import { Attributes } from 'graphology-types';
+import { GraphologyLayoutAlgorithms } from 'ts-common/src/model/layouts';
import { Layout } from './layout';
import { ILayoutFactory } from './layoutCreatorUsecase';
import { LayoutAlgorithm } from './types';
-import { GraphologyLayoutAlgorithms } from 'ts-common/src/model/layouts';
export type GraphologyProvider = 'Graphology';
diff --git a/src/lib/graph-layout/index.ts b/src/lib/graph-layout/index.ts
index 026bf8653..0ef5b7625 100644
--- a/src/lib/graph-layout/index.ts
+++ b/src/lib/graph-layout/index.ts
@@ -1,5 +1,5 @@
-export * from './types';
-export * from './layout';
-export * from './graphologyLayouts';
export * from './cytoscapeLayouts';
+export * from './graphologyLayouts';
+export * from './layout';
export * from './layoutCreatorUsecase';
+export * from './types';
diff --git a/src/lib/graph-layout/layout.ts b/src/lib/graph-layout/layout.ts
index dd0301d58..0f9cdf371 100644
--- a/src/lib/graph-layout/layout.ts
+++ b/src/lib/graph-layout/layout.ts
@@ -1,6 +1,6 @@
/* eslint-disable no-prototype-builtins */
import Graph from 'graphology';
-import { Providers, LayoutAlgorithm } from './types';
+import { LayoutAlgorithm, Providers } from './types';
export abstract class Layout<provider extends Providers> {
protected graph: Graph | null = null;
diff --git a/src/lib/graph-layout/layoutCreatorUsecase.spec.ts b/src/lib/graph-layout/layoutCreatorUsecase.spec.ts
index 97c520f63..6934ce628 100644
--- a/src/lib/graph-layout/layoutCreatorUsecase.spec.ts
+++ b/src/lib/graph-layout/layoutCreatorUsecase.spec.ts
@@ -1,4 +1,4 @@
-import { assert, describe, expect, it, test } from 'vitest';
+import { describe, it } from 'vitest';
// import 'vitest-canvas-mock';
describe('LayoutFactory Graphology Libraries', () => {
diff --git a/src/lib/graph-layout/layoutCreatorUsecase.ts b/src/lib/graph-layout/layoutCreatorUsecase.ts
index 36128f63c..3fab72168 100644
--- a/src/lib/graph-layout/layoutCreatorUsecase.ts
+++ b/src/lib/graph-layout/layoutCreatorUsecase.ts
@@ -1,11 +1,11 @@
import {
AllLayoutAlgorithms,
- GraphologyLayoutAlgorithms,
CytoscapeLayoutAlgorithms,
+ GraphologyLayoutAlgorithms,
ListLayoutAlgorithms,
} from 'ts-common/src/model/layouts';
import { CytoscapeFactory } from './cytoscapeLayouts';
-import { DagreFactory, DagreLayouts } from './dagreLayout';
+import { DagreFactory } from './dagreLayout';
import { GraphologyFactory } from './graphologyLayouts';
import { ListLayoutFactory } from './listLayouts';
import { AlgorithmToLayoutProvider } from './types';
diff --git a/src/lib/graph-layout/listLayouts.ts b/src/lib/graph-layout/listLayouts.ts
index 65abeaafb..bbca151fa 100644
--- a/src/lib/graph-layout/listLayouts.ts
+++ b/src/lib/graph-layout/listLayouts.ts
@@ -1,9 +1,9 @@
import Graph from 'graphology';
import { Attributes } from 'graphology-types';
+import { ListLayoutAlgorithms } from 'ts-common/src/model/layouts';
import { Layout } from './layout';
import { ILayoutFactory } from './layoutCreatorUsecase';
import { LayoutAlgorithm } from './types';
-import { ListLayoutAlgorithms } from 'ts-common/src/model/layouts';
export type ListLayoutProvider = 'ListLayout';
diff --git a/src/lib/graph-layout/mockdataLayout.spec.ts b/src/lib/graph-layout/mockdataLayout.spec.ts
index d8a1bd890..5f7866824 100644
--- a/src/lib/graph-layout/mockdataLayout.spec.ts
+++ b/src/lib/graph-layout/mockdataLayout.spec.ts
@@ -1,4 +1,4 @@
-import { assert, describe, expect, it } from 'vitest';
+import { expect, it } from 'vitest';
// import {
// movieSchema,
diff --git a/src/lib/index.ts b/src/lib/index.ts
index eae28d420..db08aa2fd 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -1,7 +1,7 @@
export * from './components';
export * from './data-access';
export * from './graph-layout';
+export * from './inspector';
export * from './querybuilder';
export * from './schema';
export * from './vis';
-export * from './inspector';
diff --git a/src/lib/insight-sharing/FormInsight.tsx b/src/lib/insight-sharing/FormInsight.tsx
index b71320d82..7c35ddedf 100644
--- a/src/lib/insight-sharing/FormInsight.tsx
+++ b/src/lib/insight-sharing/FormInsight.tsx
@@ -1,10 +1,10 @@
-import { useEffect, useState } from 'react';
-import { TextEditor } from '@/lib/components/textEditor';
-import { useAppDispatch, useSessionCache, useActiveSaveState } from '@/lib/data-access';
import { Button, Input } from '@/lib/components';
+import { TextEditor } from '@/lib/components/textEditor';
+import { useActiveSaveState, useAppDispatch, useSessionCache } from '@/lib/data-access';
import { addError } from '@/lib/data-access/store/configSlice';
import { SerializedEditorState } from 'lexical';
-import { InsightModel, InsightConditionMapReverse, InsightConditionMap } from 'ts-common';
+import { useEffect, useState } from 'react';
+import { InsightConditionMap, InsightConditionMapReverse, InsightModel } from 'ts-common';
type Props = {
insight: InsightModel;
diff --git a/src/lib/insight-sharing/InsightDialog.tsx b/src/lib/insight-sharing/InsightDialog.tsx
index 0b5dbeb1c..cbb6870f8 100644
--- a/src/lib/insight-sharing/InsightDialog.tsx
+++ b/src/lib/insight-sharing/InsightDialog.tsx
@@ -1,14 +1,14 @@
-import React, { useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
+import { InsightModel, InsightRequest } from 'ts-common';
+import { useAppDispatch, useInsights } from '..';
import { Dialog, DialogContent } from '../components';
-import { MonitorType, Sidebar } from './components/Sidebar';
+import { wsCreateInsight, wsDeleteInsight, wsUpdateInsight } from '../data-access/broker/wsInsightSharing';
+import { addError, addSuccess } from '../data-access/store/configSlice';
+import { addInsight, deleteInsight, updateInsight } from '../data-access/store/insightSharingSlice';
import { AddItem } from './components/AddItem';
-import { useAppDispatch, useInsights } from '..';
+import { MonitorType, Sidebar } from './components/Sidebar';
import { StartScreen } from './components/StartScreen';
import { FormInsight } from './FormInsight';
-import { wsCreateInsight, wsDeleteInsight, wsUpdateInsight } from '../data-access/broker/wsInsightSharing';
-import { addInsight, deleteInsight, updateInsight } from '../data-access/store/insightSharingSlice';
-import { addSuccess, addError } from '../data-access/store/configSlice';
-import { InsightModel, InsightRequest } from 'ts-common';
type Props = {
open: boolean;
diff --git a/src/lib/insight-sharing/components/AddItem.tsx b/src/lib/insight-sharing/components/AddItem.tsx
index d59b11662..698fe243f 100644
--- a/src/lib/insight-sharing/components/AddItem.tsx
+++ b/src/lib/insight-sharing/components/AddItem.tsx
@@ -1,11 +1,11 @@
-import React, { useState } from 'react';
-import { Input, Button } from '../../components';
-import { MonitorType as InsightType, MonitorType } from './Sidebar';
-import { useAppDispatch, useSessionCache } from '../../data-access';
-import { addInsight } from '../../data-access/store/insightSharingSlice';
-import { wsCreateInsight } from '../../data-access/broker/wsInsightSharing';
import { addError, addSuccess } from '@/lib/data-access/store/configSlice';
+import { useState } from 'react';
import { InsightRequest } from 'ts-common';
+import { Button, Input } from '../../components';
+import { useAppDispatch, useSessionCache } from '../../data-access';
+import { wsCreateInsight } from '../../data-access/broker/wsInsightSharing';
+import { addInsight } from '../../data-access/store/insightSharingSlice';
+import { MonitorType as InsightType, MonitorType } from './Sidebar';
type Props = {
setAdding: (val: false | MonitorType) => void;
@@ -41,7 +41,7 @@ export function AddItem(props: Props) {
alarmMode: 'disabled',
};
- wsCreateInsight(newInsight, (data: any, status: string) => {
+ wsCreateInsight(newInsight, ({ data, status }) => {
if (status === 'success') {
dispatch(addInsight(data));
props.setActive(data.id);
diff --git a/src/lib/insight-sharing/components/Sidebar.tsx b/src/lib/insight-sharing/components/Sidebar.tsx
index 3cdefb473..786581376 100644
--- a/src/lib/insight-sharing/components/Sidebar.tsx
+++ b/src/lib/insight-sharing/components/Sidebar.tsx
@@ -1,11 +1,10 @@
-import React, { useEffect } from 'react';
+import { addError } from '@/lib/data-access/store/configSlice';
+import { useEffect } from 'react';
import { Button } from '../../components';
import { Accordion, AccordionBody, AccordionHead, AccordionItem } from '../../components/accordion';
-import { useAppDispatch, useInsights } from '../../data-access';
-import { setInsights } from '../../data-access/store/insightSharingSlice';
-import { useSessionCache } from '../../data-access';
+import { useAppDispatch, useInsights, useSessionCache } from '../../data-access';
import { wsGetInsights } from '../../data-access/broker/wsInsightSharing';
-import { addError } from '@/lib/data-access/store/configSlice';
+import { setInsights } from '../../data-access/store/insightSharingSlice';
export type MonitorType = 'report' | 'alert';
diff --git a/src/lib/insight-sharing/components/StartScreen.tsx b/src/lib/insight-sharing/components/StartScreen.tsx
index 377ad49d9..49a22745e 100644
--- a/src/lib/insight-sharing/components/StartScreen.tsx
+++ b/src/lib/insight-sharing/components/StartScreen.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
import { Button, Icon } from '../../components';
import { MonitorType } from './Sidebar';
diff --git a/src/lib/inspector/InspectorPanel.tsx b/src/lib/inspector/InspectorPanel.tsx
index 1e09c93ec..363c79dcc 100644
--- a/src/lib/inspector/InspectorPanel.tsx
+++ b/src/lib/inspector/InspectorPanel.tsx
@@ -1,10 +1,10 @@
-import React, { useMemo } from 'react';
-import { Button, Panel } from '../components';
+import { Tab, Tabs } from '@/lib/components/tabs';
import { useFocus, useSelection } from '@/lib/data-access';
import { resultSetFocus } from '@/lib/data-access/store/interactionSlice';
-import { useDispatch } from 'react-redux';
-import { Tab, Tabs } from '@/lib/components/tabs';
import { VisualizationSettings } from '@/lib/vis/components/config/VisualizationSettings';
+import { useMemo } from 'react';
+import { useDispatch } from 'react-redux';
+import { Button, Panel } from '../components';
import ResultInspector from './ResultInspector';
export function InspectorPanel() {
diff --git a/src/lib/inspector/ResultInspector.tsx b/src/lib/inspector/ResultInspector.tsx
index d9154b294..16f87ec77 100644
--- a/src/lib/inspector/ResultInspector.tsx
+++ b/src/lib/inspector/ResultInspector.tsx
@@ -1,8 +1,8 @@
-import React, { useEffect, useRef } from 'react';
-import { select, scaleLinear } from 'd3';
+import { visualizationColors } from '@/config';
import { useAppDispatch, useGraphQueryResult, useGraphQueryResultMeta, useSelection } from '@/lib/data-access';
import { resultSetSelection } from '@/lib/data-access/store/interactionSlice';
-import { visualizationColors } from '@/config';
+import { scaleLinear, select } from 'd3';
+import React, { useEffect, useRef } from 'react';
import { SelectionConfig } from './SelectionConfig';
export default function ResultInspector() {
diff --git a/src/lib/inspector/SelectionConfig.tsx b/src/lib/inspector/SelectionConfig.tsx
index 69af0d64f..938946ef8 100644
--- a/src/lib/inspector/SelectionConfig.tsx
+++ b/src/lib/inspector/SelectionConfig.tsx
@@ -1,8 +1,8 @@
+import { ATTRIBUTE_MAX_CHARACTERS } from '@/config';
+import { unSelect } from '@/lib/data-access/store/interactionSlice';
import React from 'react';
import { useDispatch } from 'react-redux';
import { Button, EntityPill, RelationPill, useSelection } from '..';
-import { unSelect } from '@/lib/data-access/store/interactionSlice';
-import { ATTRIBUTE_MAX_CHARACTERS } from '@/config';
export const SelectionConfig = () => {
const dispatch = useDispatch();
diff --git a/src/lib/management/Explorations.tsx b/src/lib/management/Explorations.tsx
index deadcebd0..fb353a980 100644
--- a/src/lib/management/Explorations.tsx
+++ b/src/lib/management/Explorations.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
import { Button } from '../components';
type Props = {
diff --git a/src/lib/management/ManagementDialog.tsx b/src/lib/management/ManagementDialog.tsx
index 372802205..30a4905ba 100644
--- a/src/lib/management/ManagementDialog.tsx
+++ b/src/lib/management/ManagementDialog.tsx
@@ -1,11 +1,11 @@
-import React, { useState } from 'react';
-import { Settings } from './Settings';
-import { Overview } from './Overview';
-import { Members } from './Members';
-import { UpsertDatabase } from './database';
+import { useState } from 'react';
+import { SaveState } from 'ts-common';
import { Button, Dialog, DialogContent, useAppDispatch, useAuthCache, useSessionCache } from '..';
import { addInfo } from '../data-access/store/configSlice';
-import { SaveState } from 'ts-common';
+import { Members } from './Members';
+import { Overview } from './Overview';
+import { Settings } from './Settings';
+import { UpsertDatabase } from './database';
type Props = {
open: boolean;
diff --git a/src/lib/management/ManagementTrigger.tsx b/src/lib/management/ManagementTrigger.tsx
index 356f3f5e5..1f58782c1 100644
--- a/src/lib/management/ManagementTrigger.tsx
+++ b/src/lib/management/ManagementTrigger.tsx
@@ -1,10 +1,10 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/lib/components/tooltip';
+import { useEffect, useState } from 'react';
+import { DatabaseStatus, Icon, LoadingSpinner, nilUUID, TooltipProvider, useAppDispatch, useSchemaGraph, useSessionCache } from '..';
import { addError } from '../data-access/store/configSlice';
-import { clearQB, selectSaveState } from '../data-access/store/sessionSlice';
import { clearSchema } from '../data-access/store/schemaSlice';
+import { clearQB, selectSaveState } from '../data-access/store/sessionSlice';
import { ManagementDialog, ManagementViews } from './ManagementDialog';
-import { DatabaseStatus, Icon, LoadingSpinner, nilUUID, TooltipProvider, useAppDispatch, useSchemaGraph, useSessionCache } from '..';
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/lib/components/tooltip';
type Props = {
managementOpen: boolean;
diff --git a/src/lib/management/Members.tsx b/src/lib/management/Members.tsx
index cd7ab4332..a42f633bc 100644
--- a/src/lib/management/Members.tsx
+++ b/src/lib/management/Members.tsx
@@ -1,12 +1,12 @@
-import React, { useState } from 'react';
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import { UserPolicy } from 'ts-common';
+import { Icon } from '..';
import { Button } from '../components/buttons';
import { useDialogContext } from '../components/layout/Dialog';
+import { TableUI } from '../components/tableUI/TableUI';
import { useUsersPolicy } from '../data-access/store';
-import { useDispatch } from 'react-redux';
-import { Icon } from '..';
import { setUsersPolicy } from '../data-access/store/authorizationUsersSlice';
-import { TableUI } from '../components/tableUI/TableUI';
-import { UserPolicy } from 'ts-common';
interface UserManagementContentProps {
onConfirm?: (users: { name: string; email: string; type: string }[]) => void;
diff --git a/src/lib/management/Overview.tsx b/src/lib/management/Overview.tsx
index 32076ba3b..c619d7b86 100644
--- a/src/lib/management/Overview.tsx
+++ b/src/lib/management/Overview.tsx
@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
+import { SaveState } from 'ts-common';
+import { Tab, Tabs } from '../components/tabs';
import { ManagementViews } from './ManagementDialog';
-import { Tabs, Tab } from '../components/tabs';
import { Workspace } from './Workspace';
-import { SaveState } from 'ts-common';
type Props = {
onClose: () => void;
diff --git a/src/lib/management/Settings.tsx b/src/lib/management/Settings.tsx
index 02987b9e6..d40951fbe 100644
--- a/src/lib/management/Settings.tsx
+++ b/src/lib/management/Settings.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
export function Settings() {
return (
<div className="flex items-start w-full h-full p-6">
diff --git a/src/lib/management/Workspace.tsx b/src/lib/management/Workspace.tsx
index 02bfc4500..4cc7d4c04 100644
--- a/src/lib/management/Workspace.tsx
+++ b/src/lib/management/Workspace.tsx
@@ -1,10 +1,9 @@
-import React, { useState } from 'react';
+import { SaveState } from 'ts-common';
import { useAppDispatch, useProjects, useSessionCache } from '..';
+import { Breadcrumb } from '../components/breadcrumb/Breadcrumb';
+import { setCurrentProject, setPath } from '../data-access/store/projectSlice';
import { Databases } from './database';
import { ManagementViews } from './ManagementDialog';
-import { SaveState } from 'ts-common';
-import { Breadcrumb } from '../components/breadcrumb/Breadcrumb';
-import { setPath, setCurrentProject } from '../data-access/store/projectSlice';
type Props = {
onClose: () => void;
diff --git a/src/lib/management/database/DatabaseForm.tsx b/src/lib/management/database/DatabaseForm.tsx
index 7e234f2b3..0bb74884a 100644
--- a/src/lib/management/database/DatabaseForm.tsx
+++ b/src/lib/management/database/DatabaseForm.tsx
@@ -1,7 +1,7 @@
-import React, { useEffect, useState } from 'react';
-import { databaseProtocolMapping, Input, nilUUID } from '../..';
-import { PartialSaveState, SaveState } from 'ts-common';
+import { useEffect, useState } from 'react';
+import { PartialSaveState } from 'ts-common';
import { DatabaseType, DatabaseTypeArray } from 'ts-common/src/model/webSocket/dbConnection';
+import { databaseProtocolMapping, Input } from '../..';
export const INITIAL_SAVE_STATE: PartialSaveState = {
name: 'Untitled',
diff --git a/src/lib/management/database/DatabaseLine.tsx b/src/lib/management/database/DatabaseLine.tsx
index a9974020b..115c85fce 100644
--- a/src/lib/management/database/DatabaseLine.tsx
+++ b/src/lib/management/database/DatabaseLine.tsx
@@ -1,27 +1,21 @@
import {
- Icon,
Button,
+ DropdownItem,
+ Icon,
Popover,
- PopoverTrigger,
PopoverContent,
- DropdownItem,
- TooltipProvider,
+ PopoverTrigger,
Tooltip,
- TooltipTrigger,
TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
} from '@/lib/components';
import { Heatmap1D } from '@/lib/components/charts/heatmap1D';
import { IndicatorGraph } from '@/lib/components/charts/indicatorGraph';
-import { wsDeleteState, nilUUID, useSessionCache, useAppDispatch, useActiveQuery, useGraphQueryCounts } from '@/lib/data-access';
+import { useActiveQuery, useAppDispatch, useGraphQueryCounts, useSessionCache, wsDeleteState } from '@/lib/data-access';
import { clearSchema } from '@/lib/data-access/store/schemaSlice';
-import { selectSaveState, clearQB, deleteSaveState } from '@/lib/data-access/store/sessionSlice';
-import {
- CountQueryResultFromBackend,
- GraphQueryCountResultFromBackend,
- GraphQueryResultMetaFromBackend,
- Query,
- SaveState,
-} from 'ts-common';
+import { clearQB, deleteSaveState, selectSaveState } from '@/lib/data-access/store/sessionSlice';
+import { CountQueryResultFromBackend, GraphQueryCountResultFromBackend, Query, SaveState } from 'ts-common';
// Update props to include missing functions and optional sharing flag.
interface DatabaseLineProps {
diff --git a/src/lib/management/database/Databases.tsx b/src/lib/management/database/Databases.tsx
index 2f5c71f81..f048ab161 100644
--- a/src/lib/management/database/Databases.tsx
+++ b/src/lib/management/database/Databases.tsx
@@ -1,26 +1,14 @@
-import { useMemo, useState, useEffect } from 'react';
-import {
- Button,
- Icon,
- nilUUID,
- useActiveQuery,
- useAppDispatch,
- useAuthCache,
- useAuthentication,
- useGraphQueryResult,
- useProjects,
- useSessionCache,
- wsDeleteState,
-} from '../..';
-import { clearQB, deleteSaveState } from '../../data-access/store/sessionSlice';
+import { useEffect, useMemo, useState } from 'react';
+import { SaveState } from 'ts-common';
+import { Button, Icon, nilUUID, useAppDispatch, useAuthCache, useAuthentication, useProjects, useSessionCache, wsDeleteState } from '../..';
import { clearSchema } from '../../data-access/store/schemaSlice';
+import { clearQB, deleteSaveState } from '../../data-access/store/sessionSlice';
import { useHandleDatabase } from './useHandleDatabase';
-import { SaveState } from 'ts-common';
// --- Add the imports for project functionality ---
-import { addProject, setCurrentProject, setProjects, deleteProject, addToPath } from '../../data-access/store/projectSlice';
import { wsCreateProject, wsDeleteProject, wsGetProjects } from '@/lib/data-access/broker/wsProject';
import { Dialog, DialogContent, Input } from '../..'; // For the new-project dialog
+import { addProject, addToPath, deleteProject, setCurrentProject, setProjects } from '../../data-access/store/projectSlice';
import { DatabaseLine } from './DatabaseLine';
type Props = {
@@ -252,38 +240,37 @@ export function Databases({ onClose, saveStates, changeActive, setSelectedSaveSt
onSelect={() => {
if (key !== session.currentSaveState) {
onClose();
- }
- }}
- onUpdate={() => {
- changeActive('update');
- setSelectedSaveState(saveStates[key]);
- }}
- onClone={() => {
- databaseHandler.submitDatabaseChange(
- { ...saveStates[key], name: saveStates[key].name + ' (copy)', id: nilUUID },
- 'add',
- true,
- () => {},
- );
- setSelectedSaveState(saveStates[key]);
- }}
- onDelete={() => {
- if (session.currentSaveState === key) {
- dispatch(clearQB());
- dispatch(clearSchema());
- }
- wsDeleteState({ saveStateID: key });
- dispatch(deleteSaveState(key));
- }}
- onShare={async () => {
- setSharing(true);
- await auth.shareLink();
- setSharing(false);
- }}
- showDifferentiation={showDifferentiation}
- showQueries={showQueries}
- />
-
+ }
+ }}
+ onUpdate={() => {
+ changeActive('update');
+ setSelectedSaveState(saveStates[key]);
+ }}
+ onClone={() => {
+ databaseHandler.submitDatabaseChange(
+ { ...saveStates[key], name: saveStates[key].name + ' (copy)', id: nilUUID },
+ 'add',
+ true,
+ () => {},
+ );
+ setSelectedSaveState(saveStates[key]);
+ }}
+ onDelete={() => {
+ if (session.currentSaveState === key) {
+ dispatch(clearQB());
+ dispatch(clearSchema());
+ }
+ wsDeleteState({ saveStateID: key });
+ dispatch(deleteSaveState(key));
+ }}
+ onShare={async () => {
+ setSharing(true);
+ await auth.shareLink();
+ setSharing(false);
+ }}
+ showDifferentiation={showDifferentiation}
+ showQueries={showQueries}
+ />
))}
</tbody>
</table>
diff --git a/src/lib/management/database/MockSaveStates.tsx b/src/lib/management/database/MockSaveStates.tsx
index 08d4e5de9..adbfd612f 100644
--- a/src/lib/management/database/MockSaveStates.tsx
+++ b/src/lib/management/database/MockSaveStates.tsx
@@ -1,7 +1,6 @@
-import React from 'react';
-import { nilUUID } from '../../data-access/broker';
import { SaveState } from 'ts-common';
import { DatabaseType } from 'ts-common/src/model/webSocket/dbConnection';
+import { nilUUID } from '../../data-access/broker';
export type SaveStateSampleI = SaveState & {
subtitle: string;
diff --git a/src/lib/management/database/UpsertDatabase.tsx b/src/lib/management/database/UpsertDatabase.tsx
index 98220840b..28989fcde 100644
--- a/src/lib/management/database/UpsertDatabase.tsx
+++ b/src/lib/management/database/UpsertDatabase.tsx
@@ -1,11 +1,11 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { useAuthCache, nilUUID } from '../../data-access';
+import { useEffect, useRef, useState } from 'react';
+import { PartialSaveState, SaveState } from 'ts-common';
+import { Icon } from '../..';
import { Button } from '../../components/buttons';
+import { nilUUID, useAuthCache } from '../../data-access';
import { DatabaseForm, INITIAL_SAVE_STATE } from './DatabaseForm';
import { SampleDatabaseSelector } from './MockSaveStates';
-import { Icon } from '../..';
import { useHandleDatabase } from './useHandleDatabase';
-import { PartialSaveState, SaveState } from 'ts-common';
export const UpsertDatabase = (props: {
onClose(): void;
diff --git a/src/lib/management/database/useHandleDatabase.ts b/src/lib/management/database/useHandleDatabase.ts
index 7f9512ce9..1179928fe 100644
--- a/src/lib/management/database/useHandleDatabase.ts
+++ b/src/lib/management/database/useHandleDatabase.ts
@@ -1,18 +1,18 @@
+import { wsAddQuery, wsUpdateQuery } from '@/lib/data-access/broker';
+import { addError } from '@/lib/data-access/store/configSlice';
+import { useState } from 'react';
+import { PartialSaveState, SaveState, SaveStateWithAuthorization } from 'ts-common';
import {
- wsTestDatabaseConnection,
- wsCreateState,
- wsUpdateState,
- useAuthCache,
+ DatabaseStatus,
useAppDispatch,
+ useAuthCache,
useProjects,
- DatabaseStatus,
+ wsCreateState,
+ wsTestDatabaseConnection,
+ wsUpdateState,
} from '../../data-access';
-import { useState } from 'react';
-import { addSaveState, selectSaveState, testedSaveState } from '../../data-access/store/sessionSlice';
import { setSchemaLoading } from '../../data-access/store/schemaSlice';
-import { PartialSaveState, SaveState, SaveStateWithAuthorization } from 'ts-common';
-import { addError } from '@/lib/data-access/store/configSlice';
-import { wsAddQuery, wsUpdateQuery } from '@/lib/data-access/broker';
+import { addSaveState, selectSaveState, testedSaveState } from '../../data-access/store/sessionSlice';
export type ConnectionStatus = {
updating: boolean;
diff --git a/src/lib/management/index.ts b/src/lib/management/index.ts
index 90a09e7d3..e53d2f309 100644
--- a/src/lib/management/index.ts
+++ b/src/lib/management/index.ts
@@ -1,2 +1,2 @@
-export * from './ManagementTrigger';
export * from './ManagementDialog';
+export * from './ManagementTrigger';
diff --git a/src/lib/mock-data/geo-json/index.tsx b/src/lib/mock-data/geo-json/index.tsx
index d558cf124..02c03aa10 100644
--- a/src/lib/mock-data/geo-json/index.tsx
+++ b/src/lib/mock-data/geo-json/index.tsx
@@ -1,6 +1,6 @@
+export { default as europeData } from './europe.json';
+export { default as netherlands } from './netherlands.json';
export { default as netherlandsData } from './netherlands_provinces.json';
export { default as netherlandsTownshipsData } from './netherlands_townships.json';
-export { default as europeData } from './europe.json';
export { default as usaData } from './usa.json';
export { default as worldData } from './world.json';
-export { default as netherlands } from './netherlands.json';
diff --git a/src/lib/mock-data/index.ts b/src/lib/mock-data/index.ts
index 84a325edf..962510a2a 100644
--- a/src/lib/mock-data/index.ts
+++ b/src/lib/mock-data/index.ts
@@ -1,2 +1,2 @@
-export * from './schema';
export * from './query-result';
+export * from './schema';
diff --git a/src/lib/mock-data/query-result/bigMockQueryResults.json b/src/lib/mock-data/query-result/bigMockQueryResults.json
index e0f90b1f0..65a92d62e 100644
--- a/src/lib/mock-data/query-result/bigMockQueryResults.json
+++ b/src/lib/mock-data/query-result/bigMockQueryResults.json
@@ -107993,4 +107993,4 @@
"label": "airports"
}
]
-}
\ No newline at end of file
+}
diff --git a/src/lib/mock-data/query-result/mockData.ts b/src/lib/mock-data/query-result/mockData.ts
index 100680ec2..5d9b25d91 100644
--- a/src/lib/mock-data/query-result/mockData.ts
+++ b/src/lib/mock-data/query-result/mockData.ts
@@ -1,4 +1,4 @@
-import { graphQueryBackend2graphQuery } from 'ts-common';
+import { getGraphStatistics, graphQueryBackend2graphQuery } from 'ts-common';
const mockDataArray = [
'big2ndChamberQueryResult',
@@ -22,13 +22,10 @@ export type MockDataI = (typeof mockDataArray)[number];
export const loadMockData = async (fileName: MockDataI) => {
const filename = `./${fileName.replace('_', '/')}.json`;
const json = await import(filename /* @vite-ignore */);
- const { nodes, edges, metaData } = graphQueryBackend2graphQuery(json.default);
+ const result = graphQueryBackend2graphQuery(json.default);
return {
- data: {
- nodes,
- edges,
- },
- graphMetadata: metaData,
+ data: result,
+ graphMetadata: getGraphStatistics(result),
};
};
diff --git a/src/lib/mock-data/query-result/mockMobilityQueryResult.json b/src/lib/mock-data/query-result/mockMobilityQueryResult.json
index c19bf3bda..63c52b964 100644
--- a/src/lib/mock-data/query-result/mockMobilityQueryResult.json
+++ b/src/lib/mock-data/query-result/mockMobilityQueryResult.json
@@ -17516,4 +17516,4 @@
"label": "rides"
}
]
-}
\ No newline at end of file
+}
diff --git a/src/lib/mock-data/schema/big2ndChamberSchemaRaw.ts b/src/lib/mock-data/schema/big2ndChamberSchemaRaw.ts
index a0d8bf1f4..7340b46ba 100644
--- a/src/lib/mock-data/schema/big2ndChamberSchemaRaw.ts
+++ b/src/lib/mock-data/schema/big2ndChamberSchemaRaw.ts
@@ -1,5 +1,5 @@
-import { SchemaUtils } from '../../../lib/schema/schema-utils';
import { SchemaReturnFormat } from 'ts-common';
+import { SchemaUtils } from '../../../lib/schema/schema-utils';
export const big2ndChamberSchemaRaw: SchemaReturnFormat = {
nodes: [
diff --git a/src/lib/mock-data/schema/fincenWithAttributes.ts b/src/lib/mock-data/schema/fincenWithAttributes.ts
index 1a78f4818..b705ed1d7 100644
--- a/src/lib/mock-data/schema/fincenWithAttributes.ts
+++ b/src/lib/mock-data/schema/fincenWithAttributes.ts
@@ -1,5 +1,5 @@
-import { SchemaUtils } from '../../../lib/schema/schema-utils';
import { SchemaReturnFormat } from 'ts-common';
+import { SchemaUtils } from '../../../lib/schema/schema-utils';
export const fincenWithAttributesRaw: SchemaReturnFormat = {
nodes: [
diff --git a/src/lib/mock-data/schema/index.ts b/src/lib/mock-data/schema/index.ts
index aa115b368..0c209fcc0 100644
--- a/src/lib/mock-data/schema/index.ts
+++ b/src/lib/mock-data/schema/index.ts
@@ -1,15 +1,13 @@
-export * from './simpleRaw';
+export * from './big2ndChamberSchemaRaw';
+export * from './fincenWithAttributes';
+export * from './marieBoucherSampleSchemaRaw';
export * from './moviesSchemaRaw';
export * from './moviesSchemaWithAttributes';
export * from './northwindSchemaRaw';
-export * from './twitterSchemaRaw';
-export * from './big2ndChamberSchemaRaw';
-export * from './typesMockSchemaRaw';
-export * from './simpleAirportRaw';
-export * from './recommendationsWithAttributes';
export * from './northwindWithAttributes';
-export * from './slackWithAttributes';
-export * from './fincenWithAttributes';
-export * from './marieBoucherSampleSchemaRaw';
-export * from './marieBoucherSampleSchemaRaw';
+export * from './recommendationsWithAttributes';
export * from './simpleAirportRaw';
+export * from './simpleRaw';
+export * from './slackWithAttributes';
+export * from './twitterSchemaRaw';
+export * from './typesMockSchemaRaw';
diff --git a/src/lib/mock-data/schema/mock-data.spec.ts b/src/lib/mock-data/schema/mock-data.spec.ts
index 0817e82df..48d00bec1 100644
--- a/src/lib/mock-data/schema/mock-data.spec.ts
+++ b/src/lib/mock-data/schema/mock-data.spec.ts
@@ -1,9 +1,15 @@
-import { assert, describe, expect, it, test } from 'vitest';
-
-import { movieSchemaRaw, movieSchema } from '..';
-import { northWindSchema, northwindSchemaRaw } from '..';
-import { simpleSchema, simpleSchemaRaw } from '..';
-import { twitterSchema, twitterSchemaRaw } from '..';
+import { describe, expect, it } from 'vitest';
+
+import {
+ movieSchema,
+ movieSchemaRaw,
+ northWindSchema,
+ northwindSchemaRaw,
+ simpleSchema,
+ simpleSchemaRaw,
+ twitterSchema,
+ twitterSchemaRaw,
+} from '..';
describe('MockData Tests', () => {
it('should have raw data available movie', () => {
diff --git a/src/lib/mock-data/schema/moviesSchemaWithAttributes.ts b/src/lib/mock-data/schema/moviesSchemaWithAttributes.ts
index 78bcd6fd1..b4874766f 100644
--- a/src/lib/mock-data/schema/moviesSchemaWithAttributes.ts
+++ b/src/lib/mock-data/schema/moviesSchemaWithAttributes.ts
@@ -1,5 +1,5 @@
-import { SchemaUtils } from '../../../lib/schema/schema-utils';
import { SchemaReturnFormat } from 'ts-common';
+import { SchemaUtils } from '../../../lib/schema/schema-utils';
export const movieSchemaWithAttributesRaw: SchemaReturnFormat = {
nodes: [
diff --git a/src/lib/mock-data/schema/northwindWithAttributes.ts b/src/lib/mock-data/schema/northwindWithAttributes.ts
index 5a9ac1d77..9d44fc4e6 100644
--- a/src/lib/mock-data/schema/northwindWithAttributes.ts
+++ b/src/lib/mock-data/schema/northwindWithAttributes.ts
@@ -1,5 +1,5 @@
-import { SchemaUtils } from '../../../lib/schema/schema-utils';
import { SchemaReturnFormat } from 'ts-common';
+import { SchemaUtils } from '../../../lib/schema/schema-utils';
export const northWindWithAttributesRaw: SchemaReturnFormat = {
nodes: [
diff --git a/src/lib/mock-data/schema/recommendationsWithAttributes.ts b/src/lib/mock-data/schema/recommendationsWithAttributes.ts
index b3755ceb8..c5b39606a 100644
--- a/src/lib/mock-data/schema/recommendationsWithAttributes.ts
+++ b/src/lib/mock-data/schema/recommendationsWithAttributes.ts
@@ -1,5 +1,5 @@
-import { SchemaUtils } from '../../../lib/schema/schema-utils';
import { SchemaReturnFormat } from 'ts-common';
+import { SchemaUtils } from '../../../lib/schema/schema-utils';
export const recommendationsWithAttributesRaw: SchemaReturnFormat = {
nodes: [
diff --git a/src/lib/mock-data/schema/slackWithAttributes.ts b/src/lib/mock-data/schema/slackWithAttributes.ts
index 65285703f..93369d509 100644
--- a/src/lib/mock-data/schema/slackWithAttributes.ts
+++ b/src/lib/mock-data/schema/slackWithAttributes.ts
@@ -1,5 +1,5 @@
-import { SchemaUtils } from '../../../lib/schema/schema-utils';
import { SchemaReturnFormat } from 'ts-common';
+import { SchemaUtils } from '../../../lib/schema/schema-utils';
export const slackWithAttributesRaw: SchemaReturnFormat = {
nodes: [
diff --git a/src/lib/mock-data/schema/typesMockSchemaRaw.ts b/src/lib/mock-data/schema/typesMockSchemaRaw.ts
index 8aa3ba305..1c7fdac34 100644
--- a/src/lib/mock-data/schema/typesMockSchemaRaw.ts
+++ b/src/lib/mock-data/schema/typesMockSchemaRaw.ts
@@ -1,5 +1,5 @@
-import { SchemaUtils } from '../../../lib/schema/schema-utils';
import { SchemaReturnFormat } from 'ts-common';
+import { SchemaUtils } from '../../../lib/schema/schema-utils';
export const typesMockSchemaRaw: SchemaReturnFormat = {
nodes: [
diff --git a/src/lib/querybuilder/index.ts b/src/lib/querybuilder/index.ts
index 2f0c103f1..c4fb59694 100644
--- a/src/lib/querybuilder/index.ts
+++ b/src/lib/querybuilder/index.ts
@@ -1,7 +1,7 @@
import { QueryBuilder } from './panel';
+export * from './model';
export * from './panel';
export * from './pills';
-export * from './model';
export default QueryBuilder;
diff --git a/src/lib/querybuilder/model/graphology/utils.ts b/src/lib/querybuilder/model/graphology/utils.ts
index 5e1adb664..f259c21b1 100644
--- a/src/lib/querybuilder/model/graphology/utils.ts
+++ b/src/lib/querybuilder/model/graphology/utils.ts
@@ -1,22 +1,22 @@
-import Graph, { MultiGraph } from 'graphology';
-import { Attributes as GAttributes, Attributes } from 'graphology-types';
+import { MultiGraph } from 'graphology';
+import { Attributes, Attributes as GAttributes } from 'graphology-types';
-import { checkForMetaAttributes } from './metaAttributes';
import {
- QueryGraphNodes,
- QueryGraphEdges,
- SchemaAttribute,
- QueryGraphEdgeHandle,
EntityNodeAttributes,
- RelationNodeAttributes,
+ Handles,
+ InputNodeTypeTypes,
LogicNodeAttributes,
+ QueryElementTypes,
+ QueryGraphEdgeHandle,
+ QueryGraphEdges,
QueryGraphEdgesOpt,
+ QueryGraphNodes,
+ RelationNodeAttributes,
+ SchemaAttribute,
SchemaAttributeTypes,
- Handles,
- InputNodeTypeTypes,
XYPosition,
} from 'ts-common';
-import { QueryElementTypes } from 'ts-common';
+import { checkForMetaAttributes } from './metaAttributes';
/** monospace fontsize table */
const widthPerFontsize = {
diff --git a/src/lib/querybuilder/model/index.ts b/src/lib/querybuilder/model/index.ts
index 140b156ec..0799002f9 100644
--- a/src/lib/querybuilder/model/index.ts
+++ b/src/lib/querybuilder/model/index.ts
@@ -1,4 +1,4 @@
-import { QueryGraphEdgeHandle, NodeAttribute, QueryElementTypes, InputNodeType, Handles } from 'ts-common';
+import { Handles, InputNodeType, NodeAttribute, QueryElementTypes, QueryGraphEdgeHandle } from 'ts-common';
import { SchemaReactflowNode } from './reactflow';
export * from './graphology';
diff --git a/src/lib/querybuilder/model/reactflow/model.ts b/src/lib/querybuilder/model/reactflow/model.ts
index 20f52bd25..66992495b 100644
--- a/src/lib/querybuilder/model/reactflow/model.ts
+++ b/src/lib/querybuilder/model/reactflow/model.ts
@@ -3,8 +3,8 @@
* Utrecht University within the Software Project course.
* © Copyright Utrecht University (Department of Information and Computing Sciences)
*/
-import { Edge as ReactEdge, NodeProps } from 'reactflow';
-import { EntityNodeAttributes, RelationNodeAttributes, LogicNodeAttributes, EntityData, RelationData, LogicData } from 'ts-common';
+import { NodeProps, Edge as ReactEdge } from 'reactflow';
+import { EntityData, EntityNodeAttributes, LogicData, LogicNodeAttributes, RelationData, RelationNodeAttributes } from 'ts-common';
import { QueryElementTypes } from 'ts-common/src/model/reactflow';
/** List of possible query element types */
diff --git a/src/lib/querybuilder/model/reactflow/utils.ts b/src/lib/querybuilder/model/reactflow/utils.ts
index 9e6bb41f1..337cea0ec 100644
--- a/src/lib/querybuilder/model/reactflow/utils.ts
+++ b/src/lib/querybuilder/model/reactflow/utils.ts
@@ -1,5 +1,5 @@
import Graph from 'graphology';
-import { Node, Edge } from 'reactflow';
+import { Edge, Node } from 'reactflow';
import { toHandleId } from '..';
// Takes the querybuilder graph as an input and creates react flow elements for them.
diff --git a/src/lib/querybuilder/panel/ManualQueryDialog.tsx b/src/lib/querybuilder/panel/ManualQueryDialog.tsx
index 8467e08f0..d29cd2516 100644
--- a/src/lib/querybuilder/panel/ManualQueryDialog.tsx
+++ b/src/lib/querybuilder/panel/ManualQueryDialog.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
import { Button } from '../../components';
type ManualQueryDialogProps = {
diff --git a/src/lib/querybuilder/panel/QueryBuilder.tsx b/src/lib/querybuilder/panel/QueryBuilder.tsx
index 2cc8c1633..5472d36c6 100644
--- a/src/lib/querybuilder/panel/QueryBuilder.tsx
+++ b/src/lib/querybuilder/panel/QueryBuilder.tsx
@@ -7,6 +7,8 @@ import {
useSchemaGraph,
useSearchResultQB,
} from '@/lib/data-access/store';
+import { setQuerybuilderGraphology, toQuerybuilderGraphology } from '@/lib/data-access/store/sessionSlice';
+import html2canvas from 'html2canvas';
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import ReactFlow, {
Background,
@@ -22,6 +24,7 @@ import ReactFlow, {
isNode,
useReactFlow,
} from 'reactflow';
+import { AllLogicMap, QueryElementTypes, defaultGraph, isLogicHandle } from 'ts-common';
import { Dialog, DialogContent } from '../../components/layout/Dialog';
import { addError } from '../../data-access/store/configSlice';
import { toSchemaGraphology } from '../../data-access/store/schemaSlice';
@@ -31,15 +34,12 @@ import { ConnectionDragLine, ConnectionLine, QueryEntityPill, QueryRelationPill
import { QueryLogicPill } from '../pills/customFlowPills/logicpill/QueryLogicPill';
import { dragPillStarted, movePillTo } from '../pills/dragging/dragPill';
import styles from './querybuilder.module.scss';
+import { QueryBuilderContextMenu } from './QueryBuilderContextMenu';
+import { QueryBuilderDispatcherContext } from './QueryBuilderDispatcher';
+import { QueryBuilderNav, QueryBuilderToggleSettings } from './QueryBuilderNav';
import { QueryBuilderLogicPillsPanel } from './querysidepanel/QueryBuilderLogicPillsPanel';
import { QueryBuilderRelatedNodesPanel } from './querysidepanel/QueryBuilderRelatedNodesPanel';
import { ConnectingNodeDataI } from './utils/connectorDrop';
-import { QueryBuilderDispatcherContext } from './QueryBuilderDispatcher';
-import { QueryBuilderNav, QueryBuilderToggleSettings } from './QueryBuilderNav';
-import html2canvas from 'html2canvas';
-import { QueryBuilderContextMenu } from './QueryBuilderContextMenu';
-import { QueryElementTypes, AllLogicMap, isLogicHandle, defaultGraph } from 'ts-common';
-import { setQuerybuilderGraphology, toQuerybuilderGraphology } from '@/lib/data-access/store/sessionSlice';
export type QueryBuilderProps = {
onRunQuery?: (useCached: boolean) => void;
diff --git a/src/lib/querybuilder/panel/QueryBuilderContextMenu.tsx b/src/lib/querybuilder/panel/QueryBuilderContextMenu.tsx
index edba4258b..2be58481a 100644
--- a/src/lib/querybuilder/panel/QueryBuilderContextMenu.tsx
+++ b/src/lib/querybuilder/panel/QueryBuilderContextMenu.tsx
@@ -1,16 +1,16 @@
-import { useMemo, useState, useEffect } from 'react';
-import { Popover, PopoverTrigger, DropdownItemContainer, DropdownItem, Input, Icon } from '@/lib/components';
-import { ReactFlowInstance, Node } from 'reactflow';
-import { useActiveQuery, useAppDispatch, useQuerybuilderHash } from '../..';
-import { isEqual } from 'lodash-es';
-import { getDataTypeIcon } from '../../components/DataTypeIcon';
-import { QueryUnionType, NodeAttribute, defaultGraph, QueryRelationDirection } from 'ts-common';
+import { DropdownItem, DropdownItemContainer, Icon, Input, Popover, PopoverTrigger } from '@/lib/components';
import {
attributeShownToggle,
setQuerybuilderGraphology,
setQueryUnionType,
toQuerybuilderGraphology,
} from '@/lib/data-access/store/sessionSlice';
+import { isEqual } from 'lodash-es';
+import { useEffect, useMemo, useState } from 'react';
+import { Node, ReactFlowInstance } from 'reactflow';
+import { defaultGraph, NodeAttribute, QueryRelationDirection, QueryUnionType } from 'ts-common';
+import { useActiveQuery, useAppDispatch, useQuerybuilderHash } from '../..';
+import { getDataTypeIcon } from '../../components/DataTypeIcon';
export const QueryBuilderContextMenu = (props: {
open: boolean;
diff --git a/src/lib/querybuilder/panel/QueryBuilderDispatcher.tsx b/src/lib/querybuilder/panel/QueryBuilderDispatcher.tsx
index aa3995713..2aec54c94 100644
--- a/src/lib/querybuilder/panel/QueryBuilderDispatcher.tsx
+++ b/src/lib/querybuilder/panel/QueryBuilderDispatcher.tsx
@@ -1,6 +1,6 @@
-import React, { createContext } from 'react';
-import { SchemaReactflowLogicNode } from '../model';
+import { createContext } from 'react';
import { OnConnectStartParams } from 'reactflow';
+import { SchemaReactflowLogicNode } from '../model';
export const QueryBuilderDispatcherContext = createContext<{
openLogicPillUpdate: (node: SchemaReactflowLogicNode) => void;
diff --git a/src/lib/querybuilder/panel/QueryBuilderNav.tsx b/src/lib/querybuilder/panel/QueryBuilderNav.tsx
index 6f313f0d6..c1499855b 100644
--- a/src/lib/querybuilder/panel/QueryBuilderNav.tsx
+++ b/src/lib/querybuilder/panel/QueryBuilderNav.tsx
@@ -1,29 +1,24 @@
+import { Button, ControlContainer, Input, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/lib/components';
+import { Popover, PopoverContent, PopoverTrigger } from '@/lib/components/popover';
+import { Tab, Tabs } from '@/lib/components/tabs';
+import { addError } from '@/lib/data-access/store/configSlice';
+import objectHash from 'object-hash';
import { useEffect, useMemo, useRef, useState } from 'react';
-import { ControlContainer, TooltipProvider, Tooltip, TooltipTrigger, Button, TooltipContent, Input } from '@/lib/components';
-import { Popover, PopoverTrigger, PopoverContent } from '@/lib/components/popover';
-import { useActiveQuery, useActiveSaveState,
- useAppDispatch,
- useGraphQuery,
- useGraphQueryCounts,
- useGraphQueryResult,
- useML} from '../../data-access';
+import Sortable from 'sortablejs';
+import { useActiveQuery, useActiveSaveState, useAppDispatch, useGraphQuery, useML } from '../../data-access';
+import { wsAddQuery, wsDeleteQuery, wsManualQueryRequest, wsUpdateQuery } from '../../data-access/broker';
import {
+ addNewQuery,
clearQB,
- setQuerybuilderSettings,
removeQueryByID,
+ reorderQueryState,
setActiveQueryID,
+ setQuerybuilderSettings,
setQueryName,
- addNewQuery,
- reorderQueryState,
} from '../../data-access/store/sessionSlice';
+import { ManualQueryDialog } from './ManualQueryDialog';
import { QueryMLDialog } from './querysidepanel/QueryMLDialog';
import { QuerySettings } from './querysidepanel/QuerySettings';
-import { ManualQueryDialog } from './ManualQueryDialog';
-import { wsAddQuery, wsDeleteQuery, wsManualQueryRequest, wsUpdateQuery } from '../../data-access/broker';
-import { Tabs, Tab } from '@/lib/components/tabs';
-import { addError } from '@/lib/data-access/store/configSlice';
-import Sortable from 'sortablejs';
-import objectHash from 'object-hash';
export type QueryBuilderToggleSettings = 'settings' | 'ml' | 'logic' | 'relatedNodes' | undefined;
diff --git a/src/lib/querybuilder/panel/querysidepanel/QueryBuilderLogicPillsPanel.tsx b/src/lib/querybuilder/panel/querysidepanel/QueryBuilderLogicPillsPanel.tsx
index 6639c97d1..93e5f2d2d 100644
--- a/src/lib/querybuilder/panel/querysidepanel/QueryBuilderLogicPillsPanel.tsx
+++ b/src/lib/querybuilder/panel/querysidepanel/QueryBuilderLogicPillsPanel.tsx
@@ -1,10 +1,10 @@
+import { setQuerybuilderGraphology, toQuerybuilderGraphology } from '@/lib/data-access/store/sessionSlice';
import { useState } from 'react';
-import { SchemaReactflowLogicNode, toHandleData } from '../../model';
-import { ConnectingNodeDataI } from '../utils/connectorDrop';
import { useDispatch } from 'react-redux';
+import { AllLogicDescriptions, AllLogicMap, defaultGraph, QueryElementTypes } from 'ts-common';
import { Button, Icon, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, useActiveQuery } from '../../..';
-import { QueryElementTypes, AllLogicDescriptions, AllLogicMap, defaultGraph } from 'ts-common';
-import { setQuerybuilderGraphology, toQuerybuilderGraphology } from '@/lib/data-access/store/sessionSlice';
+import { SchemaReactflowLogicNode, toHandleData } from '../../model';
+import { ConnectingNodeDataI } from '../utils/connectorDrop';
export const QueryBuilderLogicPillsPanel = (props: {
reactFlowWrapper: HTMLDivElement | null;
diff --git a/src/lib/querybuilder/panel/querysidepanel/QueryBuilderRelatedNodesPanel.tsx b/src/lib/querybuilder/panel/querysidepanel/QueryBuilderRelatedNodesPanel.tsx
index bed25f905..4ab741b5e 100644
--- a/src/lib/querybuilder/panel/querysidepanel/QueryBuilderRelatedNodesPanel.tsx
+++ b/src/lib/querybuilder/panel/querysidepanel/QueryBuilderRelatedNodesPanel.tsx
@@ -1,11 +1,11 @@
-import { useMemo, useState } from 'react';
-import { ConnectingNodeDataI } from '../utils/connectorDrop';
import { useActiveQuery, useActiveSaveState, useSchemaGraph } from '@/lib/data-access';
-import { useDispatch } from 'react-redux';
import { toSchemaGraphology } from '@/lib/data-access/store/schemaSlice';
-import { SchemaNode, QueryElementTypes, Handles, SchemaEdge, defaultGraph } from 'ts-common';
-import { toHandleData } from '../../model';
import { setQuerybuilderGraphology, toQuerybuilderGraphology } from '@/lib/data-access/store/sessionSlice';
+import { useMemo, useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { Handles, QueryElementTypes, SchemaEdge, SchemaNode, defaultGraph } from 'ts-common';
+import { toHandleData } from '../../model';
+import { ConnectingNodeDataI } from '../utils/connectorDrop';
export const QueryBuilderRelatedNodesPanel = (props: {
reactFlowWrapper: HTMLDivElement | null;
diff --git a/src/lib/querybuilder/panel/querysidepanel/QueryMLDialog.tsx b/src/lib/querybuilder/panel/querysidepanel/QueryMLDialog.tsx
index c82f1dc26..68123a36f 100644
--- a/src/lib/querybuilder/panel/querysidepanel/QueryMLDialog.tsx
+++ b/src/lib/querybuilder/panel/querysidepanel/QueryMLDialog.tsx
@@ -1,4 +1,6 @@
-import React from 'react';
+import { FeatureEnabled } from '@/lib/components/featureFlags';
+import { FormBody, FormTitle } from '@/lib/components/forms';
+import { Input } from '@/lib/components/inputs';
import { useAppDispatch, useML } from '@/lib/data-access';
import {
setCentralityEnabled,
@@ -6,9 +8,6 @@ import {
setLinkPredictionEnabled,
setShortestPathEnabled,
} from '@/lib/data-access/store/mlSlice';
-import { FormBody, FormTitle } from '@/lib/components/forms';
-import { Input } from '@/lib/components/inputs';
-import { FeatureEnabled } from '@/lib/components/featureFlags';
export const QueryMLDialog = () => {
const dispatch = useAppDispatch();
diff --git a/src/lib/querybuilder/panel/querysidepanel/QuerySettings.tsx b/src/lib/querybuilder/panel/querysidepanel/QuerySettings.tsx
index b8c1104f2..878d7944d 100644
--- a/src/lib/querybuilder/panel/querysidepanel/QuerySettings.tsx
+++ b/src/lib/querybuilder/panel/querysidepanel/QuerySettings.tsx
@@ -1,12 +1,11 @@
-import { useEffect } from 'react';
-import React from 'react';
-import { Layouts } from '@/lib/graph-layout';
-import { Input } from '@/lib/components/inputs';
import { FormActions } from '@/lib/components';
+import { Input } from '@/lib/components/inputs';
import { useActiveQuery, useAppDispatch } from '@/lib/data-access';
import { addWarning } from '@/lib/data-access/store/configSlice';
-import { QueryBuilderSettings, defaultQuery } from 'ts-common';
import { setQuerybuilderSettings } from '@/lib/data-access/store/sessionSlice';
+import { Layouts } from '@/lib/graph-layout';
+import React, { useEffect } from 'react';
+import { QueryBuilderSettings, defaultQuery } from 'ts-common';
export const QuerySettings = React.forwardRef<HTMLDivElement, object>((props, ref) => {
const activeQuery = useActiveQuery();
diff --git a/src/lib/querybuilder/panel/schemaquerybuilder.stories.tsx b/src/lib/querybuilder/panel/schemaquerybuilder.stories.tsx
index 96a023d28..9ef063420 100644
--- a/src/lib/querybuilder/panel/schemaquerybuilder.stories.tsx
+++ b/src/lib/querybuilder/panel/schemaquerybuilder.stories.tsx
@@ -1,12 +1,12 @@
-import { Meta } from '@storybook/react';
-import { Provider } from 'react-redux';
import { setSchema, store } from '@/lib/data-access/store';
import { setQuerybuilderGraph } from '@/lib/data-access/store/sessionSlice';
-import { SchemaUtils } from '../../../lib/schema/schema-utils';
-import { Schema } from '@/lib/schema/panel';
import { movieSchemaRaw } from '@/lib/mock-data';
import { QueryBuilder } from '@/lib/querybuilder';
import { QueryMultiGraphology } from '@/lib/querybuilder/model/graphology/utils';
+import { Schema } from '@/lib/schema/panel';
+import { Meta } from '@storybook/react';
+import { Provider } from 'react-redux';
+import { SchemaUtils } from '../../../lib/schema/schema-utils';
const SchemaAndQueryBuilder = () => {
return (
diff --git a/src/lib/querybuilder/panel/stories/querybuilder-simple.stories.tsx b/src/lib/querybuilder/panel/stories/querybuilder-simple.stories.tsx
index 1a1b040d2..0d58b55bd 100644
--- a/src/lib/querybuilder/panel/stories/querybuilder-simple.stories.tsx
+++ b/src/lib/querybuilder/panel/stories/querybuilder-simple.stories.tsx
@@ -2,10 +2,10 @@ import { setSchema, store } from '@/lib/data-access/store';
import { setQuerybuilderGraph } from '@/lib/data-access/store/sessionSlice';
import { Meta } from '@storybook/react';
import { Provider } from 'react-redux';
-import QueryBuilder from '../QueryBuilder';
-import { QueryMultiGraphology } from '../../model';
import { QueryElementTypes } from 'ts-common';
import { SchemaUtils } from '../../../schema/schema-utils';
+import { QueryMultiGraphology } from '../../model';
+import QueryBuilder from '../QueryBuilder';
const Component: Meta<typeof QueryBuilder> = {
component: 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 3b382ac7b..659fb23fb 100644
--- a/src/lib/querybuilder/panel/stories/querybuilder-single-entity.stories.tsx
+++ b/src/lib/querybuilder/panel/stories/querybuilder-single-entity.stories.tsx
@@ -2,9 +2,9 @@ import { store } from '@/lib/data-access/store';
import { setQuerybuilderGraph } from '@/lib/data-access/store/sessionSlice';
import { Meta } from '@storybook/react';
import { Provider } from 'react-redux';
-import QueryBuilder from '../QueryBuilder';
-import { QueryMultiGraphology } from '../../model';
import { QueryElementTypes } from 'ts-common';
+import { QueryMultiGraphology } from '../../model';
+import QueryBuilder from '../QueryBuilder';
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 a24430b3a..170f4d3c9 100644
--- a/src/lib/querybuilder/panel/stories/querybuilder-single-relationship.stories.tsx
+++ b/src/lib/querybuilder/panel/stories/querybuilder-single-relationship.stories.tsx
@@ -2,9 +2,9 @@ import { store } from '@/lib/data-access/store';
import { setQuerybuilderGraph } from '@/lib/data-access/store/sessionSlice';
import { Meta } from '@storybook/react';
import { Provider } from 'react-redux';
-import QueryBuilder from '../QueryBuilder';
-import { QueryMultiGraphology } from '../../model';
import { QueryElementTypes } from 'ts-common';
+import { QueryMultiGraphology } from '../../model';
+import QueryBuilder from '../QueryBuilder';
const Component: Meta<typeof QueryBuilder> = {
component: QueryBuilder,
diff --git a/src/lib/querybuilder/panel/utils/connectorDrop.ts b/src/lib/querybuilder/panel/utils/connectorDrop.ts
index 169bd8f44..c4e5d49e8 100644
--- a/src/lib/querybuilder/panel/utils/connectorDrop.ts
+++ b/src/lib/querybuilder/panel/utils/connectorDrop.ts
@@ -1,5 +1,5 @@
import { OnConnectStartParams, XYPosition } from 'reactflow';
-import { NodeAttribute, QueryGraphNodes } from '../../model';
+import { NodeAttribute, QueryGraphNodes } from 'ts-common';
export type ConnectingNodeDataI = {
params: OnConnectStartParams;
diff --git a/src/lib/querybuilder/pills/FilterHandle.tsx b/src/lib/querybuilder/pills/FilterHandle.tsx
index fb128e241..4f6aaf334 100644
--- a/src/lib/querybuilder/pills/FilterHandle.tsx
+++ b/src/lib/querybuilder/pills/FilterHandle.tsx
@@ -1,7 +1,7 @@
import React, { useCallback, useMemo } from 'react';
import { Connection, Handle, HandleProps, Position, useNodeId, useStore } from 'reactflow';
-import { toHandleData, toHandleId } from '../model';
import { Handles, QueryGraphEdgeHandle } from 'ts-common';
+import { toHandleData, toHandleId } from '../model';
const selector = (s: any) => ({
nodeInternals: s.nodeInternals,
diff --git a/src/lib/querybuilder/pills/customFlowLines/connectionDrag.tsx b/src/lib/querybuilder/pills/customFlowLines/connectionDrag.tsx
index f9e33c02c..4e6d561da 100644
--- a/src/lib/querybuilder/pills/customFlowLines/connectionDrag.tsx
+++ b/src/lib/querybuilder/pills/customFlowLines/connectionDrag.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
import { ConnectionLineComponentProps } from 'reactflow';
/**
diff --git a/src/lib/querybuilder/pills/customFlowPills/edge-line.tsx b/src/lib/querybuilder/pills/customFlowPills/edge-line.tsx
index 24dc37962..65dd7afc1 100644
--- a/src/lib/querybuilder/pills/customFlowPills/edge-line.tsx
+++ b/src/lib/querybuilder/pills/customFlowPills/edge-line.tsx
@@ -8,7 +8,6 @@
/* The comment above was added so the code coverage wouldn't count this file towards code coverage.
* We do not test components/renderfunctions/styling files.
* See testing plan for more details.*/
-import React from 'react';
import { EdgeProps, getSmoothStepPath, Position } from 'reactflow';
import { Handles } from 'ts-common';
diff --git a/src/lib/querybuilder/pills/customFlowPills/entitypill/QueryEntityPill.tsx b/src/lib/querybuilder/pills/customFlowPills/entitypill/QueryEntityPill.tsx
index 75b78fda9..565243246 100644
--- a/src/lib/querybuilder/pills/customFlowPills/entitypill/QueryEntityPill.tsx
+++ b/src/lib/querybuilder/pills/customFlowPills/entitypill/QueryEntityPill.tsx
@@ -1,11 +1,11 @@
-import React, { useMemo, useRef } from 'react';
import { EntityPill } from '@/lib/components/pills';
-import { SchemaReactflowEntityNode, toHandleId } from '../../../model';
-import { PillAttributes } from '../../pillattributes/PillAttributes';
+import { useActiveQuery } from '@/lib/data-access';
import { uniqBy } from 'lodash-es';
-import { useUpdateNodeInternals, Handle, Position } from 'reactflow';
+import React, { useMemo, useRef } from 'react';
+import { Handle, Position } from 'reactflow';
import { QueryUnionType } from 'ts-common';
-import { useActiveQuery } from '@/lib/data-access';
+import { SchemaReactflowEntityNode, toHandleId } from '../../../model';
+import { PillAttributes } from '../../pillattributes/PillAttributes';
/**
* Component to render an entity flow element
diff --git a/src/lib/querybuilder/pills/customFlowPills/logicpill/LogicInput.tsx b/src/lib/querybuilder/pills/customFlowPills/logicpill/LogicInput.tsx
index ff2e048f7..4505a485e 100644
--- a/src/lib/querybuilder/pills/customFlowPills/logicpill/LogicInput.tsx
+++ b/src/lib/querybuilder/pills/customFlowPills/logicpill/LogicInput.tsx
@@ -1,6 +1,6 @@
import { Input } from '@/lib/components';
import { DropdownInput } from '@/lib/components/inputs/DropdownInput';
-import React, { useRef, useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
interface LogicInputProps {
value: string;
diff --git a/src/lib/querybuilder/pills/customFlowPills/logicpill/QueryLogicPill.tsx b/src/lib/querybuilder/pills/customFlowPills/logicpill/QueryLogicPill.tsx
index ac61eeb03..f600d9f6c 100644
--- a/src/lib/querybuilder/pills/customFlowPills/logicpill/QueryLogicPill.tsx
+++ b/src/lib/querybuilder/pills/customFlowPills/logicpill/QueryLogicPill.tsx
@@ -1,14 +1,14 @@
+import { LogicPill } from '@/lib/components';
+import { DropdownTrigger } from '@/lib/components/dropdowns';
import { useActiveQuery, useAppDispatch, useGraphQueryResultMeta } from '@/lib/data-access';
+import { setQuerybuilderGraphology, toQuerybuilderGraphology } from '@/lib/data-access/store/sessionSlice';
+import { SchemaReactflowLogicNode, toHandleId } from '@/lib/querybuilder/model';
import { useContext, useEffect, useMemo, useRef, useState } from 'react';
import { Handle, Position } from 'reactflow';
-import { LogicInput } from './LogicInput';
-import { LogicPill } from '@/lib/components';
+import { CategoricalStats, defaultGraph, Handles, InputNode, InputNodeTypeTypes, LogicNodeAttributes } from 'ts-common';
import { QueryBuilderDispatcherContext } from '../../../panel/QueryBuilderDispatcher';
-import { DropdownTrigger } from '@/lib/components/dropdowns';
-import { SchemaReactflowLogicNode, toHandleId } from '@/lib/querybuilder/model';
-import { LogicNodeAttributes, InputNodeTypeTypes, InputNode, Handles, CategoricalStats, defaultGraph } from 'ts-common';
import { styleHandleMap } from '../../utils';
-import { setQuerybuilderGraphology, toQuerybuilderGraphology } from '@/lib/data-access/store/sessionSlice';
+import { LogicInput } from './LogicInput';
export function QueryLogicPill(node: SchemaReactflowLogicNode) {
const dispatch = useAppDispatch();
diff --git a/src/lib/querybuilder/pills/customFlowPills/relationpill/QueryRelationPill.tsx b/src/lib/querybuilder/pills/customFlowPills/relationpill/QueryRelationPill.tsx
index 20a7159f9..8aefa5a30 100644
--- a/src/lib/querybuilder/pills/customFlowPills/relationpill/QueryRelationPill.tsx
+++ b/src/lib/querybuilder/pills/customFlowPills/relationpill/QueryRelationPill.tsx
@@ -1,17 +1,14 @@
-import { memo, useState, useMemo, useEffect } from 'react';
-import { SchemaReactflowRelationNode, toHandleId } from '../../../model';
+import { RelationPill } from '@/lib/components';
+import { pillWidth } from '@/lib/components/pills/pill.const';
import { useActiveQuery, useAppDispatch } from '@/lib/data-access';
import { addWarning } from '@/lib/data-access/store/configSlice';
-import { PillAttributes } from '../../pillattributes/PillAttributes';
-import { Button, DropdownContainer, DropdownTrigger, RelationPill, DropdownItemContainer, DropdownItem, Input } from '@/lib/components';
-import { Icon } from '@/lib/components/icon';
-import { PopoverContext } from '@/lib/components/layout/Popover';
-import { Handle, Position } from 'reactflow';
-import { pillWidth } from '@/lib/components/pills/pill.const';
-import { isEqual } from 'lodash-es';
-import { getDataTypeIcon } from '@/lib/components/DataTypeIcon';
-import { RelationNodeAttributes, NodeAttribute, QueryUnionType, defaultGraph } from 'ts-common';
import { attributeShownToggle, setQuerybuilderGraphology, toQuerybuilderGraphology } from '@/lib/data-access/store/sessionSlice';
+import { isEqual } from 'lodash-es';
+import { memo, useEffect, useMemo, useState } from 'react';
+import { Handle, Position } from 'reactflow';
+import { NodeAttribute, QueryUnionType, defaultGraph } from 'ts-common';
+import { SchemaReactflowRelationNode, toHandleId } from '../../../model';
+import { PillAttributes } from '../../pillattributes/PillAttributes';
export const QueryRelationPill = memo((node: SchemaReactflowRelationNode) => {
const data = node.data;
diff --git a/src/lib/querybuilder/pills/dragging/dragPill.ts b/src/lib/querybuilder/pills/dragging/dragPill.ts
index 3ee0967fc..8337020f4 100644
--- a/src/lib/querybuilder/pills/dragging/dragPill.ts
+++ b/src/lib/querybuilder/pills/dragging/dragPill.ts
@@ -1,9 +1,9 @@
import { MultiGraph } from 'graphology';
+import { XYPosition } from 'ts-common';
import { DragAttibutePillStopped, DragAttributePill, DragAttributePillStarted } from './dragAttribute';
import { DragAttributesAlong } from './dragAttributesAlong';
import { DragEntityPill, DragEntityPillStarted, DragEntityPillStopped } from './dragEntity';
import { DragRelationPill, DragRelationPillStarted, DragRelationPillStopped } from './dragRelation';
-import { XYPosition } from 'ts-common';
export function dragPillStarted(id: string, nodes: MultiGraph) {
switch (nodes.getNodeAttribute(id, 'type')) {
diff --git a/src/lib/querybuilder/pills/pillattributes/PillAttributes.tsx b/src/lib/querybuilder/pills/pillattributes/PillAttributes.tsx
index ec7e6b71e..76fc1c33a 100644
--- a/src/lib/querybuilder/pills/pillattributes/PillAttributes.tsx
+++ b/src/lib/querybuilder/pills/pillattributes/PillAttributes.tsx
@@ -1,10 +1,10 @@
-import { useMemo, useState } from 'react';
-import { SchemaReactflowEntityNode, SchemaReactflowRelationNode } from '../../model';
-import { isEqual } from 'lodash-es';
-import { PillAttributesItem } from './PillAttributesItem';
import { getDataTypeIcon } from '@/lib/components/DataTypeIcon';
-import { NodeAttribute, QueryGraphEdges, QueryUnionType } from 'ts-common';
import { useActiveQuery } from '@/lib/data-access';
+import { isEqual } from 'lodash-es';
+import { useMemo } from 'react';
+import { NodeAttribute, QueryGraphEdges, QueryUnionType } from 'ts-common';
+import { SchemaReactflowEntityNode, SchemaReactflowRelationNode } from '../../model';
+import { PillAttributesItem } from './PillAttributesItem';
type PillAttributesProps = {
node: SchemaReactflowEntityNode | SchemaReactflowRelationNode;
diff --git a/src/lib/querybuilder/pills/pillattributes/PillAttributesItem.tsx b/src/lib/querybuilder/pills/pillattributes/PillAttributesItem.tsx
index 62ef62985..8d08d95da 100644
--- a/src/lib/querybuilder/pills/pillattributes/PillAttributesItem.tsx
+++ b/src/lib/querybuilder/pills/pillattributes/PillAttributesItem.tsx
@@ -1,11 +1,11 @@
-import { useContext } from 'react';
-import { SchemaReactflowEntityNode, SchemaReactflowRelationNode, handleDataFromReactflowToDataId, toHandleId } from '../../model';
-import { Handle, Position } from 'reactflow';
import { PillHandle } from '@/lib/components/pills/PillHandle';
import { pillAttributesPadding } from '@/lib/components/pills/pill.const';
+import { useContext } from 'react';
+import { Handle, Position } from 'reactflow';
+import { NodeAttribute, QueryUnionType } from 'ts-common';
import { Button } from '../../..';
+import { SchemaReactflowEntityNode, SchemaReactflowRelationNode, handleDataFromReactflowToDataId, toHandleId } from '../../model';
import { QueryBuilderDispatcherContext } from '../../panel/QueryBuilderDispatcher';
-import { NodeAttribute, QueryUnionType } from 'ts-common';
type PillAttributesItemProps = {
attribute: NodeAttribute;
diff --git a/src/lib/schema/model/graphology.ts b/src/lib/schema/model/graphology.ts
index 696fd2ba2..9d094ebc2 100644
--- a/src/lib/schema/model/graphology.ts
+++ b/src/lib/schema/model/graphology.ts
@@ -1,5 +1,5 @@
import { MultiGraph } from 'graphology';
-import { Attributes as GAttributes, NodeEntry, EdgeEntry, SerializedGraph } from 'graphology-types';
+import { EdgeEntry, Attributes as GAttributes, NodeEntry, SerializedGraph } from 'graphology-types';
import { SchemaNode } from 'ts-common';
/** Attribute type, consist of a name */
diff --git a/src/lib/schema/panel/LayoutDescription/SchemaLayoutConfig.tsx b/src/lib/schema/panel/LayoutDescription/SchemaLayoutConfig.tsx
index 773616c18..3494bd136 100644
--- a/src/lib/schema/panel/LayoutDescription/SchemaLayoutConfig.tsx
+++ b/src/lib/schema/panel/LayoutDescription/SchemaLayoutConfig.tsx
@@ -1,10 +1,10 @@
+import { Layouts } from '@/lib/graph-layout';
+import { CircleIcon } from '@/lib/schema/panel/LayoutDescription/iconsLayout/CircleIcon';
+import { DagreIcon } from '@/lib/schema/panel/LayoutDescription/iconsLayout/DagreIcon';
import { GridIcon } from '@/lib/schema/panel/LayoutDescription/iconsLayout/GridIcon';
import { ListIntersectIcon } from '@/lib/schema/panel/LayoutDescription/iconsLayout/ListIntersect';
import { ListIntersectNodesEdgesFirstIcon } from '@/lib/schema/panel/LayoutDescription/iconsLayout/ListIntersectNodesFirst';
-import { CircleIcon } from '@/lib/schema/panel/LayoutDescription/iconsLayout/CircleIcon';
-import { DagreIcon } from '@/lib/schema/panel/LayoutDescription/iconsLayout/DagreIcon';
import { ListIntersectRelationshipsFirst } from '@/lib/schema/panel/LayoutDescription/iconsLayout/ListIntersectRelationshipsFirst';
-import { Layouts } from '@/lib/graph-layout';
export type IconSize = 'sm' | 'md' | 'lg';
diff --git a/src/lib/schema/panel/Schema.tsx b/src/lib/schema/panel/Schema.tsx
index 814466fac..d3a2cf2b3 100644
--- a/src/lib/schema/panel/Schema.tsx
+++ b/src/lib/schema/panel/Schema.tsx
@@ -1,11 +1,12 @@
+import { Popover, PopoverContent, PopoverTrigger } from '@/lib/components/popover';
import { SmartBezierEdge, SmartStepEdge, SmartStraightEdge } from '@tisoap/react-flow-smart-edge';
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { useDispatch } from 'react-redux';
import ReactFlow, { Edge, MiniMap, Node, ReactFlowInstance, ReactFlowProvider, useEdgesState, useNodesState } from 'reactflow';
import 'reactflow/dist/style.css';
+import { AllLayoutAlgorithms } from 'ts-common/src/model/layouts';
import { Icon, Panel, TooltipProvider } from '../../components';
import { Button } from '../../components/buttons';
-import { Popover, PopoverContent, PopoverTrigger } from '@/lib/components/popover';
import { Tooltip, TooltipContent, TooltipTrigger } from '../../components/tooltip/Tooltip';
import {
useActiveSaveState,
@@ -18,16 +19,15 @@ import {
import { setSchemaLoading, toSchemaGraphology } from '../../data-access/store/schemaSlice';
import { AlgorithmToLayoutProvider, LayoutFactory } from '../../graph-layout';
import { ConnectionDragLine, ConnectionLine } from '../../querybuilder';
+import { NodeEdge } from '../pills/edges/NodeEdge';
+import { SelfEdge } from '../pills/edges/SelfEdge';
import { SchemaEntityPill } from '../pills/nodes/entity/SchemaEntityPill';
import { SchemaListEntityPill } from '../pills/nodes/entity/SchemaListEntityPill';
import { SchemaListRelationPill } from '../pills/nodes/relation/SchemaListRelationPill';
import { SchemaRelationPill } from '../pills/nodes/relation/SchemaRelationPill';
import { schemaExpandRelation, schemaGraphology2Reactflow } from '../schema-utils';
-import { SchemaSettings } from './SchemaSettings';
-import { NodeEdge } from '../pills/edges/NodeEdge';
-import { SelfEdge } from '../pills/edges/SelfEdge';
import { SchemaLayoutConfig } from './LayoutDescription/SchemaLayoutConfig';
-import { AllLayoutAlgorithms } from 'ts-common/src/model/layouts';
+import { SchemaSettings } from './SchemaSettings';
interface Props {
content?: string;
diff --git a/src/lib/schema/panel/SchemaList.tsx b/src/lib/schema/panel/SchemaList.tsx
index 108b77899..ab881b693 100644
--- a/src/lib/schema/panel/SchemaList.tsx
+++ b/src/lib/schema/panel/SchemaList.tsx
@@ -1,23 +1,24 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { Popover, PopoverContent, PopoverTrigger } from '@/lib/components/popover';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/lib/components/tooltip';
import { SmartBezierEdge, SmartStepEdge, SmartStraightEdge } from '@tisoap/react-flow-smart-edge';
-import ReactFlow, { Edge, Node, ReactFlowInstance, ReactFlowProvider, useEdgesState, useNodesState, MiniMap } from 'reactflow';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { useDispatch } from 'react-redux';
+import ReactFlow, { Edge, MiniMap, Node, ReactFlowInstance, ReactFlowProvider, useEdgesState, useNodesState } from 'reactflow';
import 'reactflow/dist/style.css';
+import { AllLayoutAlgorithms } from 'ts-common/src/model/layouts';
+import { Panel } from '../../components';
import { Button } from '../../components/buttons';
import { useSchemaGraph, useSchemaSettings, useSearchResultSchema } from '../../data-access';
+import { resultSetFocus } from '../../data-access/store/interactionSlice';
import { toSchemaGraphology } from '../../data-access/store/schemaSlice';
+import { AlgorithmToLayoutProvider, LayoutFactory } from '../../graph-layout';
+import { ConnectionDragLine, ConnectionLine } from '../../querybuilder';
import { NodeEdge } from '../pills/edges/NodeEdge';
import { SelfEdge } from '../pills/edges/SelfEdge';
import { SchemaEntityPill } from '../pills/nodes/entity/SchemaEntityPill';
import { SchemaRelationPill } from '../pills/nodes/relation/SchemaRelationPill';
-import { SchemaSettings } from './SchemaSettings';
-import { AlgorithmToLayoutProvider, AllLayoutAlgorithms, LayoutFactory } from '../../graph-layout';
-import { ConnectionLine, ConnectionDragLine } from '../../querybuilder';
import { schemaExpandRelation, schemaGraphology2Reactflow } from '../schema-utils';
-import { Panel } from '../../components';
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/lib/components/tooltip';
-import { resultSetFocus } from '../../data-access/store/interactionSlice';
-import { useDispatch } from 'react-redux';
-import { Popover, PopoverContent, PopoverTrigger } from '@/lib/components/popover';
+import { SchemaSettings } from './SchemaSettings';
interface Props {
content?: string;
diff --git a/src/lib/schema/panel/SchemaSettings.tsx b/src/lib/schema/panel/SchemaSettings.tsx
index 653be1b4e..221ad7657 100644
--- a/src/lib/schema/panel/SchemaSettings.tsx
+++ b/src/lib/schema/panel/SchemaSettings.tsx
@@ -1,5 +1,5 @@
-import { Icon, TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '@/lib/components';
-import { Popover, PopoverTrigger, PopoverContent } from '@/lib/components/layout/Popover';
+import { Icon, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/lib/components';
+import { Popover, PopoverContent, PopoverTrigger } from '@/lib/components/layout/Popover';
import { useState } from 'react';
import { Input } from '../../components/inputs';
import { useAppDispatch, useSchemaSettings, useSessionCache } from '../../data-access';
diff --git a/src/lib/schema/panel/schema.stories.tsx b/src/lib/schema/panel/schema.stories.tsx
index d0ef51cd7..3f9427389 100644
--- a/src/lib/schema/panel/schema.stories.tsx
+++ b/src/lib/schema/panel/schema.stories.tsx
@@ -1,9 +1,9 @@
import { schemaSlice, setSchema } from '@/lib/data-access/store';
import { movieSchemaRaw, northwindSchemaRaw, twitterSchemaRaw } from '@/lib/mock-data';
-import { SchemaUtils } from '../../../lib/schema/schema-utils';
import { configureStore } from '@reduxjs/toolkit';
import { Meta } from '@storybook/react';
import { Provider } from 'react-redux';
+import { SchemaUtils } from '../../../lib/schema/schema-utils';
import { Schema } from './Schema';
const Component: Meta<typeof Schema> = {
diff --git a/src/lib/schema/pills/edges/NodeEdge.tsx b/src/lib/schema/pills/edges/NodeEdge.tsx
index b55170e30..f76488952 100644
--- a/src/lib/schema/pills/edges/NodeEdge.tsx
+++ b/src/lib/schema/pills/edges/NodeEdge.tsx
@@ -8,7 +8,7 @@
/* The comment above was added so the code coverage wouldn't count this file towards code coverage.
* We do not test components/renderfunctions/styling files.
* See testing plan for more details.*/
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
import { EdgeProps } from 'reactflow';
import { getCenter } from '../../schema-utils';
/**
diff --git a/src/lib/schema/pills/edges/SelfEdge.tsx b/src/lib/schema/pills/edges/SelfEdge.tsx
index 1f409cbcc..5961e7924 100644
--- a/src/lib/schema/pills/edges/SelfEdge.tsx
+++ b/src/lib/schema/pills/edges/SelfEdge.tsx
@@ -8,8 +8,8 @@
/* The comment above was added so the code coverage wouldn't count this file towards code coverage.
* We do not test components/renderfunctions/styling files.
* See testing plan for more details.*/
-import React, { useEffect } from 'react';
import { getCenter } from '@/lib/schema/schema-utils';
+import { useEffect } from 'react';
import { EdgeProps } from 'reactflow';
/**
diff --git a/src/lib/schema/pills/nodes/SchemaPopUp/SchemaPopUp.tsx b/src/lib/schema/pills/nodes/SchemaPopUp/SchemaPopUp.tsx
index 008bf1030..968f3c04d 100644
--- a/src/lib/schema/pills/nodes/SchemaPopUp/SchemaPopUp.tsx
+++ b/src/lib/schema/pills/nodes/SchemaPopUp/SchemaPopUp.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
-import { Icon } from '@/lib/components/icon';
-import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@/lib/components/tooltip';
import { getDataTypeIcon } from '@/lib/components/DataTypeIcon';
+import { Icon } from '@/lib/components/icon';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/lib/components/tooltip';
+import React from 'react';
const formatNumber = (number: number) => {
return number.toLocaleString('de-DE');
@@ -51,7 +51,7 @@ export const SchemaPopUp: React.FC<SchemaPopUpProps> = ({ data, numberOfElements
<Icon component={<Icon component={getDataTypeIcon(v)} size={24} />} size={24} />
</span>
</TooltipTrigger>
- <TooltipContent side="right">
+ <TooltipContent>
<div className="max-w-[18rem] break-all line-clamp-6">
{v !== undefined && (typeof v !== 'object' || Array.isArray(v)) && v != '' ? v : 'noData'}
</div>
diff --git a/src/lib/schema/pills/nodes/entity/SchemaEntityPill.tsx b/src/lib/schema/pills/nodes/entity/SchemaEntityPill.tsx
index 94681bbea..0734db976 100644
--- a/src/lib/schema/pills/nodes/entity/SchemaEntityPill.tsx
+++ b/src/lib/schema/pills/nodes/entity/SchemaEntityPill.tsx
@@ -1,12 +1,12 @@
import { EntityPill } from '@/lib/components';
-import { Popover, PopoverContent, PopoverTrigger } from '@/lib/components/popover';
import { NodeDetails } from '@/lib/components/nodeDetails';
+import { Popover, PopoverContent, PopoverTrigger } from '@/lib/components/popover';
import { useActiveSaveState, useSchemaStats } from '@/lib/data-access';
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { Handle, NodeProps, Position, useViewport } from 'reactflow';
+import { QueryElementTypes, SchemaNode } from 'ts-common';
import { SchemaReactflowNodeWithFunctions } from '../../../model/reactflow';
import { SchemaPopUp } from '../SchemaPopUp/SchemaPopUp';
-import { QueryElementTypes, SchemaNode } from 'ts-common';
export const SchemaEntityPill = React.memo(({ id, selected, data }: NodeProps<SchemaReactflowNodeWithFunctions>) => {
const [openPopupLocation, setOpenPopupLocation] = useState<{ x: number; y: number } | null>(null);
diff --git a/src/lib/schema/pills/nodes/entity/SchemaListEntityPill.tsx b/src/lib/schema/pills/nodes/entity/SchemaListEntityPill.tsx
index e2e1edda9..2a077f340 100644
--- a/src/lib/schema/pills/nodes/entity/SchemaListEntityPill.tsx
+++ b/src/lib/schema/pills/nodes/entity/SchemaListEntityPill.tsx
@@ -1,12 +1,12 @@
import { EntityPill } from '@/lib/components';
-import { Popover, PopoverContent, PopoverTrigger } from '@/lib/components/popover';
import { NodeDetails } from '@/lib/components/nodeDetails';
+import { Popover, PopoverContent, PopoverTrigger } from '@/lib/components/popover';
import { useActiveSaveState, useSchemaStats } from '@/lib/data-access';
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { Handle, NodeProps, Position, useViewport } from 'reactflow';
+import { QueryElementTypes, SchemaNode } from 'ts-common';
import { SchemaReactflowNodeWithFunctions } from '../../../model/reactflow';
import { SchemaPopUp } from '../SchemaPopUp/SchemaPopUp';
-import { QueryElementTypes, SchemaNode } from 'ts-common';
export const SchemaListEntityPill = React.memo(({ id, selected, data }: NodeProps<SchemaReactflowNodeWithFunctions>) => {
const [openPopupLocation, setOpenPopupLocation] = useState<{ x: number; y: number } | null>(null);
diff --git a/src/lib/schema/pills/nodes/popup/attribute-analytics-popup-menu.stories.tsx b/src/lib/schema/pills/nodes/popup/attribute-analytics-popup-menu.stories.tsx
index aa7578c41..253a4bbfc 100644
--- a/src/lib/schema/pills/nodes/popup/attribute-analytics-popup-menu.stories.tsx
+++ b/src/lib/schema/pills/nodes/popup/attribute-analytics-popup-menu.stories.tsx
@@ -1,10 +1,10 @@
-import { Meta, StoryObj } from '@storybook/react';
import { configureStore } from '@reduxjs/toolkit';
+import { Meta, StoryObj } from '@storybook/react';
import { Provider } from 'react-redux';
import { ReactFlowProvider } from 'reactflow';
-import { AttributeAnalyticsPopupMenu } from './attribute-analytics-popup-menu';
import { AttributeCategory, NodeType } from '../../../model/reactflow';
+import { AttributeAnalyticsPopupMenu } from './attribute-analytics-popup-menu';
const Component: Meta<typeof AttributeAnalyticsPopupMenu> = {
/* 👇 The title prop is optional.
diff --git a/src/lib/schema/pills/nodes/popup/attribute-analytics-popup-menu.tsx b/src/lib/schema/pills/nodes/popup/attribute-analytics-popup-menu.tsx
index 3ade99455..843bb3bb7 100644
--- a/src/lib/schema/pills/nodes/popup/attribute-analytics-popup-menu.tsx
+++ b/src/lib/schema/pills/nodes/popup/attribute-analytics-popup-menu.tsx
@@ -8,9 +8,8 @@
/* The comment above was added so the code coverage wouldn't count this file towards code coverage.
* We do not test components/renderfunctions/styling files.
* See testing plan for more details.*/
-import React from 'react';
-import { AttributeAnalyticsData } from '../../../model/reactflow';
import { NodeProps } from 'reactflow';
+import { AttributeAnalyticsData } from '../../../model/reactflow';
import './attribute-analytics-popup-menu.module.scss';
/**
diff --git a/src/lib/schema/pills/nodes/popup/node-quality-relation-popup.stories.tsx b/src/lib/schema/pills/nodes/popup/node-quality-relation-popup.stories.tsx
index 95739f5e3..30328810d 100644
--- a/src/lib/schema/pills/nodes/popup/node-quality-relation-popup.stories.tsx
+++ b/src/lib/schema/pills/nodes/popup/node-quality-relation-popup.stories.tsx
@@ -1,6 +1,5 @@
-import React from 'react';
-import { Meta } from '@storybook/react';
import { configureStore } from '@reduxjs/toolkit';
+import { Meta } from '@storybook/react';
import { Provider } from 'react-redux';
import { ReactFlowProvider } from 'reactflow';
diff --git a/src/lib/schema/pills/nodes/popup/popupmenus/attribute-analytics-popup-menu.stories.tsx b/src/lib/schema/pills/nodes/popup/popupmenus/attribute-analytics-popup-menu.stories.tsx
index 7c776eed0..b0aaf197f 100644
--- a/src/lib/schema/pills/nodes/popup/popupmenus/attribute-analytics-popup-menu.stories.tsx
+++ b/src/lib/schema/pills/nodes/popup/popupmenus/attribute-analytics-popup-menu.stories.tsx
@@ -1,11 +1,10 @@
-import React from 'react';
-import { Meta, StoryObj } from '@storybook/react';
import { configureStore } from '@reduxjs/toolkit';
+import { Meta, StoryObj } from '@storybook/react';
import { Provider } from 'react-redux';
import { ReactFlowProvider } from 'reactflow';
-import { AttributeAnalyticsPopupMenu } from './attribute-analytics-popup-menu';
import { AttributeCategory, NodeType } from '../../../../model/reactflow';
+import { AttributeAnalyticsPopupMenu } from './attribute-analytics-popup-menu';
const Component: Meta<typeof AttributeAnalyticsPopupMenu> = {
/* 👇 The title prop is optional.
diff --git a/src/lib/schema/pills/nodes/popup/popupmenus/attribute-analytics-popup-menu.tsx b/src/lib/schema/pills/nodes/popup/popupmenus/attribute-analytics-popup-menu.tsx
index 7f891fcb3..bf6f14b31 100644
--- a/src/lib/schema/pills/nodes/popup/popupmenus/attribute-analytics-popup-menu.tsx
+++ b/src/lib/schema/pills/nodes/popup/popupmenus/attribute-analytics-popup-menu.tsx
@@ -9,9 +9,8 @@
* We do not test components/renderfunctions/styling files.
* See testing plan for more details.*/
-import React from 'react';
-import { AttributeAnalyticsData } from '../../../../model/reactflow';
import { NodeProps } from 'reactflow';
+import { AttributeAnalyticsData } from '../../../../model/reactflow';
/**
* AttributeAnalyticsPopupMenuNode is the node that represents the popup menu that shows the attribute analytics for an entity or relation
diff --git a/src/lib/schema/pills/nodes/popup/popupmenus/filterbar.stories.tsx b/src/lib/schema/pills/nodes/popup/popupmenus/filterbar.stories.tsx
index bc37fce97..b8ee44c89 100644
--- a/src/lib/schema/pills/nodes/popup/popupmenus/filterbar.stories.tsx
+++ b/src/lib/schema/pills/nodes/popup/popupmenus/filterbar.stories.tsx
@@ -1,6 +1,5 @@
-import React from 'react';
-import { Meta } from '@storybook/react';
import { configureStore } from '@reduxjs/toolkit';
+import { Meta } from '@storybook/react';
import { Provider } from 'react-redux';
import { Filter } from './filterbar';
diff --git a/src/lib/schema/pills/nodes/popup/popupmenus/filterbar.tsx b/src/lib/schema/pills/nodes/popup/popupmenus/filterbar.tsx
index 14dabe1f8..ecc7e01bf 100644
--- a/src/lib/schema/pills/nodes/popup/popupmenus/filterbar.tsx
+++ b/src/lib/schema/pills/nodes/popup/popupmenus/filterbar.tsx
@@ -9,7 +9,7 @@
* We do not test components/renderfunctions/styling files.
* See testing plan for more details.*/
-import React, { useState } from 'react';
+import { useState } from 'react';
import { AttributeAnalyticsData, AttributeCategory } from '../../../../model/reactflow';
/** The typing for the props of the filter bar. */
diff --git a/src/lib/schema/pills/nodes/popup/popupmenus/node-quality-entity-popup.stories.tsx b/src/lib/schema/pills/nodes/popup/popupmenus/node-quality-entity-popup.stories.tsx
index 0f499192a..28968a488 100644
--- a/src/lib/schema/pills/nodes/popup/popupmenus/node-quality-entity-popup.stories.tsx
+++ b/src/lib/schema/pills/nodes/popup/popupmenus/node-quality-entity-popup.stories.tsx
@@ -1,6 +1,5 @@
-import React from 'react';
-import { Meta } from '@storybook/react';
import { configureStore } from '@reduxjs/toolkit';
+import { Meta } from '@storybook/react';
import { Provider } from 'react-redux';
import { ReactFlowProvider } from 'reactflow';
import { NodeQualityEntityPopupNode } from './node-quality-entity-popup';
diff --git a/src/lib/schema/pills/nodes/popup/popupmenus/node-quality-entity-popup.tsx b/src/lib/schema/pills/nodes/popup/popupmenus/node-quality-entity-popup.tsx
index 6a98b386f..8d3d9b164 100644
--- a/src/lib/schema/pills/nodes/popup/popupmenus/node-quality-entity-popup.tsx
+++ b/src/lib/schema/pills/nodes/popup/popupmenus/node-quality-entity-popup.tsx
@@ -9,7 +9,6 @@
* We do not test components/renderfunctions/styling files.
* See testing plan for more details.*/
-import React from 'react';
import { NodeProps } from 'reactflow';
import { NodeQualityDataForEntities } from '../../../../model/reactflow';
diff --git a/src/lib/schema/pills/nodes/popup/popupmenus/node-quality-relation-popup.stories.tsx b/src/lib/schema/pills/nodes/popup/popupmenus/node-quality-relation-popup.stories.tsx
index 5e993c9ca..cfe73e9b9 100644
--- a/src/lib/schema/pills/nodes/popup/popupmenus/node-quality-relation-popup.stories.tsx
+++ b/src/lib/schema/pills/nodes/popup/popupmenus/node-quality-relation-popup.stories.tsx
@@ -1,6 +1,5 @@
-import React from 'react';
-import { Meta } from '@storybook/react';
import { configureStore } from '@reduxjs/toolkit';
+import { Meta } from '@storybook/react';
import { Provider } from 'react-redux';
import { ReactFlowProvider } from 'reactflow';
import { NodeQualityRelationPopupNode } from './node-quality-relation-popup';
diff --git a/src/lib/schema/pills/nodes/popup/popupmenus/node-quality-relation-popup.tsx b/src/lib/schema/pills/nodes/popup/popupmenus/node-quality-relation-popup.tsx
index 545f071a0..11fcfaeb6 100644
--- a/src/lib/schema/pills/nodes/popup/popupmenus/node-quality-relation-popup.tsx
+++ b/src/lib/schema/pills/nodes/popup/popupmenus/node-quality-relation-popup.tsx
@@ -9,7 +9,6 @@
* We do not test components/renderfunctions/styling files.
* See testing plan for more details.*/
-import React from 'react';
import { NodeProps } from 'reactflow';
import { NodeQualityDataForRelations } from '../../../../model/reactflow';
diff --git a/src/lib/schema/pills/nodes/popup/popupmenus/searchbar.stories.tsx b/src/lib/schema/pills/nodes/popup/popupmenus/searchbar.stories.tsx
index b4977b137..c993c4b0d 100644
--- a/src/lib/schema/pills/nodes/popup/popupmenus/searchbar.stories.tsx
+++ b/src/lib/schema/pills/nodes/popup/popupmenus/searchbar.stories.tsx
@@ -1,6 +1,5 @@
-import React from 'react';
-import { Meta } from '@storybook/react';
import { configureStore } from '@reduxjs/toolkit';
+import { Meta } from '@storybook/react';
import { Provider } from 'react-redux';
import { Search } from './searchbar';
diff --git a/src/lib/schema/pills/nodes/relation/SchemaListRelationPill.tsx b/src/lib/schema/pills/nodes/relation/SchemaListRelationPill.tsx
index c0d8aaf5c..04c7926d3 100644
--- a/src/lib/schema/pills/nodes/relation/SchemaListRelationPill.tsx
+++ b/src/lib/schema/pills/nodes/relation/SchemaListRelationPill.tsx
@@ -3,11 +3,11 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
import { Handle, NodeProps, Position, useViewport } from 'reactflow';
import { SchemaReactflowRelationWithFunctions } from '../../../model/reactflow';
-import { Popover, PopoverContent, PopoverTrigger } from '@/lib/components/popover';
import { NodeDetails } from '@/lib/components/nodeDetails';
+import { Popover, PopoverContent, PopoverTrigger } from '@/lib/components/popover';
import { useActiveSaveState, useSchemaStats } from '@/lib/data-access';
+import { QueryElementTypes, SchemaEdge } from 'ts-common';
import { SchemaPopUp } from '../SchemaPopUp/SchemaPopUp';
-import { SchemaEdge, QueryElementTypes } from 'ts-common';
export const SchemaListRelationPill = React.memo(({ id, selected, data, ...props }: NodeProps<SchemaReactflowRelationWithFunctions>) => {
const [openPopupLocation, setOpenPopupLocation] = useState<{ x: number; y: number } | null>(null);
diff --git a/src/lib/schema/pills/nodes/relation/SchemaRelationPill.tsx b/src/lib/schema/pills/nodes/relation/SchemaRelationPill.tsx
index 74a092707..3749cb640 100644
--- a/src/lib/schema/pills/nodes/relation/SchemaRelationPill.tsx
+++ b/src/lib/schema/pills/nodes/relation/SchemaRelationPill.tsx
@@ -1,12 +1,12 @@
-import React, { useState, useRef, useEffect, useMemo } from 'react';
-import { Handle, Position, NodeProps, useViewport } from 'reactflow';
-import { SchemaReactflowRelationWithFunctions } from '../../../model/reactflow';
-import { SchemaEdge, QueryElementTypes } from 'ts-common';
import { RelationPill } from '@/lib/components';
-import { Popover, PopoverContent, PopoverTrigger } from '@/lib/components/popover';
import { NodeDetails } from '@/lib/components/nodeDetails';
-import { SchemaPopUp } from '../SchemaPopUp/SchemaPopUp';
+import { Popover, PopoverContent, PopoverTrigger } from '@/lib/components/popover';
import { useActiveSaveState, useSchemaStats } from '@/lib/data-access';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { Handle, NodeProps, Position, useViewport } from 'reactflow';
+import { QueryElementTypes, SchemaEdge } from 'ts-common';
+import { SchemaReactflowRelationWithFunctions } from '../../../model/reactflow';
+import { SchemaPopUp } from '../SchemaPopUp/SchemaPopUp';
export const SchemaRelationPill = React.memo(({ id, selected, data, ...props }: NodeProps<SchemaReactflowRelationWithFunctions>) => {
const [openPopupLocation, setOpenPopupLocation] = useState<{ x: number; y: number } | null>(null);
diff --git a/src/lib/schema/schema-utils/flowUtils.test.tsx b/src/lib/schema/schema-utils/flowUtils.test.tsx
index d6c66c1ae..3e5a9b191 100644
--- a/src/lib/schema/schema-utils/flowUtils.test.tsx
+++ b/src/lib/schema/schema-utils/flowUtils.test.tsx
@@ -1,16 +1,16 @@
-import { describe, it, expect, beforeEach } from 'vitest';
+import { describe, expect, it } from 'vitest';
import { Position } from 'reactflow';
import {
- doBoxesOverlap,
- makeBoundingBox,
- getCenter,
- capitalizeFirstLetter,
calcWidthEntityNodeBox,
calcWidthRelationNodeBox,
calculateAttributeQuality,
calculateEntityQuality,
calculateRelationQuality,
+ capitalizeFirstLetter,
+ doBoxesOverlap,
+ getCenter,
+ makeBoundingBox,
numberPredicates,
} from './flowUtils';
diff --git a/src/lib/schema/schema-utils/index.ts b/src/lib/schema/schema-utils/index.ts
index 5bb45e678..481fc4e13 100644
--- a/src/lib/schema/schema-utils/index.ts
+++ b/src/lib/schema/schema-utils/index.ts
@@ -1,3 +1,3 @@
-export * from './schemaUtils';
-export * from './schemaUsecases';
export * from './flowUtils';
+export * from './schemaUsecases';
+export * from './schemaUtils';
diff --git a/src/lib/schema/schema-utils/schemaUsecases.spec.ts b/src/lib/schema/schema-utils/schemaUsecases.spec.ts
index 2e4957141..c1d8544c9 100644
--- a/src/lib/schema/schema-utils/schemaUsecases.spec.ts
+++ b/src/lib/schema/schema-utils/schemaUsecases.spec.ts
@@ -1,8 +1,8 @@
+import { SchemaReturnFormat } from 'ts-common';
import { describe, expect, it, test } from 'vitest';
import { movieSchemaRaw, northwindSchemaRaw, simpleSchemaRaw, twitterSchemaRaw } from '../../mock-data/schema';
import { SchemaGraphology } from '../model';
import { SchemaUtils } from './schemaUtils';
-import { SchemaReturnFormat } from 'ts-common';
describe('SchemaUsecases', () => {
test.each([{ data: simpleSchemaRaw }, { data: movieSchemaRaw }, { data: northwindSchemaRaw }, { data: twitterSchemaRaw }])(
diff --git a/src/lib/schema/schema-utils/schemaUsecases.ts b/src/lib/schema/schema-utils/schemaUsecases.ts
index 486cab28d..c5df274be 100644
--- a/src/lib/schema/schema-utils/schemaUsecases.ts
+++ b/src/lib/schema/schema-utils/schemaUsecases.ts
@@ -1,9 +1,9 @@
-import { SchemaReactflowNodeWithFunctions, SchemaReactflowRelationWithFunctions } from '../model/reactflow';
import Graph from 'graphology';
import { Attributes } from 'graphology-types';
-import { MarkerType, Edge, Node } from 'reactflow';
-import { SchemaGraphology } from '../model';
+import { Edge, MarkerType, Node } from 'reactflow';
import { QueryElementTypes } from 'ts-common';
+import { SchemaGraphology } from '../model';
+import { SchemaReactflowNodeWithFunctions, SchemaReactflowRelationWithFunctions } from '../model/reactflow';
//TODO does not belong here; maybe should go into the GraphPolarisThemeProvider
diff --git a/src/lib/schema/schema-utils/schemaUtils.spec.ts b/src/lib/schema/schema-utils/schemaUtils.spec.ts
index 44bd644b9..8725ebaf8 100644
--- a/src/lib/schema/schema-utils/schemaUtils.spec.ts
+++ b/src/lib/schema/schema-utils/schemaUtils.spec.ts
@@ -1,5 +1,5 @@
+import { describe, expect, it } from 'vitest';
import { SchemaUtils } from './schemaUtils';
-import { assert, describe, expect, it } from 'vitest';
describe('Schema Utils', () => {
it('should expose a class SchemaUtils', () => {
diff --git a/src/lib/sidebar/index.tsx b/src/lib/sidebar/index.tsx
index 341e16e64..ccc0df1b0 100644
--- a/src/lib/sidebar/index.tsx
+++ b/src/lib/sidebar/index.tsx
@@ -1,8 +1,7 @@
-import React from 'react';
-import { Button, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../components';
-import ColorMode from '../components/color-mode';
import { FeatureEnabled } from '@/lib/components/featureFlags';
import { useActiveSaveState } from '..';
+import { Button, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../components';
+import ColorMode from '../components/color-mode';
export type SideNavTab = 'Schema' | 'Search' | undefined;
diff --git a/src/lib/sidebar/search/NestedItem.tsx b/src/lib/sidebar/search/NestedItem.tsx
index 14eec0c33..9cc376a6e 100644
--- a/src/lib/sidebar/search/NestedItem.tsx
+++ b/src/lib/sidebar/search/NestedItem.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
type NestedItemProps = {
keyName: string;
value: Record<string, any>;
diff --git a/src/lib/sidebar/search/SearchBar.tsx b/src/lib/sidebar/search/SearchBar.tsx
index 191d3347e..f85cd4b3b 100644
--- a/src/lib/sidebar/search/SearchBar.tsx
+++ b/src/lib/sidebar/search/SearchBar.tsx
@@ -1,4 +1,6 @@
-import React, { useRef, useState, useEffect } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { defaultGraph } from 'ts-common';
+import { Button, Panel, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../components';
import {
AppDispatch,
useActiveQuery,
@@ -15,10 +17,8 @@ import {
addSearchResultQueryBuilder,
addSearchResultSchema,
} from '../../data-access/store/searchResultSlice';
-import { filterData } from './similarity';
-import { Button, Panel, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../components';
import { NestedItem } from './NestedItem';
-import { QueryMultiGraph, defaultGraph } from 'ts-common';
+import { filterData } from './similarity';
const SIMILARITY_THRESHOLD = 0.7;
diff --git a/src/lib/vis/common/types.ts b/src/lib/vis/common/types.ts
index 26c13879e..6877aff7b 100644
--- a/src/lib/vis/common/types.ts
+++ b/src/lib/vis/common/types.ts
@@ -1,8 +1,7 @@
-import { FC } from 'react';
-import { GraphQueryResult } from '../../data-access/store/graphQueryResultSlice';
+import React from 'react';
+import { EdgeQueryResult, GraphStatistics, ML, NodeQueryResult, XYPosition } from 'ts-common';
+import type { AppDispatch, GraphQueryResult } from '../../data-access';
import { SchemaGraph } from '../../schema';
-import type { AppDispatch } from '../../data-access';
-import { ML, GraphStatistics, NodeQueryResult, EdgeQueryResult, XYPosition } from 'ts-common';
export type VisualizationSettingsType = {
uuid?: string; // unique identifier for the visualization
@@ -13,7 +12,7 @@ export type VisualizationSettingsType = {
export type VISComponentType<T = object> = {
component: React.FC<VisualizationPropTypes<T>>;
- settingsComponent: FC<VisualizationSettingsPropTypes<T>>;
+ settingsComponent: React.FC<VisualizationSettingsPropTypes<T>>;
settings: T;
exportImage: () => void;
};
diff --git a/src/lib/vis/components/VisualizationPanel.tsx b/src/lib/vis/components/VisualizationPanel.tsx
index a8781866e..d5b0700df 100644
--- a/src/lib/vis/components/VisualizationPanel.tsx
+++ b/src/lib/vis/components/VisualizationPanel.tsx
@@ -1,25 +1,15 @@
-import React, { Suspense, useEffect, useState } from 'react';
-import {
- useActiveQuery,
- useActiveSaveState,
- useAppDispatch,
- useGraphQuery,
- useGraphQueryResult,
- useGraphQueryResultMeta,
- useML,
- useSchemaGraph,
- useVisualization,
-} from '@/lib/data-access';
-import VisualizationTabBar from './VisualizationTabBar';
-import { Recommender, NoData, Querying } from '../views';
-import { resultSetFocus, resultSetSelection, unSelect } from '../../data-access/store/interactionSlice';
-import { updateVisualization, addVisualization } from '../../data-access/store/visualizationSlice';
-import { VisualizationPropTypes, VISComponentType } from '../common';
+import { PopoverProvider } from '@/lib';
+import { useActiveSaveState, useAppDispatch, useGraphQuery, useML, useSchemaGraph, useVisualization } from '@/lib/data-access';
+import React, { useEffect, useState } from 'react';
+import { EdgeQueryResult, NodeQueryResult } from 'ts-common';
import { ErrorBoundary } from '../../components/errorBoundary';
-import { addError } from '../../data-access/store/configSlice';
import { canViewFeature } from '../../components/featureFlags';
-import { NodeQueryResult, EdgeQueryResult } from 'ts-common';
-import { PopoverProvider } from '@/lib';
+import { addError } from '../../data-access/store/configSlice';
+import { resultSetFocus, resultSetSelection, unSelect } from '../../data-access/store/interactionSlice';
+import { addVisualization, updateVisualization } from '../../data-access/store/visualizationSlice';
+import { VISComponentType, VisualizationPropTypes } from '../common';
+import { NoData, Querying, Recommender } from '../views';
+import VisualizationTabBar from './VisualizationTabBar';
type PromiseFunc = () => Promise<{ default: VISComponentType<any> }>;
export const Visualizations: Record<string, PromiseFunc> = {
diff --git a/src/lib/vis/components/VisualizationTabBar.tsx b/src/lib/vis/components/VisualizationTabBar.tsx
index d916fab93..8beb831b4 100644
--- a/src/lib/vis/components/VisualizationTabBar.tsx
+++ b/src/lib/vis/components/VisualizationTabBar.tsx
@@ -1,8 +1,10 @@
-import { useState, useEffect, useRef } from 'react';
+import { Tab, Tabs } from '@/lib/components';
+import { resultSetFocus } from '@/lib/data-access/store/interactionSlice';
+import { useEffect, useRef, useState } from 'react';
+import Sortable from 'sortablejs';
import { Button, DropdownContainer, DropdownItem, DropdownItemContainer, DropdownTrigger, Input } from '../../components';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../components/tooltip';
import { ControlContainer } from '../../components/controls';
-import { Tabs, Tab } from '@/lib/components';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../components/tooltip';
import { useActiveSaveState, useAppDispatch, useVisualization } from '../../data-access';
import {
addVisualization,
@@ -11,11 +13,9 @@ import {
setActiveVisualization,
updateActiveVisualizationAttributes,
} from '../../data-access/store/visualizationSlice';
+import { VisualizationSettingsType } from '../common';
import { VisualizationsConfig } from './config';
import { Visualizations } from './VisualizationPanel';
-import Sortable from 'sortablejs';
-import { VisualizationSettingsType } from '../common';
-import { resultSetFocus } from '@/lib/data-access/store/interactionSlice';
export default function VisualizationTabBar(props: { fullSize: () => void; exportImage: () => void; handleSelect: () => void }) {
const { activeVisualizationIndex, openVisualizationArray } = useVisualization();
diff --git a/src/lib/vis/components/config/SelectionConfig.tsx b/src/lib/vis/components/config/SelectionConfig.tsx
index cf1c464e2..72360bad9 100644
--- a/src/lib/vis/components/config/SelectionConfig.tsx
+++ b/src/lib/vis/components/config/SelectionConfig.tsx
@@ -1,8 +1,7 @@
+import { unSelect } from '@/lib/data-access/store/interactionSlice';
import React from 'react';
-import { SelectionStateI, unSelect } from '@/lib/data-access/store/interactionSlice';
import { useDispatch } from 'react-redux';
import { Button, EntityPill, useSelection } from '../../..';
-import { SettingsHeader } from './components';
export const SelectionConfig = () => {
const selection = useSelection();
diff --git a/src/lib/vis/components/config/VisualizationConfig.tsx b/src/lib/vis/components/config/VisualizationConfig.tsx
index d4d9051b6..dd31b05ec 100644
--- a/src/lib/vis/components/config/VisualizationConfig.tsx
+++ b/src/lib/vis/components/config/VisualizationConfig.tsx
@@ -1,12 +1,12 @@
-import { JsonIconSm, JsonIconMd, JsonIconLg } from '../../icons/JsonIcon';
-import { MatrixIconSm, MatrixIconMd, MatrixIconLg } from '../../icons/MatrixIcon';
-import { MapIconSm, MapIconMd, MapIconLg } from '../../icons/MapIcon';
-import { NodeLinkIconSm, NodeLinkIconMd, NodeLinkIconLg } from '../../icons/NodeLinkIcon';
-import { PaohIconSm, PaohIconMd, PaohIconLg } from '../../icons/PaohIcon';
-import { SemSubsIconSm, SemSubsIconMd, SemSubsIconLg } from '../../icons/SemSubsIcon';
-import { TableIconSm, TableIconMd, TableIconLg } from '../../icons/TableIcon';
-import { Vis0DIconSm, Vis0DIconMd, Vis0DIconLg } from '../../icons/Vis0DIcon';
-import { Vis1DIconSm, Vis1DIconMd, Vis1DIconLg } from '../../icons/Vis1DIcon';
+import { JsonIconLg, JsonIconMd, JsonIconSm } from '../../icons/JsonIcon';
+import { MapIconLg, MapIconMd, MapIconSm } from '../../icons/MapIcon';
+import { MatrixIconLg, MatrixIconMd, MatrixIconSm } from '../../icons/MatrixIcon';
+import { NodeLinkIconLg, NodeLinkIconMd, NodeLinkIconSm } from '../../icons/NodeLinkIcon';
+import { PaohIconLg, PaohIconMd, PaohIconSm } from '../../icons/PaohIcon';
+import { SemSubsIconLg, SemSubsIconMd, SemSubsIconSm } from '../../icons/SemSubsIcon';
+import { TableIconLg, TableIconMd, TableIconSm } from '../../icons/TableIcon';
+import { Vis0DIconLg, Vis0DIconMd, Vis0DIconSm } from '../../icons/Vis0DIcon';
+import { Vis1DIconLg, Vis1DIconMd, Vis1DIconSm } from '../../icons/Vis1DIcon';
export type IconSize = 'sm' | 'md' | 'lg';
diff --git a/src/lib/vis/components/config/VisualizationSettings.tsx b/src/lib/vis/components/config/VisualizationSettings.tsx
index ee602bfe5..c039f8066 100644
--- a/src/lib/vis/components/config/VisualizationSettings.tsx
+++ b/src/lib/vis/components/config/VisualizationSettings.tsx
@@ -1,8 +1,8 @@
-import React, { Suspense, useEffect, useMemo, useState } from 'react';
-import { Input, Visualizations, useAppDispatch, useGraphQueryResultMeta, useVisualization } from '../../..';
-import { SettingsHeader } from './components';
import { updateActiveVisualizationAttributes } from '@/lib/data-access/store/visualizationSlice';
+import React, { Suspense, useEffect, useMemo, useState } from 'react';
+import { Visualizations, useAppDispatch, useGraphQueryResultMeta, useVisualization } from '../../..';
import { VisualizationSettingsPropTypes, VisualizationSettingsType } from '../../common';
+import { SettingsHeader } from './components';
export function VisualizationSettings(props: { className?: string }) {
// const manager = VisualizationManager();
diff --git a/src/lib/vis/components/config/components.tsx b/src/lib/vis/components/config/components.tsx
index 6f704987c..b48eb97e1 100644
--- a/src/lib/vis/components/config/components.tsx
+++ b/src/lib/vis/components/config/components.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
type SettingsContainerProps = {
children: ReactNode;
diff --git a/src/lib/vis/components/config/index.tsx b/src/lib/vis/components/config/index.tsx
index 6d8c900cc..7c962a752 100644
--- a/src/lib/vis/components/config/index.tsx
+++ b/src/lib/vis/components/config/index.tsx
@@ -1,3 +1,3 @@
-export { VisualizationSettings as VisualizationConfigPanel } from './VisualizationSettings';
-export { VisualizationsConfig } from './VisualizationConfig';
export { SettingsContainer, SettingsHeader } from './components';
+export { VisualizationsConfig } from './VisualizationConfig';
+export { VisualizationSettings as VisualizationConfigPanel } from './VisualizationSettings';
diff --git a/src/lib/vis/views/NoData.tsx b/src/lib/vis/views/NoData.tsx
index 8d30fdcb7..d0c0d79f8 100644
--- a/src/lib/vis/views/NoData.tsx
+++ b/src/lib/vis/views/NoData.tsx
@@ -1,5 +1,5 @@
-import { Button } from '../../components';
import { useActiveQuery, useGraphQuery, useSessionCache } from '@/lib/data-access';
+import { Button } from '../../components';
export function NoData() {
const activeQuery = useActiveQuery();
diff --git a/src/lib/vis/views/Querying.tsx b/src/lib/vis/views/Querying.tsx
index d466a33ae..98b479f8e 100644
--- a/src/lib/vis/views/Querying.tsx
+++ b/src/lib/vis/views/Querying.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
import { LoadingSpinner } from '../../components';
export function Querying() {
diff --git a/src/lib/vis/views/Recommender.tsx b/src/lib/vis/views/Recommender.tsx
index f1c6f5045..0c85db13d 100644
--- a/src/lib/vis/views/Recommender.tsx
+++ b/src/lib/vis/views/Recommender.tsx
@@ -1,10 +1,10 @@
-import { useState, useRef } from 'react';
+import { resultSetFocus } from '@/lib/data-access/store/interactionSlice';
+import { useRef, useState } from 'react';
import Info from '../../components/info';
-import { addVisualization } from '../../data-access/store/visualizationSlice';
import { useActiveSaveState, useAppDispatch } from '../../data-access';
+import { addVisualization } from '../../data-access/store/visualizationSlice';
import { Visualizations } from '../components/VisualizationPanel';
import { VisualizationsConfig } from '../components/config/VisualizationConfig';
-import { resultSetFocus } from '@/lib/data-access/store/interactionSlice';
export function Recommender() {
const dispatch = useAppDispatch();
diff --git a/src/lib/vis/views/index.tsx b/src/lib/vis/views/index.tsx
index d16d4d610..20a8ab576 100644
--- a/src/lib/vis/views/index.tsx
+++ b/src/lib/vis/views/index.tsx
@@ -1,3 +1,3 @@
export { NoData } from './NoData';
-export { Recommender } from './Recommender';
export { Querying } from './Querying';
+export { Recommender } from './Recommender';
diff --git a/src/lib/vis/visualizations/arcplotvis/arcplotvis.spec.tsx b/src/lib/vis/visualizations/arcplotvis/arcplotvis.spec.tsx
index 338394ddb..aa7054d2c 100644
--- a/src/lib/vis/visualizations/arcplotvis/arcplotvis.spec.tsx
+++ b/src/lib/vis/visualizations/arcplotvis/arcplotvis.spec.tsx
@@ -1,5 +1,4 @@
-import { render } from '@testing-library/react';
-import { assert, describe, expect, it } from 'vitest';
+import { describe, expect, it } from 'vitest';
//import RawJSONVis from './rawjsonvis';
diff --git a/src/lib/vis/visualizations/arcplotvis/arcplotvis.tsx b/src/lib/vis/visualizations/arcplotvis/arcplotvis.tsx
index faf5b7fa7..fb50837fa 100644
--- a/src/lib/vis/visualizations/arcplotvis/arcplotvis.tsx
+++ b/src/lib/vis/visualizations/arcplotvis/arcplotvis.tsx
@@ -1,9 +1,8 @@
import { Input } from '@/lib/components/inputs';
-import { Edge, Node } from '@/lib/data-access';
-import { GraphStatistics } from '@/lib/statistics';
import { SettingsContainer } from '@/lib/vis/components/config';
import { scaleOrdinal, schemeCategory10, select, selectAll } from 'd3';
import React, { useEffect, useMemo, useRef } from 'react';
+import { NodeQueryResult } from 'ts-common';
import { VISComponentType, VisualizationPropTypes, VisualizationSettingsPropTypes } from '../../common';
import { ArcEdge, ArcNode } from './arcplotvis.types';
import ArcVisLine from './components/arcplotd3line';
@@ -57,7 +56,7 @@ export const ArcPlotVis = React.memo(({ data, settings, graphMetadata }: Visuali
};
}, []);
- const getNodeOrdering = (node: Node, index: number) => {
+ const getNodeOrdering = (node: NodeQueryResult, index: number) => {
if (!settings.ordering) throw new Error('No ordering selected in settings: ' + settings.toString());
const OFFSET = 15;
@@ -75,7 +74,7 @@ export const ArcPlotVis = React.memo(({ data, settings, graphMetadata }: Visuali
}
};
- function getNodeLabel(node: Node): string {
+ function getNodeLabel(node: NodeQueryResult): string {
if (!settings.labelattribute) throw new Error('No label attribute selected in settings: ' + settings.toString());
switch (settings.labelattribute.toLowerCase()) {
@@ -91,7 +90,7 @@ export const ArcPlotVis = React.memo(({ data, settings, graphMetadata }: Visuali
}
}
- function getNodeSize(node: Node): number {
+ function getNodeSize(node: NodeQueryResult): number {
if (!settings.sizeAttributeSelector) throw new Error('No label attribute selected in settings: ' + settings.toString());
return Math.random() * 10;
@@ -110,10 +109,10 @@ export const ArcPlotVis = React.memo(({ data, settings, graphMetadata }: Visuali
}
const [dataNodes, dataLinks] = useMemo(() => {
- const color = scaleOrdinal(schemeCategory10).domain(data.nodes.map(node => node.label));
- const colorScale = scaleOrdinal(schemeCategory10).domain(data.edges.map(edge => edge.attributes.Type as string));
+ const color = scaleOrdinal(schemeCategory10).domain(data.graph.nodes.map(node => node.label));
+ const colorScale = scaleOrdinal(schemeCategory10).domain(data.graph.edges.map(edge => edge.attributes.Type as string));
- const dataNodes = data.nodes.map((node, index) => {
+ const dataNodes = data.graph.nodes.map((node, index) => {
const x = getNodeOrdering(node, index);
return {
...node,
@@ -125,7 +124,7 @@ export const ArcPlotVis = React.memo(({ data, settings, graphMetadata }: Visuali
} as ArcNode;
}) as ArcNode[];
- const dataLinks = data.edges.map((edge: Edge) => {
+ const dataLinks = data.graph.edges.map(edge => {
const fromNode = dataNodes.find((node: ArcNode) => node._id === edge.from);
const toNode = dataNodes.find((node: ArcNode) => node._id === edge.to);
// const fromNode = dataNodes.find((node: ArcNode) => node._id === edge.from);
@@ -246,7 +245,7 @@ export const ArcPlotVis = React.memo(({ data, settings, graphMetadata }: Visuali
);
});
-const ArcPlotVisSettings = ({ settings, graphMetadata, updateSettings }: VisualizationSettingsPropTypes<ArcVisProps>) => {
+const ArcPlotVisSettings = ({ settings, updateSettings }: VisualizationSettingsPropTypes<ArcVisProps>) => {
return (
<SettingsContainer>
<Input
@@ -254,7 +253,7 @@ const ArcPlotVisSettings = ({ settings, graphMetadata, updateSettings }: Visuali
label="Select an Ordering"
value={settings.ordering}
options={['Group', 'Frequency', 'Name']}
- onChange={val => updateSettings({ ordering: val.toString() })}
+ onChange={val => updateSettings({ ordering: val?.toString() })}
/>
<Input
type="dropdown"
diff --git a/src/lib/vis/visualizations/arcplotvis/arcplotvis.types.ts b/src/lib/vis/visualizations/arcplotvis/arcplotvis.types.ts
index eada2a7ae..4ad1c0875 100644
--- a/src/lib/vis/visualizations/arcplotvis/arcplotvis.types.ts
+++ b/src/lib/vis/visualizations/arcplotvis/arcplotvis.types.ts
@@ -1,13 +1,13 @@
-import { Edge, Node } from '@/lib/data-access';
+import { EdgeQueryResult, NodeQueryResult } from 'ts-common';
-export type ArcEdge = Edge & {
+export type ArcEdge = EdgeQueryResult & {
x1: number;
x2: number;
thickness: number;
fill: string;
};
-export type ArcNode = Node & {
+export type ArcNode = NodeQueryResult & {
x: number;
y: number;
size: number;
diff --git a/src/lib/vis/visualizations/arcplotvis/components/arcplotd3links.tsx b/src/lib/vis/visualizations/arcplotvis/components/arcplotd3links.tsx
index 3804064fd..29983ca37 100644
--- a/src/lib/vis/visualizations/arcplotvis/components/arcplotd3links.tsx
+++ b/src/lib/vis/visualizations/arcplotvis/components/arcplotd3links.tsx
@@ -1,7 +1,6 @@
import { ArcEdge, ArcNode } from '../arcplotvis.types';
import { arc, select, selectAll } from 'd3';
-import { config } from 'process';
import React from 'react';
import { configStyle } from '../arcplotvis';
diff --git a/src/lib/vis/visualizations/index.tsx b/src/lib/vis/visualizations/index.tsx
index ca8bf58d6..e4aea884e 100644
--- a/src/lib/vis/visualizations/index.tsx
+++ b/src/lib/vis/visualizations/index.tsx
@@ -1,8 +1,8 @@
-export * from './rawjsonvis';
+export * from './matrixvis/matrixvis';
export * from './nodelinkvis/nodelinkvis';
export * from './paohvis/paohvis';
-export * from './tablevis/tablevis';
-export * from './matrixvis/matrixvis';
+export * from './rawjsonvis';
export * from './semanticsubstratesvis/semanticsubstratesvis';
-export * from './vis1D/Vis1D';
+export * from './tablevis/tablevis';
export * from './vis0D/Vis0D';
+export * from './vis1D/Vis1D';
diff --git a/src/lib/vis/visualizations/mapvis/components/ActionBar.tsx b/src/lib/vis/visualizations/mapvis/components/ActionBar.tsx
index 99720ef04..e166e7967 100644
--- a/src/lib/vis/visualizations/mapvis/components/ActionBar.tsx
+++ b/src/lib/vis/visualizations/mapvis/components/ActionBar.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
import { Icon } from '@/lib/components';
import { BoundingBoxType } from '../mapvis.types';
import { SearchBar } from './SearchBar';
diff --git a/src/lib/vis/visualizations/mapvis/components/Attribution.tsx b/src/lib/vis/visualizations/mapvis/components/Attribution.tsx
index 3ed032f0d..d6c77c2d8 100644
--- a/src/lib/vis/visualizations/mapvis/components/Attribution.tsx
+++ b/src/lib/vis/visualizations/mapvis/components/Attribution.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
export function Attribution() {
return (
<div className="absolute right-0 bottom-0 p-1 bg-secondary-200 bg-opacity-75 text-xs">
diff --git a/src/lib/vis/visualizations/mapvis/components/MapDataInspector.tsx b/src/lib/vis/visualizations/mapvis/components/MapDataInspector.tsx
index 234665cfc..2f93ad314 100644
--- a/src/lib/vis/visualizations/mapvis/components/MapDataInspector.tsx
+++ b/src/lib/vis/visualizations/mapvis/components/MapDataInspector.tsx
@@ -1,8 +1,6 @@
-import React from 'react';
-import { NodeType } from '../../nodelinkvis/types';
-import { GeoJsonType } from '../mapvis.types';
-import { SearchResultType } from '../mapvis.types';
import { PopoverProvider } from '@/lib/components';
+import { NodeType } from '../../nodelinkvis/types';
+import { GeoJsonType, SearchResultType } from '../mapvis.types';
export type NodelinkPopupProps = {
type: 'node' | 'area' | 'location';
@@ -93,7 +91,7 @@ export const MapDataInspector = (props: NodelinkPopupProps) => {
const { type, data } = props;
return (
- <PopoverProvider delay={100}>
+ <PopoverProvider>
<div className="text-[0.9rem] min-w-[10rem]">
<div className="p-0">
<div className="px-2.5 text-[0.8rem]">
diff --git a/src/lib/vis/visualizations/mapvis/components/MapSettings.tsx b/src/lib/vis/visualizations/mapvis/components/MapSettings.tsx
index 35576773a..8e98ffb98 100644
--- a/src/lib/vis/visualizations/mapvis/components/MapSettings.tsx
+++ b/src/lib/vis/visualizations/mapvis/components/MapSettings.tsx
@@ -1,8 +1,8 @@
-import React, { useEffect, useMemo } from 'react';
-import { SettingsContainer } from '../../../components/config';
-import { layerSettings, LayerTypes, layerTypes } from '../layers';
+import { useEffect, useMemo } from 'react';
import { Input } from '../../../..';
import { VisualizationSettingsPropTypes } from '../../../common';
+import { SettingsContainer } from '../../../components/config';
+import { layerSettings, LayerTypes, layerTypes } from '../layers';
import { MapProps } from '../mapvis';
import { LayerSettingsType } from '../mapvis.types';
diff --git a/src/lib/vis/visualizations/mapvis/components/SearchBar.tsx b/src/lib/vis/visualizations/mapvis/components/SearchBar.tsx
index c5dd5766f..2c4cd4479 100644
--- a/src/lib/vis/visualizations/mapvis/components/SearchBar.tsx
+++ b/src/lib/vis/visualizations/mapvis/components/SearchBar.tsx
@@ -1,7 +1,7 @@
-import React, { useState } from 'react';
import { Button, Input } from '@/lib/components';
import { useAppDispatch } from '@/lib/data-access';
import { addError } from '@/lib/data-access/store/configSlice';
+import React, { useState } from 'react';
import { BoundingBoxType } from '../mapvis.types';
interface SearchBarProps {
@@ -37,7 +37,7 @@ export const SearchBar: React.FC<SearchBarProps> = ({ onSearch }) => {
return (
<div className="absolute bottom-0 left-1/2 transform -translate-x-1/2 z-50 m-1 p-2 bg-light shadow-md rounded w-full max-w-xl">
<div className="flex gap-2 items-center">
- <Input type="text" size="xs" value={query} onChange={value => setQuery(value)} />
+ <Input label="" type="text" size="xs" value={query} onChange={value => setQuery(value)} />
<Button label="Search" size="xs" onClick={handleSearch} disabled={isLoading} />
</div>
</div>
diff --git a/src/lib/vis/visualizations/mapvis/components/index.ts b/src/lib/vis/visualizations/mapvis/components/index.ts
index ca9aded7f..8e11a3a3c 100644
--- a/src/lib/vis/visualizations/mapvis/components/index.ts
+++ b/src/lib/vis/visualizations/mapvis/components/index.ts
@@ -1,4 +1,4 @@
export * from './ActionBar';
export * from './Attribution';
-export * from './MapSettings';
export * from './MapDataInspector.tsx';
+export * from './MapSettings';
diff --git a/src/lib/vis/visualizations/mapvis/hooks/useCoordinateLookup.tsx b/src/lib/vis/visualizations/mapvis/hooks/useCoordinateLookup.tsx
index be8565732..ef5cfa79e 100644
--- a/src/lib/vis/visualizations/mapvis/hooks/useCoordinateLookup.tsx
+++ b/src/lib/vis/visualizations/mapvis/hooks/useCoordinateLookup.tsx
@@ -1,8 +1,8 @@
import { useMemo } from 'react';
-import { LocationInfo, Coordinate } from '../mapvis.types';
-import { Node } from '@/lib/data-access';
+import { NodeQueryResult } from 'ts-common';
+import { Coordinate, LocationInfo } from '../mapvis.types';
-export const useCoordinateLookup = (nodes: Node[], locationSettings: Record<string, LocationInfo>) => {
+export const useCoordinateLookup = (nodes: NodeQueryResult[], locationSettings: Record<string, LocationInfo>) => {
return useMemo(() => {
return nodes.reduce(
(acc, node) => {
diff --git a/src/lib/vis/visualizations/mapvis/hooks/useSelectionLayer.tsx b/src/lib/vis/visualizations/mapvis/hooks/useSelectionLayer.tsx
index a9c2bd37b..9114c876c 100644
--- a/src/lib/vis/visualizations/mapvis/hooks/useSelectionLayer.tsx
+++ b/src/lib/vis/visualizations/mapvis/hooks/useSelectionLayer.tsx
@@ -1,5 +1,5 @@
-import { useMemo } from 'react';
import { SelectionLayer } from '@deck.gl-community/editable-layers';
+import { useMemo } from 'react';
export const useSelectionLayer = (selectingRectangle: boolean, layerIds: string[], onSelect: (pickingInfos: any[]) => void) => {
return useMemo(() => {
diff --git a/src/lib/vis/visualizations/mapvis/layers/choropleth-layer/ChoroplethLayer.tsx b/src/lib/vis/visualizations/mapvis/layers/choropleth-layer/ChoroplethLayer.tsx
index 303f46b78..32786373d 100644
--- a/src/lib/vis/visualizations/mapvis/layers/choropleth-layer/ChoroplethLayer.tsx
+++ b/src/lib/vis/visualizations/mapvis/layers/choropleth-layer/ChoroplethLayer.tsx
@@ -1,10 +1,9 @@
-import React from 'react';
-import { CompositeLayer, Layer } from 'deck.gl';
import { ArcLayer, GeoJsonLayer } from '@deck.gl/layers';
-import { netherlands } from '../../../../../mock-data/geo-json';
-import { Node, LayerProps, CompositeLayerType, Coordinate } from '../../mapvis.types';
-import { geoCentroid, geoContains } from 'd3';
import * as d3 from 'd3';
+import { geoCentroid, geoContains } from 'd3';
+import { CompositeLayer, Layer } from 'deck.gl';
+import { netherlands } from '../../../../../mock-data/geo-json';
+import { CompositeLayerType, Coordinate, LayerProps, Node } from '../../mapvis.types';
const colorScales: Record<string, any> = {
green: d3.interpolateGreens,
@@ -22,7 +21,7 @@ export class ChoroplethLayer extends CompositeLayer<CompositeLayerType> {
super(props);
}
- updateState({ props, oldProps, changeFlags }: { props: any; oldProps: any; context: any; changeFlags: any }) {
+ updateState({ props, changeFlags }: { props: any; oldProps: any; context: any; changeFlags: any }) {
if (changeFlags.dataChanged) {
const geojsonData = this.concatData(netherlands, props.data.nodes);
this.setState({ geojsonData });
@@ -86,19 +85,19 @@ export class ChoroplethLayer extends CompositeLayer<CompositeLayerType> {
break;
case 'Edge count':
- updateMinMax(data.edges.filter(edge => nodes.includes(edge.from) && nodes.includes(edge.to)).length);
+ updateMinMax(data.graph.edges.filter(edge => nodes.includes(edge.from) && nodes.includes(edge.to)).length);
break;
case 'Incoming edges':
- updateMinMax(data.edges.filter(edge => nodes.includes(edge.to)).length);
+ updateMinMax(data.graph.edges.filter(edge => nodes.includes(edge.to)).length);
break;
case 'Outgoing edges':
- updateMinMax(data.edges.filter(edge => nodes.includes(edge.from)).length);
+ updateMinMax(data.graph.edges.filter(edge => nodes.includes(edge.from)).length);
break;
case 'Connected edges':
- updateMinMax(data.edges.filter(edge => nodes.includes(edge.from) || nodes.includes(edge.to)).length);
+ updateMinMax(data.graph.edges.filter(edge => nodes.includes(edge.from) || nodes.includes(edge.to)).length);
break;
case 'Attribute':
@@ -131,16 +130,16 @@ export class ChoroplethLayer extends CompositeLayer<CompositeLayerType> {
return this.getColorFromScale(nodes.length);
case 'Edge count':
- return this.getColorFromScale(data.edges.filter(edge => nodes.includes(edge.from) && nodes.includes(edge.to)).length);
+ return this.getColorFromScale(data.graph.edges.filter(edge => nodes.includes(edge.from) && nodes.includes(edge.to)).length);
case 'Incoming edges':
- return this.getColorFromScale(data.edges.filter(edge => nodes.includes(edge.to)).length);
+ return this.getColorFromScale(data.graph.edges.filter(edge => nodes.includes(edge.to)).length);
case 'Outgoing edges':
- return this.getColorFromScale(data.edges.filter(edge => nodes.includes(edge.from)).length);
+ return this.getColorFromScale(data.graph.edges.filter(edge => nodes.includes(edge.from)).length);
case 'Connected edges':
- return this.getColorFromScale(data.edges.filter(edge => nodes.includes(edge.from) || nodes.includes(edge.to)).length);
+ return this.getColorFromScale(data.graph.edges.filter(edge => nodes.includes(edge.from) || nodes.includes(edge.to)).length);
case 'Attribute':
return [0, 0, 0];
@@ -180,7 +179,7 @@ export class ChoroplethLayer extends CompositeLayer<CompositeLayerType> {
if (hoverObject && layerSettings.enableBrushing) {
const nodes = (hoverObject as { properties?: { nodes: string[] } }).properties?.nodes ?? [];
if (nodes) {
- const filteredEdges = data.edges.filter(edge => nodes.includes(edge.from) || nodes.includes(edge.to));
+ const filteredEdges = data.graph.edges.filter(edge => nodes.includes(edge.from) || nodes.includes(edge.to));
// @ts-expect-error d3 types are not up to date
const centroid = geoCentroid(hoverObject);
diff --git a/src/lib/vis/visualizations/mapvis/layers/choropleth-layer/ChoroplethOptions.tsx b/src/lib/vis/visualizations/mapvis/layers/choropleth-layer/ChoroplethOptions.tsx
index 1bdf127ee..313c3518e 100644
--- a/src/lib/vis/visualizations/mapvis/layers/choropleth-layer/ChoroplethOptions.tsx
+++ b/src/lib/vis/visualizations/mapvis/layers/choropleth-layer/ChoroplethOptions.tsx
@@ -1,9 +1,8 @@
-import React, { useEffect } from 'react';
-import { ColorPicker } from '@/lib/components/colorComponents/colorPicker';
-import { MapProps } from '../../mapvis';
import { DropdownColorLegend, EntityPill, Input, RelationPill } from '@/lib/components';
-import { LayerSettingsComponentType } from '../../mapvis.types';
import { Accordion, AccordionBody, AccordionHead, AccordionItem } from '@/lib/components/accordion';
+import { useEffect } from 'react';
+import { MapProps } from '../../mapvis';
+import { LayerSettingsComponentType } from '../../mapvis.types';
const areaColoringStrategies = ['Node count', 'Edge count', 'Incoming edges', 'Outgoing edges', 'Connected edges', 'Attribute'];
diff --git a/src/lib/vis/visualizations/mapvis/layers/heatmap-layer/HeatLayer.tsx b/src/lib/vis/visualizations/mapvis/layers/heatmap-layer/HeatLayer.tsx
index db7e7a7d9..8e48ba007 100644
--- a/src/lib/vis/visualizations/mapvis/layers/heatmap-layer/HeatLayer.tsx
+++ b/src/lib/vis/visualizations/mapvis/layers/heatmap-layer/HeatLayer.tsx
@@ -1,7 +1,5 @@
-import React from 'react';
import { CompositeLayer, HeatmapLayer, Layer } from 'deck.gl';
import { CompositeLayerType, LayerProps } from '../../mapvis.types';
-import { Node } from '@/lib/data-access';
export class HeatLayer extends CompositeLayer<CompositeLayerType> {
static type = 'heatmap';
@@ -27,7 +25,7 @@ export class HeatLayer extends CompositeLayer<CompositeLayerType> {
this._layers[layerId] = new HeatmapLayer<Node>({
id: layerId,
- data: data.nodes.filter((node: Node) => node.label === label),
+ data: data.graph.nodes.filter(node => node.label === label),
visible: !layerSettings.nodes[label].hidden,
getPosition: (d: any) => getNodeLocation(d._id),
getWeight: (d: any) => layerSettings.nodes[label].size,
diff --git a/src/lib/vis/visualizations/mapvis/layers/heatmap-layer/HeatLayerOptions.tsx b/src/lib/vis/visualizations/mapvis/layers/heatmap-layer/HeatLayerOptions.tsx
index 04986eb83..4683af96e 100644
--- a/src/lib/vis/visualizations/mapvis/layers/heatmap-layer/HeatLayerOptions.tsx
+++ b/src/lib/vis/visualizations/mapvis/layers/heatmap-layer/HeatLayerOptions.tsx
@@ -1,8 +1,8 @@
-import React, { useEffect } from 'react';
-import { MapProps } from '../../mapvis';
import { EntityPill, Input } from '@/lib/components';
-import { LayerSettingsComponentType } from '../../mapvis.types';
import { Accordion, AccordionBody, AccordionHead, AccordionItem } from '@/lib/components/accordion';
+import { useEffect } from 'react';
+import { MapProps } from '../../mapvis';
+import { LayerSettingsComponentType } from '../../mapvis.types';
export function HeatLayerOptions({
settings,
diff --git a/src/lib/vis/visualizations/mapvis/layers/index.tsx b/src/lib/vis/visualizations/mapvis/layers/index.tsx
index 92360935c..27952f5e0 100644
--- a/src/lib/vis/visualizations/mapvis/layers/index.tsx
+++ b/src/lib/vis/visualizations/mapvis/layers/index.tsx
@@ -1,13 +1,13 @@
+import { BitmapLayer, TileLayer } from 'deck.gl';
+import { MAP_PROVIDER } from '../config';
+import { MapProps } from '../mapvis';
+import { LayerSettingsComponentType } from '../mapvis.types';
import { ChoroplethLayer } from './choropleth-layer/ChoroplethLayer';
+import { ChoroplethOptions } from './choropleth-layer/ChoroplethOptions';
import { HeatLayer } from './heatmap-layer/HeatLayer';
+import { HeatLayerOptions } from './heatmap-layer/HeatLayerOptions';
import { NodeLinkLayer } from './nodelink-layer/NodeLinkLayer';
import { NodeLinkOptions } from './nodelink-layer/NodeLinkOptions';
-import { HeatLayerOptions } from './heatmap-layer/HeatLayerOptions';
-import { ChoroplethOptions } from './choropleth-layer/ChoroplethOptions';
-import { TileLayer, BitmapLayer } from 'deck.gl';
-import { MapProps } from '../mapvis';
-import { LayerSettingsComponentType } from '../mapvis.types';
-import { MAP_PROVIDER } from '../config';
export type LayerTypes = 'nodelink' | 'heatmap' | 'choropleth';
diff --git a/src/lib/vis/visualizations/mapvis/layers/nodelink-layer/NodeLinkLayer.tsx b/src/lib/vis/visualizations/mapvis/layers/nodelink-layer/NodeLinkLayer.tsx
index c400cb4e2..c26e1738a 100644
--- a/src/lib/vis/visualizations/mapvis/layers/nodelink-layer/NodeLinkLayer.tsx
+++ b/src/lib/vis/visualizations/mapvis/layers/nodelink-layer/NodeLinkLayer.tsx
@@ -1,11 +1,10 @@
-import { CompositeLayer, Layer, Viewport } from 'deck.gl';
-import { LineLayer, ScatterplotLayer, TextLayer, SolidPolygonLayer } from '@deck.gl/layers';
-import { CompositeLayerType, Coordinate, LayerProps, EDGE_COLOR_DEFAULT } from '../../mapvis.types';
import { BrushingExtension, CollisionFilterExtension } from '@deck.gl/extensions';
-import { scaleLinear, ScaleLinear, color, interpolateRgb } from 'd3';
-import { nodeColorRGB } from '../../utils';
+import { LineLayer, ScatterplotLayer, SolidPolygonLayer, TextLayer } from '@deck.gl/layers';
+import { color, interpolateRgb, scaleLinear, ScaleLinear } from 'd3';
+import { CompositeLayer, Layer, Viewport } from 'deck.gl';
import { CategoricalStats, EdgeQueryResult, NodeQueryResult } from 'ts-common';
-import { MapEdgeData } from '../../mapvis.types';
+import { CompositeLayerType, Coordinate, EDGE_COLOR_DEFAULT, LayerProps, MapEdgeData } from '../../mapvis.types';
+import { nodeColorRGB } from '../../utils';
import { getCategories } from './NodeLinkOptions';
interface ColorScales {
@@ -129,7 +128,7 @@ export class NodeLinkLayer extends CompositeLayer<CompositeLayerType> {
const brushingExtension = new BrushingExtension();
const collisionFilter = new CollisionFilterExtension();
- const nodeLocations = data.nodes.reduce((acc: Record<string, Coordinate>, node: NodeQueryResult) => {
+ const nodeLocations = data.graph.nodes.reduce((acc: Record<string, Coordinate>, node: NodeQueryResult) => {
const pos = getNodeLocation(node._id);
if (pos && (pos[0] !== 0 || pos[1] !== 0)) {
acc[node._id] = pos;
@@ -137,7 +136,7 @@ export class NodeLinkLayer extends CompositeLayer<CompositeLayerType> {
return acc;
}, {});
- const hiddenNodes = new Set(data.nodes.filter(node => layerSettings.nodes[node.label]?.hidden).map(node => node._id));
+ const hiddenNodes = new Set(data.graph.nodes.filter(node => layerSettings.nodes[node.label]?.hidden).map(node => node._id));
const showArrows = layerSettings?.showArrows;
graphMetadata.edges.labels.forEach((label: string) => {
@@ -167,7 +166,7 @@ export class NodeLinkLayer extends CompositeLayer<CompositeLayerType> {
ay /= amag;
}
- const nodeTo = data.nodes.find(n => n._id == edge.to)!;
+ const nodeTo = data.graph.nodes.find(n => n._id == edge.to)!;
const nodeRadius = wtz * getNodeSize(nodeTo, label);
if (wtx - wsx != 0) wtx -= (nodeRadius / amag) * (wtx - wsx);
@@ -210,7 +209,7 @@ export class NodeLinkLayer extends CompositeLayer<CompositeLayerType> {
};
}
};
- const edgeData = data.edges.flatMap(parseEdge).filter(edge => {
+ const edgeData = data.graph.edges.flatMap(parseEdge).filter(edge => {
return edge != null && edge.from && edge.to && !edge.hidden;
});
@@ -275,7 +274,7 @@ export class NodeLinkLayer extends CompositeLayer<CompositeLayerType> {
getWidth: 1,
getSourcePosition: d => d.from,
getTargetPosition: d => d.to,
- getColor: d => [0, 0, 0],
+ getColor: () => [0, 0, 0],
});
}
@@ -283,7 +282,7 @@ export class NodeLinkLayer extends CompositeLayer<CompositeLayerType> {
const layerId = `${label}-nodes-scatterplot`;
const textLayerId = `${label}-label-target`;
- const nodes = data.nodes.filter(node => nodeLocations[node._id] && node.label === label);
+ const nodes = data.graph.nodes.filter(node => nodeLocations[node._id] && node.label === label);
this._layers[layerId] = new ScatterplotLayer({
id: layerId,
@@ -321,7 +320,7 @@ export class NodeLinkLayer extends CompositeLayer<CompositeLayerType> {
stroked: true,
updateTriggers: {
getIcon: [selected],
- getRadius: [layerSettings?.nodes[label]?.size, data.edges],
+ getRadius: [layerSettings?.nodes[label]?.size, data.graph.edges],
getFillColor: [this.state.colorScales],
},
});
@@ -352,7 +351,7 @@ export class NodeLinkLayer extends CompositeLayer<CompositeLayerType> {
function getNodeSize(d: NodeQueryResult, label: string) {
const baseSize = layerSettings?.nodes[label]?.size ?? 40;
- const relationCount = data.edges.reduce((acc, edge) => {
+ const relationCount = data.graph.edges.reduce((acc, edge) => {
if (edge.from === d._id || edge.to === d._id) {
return acc + ((edge.attributes?.Count as number) ?? (edge.attributes?.count as number) ?? 1);
}
@@ -422,7 +421,7 @@ export class NodeLinkLayer extends CompositeLayer<CompositeLayerType> {
const layerSettings = settings?.[NodeLinkLayer.type];
const edgeSettings = layerSettings?.edges?.[label] || {};
- const edges = data.edges.filter(
+ const edges = data.graph.edges.filter(
(edge: EdgeQueryResult) =>
nodeLocations[edge.from] && nodeLocations[edge.to] && edge.to != edge.from && edge.label === label && !edgeSettings.hidden,
);
@@ -432,7 +431,7 @@ export class NodeLinkLayer extends CompositeLayer<CompositeLayerType> {
data: edges,
getPosition: (d: EdgeQueryResult) => getEdgeLocation(d, this.context.viewport),
getText: (d: EdgeQueryResult) => String(getEdgeLabel(d, edgeSettings)) || '',
- getSize: (d: EdgeQueryResult) => 12,
+ getSize: () => 12,
getAlignmentBaseline: 'center',
getColor: EDGE_COLOR_DEFAULT,
outlineColor: [255, 255, 255, 128],
diff --git a/src/lib/vis/visualizations/mapvis/layers/nodelink-layer/NodeLinkOptions.tsx b/src/lib/vis/visualizations/mapvis/layers/nodelink-layer/NodeLinkOptions.tsx
index 425bcee6f..ab24bde61 100644
--- a/src/lib/vis/visualizations/mapvis/layers/nodelink-layer/NodeLinkOptions.tsx
+++ b/src/lib/vis/visualizations/mapvis/layers/nodelink-layer/NodeLinkOptions.tsx
@@ -1,12 +1,12 @@
-import React, { useEffect } from 'react';
-import { ColorPicker } from '@/lib/components/colorComponents/colorPicker';
import { DropdownColorLegend, EntityPill, Input, RelationPill } from '@/lib/components';
-import { MapProps } from '../../mapvis';
-import { LayerSettingsComponentType, EDGE_COLOR_DEFAULT } from '../../mapvis.types';
-import { nodeColorRGB } from '../../utils';
import { Accordion, AccordionBody, AccordionHead, AccordionItem } from '@/lib/components/accordion';
+import { ColorPicker } from '@/lib/components/colorComponents/colorPicker';
import { isEqual } from 'lodash-es';
+import { useEffect } from 'react';
import { GraphStatistics } from 'ts-common';
+import { MapProps } from '../../mapvis';
+import { EDGE_COLOR_DEFAULT, LayerSettingsComponentType } from '../../mapvis.types';
+import { nodeColorRGB } from '../../utils';
const defaultNodeSettings = (index: number) => ({
color: index,
diff --git a/src/lib/vis/visualizations/mapvis/mapvis.stories.tsx b/src/lib/vis/visualizations/mapvis/mapvis.stories.tsx
index f8bf22a81..851a0913a 100644
--- a/src/lib/vis/visualizations/mapvis/mapvis.stories.tsx
+++ b/src/lib/vis/visualizations/mapvis/mapvis.stories.tsx
@@ -2,8 +2,8 @@ import { configureStore } from '@reduxjs/toolkit';
import { Meta } from '@storybook/react';
import { Provider } from 'react-redux';
import { graphQueryResultSlice, schemaSlice, visualizationSlice } from '../../../data-access/store';
-import MapComponent from './mapvis';
import { mockData } from '../../../mock-data/query-result/mockData';
+import MapComponent from './mapvis';
const Mockstore = configureStore({
reducer: {
diff --git a/src/lib/vis/visualizations/mapvis/mapvis.tsx b/src/lib/vis/visualizations/mapvis/mapvis.tsx
index ee0cefed3..c9f0eafe4 100644
--- a/src/lib/vis/visualizations/mapvis/mapvis.tsx
+++ b/src/lib/vis/visualizations/mapvis/mapvis.tsx
@@ -1,20 +1,20 @@
-import React, { useEffect, useCallback, useState, useRef, forwardRef, RefObject, useImperativeHandle } from 'react';
-import DeckGL from '@deck.gl/react';
+import { getEnvVariable } from '@/config';
+import { NodeDetails } from '@/lib/components/nodeDetails';
+import { Popover, PopoverContent, PopoverTrigger } from '@/lib/components/popover';
import { CompositeLayer, FlyToInterpolator, MapViewState, WebMercatorViewport } from '@deck.gl/core';
-import { CompositeLayerType, Coordinate, LayerSettingsType, LocationInfo, SearchResultType } from './mapvis.types';
-import { VISComponentType, VisualizationPropTypes } from '../../common';
-import { layerTypes, createBaseMap, LayerTypes } from './layers';
+import DeckGL from '@deck.gl/react';
import { geoCentroid } from 'd3';
-import { Attribution, ActionBar, MapDataInspector, MapSettings } from './components';
-import { useSelectionLayer, useCoordinateLookup } from './hooks';
-import { NodeDetails } from '@/lib/components/nodeDetails';
-import { Popover, PopoverContent, PopoverProvider, PopoverTrigger } from '@/lib/components/popover';
-import { isGeoJsonType, nodeColorHex, rgbToHex } from './utils';
-import { NodeType } from '../nodelinkvis/types';
-import { ChoroplethLayer } from './layers/choropleth-layer/ChoroplethLayer';
+import React, { forwardRef, RefObject, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
import { Map } from 'react-map-gl';
-import { getEnvVariable } from '@/config';
import { NodeQueryResult } from 'ts-common';
+import { VISComponentType, VisualizationPropTypes } from '../../common';
+import { NodeType } from '../nodelinkvis/types';
+import { ActionBar, Attribution, MapDataInspector, MapSettings } from './components';
+import { useCoordinateLookup, useSelectionLayer } from './hooks';
+import { createBaseMap, layerTypes, LayerTypes } from './layers';
+import { ChoroplethLayer } from './layers/choropleth-layer/ChoroplethLayer';
+import { CompositeLayerType, Coordinate, LayerSettingsType, LocationInfo, SearchResultType } from './mapvis.types';
+import { isGeoJsonType, nodeColorHex, rgbToHex } from './utils';
export type MapProps = {
layer: LayerTypes;
@@ -46,7 +46,7 @@ export const MapVis = forwardRef((props: VisualizationPropTypes<MapProps>, refEx
const [isSearching, setIsSearching] = useState<boolean>(false);
const [searchResult, setSearchResult] = useState<SearchResultType | undefined>(undefined);
- const coordinateLookup = useCoordinateLookup(props.data.nodes, props.settings.location);
+ const coordinateLookup = useCoordinateLookup(props.data.graph.nodes, props.settings.location);
const [shouldExport, setShouldExport] = useState<boolean>(false);
const captureImage = () => {
@@ -254,7 +254,7 @@ export const MapVis = forwardRef((props: VisualizationPropTypes<MapProps>, refEx
// If the feature contains node IDs, handle selecting the corresponding nodes
const ids = object.properties.nodes;
if (ids && ids.length > 0) {
- const nodes = props.data.nodes.filter(node => ids.includes(node._id));
+ const nodes = props.data.graph.nodes.filter(node => ids.includes(node._id));
props.handleSelect({ nodes: [...nodes] });
}
}
diff --git a/src/lib/vis/visualizations/mapvis/mapvis.types.ts b/src/lib/vis/visualizations/mapvis/mapvis.types.ts
index 60f20aefc..5707be522 100644
--- a/src/lib/vis/visualizations/mapvis/mapvis.types.ts
+++ b/src/lib/vis/visualizations/mapvis/mapvis.types.ts
@@ -1,7 +1,7 @@
import { CompositeLayer } from 'deck.gl';
+import { GraphStatistics, NodeQueryResult } from 'ts-common';
import { VisualizationPropTypes, VisualizationSettingsType } from '../../common';
import { MapProps } from './mapvis';
-import { GraphStatistics, NodeQueryResult } from 'ts-common';
export type Coordinate = [number, number];
diff --git a/src/lib/vis/visualizations/mapvis/utils.ts b/src/lib/vis/visualizations/mapvis/utils.ts
index b5fe310f0..6d8c1fdb2 100644
--- a/src/lib/vis/visualizations/mapvis/utils.ts
+++ b/src/lib/vis/visualizations/mapvis/utils.ts
@@ -1,7 +1,6 @@
import { visualizationColors } from '@/config';
import { NodeType } from '../nodelinkvis/types';
-import { GeoJsonType } from './mapvis.types';
-import { SearchResultType } from './mapvis.types';
+import { GeoJsonType, SearchResultType } from './mapvis.types';
export function nodeColorRGB(num?: number): [number, number, number] {
const colorVal = nodeColorHex(num);
diff --git a/src/lib/vis/visualizations/matrixvis/components/BitmapTextLabel.ts b/src/lib/vis/visualizations/matrixvis/components/BitmapTextLabel.ts
index c82ba9e7d..033858106 100644
--- a/src/lib/vis/visualizations/matrixvis/components/BitmapTextLabel.ts
+++ b/src/lib/vis/visualizations/matrixvis/components/BitmapTextLabel.ts
@@ -7,12 +7,12 @@ export class BitmapTextLabel extends BitmapText {
constructor(label: string) {
super(label, {
- fontName: BitmapTextLabel.LABEL_FONT_FAMILY,
+ fontFamily: BitmapTextLabel.LABEL_FONT_FAMILY,
fontSize: BitmapTextLabel.LABEL_FONT_SIZE,
align: 'right',
- tint: BitmapTextLabel.LABEL_COLOR,
});
+ this.tint = BitmapTextLabel.LABEL_COLOR;
this.rotation = (Math.PI * 3) / 2;
this.eventMode = 'none';
this.name = 'Text_' + label;
diff --git a/src/lib/vis/visualizations/matrixvis/components/ColumnGraphicsComponent.tsx b/src/lib/vis/visualizations/matrixvis/components/ColumnGraphicsComponent.tsx
index 71482d948..d41b56ec6 100644
--- a/src/lib/vis/visualizations/matrixvis/components/ColumnGraphicsComponent.tsx
+++ b/src/lib/vis/visualizations/matrixvis/components/ColumnGraphicsComponent.tsx
@@ -1,9 +1,9 @@
-import { Edge } from '@/lib/data-access';
import { Graphics } from 'pixi.js';
+import { EdgeQueryResult } from 'ts-common';
export const createColumn = (
orderRow: string[],
- edgesForThisColumn: Edge[],
+ edgesForThisColumn: EdgeQueryResult[],
visMapping: any[], // TODO type
cellWidth: number,
cellHeight: number,
diff --git a/src/lib/vis/visualizations/matrixvis/components/ColumnSpriteComponent.tsx b/src/lib/vis/visualizations/matrixvis/components/ColumnSpriteComponent.tsx
index 13bc7b4a3..6612c26a7 100644
--- a/src/lib/vis/visualizations/matrixvis/components/ColumnSpriteComponent.tsx
+++ b/src/lib/vis/visualizations/matrixvis/components/ColumnSpriteComponent.tsx
@@ -1,12 +1,12 @@
-import { Edge, Node } from '@/lib/data-access';
import { dataColors, tailwindColors } from '@/config';
import { Sprite, Texture } from 'pixi.js';
+import { EdgeQueryResult, NodeQueryResult } from 'ts-common';
export const createColumn = (
id: number,
- nodesCol: Node[],
- nodesRow: Node[],
- edges: Edge[],
+ nodesCol: NodeQueryResult[],
+ nodesRow: NodeQueryResult[],
+ edges: EdgeQueryResult[],
colorScale: any,
cellWidth: number,
cellHeight: number,
diff --git a/src/lib/vis/visualizations/matrixvis/components/MatrixExport.tsx b/src/lib/vis/visualizations/matrixvis/components/MatrixExport.tsx
index e6907ecc3..fb05e4102 100644
--- a/src/lib/vis/visualizations/matrixvis/components/MatrixExport.tsx
+++ b/src/lib/vis/visualizations/matrixvis/components/MatrixExport.tsx
@@ -1,9 +1,8 @@
-import React from 'react';
import jsPDF from 'jspdf';
-import { Container, IRenderer } from 'pixi.js';
+import { Container, Renderer } from 'pixi.js';
/** Exports the nodelink diagram as a pdf for downloading. */
-async function exportToPDF(renderer: IRenderer, stage: Container): Promise<void> {
+async function exportToPDF(renderer: Renderer, stage: Container): Promise<void> {
const b = await renderer.extract.canvas(stage).convertToBlob?.({ type: 'image/png' });
if (!b) return;
const pdf = new jsPDF();
@@ -16,7 +15,7 @@ async function exportToPDF(renderer: IRenderer, stage: Container): Promise<void>
}
/** Exports the nodelink diagram as a png for downloading. */
-async function exportToPNG(renderer: IRenderer, stage: Container): Promise<void> {
+async function exportToPNG(renderer: Renderer, stage: Container): Promise<void> {
const b = await renderer.extract.canvas(stage).convertToBlob?.({ type: 'image/png' });
if (b) {
const a = document.createElement('a');
diff --git a/src/lib/vis/visualizations/matrixvis/components/MatrixPixi.tsx b/src/lib/vis/visualizations/matrixvis/components/MatrixPixi.tsx
index b27ac1c46..071ee397e 100644
--- a/src/lib/vis/visualizations/matrixvis/components/MatrixPixi.tsx
+++ b/src/lib/vis/visualizations/matrixvis/components/MatrixPixi.tsx
@@ -1,35 +1,36 @@
-import { Edge, GraphQueryResult, Node, useML } from '@/lib/data-access';
import { dataColors, visualizationColors } from '@/config';
+import { GraphQueryResult } from '@/lib/data-access';
import { Viewport } from 'pixi-viewport';
-import { Application, ColorSource, Container, FederatedPointerEvent, Graphics, PointData, Point, Text } from 'pixi.js';
-import { useEffect, useRef, useState, useMemo, useImperativeHandle, forwardRef } from 'react';
+import { Application, ColorSource, Container, FederatedPointerEvent, Graphics, Point, PointData, Text, Ticker } from 'pixi.js';
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
import { LinkType, NodeType } from '../types';
import { NLPopup } from './MatrixPopup';
import { Actions, Interpolations } from 'pixi-actions';
+import { useConfig } from '@/lib/data-access/store';
+import { Theme } from '@/lib/data-access/store/configSlice';
import Color from 'color';
-import { createColumn } from './ColumnGraphicsComponent';
-import { ReorderingManager } from './ReorderingManager';
import {
- select,
- selectAll,
+ axisLeft,
+ axisTop,
+ easeCubicOut,
range,
- scaleLinear,
scaleBand,
+ scaleLinear,
+ select,
+ selectAll,
+ type Axis,
+ type BaseType,
type ScaleBand,
- axisTop,
- axisLeft,
- easeCubicOut,
type Selection,
- type BaseType,
- type Axis,
} from 'd3';
-import { MatrixVisProps } from '../matrixvis';
-import { Theme } from '@/lib/data-access/store/configSlice';
-import { useConfig } from '@/lib/data-access/store';
import html2canvas from 'html2canvas';
import { Target } from 'pixi-actions/dist/actions/TargetedAction';
+import { EdgeQueryResult, NodeQueryResult } from 'ts-common';
+import { MatrixVisProps } from '../matrixvis';
+import { createColumn } from './ColumnGraphicsComponent';
+import { ReorderingManager } from './ReorderingManager';
const styleMatrixSize = 50;
@@ -40,7 +41,7 @@ type Props = {
highlightNodes: NodeType[];
currentShortestPathEdges?: LinkType[];
highlightedLinks?: LinkType[];
- graph?: GraphQueryResult;
+ result?: GraphQueryResult;
settings: MatrixVisProps;
};
@@ -63,11 +64,11 @@ export const MatrixPixi = forwardRef((props: Props, refExternal) => {
const globalConfig = useConfig();
useEffect(() => {
- if (props.graph && internalRef.current && imperative.current) {
+ if (props.result && internalRef.current && imperative.current) {
if (isSetup.current === false) setup();
else update();
}
- }, [props.graph, globalConfig.theme]);
+ }, [props.result, globalConfig.theme]);
let columnOrder: string[] = [];
let rowOrder: string[] = [];
@@ -76,12 +77,11 @@ export const MatrixPixi = forwardRef((props: Props, refExternal) => {
const [popups, setPopups] = useState<{ node: NodeType; pos: PointData }[]>([]);
// const [columnOrder, setColumnOrder] = useState<string[]>([]);
- const viewport = useRef<Viewport>();
+ const viewport = useRef<Viewport>(null);
const internalRef = useRef<HTMLDivElement>(null);
const canvas = useRef<HTMLCanvasElement>(null);
const svg = useRef<SVGSVGElement>(null);
const isSetup = useRef(false);
- const ml = useML();
const app = useMemo(
() =>
@@ -161,7 +161,7 @@ export const MatrixPixi = forwardRef((props: Props, refExternal) => {
viewport.current.screenHeight = height;
}
- if (props.graph) {
+ if (props.result) {
setup();
}
app?.render();
@@ -210,16 +210,16 @@ export const MatrixPixi = forwardRef((props: Props, refExternal) => {
const update = (forceClear = false) => {
setPopups([]);
- if (!props.graph || !internalRef.current) return;
+ if (!props.result || !internalRef.current) return;
- if (props.graph) {
+ if (props.result) {
if (forceClear) {
columnsContainer.removeChildren();
}
}
};
- const onHoverColumn = (event: any, currentNode: Node | null | undefined) => {
+ const onHoverColumn = (event: any, currentNode?: NodeQueryResult) => {
if (Actions.actions.length > 0) {
// Don't hover if reorder animation are running, causes glitches.
return;
@@ -239,9 +239,9 @@ export const MatrixPixi = forwardRef((props: Props, refExternal) => {
});
event.currentTarget.alpha = 1;
- if (!props.graph) return;
+ if (!props.result) return;
- const edgesForThisColumn = props.graph.edges.filter(edge => {
+ const edgesForThisColumn = props.result.graph.edges.filter(edge => {
return edge.from === currentNode._id || edge.to === currentNode._id;
});
@@ -290,7 +290,7 @@ export const MatrixPixi = forwardRef((props: Props, refExternal) => {
.call(axisColumns);
};
- const reorderRows = (edges: Edge[], rowOrder: string[], columnOrder: string[]) => {
+ const reorderRows = (edges: EdgeQueryResult[], rowOrder: string[], columnOrder: string[]) => {
if (Actions.actions.length > 0) {
// Don't reorder if previous animation is still running, causes glitches.
return;
@@ -299,7 +299,7 @@ export const MatrixPixi = forwardRef((props: Props, refExternal) => {
// Rearrange rows
columnsContainer.removeChildren();
setupColumns(edges, columnOrder, rowOrder);
- const cols = columnOrder.flatMap(x => props.graph?.nodes.filter(n => n._id == x) ?? []);
+ const cols = columnOrder.flatMap(x => props.result?.graph.nodes.filter(n => n._id == x) ?? []);
setupColumnInteractivity(cols);
// Animate row axis
@@ -317,7 +317,7 @@ export const MatrixPixi = forwardRef((props: Props, refExternal) => {
};
const setup = () => {
- if (!props.graph) throw Error('Graph is undefined; setup not possible');
+ if (!props.result) throw Error('Graph is undefined; setup not possible');
if (svg.current != null) {
select(svg.current).selectAll('*').remove();
@@ -341,26 +341,26 @@ export const MatrixPixi = forwardRef((props: Props, refExternal) => {
viewport.current.addChild(columnsContainer);
- const groupByType = props.graph.nodes.reduce(
- (group: any, node: Node) => {
+ const groupByType = props.result.graph.nodes.reduce(
+ (group: any, node: NodeQueryResult) => {
if (!group[node.label]) group[node.label] = [];
group[node.label].push(node);
return group;
},
- {} as { [key: string]: Node[] },
+ {} as { [key: string]: NodeQueryResult[] },
);
// order groupByType by size
const ordered = Object.entries(groupByType).sort((a: any[], b: any[]) => b[1].length - a[1].length);
- let cols = [] as Node[];
- let rows = [] as Node[];
+ let cols = [] as NodeQueryResult[];
+ let rows = [] as NodeQueryResult[];
if (ordered.length == 2) {
- cols = ordered[0][1] as Node[];
- rows = ordered[1][1] as Node[];
+ cols = ordered[0][1] as NodeQueryResult[];
+ rows = ordered[1][1] as NodeQueryResult[];
} else if (ordered.length == 1) {
- cols = ordered[0][1] as Node[];
- rows = ordered[0][1] as Node[];
+ cols = ordered[0][1] as NodeQueryResult[];
+ rows = ordered[0][1] as NodeQueryResult[];
} else {
// show text that there are no nodes on the viewport
const finalTextSize = 25;
@@ -379,12 +379,15 @@ export const MatrixPixi = forwardRef((props: Props, refExternal) => {
columnOrder = range(0, cols.length).map(d => cols[d]._id);
rowOrder = range(0, rows.length).map(d => rows[d]._id);
- const reorderingManager = new ReorderingManager(props.graph);
+ const reorderingManager = new ReorderingManager(props.result);
const newOrdering = reorderingManager.reorderMatrix('count', columnOrder, rowOrder);
columnOrder = newOrdering.columnOrder;
rowOrder = newOrdering.rowOrder;
- config.cellWidth = Math.max((size?.width || 1000) / props.graph.nodes.length, (size?.height || 1000) / props.graph.nodes.length);
+ config.cellWidth = Math.max(
+ (size?.width || 1000) / props.result.graph.nodes.length,
+ (size?.height || 1000) / props.result.graph.nodes.length,
+ );
config.cellHeight = config.cellWidth;
setupVisualizationEncodingMapping(props.settings);
@@ -399,12 +402,12 @@ export const MatrixPixi = forwardRef((props: Props, refExternal) => {
.style('pointer-events', 'none');
}
- setupColumns(props.graph.edges, columnOrder, rowOrder);
+ setupColumns(props.result.graph.edges, columnOrder, rowOrder);
setupColumnAxis(columnOrder, cols[0].label);
setupColumnInteractivity(cols);
setupRowAxis(rowOrder, rows[0].label);
- console.debug('setup matrixvis with graph:', props.graph);
+ console.debug('setup matrixvis with graph:', props.result);
// activate plugins
viewport.current.drag().pinch().wheel().animate({}).decelerate({ friction: 0.75 });
@@ -419,7 +422,7 @@ export const MatrixPixi = forwardRef((props: Props, refExternal) => {
let scaleRows: ScaleBand<string>;
const setupVisualizationEncodingMapping = (settings: MatrixVisProps) => {
- if (!props.graph) throw new Error('Graph is undefined; cannot setup matrix');
+ if (!props.result) throw new Error('Graph is undefined; cannot setup matrix');
const visMapping = []; // TODO type
const colorNeutralString = globalConfig.theme === Theme.dark ? dataColors.neutral['80'] : dataColors.neutral['15'];
@@ -462,7 +465,7 @@ export const MatrixPixi = forwardRef((props: Props, refExternal) => {
config.visMapping = visMapping;
};
- function setupColumns(edges: Edge[], columnOrder: string[], rowOrder: string[]) {
+ function setupColumns(edges: EdgeQueryResult[], columnOrder: string[], rowOrder: string[]) {
const visMapping = config.visMapping[0];
if (!visMapping) throw new Error('Cannot setup matrix without visMapping');
@@ -485,7 +488,7 @@ export const MatrixPixi = forwardRef((props: Props, refExternal) => {
}
}
- const setupColumnInteractivity = (cols: Node[]) => {
+ const setupColumnInteractivity = (cols: NodeQueryResult[]) => {
for (let j = 0; j < columnsContainer.children.length; j++) {
const oneColumn = columnsContainer.children[j];
oneColumn.interactive = true;
@@ -495,7 +498,7 @@ export const MatrixPixi = forwardRef((props: Props, refExternal) => {
onHoverColumn(event, col);
});
oneColumn.on('pointerout', event => {
- onHoverColumn(event, null);
+ onHoverColumn(event, undefined);
});
}
};
@@ -518,9 +521,9 @@ export const MatrixPixi = forwardRef((props: Props, refExternal) => {
// Click handler for reordering columns
const axisTopHandle = internalRef.current?.querySelector(`.axisTop`) as HTMLDivElement;
axisTopHandle.addEventListener('click', () => {
- if (!props.graph) throw new Error('Graph is undefined; cannot reorder matrix');
+ if (!props.result) throw new Error('Graph is undefined; cannot reorder matrix');
- const reorderingManager = new ReorderingManager(props.graph);
+ const reorderingManager = new ReorderingManager(props.result);
const newOrdering = reorderingManager.reorderMatrix('count', columnOrder, rowOrder);
columnOrder = newOrdering.columnOrder.reverse();
@@ -616,10 +619,10 @@ export const MatrixPixi = forwardRef((props: Props, refExternal) => {
// Click handler for reordering columns
const axisLeftHandle = internalRef.current?.querySelector(`.axisLeft`) as HTMLDivElement;
axisLeftHandle.addEventListener('click', () => {
- if (!props.graph) throw new Error('Graph is undefined; cannot reorder matrix');
+ if (!props.result) throw new Error('Graph is undefined; cannot reorder matrix');
rowOrder = shuffle(rowOrder);
- reorderRows(props?.graph.edges, rowOrder, columnOrder);
+ reorderRows(props?.result.graph.edges, rowOrder, columnOrder);
});
// Create d3 axis object
@@ -671,11 +674,11 @@ export const MatrixPixi = forwardRef((props: Props, refExternal) => {
}
};
- const tick = (delta: number) => {
- if (props.graph) {
+ const tick = (ticker: Ticker) => {
+ if (props.result) {
updateColumnAxis();
updateRowAxis();
- Actions.tick(delta / 60);
+ Actions.tick(ticker.deltaMS / 60);
}
};
diff --git a/src/lib/vis/visualizations/matrixvis/components/ReorderingManager.tsx b/src/lib/vis/visualizations/matrixvis/components/ReorderingManager.tsx
index 3162c29dc..172cbe9a1 100644
--- a/src/lib/vis/visualizations/matrixvis/components/ReorderingManager.tsx
+++ b/src/lib/vis/visualizations/matrixvis/components/ReorderingManager.tsx
@@ -3,10 +3,10 @@ import * as reorder from 'reorder.js';
export class ReorderingManager {
private leafOrder = reorder.optimal_leaf_order().distance(reorder.distance.manhattan);
- graph: GraphQueryResult;
+ result: GraphQueryResult;
constructor(graph: GraphQueryResult) {
- this.graph = graph;
+ this.result = graph;
}
private computeNameOrder = (columnOrder: string[], rowOrder: string[]) => {
@@ -22,7 +22,7 @@ export class ReorderingManager {
for (let i = 0; i < columnOrder.length; i++) {
const oneColumn = columnOrder[i];
- const edgesForThisColumn = this.graph.edges.filter(edge => {
+ const edgesForThisColumn = this.result.graph.edges.filter(edge => {
return edge.from === oneColumn || edge.to === oneColumn;
});
@@ -31,7 +31,7 @@ export class ReorderingManager {
for (let j = 0; j < rowOrder.length; j++) {
const oneRow = rowOrder[j];
- const edgesForThisRow = this.graph.edges.filter(edge => {
+ const edgesForThisRow = this.result.graph.edges.filter(edge => {
return edge.from === oneRow || edge.to === oneRow;
});
@@ -48,7 +48,7 @@ export class ReorderingManager {
};
private computeLeaforder = (columnOrder: string[], rowOrder: string[]) => {
- const adjacency: number[][] = this.constructAdjacencyMatrix(this.graph, columnOrder, rowOrder);
+ const adjacency: number[][] = this.constructAdjacencyMatrix(this.result, columnOrder, rowOrder);
const order = this.leafOrder.reorder(adjacency).map(i => columnOrder[i]);
@@ -61,7 +61,7 @@ export class ReorderingManager {
const adjacency: number[][] = [];
for (let i = 0; i < columnOrder.length; i++) {
const oneColumn = columnOrder[i];
- const edgesForThisColumn = graph.edges.filter(edge => {
+ const edgesForThisColumn = graph.graph.edges.filter(edge => {
return edge.from === oneColumn || edge.to === oneColumn;
});
@@ -85,7 +85,7 @@ export class ReorderingManager {
private computeBarycenter = (columnOrder: string[], rowOrder: string[]) => {
const reorderAny = reorder as any;
- const reorderGraph = this.getReorderJSGraph(this.graph, columnOrder, rowOrder);
+ const reorderGraph = this.getReorderJSGraph(this.result, columnOrder, rowOrder);
const barycenter = reorderAny.barycenter_order(reorderGraph);
const improved = reorderAny.adjacent_exchange(reorderGraph, barycenter[0], barycenter[1]);
@@ -98,10 +98,10 @@ export class ReorderingManager {
return { columnOrder: columnOrderSorted, rowOrder: rowOrderSorted };
};
- private getReorderJSGraph = (graph: GraphQueryResult, columnOrder: string[], rowOrder: string[]) => {
+ private getReorderJSGraph = (result: GraphQueryResult, columnOrder: string[], rowOrder: string[]) => {
const reorderAny = reorder as any;
- const nodesTemp = graph.nodes.map(
+ const nodesTemp = result.graph.nodes.map(
node =>
({
...node,
@@ -113,7 +113,7 @@ export class ReorderingManager {
const nodes = columnOrder.map(id => nodesTemp.find(node => node.id === id));
const graphReorderJs = reorderAny.graph().nodes(nodes);
- const edges = graph.edges.map(edge => {
+ const edges = result.graph.edges.map(edge => {
const source = nodes.find(node => node.id === edge.from);
const target = nodes.find(node => node.id === edge.to);
@@ -135,7 +135,7 @@ export class ReorderingManager {
private computeRCM = (columnOrder: string[], rowOrder: string[]) => {
const reorderAny = reorder as any;
- const reorderGraph = this.getReorderJSGraph(this.graph, columnOrder, rowOrder);
+ const reorderGraph = this.getReorderJSGraph(this.result, columnOrder, rowOrder);
const order = reorderAny.reverse_cuthill_mckee_order(reorderGraph);
const columnOrderSorted = order.map((i: number) => columnOrder[i]).filter((a: string) => columnOrder.includes(a));
@@ -148,7 +148,7 @@ export class ReorderingManager {
private computeSpectal = (columnOrder: string[], rowOrder: string[]) => {
const reorderAny = reorder as any;
- const reorderGraph = this.getReorderJSGraph(this.graph, columnOrder, rowOrder);
+ const reorderGraph = this.getReorderJSGraph(this.result, columnOrder, rowOrder);
const order = reorderAny.spectral_order(reorderGraph);
const columnOrderSorted = order.map((i: number) => columnOrder[i]).filter((a: string) => columnOrder.includes(a));
@@ -161,7 +161,7 @@ export class ReorderingManager {
private computeBFS = (columnOrder: string[], rowOrder: string[]) => {
const reorderAny = reorder as any;
- const reorderGraph = this.getReorderJSGraph(this.graph, columnOrder, rowOrder);
+ const reorderGraph = this.getReorderJSGraph(this.result, columnOrder, rowOrder);
const order = reorderAny.bfs_order(reorderGraph);
@@ -176,7 +176,7 @@ export class ReorderingManager {
private computePCA = (columnOrder: string[], rowOrder: string[]) => {
const reorderAny = reorder as any;
- const columnOrderUnSorted = columnOrder.map((id: string) => this.graph.nodes.find(node => node._id === id));
+ const columnOrderUnSorted = columnOrder.map((id: string) => this.result.graph.nodes.find(node => node._id === id));
const order = reorderAny.pca_order(columnOrderUnSorted);
const columnOrderSorted = order.map((i: number) => columnOrder[i]);
diff --git a/src/lib/vis/visualizations/matrixvis/matrix.stories.tsx b/src/lib/vis/visualizations/matrixvis/matrix.stories.tsx
index 4e5e67971..6837522dc 100644
--- a/src/lib/vis/visualizations/matrixvis/matrix.stories.tsx
+++ b/src/lib/vis/visualizations/matrixvis/matrix.stories.tsx
@@ -1,10 +1,10 @@
-import { Meta } from '@storybook/react';
+import { configSlice } from '@/lib/data-access/store/configSlice';
import { configureStore } from '@reduxjs/toolkit';
+import { Meta } from '@storybook/react';
import { Provider } from 'react-redux';
-import { mockData } from '../../../mock-data';
import { graphQueryResultSlice, schemaSlice, visualizationSlice } from '../../../data-access/store';
+import { mockData } from '../../../mock-data';
import MatrixVisComponent from './matrixvis';
-import { configSlice } from '@/lib/data-access/store/configSlice';
const Component: Meta<typeof MatrixVisComponent.component> = {
title: 'Visualizations/MatrixVis',
diff --git a/src/lib/vis/visualizations/matrixvis/matrixvis.tsx b/src/lib/vis/visualizations/matrixvis/matrixvis.tsx
index b79c6fdf1..821380653 100644
--- a/src/lib/vis/visualizations/matrixvis/matrixvis.tsx
+++ b/src/lib/vis/visualizations/matrixvis/matrixvis.tsx
@@ -1,11 +1,11 @@
-import React, { useEffect, useRef, useState, useImperativeHandle, forwardRef } from 'react';
+import { Input } from '@/lib/components/inputs';
+import { SettingsContainer } from '@/lib/vis/components/config';
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
import { useImmer } from 'use-immer';
import { GraphQueryResult } from '../../../data-access/store';
-import { LinkType, NodeType } from './types';
+import { VISComponentType, VisualizationPropTypes, VisualizationSettingsPropTypes } from '../../common';
import { MatrixPixi } from './components/MatrixPixi';
-import { VisualizationPropTypes, VISComponentType, VisualizationSettingsPropTypes } from '../../common';
-import { Input } from '@/lib/components/inputs';
-import { SettingsContainer } from '@/lib/vis/components/config';
+import { LinkType, NodeType } from './types';
export interface MatrixVisProps {
marks: string;
@@ -52,7 +52,7 @@ const MatrixVis = forwardRef<MatrixVisHandle, VisualizationPropTypes<MatrixVisPr
<div className="h-full w-full overflow-hidden" ref={ref}>
<MatrixPixi
ref={matrixPixiRef}
- graph={graph}
+ result={graph}
highlightNodes={highlightNodes}
highlightedLinks={highlightedLinks}
settings={settings}
diff --git a/src/lib/vis/visualizations/nodelinkvis/components/NLExport.tsx b/src/lib/vis/visualizations/nodelinkvis/components/NLExport.tsx
index e6907ecc3..fb05e4102 100644
--- a/src/lib/vis/visualizations/nodelinkvis/components/NLExport.tsx
+++ b/src/lib/vis/visualizations/nodelinkvis/components/NLExport.tsx
@@ -1,9 +1,8 @@
-import React from 'react';
import jsPDF from 'jspdf';
-import { Container, IRenderer } from 'pixi.js';
+import { Container, Renderer } from 'pixi.js';
/** Exports the nodelink diagram as a pdf for downloading. */
-async function exportToPDF(renderer: IRenderer, stage: Container): Promise<void> {
+async function exportToPDF(renderer: Renderer, stage: Container): Promise<void> {
const b = await renderer.extract.canvas(stage).convertToBlob?.({ type: 'image/png' });
if (!b) return;
const pdf = new jsPDF();
@@ -16,7 +15,7 @@ async function exportToPDF(renderer: IRenderer, stage: Container): Promise<void>
}
/** Exports the nodelink diagram as a png for downloading. */
-async function exportToPNG(renderer: IRenderer, stage: Container): Promise<void> {
+async function exportToPNG(renderer: Renderer, stage: Container): Promise<void> {
const b = await renderer.extract.canvas(stage).convertToBlob?.({ type: 'image/png' });
if (b) {
const a = document.createElement('a');
diff --git a/src/lib/vis/visualizations/nodelinkvis/components/NLForce.tsx b/src/lib/vis/visualizations/nodelinkvis/components/NLForce.tsx
deleted file mode 100644
index da577fb37..000000000
--- a/src/lib/vis/visualizations/nodelinkvis/components/NLForce.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { forceCenter, forceCollide, forceLink, forceManyBody, forceRadial, forceSimulation } from 'd3';
-import { GraphType, EdgeType, NodeType } from '../types';
-
-export const simulation = forceSimulation<NodeType, EdgeType>();
-
-/** StartSimulation starts the d3 forcelink simulation. This has to be called after the simulation is initialized. */
-export function startSimulation(graph: GraphType, windowSize: { width: number; height: number }): void {
- simulation
- .alpha(2)
- .alphaDecay(0.02)
- .force(
- 'link',
- forceLink<NodeType, EdgeType>()
- .id((d: any) => d.id)
- .strength((link, i, links) => (link.mlEdge ? 0.001 : 1))
- .distance(25),
- )
- .force('charge', forceManyBody().strength(-4).distanceMax(200).distanceMin(0))
- .force('center', forceCenter(windowSize.width / 2, windowSize.height / 2).strength(0.02))
- .force('collide', forceCollide().strength(0.2).radius(15).iterations(1)) // Force that avoids circle overlapping
- .force('attract', forceRadial(50, windowSize.width / 2, windowSize.height / 2).strength(0.002));
- simulation.nodes(graph.nodes);
- simulation.force<d3.ForceLink<NodeType, EdgeType>>('link')?.links(graph.edges);
- simulation.alphaTarget(0).restart();
-}
diff --git a/src/lib/vis/visualizations/nodelinkvis/components/NLMachineLearning.tsx b/src/lib/vis/visualizations/nodelinkvis/components/NLMachineLearning.tsx
index 78d97ec4a..d517168ed 100644
--- a/src/lib/vis/visualizations/nodelinkvis/components/NLMachineLearning.tsx
+++ b/src/lib/vis/visualizations/nodelinkvis/components/NLMachineLearning.tsx
@@ -1,6 +1,6 @@
import { useState } from 'react';
-import { GraphType, EdgeType, NodeType } from '../types';
-import { ML } from '../../../../data-access/store/mlSlice';
+import { ML } from 'ts-common';
+import { EdgeType, GraphType, NodeType } from '../types';
export function processLinkPrediction(ml: ML, graph: GraphType): GraphType {
if (ml === undefined || ml.linkPrediction === undefined) return graph;
diff --git a/src/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx b/src/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx
index 1394937d1..5922624db 100644
--- a/src/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx
+++ b/src/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx
@@ -1,8 +1,10 @@
-import { Popover, PopoverContent, PopoverTrigger, PopoverProvider } from '@/lib/components/popover';
+import { dataColors, visualizationColors } from '@/config';
+import { canViewFeature } from '@/lib/components/featureFlags';
import { NodeDetails } from '@/lib/components/nodeDetails';
+import { Popover, PopoverContent, PopoverTrigger } from '@/lib/components/popover';
import { useConfig } from '@/lib/data-access/store';
import { Theme } from '@/lib/data-access/store/configSlice';
-import { dataColors, visualizationColors } from '@/config';
+import { useAsyncMemo } from '@/utils';
import { MultiGraph } from 'graphology';
import { Viewport } from 'pixi-viewport';
import {
@@ -18,16 +20,14 @@ import {
type StrokeStyle,
} from 'pixi.js';
import { forwardRef, RefObject, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { AllLayoutAlgorithms } from 'ts-common/src/model/layouts';
import { useML, useSearchResultData } from '../../../../data-access';
import { GraphologyForceAtlas2Webworker, LayoutFactory, Layouts, LayoutTypes } from '../../../../graph-layout';
import { NodelinkVisProps } from '../nodelinkvis';
-import { GraphType, GraphTypeD3, EdgeType, EdgeTypeD3, NodeType, NodeTypeD3 } from '../types';
+import { EdgeType, EdgeTypeD3, GraphType, GraphTypeD3, NodeType, NodeTypeD3 } from '../types';
+import { ForceEdgeBundling, type Point } from './edgeBundling';
import { NLPopUp } from './NLPopup';
import { nodeColor, nodeColorHex } from './utils';
-import { useAsyncMemo } from '@/utils';
-import { ForceEdgeBundling, type Point } from './edgeBundling';
-import { canViewFeature } from '@/lib/components/featureFlags';
-import { AllLayoutAlgorithms } from 'ts-common/src/model/layouts';
type Props = {
onClick: (event?: { node: NodeTypeD3; pos: PointData }) => void;
@@ -1156,8 +1156,6 @@ export const NLPixi = forwardRef((props: Props, refExternal) => {
// }
// });
- // force.startSimulation(props.graph, ref.current.getBoundingClientRect());
- // force.simulation.on('tick', () => {});
layoutState.current = 'reset';
if (forceClear || layoutAlgorithm.current.algorithm !== config.LAYOUT_ALGORITHM) setupLayout(forceClear);
}
diff --git a/src/lib/vis/visualizations/nodelinkvis/components/NLPopup.tsx b/src/lib/vis/visualizations/nodelinkvis/components/NLPopup.tsx
index c7caf031b..b298e7921 100644
--- a/src/lib/vis/visualizations/nodelinkvis/components/NLPopup.tsx
+++ b/src/lib/vis/visualizations/nodelinkvis/components/NLPopup.tsx
@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/lib/components/tooltip';
import { ATTRIBUTE_MAX_CHARACTERS } from '@/config';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/lib/components/tooltip';
+import React, { useState } from 'react';
const formatNumber = (number: number) => {
if (String(number).length <= 4) return number;
diff --git a/src/lib/vis/visualizations/nodelinkvis/components/query2NL.tsx b/src/lib/vis/visualizations/nodelinkvis/components/query2NL.tsx
index e3a7fb358..20f958e82 100644
--- a/src/lib/vis/visualizations/nodelinkvis/components/query2NL.tsx
+++ b/src/lib/vis/visualizations/nodelinkvis/components/query2NL.tsx
@@ -3,10 +3,10 @@
* Utrecht University within the Software Project course.
* © Copyright Utrecht University (Department of Information and Computing Sciences)
*/
-import { GraphType, EdgeType as EdgeType, NodeType } from '../types';
+import { EdgeQueryResult, GraphQueryResultMetaFromBackend, ML, NodeQueryResult } from 'ts-common';
import { GraphQueryResult } from '../../../../data-access/store';
+import { EdgeType, GraphType, NodeType } from '../types';
import { processML } from './NLMachineLearning';
-import { EdgeQueryResult, GraphQueryResultMetaFromBackend, ML, NodeQueryResult } from 'ts-common';
/** ResultNodeLinkParserUseCase implements methods to parse and translate websocket messages from the backend into a GraphType. */
/**
diff --git a/src/lib/vis/visualizations/nodelinkvis/components/utils.tsx b/src/lib/vis/visualizations/nodelinkvis/components/utils.tsx
index 942013f4b..7ad7507c3 100644
--- a/src/lib/vis/visualizations/nodelinkvis/components/utils.tsx
+++ b/src/lib/vis/visualizations/nodelinkvis/components/utils.tsx
@@ -1,5 +1,5 @@
import { visualizationColors } from '@/config';
-import { GraphType, EdgeType, NodeType } from '../types';
+import { EdgeType, GraphType, NodeType } from '../types';
/**
* Colour is a function that takes a string of a number and returns a number of a color out of the d3 color scheme.
diff --git a/src/lib/vis/visualizations/nodelinkvis/nodelinkvis.stories.tsx b/src/lib/vis/visualizations/nodelinkvis/nodelinkvis.stories.tsx
index 1249c3f21..87bd1d615 100644
--- a/src/lib/vis/visualizations/nodelinkvis/nodelinkvis.stories.tsx
+++ b/src/lib/vis/visualizations/nodelinkvis/nodelinkvis.stories.tsx
@@ -1,11 +1,10 @@
-import React from 'react';
-import { Meta } from '@storybook/react';
-import { graphQueryResultSlice, schemaSlice, visualizationSlice, searchResultSlice } from '../../../data-access/store';
+import { configSlice } from '@/lib/data-access/store/configSlice';
import { configureStore } from '@reduxjs/toolkit';
+import { Meta } from '@storybook/react';
import { Provider } from 'react-redux';
+import { graphQueryResultSlice, schemaSlice, searchResultSlice, visualizationSlice } from '../../../data-access/store';
import { mockData } from '../../../mock-data';
import { NodeLinkComponent } from './nodelinkvis';
-import { configSlice } from '@/lib/data-access/store/configSlice';
const Mockstore = configureStore({
reducer: {
diff --git a/src/lib/vis/visualizations/nodelinkvis/nodelinkvis.tsx b/src/lib/vis/visualizations/nodelinkvis/nodelinkvis.tsx
index 3ebff7d4e..0e093296f 100644
--- a/src/lib/vis/visualizations/nodelinkvis/nodelinkvis.tsx
+++ b/src/lib/vis/visualizations/nodelinkvis/nodelinkvis.tsx
@@ -1,18 +1,18 @@
-import React, { useEffect, useRef, useState, forwardRef, useImperativeHandle, useMemo } from 'react';
-import { GraphType, EdgeType, NodeType, NodeTypeD3 } from './types';
-import { NLPixi } from './components/NLPixi';
-import { parseQueryResult } from './components/query2NL';
+import { canViewFeature } from '@/lib/components/featureFlags';
+import { Input } from '@/lib/components/inputs';
+import { EntityPill } from '@/lib/components/pills/Pill';
+import { SettingsContainer } from '@/lib/vis/components/config';
+import { type PointData } from 'pixi.js';
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { ML, NodeQueryResult } from 'ts-common';
import { useImmer } from 'use-immer';
import { setShortestPathSource, setShortestPathTarget } from '../../../data-access/store/mlSlice';
import { Layouts, LayoutTypes } from '../../../graph-layout/types';
-import { Input } from '@/lib/components/inputs';
-import { SettingsContainer } from '@/lib/vis/components/config';
-import { EntityPill } from '@/lib/components/pills/Pill';
+import { VISComponentType, VisualizationPropTypes, VisualizationSettingsPropTypes } from '../../common';
+import { NLPixi } from './components/NLPixi';
+import { parseQueryResult } from './components/query2NL';
import { nodeColorHex } from './components/utils';
-import { NodeQueryResult, ML } from 'ts-common';
-import { type PointData } from 'pixi.js';
-import { VisualizationPropTypes, VISComponentType, VisualizationSettingsPropTypes } from '../../common';
-import { canViewFeature } from '@/lib/components/featureFlags';
+import { EdgeType, GraphType, NodeType, NodeTypeD3 } from './types';
// For backwards compatibility with older saveStates, we migrate information from settings.nodes to settings.location
// FIXME: this can be removed once all systems have updated their saveStates.
diff --git a/src/lib/vis/visualizations/paohvis/components/HyperRangeBlock.tsx b/src/lib/vis/visualizations/paohvis/components/HyperRangeBlock.tsx
index 2bfd53a0e..1297dd142 100644
--- a/src/lib/vis/visualizations/paohvis/components/HyperRangeBlock.tsx
+++ b/src/lib/vis/visualizations/paohvis/components/HyperRangeBlock.tsx
@@ -1,9 +1,9 @@
-import React, { useEffect, useState, useMemo } from 'react';
-import { CustomLine } from './CustomLine';
-import { LinesHyperEdges, PaohvisDataPaginated, RowInformation } from '../types';
import { Icon } from '@/lib/components/icon';
-import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@/lib/components/tooltip';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/lib/components/tooltip';
+import React, { useEffect, useMemo, useState } from 'react';
+import { LinesHyperEdges, PaohvisDataPaginated, RowInformation } from '../types';
import { getClosestSize } from '../utils/utils';
+import { CustomLine } from './CustomLine';
interface HyperEdgeRangesBlockProps {
dataModel: PaohvisDataPaginated;
@@ -109,7 +109,6 @@ export const HyperEdgeRangesBlock: React.FC<HyperEdgeRangesBlockProps> = ({
return (
<>
<g key={'hyperEdgeInformationTop'} className="hyperEdgeInformation">
-
<g key={'hyperEdgeLinesRows'} transform={`translate(${rowLabelColumnWidth},${yOffset + rowHeight})`}>
{[...Array(numRows)].map((_, i) => (
<React.Fragment key={`horizontalLineRows-${i}`}>
@@ -119,8 +118,8 @@ export const HyperEdgeRangesBlock: React.FC<HyperEdgeRangesBlockProps> = ({
className={`horizontalLineRowsTop-${i} fill-secondary-300`}
x1={0}
x2={dataModel.pageData.hyperEdgeRanges.length * rowHeight}
- y1={-yOffset-rowHeight}
- y2={-yOffset-rowHeight}
+ y1={-yOffset - rowHeight}
+ y2={-yOffset - rowHeight}
strokeWidth={0.025 * rowHeight}
/>
)}
@@ -148,7 +147,7 @@ export const HyperEdgeRangesBlock: React.FC<HyperEdgeRangesBlockProps> = ({
</React.Fragment>
))}
</g>
-
+
<g
key={'hyperEdgeInformation'}
className="hyperEdgeInformation text-columns "
@@ -165,7 +164,7 @@ export const HyperEdgeRangesBlock: React.FC<HyperEdgeRangesBlockProps> = ({
{columnHeaderInformation.map((row, index) => (
<Tooltip key={'tooltip-col-' + index}>
<TooltipTrigger asChild>
- <g key={'text-col-' + index} transform={'translate(' + (accumulatedWidthHeaders[index]) + ',0)'}>
+ <g key={'text-col-' + index} transform={'translate(' + accumulatedWidthHeaders[index] + ',0)'}>
{row.data[indexRows] !== undefined &&
row.data[indexRows] !== '' &&
(typeof row.data[indexRows] !== 'object' || Array.isArray(row.data[indexRows])) ? (
@@ -184,12 +183,7 @@ export const HyperEdgeRangesBlock: React.FC<HyperEdgeRangesBlockProps> = ({
</foreignObject>
</>
) : (
- <rect
- width={row.width}
- height={rowHeight}
- fill={'url(#diagonal-lines)'}
- strokeWidth={0}
- ></rect>
+ <rect width={row.width} height={rowHeight} fill={'url(#diagonal-lines)'} strokeWidth={0}></rect>
)}
</g>
</TooltipTrigger>
@@ -274,12 +268,18 @@ export const HyperEdgeRangesBlock: React.FC<HyperEdgeRangesBlockProps> = ({
</g>
))}
</g>
-
+
{dataModel.pageData.hyperEdgeRanges.map((hyperEdgeRange, indexHyperEdgeRange) => (
<React.Fragment key={indexHyperEdgeRange}>
<g
className={'hyperEdgeBlockLinesRef hyperEdgeLines-col-' + indexHyperEdgeRange}
- transform={'translate(' + (rowLabelColumnWidth + indexHyperEdgeRange * rowHeight) + ',' + (widthColumns + rowHeight) + ')rotate(-90,0,0)'}
+ transform={
+ 'translate(' +
+ (rowLabelColumnWidth + indexHyperEdgeRange * rowHeight) +
+ ',' +
+ (widthColumns + rowHeight) +
+ ')rotate(-90,0,0)'
+ }
>
<CustomLine
x1={-rowHeight * numRows}
diff --git a/src/lib/vis/visualizations/paohvis/components/RowLabels.tsx b/src/lib/vis/visualizations/paohvis/components/RowLabels.tsx
index 0e4129798..790825349 100644
--- a/src/lib/vis/visualizations/paohvis/components/RowLabels.tsx
+++ b/src/lib/vis/visualizations/paohvis/components/RowLabels.tsx
@@ -1,9 +1,9 @@
-import React, { useEffect, useState, useMemo } from 'react';
-import { CustomLine } from './CustomLine';
+import { Icon } from '@/lib/components/icon';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/lib/components/tooltip';
+import React, { useEffect, useMemo, useState } from 'react';
import { RowInformation } from '../types';
import { getClosestSize } from '../utils/utils';
-import { Icon } from '@/lib/components/icon';
-import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@/lib/components/tooltip';
+import { CustomLine } from './CustomLine';
interface RowLabelsProps {
dataRows: RowInformation;
@@ -90,8 +90,8 @@ export const RowLabels = ({
return (
<>
<g key={'rowLabelsInformation'} className="rowLabelsInformation">
-
- {dataRows[0] && dataRows[0].data.map((rowLabel, indexRows) => (
+ {dataRows[0] &&
+ dataRows[0].data.map((rowLabel, indexRows) => (
<g key={'parent_' + indexRows}>
<g key={'content_' + indexRows} transform={'translate(0,' + (yOffset + rowHeight + indexRows * rowHeight) + ')'}>
<g className={'rowsLabel row-' + indexRows} onMouseEnter={onMouseEnterRowLabels} onMouseLeave={onMouseLeaveRowLabels}>
@@ -120,12 +120,7 @@ export const RowLabels = ({
</foreignObject>
</>
) : (
- <rect
- width={row.width}
- height={rowHeight}
- fill={'url(#diagonal-lines)'}
- strokeWidth={0}
- ></rect>
+ <rect width={row.width} height={rowHeight} fill={'url(#diagonal-lines)'} strokeWidth={0}></rect>
)}
</g>
</TooltipTrigger>
@@ -166,7 +161,7 @@ export const RowLabels = ({
<g
key={'content_rectangleGrid' + indexRows}
- transform={'translate(' + (accumulatedWidthHeadersTotalValue) + ',' + (yOffset + rowHeight + indexRows * rowHeight) + ')'}
+ transform={'translate(' + accumulatedWidthHeadersTotalValue + ',' + (yOffset + rowHeight + indexRows * rowHeight) + ')'}
>
<rect
width={rowHeight * numColumns}
@@ -184,7 +179,7 @@ export const RowLabels = ({
<g
key={'gHeadersRows-' + indexRows}
className={`headersRows-${row.header} cursor-pointer group`}
- transform={'translate(' + accumulatedWidthHeaders[indexRows] + ',' + (yOffset) + ')'}
+ transform={'translate(' + accumulatedWidthHeaders[indexRows] + ',' + yOffset + ')'}
onClick={event => {
handleClickHeaderSorting(event);
}}
@@ -225,7 +220,6 @@ export const RowLabels = ({
</div>
</foreignObject>
)}
-
</g>
<CustomLine
key={'row-verticalLines-' + indexRows}
@@ -239,7 +233,6 @@ export const RowLabels = ({
</g>
))}
</g>
-
</g>
</>
);
diff --git a/src/lib/vis/visualizations/paohvis/paohvis.stories.tsx b/src/lib/vis/visualizations/paohvis/paohvis.stories.tsx
index 9e54e748c..2e42fce8b 100644
--- a/src/lib/vis/visualizations/paohvis/paohvis.stories.tsx
+++ b/src/lib/vis/visualizations/paohvis/paohvis.stories.tsx
@@ -1,14 +1,8 @@
-import { Meta } from '@storybook/react';
-import { graphQueryResultSlice, schemaSlice, visualizationSlice } from '../../../data-access/store';
import { configureStore } from '@reduxjs/toolkit';
+import { Meta } from '@storybook/react';
import { Provider } from 'react-redux';
-import {
- big2ndChamberSchemaRaw,
- marieBoucherSampleSchemaRaw,
- simpleSchemaAirportRaw,
- mockData,
- recommendationsWithAttributesRaw,
-} from '../../../mock-data';
+import { graphQueryResultSlice, schemaSlice, visualizationSlice } from '../../../data-access/store';
+import { marieBoucherSampleSchemaRaw, mockData, recommendationsWithAttributesRaw, simpleSchemaAirportRaw } from '../../../mock-data';
import PaohVisComponent from './paohvis';
const Mockstore = configureStore({
diff --git a/src/lib/vis/visualizations/paohvis/paohvis.tsx b/src/lib/vis/visualizations/paohvis/paohvis.tsx
index c8d86b1aa..08d957248 100644
--- a/src/lib/vis/visualizations/paohvis/paohvis.tsx
+++ b/src/lib/vis/visualizations/paohvis/paohvis.tsx
@@ -1,23 +1,23 @@
-import React, { useEffect, useRef, useState, useMemo, forwardRef, useImperativeHandle } from 'react';
-import { PaohvisDataPaginated, RowInformation, LinesHyperEdges } from './types';
+import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { LinesHyperEdges, PaohvisDataPaginated, RowInformation } from './types';
import { parseQueryResult } from './utils/dataProcessing';
-import { RowLabels } from './components/RowLabels';
import { HyperEdgeRangesBlock } from './components/HyperRangeBlock';
+import { RowLabels } from './components/RowLabels';
-import { sortRowInformation, sortIndices, intersectionElements } from './utils/utils';
import { select, selectAll } from 'd3';
+import { intersectionElements, sortIndices, sortRowInformation } from './utils/utils';
-import { SettingsContainer } from '@/lib/vis/components/config';
-import { Input } from '@/lib/components/inputs';
-import { VisualizationPropTypes, VISComponentType, VisualizationSettingsPropTypes } from '../../common';
+import { Accordion, AccordionBody, AccordionHead, AccordionItem } from '@/lib/components/accordion';
import { Button } from '@/lib/components/buttons';
+import { Input } from '@/lib/components/inputs';
import { EntityPill } from '@/lib/components/pills/Pill';
-import { cloneDeep } from 'lodash-es';
-import { useImmer } from 'use-immer';
-import { Accordion, AccordionBody, AccordionHead, AccordionItem } from '@/lib/components/accordion';
+import { SettingsContainer } from '@/lib/vis/components/config';
import html2canvas from 'html2canvas';
+import { cloneDeep } from 'lodash-es';
import { NodeQueryResult } from 'ts-common';
+import { useImmer } from 'use-immer';
+import { VISComponentType, VisualizationPropTypes, VisualizationSettingsPropTypes } from '../../common';
export interface PaohVisHandle {
exportImageInternal: () => void;
diff --git a/src/lib/vis/visualizations/paohvis/types.ts b/src/lib/vis/visualizations/paohvis/types.ts
index 20c0ddc18..8cc0b3b02 100644
--- a/src/lib/vis/visualizations/paohvis/types.ts
+++ b/src/lib/vis/visualizations/paohvis/types.ts
@@ -3,7 +3,7 @@
* Utrecht University within the Software Project course.
* © Copyright Utrecht University (Department of Information and Computing Sciences)
*/
-import { EdgeQueryResult, NodeQueryResult, NodeAttributes } from '@/lib/data-access/store/graphQueryResultSlice';
+import { EdgeQueryResult, NodeAttributes, NodeQueryResult } from 'ts-common';
/** The data that is needed to make the complete Paohvis table. */
export type PaohvisData = {
diff --git a/src/lib/vis/visualizations/paohvis/utils/AttributesFilterUseCase.tsx b/src/lib/vis/visualizations/paohvis/utils/AttributesFilterUseCase.tsx
index ace875b1d..0b9764355 100644
--- a/src/lib/vis/visualizations/paohvis/utils/AttributesFilterUseCase.tsx
+++ b/src/lib/vis/visualizations/paohvis/utils/AttributesFilterUseCase.tsx
@@ -4,11 +4,11 @@
* © Copyright Utrecht University (Department of Information and Computing Sciences)
*/
-import { FilterInfo, PaohvisFilters } from '../types';
-import { AxisType, isNotInGroup } from './ResultNodeLinkParserUseCase';
-import { boolPredicates, numberPredicates, textPredicates } from '../models/FilterPredicates';
import { cloneDeep } from 'lodash-es';
import { EdgeQueryResult, NodeQueryResult } from 'ts-common';
+import { boolPredicates, numberPredicates, textPredicates } from '../models/FilterPredicates';
+import { FilterInfo, PaohvisFilters } from '../types';
+import { AxisType, isNotInGroup } from './ResultNodeLinkParserUseCase';
/** This is used to filter the data for Paohvis. */
export default class AttributeFilterUsecase {
diff --git a/src/lib/vis/visualizations/paohvis/utils/dataProcessing.tsx b/src/lib/vis/visualizations/paohvis/utils/dataProcessing.tsx
index 99e2827ef..b5a6a14e5 100644
--- a/src/lib/vis/visualizations/paohvis/utils/dataProcessing.tsx
+++ b/src/lib/vis/visualizations/paohvis/utils/dataProcessing.tsx
@@ -1,9 +1,9 @@
+import { GraphQueryResult } from '@/lib/data-access';
import { EdgeQueryResult, NodeQueryResult } from 'ts-common';
import { PaohVisProps } from '../paohvis';
-import { PaohvisData, HyperEdgeRange, HyperEdgeI } from '../types';
+import { HyperEdgeI, HyperEdgeRange, PaohvisData } from '../types';
import AttributeFilterUsecase, { getIds } from './AttributesFilterUseCase';
import { countRepetition } from './utils';
-import { GraphQueryResult } from '@/lib/data-access';
type AugmentedNode = NodeQueryResult & {
reduced_ids: string[];
diff --git a/src/lib/vis/visualizations/paohvis/utils/utils.tsx b/src/lib/vis/visualizations/paohvis/utils/utils.tsx
index f5d277f76..1dd6ccf70 100644
--- a/src/lib/vis/visualizations/paohvis/utils/utils.tsx
+++ b/src/lib/vis/visualizations/paohvis/utils/utils.tsx
@@ -1,18 +1,18 @@
-import { SchemaAttribute, SchemaGraph } from '../../../../schema';
+import { Sizes, sizesArray } from '@/lib/components/icon';
+import { group } from 'd3';
+import { MultiGraph } from 'graphology';
+import { NodeQueryResult, SchemaAttribute } from 'ts-common';
+import { SchemaGraph } from '../../../../schema';
import {
AttributeNames,
- EntitiesFromSchema,
- RelationsFromSchema,
ConnectionFromTo,
- IdConnections,
+ Data2RenderI,
+ EntitiesFromSchema,
GraphData,
+ IdConnections,
+ RelationsFromSchema,
RowInformation,
- Data2RenderI,
} from '../types';
-import { MultiGraph } from 'graphology';
-import { NodeQueryResult } from '@/lib/data-access/store/graphQueryResultSlice';
-import { group } from 'd3';
-import { Sizes, sizesArray } from '@/lib/components/icon';
/**
* Takes a schema result and calculates all the entity names, and relation names and attribute names per entity.
diff --git a/src/lib/vis/visualizations/rawjsonvis/rawjsonvis.spec.tsx b/src/lib/vis/visualizations/rawjsonvis/rawjsonvis.spec.tsx
index 338394ddb..aa7054d2c 100644
--- a/src/lib/vis/visualizations/rawjsonvis/rawjsonvis.spec.tsx
+++ b/src/lib/vis/visualizations/rawjsonvis/rawjsonvis.spec.tsx
@@ -1,5 +1,4 @@
-import { render } from '@testing-library/react';
-import { assert, describe, expect, it } from 'vitest';
+import { describe, expect, it } from 'vitest';
//import RawJSONVis from './rawjsonvis';
diff --git a/src/lib/vis/visualizations/rawjsonvis/rawjsonvis.stories.tsx b/src/lib/vis/visualizations/rawjsonvis/rawjsonvis.stories.tsx
index 76d77a6cd..6bafd3ce5 100644
--- a/src/lib/vis/visualizations/rawjsonvis/rawjsonvis.stories.tsx
+++ b/src/lib/vis/visualizations/rawjsonvis/rawjsonvis.stories.tsx
@@ -1,11 +1,10 @@
-import React from 'react';
-import { Meta } from '@storybook/react';
-import { graphQueryResultSlice, schemaSlice, visualizationSlice } from '../../../data-access/store';
+import { configSlice } from '@/lib/data-access/store/configSlice';
import { configureStore } from '@reduxjs/toolkit';
+import { Meta } from '@storybook/react';
import { Provider } from 'react-redux';
+import { graphQueryResultSlice, schemaSlice, visualizationSlice } from '../../../data-access/store';
import { mockData } from '../../../mock-data';
import RawJSONComponent from './rawjsonvis';
-import { configSlice } from '@/lib/data-access/store/configSlice';
const Mockstore = configureStore({
reducer: {
diff --git a/src/lib/vis/visualizations/rawjsonvis/rawjsonvis.tsx b/src/lib/vis/visualizations/rawjsonvis/rawjsonvis.tsx
index 7f57799ec..4f01855b1 100644
--- a/src/lib/vis/visualizations/rawjsonvis/rawjsonvis.tsx
+++ b/src/lib/vis/visualizations/rawjsonvis/rawjsonvis.tsx
@@ -1,10 +1,10 @@
-import React, { useState, useEffect } from 'react';
-import ReactJSONView, { ThemeKeys } from 'react-json-view';
-import { VisualizationPropTypes, VISComponentType, VisualizationSettingsPropTypes } from '../../common';
-import { SettingsContainer } from '@/lib/vis/components/config';
import { Input } from '@/lib/components/inputs';
import { useConfig } from '@/lib/data-access/store';
import { Theme } from '@/lib/data-access/store/configSlice';
+import { SettingsContainer } from '@/lib/vis/components/config';
+import React, { useEffect, useState } from 'react';
+import ReactJSONView, { ThemeKeys } from 'react-json-view';
+import { VISComponentType, VisualizationPropTypes, VisualizationSettingsPropTypes } from '../../common';
export interface RawJSONVisProps {
theme: string;
diff --git a/src/lib/vis/visualizations/semanticsubstratesvis/components/EdgesLayer.tsx b/src/lib/vis/visualizations/semanticsubstratesvis/components/EdgesLayer.tsx
index 0eae441f6..9f21147cf 100644
--- a/src/lib/vis/visualizations/semanticsubstratesvis/components/EdgesLayer.tsx
+++ b/src/lib/vis/visualizations/semanticsubstratesvis/components/EdgesLayer.tsx
@@ -1,5 +1,5 @@
-import React, { useRef, useMemo } from 'react';
-import { DataConnection, VisualRegionConfig, VisualEdgesConfig, DataPoint } from './types';
+import React, { useMemo, useRef } from 'react';
+import { DataConnection, DataPoint, VisualEdgesConfig, VisualRegionConfig } from './types';
export type EdgesLayerProps = {
dataConnections: DataConnection[];
diff --git a/src/lib/vis/visualizations/semanticsubstratesvis/components/Scatterplot.tsx b/src/lib/vis/visualizations/semanticsubstratesvis/components/Scatterplot.tsx
index a133f2b7e..064edf678 100644
--- a/src/lib/vis/visualizations/semanticsubstratesvis/components/Scatterplot.tsx
+++ b/src/lib/vis/visualizations/semanticsubstratesvis/components/Scatterplot.tsx
@@ -1,27 +1,27 @@
-import React, { useEffect, useRef, useState, useMemo } from 'react';
+import { Icon } from '@/lib/components/icon';
+import { EntityPill } from '@/lib/components/pills/Pill';
import {
- select,
- scaleBand,
+ Axis,
axisBottom,
- scaleLinear,
- forceX,
- forceY,
+ axisLeft,
brush,
forceCollide,
- format,
- axisLeft,
forceSimulation,
- Axis,
+ forceX,
+ forceY,
+ format,
NumberValue,
- Selection,
+ scaleBand,
ScaleBand,
+ scaleLinear,
ScaleLinear,
+ select,
+ Selection,
} from 'd3';
-import { VisualRegionConfig, RegionData, DataPoint, DataPointXY } from './types';
-import { calcTextWidth } from './utils';
-import { Icon } from '@/lib/components/icon';
-import { EntityPill } from '@/lib/components/pills/Pill';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
import { noDataRange } from '../utils';
+import { DataPoint, DataPointXY, RegionData, VisualRegionConfig } from './types';
+import { calcTextWidth } from './utils';
export type ScatterplotProps = {
data: RegionData;
diff --git a/src/lib/vis/visualizations/semanticsubstratesvis/components/types.ts b/src/lib/vis/visualizations/semanticsubstratesvis/components/types.ts
index 3eeabad67..007d09d49 100644
--- a/src/lib/vis/visualizations/semanticsubstratesvis/components/types.ts
+++ b/src/lib/vis/visualizations/semanticsubstratesvis/components/types.ts
@@ -1,4 +1,4 @@
-import { NodeAttributes } from '@/lib/data-access/store/graphQueryResultSlice';
+import { NodeAttributes } from 'ts-common';
export interface NodesGraphology {
key: string;
diff --git a/src/lib/vis/visualizations/semanticsubstratesvis/components/utils.ts b/src/lib/vis/visualizations/semanticsubstratesvis/components/utils.ts
index 9b116909a..a6b145701 100644
--- a/src/lib/vis/visualizations/semanticsubstratesvis/components/utils.ts
+++ b/src/lib/vis/visualizations/semanticsubstratesvis/components/utils.ts
@@ -1,8 +1,8 @@
-import { UserSelection, RegionData, AugmentedNodeAttributes, connectionFromTo, IdConnections, edgeVisibility } from './types';
-import { extent } from 'd3';
-import { RefObject } from 'react';
import { visualizationColors } from '@/config';
+import { extent } from 'd3';
import { MultiGraph } from 'graphology';
+import { RefObject } from 'react';
+import { AugmentedNodeAttributes, connectionFromTo, edgeVisibility, IdConnections, RegionData, UserSelection } from './types';
export function findConnectionsNodes(
queryIDs: string[],
diff --git a/src/lib/vis/visualizations/semanticsubstratesvis/configPanel/SemSubsConfigPanel.tsx b/src/lib/vis/visualizations/semanticsubstratesvis/configPanel/SemSubsConfigPanel.tsx
index 4a59fe19b..dc9a8777c 100644
--- a/src/lib/vis/visualizations/semanticsubstratesvis/configPanel/SemSubsConfigPanel.tsx
+++ b/src/lib/vis/visualizations/semanticsubstratesvis/configPanel/SemSubsConfigPanel.tsx
@@ -1,10 +1,10 @@
-import React, { useState, useEffect } from 'react';
+import { Input } from '@/lib/components';
import { Button } from '@/lib/components/buttons';
import { Icon } from '@/lib/components/icon';
-import { DataFromPanel, DataPanelConfig } from '../components/types';
import { EntityPillSelector } from '@/lib/components/selectors/entityPillSelector';
-import { Input } from '@/lib/components';
+import React, { useEffect, useState } from 'react';
import { CategoricalStats, GraphStatistics } from 'ts-common';
+import { DataFromPanel, DataPanelConfig } from '../components/types';
export type SemSubsConfigPanelProps = {
dataFromPanel: DataFromPanel;
@@ -186,7 +186,7 @@ export const SemSubsConfigPanel: React.FC<SemSubsConfigPanelProps> = ({
value={data.xAxisSelected || 'None'}
disabled={!data.entitySelected}
options={stateConfigPanelOptions.xAxisSelectedOptions.map(option => option || 'None')}
- onChange={(option: string | number) => {
+ onChange={option => {
onUpdateData({ xAxisSelected: String(option) });
}}
/>
@@ -202,7 +202,7 @@ export const SemSubsConfigPanel: React.FC<SemSubsConfigPanelProps> = ({
disabled={!data.entitySelected}
value={data.yAxisSelected || 'None'}
options={stateConfigPanelOptions.yAxisSelectedOptions.map(option => option || 'None')}
- onChange={(option: string | number) => {
+ onChange={option => {
onUpdateData({ yAxisSelected: String(option) });
}}
/>
@@ -216,7 +216,7 @@ export const SemSubsConfigPanel: React.FC<SemSubsConfigPanelProps> = ({
disabled={!data.entitySelected}
value={data.attributeSelected || 'None'}
options={stateConfigPanelOptions.attributeSelectedOptions.map(option => option || 'None')}
- onChange={(option: string | number) => {
+ onChange={option => {
onUpdateData({ attributeSelected: String(option) });
}}
/>
@@ -231,7 +231,7 @@ export const SemSubsConfigPanel: React.FC<SemSubsConfigPanelProps> = ({
label="Value"
value={data.attributeValueSelected || 'None'}
options={stateConfigPanelOptions.attributeValueSelectedOptions.map(option => option || 'None')}
- onChange={(option: string | number) => {
+ onChange={option => {
onUpdateData({ attributeValueSelected: String(option) });
}}
/>
diff --git a/src/lib/vis/visualizations/semanticsubstratesvis/semanticsubstratesvis.stories.tsx b/src/lib/vis/visualizations/semanticsubstratesvis/semanticsubstratesvis.stories.tsx
index f1c02cb5d..bcbebdedc 100644
--- a/src/lib/vis/visualizations/semanticsubstratesvis/semanticsubstratesvis.stories.tsx
+++ b/src/lib/vis/visualizations/semanticsubstratesvis/semanticsubstratesvis.stories.tsx
@@ -1,9 +1,9 @@
-import { Meta } from '@storybook/react';
-import { SemSubstrVisComponent } from './semanticsubstratesvis';
-import { graphQueryResultSlice, schemaSlice, visualizationSlice } from '../../../data-access/store';
import { configureStore } from '@reduxjs/toolkit';
+import { Meta } from '@storybook/react';
import { Provider } from 'react-redux';
+import { graphQueryResultSlice, schemaSlice, visualizationSlice } from '../../../data-access/store';
import { mockData } from '../../../mock-data';
+import { SemSubstrVisComponent } from './semanticsubstratesvis';
const Mockstore = configureStore({
reducer: {
diff --git a/src/lib/vis/visualizations/semanticsubstratesvis/semanticsubstratesvis.tsx b/src/lib/vis/visualizations/semanticsubstratesvis/semanticsubstratesvis.tsx
index 8040a78bb..e0cb441de 100644
--- a/src/lib/vis/visualizations/semanticsubstratesvis/semanticsubstratesvis.tsx
+++ b/src/lib/vis/visualizations/semanticsubstratesvis/semanticsubstratesvis.tsx
@@ -1,31 +1,31 @@
-import React, { useRef, useState, useMemo, useEffect, forwardRef, useImperativeHandle } from 'react';
-import { Scatterplot, KeyedScatterplotProps } from './components/Scatterplot';
-import { SettingsContainer } from '@/lib/vis/components/config';
import { Button } from '@/lib/components/buttons';
+import { SettingsContainer } from '@/lib/vis/components/config';
import { select, selectAll } from 'd3';
-import { VisualizationPropTypes, VISComponentType, VisualizationSettingsPropTypes } from '../../common';
-import { findConnectionsNodes, getRegionData, setExtension, filterArray, getUniqueValues } from './components/utils';
+import html2canvas from 'html2canvas';
import { cloneDeep, isEqual } from 'lodash-es';
+import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { VISComponentType, VisualizationPropTypes, VisualizationSettingsPropTypes } from '../../common';
+import { KeyedScatterplotProps, Scatterplot } from './components/Scatterplot';
import {
- UserSelection,
- RegionData,
- DataPanelConfig,
- AugmentedNodeAttributes,
- VisualEdgesConfig,
- connectionFromTo,
AugmentedEdgeAttributes,
- DataPoint,
+ AugmentedNodeAttributes,
DataFromPanel,
+ DataPanelConfig,
+ DataPoint,
+ RegionData,
+ UserSelection,
+ VisualEdgesConfig,
VisualRegionConfig,
+ connectionFromTo,
} from './components/types';
-import html2canvas from 'html2canvas';
+import { filterArray, findConnectionsNodes, getRegionData, getUniqueValues, setExtension } from './components/utils';
-import EdgesLayer, { KeyedEdgesLayerProps } from './components/EdgesLayer';
import { MultiGraph } from 'graphology';
-import { buildGraphology, config, numColorsCategorical, marginAxis, isColorCircleFix, noDataRange } from './utils';
-import { SemSubsConfigPanel } from './configPanel';
-import { nodeColorHex } from './components/utils';
import { NodeQueryResult } from 'ts-common';
+import EdgesLayer, { KeyedEdgesLayerProps } from './components/EdgesLayer';
+import { nodeColorHex } from './components/utils';
+import { SemSubsConfigPanel } from './configPanel';
+import { buildGraphology, config, isColorCircleFix, marginAxis, noDataRange, numColorsCategorical } from './utils';
export interface VisSemanticSubstratesHandle {
exportImageInternal: () => void;
diff --git a/src/lib/vis/visualizations/semanticsubstratesvis/utils.ts b/src/lib/vis/visualizations/semanticsubstratesvis/utils.ts
index be9c46c30..0bad406d3 100644
--- a/src/lib/vis/visualizations/semanticsubstratesvis/utils.ts
+++ b/src/lib/vis/visualizations/semanticsubstratesvis/utils.ts
@@ -1,7 +1,7 @@
import { visualizationColors } from '@/config';
import { MultiGraph } from 'graphology';
+import { NodeQueryResult } from 'ts-common';
import { GraphData } from './components/types';
-import { NodeQueryResult } from '@/lib/data-access/store/graphQueryResultSlice';
export const noDataRange = [-1, 1];
export const noSelection = 'None';
@@ -77,4 +77,4 @@ if (isColorCircleFix) {
const marginAxis = 0.2;
-export { buildGraphology, numColorsCategorical, config, marginAxis };
+export { buildGraphology, config, marginAxis, numColorsCategorical };
diff --git a/src/lib/vis/visualizations/tablevis/components/Table.tsx b/src/lib/vis/visualizations/tablevis/components/Table.tsx
index 231530877..55d86add1 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, useRef } from 'react';
-import { Pagination } from '@/lib/components/pagination';
-import { BarPlot } from '@/lib/components/charts/barplot';
import { Icon } from '@/lib/components';
+import { BarPlot } from '@/lib/components/charts/barplot';
+import { Pagination } from '@/lib/components/pagination';
import { group } from 'd3';
+import { useEffect, useRef, useState } from 'react';
import { NodeAttributes, SchemaAttributeTypes } from 'ts-common';
export type AugmentedNodeAttributes = { attribute: NodeAttributes; type: Record<string, SchemaAttributeTypes> };
diff --git a/src/lib/vis/visualizations/tablevis/tablevis.stories.tsx b/src/lib/vis/visualizations/tablevis/tablevis.stories.tsx
index 05803ab89..9f4c7b576 100644
--- a/src/lib/vis/visualizations/tablevis/tablevis.stories.tsx
+++ b/src/lib/vis/visualizations/tablevis/tablevis.stories.tsx
@@ -1,7 +1,7 @@
-import { Meta } from '@storybook/react';
-import { graphQueryResultSlice, schemaSlice, visualizationSlice } from '../../../data-access/store';
import { configureStore } from '@reduxjs/toolkit';
+import { Meta } from '@storybook/react';
import { Provider } from 'react-redux';
+import { graphQueryResultSlice, schemaSlice, visualizationSlice } from '../../../data-access/store';
import { big2ndChamberSchemaRaw, mockData, typesMockSchemaRaw } from '../../../mock-data';
import { simpleSchemaAirportRaw } from '../../../mock-data/schema/simpleAirportRaw';
import TableComponent from './tablevis';
diff --git a/src/lib/vis/visualizations/tablevis/tablevis.tsx b/src/lib/vis/visualizations/tablevis/tablevis.tsx
index 7b5e19e91..55191bc3a 100644
--- a/src/lib/vis/visualizations/tablevis/tablevis.tsx
+++ b/src/lib/vis/visualizations/tablevis/tablevis.tsx
@@ -6,9 +6,9 @@ import { useSearchResultData } from '@/lib/data-access';
import { SettingsContainer } from '@/lib/vis/components/config';
import html2canvas from 'html2canvas';
import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import styles from '../../../components/buttons/buttons.module.scss';
import { VISComponentType, VisualizationPropTypes, VisualizationSettingsPropTypes } from '../../common';
import { AugmentedNodeAttributes, Table } from './components/Table';
-import styles from '../../../components/buttons/buttons.module.scss';
export interface TableVisHandle {
exportImageInternal: () => void;
diff --git a/src/lib/vis/visualizations/vis0D/Vis0D.tsx b/src/lib/vis/visualizations/vis0D/Vis0D.tsx
index 32143bc2a..f26cf383e 100644
--- a/src/lib/vis/visualizations/vis0D/Vis0D.tsx
+++ b/src/lib/vis/visualizations/vis0D/Vis0D.tsx
@@ -1,11 +1,11 @@
-import React, { useRef, useImperativeHandle, forwardRef, useEffect, useState, Fragment } from 'react';
-import { VisualizationPropTypes, VISComponentType, VisualizationSettingsPropTypes } from '../../common';
-import { SettingsContainer } from '@/lib/vis/components/config';
-import html2canvas from 'html2canvas';
+import { Button } from '@/lib/components/buttons';
import { Input } from '@/lib/components/inputs';
import { EntityPill, RelationPill } from '@/lib/components/pills/Pill';
-import { Button } from '@/lib/components/buttons';
-import { useActiveQuery, useActiveSaveState, useQuerybuilderHash } from '@/lib/data-access';
+import { useActiveQuery, useActiveSaveState } from '@/lib/data-access';
+import { SettingsContainer } from '@/lib/vis/components/config';
+import html2canvas from 'html2canvas';
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { VISComponentType, VisualizationPropTypes, VisualizationSettingsPropTypes } from '../../common';
export interface Vis0DProps {
title: string;
selectedEntity: string;
diff --git a/src/lib/vis/visualizations/vis0D/vis0D.stories.tsx b/src/lib/vis/visualizations/vis0D/vis0D.stories.tsx
index b7f4c9b28..d1915d37f 100644
--- a/src/lib/vis/visualizations/vis0D/vis0D.stories.tsx
+++ b/src/lib/vis/visualizations/vis0D/vis0D.stories.tsx
@@ -1,5 +1,5 @@
-import { Meta } from '@storybook/react';
import { configureStore } from '@reduxjs/toolkit';
+import { Meta } from '@storybook/react';
import { Provider } from 'react-redux';
import { graphQueryResultSlice, schemaSlice, visualizationSlice } from '../../../data-access/store';
import Vis0DComponent from './Vis0D';
diff --git a/src/lib/vis/visualizations/vis1D/Vis1D.tsx b/src/lib/vis/visualizations/vis1D/Vis1D.tsx
index 54dbba72c..11b50ef5e 100644
--- a/src/lib/vis/visualizations/vis1D/Vis1D.tsx
+++ b/src/lib/vis/visualizations/vis1D/Vis1D.tsx
@@ -1,13 +1,13 @@
-import React, { useState, useRef, useMemo, useImperativeHandle, forwardRef, useEffect } from 'react';
-import { VisualizationPropTypes, VISComponentType, VisualizationSettingsPropTypes } from '../../common';
+import { Button } from '@/lib/components/buttons';
+import { Input } from '@/lib/components/inputs';
+import { EntityPill } from '@/lib/components/pills/Pill';
import { SettingsContainer } from '@/lib/vis/components/config';
import html2canvas from 'html2canvas';
+import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { VISComponentType, VisualizationPropTypes, VisualizationSettingsPropTypes } from '../../common';
import { CustomChartPlotly } from './components/CustomChartPlotly';
-import { Input } from '@/lib/components/inputs';
-import { EntityPill } from '@/lib/components/pills/Pill';
-import { Button } from '@/lib/components/buttons';
-import { Vis1DVisHandle, Vis1DProps, getAttributeValues, vis1DHistogramAggregationOptions } from './model';
import { plotTypeOptions, preparePlotData } from './components/MakePlot';
+import { Vis1DProps, Vis1DVisHandle, getAttributeValues, vis1DHistogramAggregationOptions } from './model';
const defaultSettings: Vis1DProps = {
plotType: 'bar',
diff --git a/src/lib/vis/visualizations/vis1D/components/CustomChartPlotly.tsx b/src/lib/vis/visualizations/vis1D/components/CustomChartPlotly.tsx
index 28ab5bf1b..b1629956e 100644
--- a/src/lib/vis/visualizations/vis1D/components/CustomChartPlotly.tsx
+++ b/src/lib/vis/visualizations/vis1D/components/CustomChartPlotly.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
import Plot from 'react-plotly.js';
import { PreparePlot } from './MakePlot';
diff --git a/src/lib/vis/visualizations/vis1D/components/MakePlot.ts b/src/lib/vis/visualizations/vis1D/components/MakePlot.ts
index 6640edf24..e9ff20a42 100644
--- a/src/lib/vis/visualizations/vis1D/components/MakePlot.ts
+++ b/src/lib/vis/visualizations/vis1D/components/MakePlot.ts
@@ -1,4 +1,4 @@
-import { scaleQuantize, scaleOrdinal } from 'd3';
+import { scaleOrdinal, scaleQuantize } from 'd3';
import { PlotType } from 'plotly.js';
import { visualizationColors } from 'ts-common';
import { Vis1DHistogramAggregation, vis1DHistogramAggregationOptions } from '../model';
diff --git a/src/lib/vis/visualizations/vis1D/vis1D.stories.tsx b/src/lib/vis/visualizations/vis1D/vis1D.stories.tsx
index 89b0750dc..5421c3201 100644
--- a/src/lib/vis/visualizations/vis1D/vis1D.stories.tsx
+++ b/src/lib/vis/visualizations/vis1D/vis1D.stories.tsx
@@ -1,5 +1,5 @@
-import { Meta } from '@storybook/react';
import { configureStore } from '@reduxjs/toolkit';
+import { Meta } from '@storybook/react';
import { Provider } from 'react-redux';
import { graphQueryResultSlice, schemaSlice, visualizationSlice } from '../../../data-access/store';
import Vis1DComponent from './Vis1D';
diff --git a/src/main.tsx b/src/main.tsx
index 79a2d7f4c..c685661a5 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,12 +1,11 @@
-import React from 'react';
+import { ErrorBoundary } from '@/lib/components/errorBoundary';
+import { store } from '@/lib/data-access/store';
+import * as Sentry from '@sentry/react';
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
-import { App } from './App';
-import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import { Provider } from 'react-redux';
-import * as Sentry from '@sentry/react';
-import { store } from '@/lib/data-access/store';
-import { ErrorBoundary } from '@/lib/components/errorBoundary';
+import { Route, BrowserRouter as Router, Routes } from 'react-router-dom';
+import { App } from './App';
import { getEnvVariable } from './config';
import './main.css';
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 7c5761011..61afc4e1c 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,14 +1,13 @@
-import type { Config } from 'tailwindcss';
-import * as defaultTheme from 'tailwindcss/defaultTheme';
+import { addDynamicIconSelectors } from '@iconify/tailwind';
import typography from '@tailwindcss/typography';
import daisyui from 'daisyui';
import daisyTheme from 'daisyui/src/theming/themes';
+import * as defaultTheme from 'tailwindcss/defaultTheme';
import { tailwindColors } from './src/config/colors';
-import { addDynamicIconSelectors } from '@iconify/tailwind';
export default {
content: ['./index.html', 'src/**/*.{js,ts,jsx,tsx,mdx}', '../../libs/*/lib/**/*.{js,ts,jsx,tsx,mdx}'],
- darkMode: ['class', '.dark-mode'], // setting the dark mode class is important for the dark mode to work
+ darkMode: ['class', '.dark-mode'], // setting the dark mode class is important for the dark mode to work
theme: {
borderRadius: {
none: 0,
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 2ef1d8e46..a783d5002 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -19,8 +19,8 @@
/* Linting */
"strict": true,
- "noUnusedLocals": true,
- "noUnusedParameters": true,
+ "noUnusedLocals": false,
+ "noUnusedParameters": false,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true,
diff --git a/tsconfig.node.json b/tsconfig.node.json
index 687368ad1..f3cae258e 100644
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -15,8 +15,8 @@
/* Linting */
"strict": true,
- "noUnusedLocals": true,
- "noUnusedParameters": true,
+ "noUnusedLocals": false,
+ "noUnusedParameters": false,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true,
diff --git a/vitest.config.js b/vitest.config.js
index 79286a985..2b0e1b5ed 100644
--- a/vitest.config.js
+++ b/vitest.config.js
@@ -1,5 +1,5 @@
-import { configDefaults, defineConfig } from 'vitest/config';
import path from 'path';
+import { configDefaults, defineConfig } from 'vitest/config';
export default defineConfig({
test: {
--
GitLab