diff --git a/libs/shared/lib/components/Dialog.tsx b/libs/shared/lib/components/Dialog.tsx
index bec6280cd5674986742a30ca014dcc77ff907aa8..c0eec27978d07ff68002a146da2965b97112a7bd 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 a7a98076eeea80d7b6a63e8c81021f1e6da542af..496e89e0bf71cb748f0137c597a7fe061b634554 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 d8f27749d5766c7ce569a507f0fd7d56dc3c952c..14d09c9c2094fbf15d6096f69986234bd9ccd275 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 736cf3167538101f08a4ce1192c2fc12226bc4a6..842f508ceeb6fda641ffba2f0e49861c044bb177 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 fafdef91c58329bbf9aa57d1ad39ec0390f6e8a4..fcb6ddba35b52cfc2e6ffa9ebe3f9ca3388bf0c5 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 0491f9a81323402e779f9c795836f5218cf13400..3177838b5f733e6a9160989b39b7758e20afacd6 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 1a019a0e66d61929412fefc94f5d0e8a152f9c2f..ea1fbb11153679f2cc157135ed75562c1c6bcf68 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 c3a04c3807301958a0e1255af90691556e425bb6..cd8836da14eb327b65cf7bf2e35aa8849555fdfa 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 4bb5a18dc7a25178570590610a74cb079240aaa3..337db9620e24315f1ca1291319dcb65c671ddbc4 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 75de93f5251f884ddb255d1d000bbe06daf6f113..710ee0ff0a6a7f13142a2e5475061465c02bc281 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"