Add proper recursive redisgraph PROFILE/EXPLAIN level parser

Author: GnaneshKunal

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

@@ -7,7 +7,7 @@ import {
   CoreType,
   EntityInfo,
   ParseExplain,
-  ParseGraph,
+  ParseGraphV2,
   ParseProfile,
   ParseProfileCluster,
   GetAncestors,
@@ -24,7 +24,9 @@ export default function Explain(props: IExplain): JSX.Element {
 
   if (command.startsWith('graph')) {
     const info  = props.data[0].response
-    const resp = ParseGraph(info)
+
+    const resp = ParseGraphV2(info)
+
     return (
       <ExplainDraw
         data={resp}
@@ -129,6 +131,8 @@ function ExplainDraw({data, type, profilingTime}: {data: any, type: CoreType, pr
       const ancestors = GetAncestors(data, id, {found: false, pairs: []})
       if (ancestors.found) {
         ancestors.pairs.forEach(p => {
+          const parentNode = document.querySelector(`#node-${p[0]}`)
+          parentNode?.classList.add('ProfileContainerHover')
           document.querySelector(`[data-cell-id='${p[0]}-${p[1]}']`)?.childNodes.forEach(k => {
             (k as any).setAttribute("style", "stroke: #85A2FE; stroke-linecap: butt; stroke-width: 2px")
           })
@@ -141,6 +145,8 @@ function ExplainDraw({data, type, profilingTime}: {data: any, type: CoreType, pr
       const ancestors = GetAncestors(data, id, {found: false, pairs: []})
       if (ancestors.found) {
         ancestors.pairs.forEach(p => {
+          const parentNode = document.querySelector(`#node-${p[0]}`)
+          parentNode?.classList.remove('ProfileContainerHover')
           document.querySelector(`[data-cell-id='${p[0]}-${p[1]}']`)?.childNodes.forEach(k => {
             (k as any).setAttribute("style", "")
           })
@@ -198,7 +204,7 @@ function ExplainDraw({data, type, profilingTime}: {data: any, type: CoreType, pr
           nodeProps = {
             shape: 'react-profile-node',
             width: 320,
-            height: 84,
+            height: (info.snippet ? 114 : 84),
           }
         }
 

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

@@ -64,7 +64,7 @@ function NodeToolTipContent(props: INodeToolTip) {
 
 export function ProfileNode(props: INodeProps) {
   const info: EntityInfo = (props as any).node.getData()
-  const {data, type, snippet, time, counter, size} = info
+  const {id, data, type, snippet, time, counter, size} = info
 
   let items = {}
 
@@ -76,13 +76,19 @@ export function ProfileNode(props: INodeProps) {
     items['Size'] = size
   }
 
-
   return (
-    <div className="ProfileContainer">
+    <div className="ProfileContainer" id={`node-${id}`}>
       <div className="Main">
         <div>{data ? data : type}</div>
         <div className="Type">{[EntityType.GEO, EntityType.NUMERIC, EntityType.TEXT, EntityType.TAG].includes(type) ? type : ''}</div>
       </div>
+      {
+        snippet && (
+          <div className='Footer'>
+            {snippet}
+          </div>
+        )
+      }
       <div className="MetaData">
         <EuiToolTip content={<NodeToolTipContent content={"Execution Time"} />}>
           <div className="Time">
@@ -93,7 +99,7 @@ export function ProfileNode(props: INodeProps) {
         <EuiToolTip content={<NodeToolTipContent items={items} />}>
           <div className="Size">
             <div>{counter}</div>
-            <div className="IconContainer"><EuiIcon className="NodeIcon" size="m" type="iInCircle" /></div>
+            <div className="IconContainer"><EuiIcon className="NodeIcon" size="m" type="reportingApp" /></div>
           </div>
         </EuiToolTip>
       </div>

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

@@ -10,11 +10,11 @@ interface Props {
 
 import { appendIconComponentCache } from '@elastic/eui/es/components/icon/icon'
 import { icon as EuiIconClock } from '@elastic/eui/es/components/icon/assets/clock'
-import { icon as EuiIconIInCircle } from '@elastic/eui/es/components/icon/assets/iInCircle'
+import { icon as EuiIconReportingApp } from '@elastic/eui/es/components/icon/assets/app_reporting'
 
 appendIconComponentCache({
   clock: EuiIconClock,
-  iInCircle: EuiIconIInCircle,
+  reportingApp: EuiIconReportingApp,
 })
 
 const renderApp = (element: JSX.Element) => render(

redisinsight/ui/src/packages/ri-explain/src/parser.ts

@@ -221,6 +221,7 @@ export interface EntityInfo {
   counter?: string
   size?: string
   parentId?: string
+  level?: number
 }
 
 interface IAncestors {
@@ -719,44 +720,80 @@ export enum CoreType {
   Explain,
 }
 
-export function ParseGraph(output: string[]) : EntityInfo {
+export function getOutputLevel(output: string) {
+  let i = 0
+  while (output[i] == ' ' && i < output.length) {
+    i++
+  }
+  return (i > 0 ? i / 4 : 0) + 1
+}
 
-  const entities = [...output].reverse()
+function ParseEntity(entity: string, children: EntityInfo[]): EntityInfo {
+  const info = entity.trim().split('|')
 
-  const first = entities.pop() as string
+  let time: string | undefined = '', size: string | undefined = ''
 
-  function ParseEntity(entity: string, children: EntityInfo[]): EntityInfo {
-    const info = entity.trim().split('|')
+  const metaData = info.slice(-1)[0].trim()
 
-    let time: string | undefined = '', size: string | undefined = ''
+  // Is GRAPH.PROFILE output
+  if (metaData.startsWith('Records produced')) {
 
-    const metaData = info.slice(-1)[0].trim()
+    [size, time] = metaData.trim().split(',')
 
-    // Is GRAPH.PROFILE output
-    if (metaData.startsWith('Records produced')) {
+    size = size.split(': ')[1]
+    time = time.split(': ')[1].split(' ')[0]
+    info.pop()
+  }
 
-      [size, time] = metaData.trim().split(',')
+  const snippet = [...info.slice(1)].join('|').trim()
 
-      size = size.split(': ')[1]
-      time = time.split(': ')[1].split(' ')[0]
-      info.pop()
-    }
+  return {
+    id: uuidv4(),
+    type: info[0] as EntityType,
+    snippet,
+    children,
+    time,
+    size,
+    counter: size,
+    level: getOutputLevel(entity),
+  }
+}
 
-    const snippet = [...info.slice(1)].join('|').trim()
 
-    return {
-      id: uuidv4(),
-      type: info[0] as EntityType,
-      snippet,
-      children,
-      time,
-      size,
-      counter: size,
+export function ParseGraphV2(output: string[]) {
+
+  const level = getOutputLevel(output[0]) + 1
+
+  let entity = ParseEntity(output[0], [])
+  let children: EntityInfo[] = []
+
+  let pairs: [number, number][] = []
+    
+  let s: number | null = null, e: number | null = null
+  let i = 1
+
+  while (i < output.length) {
+    let l = getOutputLevel(output[i])
+    if (l === level) {
+      if (s == null) {
+        s = i
+      } else if (s != null) {
+        pairs.push([s, i])
+        s = i
+      }
     }
+    i++
+  }
+
+  if (s !== null) {
+    pairs.push([s, i])
+  }
+
+  for (let k = 0; k < pairs.length; k++) {
+    let p = pairs[k]
+    children.push({...ParseGraphV2(output.slice(p[0], p[1])), parentId: entity.id})
   }
 
-  return entities.reduce(
-    (a, c) => ParseEntity(c, [a]),
-    ParseEntity(first, [])
-  )
+  entity.children = children
+  return entity
 }

redisinsight/ui/src/packages/ri-explain/src/styles/styles.less

@@ -80,9 +80,15 @@
   background-color: var(--tooltip-background) !important;
 }
 
+.ProfileContainerHover {
+  border: 1px solid #85A2FE !important;
+
+  width: 50px;
+}
+
 .ProfileContainer {
   width: 320px;
-  max-height: 84px;
+  min-height: 84px;
 
   padding-left: 18px !important;
   padding-right: 18px !important;
@@ -121,6 +127,14 @@
       }
   }
 
+  .Footer{
+    font-size: 12px;
+    padding-top: 4px;
+    padding-bottom: 12px;
+    height: auto;
+    color: #B5B6C0;
+  }
+
   .MetaData {
       display: flex;
       justify-content: space-between;
@@ -137,16 +151,30 @@
           display: flex;
           align-items: center;
           font-size: 12px;
+
+          div:first-child {
+              padding-right: 5px;
+          }
+
       }
 
       .Size {
           display: flex;
           align-items: center;
           font-size: 13px;
+
+          div:first-child {
+              padding-right: 5px;
+          }
+
+
       }
 
       .IconContainer {
-          align-self: end;
+          > svg {
+              width: 12px !important;
+              height: 13px !important;
+          }
       }
   }
 }
@@ -168,6 +196,10 @@
 
   background-color: var(--node-background);
 
+  &:hover {
+      border: 1px solid #85A2FE !important;
+  }
+
   .Main {
     // height: 42px;
     font-size: 13px;