Skip to content

Commit

Permalink
Merge pull request #655 from elbashandy/stream_table_brushing
Browse files Browse the repository at this point in the history 
Stream table brushing
  • Loading branch information
@dangunter
dangunter authored Feb 7, 2022
2 parents 512b5f3 + 01c01e5 commit 7406eff
Show file tree
Hide file tree
Showing 8 changed files with 6,148 additions and 5,699 deletions.
6 changes: 6 additions & 0 deletions idaes/ui/flowsheet.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -703,6 +703,12 @@ def _create_link_jointjs_json(
"router": {"name": "manhattan", "padding": padding},
"connector": {"name": "jumpover", "attrs": {"line": {"stroke": "#5c9adb"}}},
"id": name,
"attrs": {
"line": {
"stroke": '#979797',
"stroke-width": 2
}
},
"labels": [
# This label MUST be first or the show/hide will fail
{
Expand Down
30 changes: 23 additions & 7 deletions idaes/ui/fsvis/static/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,6 @@ hr {

.idaes-container {
min-width: 800px;
min-height: 800px;
width: 90%;
height: 50%;
flex-grow: 1;
Expand All @@ -86,6 +85,8 @@ hr {
border-radius: 5px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.23);
border: solid 1px #e0e0e0;
resize: vertical;
overflow: auto;
}

#idaes-page-contents {
Expand Down Expand Up @@ -288,11 +289,6 @@ input:checked + .slider:before {
font-weight: bold;
}

.joint-type-standard-link path {
stroke: #979797;
stroke-width: 2;
}

.joint-type-standard-link tspan {
fill: #8d8d8d;
}
Expand Down Expand Up @@ -346,4 +342,24 @@ input:checked + .slider:before {
.streamtable-units {
opacity: 0.6;
float: right;
}
}

/* Styling the stream table column header that corresponds to the link mouseover event */
.link-streamtable-hover-columnheader {
border-top: 5px solid #0B79BD ;
border-left: 5px solid #0B79BD;
border-right: 5px solid #0B79BD;
}

/* Styling the last row in the stream table column that corresponds to the link mouseover event */
.link-streamtable-hover-lastrow {
border-bottom: 5px solid #0B79BD;
border-left: 5px solid #0B79BD;
border-right: 5px solid #0B79BD;
}

/* Styling the grid cell in the stream table column that corresponds to the link mouseover event */
.link-streamtable-hover {
border-left: 5px solid #0B79BD;
border-right: 5px solid #0B79BD;
}
2 changes: 1 addition & 1 deletion idaes/ui/fsvis/static/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export class App {
$('#idaes-fs-name').text(model.model.id); // set flowsheet name
var jjCellConfig = new JointJsCellConfig(model);
var processed_model = jjCellConfig.processRoutingConfig();
this.paper.graph.fromJSON(processed_model);
this.paper.setup(processed_model);
}

/**
Expand Down
123 changes: 110 additions & 13 deletions idaes/ui/fsvis/static/js/paper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,12 @@ export class Paper {
var height = 800;
var gridSize = 1;

// Default values for the highlighting events
this._originalLinkStroke = "#979797";
this._originalLinkStrokeWidth = 2;
this._highlightLinkStroke = "#0B79BD";
this._highlightLinkStrokeWidth = 4;

this._graph = new joint.dia.Graph([], { cellNamespace: { standard } });
this._paper = new joint.dia.Paper({
model: this._graph,
Expand Down Expand Up @@ -35,11 +41,10 @@ export class Paper {
// We want all of the elements to be the same width so set the width equal to the
// stream table
let stream_table = document.getElementById("stream-table");
$('#idaes-canvas').css({ width: stream_table.offsetWidth, height: stream_table.offsetHeight });
$('#idaes-canvas').css({ height: stream_table.offsetHeight });
$("#idaes-canvas")[0].append(self._paperScroller.render().el);

self.setupEvents();

self.preSetupRegisterEvents();
}

get graph() {
Expand All @@ -64,16 +69,46 @@ export class Paper {
return angle_translation[angle];
}

setupEvents() {
/**
* Register Events before the graph model is loaded
*/
preSetupRegisterEvents() {
let model_id = $("#idaes-fs-name").data("flowsheetId");
let url = "/fs?id=".concat(model_id);

// Getting the main elements for the idaes canvas and the stream table
// to be able to dispatch highlighting events to the streams existing
// on paper and in the stream table
let idaesCanvas = document.querySelector('#idaes-canvas');
let streamTable = document.querySelector('#stream-table-data');

// Setup paper resize on window resize
window.onresize = function() {
let stream_table = document.getElementById("stream-table");
$('#idaes-canvas').css({ width: stream_table.offsetWidth, height: stream_table.offsetHeight });
$('#idaes-canvas').css({ height: stream_table.offsetHeight });
}

// Registering listeners to idaes-canvas to highlight the correct
// streams in the paper
idaesCanvas.addEventListener('HighlightStream', (event) => {
const relatedLinkElement = idaesCanvas.querySelector(
`[model-id=${event.detail.streamId}]`
);
if (relatedLinkElement) {
relatedLinkElement.dispatchEvent(new Event('HighlightStream'));
}
});
// Registering listeners to idaes-canvas to remove the highlight from
// the correct streams in the paper
idaesCanvas.addEventListener('RemoveHighlightStream', (event) => {
const relatedLinkElement = idaesCanvas.querySelector(
`[model-id=${event.detail.streamId}]`
);
if (relatedLinkElement) {
relatedLinkElement.dispatchEvent(new Event('RemoveHighlightStream'));
}
});

// /images/icons rotate 90 degrees on right click. Replaces browser
// context menu
self._paper.on("element:contextmenu", function(cellView, evt) {
Expand All @@ -92,9 +127,10 @@ export class Paper {
}
});

// Adds link tools (adding vertices, moving segments) to links when your
// mouse over
self._paper.on("link:mouseover", function(cellView, evt) {
// Setup event when a link in the paper is hovered upon
self._paper.on("link:mouseenter", function(linkView) {
// Adds link tools (adding vertices, moving segments) to links when your
// mouse over
var verticesTool = new joint.linkTools.Vertices({
focusOpacity: 0.5,
redundancyRemoval: true,
Expand All @@ -108,13 +144,39 @@ export class Paper {
verticesTool, segmentsTool
]
});
cellView.addTools(toolsView)
cellView.showTools()
linkView.addTools(toolsView);
linkView.showTools();

// Highlight the corresponding Link and the column in the Stream Table
const highlightStreamEvent = new CustomEvent(
'HighlightStream',
{
detail: {
streamId: linkView.model.id
}
}
);
streamTable.dispatchEvent(highlightStreamEvent);
idaesCanvas.dispatchEvent(highlightStreamEvent);
});

// Removes the link tools when you leave the link
self._paper.on("link:mouseout", function(cellView, evt) {
cellView.hideTools()
// Setup event when the hovering over link ends
self._paper.on("link:mouseleave", function(linkView) {
// Removes the link tools when you leave the link
linkView.hideTools();

// Remove the highlight from the link and the column in the
// Stream Table when the hovering ends
const removeHighlightStreamEvent = new CustomEvent(
'RemoveHighlightStream',
{
detail: {
streamId: linkView.model.id
}
}
);
streamTable.dispatchEvent(removeHighlightStreamEvent);
idaesCanvas.dispatchEvent(removeHighlightStreamEvent);
});

// Send a post request to the server with the new this._graph
Expand Down Expand Up @@ -160,5 +222,40 @@ export class Paper {
}
});
}

/**
* Register Events after the graph model is loaded
*/
postSetupRegisterEvents() {
// Setup event listeners for the links in Paper/Graph
this._graph.getLinks().forEach((link) => {
let linkView = link.findView(this._paper);
linkView.el.addEventListener('HighlightStream', () => {
linkView.model.attr({
line: {
stroke: this._highlightLinkStroke,
'stroke-width': this._highlightLinkStrokeWidth
}
});
});

linkView.el.addEventListener('RemoveHighlightStream', () => {
linkView.model.attr({
line: {
stroke: this._originalLinkStroke,
'stroke-width': this._originalLinkStrokeWidth
}
});
});
});
}

/**
* Setup the graph model
*/
setup(model) {
this._graph.fromJSON(model);
this.postSetupRegisterEvents();
}

};
84 changes: 81 additions & 3 deletions idaes/ui/fsvis/static/js/stream_table.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export class StreamTable {
// There is an empty column because of the way that the pandas dataframe was oriented so
// only add the columns that don't have an empty column header
// Also ignore the "Units" column header
let column_header = columns[col]
let column_header = columns[col];
if (column_header !== "" && column_header !== "Units") {
// If the column_header is Variable then we don't want the column to be right-aligned and we want the column to be pinned to the left so when the user scrolls the column scrolls with them
if (column_header === "Variable") {
Expand All @@ -51,7 +51,14 @@ export class StreamTable {
}
// If the column header isn't "Variable" then we assume that the contents of the column are numbers so they should be right aligned
else {
column_defs.push({headerName: column_header, field: column_header, filter: 'agTextColumnFilter', sortable: true, resizable: true, cellStyle: {"text-align": "right"}});
column_defs.push({
headerName: column_header,
field: column_header,
filter: 'agTextColumnFilter',
sortable: true,
resizable: true,
cellStyle: {"text-align": "right"}
});
}
let list_item = document.createElement("li");
let checkbox_item = document.createElement("div");
Expand All @@ -73,7 +80,6 @@ export class StreamTable {
let data = data_arrays[var_index];
for (let col_index in columns) {
if (columns[col_index] === "Units") {
console.log("data[col_index]:", data[col_index]);
if (data[col_index] && data[col_index] !== 'None') {
row_object[variable_col] = row_object[variable_col] + '<span class="streamtable-units">' + data[col_index].html + '</span>';
}
Expand Down Expand Up @@ -128,5 +134,77 @@ export class StreamTable {
};
});
});

// Getting the main elements for the idaes canvas and the stream table
// to be able to dispatch highlighting events to the streams existing
// on paper and in the stream table
let streamTable = document.querySelector('#stream-table-data');
let idaesCanvas = document.querySelector('#idaes-canvas');

// Registering listeners to the stream table to highlight the correct
// streams in the stream table
streamTable.addEventListener('HighlightStream', (event) => {
var streamGridCells = streamTable.querySelectorAll(
`[col-id=${event.detail.streamId}]`
);
streamGridCells.forEach((gridCell, index) => {
if (gridCell.getAttribute('role') == 'columnheader') {
gridCell.classList.add('link-streamtable-hover-columnheader');
}
else if (index == streamGridCells.length - 1) {
gridCell.classList.add('link-streamtable-hover-lastrow');
}
else {
gridCell.classList.add('link-streamtable-hover');
}
});
});

// Registering listeners to idaes-canvas to remove the highlight from
// the correct streams in the stream table
streamTable.addEventListener('RemoveHighlightStream', (event) => {
var streamGridCells = streamTable.querySelectorAll(
`[col-id=${event.detail.streamId}]`
);
streamGridCells.forEach((gridCell) => {
gridCell.classList.remove('link-streamtable-hover-columnheader');
gridCell.classList.remove('link-streamtable-hover-lastrow');
gridCell.classList.remove('link-streamtable-hover');
});
});

let streamGridCells = document.querySelectorAll('[col-id]');
streamGridCells.forEach((gridCell) => {
// When the mouse hovers over a grid cell, the link as well as the
// stream column that represents the correct stream will be highlighted.
gridCell.addEventListener('mouseenter', function(event) {
const highlightStreamEvent = new CustomEvent(
'HighlightStream',
{
detail: {
streamId: event.target.attributes['col-id'].value
}
}
);
streamTable.dispatchEvent(highlightStreamEvent);
idaesCanvas.dispatchEvent(highlightStreamEvent);
});

// When the mouse leaves a grid cell, the link as well as the
// stream column that represents the correct stream will remove
// the highlighting feature.
gridCell.addEventListener('mouseleave', function(event) {
const removeHighlightStreamEvent = new CustomEvent(
'RemoveHighlightStream',
{
detail: {
streamId: event.target.attributes['col-id'].value
}
}
);
streamTable.dispatchEvent(removeHighlightStreamEvent);
idaesCanvas.dispatchEvent(removeHighlightStreamEvent);
});
});
};
};
Loading

0 comments on commit 7406eff

Please sign in to comment.