Dynamic
Dashboard.

Why it exists

The old Analysis tab was a static page. Same layout, same four metrics, same two tool buttons for everyone. That works if the only thing you need is a glance at the numbers. But analysts dont all work the same way. Some want to watch the threat feed in real time. Others want a big pie chart and nothing else. A few just want to make sure the AI is still running.

So I ripped out the static grid and replaced it with widgets you can drag around, resize, add, and remove. Your layout gets saved to IndexedDB. Come back tomorrow and your dashboard looks exactly how you left it.

How it works

The dashboard lives in the tab formerly known as Analysis. Click the chart icon in the tab bar and you get a blank-ish canvas with a toolbar. The + Add Widget button drops down the available widget types. Pick one and it gets placed in the first empty slot.

Every widget is a card with a header (title + resize/close buttons) and a body that renders live data. Drag a card by its header to move it around. Click the expand icon to cycle through four sizes: 1x1, 1x2, 2x1, 2x2 (where the unit is roughly 280x160 pixels). Click the X to delete a widget. The layout is saved automatically on every change.

The reset button (undo icon) restores the default seven-widget layout. The refresh button re-renders every widget's content.

Widget types

Seven widget types come built in:

• Entity Count — big numbers for people, entities, cases, and tags. 1x1.
• Risk Distribution — a CSS conic-gradient pie chart showing credit risk tiers (high/medium/low). 1x2.
• Recent Activity — the 12 most recently created or updated items across people, entities, and cases, with timestamps. 1x2.
• Graph Snapshot — a tiny canvas with a force-directed-ish scatter of nodes (blue = people, purple = entities) and random edges. Not a real graph layout — its purely decorative, meant to give you a quick visual sense of data density. Shows node/edge counts and a high-risk badge. 2x2.
• Case Status — counts for open, in-progress, and closed cases with progress bars. 1x1.
• Threat Timeline — lists high and medium threat people with colored dots. 2x1.
• AI Insights — the six most recent AI analysis results from the analyses store. 1x2.

Layout persistence

Widget positions, sizes, and types are stored as a JSON array in the meta object store of PazatorV2 (IndexedDB) under the key dashboardLayout. A localStorage fallback is also written in case IndexedDB is unavailable. The storage is write-on-change — drag, resize, add, or remove all trigger a save.

{
  id: "dashboardLayout",
  widgets: [
    { id: "w-entity-count-xxx", type: "entity-count", x: 0, y: 0, w: 1, h: 1 },
    { id: "w-risk-pie-xxx",     type: "risk-pie",     x: 1, y: 0, w: 1, h: 2 },
    ...
  ]
}

Drag and drop

Uses the native HTML5 Drag and Drop API. No external libraries. When you start dragging a widget, its opacity drops to 40% and the cursor changes to a grab hand. Dropping it onto another widget swaps their positions. The drop target highlights briefly. The whole thing is lightweight and works without any framework dependencies.

The grid is absolute-positioned. Each widget's position is calculated as x * (colWidth + gap) for left and y * (rowHeight + gap) for top. Resizing changes the w and h values and the card dimensions recalculate. The grid container's min-height is computed from the furthest widget bottom-edge.

Code

Everything lives in app/pazator_dashboard.js as a standalone IIFE that exports window.pazatorDashboard. The HTML was swapped out in app/index.html — the old Analysis tab content was replaced with a toolbar and an empty #dashboardGrid div. The switchTab function in scriptz.js was updated to call pazatorDashboard.init() on first visit and pazatorDashboard.refresh() on subsequent visits.

---

The dashboard pulls data from the same store that powers the rest of the app — pazatorStore._data, cases, analysesStore, etc. It uses pazatorEngine for IndexedDB persistence. See the app to try it.