From 417079299f5f9b075d56ca4d504745bce3f9ae11 Mon Sep 17 00:00:00 2001
From: 2427021 <s.a.vink@students.uu.nl>
Date: Wed, 27 Mar 2024 11:50:49 +0100
Subject: [PATCH] feat(visManager): settings components
---
apps/web/src/app/app.tsx | 2 +-
.../configuration/components.tsx} | 0
libs/shared/lib/vis/configuration/index.tsx | 43 +------------------
libs/shared/lib/vis/configuration/panel.tsx | 41 ++++++++++++++++++
.../visualizations/matrixvis/matrixvis.tsx | 4 +-
.../nodelinkvis/nodelinkvis.tsx | 2 +-
.../vis/visualizations/paohvis/paohvis.tsx | 2 +-
.../visualizations/rawjsonvis/rawjsonvis.tsx | 2 +-
.../vis/visualizations/tablevis/tablevis.tsx | 2 +-
9 files changed, 50 insertions(+), 48 deletions(-)
rename libs/shared/lib/{components/configuration/index.tsx => vis/configuration/components.tsx} (100%)
create mode 100644 libs/shared/lib/vis/configuration/panel.tsx
diff --git a/apps/web/src/app/app.tsx b/apps/web/src/app/app.tsx
index 9496ca0ec..1cd6e4a66 100644
--- a/apps/web/src/app/app.tsx
+++ b/apps/web/src/app/app.tsx
@@ -21,7 +21,7 @@ import { VisualizationPanel } from '@graphpolaris/shared/lib/vis';
import { QueryBuilder } from '@graphpolaris/shared/lib/querybuilder';
import DataViewer from '@graphpolaris/shared/lib/data-viewer';
import { useVisualizationManager } from '@graphpolaris/shared/lib/vis/manager';
-import ConfigPanel from '@graphpolaris/shared/lib/vis/configuration';
+import { ConfigPanel } from '@graphpolaris/shared/lib/vis/configuration';
// const Schema = React.lazy(() => import('@graphpolaris/shared/lib/schema/panel'));
// const VisualizationPanel = React.lazy(() => import('@graphpolaris/shared/lib/vis'));
// const QueryBuilder = React.lazy(() => import('@graphpolaris/shared/lib/querybuilder'));
diff --git a/libs/shared/lib/components/configuration/index.tsx b/libs/shared/lib/vis/configuration/components.tsx
similarity index 100%
rename from libs/shared/lib/components/configuration/index.tsx
rename to libs/shared/lib/vis/configuration/components.tsx
diff --git a/libs/shared/lib/vis/configuration/index.tsx b/libs/shared/lib/vis/configuration/index.tsx
index 77bd7d2c9..2f98579c7 100644
--- a/libs/shared/lib/vis/configuration/index.tsx
+++ b/libs/shared/lib/vis/configuration/index.tsx
@@ -1,41 +1,2 @@
-import React from 'react';
-import { Button } from '../../components';
-import { Delete } from '@mui/icons-material';
-import Input from '../../components/inputs';
-import { VISUALIZATION_TYPES, VisualizationManager } from '../manager';
-
-type Props = {
- manager: VisualizationManager;
-};
-
-export default function ConfigPanel({ manager }: Props) {
- return (
- <div className="w-full h-full flex flex-col border">
- <div className="border-b border-secondary-200 py-2">
- <div className="flex justify-between items-center px-4 py-2">
- <span className="text-xs font-bold">Visualisation</span>
- <Button
- type="secondary"
- variant="ghost"
- size="xs"
- iconComponent={<Delete />}
- onClick={() => {
- if (manager.active) manager.deleteVisualization(manager.active);
- }}
- />
- </div>
- <div className="flex justify-between items-center px-4 py-1">
- <span className="text-xs font-normal">Type</span>
- <div className="w-36">
- <Input type="dropdown" size="xs" options={VISUALIZATION_TYPES} value={manager.active} onChange={() => {}} />
- </div>
- </div>
- <div className="flex justify-between items-center px-4 py-1">
- <span className="text-xs font-normal">Name</span>
- <input type="text" className="border rouded w-36" value={manager.active} onChange={() => {}} />
- </div>
- </div>
- {manager.active && <div className="border-b border-secondary-200 py-2">{manager.renderSettings()}</div>}
- </div>
- );
-}
+export { ConfigPanel } from './panel';
+export { SettingsContainer, SettingsHeader } from './components';
diff --git a/libs/shared/lib/vis/configuration/panel.tsx b/libs/shared/lib/vis/configuration/panel.tsx
new file mode 100644
index 000000000..fafdef91c
--- /dev/null
+++ b/libs/shared/lib/vis/configuration/panel.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { Button } from '../../components';
+import { Delete } from '@mui/icons-material';
+import Input from '../../components/inputs';
+import { VISUALIZATION_TYPES, VisualizationManager } from '../manager';
+
+type Props = {
+ manager: VisualizationManager;
+};
+
+export function ConfigPanel({ manager }: Props) {
+ return (
+ <div className="w-full h-full flex flex-col border">
+ <div className="border-b border-secondary-200 py-2">
+ <div className="flex justify-between items-center px-4 py-2">
+ <span className="text-xs font-bold">Visualisation</span>
+ <Button
+ type="secondary"
+ variant="ghost"
+ size="xs"
+ iconComponent={<Delete />}
+ onClick={() => {
+ if (manager.active) manager.deleteVisualization(manager.active);
+ }}
+ />
+ </div>
+ <div className="flex justify-between items-center px-4 py-1">
+ <span className="text-xs font-normal">Type</span>
+ <div className="w-36">
+ <Input type="dropdown" size="xs" options={VISUALIZATION_TYPES} value={manager.active} onChange={() => {}} />
+ </div>
+ </div>
+ <div className="flex justify-between items-center px-4 py-1">
+ <span className="text-xs font-normal">Name</span>
+ <input type="text" className="border rouded w-36" value={manager.active} onChange={() => {}} />
+ </div>
+ </div>
+ {manager.active && <div className="border-b border-secondary-200 py-2">{manager.renderSettings()}</div>}
+ </div>
+ );
+}
diff --git a/libs/shared/lib/vis/visualizations/matrixvis/matrixvis.tsx b/libs/shared/lib/vis/visualizations/matrixvis/matrixvis.tsx
index b0954e8aa..0491f9a81 100644
--- a/libs/shared/lib/vis/visualizations/matrixvis/matrixvis.tsx
+++ b/libs/shared/lib/vis/visualizations/matrixvis/matrixvis.tsx
@@ -6,7 +6,7 @@ import { MatrixPixi } from './components/MatrixPixi';
import { VisualizationPropTypes, VISComponentType } from '../../types';
import Input from '@graphpolaris/shared/lib/components/inputs';
import { GraphMetaData } from '@graphpolaris/shared/lib/data-access/statistics';
-import { SettingsContainer, SettingsHeader } from '@graphpolaris/shared/lib/components/configuration';
+import { SettingsContainer, SettingsHeader } from '@graphpolaris/shared/lib/vis/configuration';
export interface MatrixVisProps {
marks: string;
@@ -48,7 +48,7 @@ const MatrixSettings = ({
}) => {
return (
<SettingsContainer>
- <SettingsHeader name="JSON visualization" />
+ <SettingsHeader name="Matrix visualization" />
<Input
type="dropdown"
label="Configure marks"
diff --git a/libs/shared/lib/vis/visualizations/nodelinkvis/nodelinkvis.tsx b/libs/shared/lib/vis/visualizations/nodelinkvis/nodelinkvis.tsx
index 1788afec5..1a019a0e6 100644
--- a/libs/shared/lib/vis/visualizations/nodelinkvis/nodelinkvis.tsx
+++ b/libs/shared/lib/vis/visualizations/nodelinkvis/nodelinkvis.tsx
@@ -7,7 +7,7 @@ import { ML, setShortestPathSource, setShortestPathTarget } from '../../../data-
import { VisualizationPropTypes, VISComponentType } from '../../types';
import Input from '@graphpolaris/shared/lib/components/inputs';
import { GraphMetaData } from '@graphpolaris/shared/lib/data-access/statistics';
-import { SettingsContainer, SettingsHeader } from '@graphpolaris/shared/lib/components/configuration';
+import { SettingsContainer, SettingsHeader } from '@graphpolaris/shared/lib/vis/configuration';
export interface NodelinkVisProps {
layout: string;
diff --git a/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx b/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx
index ba55bee18..c3a04c380 100644
--- a/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx
+++ b/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx
@@ -29,7 +29,7 @@ import MakePaohvisMenu from './components/MakePaohvisMenu';
import { RowLabelColumn } from './components/RowLabelColumn';
import { VISComponentType, VisualizationPropTypes } from '../../types';
import { GraphMetaData } from '@graphpolaris/shared/lib/data-access/statistics';
-import { SettingsContainer, SettingsHeader } from '@graphpolaris/shared/lib/components/configuration';
+import { SettingsContainer, SettingsHeader } from '@graphpolaris/shared/lib/vis/configuration';
type PaohvisViewModelState = {
rowHeight: number;
diff --git a/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.tsx b/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.tsx
index 8009c5ffd..4bb5a18dc 100644
--- a/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.tsx
+++ b/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.tsx
@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
import ReactJSONView from 'react-json-view';
import { VisualizationPropTypes, VISComponentType } from '../../types';
import { GraphMetaData } from '@graphpolaris/shared/lib/data-access/statistics';
-import { SettingsContainer, SettingsHeader } from '@graphpolaris/shared/lib/components/configuration';
+import { SettingsContainer, SettingsHeader } from '@graphpolaris/shared/lib/vis/configuration';
export interface RawJSONVisProps {}
diff --git a/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx b/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx
index 4aa2c453f..75de93f52 100644
--- a/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx
+++ b/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx
@@ -4,7 +4,7 @@ import { SchemaAttribute } from '../../../schema';
import { VisualizationPropTypes, VISComponentType } from '../../types';
import Input from '@graphpolaris/shared/lib/components/inputs';
import { GraphMetaData } from '@graphpolaris/shared/lib/data-access/statistics';
-import { SettingsContainer, SettingsHeader } from '@graphpolaris/shared/lib/components/configuration';
+import { SettingsContainer, SettingsHeader } from '@graphpolaris/shared/lib/vis/configuration';
export type TableProps = {
showBarplot: boolean;
--
GitLab