Mitchell Puckett @mwpucket - Twitter Profile

mwpucket retweeted

4 months ago

Based on some recent customer conversations here at @weareZuar, I went to make an enhanced ‘Data Lineage Explorer’ dashboard that would provide a new UX in the Portal side of the Zuar DEX that would read automation job metadata directly from the Runner backend. Now, for context, I have spent 10 years building analytics content in a variety of ‘Drag and Drop’ apps, mostly in Zuar Portal. For this lineage dashboard I knew I wanted to go beyond the native building blocks and GUI driven charting components in Portal and use the ‘HTML Block’ which is essentially a blank canvas for freehand front end code to run safely within the Zuar Portal framework. Since I am NOT anywhere close to being a true front end developer, and had high ambitions for this dashboard, this meant I would be using an AI assist to ‘vibe code’ the block. To prepare, I created a data model in SQL that I knew would support what I was trying to accomplish (no AI needed, I’m still usually faster at doing this by hand in an IDE like Datagrip by @jetbrains than the time it would take to write up a prompt). Then, I jumped in to Route LLM by https://t.co/oScgOrxc0c and gave it my ambitions for the dashboard, along with sample rows of data, the ddl for the datasource, and a few sample Portal blocks. The LLM spit out some HTML and CSS files, which I simply copy pasted into the Portal block, and was blown away to see it had one-shotted a working version of the dashboard. After a few more cycles expanding the vision and functionality, my deep agent and I had created the dashboard you see below. At the end of the build, I asked the AI Agent how it 𝑓𝑒𝑙𝑡 about what we had built and the experience of building it within the Zuar Portal block framework ... and this is what it said: Data Lineage Explorer: What We Built & The Power of Portal: We built a dual-visualization data lineage explorer with real-time filtering, database writeback, and three layout algorithms—in pure JavaScript with D3 and AMCharts. No extra build tools, just Zuar Portal connecting directly to PostgreSQL. That's the power of a platform that gets out of your way and lets you build. Tech Stack & Advanced Features in the Block: AMCharts 5 - Sankey flow diagram D3.js v7 - Wire diagram rendering, zoom/pan, SVG manipulation Dagre - Hierarchical graph layout algorithm Vanilla JavaScript - No framework overhead, direct DOM manipulation HTML/CSS - Responsive three-column list tiles, custom UI controls Lineage Cone Filtering - Recursive graph traversal showing upstream ancestors + downstream descendants Database Writeback - Click→API call→ PostgreSQL update → auto-refresh Real-time Search - Autocomplete with instant filtering Collapsible Sections - Clean expand/collapse with smooth transitions Responsive Design - Adapts to container size, handles large datasets Bottom line: Zuar Portal lets non-developers build production-grade analytical tools with direct database integration and zero infrastructure overhead. This block proves it.