Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Add link with custom color in existing graph #170

Merged
merged 3 commits into from
Feb 3, 2019
Merged

fix: Add link with custom color in existing graph #170

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e2a8bb8
fix: Add link with custom color in existing graph
LonelyPrincess Jan 31, 2019
e361a3d
Whitelist new exposed props
danielcaldas Feb 3, 2019
28faa17
Make _mapDataLinkToD3Link work properly by picking custom props
danielcaldas Feb 3, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 9 additions & 2 deletions src/components/graph/graph.helper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ import utils from "../../utils";
import { computeNodeDegree } from "./collapse.helper";

const NODE_PROPS_WHITELIST = ["id", "highlighted", "x", "y", "index", "vy", "vx"];
const LINK_CUSTOM_PROPS_WHITELIST = ["color", "opacity", "strokeWidth"];

/**
* Create d3 forceSimulation to be applied on the graph.<br/>
Expand Down Expand Up @@ -137,17 +138,22 @@ function _initializeNodes(graphNodes) {
*/
function _mapDataLinkToD3Link(link, index, d3Links = [], config, state = {}) {
const d3Link = d3Links[index];
const customProps = utils.pick(link, LINK_CUSTOM_PROPS_WHITELIST);

if (d3Link) {
const toggledDirected = state.config && state.config.directed && config.directed !== state.config.directed;
const refinedD3Link = {
...d3Link,
...customProps,
};

// every time we toggle directed config all links should be visible again
if (toggledDirected) {
return { ...d3Link, isHidden: false };
return { ...refinedD3Link, isHidden: false };
}

// every time we disable collapsible (collapsible is false) all links should be visible again
return config.collapsible ? d3Link : { ...d3Link, isHidden: false };
return config.collapsible ? refinedD3Link : { ...refinedD3Link, isHidden: false };
}

const highlighted = false;
Expand All @@ -164,6 +170,7 @@ function _mapDataLinkToD3Link(link, index, d3Links = [], config, state = {}) {
index,
source,
target,
...customProps,
};
}

Expand Down