From d3cc3c4296f94126be84e30951120bb0cde1ff02 Mon Sep 17 00:00:00 2001
From: 2427021 <s.a.vink@students.uu.nl>
Date: Mon, 25 Mar 2024 12:04:16 +0100
Subject: [PATCH] feat(visManager): standardize settings
---
.../lib/components/color-mode/index.tsx | 2 +-
.../lib/components/configuration/index.tsx | 24 +++++++++++++++++++
.../shared/lib/components/dropdowns/index.tsx | 5 +++-
libs/shared/lib/components/inputs/index.tsx | 14 ++++++++++-
libs/shared/lib/info/settings.tsx | 14 ++++++-----
libs/shared/lib/vis/manager.tsx | 2 ++
.../visualizations/matrixvis/matrixvis.tsx | 6 +++--
.../nodelinkvis/nodelinkvis.tsx | 6 +++--
.../vis/visualizations/paohvis/paohvis.tsx | 7 +++++-
.../visualizations/rawjsonvis/rawjsonvis.tsx | 7 +++++-
.../vis/visualizations/tablevis/tablevis.tsx | 6 +++--
11 files changed, 76 insertions(+), 17 deletions(-)
create mode 100644 libs/shared/lib/components/configuration/index.tsx
diff --git a/libs/shared/lib/components/color-mode/index.tsx b/libs/shared/lib/components/color-mode/index.tsx
index 97abb3e04..24a32b5b3 100644
--- a/libs/shared/lib/components/color-mode/index.tsx
+++ b/libs/shared/lib/components/color-mode/index.tsx
@@ -47,7 +47,7 @@ const ColorMode = () => {
<TooltipTrigger asChild>
<Button variant="ghost" iconComponent={iconComponent} onClick={toggleTheme} />
</TooltipTrigger>
- <TooltipContent side={'bottom'}>
+ <TooltipContent side={'right'}>
<p>{`Switch to ${theme === 'dark-mode' ? 'light' : 'dark'}-mode`}</p>
</TooltipContent>
</Tooltip>
diff --git a/libs/shared/lib/components/configuration/index.tsx b/libs/shared/lib/components/configuration/index.tsx
new file mode 100644
index 000000000..736cf3167
--- /dev/null
+++ b/libs/shared/lib/components/configuration/index.tsx
@@ -0,0 +1,24 @@
+import React, { ReactNode } from 'react';
+
+type SettingsContainerProps = {
+ children: ReactNode;
+};
+
+export function SettingsContainer({ children }: SettingsContainerProps) {
+ return <div className="p-4">{children}</div>;
+}
+
+type SettingsHeaderProps = {
+ name: string;
+ icon?: ReactNode;
+ onClickIcon?: () => void;
+};
+
+export function SettingsHeader({ name, icon, onClickIcon }: SettingsHeaderProps) {
+ return (
+ <div className="flex justify-between items-center">
+ <span className="text-xs font-bold">{name}</span>
+ {icon && icon}
+ </div>
+ );
+}
diff --git a/libs/shared/lib/components/dropdowns/index.tsx b/libs/shared/lib/components/dropdowns/index.tsx
index 658d30e4b..2d840e6d3 100644
--- a/libs/shared/lib/components/dropdowns/index.tsx
+++ b/libs/shared/lib/components/dropdowns/index.tsx
@@ -26,10 +26,13 @@ type DropdownButtonProps = {
};
export function DropdownButton({ title, onClick, size, disabled }: DropdownButtonProps) {
+ const paddingClass = size === 'xs' ? 'py-1' : size === 'sm' ? 'px-1 py-1' : size === 'md' ? 'px-2 py-1' : 'px-4 py-2';
+ const textSizeClass = size === 'xs' ? 'text-xs' : size === 'sm' ? 'text-sm' : size === 'md' ? 'text-base' : 'text-lg';
+
return (
<>
<button
- className="inline-flex w-full justify-between items-center gap-x-1.5 rounded bg-light px-3 py-2 text-secondary-900 shadow-sm ring-1 ring-inset ring-secondary-300 hover:bg-secondary-50 disabled:bg-secondary-100 disabled:cursor-not-allowed disabled:text-secondary-400"
+ className={`inline-flex w-full justify-between items-center gap-x-1.5 rounded bg-light ${textSizeClass} ${paddingClass} text-secondary-900 shadow-sm ring-1 ring-inset ring-secondary-300 hover:bg-secondary-50 disabled:bg-secondary-100 disabled:cursor-not-allowed disabled:text-secondary-400`}
onClick={onClick}
disabled={disabled}
>
diff --git a/libs/shared/lib/components/inputs/index.tsx b/libs/shared/lib/components/inputs/index.tsx
index e52a53dd7..abb4bd547 100644
--- a/libs/shared/lib/components/inputs/index.tsx
+++ b/libs/shared/lib/components/inputs/index.tsx
@@ -63,6 +63,7 @@ type DropdownProps = {
value: string | number | undefined;
type: 'dropdown';
options: any;
+ size?: 'xs' | 'sm' | 'md' | 'xl';
tooltip?: string;
onChange?: (value: string | number) => void;
required?: boolean;
@@ -242,7 +243,17 @@ export const BooleanInput = ({ label, value, onChange, tooltip }: BooleanProps)
);
};
-export const DropDownInput = ({ label, value, options, onChange, required = false, tooltip, disabled = false, info }: DropdownProps) => {
+export const DropDownInput = ({
+ label,
+ value,
+ options,
+ onChange,
+ required = false,
+ tooltip,
+ size = 'sm',
+ disabled = false,
+ info,
+}: DropdownProps) => {
const dropdownRef = React.useRef<HTMLDivElement>(null);
const [isDropdownOpen, setIsDropdownOpen] = React.useState<boolean>(false);
@@ -273,6 +284,7 @@ export const DropDownInput = ({ label, value, options, onChange, required = fals
<DropdownContainer className="w-full" ref={dropdownRef}>
<DropdownButton
title={value}
+ size={size}
disabled={disabled}
onClick={(e) => {
e.stopPropagation();
diff --git a/libs/shared/lib/info/settings.tsx b/libs/shared/lib/info/settings.tsx
index 02122089c..999092997 100644
--- a/libs/shared/lib/info/settings.tsx
+++ b/libs/shared/lib/info/settings.tsx
@@ -7,8 +7,8 @@ type Props = {};
export default function Settings({ manager }: { manager: any }) {
return (
- <div>
- <div className="border-b border-secondary-200">
+ <div className="">
+ <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
@@ -21,13 +21,15 @@ export default function Settings({ manager }: { manager: any }) {
}}
/>
</div>
- <div className="flex justify-between items-center px-4 py-4">
+ <div className="flex justify-between items-center px-4 py-1">
<span className="text-xs font-normal">Type</span>
- <Input type="dropdown" />
+ <div className="w-36">
+ <Input type="dropdown" size="xs" options={[]} value={manager.activeType} onChange={() => {}} />
+ </div>
</div>
- <div className="flex justify-between items-center px-4 py-4">
+ <div className="flex justify-between items-center px-4 py-1">
<span className="text-xs font-normal">Name</span>
- <Input type="text" />
+ <input type="text" className="border rouded w-36" value={manager.active} onChange={() => {}} />
</div>
</div>
{manager.renderSettings()}
diff --git a/libs/shared/lib/vis/manager.tsx b/libs/shared/lib/vis/manager.tsx
index c69ca19d1..f3624bc30 100644
--- a/libs/shared/lib/vis/manager.tsx
+++ b/libs/shared/lib/vis/manager.tsx
@@ -36,6 +36,7 @@ export const useVisualizationManager = () => {
const [visualization, setVisualization] = useState<VISComponentType>();
const [hoverItem, setHoverItem] = useState<any>();
const [selected, setSelected] = useState<any>();
+ const activeType = visualizations[active]?.displayName;
const firstRender = !active && !session.currentSaveState;
const tabs = Object.keys(visualizations).length ? Object.keys(visualizations) : INITIAL_VISUALIZATIONS;
@@ -135,6 +136,7 @@ export const useVisualizationManager = () => {
renderComponent,
renderSettings,
active,
+ activeType,
tabs,
changeActive,
reorderVisualizations,
diff --git a/libs/shared/lib/vis/visualizations/matrixvis/matrixvis.tsx b/libs/shared/lib/vis/visualizations/matrixvis/matrixvis.tsx
index 86c3877bb..b0954e8aa 100644
--- a/libs/shared/lib/vis/visualizations/matrixvis/matrixvis.tsx
+++ b/libs/shared/lib/vis/visualizations/matrixvis/matrixvis.tsx
@@ -6,6 +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';
export interface MatrixVisProps {
marks: string;
@@ -46,7 +47,8 @@ const MatrixSettings = ({
updateSettings: (val: any) => void;
}) => {
return (
- <div>
+ <SettingsContainer>
+ <SettingsHeader name="JSON visualization" />
<Input
type="dropdown"
label="Configure marks"
@@ -54,7 +56,7 @@ const MatrixSettings = ({
options={['rect', 'circle']}
onChange={(val) => updateSettings({ marks: val })}
/>
- </div>
+ </SettingsContainer>
);
};
diff --git a/libs/shared/lib/vis/visualizations/nodelinkvis/nodelinkvis.tsx b/libs/shared/lib/vis/visualizations/nodelinkvis/nodelinkvis.tsx
index 8d1d36db2..1788afec5 100644
--- a/libs/shared/lib/vis/visualizations/nodelinkvis/nodelinkvis.tsx
+++ b/libs/shared/lib/vis/visualizations/nodelinkvis/nodelinkvis.tsx
@@ -7,6 +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';
export interface NodelinkVisProps {
layout: string;
@@ -92,7 +93,8 @@ const NodelinkSettings = ({
updateSettings: (val: any) => void;
}) => {
return (
- <div>
+ <SettingsContainer>
+ <SettingsHeader name="NodeLink visualization" />
<Input
type="dropdown"
label="Layout"
@@ -106,7 +108,7 @@ const NodelinkSettings = ({
value={configuration.showPopUpOnHover}
onChange={(val) => updateSettings({ showPopUpOnHover: val })}
/>
- </div>
+ </SettingsContainer>
);
};
diff --git a/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx b/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx
index d18c548ce..ba55bee18 100644
--- a/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx
+++ b/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx
@@ -29,6 +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';
type PaohvisViewModelState = {
rowHeight: number;
@@ -654,7 +655,11 @@ const PaohSettings = ({
graph: GraphMetaData;
updateSettings: (val: any) => void;
}) => {
- return <div>To be implemented</div>;
+ return (
+ <SettingsContainer>
+ <SettingsHeader name="Paoh visualization" />
+ </SettingsContainer>
+ );
};
export const PaohVisComponent: VISComponentType = {
diff --git a/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.tsx b/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.tsx
index 29d370bb7..8009c5ffd 100644
--- a/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.tsx
+++ b/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.tsx
@@ -2,6 +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';
export interface RawJSONVisProps {}
@@ -34,7 +35,11 @@ const RawJSONSettings = ({
graph: GraphMetaData;
updateSettings: (val: any) => void;
}) => {
- return <div>To be implemented</div>;
+ return (
+ <SettingsContainer>
+ <SettingsHeader name="JSON visualization" />
+ </SettingsContainer>
+ );
};
export const RawJSONComponent: VISComponentType = {
diff --git a/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx b/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx
index d740b4a7a..4aa2c453f 100644
--- a/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx
+++ b/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx
@@ -4,6 +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';
export type TableProps = {
showBarplot: boolean;
@@ -53,7 +54,8 @@ const TableSettings = ({
updateSettings: (val: any) => void;
}) => {
return (
- <div>
+ <SettingsContainer>
+ <SettingsHeader name="Table visualization" />
<Input
type="dropdown"
label="Items per page"
@@ -67,7 +69,7 @@ const TableSettings = ({
value={configuration.showBarplot}
onChange={(val) => updateSettings({ showBarplot: val })}
/>
- </div>
+ </SettingsContainer>
);
};
--
GitLab