From c8e05568fc617983c4c65a08ed99d33cd40a72cf Mon Sep 17 00:00:00 2001
From: 2427021 <s.a.vink@students.uu.nl>
Date: Wed, 27 Mar 2024 12:56:37 +0100
Subject: [PATCH] feat(visManager): db info
---
libs/shared/lib/components/Dialog.tsx | 4 +-
.../panel/querysidepanel/queryMLDialog.tsx | 66 ++++++++---------
.../customFlowPills/entitypill/entitypill.tsx | 2 +-
.../lib/vis/configuration/components.tsx | 2 +-
libs/shared/lib/vis/configuration/panel.tsx | 70 +++++++++++++------
.../visualizations/matrixvis/matrixvis.tsx | 1 -
.../nodelinkvis/nodelinkvis.tsx | 1 -
.../vis/visualizations/paohvis/paohvis.tsx | 6 +-
.../visualizations/rawjsonvis/rawjsonvis.tsx | 6 +-
.../vis/visualizations/tablevis/tablevis.tsx | 1 -
10 files changed, 82 insertions(+), 77 deletions(-)
diff --git a/libs/shared/lib/components/Dialog.tsx b/libs/shared/lib/components/Dialog.tsx
index bec6280cd..c0eec2797 100644
--- a/libs/shared/lib/components/Dialog.tsx
+++ b/libs/shared/lib/components/Dialog.tsx
@@ -16,8 +16,8 @@ export const Dialog = (props: DialogProps) => {
}, [props.open]);
return (
- <dialog className={"modal"} ref={ref} onClose={() => props.onClose()}>
- <form method="dialog" className={"modal-box card flex gap-4 " + (props?.className ? props?.className : "")}>
+ <dialog data-modal className={'modal'} ref={ref} onClose={() => props.onClose()}>
+ <form method="dialog" className={'modal-box card flex gap-4 ' + (props?.className ? props?.className : '')}>
{props.children}
</form>
<form method="dialog" className="modal-backdrop">
diff --git a/libs/shared/lib/querybuilder/panel/querysidepanel/queryMLDialog.tsx b/libs/shared/lib/querybuilder/panel/querysidepanel/queryMLDialog.tsx
index a7a98076e..496e89e0b 100644
--- a/libs/shared/lib/querybuilder/panel/querysidepanel/queryMLDialog.tsx
+++ b/libs/shared/lib/querybuilder/panel/querysidepanel/queryMLDialog.tsx
@@ -8,6 +8,7 @@ import {
setShortestPathEnabled,
} from '@graphpolaris/shared/lib/data-access/store/mlSlice';
import { FormDiv, FormCard, FormBody, FormTitle, FormHBar } from '@graphpolaris/shared/lib/components/forms';
+import Input from '@graphpolaris/shared/lib/components/inputs';
type QueryMLDialogProps = DialogProps;
@@ -28,27 +29,22 @@ export const QueryMLDialog = React.forwardRef<HTMLDivElement, QueryMLDialogProps
<FormTitle title="Machine Learning Options" onClose={props.onClose} />
<FormHBar />
- <div className="form-control px-5">
- <label className="label cursor-pointer gap-2 w-fit">
- <input
- type="checkbox"
- checked={ml.linkPrediction.enabled}
- className="checkbox checkbox-sm"
- onChange={(e) => dispatch(setLinkPredictionEnabled(e.target.checked))}
- />
- <span className="label-text">Link Prediction</span>
- </label>
+ <div className="px-5">
+ <Input
+ type="boolean"
+ label="Link Prediction"
+ value={ml.linkPrediction.enabled}
+ onChange={() => dispatch(setLinkPredictionEnabled(!ml.linkPrediction.enabled))}
+ />
{ml.linkPrediction.enabled && ml.linkPrediction.result && <span># of predictions: {ml.linkPrediction.result.length}</span>}
{ml.linkPrediction.enabled && !ml.linkPrediction.result && <span>Loading...</span>}
- <label className="label cursor-pointer gap-2 w-fit">
- <input
- type="checkbox"
- checked={ml.centrality.enabled}
- className="checkbox checkbox-sm"
- onChange={(e) => dispatch(setCentralityEnabled(e.target.checked))}
- />
- <span className="label-text">Centrality</span>
- </label>
+
+ <Input
+ type="boolean"
+ label="Centrality"
+ value={ml.centrality.enabled}
+ onChange={() => dispatch(setCentralityEnabled(!ml.centrality.enabled))}
+ />
{ml.centrality.enabled && Object.values(ml.centrality.result).length > 0 && (
<span>
sum of centers:
@@ -58,28 +54,24 @@ export const QueryMLDialog = React.forwardRef<HTMLDivElement, QueryMLDialogProps
</span>
)}
{ml.centrality.enabled && Object.values(ml.centrality.result).length === 0 && <span>No Centers Found</span>}
- <label className="label cursor-pointer gap-2 w-fit">
- <input
- type="checkbox"
- checked={ml.communityDetection.enabled}
- className="checkbox checkbox-sm"
- onChange={(e) => dispatch(setCommunityDetectionEnabled(e.target.checked))}
- />
- <span className="label-text">Community Detection</span>
- </label>
+
+ <Input
+ type="boolean"
+ label="Community detection"
+ value={ml.communityDetection.enabled}
+ onChange={() => dispatch(setCommunityDetectionEnabled(!ml.communityDetection.enabled))}
+ />
{ml.communityDetection.enabled && ml.communityDetection.result && (
<span># of communities: {ml.communityDetection.result.length}</span>
)}
{ml.communityDetection.enabled && !ml.communityDetection.result && <span>Loading...</span>}
- <label className="label cursor-pointer gap-2 w-fit">
- <input
- type="checkbox"
- checked={ml.shortestPath.enabled}
- className="checkbox checkbox-sm"
- onChange={(e) => dispatch(setShortestPathEnabled(e.target.checked))}
- />
- <span className="label-text">Shortest Path</span>
- </label>
+
+ <Input
+ type="boolean"
+ label="Shortest path"
+ value={ml.shortestPath.enabled}
+ onChange={() => dispatch(setShortestPathEnabled(!ml.shortestPath.enabled))}
+ />
{ml.shortestPath.enabled && ml.shortestPath.result?.length > 0 && <span># of hops: {ml.shortestPath.result.length}</span>}
{ml.shortestPath.enabled && !ml.shortestPath.srcNode && <span>Please select source node</span>}
{ml.shortestPath.enabled && ml.shortestPath.srcNode && !ml.shortestPath.trtNode && <span>Please select target node</span>}
diff --git a/libs/shared/lib/querybuilder/pills/customFlowPills/entitypill/entitypill.tsx b/libs/shared/lib/querybuilder/pills/customFlowPills/entitypill/entitypill.tsx
index d8f27749d..14d09c9c2 100644
--- a/libs/shared/lib/querybuilder/pills/customFlowPills/entitypill/entitypill.tsx
+++ b/libs/shared/lib/querybuilder/pills/customFlowPills/entitypill/entitypill.tsx
@@ -18,7 +18,7 @@ export const EntityFlowElement = React.memo((node: SchemaReactflowEntityNode) =>
const graph = useQuerybuilderGraph();
const attributeEdges = useMemo(
() => graph.edges.filter((edge) => edge.source === node.id && !!edge?.attributes?.sourceHandleData.attributeType),
- [graph]
+ [graph],
);
const [hovered, setHovered] = useState(false);
diff --git a/libs/shared/lib/vis/configuration/components.tsx b/libs/shared/lib/vis/configuration/components.tsx
index 736cf3167..842f508ce 100644
--- a/libs/shared/lib/vis/configuration/components.tsx
+++ b/libs/shared/lib/vis/configuration/components.tsx
@@ -5,7 +5,7 @@ type SettingsContainerProps = {
};
export function SettingsContainer({ children }: SettingsContainerProps) {
- return <div className="p-4">{children}</div>;
+ return <div className="">{children}</div>;
}
type SettingsHeaderProps = {
diff --git a/libs/shared/lib/vis/configuration/panel.tsx b/libs/shared/lib/vis/configuration/panel.tsx
index fafdef91c..fcb6ddba3 100644
--- a/libs/shared/lib/vis/configuration/panel.tsx
+++ b/libs/shared/lib/vis/configuration/panel.tsx
@@ -3,39 +3,63 @@ import { Button } from '../../components';
import { Delete } from '@mui/icons-material';
import Input from '../../components/inputs';
import { VISUALIZATION_TYPES, VisualizationManager } from '../manager';
+import { SettingsHeader } from './components';
+import { useSessionCache } from '../../data-access';
type Props = {
manager: VisualizationManager;
};
export function ConfigPanel({ manager }: Props) {
+ const session = useSessionCache();
+
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={() => {}} />
+ {manager.active ? (
+ <>
+ <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 p-4">
+ <SettingsHeader name="Configuration" />
+ {manager.renderSettings()}
+ </div>
+ )}
+ </>
+ ) : (
+ <div>
+ {session && session.currentSaveState && (
+ <div className="flex flex-col p-4 border-b border-secondary-200">
+ <span className="text-sm font-bold">Connection details</span>
+ <span className="text-xs">Database: {session.saveStates[session.currentSaveState].name}</span>
+ <span className="text-xs">Port: {session.saveStates[session.currentSaveState].db.port}</span>
+ <span className="text-xs">Protocol: {session.saveStates[session.currentSaveState].db.protocol}</span>
+ </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 0491f9a81..3177838b5 100644
--- a/libs/shared/lib/vis/visualizations/matrixvis/matrixvis.tsx
+++ b/libs/shared/lib/vis/visualizations/matrixvis/matrixvis.tsx
@@ -48,7 +48,6 @@ const MatrixSettings = ({
}) => {
return (
<SettingsContainer>
- <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 1a019a0e6..ea1fbb111 100644
--- a/libs/shared/lib/vis/visualizations/nodelinkvis/nodelinkvis.tsx
+++ b/libs/shared/lib/vis/visualizations/nodelinkvis/nodelinkvis.tsx
@@ -94,7 +94,6 @@ const NodelinkSettings = ({
}) => {
return (
<SettingsContainer>
- <SettingsHeader name="NodeLink visualization" />
<Input
type="dropdown"
label="Layout"
diff --git a/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx b/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx
index c3a04c380..cd8836da1 100644
--- a/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx
+++ b/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx
@@ -655,11 +655,7 @@ const PaohSettings = ({
graph: GraphMetaData;
updateSettings: (val: any) => void;
}) => {
- return (
- <SettingsContainer>
- <SettingsHeader name="Paoh visualization" />
- </SettingsContainer>
- );
+ return <SettingsContainer>To be implemented</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 4bb5a18dc..337db9620 100644
--- a/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.tsx
+++ b/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.tsx
@@ -35,11 +35,7 @@ const RawJSONSettings = ({
graph: GraphMetaData;
updateSettings: (val: any) => void;
}) => {
- return (
- <SettingsContainer>
- <SettingsHeader name="JSON visualization" />
- </SettingsContainer>
- );
+ return <SettingsContainer>To be implemented</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 75de93f52..710ee0ff0 100644
--- a/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx
+++ b/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx
@@ -55,7 +55,6 @@ const TableSettings = ({
}) => {
return (
<SettingsContainer>
- <SettingsHeader name="Table visualization" />
<Input
type="dropdown"
label="Items per page"
--
GitLab