datajunction-ui
Version:
DataJunction UI
284 lines (283 loc) • 9.59 kB
JavaScript
import { jsxs as m, jsx as a } from "react/jsx-runtime";
import { useMemo as N, useEffect as O, useCallback as k } from "react";
import { M as C, cD as j, cw as z, X as B, B as V, f as Z, aF as $, H as y, U as E } from "./index-n79cxNwC.js";
function U({ data: n, selected: t }) {
var i, p;
const e = ((i = n.components) == null ? void 0 : i.length) || 0;
return /* @__PURE__ */ m(
"div",
{
className: `compact-node compact-node-preagg ${t ? "selected" : ""}`,
children: [
/* @__PURE__ */ a("div", { className: "compact-node-icon", children: "◫" }),
/* @__PURE__ */ m("div", { className: "compact-node-content", children: [
/* @__PURE__ */ a("div", { className: "compact-node-name", children: n.name }),
/* @__PURE__ */ m("div", { className: "compact-node-meta", children: [
/* @__PURE__ */ m("span", { className: "meta-item", children: [
e,
" components"
] }),
((p = n.grain) == null ? void 0 : p.length) > 0 && /* @__PURE__ */ m("span", { className: "meta-item grain-count", children: [
n.grain.length,
" grain cols"
] })
] })
] }),
/* @__PURE__ */ a(y, { type: "source", position: E.Right })
]
}
);
}
function X({ data: n, selected: t }) {
return /* @__PURE__ */ m(
"div",
{
className: `compact-node compact-node-metric ${n.isDerived ? "compact-node-derived" : ""} ${t ? "selected" : ""}`,
children: [
/* @__PURE__ */ a(y, { type: "target", position: E.Left }),
/* @__PURE__ */ a("div", { className: "compact-node-icon", children: n.isDerived ? "◇" : "◈" }),
/* @__PURE__ */ m("div", { className: "compact-node-content", children: [
/* @__PURE__ */ a("div", { className: "compact-node-name", children: n.shortName }),
n.isDerived && /* @__PURE__ */ a("div", { className: "compact-node-badge", children: "Derived" })
] })
]
}
);
}
function q({ data: n, selected: t }) {
return /* @__PURE__ */ m(
"div",
{
className: `compact-node compact-node-component ${t ? "selected" : ""}`,
children: [
/* @__PURE__ */ a(y, { type: "target", position: E.Left }),
/* @__PURE__ */ a("div", { className: "compact-node-icon", children: "●" }),
/* @__PURE__ */ m("div", { className: "compact-node-content", children: [
/* @__PURE__ */ a("div", { className: "compact-node-name", children: n.shortName }),
/* @__PURE__ */ a("div", { className: "compact-node-meta", children: /* @__PURE__ */ a("span", { className: "meta-item", children: n.aggregation || "RAW" }) })
] }),
/* @__PURE__ */ a(y, { type: "source", position: E.Right })
]
}
);
}
const J = {
preagg: U,
component: q,
metric: X
}, D = 200, M = 50;
function K(n, t) {
const e = new $.graphlib.Graph();
return e.setDefaultEdgeLabel(() => ({})), e.setGraph({
rankdir: "LR",
// Left to right
nodesep: 60,
// Vertical spacing between nodes
ranksep: 150,
// Horizontal spacing between columns
marginx: 40,
marginy: 40
}), n.forEach((p) => {
e.setNode(p.id, { width: D, height: M });
}), t.forEach((p) => {
e.setEdge(p.source, p.target);
}), $.layout(e), { nodes: n.map((p) => {
const g = e.node(p.id);
return {
...p,
position: {
x: g.x - D / 2,
y: g.y - M / 2
}
};
}), edges: t };
}
function F({
grainGroups: n,
metricFormulas: t,
selectedNode: e,
onNodeSelect: i
}) {
const { nodes: p, edges: g } = N(() => {
if (!(n != null && n.length) || !(t != null && t.length))
return { nodes: [], edges: [] };
const l = [], d = [], I = /* @__PURE__ */ new Map(), v = /* @__PURE__ */ new Map(), T = /* @__PURE__ */ new Map();
let W = 0;
const w = () => `node-${W++}`;
n.forEach((s, r) => {
var o;
(o = s.components) == null || o.forEach((c) => {
T.set(c.name, r);
});
}), n.forEach((s, r) => {
var h;
const o = w();
I.set(r, o);
const c = ((h = s.parent_name) == null ? void 0 : h.split(".").pop()) || `preagg_${r}`;
l.push({
id: o,
type: "preagg",
position: { x: 0, y: 0 },
// Will be set by dagre
data: {
name: c,
fullName: s.parent_name,
grain: s.grain || [],
components: s.components || [],
grainGroupIndex: r
},
selected: (e == null ? void 0 : e.type) === "preagg" && (e == null ? void 0 : e.index) === r
});
}), n.forEach((s, r) => {
var o;
(o = s.components) == null || o.forEach((c) => {
if (!v.has(c.name)) {
const h = w();
v.set(c.name, h);
const f = c.name.length > 40 ? "..." + c.name.split("_").slice(-2).join("_") : c.name;
l.push({
id: h,
type: "component",
position: { x: 0, y: 0 },
data: {
name: c.name,
shortName: f,
aggregation: c.aggregation,
merge: c.merge,
grainGroupIndex: r
},
selected: (e == null ? void 0 : e.type) === "component" && (e == null ? void 0 : e.name) === c.name
});
}
});
});
const b = /* @__PURE__ */ new Map();
return t.forEach((s, r) => {
const o = w();
b.set(s.name, o), l.push({
id: o,
type: "metric",
position: { x: 0, y: 0 },
// Will be set by dagre
data: {
name: s.name,
shortName: s.short_name,
combiner: s.combiner,
isDerived: s.is_derived,
components: s.components,
metricIndex: r
},
selected: (e == null ? void 0 : e.type) === "metric" && (e == null ? void 0 : e.index) === r
});
}), n.forEach((s, r) => {
var c;
const o = I.get(r);
(c = s.components) == null || c.forEach((h) => {
const f = v.get(h.name);
o && f && d.push({
id: `edge-preagg-${o}-${f}`,
source: o,
target: f,
style: { stroke: "#64748b", strokeWidth: 2 },
markerEnd: {
type: C.ArrowClosed,
color: "#64748b",
width: 16,
height: 16
}
});
});
}), t.forEach((s) => {
var o;
const r = b.get(s.name);
(o = s.components) == null || o.forEach((c) => {
const h = v.get(c);
h && r && d.push({
id: `edge-comp-${h}-${r}`,
source: h,
target: r,
style: { stroke: "#64748b", strokeWidth: 2 },
markerEnd: {
type: C.ArrowClosed,
color: "#64748b",
width: 16,
height: 16
}
});
});
}), K(l, d);
}, [n, t, e]), [_, u, A] = j(p), [P, x, H] = z(g);
O(() => {
u(p), x(g);
}, [p, g, u, x]);
const L = k(
(l, d) => {
d.type === "preagg" ? i == null || i({
type: "preagg",
index: d.data.grainGroupIndex,
data: n[d.data.grainGroupIndex]
}) : d.type === "component" ? i == null || i({
type: "component",
name: d.data.name,
data: d.data
}) : d.type === "metric" && (i == null || i({
type: "metric",
index: d.data.metricIndex,
data: t[d.data.metricIndex]
}));
},
[i, n, t]
), R = k(() => {
i == null || i(null);
}, [i]);
return !(n != null && n.length) || !(t != null && t.length) ? /* @__PURE__ */ m("div", { className: "graph-empty-state", children: [
/* @__PURE__ */ a("div", { className: "empty-icon", children: "◎" }),
/* @__PURE__ */ a("p", { children: "Select metrics and dimensions above to visualize the data flow" })
] }) : /* @__PURE__ */ m("div", { className: "compact-flow-container", children: [
/* @__PURE__ */ m(
B,
{
nodes: _,
edges: P,
onNodesChange: A,
onEdgesChange: H,
nodeTypes: J,
onNodeClick: L,
onPaneClick: R,
fitView: !0,
fitViewOptions: { padding: 0.2 },
minZoom: 0.5,
maxZoom: 1.5,
attributionPosition: "bottom-left",
proOptions: { hideAttribution: !0 },
children: [
/* @__PURE__ */ a(V, { color: "#cbd5e1", gap: 20, size: 1 }),
/* @__PURE__ */ a(Z, { showInteractive: !1 })
]
}
),
/* @__PURE__ */ m("div", { className: "graph-legend", children: [
/* @__PURE__ */ m("div", { className: "legend-item", children: [
/* @__PURE__ */ a("span", { className: "legend-dot preagg" }),
/* @__PURE__ */ a("span", { children: "Pre-agg" })
] }),
/* @__PURE__ */ m("div", { className: "legend-item", children: [
/* @__PURE__ */ a("span", { className: "legend-dot component" }),
/* @__PURE__ */ a("span", { children: "Component" })
] }),
/* @__PURE__ */ m("div", { className: "legend-item", children: [
/* @__PURE__ */ a("span", { className: "legend-dot metric" }),
/* @__PURE__ */ a("span", { children: "Metric" })
] }),
/* @__PURE__ */ m("div", { className: "legend-item", children: [
/* @__PURE__ */ a("span", { className: "legend-dot derived" }),
/* @__PURE__ */ a("span", { children: "Derived" })
] })
] })
] });
}
export {
F as MetricFlowGraph,
F as default
};
//# sourceMappingURL=MetricFlowGraph-CgV3lxXj.js.map