debian-mirror-gitlab/app/assets/javascripts/pipelines/components/dag/interactions.js

155 lines
4.6 KiB
JavaScript
Raw Normal View History

2020-06-23 00:09:42 +05:30
import * as d3 from 'd3';
import { LINK_SELECTOR, NODE_SELECTOR, IS_HIGHLIGHTED } from './constants';
export const highlightIn = 1;
export const highlightOut = 0.2;
const getCurrent = (idx, collection) => d3.select(collection[idx]);
2020-07-28 23:09:34 +05:30
const getLiveLinks = () => d3.selectAll(`.${LINK_SELECTOR}.${IS_HIGHLIGHTED}`);
2020-06-23 00:09:42 +05:30
const getOtherLinks = () => d3.selectAll(`.${LINK_SELECTOR}:not(.${IS_HIGHLIGHTED})`);
const getNodesNotLive = () => d3.selectAll(`.${NODE_SELECTOR}:not(.${IS_HIGHLIGHTED})`);
2020-07-28 23:09:34 +05:30
export const getLiveLinksAsDict = () => {
return Object.fromEntries(
getLiveLinks()
.data()
2021-03-08 18:12:59 +05:30
.map((d) => [d.uid, d]),
2020-07-28 23:09:34 +05:30
);
};
export const currentIsLive = (idx, collection) =>
getCurrent(idx, collection).classed(IS_HIGHLIGHTED);
2021-03-08 18:12:59 +05:30
const backgroundLinks = (selection) => selection.style('stroke-opacity', highlightOut);
const backgroundNodes = (selection) => selection.attr('stroke', '#f2f2f2');
const foregroundLinks = (selection) => selection.style('stroke-opacity', highlightIn);
const foregroundNodes = (selection) => selection.attr('stroke', (d) => d.color);
2020-06-23 00:09:42 +05:30
const renewLinks = (selection, baseOpacity) => selection.style('stroke-opacity', baseOpacity);
2021-03-08 18:12:59 +05:30
const renewNodes = (selection) => selection.attr('stroke', (d) => d.color);
2020-06-23 00:09:42 +05:30
2021-03-08 18:12:59 +05:30
export const getAllLinkAncestors = (node) => {
2020-06-23 00:09:42 +05:30
if (node.targetLinks) {
2021-03-08 18:12:59 +05:30
return node.targetLinks.flatMap((n) => {
2020-07-28 23:09:34 +05:30
return [n, ...getAllLinkAncestors(n.source)];
2020-06-23 00:09:42 +05:30
});
}
return [];
};
2021-03-08 18:12:59 +05:30
const getAllNodeAncestors = (node) => {
2020-06-23 00:09:42 +05:30
let allNodes = [];
if (node.targetLinks) {
2021-03-08 18:12:59 +05:30
allNodes = node.targetLinks.flatMap((n) => {
2020-06-23 00:09:42 +05:30
return getAllNodeAncestors(n.source);
});
}
return [...allNodes, node.uid];
};
export const highlightLinks = (d, idx, collection) => {
const currentLink = getCurrent(idx, collection);
const currentSourceNode = d3.select(`#${d.source.uid}`);
const currentTargetNode = d3.select(`#${d.target.uid}`);
/* Higlight selected link, de-emphasize others */
backgroundLinks(getOtherLinks());
foregroundLinks(currentLink);
/* Do the same to related nodes */
backgroundNodes(getNodesNotLive());
foregroundNodes(currentSourceNode);
foregroundNodes(currentTargetNode);
};
const highlightPath = (parentLinks, parentNodes) => {
/* de-emphasize everything else */
backgroundLinks(getOtherLinks());
backgroundNodes(getNodesNotLive());
/* highlight correct links */
2020-07-28 23:09:34 +05:30
parentLinks.forEach(({ uid }) => {
foregroundLinks(d3.select(`#${uid}`)).classed(IS_HIGHLIGHTED, true);
2020-06-23 00:09:42 +05:30
});
/* highlight correct nodes */
2021-03-08 18:12:59 +05:30
parentNodes.forEach((id) => {
2020-06-23 00:09:42 +05:30
foregroundNodes(d3.select(`#${id}`)).classed(IS_HIGHLIGHTED, true);
});
};
2020-07-28 23:09:34 +05:30
const restoreNodes = () => {
/*
When paths are unclicked, they can take down nodes that
are still in use for other paths. This checks the live paths and
rehighlights their nodes.
*/
2021-03-08 18:12:59 +05:30
getLiveLinks().each((d) => {
2020-07-28 23:09:34 +05:30
foregroundNodes(d3.select(`#${d.source.uid}`)).classed(IS_HIGHLIGHTED, true);
foregroundNodes(d3.select(`#${d.target.uid}`)).classed(IS_HIGHLIGHTED, true);
});
};
2020-06-23 00:09:42 +05:30
const restorePath = (parentLinks, parentNodes, baseOpacity) => {
2020-07-28 23:09:34 +05:30
parentLinks.forEach(({ uid }) => {
renewLinks(d3.select(`#${uid}`), baseOpacity).classed(IS_HIGHLIGHTED, false);
2020-06-23 00:09:42 +05:30
});
2021-03-08 18:12:59 +05:30
parentNodes.forEach((id) => {
2020-06-23 00:09:42 +05:30
d3.select(`#${id}`).classed(IS_HIGHLIGHTED, false);
});
if (d3.selectAll(`.${IS_HIGHLIGHTED}`).empty()) {
renewLinks(getOtherLinks(), baseOpacity);
renewNodes(getNodesNotLive());
return;
}
backgroundLinks(getOtherLinks());
backgroundNodes(getNodesNotLive());
2020-07-28 23:09:34 +05:30
restoreNodes();
2020-06-23 00:09:42 +05:30
};
2021-03-08 18:12:59 +05:30
export const restoreLinks = (baseOpacity) => {
2020-06-23 00:09:42 +05:30
/*
if there exist live links, reset to highlight out / pale
otherwise, reset to base
*/
if (d3.selectAll(`.${IS_HIGHLIGHTED}`).empty()) {
renewLinks(d3.selectAll(`.${LINK_SELECTOR}`), baseOpacity);
renewNodes(d3.selectAll(`.${NODE_SELECTOR}`));
return;
}
backgroundLinks(getOtherLinks());
backgroundNodes(getNodesNotLive());
};
export const toggleLinkHighlight = (baseOpacity, d, idx, collection) => {
if (currentIsLive(idx, collection)) {
2020-07-28 23:09:34 +05:30
restorePath([d], [d.source.uid, d.target.uid], baseOpacity);
restoreNodes();
2020-06-23 00:09:42 +05:30
return;
}
2020-07-28 23:09:34 +05:30
highlightPath([d], [d.source.uid, d.target.uid]);
2020-06-23 00:09:42 +05:30
};
export const togglePathHighlights = (baseOpacity, d, idx, collection) => {
const parentLinks = getAllLinkAncestors(d);
const parentNodes = getAllNodeAncestors(d);
const currentNode = getCurrent(idx, collection);
/* if this node is already live, make it unlive and reset its path */
if (currentIsLive(idx, collection)) {
currentNode.classed(IS_HIGHLIGHTED, false);
restorePath(parentLinks, parentNodes, baseOpacity);
return;
}
highlightPath(parentLinks, parentNodes);
};