Skip to content

Commit 3a97f57

Browse files
jungmairjungmair
committed
wip
1 parent 395e22d commit 3a97f57

File tree

7 files changed

+93
-46
lines changed

7 files changed

+93
-46
lines changed

‎frontend/packages/common/MLIRLayerAnalysis.js‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -79,8 +79,6 @@ export const goUp = (opId, relalgBaseRef, info) => {
7979
export const goDown = (opId, subOpBaseRef, info) => {
8080
let collectedChildren = []
8181
collectChildren(info.indexedOps[opId], collectedChildren)
82-
console.log(collectedChildren)
83-
console.log(info)
8482
let res = []
8583
const descend = (curr)=>{
8684
let op = info.indexedOps[curr]
@@ -106,12 +104,10 @@ export const analyzeLayers = (layers) => {
106104
let tmpEdgesUp = new Map
107105
const newIndexOps = {}
108106
layers.forEach((pass) => {
109-
console.log(pass.parsed)
110107
enumEdges(pass.parsed, tmpEdgesDown, tmpEdgesUp)
111108
indexOps(pass.parsed, newIndexOps)
112109
})
113110

114-
console.log(tmpEdgesUp)
115111
return {edgesUp: tmpEdgesUp, edgesDown: tmpEdgesDown, indexedOps: newIndexOps};
116112

117113
}

‎frontend/packages/common/MLIRViewer.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ const renderBlock = ({data, selectionState, onOpClick}) => {
9999
}
100100

101101

102-
export const MLIRViewer = ({layer, selectedOps, width, height}) => {
102+
export const MLIRViewer = ({layer, selectedOps, width, height, onOpClick}) => {
103103
const scrollableDivRef = useRef(null);
104104
const getBackground = (data) => {
105105
if (data.type === "op" && selectedOps.includes(data.id)) {
@@ -114,6 +114,6 @@ export const MLIRViewer = ({layer, selectedOps, width, height}) => {
114114
}
115115
}, [selectedOps]);
116116
return (<div ref={scrollableDivRef} style={{maxWidth: width, maxHeight: height, overflow: "auto"}}>
117-
<Render data={layer.parsed} selectionState={getBackground} onOpClick={()=>{}}/>
117+
<Render data={layer.parsed} selectionState={getBackground} onOpClick={onOpClick}/>
118118
</div>)
119119
}

‎frontend/packages/common/RelationalPlanViewer.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -214,7 +214,6 @@ export const RelationalPlanViewer = ({height, width, input, onOperatorSelect, se
214214
})
215215
currMinCardinality = Math.log(currMinCardinality)
216216
maxCardinality = Math.log(maxCardinality)
217-
console.log(currMinCardinality, maxCardinality, (20 - 1) / (maxCardinality - minCardinality))
218217
setCardinalitySlope((20 - 1) / (maxCardinality - minCardinality))
219218
setMinCardinality(currMinCardinality)
220219
setNodes(currNodes)

‎frontend/packages/common/SubOpPlanViewer.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ const RenderedNode = ({data, x, y, onOperatorSelect, selectedOps}) => {
8282
backgroundColor: selectedOps.includes(data.ref) ? "yellow":"white",
8383
borderRadius: 5,
8484
minWidth: 100,
85-
}} id={`plan-${data.ref}`} onClick={(e)=>{e.stopPropagation();console.log(e);onOperatorSelect(data.ref)}}>
85+
}} id={`plan-${data.ref}`} onClick={(e)=>{e.stopPropagation();onOperatorSelect(data.ref)}}>
8686
<Operator data={data} onOperatorSelect={onOperatorSelect} selectedOps={selectedOps} />
8787
</div>
8888
}

‎frontend/packages/common/TraceViewer.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -251,7 +251,7 @@ export const TraceViewer = ({traceData,width, height, onSelect}) => {
251251
<Rect x={offsetX + correctedStart * scaleX} y={offsetY + d.row * rowOffset} height={15}
252252
width={correctedDuration * scaleX}
253253
fill={d.category=== "Ignore" ? "white":categoryColors[d.category + "::" + d.name]} stroke={"gray"} strokeWidth={0.4}
254-
onClick={() => console.log(d)}></Rect>
254+
onClick={() => {}}></Rect>
255255

256256
<Text x={offsetX + correctedStart * scaleX} y={offsetY + d.row * rowOffset}
257257
text={`${d.name} (${extraText})`}

‎frontend/packages/insights/src/App.js‎

Lines changed: 79 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -5,34 +5,47 @@ import {Button, Col, Container, Form, Navbar, Row, Tab, Tabs} from 'react-bootst
55
import {MLIRViewer} from "@lingodb/common/MLIRViewer";
66
import {RelationalPlanViewer} from "@lingodb/common/RelationalPlanViewer";
77
import {TraceViewer} from "@lingodb/common/TraceViewer";
8-
import {analyzeLayers, getBaseReference, goUp} from "@lingodb/common/MLIRLayerAnalysis";
8+
import {analyzeLayers, getBaseReference, goDown, goUp} from "@lingodb/common/MLIRLayerAnalysis";
99
import {SubOpPlanViewer} from "@lingodb/common/SubOpPlanViewer";
1010
import {PerfSymbolTable} from "./PerfSymbolTable";
1111
import {PerfAsmViewer} from "./PerfAsmViewer";
1212

1313
const App = () => {
1414
const [data, setData] = useState(null);
15-
const [relalgMLIRData, setRelalgMLIRData] = useState(null);
16-
const [subopMLIRData, setSubOpMLIRData] = useState(null);
17-
const [llvmMLIRData, setLlvmMLIRData] = useState(null);
18-
const [imperativeMLIRData, setImperativeMLIRData] = useState(null);
15+
16+
//which data parts are available
1917
const [hasTrace, setHasTrace] = useState(false);
2018
const [hasPlan, setHasPlan] = useState(false);
2119
const [hasSubOpPlan, setHasSubOpPlan] = useState(false);
2220
const [hasPerf, setHasPerf] = useState(false);
21+
const [hasLayers, setHasLayers] = useState(false);
22+
23+
//mlir modules on different layers
24+
const [relalgMLIRData, setRelalgMLIRData] = useState(null);
25+
const [subopMLIRData, setSubOpMLIRData] = useState(null);
26+
const [imperativeMLIRData, setImperativeMLIRData] = useState(null);
27+
const [llvmMLIRData, setLlvmMLIRData] = useState(null);
2328

29+
//aggregated perf data (file,symbol) -> percentage
2430
const [perfSymbols, setPerfSymbols] = useState(null);
25-
const [hasLayers, setHasLayers] = useState(false);
31+
32+
//cached "graph", to find origin of ops or dependent ops
2633
const [layerInfo, setLayerInfo] = useState(undefined)
27-
const [selectedOps, setSelectedOps] = useState([]);
34+
35+
36+
//selected ops accross different layers
37+
const [selectedRelAlgOps, setSelectedRelAlgOps] = useState([]);
38+
const [selectedSubOpOps, setSelectedSubOpOps] = useState([]);
39+
const [selectedImperativeOps, setSelectedImperativeOps] = useState([]);
2840
const [selectedLLVMOps, setSelectedLLVMOps] = useState([]);
41+
42+
2943
const handleFileUpload = (event) => {
3044
const file = event.target.files[0];
3145
const reader = new FileReader();
3246
reader.onload = (e) => {
3347
try {
3448
const json = JSON.parse(e.target.result);
35-
console.log(json)
3649
setData(json);
3750
} catch (error) {
3851
alert('Failed to parse JSON file.');
@@ -42,7 +55,6 @@ const App = () => {
4255
};
4356

4457

45-
const [relalgBaseRef, setRelalgBaseRef] = useState(null);
4658
useEffect(() => {
4759
if (data == null) {
4860
setRelalgMLIRData(null)
@@ -76,8 +88,6 @@ const App = () => {
7688
setSubOpMLIRData(subopModule)
7789
let newLayerInfo = analyzeLayers(data.layers)
7890
setLayerInfo(newLayerInfo)
79-
const newRelAlgBaseRef = getBaseReference(relalgModule.passInfo.file)
80-
setRelalgBaseRef(newRelAlgBaseRef)
8191
if (data.perf) {
8292

8393
setHasPerf(true)
@@ -96,20 +106,55 @@ const App = () => {
96106
,
97107
[data]
98108
)
99-
109+
const handleSubOpSelection=(op)=>{
110+
setSelectedSubOpOps([op])
111+
const relalgBaseRef=getBaseReference(relalgMLIRData.passInfo.file)
112+
const impBaseRef=getBaseReference(imperativeMLIRData.passInfo.file)
113+
const llvmBaseRef=getBaseReference(llvmMLIRData.passInfo.file)
114+
const relatedRelalgOps=goUp(op, relalgBaseRef, layerInfo)
115+
const relatedImpOps=goDown(op, impBaseRef, layerInfo)
116+
const relatedLLVMOps=goDown(op, llvmBaseRef, layerInfo)
117+
setSelectedRelAlgOps(relatedRelalgOps)
118+
setSelectedImperativeOps(relatedImpOps)
119+
setSelectedLLVMOps(relatedLLVMOps)
120+
}
121+
const handleRelAlgOpSelection=(op)=>{
122+
setSelectedRelAlgOps([op])
123+
const subOpBaseRef=getBaseReference(subopMLIRData.passInfo.file)
124+
const impBaseRef=getBaseReference(imperativeMLIRData.passInfo.file)
125+
const llvmBaseRef=getBaseReference(llvmMLIRData.passInfo.file)
126+
const relatedSubOps=goDown(op, subOpBaseRef, layerInfo)
127+
const relatedImpOps=goDown(op, impBaseRef, layerInfo)
128+
const relatedLLVMOps=goDown(op, llvmBaseRef, layerInfo)
129+
setSelectedSubOpOps(relatedSubOps)
130+
setSelectedImperativeOps(relatedImpOps)
131+
setSelectedLLVMOps(relatedLLVMOps)
132+
}
133+
const handleLLVMOpSelection=(op)=>{
134+
setSelectedLLVMOps([op])
135+
const relalgBaseRef=getBaseReference(relalgMLIRData.passInfo.file)
136+
const subOpBaseRef=getBaseReference(subopMLIRData.passInfo.file)
137+
const impBaseRef=getBaseReference(imperativeMLIRData.passInfo.file)
138+
const relatedRelalgOps=goUp(op, relalgBaseRef, layerInfo)
139+
const relatedSubOpOpss=goUp(op, subOpBaseRef, layerInfo)
140+
const relatedImpOps=goUp(op, impBaseRef, layerInfo)
141+
setSelectedRelAlgOps(relatedRelalgOps)
142+
setSelectedImperativeOps(relatedImpOps)
143+
setSelectedSubOpOps(relatedSubOpOpss)
144+
}
100145
const handleTraceSelect = (trace) => {
101146
if (trace.category === "Execution" && trace.name === "Step" && hasLayers) {
102-
console.log(trace.extra.location)
103-
setSelectedOps(goUp(trace.extra.location, relalgBaseRef, layerInfo))
147+
handleSubOpSelection(trace.extra.location)
104148
}
105149
}
106150

107151
const handleUnloadData = () => {
108152
setData(null);
109-
setSelectedOps([])
153+
setSelectedRelAlgOps([])
154+
setSelectedSubOpOps([])
155+
setSelectedImperativeOps([])
110156
setRelalgMLIRData(null)
111157
setLayerInfo(null)
112-
setRelalgBaseRef(null)
113158
setHasTrace(false)
114159
setHasPlan(false)
115160
setHasSubOpPlan(false)
@@ -128,7 +173,9 @@ const App = () => {
128173
const handleInstrClick = (instr) => {
129174
if (instr.loc) {
130175
console.log("selected llvm", [instr.loc])
131-
setSelectedLLVMOps([instr.loc])
176+
const op=instr.loc
177+
handleLLVMOpSelection(op)
178+
132179
}
133180
setActiveRightTab("mlir_llvm")
134181
}
@@ -166,13 +213,13 @@ const App = () => {
166213
<Row>
167214
<Col className="p-3" style={{backgroundColor: '#f8f9fa'}}>
168215
<Tabs activeKey={activeLeftTab} onSelect={handleLeftTabSelect}>
169-
<Tab eventKey="queryPlan" title="Query-Plan">
216+
{hasPlan&&<Tab eventKey="queryPlan" title="Query-Plan">
170217

171-
</Tab>
172-
<Tab eventKey="subopPlan" title="SubOp-Visualization">
173-
</Tab>
174-
<Tab eventKey="perf" title="Perf">
175-
</Tab>
218+
</Tab>}
219+
{hasSubOpPlan&&<Tab eventKey="subopPlan" title="SubOp-Visualization">
220+
</Tab>}
221+
{hasPerf&&<Tab eventKey="perf" title="Perf">
222+
</Tab>}
176223
</Tabs>
177224
<div style={{
178225
visibility: activeLeftTab === "queryPlan" ? "visible" : "hidden",
@@ -182,8 +229,8 @@ const App = () => {
182229
<RelationalPlanViewer height={2 * (window.innerHeight - 90) / 3}
183230
width={(window.innerWidth - 100) / 2}
184231
input={data.plan}
185-
onOperatorSelect={(id) => setSelectedOps([id])}
186-
selectedOps={selectedOps}></RelationalPlanViewer>}
232+
onOperatorSelect={(id) => handleRelAlgOpSelection(id)}
233+
selectedOps={selectedRelAlgOps}></RelationalPlanViewer>}
187234
</div>
188235
<div style={{
189236
visibility: activeLeftTab === "subopPlan" ? "visible" : "hidden",
@@ -193,8 +240,9 @@ const App = () => {
193240
<SubOpPlanViewer height={2 * (window.innerHeight - 90) / 3}
194241
width={(window.innerWidth - 100) / 2}
195242
input={data.subopplan} onOperatorSelect={(id) => {
243+
handleSubOpSelection(id)
196244
}}
197-
selectedOps={[]}></SubOpPlanViewer>}
245+
selectedOps={selectedSubOpOps}></SubOpPlanViewer>}
198246
</div>
199247
<div style={{
200248
visibility: activeLeftTab === "perf" ? "visible" : "hidden",
@@ -229,7 +277,7 @@ const App = () => {
229277

230278
<MLIRViewer height={2 * (window.innerHeight - 90) / 3}
231279
width={(window.innerWidth - 100) / 2}
232-
layer={relalgMLIRData} selectedOps={selectedOps}></MLIRViewer>
280+
layer={relalgMLIRData} selectedOps={selectedRelAlgOps} onOpClick={(d)=>handleRelAlgOpSelection(d.id)}></MLIRViewer>
233281
</div>
234282
<div style={{
235283
visibility: activeRightTab === "mlir_subop" ? "visible" : "hidden",
@@ -238,7 +286,7 @@ const App = () => {
238286

239287
<MLIRViewer height={2 * (window.innerHeight - 90) / 3}
240288
width={(window.innerWidth - 100) / 2}
241-
layer={subopMLIRData} selectedOps={[]}></MLIRViewer>
289+
layer={subopMLIRData} selectedOps={selectedSubOpOps} onOpClick={(d)=>handleSubOpSelection(d.id)}></MLIRViewer>
242290
</div>
243291
<div style={{
244292
visibility: activeRightTab === "mlir_imperative" ? "visible" : "hidden",
@@ -247,7 +295,7 @@ const App = () => {
247295

248296
<MLIRViewer height={2 * (window.innerHeight - 90) / 3}
249297
width={(window.innerWidth - 100) / 2}
250-
layer={imperativeMLIRData} selectedOps={[]}></MLIRViewer>
298+
layer={imperativeMLIRData} selectedOps={selectedImperativeOps} onOpClick={(d)=>{}}></MLIRViewer>
251299
</div>
252300
<div style={{
253301
visibility: activeRightTab === "mlir_llvm" ? "visible" : "hidden",
@@ -256,7 +304,7 @@ const App = () => {
256304

257305
<MLIRViewer height={2 * (window.innerHeight - 90) / 3}
258306
width={(window.innerWidth - 100) / 2}
259-
layer={llvmMLIRData} selectedOps={selectedLLVMOps}
307+
layer={llvmMLIRData} selectedOps={selectedLLVMOps} onOpClick={(d)=>handleLLVMOpSelection(d.id)}
260308
perfInfo={data.perf.generated}></MLIRViewer>
261309
</div>
262310
<div style={{
@@ -266,7 +314,7 @@ const App = () => {
266314
{hasPerf && <PerfAsmViewer height={2 * (window.innerHeight - 90) / 3}
267315
width={(window.innerWidth - 100) / 2}
268316
data={data.perf.generated}
269-
onInstrClick={handleInstrClick}></PerfAsmViewer>}
317+
onInstrClick={handleInstrClick} selectedLLVMOps={selectedLLVMOps}></PerfAsmViewer>}
270318
</div>
271319
</div>
272320
}

‎frontend/packages/insights/src/PerfAsmViewer.js‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,33 +3,37 @@ import {useEffect, useRef} from "react";
33

44

55
const Instruction = ({data, selectionState, onInstrClick}) => {
6+
const selBackgroundColor=selectionState(data)
67
return (<div id={data.id} onClick={(e) => {
78
e.stopPropagation();
89
onInstrClick(data)
9-
}} style={{backgroundColor: selectionState(data)}}>
10-
<div style={{minWidth:50, display:"inline-block"}}>{data.samples}</div><div style={{display:"inline", fontFamily:"monospace", textDecoration: data.loc?"underline":"default"}}>{data.asm}</div>
10+
}} style={{backgroundColor: selBackgroundColor==="white"? `rgba(255,0,0,${data.localPercentage/100*10})`: selBackgroundColor}}>
11+
<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>
1112
</div>)
1213

1314
}
1415

1516
const Func = ({data, selectionState, onInstrClick}) => {
17+
let totalFuncEvents=data.assembly.reduce((a, c)=>a+c.samples,0)
18+
1619
return (<div style={{display: "inline"}}>
1720
{data.func}
1821
<div style={{paddingLeft: "10px"}}>
1922
{data.assembly.map((child, index) => {
20-
return (<Instruction data={child} selectionState={selectionState} onInstrClick={onInstrClick}></Instruction>)
23+
return (<Instruction data={{...child,localPercentage:child.samples/totalFuncEvents*100}} selectionState={selectionState} onInstrClick={onInstrClick}></Instruction>)
2124
})}
2225
</div>
2326
</div>)
2427
}
2528

2629

27-
export const PerfAsmViewer = ({data, selectedOps, width, height, onInstrClick}) => {
30+
export const PerfAsmViewer = ({data, selectedOps, width, height, onInstrClick,selectedLLVMOps}) => {
2831
const scrollableDivRef = useRef(null);
2932
const getBackground = (data) => {
30-
/*if (data.type === "op" && selectedOps.includes(data.id)) {
33+
console.log(selectedLLVMOps, data.loc)
34+
if (data.loc && selectedLLVMOps.includes(data.loc)) {
3135
return "yellow"
32-
}*/
36+
}
3337
return "white"
3438
}
3539
/*useEffect(() => {

0 commit comments

Comments
 (0)