@pb33f/cowboy-components 0.2.1 → 0.2.2

package/dist/components/model-tree/tree.js

@@ -0,0 +1,103 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import '@shoelace-style/shoelace/dist/components/tree/tree.js';
+import '@shoelace-style/shoelace/dist/components/tree-item/tree-item.js';
+import { customElement, property } from "lit/decorators.js";
+import { html, LitElement } from "lit";
+import treeCss from "./tree.css.js";
+import { ModelTreeNodeClicked } from "../../events/doctor";
+let ModelTree = class ModelTree extends LitElement {
+    nodeClicked(nodeHashId) {
+        this.dispatchEvent(new CustomEvent(ModelTreeNodeClicked, {
+            bubbles: true,
+            composed: true,
+            detail: {
+                nodeHashId: nodeHashId
+            }
+        }));
+    }
+    explorerClicked(nodeHashId) {
+        const treeItems = this.renderRoot.querySelectorAll(`sl-tree-item`);
+        let selected = null;
+        for (let i = 0; i < treeItems.length; i++) {
+            const item = treeItems[i];
+            item.selected = item.id === `model-${nodeHashId}`;
+            item.expanded = true;
+            if (item.selected) {
+                selected = item;
+            }
+        }
+        if (selected) {
+            requestAnimationFrame(() => {
+                selected?.scrollIntoView({ behavior: "smooth", block: "center", inline: "center" });
+            });
+        }
+    }
+    collapse(evt, node) {
+        evt.stopPropagation();
+        node.treeExpanded = false;
+    }
+    expanded(evt, node) {
+        evt.stopPropagation();
+        node.treeExpanded = true;
+    }
+    buildTree(node, depth) {
+        let results = [];
+        if (node.nodes && node.nodes.length > 0) {
+            for (let i = 0; i < node.nodes.length; i++) {
+                depth++;
+                results.push(this.buildTree(node.nodes[i], depth));
+            }
+        }
+        let expanded = node.treeExpanded;
+        if (depth < 2) {
+            expanded = true;
+        }
+        return html `
+            <sl-tree-item id="model-${node.idHash}" ?expanded="${expanded}" 
+                          @sl-expand="${(evt) => {
+            this.expanded(evt, node);
+        }}"
+                          @sl-collapse="${(evt) => {
+            this.collapse(evt, node);
+        }}">
+                <sl-icon name="plus-square" slot="expand-icon"></sl-icon>
+                <sl-icon name="dash-square" slot="collapse-icon"></sl-icon>
+                <span >${node.label}</span>
+                ${results}
+            </sl-tree-item>
+        `;
+    }
+    nodesSelected(treeItems) {
+        for (let i = 0; i < treeItems.length; i++) {
+            this.nodeClicked(treeItems[i].id);
+        }
+    }
+    render() {
+        if (!this.node) {
+            return html ``;
+        }
+        return html `
+            <sl-tree @sl-selection-change="${(evt) => {
+            {
+                const selected = evt.detail.selection;
+                this.nodesSelected(selected);
+            }
+        }}">
+                ${this.buildTree(this.node, 0)}
+            </sl-tree>
+        `;
+    }
+};
+ModelTree.styles = [treeCss];
+__decorate([
+    property()
+], ModelTree.prototype, "node", void 0);
+ModelTree = __decorate([
+    customElement("pb33f-model-tree")
+], ModelTree);
+export { ModelTree };

package/dist/components/the-doctor/the-doctor.d.ts

@@ -7,7 +7,7 @@ import '@shoelace-style/shoelace/dist/components/dialog/dialog.js';
 import '@shoelace-style/shoelace/dist/components/alert/alert.js';
 import '@shoelace-style/shoelace/dist/components/badge/badge.js';
 import { LitElement } from "lit";
-import { AddToastEvent, EditorUpdatedEvent, ProblemRuleFilterChangedEvent, RulesetSavedEvent, RuleClickedEvent } from "../../events/doctor.js";
+import { AddToastEvent, EditorUpdatedEvent, ProblemRuleFilterChangedEvent, RulesetSavedEvent, RuleClickedEvent, NodeClickedEvent } from "../../events/doctor.js";
 import { ProblemDrawerEvent } from "../problem-list/details-drawer.js";
 import { SlDialog, SlIcon, SlRadioGroup, SlTab, SlTabGroup } from "@shoelace-style/shoelace";
 import { AttentionBox } from "../attention-box/attention-box.js";
@@ -87,6 +87,7 @@ export declare class TheDoctor extends LitElement {
     private selectedEditorTab;
     private sidebarClosed;
     constructor(doctorEndpoint?: string);
+    modelTreeNodeClicked(evt: CustomEvent<NodeClickedEvent>): void;
     exportRuleset(): void;
     addToastEvent(event: CustomEvent<AddToastEvent>): void;
     sendToast(toast: Toast): void;

package/dist/components/the-doctor/the-doctor.js

@@ -38,6 +38,7 @@ import dialogCss from "../../css/dialog.css.js";
 import buttonCss from "../../css/button.css.js";
 import radioGroupsCss from "../../css/radiogroups.css.js";
 import { MarkerSeverity } from "monaco-editor";
+import { ModelService } from "../../services/model-service";
 export const DoctorDocumentBag = "pb33f-doctor-editor";
 export const HowToFixBag = "pb33f-doctor-howtofix";
 export const FunctionDocumentationBag = "pb33f-doctor-funcdocs";
@@ -112,6 +113,8 @@ let TheDoctor = class TheDoctor extends LitElement {
         this.addEventListener(RuleClicked, this.ruleClicked);
         // @ts-ignore
         this.addEventListener(BuiltInRulesetChanged, this.builtInRulesetSelected);
+        // @ts-ignore
+        //this.addEventListener(ModelTreeNodeClicked, this.modelTreeNodeClicked)
         // hijack navigation buttons.
         window.addEventListener('popstate', (e) => {
             const state = e.state;
@@ -128,6 +131,10 @@ let TheDoctor = class TheDoctor extends LitElement {
         });
         //history.pushState({view: ActiveView.Overview}, "", ActiveView.Overview);
     }
+    modelTreeNodeClicked(evt) {
+        // TODO: this is a placeholder for now
+        console.log(evt);
+    }
     exportRuleset() {
         this.exportRulesetDialog.show();
     }
@@ -283,6 +290,13 @@ let TheDoctor = class TheDoctor extends LitElement {
                         });
                     }
                 }
+                // update visualization
+                // TODO: this is a placeholder for now
+                // ModelService.createGraph(value).then((result) => {
+                //   this.vis
+                //
+                //
+                // })
             }).catch((e) => {
                 console.error("statistics service is down", e);
                 this.platformUnavailable(e);
@@ -307,6 +321,8 @@ let TheDoctor = class TheDoctor extends LitElement {
     }
     platformUnavailable(error) {
         if (!this.unavailable) {
+            this.loadingOverlay.hide();
+            this.activitySpinner.hide();
             this.errorBanner.errorTitle = "The doctor is out.";
             if (!error) {
                 this.errorBanner.errorMessage = "The clinic is <strong>closed!</strong> " +
@@ -373,6 +389,7 @@ let TheDoctor = class TheDoctor extends LitElement {
         LintingService.doctorEndpoint = this.doctorEndpoint;
         FeedbackService.doctorEndpoint = this.doctorEndpoint;
         RulesetService.doctorEndpoint = this.doctorEndpoint;
+        ModelService.doctorEndpoint = this.doctorEndpoint;
         this.docBag = this.bagManager.getBag(DoctorDocumentBag);
         if (this.docBag) {
             const doc = this.docBag.get(DefaultDocument);
@@ -461,6 +478,7 @@ let TheDoctor = class TheDoctor extends LitElement {
         this.sessionRulesetMapBag = this.bagManager.getBag(SessionRulesetMapBag);
         // fire off all network requests, then configure the ruleset management.
         Promise.all(promises).then(() => {
+            this.loadingOverlay.hide();
             // configure rule management
             this.manageRuleset.defaultRuleset = this.defaultRuleset;
             this.manageRuleset.owaspRuleset = this.OWASPRuleset;
@@ -473,17 +491,18 @@ let TheDoctor = class TheDoctor extends LitElement {
             else {
                 this.manageRuleset.rulesetConfig = { ruleMapping: new Map(), allRulesSwitch: true };
             }
-            this.manageRuleset.buildRulesets();
-            if (this.CustomRuleset && this.CustomRuleset.rules.size > 0) {
-                this.manageRuleset.customRuleset = this.CustomRuleset;
-            }
-            // do nothing with this for now. we just need to make sure the default ruleset
-            // has a session.
-            this.fetchSessionRulesetAsYaml().then((result) => {
-                this.loadingOverlay.hide();
-                this.rulesetEditor?.setValue(result, true);
-                this.fetchRulesetMap();
-            });
+            setTimeout(() => {
+                this.manageRuleset.buildRulesets();
+                if (this.CustomRuleset && this.CustomRuleset.rules.size > 0) {
+                    this.manageRuleset.customRuleset = this.CustomRuleset;
+                }
+                this.fetchSessionRulesetAsYaml().then((result) => {
+                    this.rulesetEditor?.setValue(result, true);
+                    this.fetchRulesetMap();
+                }).catch((e) => {
+                    this.platformUnavailable(e);
+                });
+            }, 50);
         });
         // refresh state for how to fix.
         this.fetchDocs();
@@ -537,12 +556,12 @@ let TheDoctor = class TheDoctor extends LitElement {
         }
     }
     async fetchSessionRulesetAsYaml() {
-        return new Promise(async (resolve) => {
+        return new Promise(async (resolve, reject) => {
             RulesetService.getSessionRulesetAsYAML().then((result) => {
                 resolve(result);
             }).catch((e) => {
                 console.error("cannot fetch session ruleset: ", e.title);
-                resolve("");
+                reject(e);
             });
         });
     }

package/dist/components/visualizer/explorer.d.ts

@@ -0,0 +1,52 @@
+import { LitElement } from "lit";
+import { Direction, Edge, Node } from "./visualizer";
+import { NodeComponent } from "./node";
+export declare class ExplorerComponent extends LitElement {
+    static styles: import("lit").CSSResult[];
+    svgItem: SVGSVGElement;
+    svgGroup: SVGSVGElement;
+    ready: boolean;
+    elk: any;
+    graph: any;
+    nodes: Node[];
+    models: Node[];
+    edges: Edge[];
+    direction: Direction;
+    nodeComponents: NodeComponent[];
+    scale: number;
+    private grabbed;
+    nodeMap: Map<string, Node>;
+    private startX;
+    private startY;
+    private translateX;
+    private translateY;
+    constructor();
+    mouseMove(evt: MouseEvent): void;
+    mouseDown(evt: MouseEvent): void;
+    mouseUp(): void;
+    onWheel(evt: MouseEvent): void;
+    buildLayout(): void;
+    buildGraph(): any;
+    readyGo(): void;
+    reset(): void;
+    zoomIn(): void;
+    zoomOut(): void;
+    generateOptions(): {
+        'spacing.nodeNodeBetweenLayers': number;
+        'spacing.nodeNode': number;
+        'elk.nodeLabels.placement': string;
+        'elk.algorithm': string;
+        'elk.direction': Direction;
+        'org.eclipse.elk.edgeRouting': string;
+        'elk.layered.unnecessaryBendpoints': string;
+        'elk.layered.spacing.edgeNodeBetweenLayers': number;
+        'org.eclipse.elk.layered.nodePlacement.bk.fixedAlignment': string;
+        'org.eclipse.elk.layered.cycleBreaking.strategy': string;
+        'nodePlacement.strategy': string;
+        'org.eclipse.elk.spacing.edgeLabel': string;
+        'org.eclipse.elk.spacing.edgeNode': string;
+        'org.eclipse.elk.layered.edgeLabels.sideSelection': string;
+        'org.eclipse.elk.spacing.portPort': string;
+    };
+    render(): import("lit-html").TemplateResult<1> | import("lit-html").TemplateResult<2>;
+}

package/dist/components/visualizer/explorer.js

@@ -0,0 +1,296 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement, query, state } from "lit/decorators.js";
+import { html, LitElement, svg } from "lit";
+import visualizerCss from "./visualizer.css";
+import { Direction } from "./visualizer";
+import { NodeComponent } from "./node";
+import { OperationGraphNode } from "./operation";
+import { curveBundle, line } from "d3-shape";
+import ELK from "elkjs/lib/elk.bundled";
+let ExplorerComponent = class ExplorerComponent extends LitElement {
+    constructor() {
+        super();
+        this.nodeComponents = [];
+        this.scale = 1;
+        this.translateX = 0;
+        this.translateY = 0;
+        this.elk = new ELK();
+        this.ready = false;
+        this.direction = Direction.RIGHT;
+        this.nodeMap = new Map();
+        const targets = new Map();
+    }
+    mouseMove(evt) {
+        if (this.grabbed) {
+            this.translateX = evt.clientX - this.startX;
+            this.translateY = evt.clientY - this.startY;
+            this.svgGroup.style.transform = `scale(${this.scale}) translate(${this.translateX / this.scale}px, ${this.translateY / this.scale}px)`;
+        }
+    }
+    mouseDown(evt) {
+        this.grabbed = true;
+        this.startX = evt.clientX - this.translateX;
+        this.startY = evt.clientY - this.translateY;
+    }
+    mouseUp() {
+        this.grabbed = false;
+    }
+    onWheel(evt) {
+        evt.preventDefault();
+        //@ts-ignore
+        const delta = evt.deltaY || evt.deltaX;
+        const scaleStep = Math.abs(delta) < 50
+            ? 0.05 // touchpad pitch
+            : 0.25; // mouse wheel
+        const scaleDelta = delta < 0 ? scaleStep : -scaleStep;
+        const nextScale = this.scale + scaleDelta; // 'scale' is prev scale
+        // calc fixedPoint
+        const fixedPoint = { x: evt.clientX, y: evt.clientY };
+        this.scale = nextScale;
+        if (nextScale < 0.25) {
+            this.scale = 0.25;
+            return;
+        }
+        // if (nextScale > 5) {
+        //     this.scale = 5;
+        //     return
+        // }
+        const mouseX = evt.clientX;
+        const mouseY = evt.clientY;
+        const svgRect = this.svgItem.getBoundingClientRect();
+        const offsetX = mouseX - svgRect.left;
+        const offsetY = mouseY - svgRect.top;
+        this.svgGroup.style.transformOrigin = `${offsetX}px ${offsetY}px`;
+        this.svgGroup.style.transform = `scale(${nextScale}) translate(${this.translateX / this.scale}px, ${this.translateY / this.scale}px)`;
+    }
+    buildLayout() {
+        this.elk.layout(this.graph, {
+            layoutOptions: {
+                'algorithm': 'layered'
+            },
+            logging: true,
+            measureExecutionTime: true
+        }).then(this.readyGo.bind(this));
+    }
+    buildGraph() {
+        const graph = {
+            id: "root",
+            layoutOptions: this.generateOptions(),
+            children: this.nodes,
+            edges: this.edges
+        };
+        this.graph = graph;
+        // build node map
+        this.nodeMap.clear();
+        this.nodes.forEach((node) => {
+            this.nodeMap.set(node.nodePath, node);
+        });
+        this.buildLayout();
+        return graph;
+    }
+    readyGo() {
+        this.ready = true;
+        this.requestUpdate();
+    }
+    reset() {
+        this.scale = 1;
+        this.translateX = 0;
+        this.translateY = 0;
+        this.svgGroup.style.transform = `scale(${this.scale}) translate(${this.translateX}px, ${this.translateY}px)`;
+    }
+    zoomIn() {
+        const nextScale = this.scale + 0.25; // 'scale' is prev scale
+        this.scale = nextScale;
+        this.svgGroup.style.transform = `scale(${nextScale}) translate(${this.translateX / this.scale}px, ${this.translateY / this.scale}px)`;
+    }
+    zoomOut() {
+        const nextScale = this.scale - 0.25; // 'scale' is prev scale
+        this.scale = nextScale;
+        this.svgGroup.style.transform = `scale(${nextScale}) translate(${this.translateX / this.scale}px, ${this.translateY / this.scale}px)`;
+    }
+    generateOptions() {
+        return {
+            'spacing.nodeNodeBetweenLayers': 40,
+            'spacing.nodeNode': 40,
+            'elk.nodeLabels.placement': 'INSIDE V_CENTER H_RIGHT',
+            'elk.algorithm': 'org.eclipse.elk.layered',
+            'elk.direction': this.direction,
+            'org.eclipse.elk.edgeRouting': 'ORTHOGONAL',
+            'elk.layered.unnecessaryBendpoints': 'true',
+            'elk.layered.spacing.edgeNodeBetweenLayers': 30,
+            'org.eclipse.elk.layered.nodePlacement.bk.fixedAlignment': 'BALANCED',
+            'org.eclipse.elk.layered.cycleBreaking.strategy': 'DEPTH_FIRST',
+            'nodePlacement.strategy': 'BRANDES_KOEPF',
+            'org.eclipse.elk.spacing.edgeLabel': '0',
+            'org.eclipse.elk.spacing.edgeNode': '24',
+            'org.eclipse.elk.layered.edgeLabels.sideSelection': 'ALWAYS_UP',
+            'org.eclipse.elk.spacing.portPort': '10',
+        };
+    }
+    render() {
+        if (!this.ready) {
+            return html ``;
+        }
+        const nodes = this.graph.children?.map((child) => {
+            const nc = new NodeComponent();
+            nc.id = child.idHash;
+            if (child.x && child.y) {
+                nc.x = child.x;
+                nc.y = child.y;
+            }
+            nc.width = child.width;
+            nc.height = child.height;
+            // if (child.expanded) {
+            //     nc.visible = child.expanded;
+            // } else {
+            //debugger
+            let expanded = false;
+            // check if any of the edges have a target of this node, and then check
+            // if any of the source nodes are expanded
+            this.edges?.forEach((edge) => {
+                if (edge.targets.includes(child.id)) {
+                    edge.sources.forEach((source) => {
+                        const node = this.nodes.find((n) => n.id === source);
+                        if (node?.expanded) {
+                            expanded = true;
+                        }
+                    });
+                }
+            });
+            nc.visible = expanded;
+            // }
+            const op = new OperationGraphNode();
+            op.height = child.height - 2;
+            op.width = child.width - 2;
+            op.id = child.idHash;
+            op.label = child.label;
+            if (child.active) {
+                op.active = child.active;
+                nc.active = child.active;
+            }
+            nc.body = op;
+            this.nodeComponents.push(nc);
+            return nc.render();
+        });
+        const edges = this.graph.edges?.map((edge) => {
+            let x = 0;
+            const sections = edge.sections?.map((section) => {
+                // check if any of the targets for the edge are visible, if not, don't render the edge
+                let visible = false;
+                edge.targets.forEach((target) => {
+                    const node = this.nodes.find((n) => n.id === target);
+                    if (node?.expanded) {
+                        visible = true;
+                    }
+                    this.nodeComponents.forEach((nc) => {
+                        if (nc.visible && nc.id === target) {
+                            console.log(nc.id);
+                            visible = true;
+                        }
+                    });
+                });
+                // if (!visible) {
+                //     return svg``
+                // }
+                const points = section ? [section.startPoint, ...(section.bendPoints || []), section.endPoint] : [];
+                let pathFn = line().x((d) => d.x).y((d) => d.y);
+                pathFn = pathFn.curve(curveBundle.beta(1));
+                const lines = svg `
+                     <path id="edge-${edge.id}-${x}" 
+                        d="${pathFn(points)}" 
+                        class="edge ${edge.ref.length > 0 ? 'ref' : ''} ${edge.poly && edge.poly != '' ? edge.poly : ''}" 
+                        marker-end="url(#${edge.ref.length > 0 ? edge.poly ? 'arrow-poly' : 'arrow-ref' : 'arrow'})"/>`;
+                x++;
+                return lines;
+            });
+            return sections;
+        });
+        let base = 600;
+        let offset = 0;
+        this.graph.children.forEach(() => {
+            base += 5;
+            offset += 20;
+        });
+        if (offset > 900) {
+            offset = 900;
+        }
+        return svg `
+        <svg width="100%" height="100%" viewBox="${offset} 80 ${base} ${base}"
+                             @wheel="${this.onWheel}"
+                             @mousedown="${this.mouseDown}"
+                             @mouseup="${this.mouseUp}"
+                             @mousemove="${this.mouseMove}"
+                             @mouseout="${this.mouseUp}"
+                        >
+                            <defs>
+                             <filter id="glow">
+      <!-- First, apply a Gaussian blur -->
+      <feGaussianBlur stdDeviation="4.5" result="coloredBlur"/>
+      <!-- Then, apply a merge filter to add the blur effect back with the original graphic -->
+      <feMerge>
+        <feMergeNode in="coloredBlur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+                                <marker
+                                        id="arrow"
+                                        viewBox="0 0 12 12"
+                                        refX="8"
+                                        refY="5"
+                                        markerWidth="5"
+                                        markerHeight="5"
+                                        fill="var(--secondary-color)"
+                                        orient="auto-start-reverse">
+                                    <path d="M 0 0 L 10 5 L 0 10 z" class="glow"/>
+                                </marker>
+                                <marker
+                                        id="arrow-ref"
+                                        viewBox="0 0 12 12"
+                                        refX="8"
+                                        refY="5"
+                                        markerWidth="5"
+                                        markerHeight="5"
+                                        fill="var(--terminal-text)"
+                                        orient="auto-start-reverse">
+                                    <path d="M 0 0 L 10 5 L 0 10 z" class="glow"/>
+                                </marker>
+                                <marker
+                                        id="arrow-poly"
+                                        viewBox="0 0 12 12"
+                                        refX="8"
+                                        refY="5"
+                                        markerWidth="5"
+                                        markerHeight="5"
+                                        fill="var(--terminal-yellow)"
+                                        orient="auto-start-reverse">
+                                    <path d="M 0 0 L 10 5 L 0 10 z" class="glow"/>
+                                </marker>
+
+                            </defs>
+                            <g id="#svgGroup">
+                                ${nodes}
+                                ${edges}
+                            </g>
+                        </svg>
+        `;
+    }
+};
+ExplorerComponent.styles = [visualizerCss];
+__decorate([
+    query('svg')
+], ExplorerComponent.prototype, "svgItem", void 0);
+__decorate([
+    query('svg > g')
+], ExplorerComponent.prototype, "svgGroup", void 0);
+__decorate([
+    state()
+], ExplorerComponent.prototype, "ready", void 0);
+ExplorerComponent = __decorate([
+    customElement('pb33f-explorer')
+], ExplorerComponent);
+export { ExplorerComponent };

package/dist/components/visualizer/node.d.ts

@@ -0,0 +1,11 @@
+export declare class NodeComponent {
+    id: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    body: any;
+    visible: boolean;
+    active: boolean | undefined;
+    render(): import("lit-html").TemplateResult<2>;
+}

package/dist/components/visualizer/node.js

@@ -0,0 +1,27 @@
+import { svg } from "lit";
+export class NodeComponent {
+    render() {
+        // if (!this.visible) {
+        //     return svg``;
+        // }
+        let body = "";
+        if (this.body) {
+            body = this.body;
+        }
+        else {
+            body = "Object Node";
+        }
+        // <!--<text x="${this.x + 6}" y="${this.y + 26}" class="text">${body}</text> -->
+        return svg `
+              <rect id="node-${this.id}" x="${this.x}" y="${this.y}" width="${this.width}" height="${this.height}" class="node"/>
+                
+                <foreignObject x="${this.x}" y="${this.y}" width="${this.width}" height="${this.height + 20}" class="fo">
+    <div xmlns="http://www.w3.org/1999/xhtml" class="node-body" style="height: ${this.height}px; width: ${this.width}px;">
+      ${body} 
+    </div>
+  </foreignObject>
+                
+                
+        `;
+    }
+}

package/dist/components/visualizer/operation.css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/components/visualizer/operation.css.js

@@ -0,0 +1,53 @@
+import { css } from 'lit';
+export default css `
+    
+    .operation-node {
+        border: 1px solid var(--primary-color);
+    }
+    
+    .operation-node:hover {
+        cursor: pointer;
+        border: 1px solid var(--secondary-color);
+    }
+
+    .operation-node:active {
+        cursor: pointer;
+        border: 1px solid var(--warn-color);
+    }
+    
+    .active {
+        border: 2px solid var(--error-color);
+        animation: pulse-animation 2.5s infinite
+    }
+
+    .operation-node.active:hover {
+        cursor: pointer;
+        border: 2px solid var(--error-color);
+    }
+ 
+    @keyframes pulse-animation {
+        0% {
+            box-shadow: 0 0 0 0 var(--error-color);
+        }
+        100% {
+            box-shadow: 0 0  30px 30px rgb(0, 0, 0, 0);
+        }
+    }
+
+    @keyframes dashdraw {
+        0% {
+            stroke-dashoffset: 10;
+        }
+    }
+    
+    .active-icon {
+        position: absolute;
+        right: calc(50% - 10px);
+        bottom: -8px;
+        font-size: 1.5rem;
+        color: var(--error-color);
+    }
+    
+
+
+`;