Implementation of new linkage report (#764)

* Initial code to generate phase tree for report

* Added ability to control whether all vars are displayed

* Added docstrings

* Multiple derived JS classes; changed where fixing is detected; applied basic styles

* Removed some unusued code

* Phase box grids are working, still fixing transitions

* Fixed transition for returning grid box

* Matrix background grid partially works

* Fixed up background square transitions

* Mark directly connected linkages with a C; show title at top

* Moved styles to own file, fixed filtering issue

* Replaced C inconnected linkages with double-arrow

* Created a customized legend

* Fixed filter handling

* Removed need for DmLinkageLayout.js

* Changed arrow type, remove arrow from linkage cell

* Added a test for the Dymos linkage report GUI

dymos/visualization/linkage/js/DmLinkageCellRenderer.js

@@ -0,0 +1,90 @@
+// <<hpp_insert gen/CellRenderer.js>>
+
+class DmLinkageConditionCell extends GroupBase {
+    constructor(color, id) {
+        super(color, id);
+    }
+}
+
+class DmLinkagePhaseCell extends GroupBase {
+    constructor(color, id) {
+        super(color, id);
+    }
+}
+
+class DmLinkageConnectedCell extends VectorBase {
+    constructor(color, id) {
+        super(color, id);
+    }
+
+    /**
+     * Select the element with D3 if not already done, attach a transition
+     * and resize the shape.
+     * @param svgGroup Reference to SVG <g> element associated with data.
+     * @param {Object} dims The cell spec to use while resizing/repositioning.
+     */
+     update(svgGroup, dims) {
+        const d3Group = d3.select(svgGroup);
+
+        d3Group.select('rect').transition(sharedTransition)
+            .attr("x", dims.topLeft.x * dims.size.percent)
+            .attr("y", dims.topLeft.y * dims.size.percent)
+            .attr("width", dims.bottomRight.x * dims.size.percent * 2)
+            .attr("height", dims.bottomRight.y * dims.size.percent * 2);
+
+        d3Group.select('text').transition(sharedTransition)
+            .attr("x", 0)
+            .attr("y", 0)
+            .style('font-size', `${dims.bottomRight.x * dims.size.percent * 2}px`);
+
+
+        return d3Group.selectAll('*');
+    }
+
+    /** 
+     * Get the D3 selection for the appropriate group and append a filled rectangle.
+     * @param {Object} svgGroup Reference to SVG <g> element associated with data.
+     * @param {Object} dims The cell spec to use while rendering.
+     */
+     render(svgGroup, dims) {
+        const d3Group = d3.select(svgGroup);
+
+        d3Group
+            .append('rect')
+            .attr("class", this.className)
+            .attr("id", this.id)
+            .style("fill", this.color);
+
+        d3Group
+            .append('text')
+            .attr('class', 'connected-variable-text')
+            .attr('id', `${this.id}-text`)
+            .html('&#x2794;');
+
+        return this.update(svgGroup, dims);
+    }
+}
+
+class DmLinkageVariableCell extends VectorBase {
+    constructor(color, id) {
+        super(color, id);
+    }
+}
+
+class DmLinkageCell extends VectorBase {
+    constructor(color, id) {
+        super(color, id);
+    }
+}
+
+class DmLinkageGroupCell extends GroupBase {
+    constructor(color, id) {
+        super(color, id);
+    }
+}
+
+class DmLinkageRootCell extends GroupBase {
+    constructor(color, id) {
+        super(color, id);
+    }
+}

dymos/visualization/linkage/js/DmLinkageDiagram.js

@@ -0,0 +1,43 @@
+// <<hpp_insert gen/Diagram.js>>
+// <<hpp_insert gen/Layout.js>>
+// <<hpp_insert js/DmLinkageStyle.js>>
+// <<hpp_insert js/DmLinkageUserInterface.js>>
+// <<hpp_insert js/DmLinkageMatrix.js>>
+
+/**
+ * Manage all components of the application. The model data, the CSS styles, the
+ * user interface, the layout of the matrix, and the matrix grid itself are
+ * all member objects. DmLinkageDiagram adds handling for solvers.
+ * @typedef DmLinkageDiagram
+ */
+class DmLinkageDiagram extends Diagram {
+    /**
+     * Set initial values.
+     * @param {Object} modelJSON The decompressed model structure.
+     */
+    constructor(modelJSON) {
+        super(modelJSON);
+
+    }
+
+    _newModelData() {
+        this.model = new DmLinkageModelData(this.modelData);
+    }
+
+    /** Create a new DmLinkageMatrix object. Overrides superclass method. */
+    _newMatrix(lastClickWasLeft, prevCellSize = null) {
+        return new DmLinkageMatrix(this.model, this.layout, this.dom.diagGroups,
+            this.arrowMgr, lastClickWasLeft, this.ui.findRootOfChangeFunction, prevCellSize);
+    }
+
+    /**
+     * Separate these calls from the constructor so that subclasses can
+     * set values before execution.
+     */
+     _init() {
+        this.style = new DmLinkageStyle(this.dom.svgStyle, this.dims.size.font);
+        this.layout = this._newLayout();
+        this.ui = new DmLinkageUserInterface(this);
+        this.matrix = this._newMatrix(true);
+    }
+}

dymos/visualization/linkage/js/DmLinkageLegend.js

@@ -0,0 +1,93 @@
+// <<hpp_insert gen/Legend.js>>
+
+/**
+ * Draw a symbol describing each of the element types.
+ * @typedef DmLinkageLegend
+ * @property {Boolean} shown Whether the legend is currently drawn or not.
+ */
+class DmLinkageLegend extends Legend {
+    /**
+     * Initializes the legend object.
+     * @param {ModelData} modelData In the base class, symbols only appear if they're in the model
+     */
+    constructor(modelData) {
+        super(modelData);
+    }
+
+    /** Define all the legend items, colors, and styles. */
+    _initItemTypes() {
+
+        this.nodeTypes = [
+            {
+                'name': 'Phase',
+                'color': DmLinkageStyle.color.phase
+            },
+            {
+                'name': 'Initial Condition/Variable',
+                'color': DmLinkageStyle.color.initial
+            },
+            {
+                'name': 'Final Condition/Variable',
+                'color': DmLinkageStyle.color.final
+            },
+            {
+                'name': 'Collapsed',
+                'color': DmLinkageStyle.color.collapsed
+            }
+        ]
+
+         this.cellTypes = [
+            {
+                'name': 'Variable',
+                'color': DmLinkageStyle.color.variableCell,
+                'cssClass': 'dm-legend-box'
+            },
+            {
+                'name': 'Fixed Variable',
+                'color': DmLinkageStyle.color.fixedUnlinkedVariableCell,
+                'cssClass': 'dm-legend-box'
+            },
+            {
+                'name': 'Fixed, Linked Variable',
+                'color': DmLinkageStyle.color.fixedLinkedVariableCell,
+                'cssClass': 'dm-legend-box'
+            },
+            {
+                'name': 'Linkage',
+                'color': DmLinkageStyle.color.linkageCell,
+                'cssClass': 'dm-legend-cell'
+            },
+            {
+                'name': 'Fixed Linkage',
+                'color': DmLinkageStyle.color.fixedLinkageCell,
+                'cssClass': 'dm-legend-cell'
+            },
+            {
+                'name': 'Connected',
+                'color': 'none',
+                'cssClass': 'dm-legend-connected'
+            }
+        ];
+    }
+
+    _setDisplayBooleans() { }
+
+    /** Add symbols for all of the items that were defined */
+    _setupContents() {
+        const nodeLegend = d3.select('#tree-nodes-legend');
+        for (const nodeType of this.nodeTypes) {
+            this._addItem(nodeType, nodeLegend);
+        }
+
+        nodeLegend.style('width', nodeLegend.node().scrollWidth + 'px')
+
+        const cellLegend = d3.select('#matrix-cells-legend');
+        for (const cellType of this.cellTypes) {
+            this._addItem(cellType, cellLegend, cellType.cssClass);
+        }
+
+        cellLegend.style('width', cellLegend.node().scrollWidth + 'px')
+
+    }
+
+}