[RI-3726] Profile Plugin - Add support for leftoff RediSearch expressions

redisinsight/ui/src/components/query-card/QueryCardHeader/QueryCardHeader.tsx

@@ -110,6 +110,7 @@ const QueryCardHeader = (props: Props) => {
     setSelectedValue,
     onQueryDelete,
     onQueryReRun,
+    onQueryProfile,
     db,
   } = props
 
@@ -345,12 +346,12 @@ const QueryCardHeader = (props: Props) => {
             </EuiToolTip>
           )}
         </EuiFlexItem>
-        <EuiFlexItem
-          grow={false}
-          className={cx(styles.buttonIcon, styles.viewTypeIcon)}
-          onClick={onDropDownViewClick}
-        >
-          {isOpen && canCommandProfile && !summaryText && (
+        {isOpen && canCommandProfile && !summaryText && (
+          <EuiFlexItem
+            grow={false}
+            className={cx(styles.buttonIcon, styles.viewTypeIcon)}
+            onClick={onDropDownViewClick}
+          >
             <div className={styles.dropdownWrapper}>
               <div className={styles.dropdown}>
                 <EuiSuperSelect
@@ -363,8 +364,8 @@ const QueryCardHeader = (props: Props) => {
                 />
               </div>
             </div>
-          )}
-        </EuiFlexItem>
+          </EuiFlexItem>
+        )}
         <EuiFlexItem
           grow={false}
           className={cx(styles.buttonIcon, styles.viewTypeIcon)}

redisinsight/ui/src/packages/ri-explain/package.json

@@ -66,6 +66,7 @@
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "redisinsight-plugin-sdk": "^1.1.0",
     "uuid": "^9.0.0"
   }
 }

redisinsight/ui/src/packages/ri-explain/src/App.tsx

@@ -1,8 +1,6 @@
 import React from 'react'
 import Explain from './Explain'
 
-const isDarkTheme = document.body.classList.contains('theme_DARK')
-
 export function App(props: { command?: string, data: any }) {
 
   const ErrorResponse = HandleError(props)

redisinsight/ui/src/packages/ri-explain/src/Explain.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState, useRef } from 'react'
 import { Model, Graph } from '@antv/x6'
 import { register} from '@antv/x6-react-shape'
 import Hierarchy from '@antv/hierarchy'
+import { formatRedisReply } from 'redisinsight-plugin-sdk'
 
 import {
   EuiButtonIcon,
@@ -72,6 +73,18 @@ export default function Explain(props: IExplain): JSX.Element {
 
   const module = ModuleType.Search
 
+  const [parsedRedisReply, setParsedRedisReply] = useState('')
+
+  useEffect(() => {
+    if (command == 'ft.profile') {
+      const getParsedResponse = async () => {
+        const formattedResponse = await formatRedisReply(props.data[0].response, props.command)
+        setParsedRedisReply(formattedResponse)
+      }
+      getParsedResponse()
+    }
+  })
+
   if (command == 'ft.profile') {
     const info = props.data[0].response[1]
 
@@ -82,6 +95,12 @@ export default function Explain(props: IExplain): JSX.Element {
       let [cluster, entityInfo] = ParseProfileCluster(info)
       cluster['Coordinator'].forEach((kv: [string, string]) => profilingTime[kv[0]] = kv[1])
       data = entityInfo
+      return (
+        <>
+          <div className="responseFail">Visualization is not supported for a clustered database.</div>
+          <div className="parsedRedisReply">{parsedRedisReply}</div>
+        </>
+      )
     } else if (typeof info[0] === 'string' && info[0].toLowerCase().startsWith('coordinator')) {
       const resultsProfile = info[2]
       data = ParseProfile(resultsProfile)
@@ -91,6 +110,12 @@ export default function Explain(props: IExplain): JSX.Element {
         'Parsing time': resultsProfile[1][1],
         'Pipeline creation time': resultsProfile[2][1],
       }
+      return (
+        <>
+          <div className="responseFail">Visualization is not supported for a clustered database.</div>
+          <div className="parsedRedisReply">{parsedRedisReply}</div>
+        </>
+      )
     } else {
       data = ParseProfile(info)
       profilingTime = {
@@ -213,11 +238,6 @@ function ExplainDraw({data, type, module, profilingTime}: {data: any, type: Core
           line: {
             stroke: edgeColor,
             strokeWidth: (edge.getAttrs() as any)?.line?.strokeWidth,
-            targetMarker: {
-              name: 'block',
-              stroke: edgeColor,
-              fill: edgeColor,
-            },
           },
         })
       })
@@ -234,11 +254,6 @@ function ExplainDraw({data, type, module, profilingTime}: {data: any, type: Core
           line: {
             stroke: edgeColor,
             strokeWidth: (edge.getAttrs() as any)?.line?.strokeWidth,
-            targetMarker: {
-              name: 'block',
-              fill: edgeColor,
-              stroke: edgeColor,
-            }
           },
         })
       })
@@ -270,8 +285,14 @@ function ExplainDraw({data, type, module, profilingTime}: {data: any, type: Core
       if (data) {
         const info = data.data as EntityInfo
 
-        if (!info.snippet && info.parentSnippet && info.data?.startsWith(info.parentSnippet)) {
-          info.data = info.data.substr(info.parentSnippet.length)
+        // snippet if prefix with parent suffix will always be followed by ':'.
+        //
+        // Currently snippets are passed to child only for TAG
+        // expressions which has ':' at the center.
+        //
+        // Example child data with parent snippet: <PARENT_SNIPPET>:<DATA>
+        if (!info.snippet && info.parentSnippet && info.data?.startsWith(`${info.parentSnippet}:`)) {
+          info.data = info.data.substr(info.parentSnippet.length + 1)
           info.snippet = info.parentSnippet
         }
 
@@ -375,11 +396,7 @@ function ExplainDraw({data, type, module, profilingTime}: {data: any, type: Core
               line: {
                 stroke: edgeColor,
                 strokeWidth: getEdgeSize(itemRecords),
-                targetMarker: {
-                  name: 'block',
-                  fill: edgeColor,
-                  stroke: edgeColor,
-                },
+                targetMarker: null,
               },
             },
           })
@@ -462,7 +479,7 @@ function ExplainDraw({data, type, module, profilingTime}: {data: any, type: Core
                   name: 'Zoom In',
                   onClick: () => {
                     setTimeout(() => document.addEventListener('mouseup', mouseUpHandler), 100)
-                    core?.zoom(0.5)
+                    core && Math.floor(core.zoom()) <= 3 && core?.zoom(0.5)
                     core?.resize(undefined, core?.getContentBBox().height + 50)
                   },
                   icon: 'magnifyWithPlus'
@@ -471,7 +488,11 @@ function ExplainDraw({data, type, module, profilingTime}: {data: any, type: Core
                   name: 'Zoom Out',
                   onClick: () => {
                     setTimeout(() => document.addEventListener('mouseup', mouseUpHandler), 100)
-                    core && Math.floor(core.zoom()) <= 0.5 ? core?.zoom(0) : core?.zoom(-0.5)
+                    if (Math.floor(core?.zoom() || 0) <= 0.5) {
+                      core?.centerContent()
+                    } else {
+                      core?.zoom(-0.5)
+                    }
                     core?.resize(undefined, core?.getContentBBox().height + 50)
                   },
                   icon: 'magnifyWithMinus'

redisinsight/ui/src/packages/ri-explain/src/Node.tsx

@@ -31,7 +31,7 @@ export function ExplainNode(props: INodeProps) {
           <div className="InfoData">
             <EuiToolTip delay='long' content={infoData}><span>{infoData}</span></EuiToolTip>
           </div>
-          {subType && [EntityType.GEO, EntityType.NUMERIC, EntityType.TEXT, EntityType.TAG, EntityType.FUZZY].includes(subType) && <div className="Type">{subType}</div> }
+          {subType && [EntityType.GEO, EntityType.NUMERIC, EntityType.TEXT, EntityType.TAG, EntityType.FUZZY, EntityType.WILDCARD, EntityType.PREFIX, EntityType.IDS, EntityType.LEXRANGE, EntityType.NUMBER].includes(subType) && <div className="Type">{subType}</div> }
         </div>
       </div>
       {