/* ============================================================
STATE
============================================================ */
const state = {
view: 'sources',
source: null, // selected pf.source row
version: null, // selected pf.version row
selectedVersionId: null, // in versions grid
colMeta: [], // col_meta for selected source
slice: {}, // current pivot selection
loadDataOp: null, // 'baseline' | 'reference'
baselineFilterCols: [],
previewSchema: null,
previewTname: null,
grids: {
tables: null,
sources: null,
colMeta: null,
versions: null,
pivot: null,
log: null
}
};
/* ============================================================
API
============================================================ */
async function api(method, path, body) {
const opts = { method, headers: { 'Content-Type': 'application/json' } };
if (body !== undefined) opts.body = JSON.stringify(body);
const res = await fetch('/api' + path, opts);
const data = await res.json();
if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
return data;
}
/* ============================================================
STATUS BAR
============================================================ */
let statusTimer = null;
function showStatus(msg, type = 'info') {
const bar = document.getElementById('status-bar');
bar.textContent = msg;
bar.className = `status-${type}`;
bar.classList.remove('hidden');
clearTimeout(statusTimer);
if (type !== 'error') statusTimer = setTimeout(() => bar.classList.add('hidden'), 4000);
}
/* ============================================================
NAVIGATION
============================================================ */
function switchView(name) {
if ((name === 'forecast' || name === 'log' || name === 'baseline') && !state.version) {
showStatus('Select a version first', 'error');
return;
}
document.querySelectorAll('.view').forEach(el => {
el.classList.add('hidden');
el.classList.remove('active');
});
const target = document.getElementById(`view-${name}`);
target.classList.remove('hidden');
target.classList.add('active');
document.querySelectorAll('.nav-links li').forEach(li =>
li.classList.toggle('active', li.dataset.view === name)
);
state.view = name;
if (name === 'versions') renderVersions();
if (name === 'forecast') loadForecastData();
if (name === 'log') loadLogData();
if (name === 'baseline') openBaselineWorkbench();
}
function setSource(source) {
state.source = source;
const el = document.getElementById('ctx-source');
if (source) {
el.classList.remove('hidden');
document.getElementById('ctx-source-name').textContent = `${source.schema}.${source.tname}`;
} else {
el.classList.add('hidden');
}
}
function setVersion(version) {
state.version = version;
const el = document.getElementById('ctx-version');
if (version) {
el.classList.remove('hidden');
document.getElementById('ctx-version-name').textContent = version.name;
const badge = document.getElementById('ctx-version-status');
badge.textContent = version.status;
badge.className = `status-badge ${version.status}`;
} else {
el.classList.add('hidden');
}
}
function getPfUser() {
return document.getElementById('input-pf-user').value.trim() || 'unknown';
}
/* ============================================================
SOURCES VIEW — table browser
============================================================ */
async function initSourcesView() {
const tables = await api('GET', '/tables');
renderTablesGrid(tables);
const sources = await api('GET', '/sources');
renderSourcesGrid(sources);
}
function renderTablesGrid(tables) {
const el = document.getElementById('tables-grid');
if (state.grids.tables) { state.grids.tables.setGridOption('rowData', tables); return; }
state.grids.tables = agGrid.createGrid(el, {
columnDefs: [
{ field: 'schema', headerName: 'Schema', width: 90 },
{ field: 'tname', headerName: 'Table', flex: 1 },
{ field: 'row_estimate', headerName: 'Rows', width: 80,
valueFormatter: p => p.value != null ? Number(p.value).toLocaleString() : '—' }
],
rowData: tables,
rowSelection: 'single',
onRowClicked: onTableRowClicked,
onRowDoubleClicked: e => showTablePreview(e.data.schema, e.data.tname),
defaultColDef: { resizable: true, sortable: true },
headerHeight: 32, rowHeight: 28
});
}
function onTableRowClicked(e) {
const { schema, tname } = e.data;
state.previewSchema = schema;
state.previewTname = tname;
document.getElementById('btn-register').classList.remove('hidden');
}
async function showTablePreview(schema, tname) {
try {
const data = await api('GET', `/tables/${schema}/${tname}/preview`);
const title = document.getElementById('modal-title');
const body = document.getElementById('modal-body');
title.textContent = `${schema}.${tname}`;
// columns table
let colHtml = `Columns
| Column | Type | Nullable |
|---|
`;
data.columns.forEach(c => {
colHtml += `| ${c.column_name} | ${c.data_type} | ${c.is_nullable} |
`;
});
colHtml += '
Sample rows
`;
cols.forEach(c => rowHtml += `| ${c} | `);
rowHtml += '
';
data.rows.forEach(row => {
rowHtml += '';
cols.forEach(c => rowHtml += `| ${row[c] ?? ''} | `);
rowHtml += '
';
});
rowHtml += '
No segments loaded yet.
';
return;
}
el.innerHTML = segments.map(s => {
const params = s.params || {};
const filters = (params.filters || [])
.map(f => {
if (f.op === 'IS NULL' || f.op === 'IS NOT NULL') return `${f.col} ${f.op}`;
if (f.op === 'BETWEEN') return `${f.col} BETWEEN ${(f.values||[]).join(' AND ')}`;
if (f.op === 'IN' || f.op === 'NOT IN') return `${f.col} ${f.op} (${(f.values||[]).join(', ')})`;
return `${f.col} ${f.op} ${(f.values||[])[0] || ''}`;
}).join('\n');
const offset = params.date_offset && params.date_offset !== '0 days' ? ` · offset: ${params.date_offset}` : '';
const stamp = s.stamp ? new Date(s.stamp).toLocaleString() : '';
return `
`;
}).join('');
}
function addFilterRow() {
const container = document.getElementById('seg-filter-rows');
const idx = container.children.length;
const colOptions = state.baselineFilterCols
.map(c => ``)
.join('');
const div = document.createElement('div');
div.className = 'filter-row';
div.dataset.index = idx;
div.innerHTML = `
`;
div.querySelector('.filter-op-select').addEventListener('change', () => {
updateFilterValueInputs(div);
updateTimelinePreview();
});
div.querySelector('.filter-col-select').addEventListener('change', () => {
updateTimelinePreview();
});
div.querySelector('.filter-remove-btn').addEventListener('click', () => {
div.remove();
updateTimelinePreview();
});
updateFilterValueInputs(div);
container.appendChild(div);
}
function updateFilterValueInputs(row) {
const op = row.querySelector('.filter-op-select').value;
const container = row.querySelector('.filter-value-container');
if (op === 'IS NULL' || op === 'IS NOT NULL') {
container.innerHTML = '';
return;
}
if (op === 'BETWEEN') {
container.innerHTML = `
and
`;
container.querySelectorAll('input').forEach(i => i.addEventListener('input', updateTimelinePreview));
return;
}
if (op === 'IN' || op === 'NOT IN') {
container.innerHTML = ``;
return;
}
// = or !=
container.innerHTML = ``;
}
function getFilterRows() {
const rows = [];
document.querySelectorAll('#seg-filter-rows .filter-row').forEach(row => {
const col = row.querySelector('.filter-col-select').value;
const op = row.querySelector('.filter-op-select').value;
if (!col) return;
const filter = { col, op, values: [] };
if (op === 'BETWEEN') {
const from = row.querySelector('.filter-val-from')?.value.trim();
const to = row.querySelector('.filter-val-to')?.value.trim();
if (from) filter.values.push(from);
if (to) filter.values.push(to);
} else if (op === 'IN' || op === 'NOT IN') {
const raw = row.querySelector('.filter-val-list')?.value.trim();
if (raw) filter.values = raw.split(',').map(s => s.trim()).filter(Boolean);
} else if (op !== 'IS NULL' && op !== 'IS NOT NULL') {
const val = row.querySelector('.filter-val-single')?.value.trim();
if (val) filter.values.push(val);
}
rows.push(filter);
});
return rows;
}
function updateTimelinePreview() {
const el = document.getElementById('seg-timeline');
// find first BETWEEN filter on a date-role column
let dateFrom = null, dateTo = null;
document.querySelectorAll('#seg-filter-rows .filter-row').forEach(row => {
if (dateFrom) return;
const col = row.querySelector('.filter-col-select').value;
const op = row.querySelector('.filter-op-select').value;
if (op !== 'BETWEEN') return;
const meta = state.baselineFilterCols.find(c => c.cname === col);
if (!meta || meta.role !== 'date') return;
const from = row.querySelector('.filter-val-from')?.value.trim();
const to = row.querySelector('.filter-val-to')?.value.trim();
if (from && to) { dateFrom = from; dateTo = to; }
});
if (!dateFrom || !dateTo) { el.classList.add('hidden'); return; }
const from = new Date(dateFrom + 'T00:00:00');
const to = new Date(dateTo + 'T00:00:00');
if (isNaN(from) || isNaN(to) || from > to) { el.classList.add('hidden'); return; }
const months = (to.getFullYear() - from.getFullYear()) * 12 + (to.getMonth() - from.getMonth()) + 1;
const fmt = new Intl.DateTimeFormat('en-US', { month: 'short', year: 'numeric' });
const offsetType = document.getElementById('seg-offset-type').value;
const offsetValue = parseInt(document.getElementById('seg-offset-value').value) || 0;
function applyOffset(d) {
const r = new Date(d);
if (!offsetType || !offsetValue) return r;
switch (offsetType) {
case 'year': r.setFullYear(r.getFullYear() + offsetValue); break;
case 'month': r.setMonth(r.getMonth() + offsetValue); break;
case 'week': r.setDate(r.getDate() + offsetValue * 7); break;
case 'day': r.setDate(r.getDate() + offsetValue); break;
}
return r;
}
const projFrom = applyOffset(from);
const projTo = applyOffset(to);
let html = `
Source
${fmt.format(from)}
${months} month${months !== 1 ? 's' : ''}
${fmt.format(to)}
`;
if (offsetType && offsetValue) {
html += `
+ ${offsetValue} ${offsetType}${offsetValue !== 1 ? 's' : ''} →
Projected
${fmt.format(projFrom)}
${months} month${months !== 1 ? 's' : ''}
${fmt.format(projTo)}
`;
}
el.innerHTML = html;
el.classList.remove('hidden');
}
async function submitBaselineSegment() {
if (!state.version) return;
const filters = getFilterRows();
if (filters.length === 0) { showStatus('Add at least one filter', 'error'); return; }
const offsetType = document.getElementById('seg-offset-type').value;
const offsetValue = parseInt(document.getElementById('seg-offset-value').value) || 0;
const date_offset = (offsetType && offsetValue)
? `${offsetValue} ${offsetType}${offsetValue !== 1 ? 's' : ''}`
: '0 days';
const body = {
filters,
date_offset,
pf_user: getPfUser(),
note: document.getElementById('seg-description').value.trim() || undefined
};
try {
showStatus('Loading segment...', 'info');
const result = await api('POST', `/versions/${state.version.id}/baseline`, body);
showStatus(`Segment loaded — ${result.rows_affected} rows`, 'success');
document.getElementById('seg-description').value = '';
document.getElementById('seg-filter-rows').innerHTML = '';
document.getElementById('seg-timeline').classList.add('hidden');
addFilterRow();
await loadBaselineSegments();
} catch (err) {
showStatus(err.message, 'error');
}
}
async function clearBaseline() {
if (!state.version) return;
if (!confirm('Delete all baseline rows and segment history for this version? This cannot be undone.')) return;
try {
const result = await api('DELETE', `/versions/${state.version.id}/baseline`);
showStatus(`Baseline cleared — ${result.rows_deleted} rows removed`, 'success');
await loadBaselineSegments();
} catch (err) {
showStatus(err.message, 'error');
}
}
/* ============================================================
FORECAST VIEW — data loading
============================================================ */
function parseNumericRows(rows) {
const numericCols = state.colMeta
.filter(c => c.role === 'value' || c.role === 'units')
.map(c => c.cname);
return rows.map(row => {
const r = { ...row };
numericCols.forEach(col => { if (r[col] != null) r[col] = parseFloat(r[col]); });
return r;
});
}
async function loadForecastData() {
if (!state.version) return;
document.getElementById('forecast-label').textContent =
`${state.source?.tname || ''} — ${state.version.name} [${state.version.status}]`;
try {
// ensure col_meta is loaded (may not be if user navigated directly)
if (!state.colMeta.length && state.source) {
state.colMeta = await api('GET', `/sources/${state.source.id}/cols`);
}
showStatus('Loading forecast data...', 'info');
const rawData = await api('GET', `/versions/${state.version.id}/data`);
const data = parseNumericRows(rawData);
initPivotGrid(data);
showStatus(`Loaded ${data.length.toLocaleString()} rows`, 'success');
} catch (err) {
showStatus(err.message, 'error');
}
}
/* ============================================================
FORECAST VIEW — pivot grid
============================================================ */
function buildPivotColDefs() {
const defs = [];
state.colMeta.forEach((c) => {
if (c.role === 'ignore') return;
const needsGetter = /\W/.test(c.cname);
const def = {
field: c.cname,
headerName: c.label || c.cname,
resizable: true,
sortable: true,
...(needsGetter ? { valueGetter: p => p.data ? p.data[c.cname] : undefined } : {})
};
if (c.role === 'dimension' || c.role === 'date') {
def.enableRowGroup = true;
def.enablePivot = true;
}
if (c.role === 'value' || c.role === 'units') {
def.enableValue = true;
def.aggFunc = 'sum';
def.type = 'numericColumn';
def.valueFormatter = p => p.value != null
? Number(p.value).toLocaleString(undefined, { maximumFractionDigits: 2 })
: '';
}
defs.push(def);
if (c.role === 'date') {
defs.push({
colId: c.cname + '__month',
headerName: (c.label || c.cname) + ' (Month)',
enableRowGroup: true,
enablePivot: true,
valueGetter: p => {
const v = p.data ? p.data[c.cname] : undefined;
if (!v) return undefined;
const d = new Date(v);
return isNaN(d) ? undefined : `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`;
}
});
}
});
// always include iter for grouping context
defs.push({ field: 'iter', headerName: 'Iter', enableRowGroup: true, enablePivot: true, width: 90 });
defs.push({ field: 'pf_user', headerName: 'User', width: 90, hide: true });
defs.push({ field: 'created_at', headerName: 'Created', width: 130, hide: true,
valueFormatter: p => p.value ? new Date(p.value).toLocaleDateString() : '' });
return defs;
}
function initPivotGrid(data) {
const el = document.getElementById('pivot-grid');
if (state.grids.pivot) {
state.grids.pivot.setGridOption('rowData', data);
return;
}
state.grids.pivot = agGrid.createGrid(el, {
columnDefs: buildPivotColDefs(),
rowData: data,
rowSelection: 'single',
groupDisplayType: 'singleColumn',
rowGroupPanelShow: 'always',
groupDefaultExpanded: 1,
suppressAggFuncInHeader: true,
animateRows: true,
sideBar: {
toolPanels: [{
id: 'columns',
labelDefault: 'Columns',
labelKey: 'columns',
iconKey: 'columns',
toolPanel: 'agColumnsToolPanel',
toolPanelParams: {}
}],
defaultToolPanel: 'columns'
},
defaultColDef: { resizable: true, sortable: true },
autoGroupColumnDef: {
headerName: 'Group',
minWidth: 200,
cellRendererParams: { suppressCount: false }
},
headerHeight: 32,
rowHeight: 28,
onRowClicked: onPivotRowClicked
});
}
/* ============================================================
FORECAST VIEW — slice selection
============================================================ */
function onPivotRowClicked(event) {
const node = event.node;
state.slice = extractSliceFromNode(node);
renderSliceDisplay();
// populate recode and clone fields whenever slice changes
renderDimFields('recode');
renderDimFields('clone');
}
function extractSliceFromNode(node) {
const slice = {};
let current = node;
while (current) {
if (current.field && current.key != null && current.key !== '') {
slice[current.field] = current.key;
}
current = current.parent;
}
return slice;
}
function renderSliceDisplay() {
const display = document.getElementById('slice-display');
const hasSlice = Object.keys(state.slice).length > 0;
if (!hasSlice) {
display.innerHTML = 'Click a row to select a slice';
document.getElementById('btn-clear-slice').classList.add('hidden');
document.getElementById('op-forms-area').classList.add('hidden');
return;
}
display.innerHTML = Object.entries(state.slice)
.map(([k, v]) => `${k} = ${v}`)
.join('');
document.getElementById('btn-clear-slice').classList.remove('hidden');
document.getElementById('op-forms-area').classList.remove('hidden');
}
function clearSlice() {
state.slice = {};
renderSliceDisplay();
}
/* ============================================================
FORECAST VIEW — operation tabs
============================================================ */
function switchOpTab(opName) {
document.querySelectorAll('.op-tab').forEach(t =>
t.classList.toggle('active', t.dataset.op === opName)
);
document.querySelectorAll('.op-form').forEach(f => f.classList.add('hidden'));
document.getElementById(`op-${opName}`).classList.remove('hidden');
}
// render input fields for each dimension column (recode / clone)
// is_key columns get a populated