Skip to content

Commit

Permalink
Linework improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexkb0009
alexkb0009 committed Mar 13, 2020
1 parent d9f2376 commit 20eb68f
Show file tree
Hide file tree
Showing 5 changed files with 73 additions and 59 deletions.
4 changes: 4 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,10 @@ When it completes, load `file:///path-to-your-checkout/react-workflow-viz/index.
## Changelog
_Side Note -_ Is there a way to auto-generate a `CHANGELOG.md` file out of releases' content?

#### 2020-03-13
- Improvements in path plotting - do not diverge into separate paths unless necessary.
- Demo updates.

#### 2020-01-21
- Important glitch fixes, including typo and intersection counting.
- PROTOTYPE / NOT ENABLED: Reuse horizontal edge segments (to reduce # of lines; noise) if:
Expand Down
4 changes: 1 addition & 3 deletions gulpfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,9 +162,7 @@ function doWatchScss(done){
"./src/styles.scss",
"./dist/react-workflow-viz.min.css",
"--watch",
"--recursive",
"--source-map",
"--source-map-embed"
"--recursive"
], { stdio: "inherit" });

subP.on("close", (code)=>{
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@hms-dbmi-bgm/react-workflow-viz",
"version": "0.1.2",
"version": "0.1.3",
"description": "React component for visualizing CWL-like workflows and provenance graphs.",
"main": "./dist/react-workflow-viz.min.js",
"unpkg": "./dist/react-workflow-viz.min.js",
Expand Down
116 changes: 64 additions & 52 deletions src/components/EdgesLayer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ export function traceEdges(

function assembleSegments(segmentQ, subdivisionsUsed = 4){

const usedSegments = new Map(); // (segment, [source, target])
const usedSegments = new Map(); // (segment, [[source, target], ...])
const segmentQLen = segmentQ.length;

/**
Expand All @@ -102,7 +102,7 @@ export function traceEdges(
let closestSegmentDiff = Infinity;
let closestSegmentIdx = -1;
let currSegment = null, currSegmentY = 0, currExistingSegmentNodes = null, currDiff = null;
let i, j, prevEdge, prevVs, multiplier = 1, intersections = 0;
let i, j, prevEdge, prevVs, multiplier = 1, intersections = 0, willDiverge = false;
for (i = 0; i < segmentQLen; i++){
currSegment = segmentQ[i];
currSegmentY = currSegment[0][1];
Expand All @@ -114,19 +114,24 @@ export function traceEdges(
// Skip used segments unless (going to same target node) or (from same source node and on same Y coord).
currExistingSegmentNodes = usedSegments.get(currSegment);
if (currExistingSegmentNodes){
continue;
// Use below for experiment with converging / shared path for common source/target nodes.
// if (!(currExistingSegmentNodes[1] === target || (currExistingSegmentNodes[0] === source && currSegmentY === prevYCoord))){
willDiverge = _.every(currExistingSegmentNodes, function([ exSrc, exTgt ]){ return exSrc === source; });
// if (!(
// willDiverge || // (below) Gets a little confusing if converge esp in order/grouping. `currSegmentY === prevYCoord` addresses this somewhat.
// (_.every(currExistingSegmentNodes, function([ exSrc, exTgt ]){ return exTgt === target; }) && currSegmentY === prevYCoord)
// )) {
// continue;
// }
if (!willDiverge) {
continue;
}
}

//currDiff = Math.abs(yCoordMedian - currSegmentY);
if (currSegmentY > upperY){
currDiff = currSegmentY - upperY;
} else if (currSegmentY < lowerY){
currDiff = lowerY - currSegmentY;
} else if (currExistingSegmentNodes) {
} else if (willDiverge) {
currDiff = -0.01;
} else {
//{
Expand All @@ -136,53 +141,56 @@ export function traceEdges(
currDiff = Math.abs(prevYCoord - currSegmentY) * 0.01;
}

// Check for intersections, add to score
intersections = 0;
for (j = 0; j < prevEdgesLen; j++){
prevEdge = previousEdges[j];
if (Array.isArray(prevEdge.vertices)){
prevVs = prevEdge.vertices;
multiplier = 2;
} else {
prevVs = [
[ prevEdge.source.x + columnWidth, prevEdge.source.y ],
[ prevEdge.target.x, prevEdge.target.y ]
];
multiplier = 1;
}

prevVs.reduce(function(prevV, v){
if (!prevV) return v; // First V
// Check for intersections, add to score (unless reusing existing segment)
if (!currExistingSegmentNodes) {
intersections = 0;
for (j = 0; j < prevEdgesLen; j++){
prevEdge = previousEdges[j];
if (Array.isArray(prevEdge.vertices)){
prevVs = prevEdge.vertices;
multiplier = 2;
} else {
prevVs = [
[ prevEdge.source.x + columnWidth, prevEdge.source.y ],
[ prevEdge.target.x, prevEdge.target.y ]
];
multiplier = 1;
}

if (!(prevV[0] + nodeEdgeLedgeWidths[0] < startXForCol && v[0] >= startXForCol - nodeEdgeLedgeWidths[0])){
prevVs.reduce(function(prevV, v){
if (!prevV) return v; // First V

if (!(prevV[0] + nodeEdgeLedgeWidths[0] < startXForCol && v[0] >= startXForCol - nodeEdgeLedgeWidths[0])){
return v;
}
// if (source.name === "chromsize" && columnIdx === 2) {
// console.log('TTTX\n', v, '\n', prevV, '\n', columnIdx, intersections);
// }
if (
(v[1] > currSegmentY && prevV[1] < prevYCoord) ||
(v[1] < currSegmentY && prevV[1] > prevYCoord)
) {
// Boost 'any' intersections
// Multiplier allows us to try to avoid intersecting
// bigger lines moreso than smaller ones
if (intersections === 0) intersections += 2 * multiplier;
intersections += multiplier;
//if (startXForCol> 1400 && startXForCol < 1600){
// console.log('X', v[0], v[1], '<-', prevV[0], prevV[1]);
//}
}
return v;
}
// if (source.name === "chromsize" && columnIdx === 2) {
// console.log('TTTX\n', v, '\n', prevV, '\n', columnIdx, intersections);
// }
if (
(v[1] > currSegmentY && prevV[1] < prevYCoord) ||
(v[1] < currSegmentY && prevV[1] > prevYCoord)
) {
// Boost 'any' intersections
// Multiplier allows us to try to avoid intersecting
// bigger lines moreso than smaller ones
if (intersections === 0) intersections += 2 * multiplier;
intersections += multiplier;
//if (startXForCol> 1400 && startXForCol < 1600){
// console.log('X', v[0], v[1], '<-', prevV[0], prevV[1]);
//}
}
return v;
}, null);
}, null);

}
}

// if (source.name === "chromsize" && columnIdx === 2) {
// console.log('TTT', previousEdges.slice(), columnIdx, currSegmentY, intersections);
// }

// if (source.name === "chromsize" && columnIdx === 2) {
// console.log('TTT', previousEdges.slice(), columnIdx, currSegmentY, intersections);
// }
currDiff += (intersections * (rowSpacing * 0.8));

currDiff += (intersections * (rowSpacing * 0.8));
} // end intersection checking

//if (startXForCol> 1400 && startXForCol < 1600){
// console.log('INT', currDiff, currSegmentY, intersections, prevYCoord);
Expand All @@ -201,8 +209,10 @@ export function traceEdges(
}

const bestSegment = segmentQ[closestSegmentIdx];
if (!usedSegments.get(bestSegment)){
usedSegments.set(bestSegment, [ source, target ]);
if (currExistingSegmentNodes) {
currExistingSegmentNodes.push([ source, target ]);
} else {
usedSegments.set(bestSegment, [[ source, target ]]);
}
return bestSegment;
}
Expand Down Expand Up @@ -246,12 +256,14 @@ export function traceEdges(
const { column: sourceCol, x: sourceX, y: sourceY } = source;
const { column: targetCol, x: targetX, y: targetY } = target;
const columnDiff = targetCol - sourceCol;

if (columnDiff <= 0){
// Shouldn't happen I don't think except if file is re-used/generated or some other unexpected condition.
console.error("Target column is greater than source column", source, target);
resultEdges.push(edge);
return; // Skip tracing it.
}

if (columnDiff === 1){
resultEdges.push(edge);
return; // Doesn't need to go around obstacles, skip.
Expand All @@ -274,8 +286,8 @@ export function traceEdges(
throw new Error("Could not find viable path for edge");
}
const [ [ bsX, bsY ], [ beX, beY ] ] = bestSegment;
// const origSrcTrg = usedSegments.get(bestSegment);
// const isReusedSource = origSrcTrg[0] === source && origSrcTrg[1] !== target;
//const origSrcTrg = usedSegments.get(bestSegment);
//const isReusedSource = origSrcTrg[0] === source && origSrcTrg[1] !== target;
vertices.push([ bsX - nodeEdgeLedgeWidths[0], bsY ]);
vertices.push([ beX + nodeEdgeLedgeWidths[1], beY ]);
prevY = beY;
Expand Down
6 changes: 3 additions & 3 deletions src/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -470,7 +470,7 @@ $workflow-node-color-type-global-context: #ffb3b3 !default;
path {
pointer-events: all;
stroke: #888;
stroke: rgba(58,58,58,0.75);
// stroke: rgba(58,58,58,0.75);
fill: none;
stroke-width: 1px;
stroke-width: 1.5px;
Expand All @@ -486,8 +486,8 @@ $workflow-node-color-type-global-context: #ffb3b3 !default;

&.disabled:not([data-edge-selected="true"]):not([data-edge-related="true"]) {
stroke-width: 1px;
//stroke: #bbb;
stroke: rgba(0,0,0,0.33);
stroke: #bbb;
//stroke: rgba(0,0,0,0.33);
}
&[data-edge-selected="true"]{
stroke-width: 3px;
Expand Down

0 comments on commit 20eb68f

Please sign in to comment.