Pipeline Monitor
Status: Active Flow
[ Pause ]
[ Next Step ]
[ Reset ]
01 // RAW INPUTS
02 // INGESTION
03 // CTE JOIN
04 // CLEANING
05 // METRICS
06 // STATS FORK
07 // DECISION
LOAD
READ
MERGE
CALC
TEST
PUSH
(function() { var MIN_HEIGHT = 240; var PAD_X = 32; var PAD_Y = 32; var rafId = 0; var resizeObserver = null; function toNumber(value) { var match = String(value || '').match(/-?\d+(?:\.\d+)?/); if (!match) return null; var parsed = Number.parseFloat(match[0]); return Number.isFinite(parsed) ? parsed : null; } function parseViewBox(svg) { var raw = svg.getAttribute('viewBox'); if (!raw) return null; var parts = raw.trim().split(/[\s,]+/).map(function(part) { return Number.parseFloat(part); }); if (parts.length !== 4 || parts.some(function(part) { return !Number.isFinite(part); })) { return null; } return { minX: parts[0], minY: parts[1], width: parts[2], height: parts[3] }; } function ensureViewBox(svg) { var existing = parseViewBox(svg); if (existing) return existing; var width = toNumber(svg.getAttribute('width')) || svg.clientWidth || 960; var height = toNumber(svg.getAttribute('height')) || svg.clientHeight || 540; svg.setAttribute('viewBox', '0 0 ' + width + ' ' + height); return { minX: 0, minY: 0, width: width, height: height }; } function shouldSkipChild(tagName) { return tagName === 'defs' || tagName === 'desc' || tagName === 'metadata' || tagName === 'script' || tagName === 'style' || tagName === 'title'; } function ensureContentRoot(svg) { var existing = svg.querySelector('[data-repo-explainer-fit-root]'); if (existing) return existing; var children = Array.prototype.slice.call(svg.children); var firstMovable = null; children.forEach(function(child) { var tagName = child.tagName ? child.tagName.toLowerCase() : ''; if (!shouldSkipChild(tagName) && !firstMovable) { firstMovable = child; } }); if (!firstMovable) return null; var root = document.createElementNS('http://www.w3.org/2000/svg', 'g'); root.setAttribute('data-repo-explainer-fit-root', 'true'); svg.insertBefore(root, firstMovable); children.forEach(function(child) { var tagName = child.tagName ? child.tagName.toLowerCase() : ''; if (!shouldSkipChild(tagName)) { root.appendChild(child); } }); return root; } function getContentBounds(svg) { var root = ensureContentRoot(svg); if (!root || typeof root.getBBox !== 'function') return null; try { var bbox = root.getBBox(); if (!Number.isFinite(bbox.width) || !Number.isFinite(bbox.height) || bbox.width <= 0 || bbox.height <= 0) { return null; } return bbox; } catch (err) { return null; } } function fitSvg(svg) { ensureViewBox(svg); var bbox = getContentBounds(svg); svg.setAttribute('preserveAspectRatio', 'xMidYMid meet'); svg.style.width = '100%'; svg.style.height = 'auto'; svg.style.maxWidth = '100%'; svg.style.maxHeight = 'none'; svg.style.display = 'block'; svg.style.overflow = 'visible'; if (!bbox) return; var nextMinX = bbox.x - PAD_X; var nextMinY = bbox.y - PAD_Y; var nextWidth = bbox.width + (PAD_X * 2); var nextHeight = bbox.height + (PAD_Y * 2); svg.setAttribute( 'viewBox', [ Math.round(nextMinX * 100) / 100, Math.round(nextMinY * 100) / 100, Math.round(nextWidth * 100) / 100, Math.round(nextHeight * 100) / 100, ].join(' '), ); } function measureHeight(svg) { var bodyStyles = window.getComputedStyle(document.body); var paddingTop = Number.parseFloat(bodyStyles.paddingTop) || 0; var paddingBottom = Number.parseFloat(bodyStyles.paddingBottom) || 0; var bodyPad = paddingTop + paddingBottom; if (svg) { var rect = svg.getBoundingClientRect(); var svgBottom = rect.bottom + paddingBottom; return Math.max(MIN_HEIGHT, Math.ceil(svgBottom)); } // Non-SVG diagrams: measure the bounding box of all direct body children var children = document.body.children; var maxBottom = 0; for (var i = 0; i < children.length; i++) { var child = children[i]; if (child.tagName === 'SCRIPT' || child.tagName === 'STYLE') continue; var cr = child.getBoundingClientRect(); if (cr.bottom > maxBottom) maxBottom = cr.bottom; } if (maxBottom > 0) { return Math.max(MIN_HEIGHT, Math.ceil(maxBottom + paddingBottom)); } return Math.max(MIN_HEIGHT, Math.ceil(document.documentElement.scrollHeight)); } function postHeight(height) { if (!window.parent || window.parent === window) return; window.parent.postMessage({ type: 'diagram-height', height: height }, '*'); } function scheduleFit() { if (rafId) { window.cancelAnimationFrame(rafId); } rafId = window.requestAnimationFrame(function() { rafId = 0; var svg = document.querySelector('svg'); if (svg) { fitSvg(svg); } postHeight(measureHeight(svg || null)); }); } function bindResizeObserver() { if (!('ResizeObserver' in window) || resizeObserver) return; resizeObserver = new ResizeObserver(function() { scheduleFit(); }); resizeObserver.observe(document.documentElement); resizeObserver.observe(document.body); var svg = document.querySelector('svg'); if (svg) { resizeObserver.observe(svg); } var canvas = document.querySelector('canvas'); if (canvas) { resizeObserver.observe(canvas); } } document.addEventListener('DOMContentLoaded', function() { scheduleFit(); bindResizeObserver(); }); window.addEventListener('load', scheduleFit); window.addEventListener('resize', scheduleFit); window.addEventListener('message', function(event) { if (event.data && event.data.type === 'diagram-request-height') { scheduleFit(); } }); if (document.fonts && document.fonts.ready) { document.fonts.ready.then(function() { scheduleFit(); bindResizeObserver(); }).catch(function() {}); } if (document.readyState !== 'loading') { scheduleFit(); bindResizeObserver(); } })();