feat(mlResults): added indication for ML results to QB

libs/shared/lib/querybuilder/panel/QueryBuilderNav.tsx

 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 ? 'danger' : 'secondary'}
+                      variant="ghost"
+                      size="xs"
+                      iconComponent="icon-[ic--baseline-lightbulb]"
+                      className={mlEnabled ? 'border-danger-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>

libs/shared/lib/querybuilder/panel/querysidepanel/QueryMLDialog.tsx

@@ -31,8 +31,6 @@ export const QueryMLDialog = () => {
               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>}
 
             <Input
               type="boolean"
@@ -40,15 +38,6 @@ export const QueryMLDialog = () => {
               value={ml.centrality.enabled}
               onChange={() => dispatch(setCentralityEnabled(!ml.centrality.enabled))}
             />
-            {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>}
 
             <Input
               type="boolean"
@@ -56,10 +45,6 @@ export const QueryMLDialog = () => {
               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>}
 
             <Input
               type="boolean"
@@ -67,9 +52,6 @@ export const QueryMLDialog = () => {
               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>}
           </div>
         </FormBody>
       </FormCard>