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 ? '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>