@@ -133,158 +133,4 @@ bool path_exists(std::string path) {
133133int32_t get_exit_status (int32_t err) {
134134 return (((err) >> 8 ) & 0x000000ff );
135135}
136-
137- std::string generate_visualize_html (std::string &astr_data_json) {
138- std::hash<std::string> hasher;
139- std::ofstream out;
140- std::string file_name = " visualize" + std::to_string (hasher (astr_data_json)) + " .html" ;
141- out.open (file_name);
142- out << R"( <!DOCTYPE html>
143- <html>
144- <head>
145- <title>LCompilers AST/R Visualization</title>
146- <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
147- <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
148-
149- <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
150- <script src="https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/umd/index.js"></script>
151- <script src="https://dagrejs.github.io/project/dagre/latest/dagre.min.js"></script>
152- <script> )" ;
153- out << " var astr_data = " << astr_data_json << " ; </script>\n " ;
154- out << R"( </head>
155-
156- <body style="margin: 0px;">
157- <script type="text/babel" data-type="module">
158- function TreeNode({ node }) {
159- if (node.literals.length === 0) return <p><b>{node.node}</b></p>;
160- return (
161- <div>
162- <p><b>{node.node}</b></p>
163- <div style={{ backgroundColor: "#FBBD23", padding: "2px" }}>
164- {
165- node.literals.map((val, idx) => <p style={{ margin: "0px", padding: "1px" }} key={idx}>{val[0]}: {val[1]}</p>)
166- }
167- </div>
168- </div>
169- );
170- }
171-
172- const getLayoutedElements = (nodes, edges, direction = 'TB') => {
173- const nodeWidth = 180;
174- const isHorizontal = direction === 'LR';
175-
176- const dagreGraph = new dagre.graphlib.Graph();
177- dagreGraph.setDefaultEdgeLabel(() => ({}));
178- dagreGraph.setGraph({ rankdir: direction });
179-
180- nodes.forEach(node => dagreGraph.setNode(node.id, { width: nodeWidth, height: node.nodeHeight }));
181- edges.forEach(edge => dagreGraph.setEdge(edge.source, edge.target));
182-
183- dagre.layout(dagreGraph);
184-
185- nodes.forEach((node) => {
186- const nodeWithPosition = dagreGraph.node(node.id);
187- node.targetPosition = isHorizontal ? 'left' : 'top';
188- node.sourcePosition = isHorizontal ? 'right' : 'bottom';
189- // Shifting the dagre node position (anchor=center center) to the top left
190- // so it matches the React Flow node anchor point (top left).
191- node.position = {
192- x: nodeWithPosition.x - nodeWidth / 2,
193- y: nodeWithPosition.y - node.nodeHeight / 2,
194- };
195- return node;
196- });
197-
198- return [nodes, edges];
199- };
200-
201- class Graph {
202- constructor() {
203- this.nodes = [];
204- this.edges = [];
205- this.idx = 1;
206- return this;
207- }
208-
209- createNode(cur_node) {
210- cur_node.idx = this.idx++;
211- cur_node.literals = [];
212- let obj = cur_node.fields;
213- for (let prop in obj) {
214- let neigh = obj[prop];
215- if (typeof neigh === 'object') {
216- if (neigh.hasOwnProperty("node")) {
217- this.createEdge(cur_node.idx, neigh, prop);
218- } else {
219- if (neigh.length > 0) {
220- for (let i in neigh) {
221- let arrayElement = neigh[i];
222- if (typeof arrayElement === 'object') {
223- if (arrayElement.hasOwnProperty("node")) {
224- this.createEdge(cur_node.idx, arrayElement, `${prop}[${i}]`);
225- } else {
226- console.log("ERROR: Unexpected 2D Array found");
227- }
228- } else {
229- cur_node.literals.push([`${prop}[${i}]`, `${arrayElement}`]);
230- }
231- }
232- } else {
233- // 0 length array, show as literal
234- cur_node.literals.push([prop, "[]"]);
235- }
236- }
237- } else {
238- cur_node.literals.push([prop, `${neigh}`]);
239- }
240- }
241-
242- this.nodes.push({ id: `${cur_node.idx}`, data: { label: <TreeNode node={cur_node} /> }, nodeHeight: 70 + 20 * (cur_node.literals.length) });
243- }
244-
245- createEdge(parent_idx, cur_node, edge_label) {
246- this.edges.push({
247- id: `${parent_idx}-${this.idx}`,
248- source: `${parent_idx}`,
249- target: `${this.idx}`,
250- label: edge_label,
251- labelStyle: { fontWeight: 700 },
252- labelBgPadding: [8, 4],
253- labelBgStyle: { fill: '#FBBD23' },
254- });
255- this.createNode(cur_node);
256- }
257- }
258-
259- function Flow({ nodes, edges }) {
260- return (
261- <div style={{ height: '100vh' }}>
262- <ReactFlow.default
263- defaultNodes={nodes}
264- defaultEdges={edges}
265- style={{ backgroundColor: '#e5e7eb' }}
266- >
267- <ReactFlow.Background />
268- <ReactFlow.Controls />
269- <ReactFlow.MiniMap />
270- </ReactFlow.default>
271- </div>
272- );
273- }
274-
275- function MyApp() {
276- var g = new Graph();
277- g.createNode(astr_data);
278- var [layoutedNodes, layoutedEdges] = getLayoutedElements(g.nodes, g.edges);
279- return (<Flow nodes={layoutedNodes} edges={layoutedEdges} />);
280- }
281-
282- ReactDOM.render(<MyApp />, document.body);
283- </script>
284- </body>
285-
286- </html>)" ;
287- return file_name;
288- }
289-
290136}
0 commit comments