feat(mlResults): changed active color and put back ml info

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

@@ -151,11 +151,11 @@ export const QueryBuilderNav = (props: QueryBuilderNavProps) => {
                 <Tooltip>
                   <TooltipTrigger>
                     <Button
-                      variantType={mlEnabled ? 'danger' : 'secondary'}
+                      variantType={mlEnabled ? 'primary' : 'secondary'}
                       variant="ghost"
                       size="xs"
                       iconComponent="icon-[ic--baseline-lightbulb]"
-                      className={mlEnabled ? 'border-danger-600' : ''}
+                      className={mlEnabled ? 'border-primary-600' : ''}
                     />
                   </TooltipTrigger>
                   <TooltipContent disabled={props.toggleSettings === 'ml'}>
@@ -228,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>

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

@@ -31,6 +31,8 @@ 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"
@@ -38,6 +40,15 @@ 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"
@@ -45,6 +56,10 @@ 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"
@@ -52,6 +67,9 @@ 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>