diff --git a/libs/shared/lib/querybuilder/panel/QueryBuilderNav.tsx b/libs/shared/lib/querybuilder/panel/QueryBuilderNav.tsx index f3110d640b8b1ef6fe5550ee03733cdc6534b806..db562e1b66a0a59bffbbf38f8982ae8c81e0d241 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>