- Calculate edge size using log.

- Use outline instead of border to apply the box edge styling outside the box.
- Add different profiling time for redisgraph PROFILE.

Author: GnaneshKunal

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

@@ -22,7 +22,7 @@ interface IExplain {
 }
 
 function getEdgeSize(c: number) {
-  return (Math.log(c || 1) / Math.log(10)) + 1
+  return Math.floor(Math.log(c || 1) + 1)
 }
 
 export default function Explain(props: IExplain): JSX.Element {
@@ -151,7 +151,7 @@ function ExplainDraw({data, type, module, profilingTime}: {data: any, type: Core
       const ancestors = GetAncestors(data, id, {found: false, pairs: []})
       ancestors.pairs.forEach(p => {
         // Highlight ancestor and their ancestor
-        document.querySelector(`#node-${p[0]}`)?.setAttribute("style", "border: 1px solid #85A2FE !important;")
+        document.querySelector(`#node-${p[0]}`)?.setAttribute("style", "outline: 1px solid #85A2FE !important;")
 
         // Get edge size of parent ancestor to apply the right edge stroke
         const strokeSize = getEdgeSize(parseInt((document.querySelector(`#node-${p[1]}`) as HTMLElement)?.dataset?.size || '')) + 1
@@ -300,18 +300,26 @@ function ExplainDraw({data, type, module, profilingTime}: {data: any, type: Core
   return (
     <div>
       <div style={{ margin: 0, width: '100vw' }} ref={container} id="container" />
-      { profilingTime && (
-        <div style={{ width: infoWidth}} id="profile-time-info" className="ProfileTimeInfo">
-          {
-            Object.keys(profilingTime).map(key => (
-              <div className="Item">
-                <div className="Value">{profilingTime[key]}</div>
-                <div className="Key">{key}</div>
+      { profilingTime &&
+        (
+          module === ModuleType.Search ?
+            (
+              <div style={{ width: infoWidth}} className="ProfileInfo ProfileTimeInfo">
+                {
+                  Object.keys(profilingTime).map(key => (
+                    <div className="Item">
+                      <div className="Value">{profilingTime[key]}</div>
+                      <div className="Key">{key}</div>
+                    </div>
+                  ))
+                }
               </div>
-            ))
-          }
-        </div>
-      )}
+            )
+            :
+            type === CoreType.Profile && (
+              <div style={{ width: infoWidth }} className="ProfileInfo ProfileTimeMini">Total execution time: {profilingTime['Total Execution Time']} ms</div>
+            )
+        )}
     </div>
   )
 }

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

@@ -10,6 +10,14 @@ interface INodeProps {
 }
 
 
+function Snippet({content}: {content: string}) {
+  return (
+    <div className="FooterCommon Footer">
+      <EuiToolTip delay='long' content={content}><span>{content}</span></EuiToolTip>
+    </div>
+  )
+}
+
 export function ExplainNode(props: INodeProps) {
   const propData: EntityInfo = (props as any).node.getData()
   const { id, type, data, snippet, subType } = propData
@@ -22,11 +30,7 @@ export function ExplainNode(props: INodeProps) {
         </div>
       </div>
       {
-        snippet && (
-          <div className='Footer'>
-            {snippet}
-          </div>
-        )
+        snippet && <Snippet content={snippet} />
       }
     </div>
   )
@@ -76,28 +80,37 @@ export function ProfileNode(props: INodeProps) {
   }
 
   const timeInFloat = parseFloat(time || '')
-  const timeStyles = {
-    fontWeight: 'bold',
+  let timeStyles: React.CSSProperties = {
     color: 'white',
-    backgroundColor: (timeInFloat > 45 ? 'red' : timeInFloat > 25 ? 'yellow' : ''),
   }
 
+  if (timeInFloat > 250) {
+    timeStyles = {
+      ...timeStyles,
+      backgroundColor: 'red',
+      paddingRight: '4px',
+      paddingLeft: '2px',
+      borderRadius: '5px',
+    }
+  } else if (timeInFloat > 49) {
+    timeStyles['color'] = 'red'
+  } else if (timeInFloat > 24) {
+    timeStyles['color'] = 'yellow'
+  }
+
+
   return (
     <div className="ProfileContainer" id={`node-${id}`} data-size={counter || size || recordsProduced}>
       <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>
-        )
+        snippet && <Snippet content={snippet} />
       }
       <div className="MetaData">
         <EuiToolTip content={<NodeToolTipContent content={"Execution Time"} />}>
-          <div className="Time" style={timeInFloat > 25 ? timeStyles : {}}>
+          <div className="Time" style={timeStyles}>
             <div className="IconContainer"><EuiIcon className="NodeIcon" size="m" type="clock" /></div>
             <div>{time} ms</div>
           </div>

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

@@ -416,8 +416,6 @@ class Parser {
     this.CurrentToken = this.PeekToken
     this.PeekToken = this.L.NextToken()
 
-    console.log("NEXT TOKEN", this.CurrentToken)
-
     if (this.CurrentToken.T === TokenType.EOF) {
       throw new Error("Didn't expect EOF token")
     }

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

@@ -80,6 +80,28 @@
   background-color: var(--tooltip-background) !important;
 }
 
+
+.euiToolTipAnchor {
+  display: unset !important;
+}
+
+.FooterCommon {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  color: var(--node-metadata-color);
+  font-size: 12px;
+
+
+  // Make text selectable
+  -moz-user-select: text;
+  -khtml-user-select: text;
+  -webkit-user-select: text;
+  -ms-user-select: text;
+  user-select: text;
+}
+
 .ProfileContainer {
   width: 320px;
   min-height: 84px;
@@ -100,7 +122,7 @@
   color: var(--text-color);
 
   &:hover {
-      border: 2px solid #85A2FE !important;
+      outline: 2px solid #85A2FE !important;
       box-sizing: border-box;
   }
 
@@ -123,11 +145,9 @@
   }
 
   .Footer{
-    font-size: 12px;
     padding-top: 4px;
     padding-bottom: 12px;
     height: auto;
-    color: #B5B6C0;
   }
 
   .MetaData {
@@ -192,7 +212,7 @@
   background-color: var(--node-background);
 
   &:hover {
-      border: 2px solid #85A2FE !important;
+      outline: 2px solid #85A2FE !important;
       box-sizing: border-box;
   }
 
@@ -214,87 +234,24 @@
 
   .Footer{
     height: 24px;
-    font-size: 12px;
     padding-top: 6px;
-    color: #B5B6C0;
   }
 }
 
 
-.NodeContainer {
-  width: 320px;
-  height: 114px;
-
-  box-shadow: 0px 3px 12px #17336952;
-  border: 1px solid #3D3D3D !important;
-  border-radius: 4px;
-  opacity: 1;
-
-  padding: 12px 18px 12px 18px !important;
-
+.ProfileInfo {
   display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-}
+  justify-content: center;
+  color: var(--text-color);
 
-.NodeHeader {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
+  font-family: 'Graphik', sans-serif !important;
   font-size: 13px;
-  height: 18px;
-
-  .NodeHeaderInfo {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .NodeHeaderMetadata{
-    display: flex;
-    justify-content: space-between;
-
-    padding-top: 10px;
-    padding-bottom: 10px;
-
-    .MetadataSnippet {
-      font-family: monospace !important;
-    }
-
-    .MetadataCount {
-      display: flex;
-    }
-
-  }
-
-
-  .NodeIcon {
-      height: 13px !important;
-      width: 13px !important;
-  }
-
-
-  .NodeToolTip {
-      display: flex;
-      flex-direction: column;
-      background-color: #333D4F;
-      padding: 10px;
-
-      .NodeToolTipItem {
-          background-color: inherit;
-      }
-
-  }
 
+  padding-bottom: 13px !important;
 }
 
 .ProfileTimeInfo {
-    display: flex;
-    justify-content: center;
-    color: var(--text-color);
-
-    font-family: 'Graphik' Light, sans-serif !important;
     padding-top: 6px !important;
-    padding-bottom: 13px !important;
 
     .Item {
 
@@ -313,6 +270,10 @@
     }
 }
 
+.ProfileTimeMini {
+  background-color: var(--svg-background);
+}
+
 .NodeType {
   color: #CE915B;
 }