@pb33f/cowboy-components 0.2.1 → 0.2.2

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

@@ -0,0 +1,12 @@
+import { LitElement } from "lit";
+export declare class OperationGraphNode extends LitElement {
+    static styles: import("lit").CSSResult[];
+    width: number;
+    height: number;
+    id: string;
+    label: string;
+    active: boolean;
+    constructor();
+    clicked(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/components/visualizer/operation.js

@@ -0,0 +1,52 @@
+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, property } from "lit/decorators.js";
+import { html, LitElement } from "lit";
+import operationCss from "./operation.css.js";
+import { ExplorerNodeClicked } from "../../events/doctor";
+let OperationGraphNode = class OperationGraphNode extends LitElement {
+    constructor() {
+        super();
+    }
+    clicked() {
+        this.dispatchEvent(new CustomEvent(ExplorerNodeClicked, {
+            bubbles: true,
+            composed: true,
+            detail: {
+                nodeHashId: this.id
+            }
+        }));
+    }
+    render() {
+        return html `
+            <div class="operation-node ${this.active ? 'active' : ''}" style="height: ${this.height}px; width: ${this.width - 2}px" @click="${this.clicked}">
+               <sl-icon name="code-slash"></sl-icon> ${this.label}
+               ${this.active ? html `<sl-icon name="arrow-up" class="active-icon"></sl-icon>` : html ``}  
+            </div>
+        `;
+    }
+};
+OperationGraphNode.styles = [operationCss];
+__decorate([
+    property({ type: Number })
+], OperationGraphNode.prototype, "width", void 0);
+__decorate([
+    property({ type: Number })
+], OperationGraphNode.prototype, "height", void 0);
+__decorate([
+    property()
+], OperationGraphNode.prototype, "id", void 0);
+__decorate([
+    property()
+], OperationGraphNode.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean })
+], OperationGraphNode.prototype, "active", void 0);
+OperationGraphNode = __decorate([
+    customElement('pb33f-operation-graphnode')
+], OperationGraphNode);
+export { OperationGraphNode };

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

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

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

@@ -0,0 +1,157 @@
+import { css } from 'lit';
+export default css `
+    :host {
+        display: block;
+        overflow: hidden;
+        width: 100%;
+        height: 100%;
+    }
+
+    .visualizer {
+        display: flex;
+    }
+
+    .explorer {
+        width: 75%;
+        height: 100%;
+    }
+
+    .model {
+        width: 25%;
+        height: 814px;
+        overflow: auto;
+        margin-top: 20px;
+    }
+
+    .model > .tree {
+        height: 300px;
+        overflow-y: auto;
+    }
+
+    .model > .renderer {
+        height: 492px;
+        margin-left: 10px;
+        border: 1px solid var(--primary-color);
+        padding: 10px;
+        overflow-y: auto;
+    }
+
+
+    svg {
+        width: 100%;
+        height: 100%;
+    }
+
+    .svg-container {
+        border: 1px solid var(--primary-color);
+        width: 100%;
+        height: 800px;
+    }
+
+    .svg-container:active {
+        cursor: move;
+    }
+
+    .node {
+        fill: var(--background-color);
+        transition: opacity 0.3s;
+        animation: fadeIn 1s;
+    }
+
+    .node:hover {
+        cursor: pointer;
+        stroke: var(--warn-color);
+    }
+
+    .node:active {
+        cursor: pointer;
+        stroke: var(--secondary-color);
+    }
+
+    .fo {
+        transition: opacity 0.3s;
+        animation: fadeIn 1s;
+    }
+
+    .text {
+        font-size: 1.3rem;
+        fill: var(--primary-color);
+        font-family: var(--font-stack), monospace;
+        animation: fadeIn 1.5s;
+    }
+
+    .text:hover {
+        cursor: pointer;
+        fill: var(--warn-color);
+    }
+
+    .text:active {
+        cursor: pointer;
+        stroke: var(--secondary-color);
+    }
+
+    .glow {
+        filter: url(#glow);
+    }
+
+    .node-body {
+        font-size: 0.9rem;
+
+    }
+
+    //.arrow {
+    //    stroke: var(--primary-color);
+    //    stroke-width: 2;
+    //    fill: none;
+    //    animation: fadeIn 1s;
+    //}
+
+    .edge {
+        stroke-dasharray: 5;
+        stroke-width: 2;
+        stroke: var(--secondary-color);
+        animation: fadeIn 3s, dashdraw 1500ms linear infinite;
+        fill: none;
+    }
+
+    .ref {
+        stroke-dasharray: 1 5;
+        stroke-width: 2;
+        stroke-miterlimit: 1;
+        stroke-linejoin: round;
+        stroke-linecap: round;
+        stroke: var(--terminal-text);
+        animation: dashdraw-fast 1200ms linear infinite;
+    }
+
+    .allOf, .oneOf, .anyOf {
+        stroke: var(--terminal-yellow);
+    }
+
+
+    @keyframes dashdraw {
+        from {
+            stroke-dashoffset: 10;
+        }
+    }
+
+    @keyframes dashdraw-fast {
+        from {
+            stroke-dashoffset: 30;
+        }
+    }
+
+
+    @keyframes fadeIn {
+        0% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 1;
+        }
+    }
+
+
+
+
+`;

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

@@ -0,0 +1,60 @@
+import { LitElement } from "lit";
+import { NodeComponent } from "./node";
+import { ModelTree } from "../model-tree/tree";
+import { NodeClickedEvent } from "../../events/doctor";
+import { RenderedNodeComponent } from "../model-renderer/rendered-node";
+import { ExplorerComponent } from "./explorer";
+export declare enum Direction {
+    UP = "UP",
+    DOWN = "DOWN",
+    LEFT = "LEFT",
+    RIGHT = "RIGHT"
+}
+export declare class Node {
+    id: string;
+    idHash: string;
+    nodePath: string;
+    parentId: string;
+    hash?: string;
+    x?: number;
+    y?: number;
+    width: number;
+    height: number;
+    expanded?: boolean;
+    treeExpanded?: boolean;
+    active?: boolean;
+    instance: any;
+    label: string;
+    nodes: Node[];
+    line: number;
+    type: string;
+}
+export declare class Edge {
+    id: string;
+    sources: string[];
+    targets: string[];
+    sections?: any[];
+    visible?: boolean;
+    ref: string;
+    poly?: string;
+}
+export declare class Visualizer extends LitElement {
+    static styles: import("lit").CSSResult[];
+    ready: boolean;
+    svgContainer: HTMLElement;
+    direction: Direction;
+    private grabbed;
+    private grabbedNode;
+    nodeComponents: NodeComponent[];
+    scale: number;
+    renderedNode: RenderedNodeComponent;
+    nodeMap: Map<string, Node>;
+    renderedNodeMap: Map<string, Node>;
+    modelTree: ModelTree;
+    explorer: ExplorerComponent;
+    constructor();
+    explorerNodeClicked(evt: CustomEvent<NodeClickedEvent>): void;
+    rotate(): void;
+    modelTreeNodeClicked(evt: CustomEvent<NodeClickedEvent>): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/components/visualizer/visualizer.js

@@ -0,0 +1,137 @@
+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 } from "lit";
+import visualizerCss from "./visualizer.css.js";
+import { ModelService } from "../../services/model-service";
+import { ModelTree } from "../model-tree/tree";
+import { ExplorerNodeClicked, ModelTreeNodeClicked } from "../../events/doctor";
+import { RenderedNodeComponent } from "../model-renderer/rendered-node";
+import { ExplorerComponent } from "./explorer";
+export var Direction;
+(function (Direction) {
+    Direction["UP"] = "UP";
+    Direction["DOWN"] = "DOWN";
+    Direction["LEFT"] = "LEFT";
+    Direction["RIGHT"] = "RIGHT";
+})(Direction || (Direction = {}));
+export class Node {
+}
+export class Edge {
+}
+let Visualizer = class Visualizer extends LitElement {
+    constructor() {
+        super();
+        this.nodeComponents = [];
+        this.scale = 1;
+        this.direction = Direction.RIGHT;
+        this.renderedNode = new RenderedNodeComponent();
+        this.nodeMap = new Map();
+        this.renderedNodeMap = new Map();
+        const targets = new Map();
+        this.modelTree = new ModelTree();
+        this.explorer = new ExplorerComponent();
+        // @ts-ignore
+        this.modelTree.addEventListener(ModelTreeNodeClicked, this.modelTreeNodeClicked.bind(this));
+        ModelService.doctorEndpoint = 'http://localhost:9090';
+        ModelService.createGraph().then((result) => {
+            this.modelTree.node = result.nodes[0];
+            this.explorer.nodes = result.nodes;
+            this.explorer.edges = result.edges;
+            this.explorer.models = result.nodesRendered;
+            for (let i = 0; i < result.nodesRendered.length; i++) {
+                this.renderedNodeMap.set(result.nodesRendered[i].idHash, result.nodesRendered[i]);
+            }
+            this.explorer.buildGraph();
+            this.explorer.buildLayout();
+        });
+        // @ts-ignore
+        this.addEventListener(ExplorerNodeClicked, this.explorerNodeClicked.bind(this));
+    }
+    explorerNodeClicked(evt) {
+        this.explorer.nodes.forEach((node) => {
+            if (node.idHash === evt.detail.nodeHashId) {
+                const renderedNode = this.renderedNodeMap.get(node.idHash);
+                if (renderedNode) {
+                    this.renderedNode.node = renderedNode;
+                }
+                node.active = true;
+            }
+            else {
+                node.active = false;
+            }
+        });
+        this.modelTree.explorerClicked(evt.detail.nodeHashId);
+        this.explorer.requestUpdate();
+    }
+    rotate() {
+        switch (this.direction) {
+            case Direction.UP:
+                this.explorer.direction = Direction.RIGHT;
+                break;
+            case Direction.RIGHT:
+                this.explorer.direction = Direction.DOWN;
+                break;
+            case Direction.DOWN:
+                this.explorer.direction = Direction.LEFT;
+                break;
+            case Direction.LEFT:
+                this.explorer.direction = Direction.UP;
+                break;
+        }
+        this.explorer.buildGraph();
+    }
+    modelTreeNodeClicked(evt) {
+        this.explorer.nodes.forEach((node) => {
+            if (node.idHash === evt.detail.nodeHashId.replaceAll('model-', '')) {
+                // lookup rendered node
+                const renderedNode = this.renderedNodeMap.get(node.idHash);
+                if (renderedNode) {
+                    this.renderedNode.node = renderedNode;
+                }
+                node.active = true;
+            }
+            else {
+                node.active = false;
+            }
+        });
+        this.explorer.requestUpdate();
+    }
+    render() {
+        return html `
+            <div class="visualizer">
+                <div class="explorer">
+                    <sl-icon-button name="arrow-90deg-right" @click="${this.rotate}"></sl-icon-button>
+                    <sl-icon-button name="zoom-in" @click="${this.explorer.zoomIn}"></sl-icon-button>
+                    <sl-icon-button name="zoom-out" @click="${this.explorer.zoomOut}"></sl-icon-button>
+                    <sl-icon-button name="arrow-clockwise" @click="${this.explorer.reset}"></sl-icon-button>
+                    <div class="svg-container">
+                        ${this.explorer}
+                    </div>
+                </div>
+                <div class="model">
+                    <div class="tree">
+                        ${this.modelTree}
+                    </div>
+                    <div class="renderer">
+                        ${this.renderedNode}
+                </div>
+            </div>
+        `;
+    }
+};
+Visualizer.styles = [visualizerCss];
+__decorate([
+    state()
+], Visualizer.prototype, "ready", void 0);
+__decorate([
+    query('.svg-container')
+], Visualizer.prototype, "svgContainer", void 0);
+Visualizer = __decorate([
+    customElement("pb33f-visualizer")
+], Visualizer);
+export { Visualizer };

package/dist/cowboy-components.d.ts

@@ -15,6 +15,7 @@ import './components/attention-box/attention-box.js';
 import './components/render-operation-path/render-operation-path.js';
 import './components/render-json-path/render-json-path.js';
 import './components/footer/footer.js';
+import './components/visualizer/visualizer.js';
 import './components/problem-list/problem-list.js';
 import './components/problem-list/problem-item.js';
 import './components/the-doctor/the-doctor.js';

package/dist/cowboy-components.js

@@ -15,6 +15,8 @@ import './components/attention-box/attention-box.js';
 import './components/render-operation-path/render-operation-path.js';
 import './components/render-json-path/render-json-path.js';
 import './components/footer/footer.js';
+// visualizer
+import './components/visualizer/visualizer.js';
 // problems
 import './components/problem-list/problem-list.js';
 import './components/problem-list/problem-item.js';