- Suffix time with 'ms'

- Use "Records Produced" for graph

Author: GnaneshKunal

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

@@ -5,6 +5,7 @@ import Hierarchy from '@antv/hierarchy'
 
 import {
   CoreType,
+  ModuleType,
   EntityInfo,
   ParseExplain,
   ParseGraphV2,
@@ -30,11 +31,14 @@ export default function Explain(props: IExplain): JSX.Element {
     return (
       <ExplainDraw
         data={resp}
+        module={ModuleType.Graph}
         type={command.endsWith('explain') ? CoreType.Explain : CoreType.Profile}
       />
     )
   }
 
+  const module = ModuleType.Search
+
   if (command == 'ft.profile') {
     const info = props.data[0].response[1]
 
@@ -57,6 +61,7 @@ export default function Explain(props: IExplain): JSX.Element {
     return (
       <ExplainDraw
         data={data}
+        module={module}
         type={CoreType.Profile}
         profilingTime={profilingTime}
       />
@@ -71,6 +76,7 @@ export default function Explain(props: IExplain): JSX.Element {
   return (
     <ExplainDraw
       data={data}
+      module={module}
       type={CoreType.Explain}
     />
   )
@@ -96,7 +102,7 @@ interface IProfilingTime {
   [key: string]: string
 }
 
-function ExplainDraw({data, type, profilingTime}: {data: any, type: CoreType, profilingTime?: IProfilingTime}): JSX.Element {
+function ExplainDraw({data, type, module, profilingTime}: {data: any, type: CoreType, module: ModuleType, profilingTime?: IProfilingTime}): JSX.Element {
   const container = useRef<HTMLDivElement | null>(null)
 
   const [done, setDone] = useState(false)
@@ -193,7 +199,14 @@ function ExplainDraw({data, type, profilingTime}: {data: any, type: CoreType, pr
     const model: Model.FromJSONData = { nodes: [], edges: [] }
     const traverse = (data: any) => {
       if (data) {
-        const info = data.data
+        const info = data.data as EntityInfo
+
+        if (module === ModuleType.Graph) {
+          info.recordsProduced = info.counter
+          delete info.counter
+          delete info.size
+
+        }
 
         let nodeProps = {
           shape: 'react-explain-node',

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

@@ -61,10 +61,9 @@ function NodeToolTipContent(props: INodeToolTip) {
   return null
 }
 
-
 export function ProfileNode(props: INodeProps) {
   const info: EntityInfo = (props as any).node.getData()
-  const {id, data, type, snippet, time, counter, size} = info
+  const {id, data, type, snippet, time, counter, size, recordsProduced} = info
 
   let items = {}
 
@@ -76,6 +75,10 @@ export function ProfileNode(props: INodeProps) {
     items['Size'] = size
   }
 
+  if (recordsProduced !== undefined) {
+    items['Records Produced'] = recordsProduced
+  }
+
   return (
     <div className="ProfileContainer" id={`node-${id}`}>
       <div className="Main">
@@ -93,12 +96,14 @@ export function ProfileNode(props: INodeProps) {
         <EuiToolTip content={<NodeToolTipContent content={"Execution Time"} />}>
           <div className="Time">
             <div className="IconContainer"><EuiIcon className="NodeIcon" size="m" type="clock" /></div>
-            <div>{time}</div>
+            <div>{time} ms</div>
           </div>
         </EuiToolTip>
         <EuiToolTip content={<NodeToolTipContent items={items} />}>
           <div className="Size">
-            <div>{counter}</div>
+            <div>{
+              counter !== undefined ? counter :
+                size !== undefined ? size : recordsProduced}</div>
             <div className="IconContainer"><EuiIcon className="NodeIcon" size="m" type="reportingApp" /></div>
           </div>
         </EuiToolTip>

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

@@ -222,6 +222,7 @@ export interface EntityInfo {
   size?: string
   parentId?: string
   level?: number
+  recordsProduced?: string
 }
 
 interface IAncestors {
@@ -715,6 +716,11 @@ export function ParseIteratorProfile(data: any[]): EntityInfo {
   // }
 }
 
+export enum ModuleType {
+  Graph,
+  Search,
+}
+
 export enum CoreType {
   Profile,
   Explain,