@hpcc-js/eclwatch 2.77.7 → 2.77.8

package/src/WUGraph.ts

@@ -1,265 +1,265 @@
-import { Button, Spacer, ToggleButton, Widget } from "@hpcc-js/common";
-import { ScopeGraph, Workunit } from "@hpcc-js/comms";
-import { Table } from "@hpcc-js/dgrid";
-import { Graph as GraphWidget, Subgraph, Vertex } from "@hpcc-js/graph";
-import { Carousel, ChartPanel } from "@hpcc-js/layout";
-import { hashSum } from "@hpcc-js/util";
-import { WUGraphLegend } from "./WUGraphLegend";
-import { WUScopeController } from "./WUScopeController";
-
-import "../src/WUGraph.css";
-
-export class WUGraph extends ChartPanel {
-
-    private _partialAll = new Button().faChar("fa-window-restore").tooltip("Partial All")
-        .on("click", () => {
-            this.stateClick(this._partialAll);
-        });
-
-    private _maxAll = new Button().faChar("fa-window-maximize").tooltip("Max All")
-        .on("click", () => {
-            this.stateClick(this._maxAll);
-        });
-
-    private _toggleGraph = new ToggleButton().faChar("fa-chain").tooltip("Graph")
-        .selected(true)
-        .on("click", () => {
-            this.viewClick(this._toggleGraph);
-        });
-
-    private _toggleActivities = new ToggleButton().faChar("fa-table").tooltip("Activitiies")
-        .selected(false)
-        .on("click", () => {
-            this.viewClick(this._toggleActivities);
-        });
-
-    private _toggleEdges = new ToggleButton().faChar("fa-table").tooltip("Edges")
-        .selected(false)
-        .on("click", () => {
-            this.viewClick(this._toggleEdges);
-        });
-
-    private _toggleSubgraphs = new ToggleButton().faChar("fa-table").tooltip("Subgraphs")
-        .selected(false)
-        .on("click", () => {
-            this.viewClick(this._toggleSubgraphs);
-        });
-
-    protected _graph = new GraphWidget()
-        .layout("Hierarchy")
-        .applyScaleOnLayout(true)
-        .showToolbar(false)
-        .allowDragging(false)
-        ;
-
-    private _activities = new Table()
-        .pagination(false)
-        ;
-
-    private _edges = new Table()
-        .pagination(false)
-        ;
-
-    private _subgraphs = new Table()
-        .pagination(false)
-        ;
-
-    protected _legend = new WUGraphLegend(this)
-        .on("click", kind => {
-            this.render();
-        })
-        .on("mouseover", kind => {
-            const verticesMap: { [id: string]: boolean } = {};
-            for (const vertex of this._gc.vertices(kind)) {
-                verticesMap[vertex.id()] = true;
-            }
-            this._graph.highlightVerticies(verticesMap);
-        })
-        .on("mouseout", kind => {
-            this._graph.highlightVerticies();
-        })
-        ;
-
-    protected _view = new Carousel().widgets([this._graph, this._activities, this._edges, this._subgraphs]);
-
-    protected _gc = new WUScopeController();
-
-    constructor() {
-        super();
-        this.topOverlay(false);
-        this.widget(this._view);
-        const buttons: Widget[] = [
-            this._toggleGraph,
-            this._toggleActivities,
-            this._toggleEdges,
-            this._toggleSubgraphs,
-            new Spacer(),
-            this._partialAll,
-            this._maxAll,
-            new Spacer(),
-            ...this._graph.iconBarButtons(),
-            new Spacer()];
-        this.buttons(buttons.concat(this.buttons()));
-        this._gc.minClick = (sg: Subgraph) => {
-            this.loadGraph();
-            this._graph.render(w => {
-                this._graph
-                    .selection([sg])
-                    .centerOnItem(sg)
-                    ;
-            });
-        };
-
-        this._graph.tooltipHTML((v: Vertex) => {
-            return this._gc.calcGraphTooltip(v);
-        });
-    }
-
-    stateClick(sourceB: Button) {
-        switch (sourceB) {
-            case this._partialAll:
-                this._graph.data().subgraphs.forEach((sg: Subgraph) => {
-                    sg.minState("partial");
-                });
-                break;
-            case this._maxAll:
-                this._graph.data().subgraphs.forEach((sg: Subgraph) => {
-                    sg.minState("normal");
-                });
-                break;
-        }
-        this.render();
-    }
-
-    viewClick(sourceTB: ToggleButton) {
-        this._toggleGraph.selected(sourceTB === this._toggleGraph);
-        this._toggleActivities.selected(sourceTB === this._toggleActivities);
-        this._toggleEdges.selected(sourceTB === this._toggleEdges);
-        this._toggleSubgraphs.selected(sourceTB === this._toggleSubgraphs);
-        switch (sourceTB) {
-            case this._toggleGraph:
-                this._view.active(0);
-                break;
-            case this._toggleActivities:
-                this._view.active(1);
-                break;
-            case this._toggleEdges:
-                this._view.active(2);
-                break;
-            case this._toggleSubgraphs:
-                this._view.active(3);
-                break;
-        }
-        this.render(w => {
-        });
-    }
-
-    private _prevHashSum;
-    private _prevScopeGraph: ScopeGraph;
-    fetchScopeGraph(): Promise<ScopeGraph> {
-        const hash = hashSum({
-            baseUrl: this.baseUrl(),
-            wuid: this.wuid(),
-            graphID: this.graphID(),
-            subgraphID: this.subgraphID()
-        });
-        if (!this._prevScopeGraph || this._prevHashSum !== hash) {
-            this.startProgress();
-            this._prevHashSum = hash;
-            this._gc.clear();
-            const wu = Workunit.attach({ baseUrl: this.baseUrl() }, this.wuid());
-            return wu.fetchGraphs().then(graphs => {
-                for (const graph of graphs) {
-                    if (graph.Name === this.graphID()) {
-                        this.finishProgress();
-                        return graph.fetchScopeGraph(this.subgraphID());
-                    }
-                }
-            }).then(scopeGraph => {
-                this._prevScopeGraph = scopeGraph;
-                return this._prevScopeGraph;
-            });
-        }
-        return Promise.resolve(this._prevScopeGraph);
-    }
-
-    enter(domNode, _element) {
-        super.enter(domNode, _element);
-    }
-
-    update(domNode, element) {
-        super.update(domNode, element);
-    }
-
-    exit(domNode, element) {
-        super.exit(domNode, element);
-    }
-
-    loadGraph() {
-        this._gc.disabled(this._legend.disabled());
-        this._graph
-            .data(this._gc.graphData(), true)
-            ;
-        {
-            const { columns, data } = this._gc.activityData();
-            this._activities
-                .columns(columns)
-                .data(data)
-                ;
-        }
-        {
-            const { columns, data } = this._gc.edgeData();
-            this._edges
-                .columns(columns)
-                .data(data)
-                ;
-        }
-        {
-            const { columns, data } = this._gc.subgraphData();
-            this._subgraphs
-                .columns(columns)
-                .data(data)
-                ;
-        }
-    }
-
-    render(callback?: (w: Widget) => void): this {
-        if (this.wuid() && this.graphID()) {
-            this.fetchScopeGraph().then(scopedGraph => {
-                this._gc.set(scopedGraph);
-                this._legend.data(this._gc.calcLegend());
-                this.loadGraph();
-                super.render(callback);
-            });
-        } else {
-            super.render(callback);
-        }
-        return this;
-    }
-
-    selection(_?) {
-        if (!arguments.length) return this._graph.selection();
-        const item = this._gc.vertex(_) || this._gc.edge(_) || this._gc.subgraph(_);
-        if (item) {
-            this._graph.selection([item]);
-        }
-        return this;
-    }
-}
-WUGraph.prototype._class += " eclwatch_WUGraph";
-
-export interface WUGraph {
-    baseUrl(): string;
-    baseUrl(_: string): this;
-    wuid(): string;
-    wuid(_: string): this;
-    graphID(): string;
-    graphID(_: string): this;
-    subgraphID(): string;
-    subgraphID(_: string): this;
-}
-
-WUGraph.prototype.publish("baseUrl", "", "string", "HPCC Platform Base URL");
-WUGraph.prototype.publish("wuid", "", "string", "Workunit ID");
-WUGraph.prototype.publish("graphID", "", "string", "Graph ID");
-WUGraph.prototype.publish("subgraphID", "", "string", "Subgraph ID");
+import { Button, Spacer, ToggleButton, Widget } from "@hpcc-js/common";
+import { ScopeGraph, Workunit } from "@hpcc-js/comms";
+import { Table } from "@hpcc-js/dgrid";
+import { Graph as GraphWidget, Subgraph, Vertex } from "@hpcc-js/graph";
+import { Carousel, ChartPanel } from "@hpcc-js/layout";
+import { hashSum } from "@hpcc-js/util";
+import { WUGraphLegend } from "./WUGraphLegend";
+import { WUScopeController } from "./WUScopeController";
+
+import "../src/WUGraph.css";
+
+export class WUGraph extends ChartPanel {
+
+    private _partialAll = new Button().faChar("fa-window-restore").tooltip("Partial All")
+        .on("click", () => {
+            this.stateClick(this._partialAll);
+        });
+
+    private _maxAll = new Button().faChar("fa-window-maximize").tooltip("Max All")
+        .on("click", () => {
+            this.stateClick(this._maxAll);
+        });
+
+    private _toggleGraph = new ToggleButton().faChar("fa-chain").tooltip("Graph")
+        .selected(true)
+        .on("click", () => {
+            this.viewClick(this._toggleGraph);
+        });
+
+    private _toggleActivities = new ToggleButton().faChar("fa-table").tooltip("Activitiies")
+        .selected(false)
+        .on("click", () => {
+            this.viewClick(this._toggleActivities);
+        });
+
+    private _toggleEdges = new ToggleButton().faChar("fa-table").tooltip("Edges")
+        .selected(false)
+        .on("click", () => {
+            this.viewClick(this._toggleEdges);
+        });
+
+    private _toggleSubgraphs = new ToggleButton().faChar("fa-table").tooltip("Subgraphs")
+        .selected(false)
+        .on("click", () => {
+            this.viewClick(this._toggleSubgraphs);
+        });
+
+    protected _graph = new GraphWidget()
+        .layout("Hierarchy")
+        .applyScaleOnLayout(true)
+        .showToolbar(false)
+        .allowDragging(false)
+        ;
+
+    private _activities = new Table()
+        .pagination(false)
+        ;
+
+    private _edges = new Table()
+        .pagination(false)
+        ;
+
+    private _subgraphs = new Table()
+        .pagination(false)
+        ;
+
+    protected _legend = new WUGraphLegend(this)
+        .on("click", kind => {
+            this.render();
+        })
+        .on("mouseover", kind => {
+            const verticesMap: { [id: string]: boolean } = {};
+            for (const vertex of this._gc.vertices(kind)) {
+                verticesMap[vertex.id()] = true;
+            }
+            this._graph.highlightVerticies(verticesMap);
+        })
+        .on("mouseout", kind => {
+            this._graph.highlightVerticies();
+        })
+        ;
+
+    protected _view = new Carousel().widgets([this._graph, this._activities, this._edges, this._subgraphs]);
+
+    protected _gc = new WUScopeController();
+
+    constructor() {
+        super();
+        this.topOverlay(false);
+        this.widget(this._view);
+        const buttons: Widget[] = [
+            this._toggleGraph,
+            this._toggleActivities,
+            this._toggleEdges,
+            this._toggleSubgraphs,
+            new Spacer(),
+            this._partialAll,
+            this._maxAll,
+            new Spacer(),
+            ...this._graph.iconBarButtons(),
+            new Spacer()];
+        this.buttons(buttons.concat(this.buttons()));
+        this._gc.minClick = (sg: Subgraph) => {
+            this.loadGraph();
+            this._graph.render(w => {
+                this._graph
+                    .selection([sg])
+                    .centerOnItem(sg)
+                    ;
+            });
+        };
+
+        this._graph.tooltipHTML((v: Vertex) => {
+            return this._gc.calcGraphTooltip(v);
+        });
+    }
+
+    stateClick(sourceB: Button) {
+        switch (sourceB) {
+            case this._partialAll:
+                this._graph.data().subgraphs.forEach((sg: Subgraph) => {
+                    sg.minState("partial");
+                });
+                break;
+            case this._maxAll:
+                this._graph.data().subgraphs.forEach((sg: Subgraph) => {
+                    sg.minState("normal");
+                });
+                break;
+        }
+        this.render();
+    }
+
+    viewClick(sourceTB: ToggleButton) {
+        this._toggleGraph.selected(sourceTB === this._toggleGraph);
+        this._toggleActivities.selected(sourceTB === this._toggleActivities);
+        this._toggleEdges.selected(sourceTB === this._toggleEdges);
+        this._toggleSubgraphs.selected(sourceTB === this._toggleSubgraphs);
+        switch (sourceTB) {
+            case this._toggleGraph:
+                this._view.active(0);
+                break;
+            case this._toggleActivities:
+                this._view.active(1);
+                break;
+            case this._toggleEdges:
+                this._view.active(2);
+                break;
+            case this._toggleSubgraphs:
+                this._view.active(3);
+                break;
+        }
+        this.render(w => {
+        });
+    }
+
+    private _prevHashSum;
+    private _prevScopeGraph: ScopeGraph;
+    fetchScopeGraph(): Promise<ScopeGraph> {
+        const hash = hashSum({
+            baseUrl: this.baseUrl(),
+            wuid: this.wuid(),
+            graphID: this.graphID(),
+            subgraphID: this.subgraphID()
+        });
+        if (!this._prevScopeGraph || this._prevHashSum !== hash) {
+            this.startProgress();
+            this._prevHashSum = hash;
+            this._gc.clear();
+            const wu = Workunit.attach({ baseUrl: this.baseUrl() }, this.wuid());
+            return wu.fetchGraphs().then(graphs => {
+                for (const graph of graphs) {
+                    if (graph.Name === this.graphID()) {
+                        this.finishProgress();
+                        return graph.fetchScopeGraph(this.subgraphID());
+                    }
+                }
+            }).then(scopeGraph => {
+                this._prevScopeGraph = scopeGraph;
+                return this._prevScopeGraph;
+            });
+        }
+        return Promise.resolve(this._prevScopeGraph);
+    }
+
+    enter(domNode, _element) {
+        super.enter(domNode, _element);
+    }
+
+    update(domNode, element) {
+        super.update(domNode, element);
+    }
+
+    exit(domNode, element) {
+        super.exit(domNode, element);
+    }
+
+    loadGraph() {
+        this._gc.disabled(this._legend.disabled());
+        this._graph
+            .data(this._gc.graphData(), true)
+            ;
+        {
+            const { columns, data } = this._gc.activityData();
+            this._activities
+                .columns(columns)
+                .data(data)
+                ;
+        }
+        {
+            const { columns, data } = this._gc.edgeData();
+            this._edges
+                .columns(columns)
+                .data(data)
+                ;
+        }
+        {
+            const { columns, data } = this._gc.subgraphData();
+            this._subgraphs
+                .columns(columns)
+                .data(data)
+                ;
+        }
+    }
+
+    render(callback?: (w: Widget) => void): this {
+        if (this.wuid() && this.graphID()) {
+            this.fetchScopeGraph().then(scopedGraph => {
+                this._gc.set(scopedGraph);
+                this._legend.data(this._gc.calcLegend());
+                this.loadGraph();
+                super.render(callback);
+            });
+        } else {
+            super.render(callback);
+        }
+        return this;
+    }
+
+    selection(_?) {
+        if (!arguments.length) return this._graph.selection();
+        const item = this._gc.vertex(_) || this._gc.edge(_) || this._gc.subgraph(_);
+        if (item) {
+            this._graph.selection([item]);
+        }
+        return this;
+    }
+}
+WUGraph.prototype._class += " eclwatch_WUGraph";
+
+export interface WUGraph {
+    baseUrl(): string;
+    baseUrl(_: string): this;
+    wuid(): string;
+    wuid(_: string): this;
+    graphID(): string;
+    graphID(_: string): this;
+    subgraphID(): string;
+    subgraphID(_: string): this;
+}
+
+WUGraph.prototype.publish("baseUrl", "", "string", "HPCC Platform Base URL");
+WUGraph.prototype.publish("wuid", "", "string", "Workunit ID");
+WUGraph.prototype.publish("graphID", "", "string", "Graph ID");
+WUGraph.prototype.publish("subgraphID", "", "string", "Subgraph ID");

package/src/WUGraphLegend.css

@@ -1,7 +1,7 @@
-.eclwatch_WUGraphLegend .graph_Vertex  {
-    cursor: auto;
-}
-
-.eclwatch_WUGraphLegend .graph_Vertex .common_Icon {
-    cursor: pointer;
-}
+.eclwatch_WUGraphLegend .graph_Vertex  {
+    cursor: auto;
+}
+
+.eclwatch_WUGraphLegend .graph_Vertex .common_Icon {
+    cursor: pointer;
+}