From 5c7e7c935253122917f2ab9fb61a1adec283be45 Mon Sep 17 00:00:00 2001
From: "Vink, S.A. (Sjoerd)" <s.a.vink@uu.nl>
Date: Tue, 3 Sep 2024 17:15:34 +0000
Subject: [PATCH] feat(mlResults): added indication for ML results to QB
---
.../querybuilder/panel/QueryBuilderNav.tsx | 63 +++++++++++++++++--
1 file changed, 57 insertions(+), 6 deletions(-)
diff --git a/libs/shared/lib/querybuilder/panel/QueryBuilderNav.tsx b/libs/shared/lib/querybuilder/panel/QueryBuilderNav.tsx
index f3110d640..db562e1b6 100644
--- a/libs/shared/lib/querybuilder/panel/QueryBuilderNav.tsx
+++ b/libs/shared/lib/querybuilder/panel/QueryBuilderNav.tsx
@@ -1,7 +1,7 @@
import React, { useMemo, useState } from 'react';
import { ControlContainer, TooltipProvider, Tooltip, TooltipTrigger, Button, TooltipContent, Input } from '../../components';
import { Popover, PopoverTrigger, PopoverContent } from '../../components/layout/Popover';
-import { useAppDispatch, useGraphQueryResult, useQuerybuilderSettings, useSchemaStats } from '../../data-access';
+import { useAppDispatch, useGraphQueryResult, useML, useQuerybuilderSettings, useSchemaStats } from '../../data-access';
import { clearQB, QueryBuilderSettings, setQuerybuilderSettings } from '../../data-access/store/querybuilderSlice';
import { QueryMLDialog } from './querysidepanel/QueryMLDialog';
import { QuerySettings } from './querysidepanel/QuerySettings';
@@ -22,6 +22,7 @@ export const QueryBuilderNav = (props: QueryBuilderNavProps) => {
const qb = useQuerybuilderSettings();
const result = useGraphQueryResult();
const resultSize = useMemo(() => (result ? result.edges.length : 0), [result]);
+ const ml = useML();
/**
* Clears all nodes in the graph.
@@ -30,6 +31,8 @@ export const QueryBuilderNav = (props: QueryBuilderNavProps) => {
dispatch(clearQB());
}
+ const mlEnabled = ml.linkPrediction.enabled || ml.centrality.enabled || ml.communityDetection.enabled || ml.shortestPath.enabled;
+
return (
<div className="sticky shrink-0 top-0 flex items-stretch justify-between h-7 bg-secondary-100 border-b border-secondary-200 max-w-full">
<div className="flex items-center">
@@ -147,10 +150,58 @@ export const QueryBuilderNav = (props: QueryBuilderNavProps) => {
<PopoverTrigger>
<Tooltip>
<TooltipTrigger>
- <Button variantType="secondary" variant="ghost" size="xs" iconComponent="icon-[ic--baseline-lightbulb]" />
+ <Button
+ variantType={mlEnabled ? 'primary' : 'secondary'}
+ variant="ghost"
+ size="xs"
+ iconComponent="icon-[ic--baseline-lightbulb]"
+ className={mlEnabled ? 'border-primary-600' : ''}
+ />
</TooltipTrigger>
<TooltipContent disabled={props.toggleSettings === 'ml'}>
- <p>Machine learning</p>
+ {mlEnabled ? (
+ <>
+ <p className="font-bold text-base">Machine learning</p>
+ <p className="mb-2">Algorithms detected the following results:</p>
+
+ {ml.linkPrediction.enabled && ml.linkPrediction.result && (
+ <>
+ <p className="mt-2 font-semibold">Link prediction</p>
+ <p>{ml.linkPrediction.result.length} links</p>{' '}
+ </>
+ )}
+ {ml.centrality.enabled && Object.values(ml.centrality.result).length > 0 && (
+ <>
+ <p className="mt-2 font-semibold">Centrality</p>
+ <p>
+ {Object.values(ml.centrality.result)
+ .reduce((a, b) => b + a)
+ .toFixed(2)}{' '}
+ sum of centers
+ </p>
+ </>
+ )}
+ {ml.communityDetection.enabled && ml.communityDetection.result && (
+ <>
+ <p className="mt-2 font-semibold">Community detection</p>
+ <p>{ml.communityDetection.result.length} communities</p>
+ </>
+ )}
+ {ml.shortestPath.enabled && (
+ <>
+ <p className="mt-2 font-semibold">Shortest path</p>
+ {ml.shortestPath.result?.length > 0 && <p># of hops: {ml.shortestPath.result.length}</p>}
+ {!ml.shortestPath.srcNode ? (
+ <p>Please select source node</p>
+ ) : (
+ !ml.shortestPath.trtNode && <p>Please select target node</p>
+ )}
+ </>
+ )}
+ </>
+ ) : (
+ <p>Machine learning</p>
+ )}
</TooltipContent>
</Tooltip>
</PopoverTrigger>
@@ -177,18 +228,18 @@ export const QueryBuilderNav = (props: QueryBuilderNavProps) => {
<Tooltip>
<TooltipTrigger>
<Button
- variantType={qb.limit <= resultSize ? 'danger' : 'secondary'}
+ variantType={qb.limit <= resultSize ? 'primary' : 'secondary'}
variant="ghost"
size="xs"
iconComponent="icon-[ic--baseline-filter-alt]"
- className={qb.limit <= resultSize ? 'border-danger-600' : ''}
+ className={qb.limit <= resultSize ? 'border-primary-600' : ''}
/>
</TooltipTrigger>
<TooltipContent disabled={props.toggleSettings === 'ml'}>
<p className="font-bold text-base">Limit</p>
<p>Limits the number of edges retrieved from the database.</p>
<p>Required to manage performance.</p>
- <p className={`font-semibold${qb.limit <= resultSize ? ' text-danger-800' : ''}`}>
+ <p className={`font-semibold${qb.limit <= resultSize ? ' text-primary-800' : ''}`}>
Fetched {resultSize} of a maximum of {qb.limit} edges
</p>
</TooltipContent>
--
GitLab