small improvements

Author: jungmair

frontend/packages/common/RelationalPlanViewer.js

@@ -136,7 +136,7 @@ const Operator = ({data}) => {
         {data.computed.map((comp) => <div><Expression data={comp.computed}/>: <Expression data={comp.expression}/>
             </div>)}
         </OperatorContainer>
-    } else if (data.operator == "window") {
+    } else if (data.operator === "window") {
         return <OperatorContainer heading={`\u{1FA9F}\u2003 Window`}>
             <div>{data.frame.start} to {data.frame.end}</div>
             <div><b>Partition By:</b> {data.partition.map((expr) => <Expression data={expr}/>)}</div>
@@ -145,7 +145,7 @@ const Operator = ({data}) => {
             <div><b>Aggregates:</b> {data.aggregates.map((agg) => <div><Expression data={agg.computed}/>: <Expression
                 data={agg.aggregation}/></div>)}</div>
         </OperatorContainer>
-    } else if (data.operator == "union") {
+    } else if (data.operator === "union") {
         return <OperatorContainer heading={`\u222a\u2003 Union`}>
             {data.semantics}
         </OperatorContainer>
@@ -206,7 +206,7 @@ export const RelationalPlanViewer = ({height, width, input, onOperatorSelect, se
             currNodes.push(input_elem);
             input_elem.consuming.forEach((child) => {
                 currEdges.push([input_elem.ref, child.ref, {
-                    label: (child.cardinality || child.cardinality === 0) ? `${formatCount(child.cardinality)} est: ${formatCount(child.estimatedCardinality)}` : formatCount(child.estimatedCardinality),
+                    label: (child.cardinality || child.cardinality === 0) ? `${formatCount(child.cardinality)} est: ${formatCount(child.estimatedCardinality)}` : (child.estimatedCardinality||child.estimatedCardinality===0) ? formatCount(child.estimatedCardinality):"",
                     cardinality: child.cardinality,
                     estimatedCardinality: child.estimatedCardinality
                 }])

frontend/packages/common/SubOpPlanViewer.js

@@ -1,6 +1,5 @@
 import React, {useEffect, useState} from "react";
 import 'bootstrap/dist/css/bootstrap.min.css';
-import {Button, Col, Container, Form, Navbar, Row} from 'react-bootstrap';
 import {PlanViewer} from "./PlanViewer";
 
 
@@ -22,13 +21,7 @@ const OperatorContainer = ({heading, children}) => {
         </div>
     </div>
 }
-const computeRef = (d) => {
-    if (d.producing === "parent") {
-        return `${d.parent}-arg-${d.argnr}`
-    } else {
-        return d.producing
-    }
-}
+
 const Expression = ({data}) => {
     if (data.type === "expression_leaf") {
         if (data.leaf_type === "column") {
@@ -215,7 +208,12 @@ const RenderedNode = ({data, x, y, onOperatorSelect, selectedOps}) => {
         </div>
     }
 }
-
+const stateType=(data)=>{
+    if(data.stateType){
+        return ` [${data.stateType}]`
+    }
+    return ""
+}
 const Operator = ({data, onOperatorSelect, selectedOps}) => {
 
     if (data.type === "execution_step") {
@@ -296,17 +294,17 @@ const Operator = ({data, onOperatorSelect, selectedOps}) => {
         } else if (data.subop === "get_external") {
             return <OperatorContainer heading={"GetExternal"}/>
         } else if (data.subop === "merge") {
-            return <OperatorContainer heading={"Merge"}></OperatorContainer>
+            return <OperatorContainer heading={"Merge"+stateType(data)}></OperatorContainer>
         } else if (data.subop === "scan") {
-            return <OperatorContainer heading={"Scan"}>
+            return <OperatorContainer heading={"Scan"+stateType(data)}>
                 {data.mapping.map((m) => <div>{m.member} → <Expression data={m.column}/></div>)}
             </OperatorContainer>
         } else if (data.subop === "scan_list") {
-            return <OperatorContainer heading={"Scan(List)"}>
+            return <OperatorContainer heading={"Scan [List]"}>
                 Element → <Expression data={data.elem}/>
             </OperatorContainer>
         } else if (data.subop === "scan_ref") {
-            return <OperatorContainer heading={"ScanRefs"}>
+            return <OperatorContainer heading={"ScanRefs"+stateType(data)}>
                 Ref → <Expression data={data.reference}/>
             </OperatorContainer>
         } else if (data.subop === "union") {
@@ -413,29 +411,29 @@ const Operator = ({data, onOperatorSelect, selectedOps}) => {
                 SegmentTreeView
             </OperatorContainer>
         } else if (data.subop === "materialize") {
-            return <OperatorContainer heading={"Materialize"}>
+            return <OperatorContainer heading={"Materialize"+stateType(data)}>
                 {data.mapping.map((m) => <div><Expression data={m.column}/> →{m.member}</div>)}
 
             </OperatorContainer>
         } else if (data.subop === "lookup_or_insert") {
-            return <OperatorContainer heading={"LookupOrInsert"}>
+            return <OperatorContainer heading={"LookupOrInsert"+stateType(data)}>
                 Ref: <Expression data={data.reference}/>
             </OperatorContainer>
         } else if (data.subop === "insert") {
-            return <OperatorContainer heading={"Insert"}>
+            return <OperatorContainer heading={"Insert"+stateType(data)}>
                 {data.mapping.map((m) => <div><Expression data={m.column}/> →{m.member}</div>)}
 
             </OperatorContainer>
         } else if (data.subop === "lookup") {
-            return <OperatorContainer heading={"Lookup"}>
+            return <OperatorContainer heading={"Lookup"+stateType(data)}>
                 Ref: <Expression data={data.reference}/>
             </OperatorContainer>
         } else if (data.subop === "get_begin_reference") {
-            return <OperatorContainer heading={"GetBegin"}>
+            return <OperatorContainer heading={"GetBegin"+stateType(data)}>
                 Ref: <Expression data={data.reference}/>
             </OperatorContainer>
         } else if (data.subop === "get_end_reference") {
-            return <OperatorContainer heading={"GetEnd"}>
+            return <OperatorContainer heading={"GetEnd"+stateType(data)}>
                 Ref: <Expression data={data.reference}/>
             </OperatorContainer>
         } else if (data.subop === "entries_between") {

frontend/packages/common/TraceViewer.js

@@ -86,7 +86,11 @@ export const TraceViewer = ({traceData,width, height, onSelect}) => {
     const [selectedEvent, setSelectedEvent] = useState(null)
     const selectEvent = (event) => {
         setSelectedEvent(event)
-        onSelect(event)
+        if (event.category === "Execution" && event.name === "Step") {
+            onSelect(event)
+        }else{
+            data.filter((d) => d.category === "Execution" && d.name === "Step" && d.start<=event.start && d.start+d.duration>=event.start+event.duration).forEach((d) => onSelect(d))
+        }
     }
     const formatExtraText = (d) => {
         let extra = []

frontend/packages/insights/src/PerfAsmViewer.js

@@ -7,8 +7,8 @@ const Instruction = ({data, selectionState, onInstrClick}) => {
     return (<div id={data.id} onClick={(e) => {
         e.stopPropagation();
         onInstrClick(data)
-    }} style={{backgroundColor: selBackgroundColor==="white"? `rgba(255,0,0,${data.localPercentage/100*10})`: selBackgroundColor}}>
-        <div style={{minWidth:80, display:"inline-block"}}>{data.localPercentage>0.05?`${data.localPercentage.toFixed(1)}%`:""}</div><div style={{display:"inline", fontFamily:"monospace", textDecoration: data.loc?"underline":"default"}}>{data.asm}</div>
+    }} style={{backgroundColor:`rgba(255,0,0,${data.localPercentage/100*10})`}}>
+        <div style={{minWidth:80, display:"inline-block"}}>{data.localPercentage>0.05?`${data.localPercentage.toFixed(1)}%`:""}</div><div style={{backgroundColor: selBackgroundColor==="white"? `rgba(255,0,0,${data.localPercentage/100*10})`: selBackgroundColor,display:"inline", fontFamily:"monospace", textDecoration: data.loc?"underline":"default", }}>{data.asm}</div>
     </div>)
 
 }

lingodb-commit

@@ -1 +1 @@
-ebb37e696a7154d3aa6021d17706512b18d938b7
+a228f6c54739209c219900df0f884750e6946da0