From c601cf8016734adfbcbddd7eb3db52da10938f82 Mon Sep 17 00:00:00 2001
From: Milho001 <l.milhomemfrancochristino@uu.nl>
Date: Wed, 20 Sep 2023 16:13:06 +0000
Subject: [PATCH] chore(qb): fix ML dialog
---
.../lib/querybuilder/panel/querybuilder.tsx | 11 +--
.../querysidepanel/queryBuilderMLPanel.tsx | 80 ----------------
.../panel/querysidepanel/queryMLDialog.tsx | 93 +++++++++++++++++++
.../lib/vis/nodelink/components/NLPixi.tsx | 4 +-
4 files changed, 100 insertions(+), 88 deletions(-)
delete mode 100644 libs/shared/lib/querybuilder/panel/querysidepanel/queryBuilderMLPanel.tsx
create mode 100644 libs/shared/lib/querybuilder/panel/querysidepanel/queryMLDialog.tsx
diff --git a/libs/shared/lib/querybuilder/panel/querybuilder.tsx b/libs/shared/lib/querybuilder/panel/querybuilder.tsx
index c54b5bacc..694540acb 100644
--- a/libs/shared/lib/querybuilder/panel/querybuilder.tsx
+++ b/libs/shared/lib/querybuilder/panel/querybuilder.tsx
@@ -40,8 +40,7 @@ import LightbulbIcon from '@mui/icons-material/Lightbulb';
import CameraAltIcon from '@mui/icons-material/CameraAlt';
import { Dialog } from '../../components/Dialog';
import { QueryBuilderLogicPillsPanel } from './querysidepanel/queryBuilderLogicPillsPanel';
-import { QueryBuilderMLPanel } from './querysidepanel/queryBuilderMLPanel';
-import { Popup } from '../../components/Popup';
+import { QueryMLDialog } from './querysidepanel/queryMLDialog';
import { QuerySettingsDialog } from './querysidepanel/querySettingsDialog';
import { toSchemaGraphology } from '../../data-access/store/schemaSlice';
import { LayoutFactory } from '../../graph-layout';
@@ -401,11 +400,14 @@ export const QueryBuilderInner = (props: QueryBuilderProps) => {
}
}
- useEffect(() => { applyLayout() }, [queryBuilderSettings]);
+ useEffect(() => {
+ applyLayout();
+ }, [queryBuilderSettings]);
return (
<div ref={reactFlowWrapper} className="h-full w-full">
<QuerySettingsDialog open={toggleSettings === 'settings'} onClose={() => setToggleSettings(undefined)} />
+ <QueryMLDialog open={toggleSettings === 'ml'} onClose={() => setToggleSettings(undefined)} />
<Dialog
open={toggleSettings === 'logic'}
@@ -421,9 +423,6 @@ export const QueryBuilderInner = (props: QueryBuilderProps) => {
connection={connectingNodeId?.current}
/>
</Dialog>
- <Popup open={toggleSettings === 'ml'} hAnchor="right">
- <QueryBuilderMLPanel />
- </Popup>
<ReactFlow
edges={elements.edges}
nodes={elements.nodes}
diff --git a/libs/shared/lib/querybuilder/panel/querysidepanel/queryBuilderMLPanel.tsx b/libs/shared/lib/querybuilder/panel/querysidepanel/queryBuilderMLPanel.tsx
deleted file mode 100644
index 88290f2e2..000000000
--- a/libs/shared/lib/querybuilder/panel/querysidepanel/queryBuilderMLPanel.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { useAppDispatch, useML } from '@graphpolaris/shared/lib/data-access';
-import {
- setCentralityEnabled,
- setCommunityDetectionEnabled,
- setLinkPredictionEnabled,
- setShortestPathEnabled,
-} from '@graphpolaris/shared/lib/data-access/store/mlSlice';
-
-export const QueryBuilderMLPanel = () => {
- const dispatch = useAppDispatch();
- const ml = useML();
-
- return (
- <div className="card card-bordered w-max rounded-none p-0">
- <div className="card-body px-0 w-72 py-5">
- <div className="p-5 py-0 flex w-full">
- <h2>Machine Learning Options</h2>
- </div>
- <div className="divider m-0"></div>
-
- <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>
- {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>
- {ml.centrality.enabled && Object.values(ml.centrality.result).length > 0 && (
- <span>
- sum of centers:
- {Object.values(ml.centrality.result)
- .reduce((a, b) => b + a)
- .toFixed(2)}
- </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>
- {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>
- {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>}
- </div>
- </div>
- </div>
- );
-};
diff --git a/libs/shared/lib/querybuilder/panel/querysidepanel/queryMLDialog.tsx b/libs/shared/lib/querybuilder/panel/querysidepanel/queryMLDialog.tsx
new file mode 100644
index 000000000..a7a98076e
--- /dev/null
+++ b/libs/shared/lib/querybuilder/panel/querysidepanel/queryMLDialog.tsx
@@ -0,0 +1,93 @@
+import React from 'react';
+import { DialogProps } from '@graphpolaris/shared/lib/components/Dialog';
+import { useAppDispatch, useML } from '@graphpolaris/shared/lib/data-access';
+import {
+ setCentralityEnabled,
+ setCommunityDetectionEnabled,
+ setLinkPredictionEnabled,
+ setShortestPathEnabled,
+} from '@graphpolaris/shared/lib/data-access/store/mlSlice';
+import { FormDiv, FormCard, FormBody, FormTitle, FormHBar } from '@graphpolaris/shared/lib/components/forms';
+
+type QueryMLDialogProps = DialogProps;
+
+export const QueryMLDialog = React.forwardRef<HTMLDivElement, QueryMLDialogProps>((props, ref) => {
+ const dispatch = useAppDispatch();
+ const ml = useML();
+
+ return (
+ <>
+ {props.open && (
+ <FormDiv ref={ref} className="" hAnchor="right">
+ <FormCard>
+ <FormBody
+ onSubmit={(e) => {
+ e.preventDefault();
+ }}
+ >
+ <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>
+ {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>
+ {ml.centrality.enabled && Object.values(ml.centrality.result).length > 0 && (
+ <span>
+ sum of centers:
+ {Object.values(ml.centrality.result)
+ .reduce((a, b) => b + a)
+ .toFixed(2)}
+ </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>
+ {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>
+ {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>}
+ </div>
+ </FormBody>
+ </FormCard>
+ </FormDiv>
+ )}
+ </>
+ );
+});
diff --git a/libs/shared/lib/vis/nodelink/components/NLPixi.tsx b/libs/shared/lib/vis/nodelink/components/NLPixi.tsx
index 66cb2324d..5c1f98bda 100644
--- a/libs/shared/lib/vis/nodelink/components/NLPixi.tsx
+++ b/libs/shared/lib/vis/nodelink/components/NLPixi.tsx
@@ -77,8 +77,8 @@ export const NLPixi = (props: Props) => {
onDragEnd() {
if (dragging.current) {
- dragging.current.node.fx = null;
- dragging.current.node.fy = null;
+ // dragging.current.node.fx = null;
+ // dragging.current.node.fy = null;
if (viewport.current) viewport.current.pause = false;
if (onlyClicked.current) {
onlyClicked.current = false;
--
GitLab