-
Notifications
You must be signed in to change notification settings - Fork 65
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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
- Loading branch information
Showing
16 changed files
with
2,283 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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('➔'); | ||
|
||
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); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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') | ||
|
||
} | ||
|
||
} |
Oops, something went wrong.