@hailer-oy/birds-eye
Version:
This component library directory contains all the react components for Hailer Bird's Eye! Developing these componets happens [here](https://github.com/KvanttoriOy/birds-eye/tree/master/birds-eye-components), only copy your changes in lib from there to src
1,540 lines (1,315 loc) • 64.9 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var React = require('react');
var React__default = _interopDefault(React);
var d3 = require('d3');
var cg = require('react-icons/cg');
var domtoimage = _interopDefault(require('dom-to-image'));
var md = require('react-icons/md');
var ReactToPrint = _interopDefault(require('react-to-print'));
require('highlight.js/styles/atom-one-light.css');
var Highlight = _interopDefault(require('react-highlight'));
/**
* This function assigns be_transparent class to the desired nodes.
* This is used in highighting the correct nodes when clicked.
*
* @author Juhana Kuparinen <juhana.kuparinen@kvanttori.fi>
*/
function highlightNodes(_ref, node) {
var nodes = _ref.nodes,
links = _ref.links;
// Finding the desired links and nodes to highlight
var visibleLinks = links.filter(function (link) {
return link.source === node || link.target === node;
});
var highlightedNodes = nodes.filter(function (node) {
return visibleLinks.find(function (l) {
return l.source === node.id || l.target === node.id;
});
}); // Fixes a bug, where some of the paths won't highlight correctly, don't know why :/
d3.selectAll("#be_graph > g > g path").attr("class", function () {
return "be_transparent";
}); // Highlighting links
links.forEach(function (link) {
d3.select("#" + link.id).attr("class", function () {
var show = visibleLinks.some(function (vL) {
return vL.id === link.id;
});
return show ? "" : "be_transparent";
});
}); // Highlighting nodes
nodes.forEach(function (node) {
d3.select("#g" + node.id).attr("class", function () {
var show = highlightedNodes.some(function (hN) {
return hN.id === node.id;
});
return show ? "" : "be_transparent";
});
}); // Higlighting the clicked node, this is for when a node has no links
d3.select("#g" + node).attr("class", "");
}
function unHighlightNodes() {
var transparent = document.getElementsByClassName("be_transparent");
while (transparent.length) {
transparent[0].classList.remove("be_transparent");
}
}
/**
* This hook renders D3.js charts into react with
* the provided function. Returns a ref which must be put
* into the svg we want to render our chart in.
*
* @author Juhana Kuparinen <juhana.kuparinen@kvanttori.fi>
*/
var useD3 = function useD3(renderChartFn, dependencies) {
var ref = React.useRef(null);
React.useEffect(function () {
renderChartFn(d3.select('#be_graph'));
return function () {
d3.selectAll("#be_graph > *").remove();
};
}, dependencies);
return ref;
};
var fixateNodes = function fixateNodes(node, thisNode) {
node.each(function (d) {
if (thisNode != d) {
d.fx = d.x;
d.fy = d.y;
}
});
};
/**
* Implements dragging behaviour to nodes in the workspace chart
*
* @author Juhana Kuparinen <juhana.kuparinen@kvanttori.fi>
*/
var drag = function drag(simulation, node) {
// Drag start
function dragStarted(event) {
if (!event.active) simulation.alphaTarget(0.3).restart();
event.subject.fx = event.subject.x;
event.subject.fy = event.subject.y;
} // During drag
function dragged(event, d) {
event.subject.fx = event.x;
event.subject.fy = event.y;
fixateNodes(node, d);
}
return d3.drag().on("start", dragStarted).on("drag", dragged);
};
/**
* Implements zoom and pan into the chart.
*
* @author Juhana Kuparinen <juhana.kuparinen@kvanttori.fi>
*/
var zoom = function zoom(svg) {
function zoomed(event) {
var transform = event.transform; // setGraphTransform(transform); // Saving our current transform, incase of rerenders, implement if necessary
svg.attr("transform", transform);
}
return d3.zoom().scaleExtent([1 / 4, 8]) // Defining how much we can zoom the map
.on("zoom", zoomed);
};
/**
* @file Contains constants used troughout the d3 code.
*
* @author Juhana Kuparinen <juhana.kuparinen@kvanttori.fi>
*/
var RADIUS = 2;
var ARROW = 2.8;
var STROKE_WIDTH = 0.5;
var TEXT_SIZE = 0.2; // Not used at the moment, save graph size between rerenders
// export let graphTransform: null | string = null;
// export const setGraphTransform = (value: string) => (graphTransform = value);
/**
* Calculates the physical size of the string.
* This function does not do its job perfectly, maybe wrap the rect and the text into a group?
*
* @author Teemu Salonen <teemu.salonen@kvanttori.fi>
*/
var calculateNameSize = function calculateNameSize(name) {
// Logic for the following strings:
// Similar (approximated) values of sizes by width in pixels
var length = 0;
var capitals = "ABCDEFGHJKLMNOPQRSTUVWXYZ/()";
var letters = "Iabcdefghjkmnopqrstuvwxyz0123456789";
var smallOnes = "il ";
for (var i = 0; i < name.length; i++) {
if (capitals.includes(name.charAt(i))) {
length += 1.5;
} else if (letters.includes(name.charAt(i))) {
length += 1;
} else if (smallOnes.includes(name.charAt(i))) {
length += 0.85;
} else {
length += 2;
}
}
return length;
};
/**
* Draws the workspace map as an SVG using D3.js.
*
* TODO: remove use of any (create typings for renderChartFn in hooks/useD3.ts)
* This is a pretty hard task, props to whoever can solve this!
*
* @author Juhana Kuparinen <juhana.kuparinen@kvanttori.fi>
* @author Teemu Salonen <teemu.salonen@kvanttori.fi>
*/
function draw(simulation, nodes, links, graph, svg, updateNode) {
var link = graph.append("g").attr("stroke", "#666666").attr("stroke-opacity", 0.6).selectAll("path").data(links).join("path").attr("marker-end", "url(#arrow)") //attach the arrow from defs
.attr("id", function (d) {
return d.id;
}).style("stroke-width", STROKE_WIDTH);
var node = graph.append("g") //append a g tag in the svg
.selectAll("g") // select all circles within the g tag (hint: there's none)
.data(nodes) // bind data to those circles (we have node amount missing circles)
.enter() // give me all the missing circles
.append("g").attr("id", function (d) {
return "g" + d.id;
});
var circle = node.append("circle").attr("r", RADIUS).attr("cursor", "pointer").attr("id", function (d) {
return d.id;
}).attr("fill", function (d) {
return d.group === "dataset" ? "var(--primary-500, #253c56)" : d.group === "undefined" ? "#922a2a" : "var(--accent-800, #138637)";
}).on("click", function (d) {
return updateNode(d.target.id);
}).call(drag(simulation, node));
var rect = node.append("rect") // create rectangles
.attr("height", "4").attr("fill", "#FFFF").attr("opacity", "1").attr("stroke-width", ".2").attr("stroke", "rgba(0, 0, 0, 0.5").attr("rx", 1.5).attr("ry", 1.5).call(drag(simulation, node));
var text = node.append("text").attr("font-size", TEXT_SIZE + "rem").attr("fill", "#333333").attr("font-weight", "bold").text(function (d) {
return d.name;
});
node.append("title").text(function (d) {
return d.name;
}); // Creating a new svg def, where we store our arrow marker for later use...
graph.append("svg:defs").append("svg:marker").attr("id", "arrow").attr("viewBox", "0 -5 10 10").attr("refX", 25) //so that it comes towards the center.
.attr("markerWidth", ARROW).attr("markerHeight", ARROW).attr("orient", "auto").append("svg:path").attr("d", "M0,-5L10,0L0,5");
graph.append("svg:defs").append("svg:marker").attr("id", "arrow-red").attr("viewBox", "0 -5 10 10").attr("refX", 25) //so that it comes towards the center.
.attr("markerWidth", ARROW).attr("markerHeight", ARROW).attr("orient", "auto").attr("fill", "red").append("svg:path").attr("d", "M0,-5L10,0L0,5"); // Setting saved zoom, so graph rerender doesn't reset it
// if(graphTransform) graph.attr('transform', graphTransform);
var calcXPos = function calcXPos(d) {
return d.x - d.name.length * Math.pow(0.994, d.name.length) + d.name.length / 10;
};
simulation.on("tick", function () {
link.attr("d", function (d) {
return "M" + d.source.x + "," + d.source.y + "," + d.target.x + "," + d.target.y;
}); // TODO: implement better solution for calculateNameSize
rect.attr("x", function (d) {
return d.x - calculateNameSize(d.name) * 0.92;
}).attr("y", function (d) {
return d.y - 8;
}).attr("width", function (d) {
return calculateNameSize(d.name) * 1.9;
});
circle.attr("cx", function (d) {
return d.x;
}).attr("cy", function (d) {
return d.y;
});
text.attr("x", function (d) {
return calcXPos(d);
}).attr("y", function (d) {
return d.y - 4.8;
});
});
svg.attr("width", 500).attr("height", 600); // Implementing zoom and pan
var zoomHandler = zoom(graph);
zoomHandler(svg);
}
var width = 1200;
var height = 800;
/**
* Starts the simulation of forces between nodes in the workspace map.
* Also calls the draw function to draw our map.
*
* TODO: remove use of any (create typings for renderChartFn in hooks/useD3.ts)
*
* @author Juhana Kuparinen <juhana.kuparinen@kvanttori.fi>
* @author Teemu Salonen <teemu.salonen@kvanttori.fi>
*/
var forceSimulation = function forceSimulation(svg, data, updateNode) {
var links = data.links.map(function (e) {
return Object.create(e);
});
var nodes = data.nodes.map(function (n) {
return Object.create(n);
});
var simulation = d3.forceSimulation(nodes).force('collision', d3.forceCollide().radius(15)).force('charge', d3.forceManyBody().strength(-80)).force('link', d3.forceLink(links).id(function (d) {
return d.id;
})).force("center", d3.forceCenter(width / 2, height / 2)).force("x", d3.forceX()).force("y", d3.forceY());
var graph = svg.append("g");
draw(simulation, nodes, links, graph, svg, updateNode);
return svg.node();
};
var ForceChart = function ForceChart(_ref) {
var data = _ref.data,
updateNode = _ref.updateNode;
var ref = useD3(function (svg) {
return forceSimulation(svg, data, updateNode);
}, [data]);
return React__default.createElement("div", {
className: "be_ForceChart"
}, React__default.createElement("figure", {
className: "be_ForceChartFigure"
}, React__default.createElement("svg", {
ref: ref,
id: 'be_graph'
})));
};
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
try {
var info = gen[key](arg);
var value = info.value;
} catch (error) {
reject(error);
return;
}
if (info.done) {
resolve(value);
} else {
Promise.resolve(value).then(_next, _throw);
}
}
function _asyncToGenerator(fn) {
return function () {
var self = this,
args = arguments;
return new Promise(function (resolve, reject) {
var gen = fn.apply(self, args);
function _next(value) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
}
function _throw(err) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
}
_next(undefined);
});
};
}
function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
function _createForOfIteratorHelperLoose(o, allowArrayLike) {
var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
if (it) return (it = it.call(o)).next.bind(it);
if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
if (it) o = it;
var i = 0;
return function () {
if (i >= o.length) return {
done: true
};
return {
done: false,
value: o[i++]
};
};
}
throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function createCommonjsModule(fn, module) {
return module = { exports: {} }, fn(module, module.exports), module.exports;
}
var runtime_1 = createCommonjsModule(function (module) {
/**
* Copyright (c) 2014-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var runtime = (function (exports) {
var Op = Object.prototype;
var hasOwn = Op.hasOwnProperty;
var undefined$1; // More compressible than void 0.
var $Symbol = typeof Symbol === "function" ? Symbol : {};
var iteratorSymbol = $Symbol.iterator || "@@iterator";
var asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator";
var toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag";
function define(obj, key, value) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
return obj[key];
}
try {
// IE 8 has a broken Object.defineProperty that only works on DOM objects.
define({}, "");
} catch (err) {
define = function(obj, key, value) {
return obj[key] = value;
};
}
function wrap(innerFn, outerFn, self, tryLocsList) {
// If outerFn provided and outerFn.prototype is a Generator, then outerFn.prototype instanceof Generator.
var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator;
var generator = Object.create(protoGenerator.prototype);
var context = new Context(tryLocsList || []);
// The ._invoke method unifies the implementations of the .next,
// .throw, and .return methods.
generator._invoke = makeInvokeMethod(innerFn, self, context);
return generator;
}
exports.wrap = wrap;
// Try/catch helper to minimize deoptimizations. Returns a completion
// record like context.tryEntries[i].completion. This interface could
// have been (and was previously) designed to take a closure to be
// invoked without arguments, but in all the cases we care about we
// already have an existing method we want to call, so there's no need
// to create a new function object. We can even get away with assuming
// the method takes exactly one argument, since that happens to be true
// in every case, so we don't have to touch the arguments object. The
// only additional allocation required is the completion record, which
// has a stable shape and so hopefully should be cheap to allocate.
function tryCatch(fn, obj, arg) {
try {
return { type: "normal", arg: fn.call(obj, arg) };
} catch (err) {
return { type: "throw", arg: err };
}
}
var GenStateSuspendedStart = "suspendedStart";
var GenStateSuspendedYield = "suspendedYield";
var GenStateExecuting = "executing";
var GenStateCompleted = "completed";
// Returning this object from the innerFn has the same effect as
// breaking out of the dispatch switch statement.
var ContinueSentinel = {};
// Dummy constructor functions that we use as the .constructor and
// .constructor.prototype properties for functions that return Generator
// objects. For full spec compliance, you may wish to configure your
// minifier not to mangle the names of these two functions.
function Generator() {}
function GeneratorFunction() {}
function GeneratorFunctionPrototype() {}
// This is a polyfill for %IteratorPrototype% for environments that
// don't natively support it.
var IteratorPrototype = {};
define(IteratorPrototype, iteratorSymbol, function () {
return this;
});
var getProto = Object.getPrototypeOf;
var NativeIteratorPrototype = getProto && getProto(getProto(values([])));
if (NativeIteratorPrototype &&
NativeIteratorPrototype !== Op &&
hasOwn.call(NativeIteratorPrototype, iteratorSymbol)) {
// This environment has a native %IteratorPrototype%; use it instead
// of the polyfill.
IteratorPrototype = NativeIteratorPrototype;
}
var Gp = GeneratorFunctionPrototype.prototype =
Generator.prototype = Object.create(IteratorPrototype);
GeneratorFunction.prototype = GeneratorFunctionPrototype;
define(Gp, "constructor", GeneratorFunctionPrototype);
define(GeneratorFunctionPrototype, "constructor", GeneratorFunction);
GeneratorFunction.displayName = define(
GeneratorFunctionPrototype,
toStringTagSymbol,
"GeneratorFunction"
);
// Helper for defining the .next, .throw, and .return methods of the
// Iterator interface in terms of a single ._invoke method.
function defineIteratorMethods(prototype) {
["next", "throw", "return"].forEach(function(method) {
define(prototype, method, function(arg) {
return this._invoke(method, arg);
});
});
}
exports.isGeneratorFunction = function(genFun) {
var ctor = typeof genFun === "function" && genFun.constructor;
return ctor
? ctor === GeneratorFunction ||
// For the native GeneratorFunction constructor, the best we can
// do is to check its .name property.
(ctor.displayName || ctor.name) === "GeneratorFunction"
: false;
};
exports.mark = function(genFun) {
if (Object.setPrototypeOf) {
Object.setPrototypeOf(genFun, GeneratorFunctionPrototype);
} else {
genFun.__proto__ = GeneratorFunctionPrototype;
define(genFun, toStringTagSymbol, "GeneratorFunction");
}
genFun.prototype = Object.create(Gp);
return genFun;
};
// Within the body of any async function, `await x` is transformed to
// `yield regeneratorRuntime.awrap(x)`, so that the runtime can test
// `hasOwn.call(value, "__await")` to determine if the yielded value is
// meant to be awaited.
exports.awrap = function(arg) {
return { __await: arg };
};
function AsyncIterator(generator, PromiseImpl) {
function invoke(method, arg, resolve, reject) {
var record = tryCatch(generator[method], generator, arg);
if (record.type === "throw") {
reject(record.arg);
} else {
var result = record.arg;
var value = result.value;
if (value &&
typeof value === "object" &&
hasOwn.call(value, "__await")) {
return PromiseImpl.resolve(value.__await).then(function(value) {
invoke("next", value, resolve, reject);
}, function(err) {
invoke("throw", err, resolve, reject);
});
}
return PromiseImpl.resolve(value).then(function(unwrapped) {
// When a yielded Promise is resolved, its final value becomes
// the .value of the Promise<{value,done}> result for the
// current iteration.
result.value = unwrapped;
resolve(result);
}, function(error) {
// If a rejected Promise was yielded, throw the rejection back
// into the async generator function so it can be handled there.
return invoke("throw", error, resolve, reject);
});
}
}
var previousPromise;
function enqueue(method, arg) {
function callInvokeWithMethodAndArg() {
return new PromiseImpl(function(resolve, reject) {
invoke(method, arg, resolve, reject);
});
}
return previousPromise =
// If enqueue has been called before, then we want to wait until
// all previous Promises have been resolved before calling invoke,
// so that results are always delivered in the correct order. If
// enqueue has not been called before, then it is important to
// call invoke immediately, without waiting on a callback to fire,
// so that the async generator function has the opportunity to do
// any necessary setup in a predictable way. This predictability
// is why the Promise constructor synchronously invokes its
// executor callback, and why async functions synchronously
// execute code before the first await. Since we implement simple
// async functions in terms of async generators, it is especially
// important to get this right, even though it requires care.
previousPromise ? previousPromise.then(
callInvokeWithMethodAndArg,
// Avoid propagating failures to Promises returned by later
// invocations of the iterator.
callInvokeWithMethodAndArg
) : callInvokeWithMethodAndArg();
}
// Define the unified helper method that is used to implement .next,
// .throw, and .return (see defineIteratorMethods).
this._invoke = enqueue;
}
defineIteratorMethods(AsyncIterator.prototype);
define(AsyncIterator.prototype, asyncIteratorSymbol, function () {
return this;
});
exports.AsyncIterator = AsyncIterator;
// Note that simple async functions are implemented on top of
// AsyncIterator objects; they just return a Promise for the value of
// the final result produced by the iterator.
exports.async = function(innerFn, outerFn, self, tryLocsList, PromiseImpl) {
if (PromiseImpl === void 0) PromiseImpl = Promise;
var iter = new AsyncIterator(
wrap(innerFn, outerFn, self, tryLocsList),
PromiseImpl
);
return exports.isGeneratorFunction(outerFn)
? iter // If outerFn is a generator, return the full iterator.
: iter.next().then(function(result) {
return result.done ? result.value : iter.next();
});
};
function makeInvokeMethod(innerFn, self, context) {
var state = GenStateSuspendedStart;
return function invoke(method, arg) {
if (state === GenStateExecuting) {
throw new Error("Generator is already running");
}
if (state === GenStateCompleted) {
if (method === "throw") {
throw arg;
}
// Be forgiving, per 25.3.3.3.3 of the spec:
// https://people.mozilla.org/~jorendorff/es6-draft.html#sec-generatorresume
return doneResult();
}
context.method = method;
context.arg = arg;
while (true) {
var delegate = context.delegate;
if (delegate) {
var delegateResult = maybeInvokeDelegate(delegate, context);
if (delegateResult) {
if (delegateResult === ContinueSentinel) continue;
return delegateResult;
}
}
if (context.method === "next") {
// Setting context._sent for legacy support of Babel's
// function.sent implementation.
context.sent = context._sent = context.arg;
} else if (context.method === "throw") {
if (state === GenStateSuspendedStart) {
state = GenStateCompleted;
throw context.arg;
}
context.dispatchException(context.arg);
} else if (context.method === "return") {
context.abrupt("return", context.arg);
}
state = GenStateExecuting;
var record = tryCatch(innerFn, self, context);
if (record.type === "normal") {
// If an exception is thrown from innerFn, we leave state ===
// GenStateExecuting and loop back for another invocation.
state = context.done
? GenStateCompleted
: GenStateSuspendedYield;
if (record.arg === ContinueSentinel) {
continue;
}
return {
value: record.arg,
done: context.done
};
} else if (record.type === "throw") {
state = GenStateCompleted;
// Dispatch the exception by looping back around to the
// context.dispatchException(context.arg) call above.
context.method = "throw";
context.arg = record.arg;
}
}
};
}
// Call delegate.iterator[context.method](context.arg) and handle the
// result, either by returning a { value, done } result from the
// delegate iterator, or by modifying context.method and context.arg,
// setting context.delegate to null, and returning the ContinueSentinel.
function maybeInvokeDelegate(delegate, context) {
var method = delegate.iterator[context.method];
if (method === undefined$1) {
// A .throw or .return when the delegate iterator has no .throw
// method always terminates the yield* loop.
context.delegate = null;
if (context.method === "throw") {
// Note: ["return"] must be used for ES3 parsing compatibility.
if (delegate.iterator["return"]) {
// If the delegate iterator has a return method, give it a
// chance to clean up.
context.method = "return";
context.arg = undefined$1;
maybeInvokeDelegate(delegate, context);
if (context.method === "throw") {
// If maybeInvokeDelegate(context) changed context.method from
// "return" to "throw", let that override the TypeError below.
return ContinueSentinel;
}
}
context.method = "throw";
context.arg = new TypeError(
"The iterator does not provide a 'throw' method");
}
return ContinueSentinel;
}
var record = tryCatch(method, delegate.iterator, context.arg);
if (record.type === "throw") {
context.method = "throw";
context.arg = record.arg;
context.delegate = null;
return ContinueSentinel;
}
var info = record.arg;
if (! info) {
context.method = "throw";
context.arg = new TypeError("iterator result is not an object");
context.delegate = null;
return ContinueSentinel;
}
if (info.done) {
// Assign the result of the finished delegate to the temporary
// variable specified by delegate.resultName (see delegateYield).
context[delegate.resultName] = info.value;
// Resume execution at the desired location (see delegateYield).
context.next = delegate.nextLoc;
// If context.method was "throw" but the delegate handled the
// exception, let the outer generator proceed normally. If
// context.method was "next", forget context.arg since it has been
// "consumed" by the delegate iterator. If context.method was
// "return", allow the original .return call to continue in the
// outer generator.
if (context.method !== "return") {
context.method = "next";
context.arg = undefined$1;
}
} else {
// Re-yield the result returned by the delegate method.
return info;
}
// The delegate iterator is finished, so forget it and continue with
// the outer generator.
context.delegate = null;
return ContinueSentinel;
}
// Define Generator.prototype.{next,throw,return} in terms of the
// unified ._invoke helper method.
defineIteratorMethods(Gp);
define(Gp, toStringTagSymbol, "Generator");
// A Generator should always return itself as the iterator object when the
// @@iterator function is called on it. Some browsers' implementations of the
// iterator prototype chain incorrectly implement this, causing the Generator
// object to not be returned from this call. This ensures that doesn't happen.
// See https://github.com/facebook/regenerator/issues/274 for more details.
define(Gp, iteratorSymbol, function() {
return this;
});
define(Gp, "toString", function() {
return "[object Generator]";
});
function pushTryEntry(locs) {
var entry = { tryLoc: locs[0] };
if (1 in locs) {
entry.catchLoc = locs[1];
}
if (2 in locs) {
entry.finallyLoc = locs[2];
entry.afterLoc = locs[3];
}
this.tryEntries.push(entry);
}
function resetTryEntry(entry) {
var record = entry.completion || {};
record.type = "normal";
delete record.arg;
entry.completion = record;
}
function Context(tryLocsList) {
// The root entry object (effectively a try statement without a catch
// or a finally block) gives us a place to store values thrown from
// locations where there is no enclosing try statement.
this.tryEntries = [{ tryLoc: "root" }];
tryLocsList.forEach(pushTryEntry, this);
this.reset(true);
}
exports.keys = function(object) {
var keys = [];
for (var key in object) {
keys.push(key);
}
keys.reverse();
// Rather than returning an object with a next method, we keep
// things simple and return the next function itself.
return function next() {
while (keys.length) {
var key = keys.pop();
if (key in object) {
next.value = key;
next.done = false;
return next;
}
}
// To avoid creating an additional object, we just hang the .value
// and .done properties off the next function object itself. This
// also ensures that the minifier will not anonymize the function.
next.done = true;
return next;
};
};
function values(iterable) {
if (iterable) {
var iteratorMethod = iterable[iteratorSymbol];
if (iteratorMethod) {
return iteratorMethod.call(iterable);
}
if (typeof iterable.next === "function") {
return iterable;
}
if (!isNaN(iterable.length)) {
var i = -1, next = function next() {
while (++i < iterable.length) {
if (hasOwn.call(iterable, i)) {
next.value = iterable[i];
next.done = false;
return next;
}
}
next.value = undefined$1;
next.done = true;
return next;
};
return next.next = next;
}
}
// Return an iterator with no values.
return { next: doneResult };
}
exports.values = values;
function doneResult() {
return { value: undefined$1, done: true };
}
Context.prototype = {
constructor: Context,
reset: function(skipTempReset) {
this.prev = 0;
this.next = 0;
// Resetting context._sent for legacy support of Babel's
// function.sent implementation.
this.sent = this._sent = undefined$1;
this.done = false;
this.delegate = null;
this.method = "next";
this.arg = undefined$1;
this.tryEntries.forEach(resetTryEntry);
if (!skipTempReset) {
for (var name in this) {
// Not sure about the optimal order of these conditions:
if (name.charAt(0) === "t" &&
hasOwn.call(this, name) &&
!isNaN(+name.slice(1))) {
this[name] = undefined$1;
}
}
}
},
stop: function() {
this.done = true;
var rootEntry = this.tryEntries[0];
var rootRecord = rootEntry.completion;
if (rootRecord.type === "throw") {
throw rootRecord.arg;
}
return this.rval;
},
dispatchException: function(exception) {
if (this.done) {
throw exception;
}
var context = this;
function handle(loc, caught) {
record.type = "throw";
record.arg = exception;
context.next = loc;
if (caught) {
// If the dispatched exception was caught by a catch block,
// then let that catch block handle the exception normally.
context.method = "next";
context.arg = undefined$1;
}
return !! caught;
}
for (var i = this.tryEntries.length - 1; i >= 0; --i) {
var entry = this.tryEntries[i];
var record = entry.completion;
if (entry.tryLoc === "root") {
// Exception thrown outside of any try block that could handle
// it, so set the completion value of the entire function to
// throw the exception.
return handle("end");
}
if (entry.tryLoc <= this.prev) {
var hasCatch = hasOwn.call(entry, "catchLoc");
var hasFinally = hasOwn.call(entry, "finallyLoc");
if (hasCatch && hasFinally) {
if (this.prev < entry.catchLoc) {
return handle(entry.catchLoc, true);
} else if (this.prev < entry.finallyLoc) {
return handle(entry.finallyLoc);
}
} else if (hasCatch) {
if (this.prev < entry.catchLoc) {
return handle(entry.catchLoc, true);
}
} else if (hasFinally) {
if (this.prev < entry.finallyLoc) {
return handle(entry.finallyLoc);
}
} else {
throw new Error("try statement without catch or finally");
}
}
}
},
abrupt: function(type, arg) {
for (var i = this.tryEntries.length - 1; i >= 0; --i) {
var entry = this.tryEntries[i];
if (entry.tryLoc <= this.prev &&
hasOwn.call(entry, "finallyLoc") &&
this.prev < entry.finallyLoc) {
var finallyEntry = entry;
break;
}
}
if (finallyEntry &&
(type === "break" ||
type === "continue") &&
finallyEntry.tryLoc <= arg &&
arg <= finallyEntry.finallyLoc) {
// Ignore the finally entry if control is not jumping to a
// location outside the try/catch block.
finallyEntry = null;
}
var record = finallyEntry ? finallyEntry.completion : {};
record.type = type;
record.arg = arg;
if (finallyEntry) {
this.method = "next";
this.next = finallyEntry.finallyLoc;
return ContinueSentinel;
}
return this.complete(record);
},
complete: function(record, afterLoc) {
if (record.type === "throw") {
throw record.arg;
}
if (record.type === "break" ||
record.type === "continue") {
this.next = record.arg;
} else if (record.type === "return") {
this.rval = this.arg = record.arg;
this.method = "return";
this.next = "end";
} else if (record.type === "normal" && afterLoc) {
this.next = afterLoc;
}
return ContinueSentinel;
},
finish: function(finallyLoc) {
for (var i = this.tryEntries.length - 1; i >= 0; --i) {
var entry = this.tryEntries[i];
if (entry.finallyLoc === finallyLoc) {
this.complete(entry.completion, entry.afterLoc);
resetTryEntry(entry);
return ContinueSentinel;
}
}
},
"catch": function(tryLoc) {
for (var i = this.tryEntries.length - 1; i >= 0; --i) {
var entry = this.tryEntries[i];
if (entry.tryLoc === tryLoc) {
var record = entry.completion;
if (record.type === "throw") {
var thrown = record.arg;
resetTryEntry(entry);
}
return thrown;
}
}
// The context.catch method must only be called with a location
// argument that corresponds to a known catch block.
throw new Error("illegal catch attempt");
},
delegateYield: function(iterable, resultName, nextLoc) {
this.delegate = {
iterator: values(iterable),
resultName: resultName,
nextLoc: nextLoc
};
if (this.method === "next") {
// Deliberately forget the last sent value so that we don't
// accidentally pass it on to the delegate.
this.arg = undefined$1;
}
return ContinueSentinel;
}
};
// Regardless of whether this script is executing as a CommonJS module
// or not, return the runtime object so that we can declare the variable
// regeneratorRuntime in the outer scope, which allows this module to be
// injected easily by `bin/regenerator --include-runtime script.js`.
return exports;
}(
// If this script is executing as a CommonJS module, use module.exports
// as the regeneratorRuntime namespace. Otherwise create a new empty
// object. Either way, the resulting object will be used to initialize
// the regeneratorRuntime variable at the top of this file.
module.exports
));
try {
regeneratorRuntime = runtime;
} catch (accidentalStrictMode) {
// This module should not be running in strict mode, so the above
// assignment should always work unless something is misconfigured. Just
// in case runtime.js accidentally runs in strict mode, in modern engines
// we can explicitly access globalThis. In older engines we can escape
// strict mode using a global Function call. This could conceivably fail
// if a Content Security Policy forbids using Function, but in that case
// the proper solution is to fix the accidental strict mode problem. If
// you've misconfigured your bundler to force strict mode and applied a
// CSP to forbid Function, and you're not willing to fix either of those
// problems, please detail your unique predicament in a GitHub issue.
if (typeof globalThis === "object") {
globalThis.regeneratorRuntime = runtime;
} else {
Function("r", "regeneratorRuntime = r")(runtime);
}
}
});
/*
* Possibly a temporary fix for ä and ö should the coreinitdummy
* differ from the one got from the Hailer backend
*/
var Element = function Element(_ref) {
var phaseName = _ref.phaseName;
return React__default.createElement("p", null, phaseName != null ? phaseName : 'Unknown phase');
};
/*
* Variable 'node' is the id for the clicked (active) node
* for which the infobox is rendered
*/
var InfoBox = function InfoBox(_ref2) {
var _foundNode$name;
var data = _ref2.data,
node = _ref2.node,
setNode = _ref2.setNode;
var foundNode = data['nodes'].find(function (no) {
return no['id'] === node;
});
var nodeName = (_foundNode$name = foundNode == null ? void 0 : foundNode.name) != null ? _foundNode$name : '';
/**
* Parses an array consisting of the Phases of a node
* @returns an Array
*/
var getPhases = function getPhases() {
var map = foundNode == null ? void 0 : foundNode.phases;
if (map) {
var arrayOfPhases = map.map(function (phase) {
return phase.name;
});
return arrayOfPhases;
}
return null;
};
var close = function close() {
setNode('');
unHighlightNodes();
};
if (nodeName === '') {
return null;
}
var phases = getPhases();
return React__default.createElement("div", {
className: 'be_InfoBox'
}, React__default.createElement("div", {
className: "be_closeDot"
}, React__default.createElement(cg.CgClose, {
className: 'be_close-button',
onClick: function onClick() {
return close();
}
})), React__default.createElement("h3", {
className: 'be_header'
}, " ", nodeName, " "), React__default.createElement("div", {
className: 'be_phases'
}, React__default.createElement("p", null, React__default.createElement("b", null, "Phases:")), phases ? phases == null ? void 0 : phases.map(function (phase, index) {
return React__default.createElement(Element, {
key: index,
phaseName: phase
});
}) : 'No node information'));
};
/**
* Generates a downloadable image from bird's eye map
*
* @author Patrik Larsen <patrik.larsen@kvanttori.fi>
* @author Nevil Sandaradura <nevil.sandaradura@kvanttori.fi>
*/
var generateSvg = /*#__PURE__*/function () {
var _ref = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(fileName) {
var chartElementRef, generatedSvg;
return runtime_1.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
chartElementRef = document.getElementById('be_chart');
if (chartElementRef) {
_context.next = 4;
break;
}
console.error("Failed getting birds-eye chart element ref!");
return _context.abrupt("return");
case 4:
_context.next = 6;
return domtoimage.toSvg(chartElementRef);
case 6:
generatedSvg = _context.sent;
downloadImage(generatedSvg, fileName);
case 8:
case "end":
return _context.stop();
}
}
}, _callee);
}));
return function generateSvg(_x) {
return _ref.apply(this, arguments);
};
}();
var downloadImage = /*#__PURE__*/function () {
var _ref2 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2(imageSrc, fileName) {
var image, imageBlog, imageURL, link;
return runtime_1.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
_context2.next = 2;
return fetch(imageSrc);
case 2:
image = _context2.sent;
_context2.next = 5;
return image.blob();
case 5:
imageBlog = _context2.sent;
imageURL = URL.createObjectURL(imageBlog);
link = document.createElement('a');
link.href = imageURL;
link.download = fileName;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
case 13:
case "end":
return _context2.stop();
}
}
}, _callee2);
}));
return function downloadImage(_x2, _x3) {
return _ref2.apply(this, arguments);
};
}();
var Legend = function Legend(_ref) {
var data = _ref.data,
node = _ref.node,
setNode = _ref.setNode;
var _useState = React.useState(false),
generatingSvg = _useState[0],
setGeneratingSvg = _useState[1];
var downloadSvg = /*#__PURE__*/function () {
var _ref2 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2(networkName) {
return runtime_1.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
setGeneratingSvg(true);
setTimeout( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
return runtime_1.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return generateSvg("Workspace map of " + networkName + " - " + new Date().toDateString());
case 2:
setGeneratingSvg(false);
case 3:
case "end":
return _context.stop();
}
}
}, _callee);
})), 5); // This gives the dom enough time to update
case 2:
case "end":
return _context2.stop();
}
}
}, _callee2);
}));
return function downloadSvg(_x) {
return _ref2.apply(this, arguments);
};
}();
return React__default.createElement("legend", {
className: "be_legend"
}, React__default.createElement("ul", {
className: "be_legendTextContainer"
}, React__default.createElement("div", null, React__default.createElement("p", {
className: "be_headerForUpper"
}, React__default.createElement("b", null, "How to use Bird's eye:")), React__default.createElement("p", {
style: {
fontSize: ".9em"
}
}, "Click a Dataset or a Workflow to see phase information and connections", " "), React__default.createElement("p", {
style: {
fontSize: ".9em"
}
}, "Close the phase window to return to normal view")), React__default.createElement("li", null, React__default.createElement("span", {
className: "be_dot",
style: {
background: "var(--primary-500, #253c56)",
marginBottom: "3px"
}
}), React__default.createElement("span", {
className: "be_desc"
}, "Dataset")), React__default.createElement("li", null, React__default.createElement("span", {
className: "be_dot",
style: {
background: "var(--accent-800, #138637)",
marginBottom: "3px"
}
}), React__default.createElement("span", {
className: "be_desc"
}, "Workflow")), React__default.createElement("button", {
className: "be_downloadButton",
onClick: function onClick() {
downloadSvg(data.name);
}
}, React__default.createElement("p", null, generatingSvg ? "Generating..." : "Download Map"))), React__default.createElement(InfoBox, {
data: data,
node: node,
setNode: setNode
}));
};
var Map = function Map(_ref) {
var data = _ref.data;
var _useState = React.useState(''),
node = _useState[0],
setNode = _useState[1];
var updateNode = function updateNode(value) {
setNode(value);
if (data) highlightNodes(data, value);
};
return React__default.createElement("div", {
className: "be_Map"
}, React__default.createElement(Legend, {
data: data,
node: node,
setNode: setNode
}), React__default.createElement("div", {
id: 'be_chart'
}, React__default.createElement(ForceChart, {
data: data,
updateNode: updateNode
})));
};
/**
* This is a generic sidebar component used with both function
* and workflow/dataset documentation.
*
* @author Juhana Kuparinen
* @author Patrik Larsen
*/
var Sidebar = function Sidebar(_ref) {
var children = _ref.children,
contentRef = _ref.contentRef;
return React__default.createElement("div", {
className: 'be_sidebar no-print'
}, React__default.createElement("div", {
className: "be_sidebar-header"
}, React__default.createElement("h2", null, "Table of Contents"), React__default.createElement(ReactToPrint, {
trigger: function trigger() {
return React__default.createElement("button", {
title: "Print PDF"
}, React__default.createElement(md.MdPrint, null));
},
content: function content() {
return contentRef.current;
}
})), React__default.createElement("ol", {
className: 'be_chapter'
}, children));
};
// Check if string is mongodb id https://stackoverflow.com/questions/13850819/can-i-determine-if-a-string-is-a-mongodb-objectid
var isMongoId = function isMongoId(data) {
return data.match(/^[0-9a-fA-F]{24}$/) ? null : data;
};
/**
* Find node with field data value and return data if nothing is found
* @author Juhana Kuparinen <juhana.kuparinen@kvanttori.fi>
*/
var findNode = function findNode(nodes, data) {
var _nodes$find$name, _nodes$find;
return (_nodes$find$name = (_nodes$find = nodes.find(function (node) {
return node.id === data;
})) == null ? void 0 : _nodes$find.name) != null ? _nodes$find$name : isMongoId(data);
};
/**
*
* @param nodes - Array of Node objects
* @param processId - Process ID in string format
* @throws Error - if process is not found
* @returns Node - Node that has the same id as process
*/
var getProcess = function getProcess(nodes, processId) {
var val = nodes.find(function (node) {
return node.id === processId;
});
if (val == undefined) {
throw new Error("No process found!");
}
return val;
};
var getFieldName = function getFieldName(id, processFields) {
var _processFields$find$n, _processFields$find;
return (_processFields$find$n = (_processFields$find = processFields.find(function (field) {
return field.id === id;
})) == null ? void 0 : _processFields$find.name) != null ? _processFields$find$n : isMongoId(id);
};
var getField = function getField(id, processFields) {
return processFields.find(function (field) {
return field.id === id;
});
};
var getPhase = function getPhase(id, processPhases) {
return processPhases.find(function (phase) {
return phase.id === id;
});
};
/**
* Generates human readable labels for dependencies
* TODO: better documentation aka comments and unit tests
*
* @author Patrik Larsen <patrik.larsen@kvanttori.fi>
*/
var getDependencyLabel = function getDependencyLabel(dependency, currentNode, nodes) {
var getSameDependencyLabel = function getSameDependencyLabel() {
var _dependency$data;
// Same process dependency
var data = (_dependency$data = dependency.data[dependency.data.length - 1]) != null ? _dependency$data : ""; // for "=" dependencies the last index is the value
return "Field: " + getFieldName(data, currentNode.fields);
};
var getLinkedToFieldLabel = function getLinkedToFieldLabel() {
var _getField;
// Linked to Field
var _dependency$data2 = dependency.data,
linkedFieldId = _dependency$data2[0],
fieldId = _dependency$data2[1]; // Going through processes and finding the field we're after
var processIds = (_getField = getField(linkedFieldId, currentNode.fields)) == null ? void 0 : _getField.data;
if (processIds) {
for (var _iterator = _createForOfIteratorHelperLoose(processIds), _step; !(_step = _iterator()).done;) {
var processId = _step.value;
try {
var process = getProcess(nodes, processId);
if (getField(fieldId, process.fields)) {
var label = getFieldName(fieldId, process.fields);
return "Linked to Field: " + label + " from " + process.name + " in " + getFieldName(linkedFieldId, currentNode.fields);
}
} catch (error) {
console.log("Failing process ID: ", processId);
}
}
}
return "Couldn't find dependency";
};
var getLinkedFromFieldLabel = function getLinkedFromFieldLabel() {
// Linked from