kalfa 3.0.0.dev0__py3-none-any.whl

kalfa/board/static/app.js

@@ -0,0 +1,122 @@
+import { computed, createApp, onMounted, ref, watch }
+  from "https://cdn.jsdelivr.net/npm/vue@3.4.38/dist/vue.esm-browser.prod.js";
+
+import {
+  EVERY,
+  TABS,
+  applyTheme,
+  compareLink,
+  cycleTheme,
+  isActive,
+  latestSweep,
+  refresh,
+  setEvery,
+  startLive,
+  store,
+  sweepLink,
+  watchScheme,
+} from "./store.js";
+import { Compare } from "./views/compare.js";
+import { Home } from "./views/home.js";
+import { Record } from "./views/record.js";
+import { Runs } from "./views/runs.js";
+import { Sweep } from "./views/sweep.js";
+
+
+const PAGES = ["home", "runs", "compare", "sweep", "record"];
+
+function decodePart(part) {
+  try {
+    return decodeURIComponent(part);
+  } catch (error) {
+    return part;
+  }
+}
+
+export function parseHash(hash) {
+  const raw = String(hash || "").replace(/^#/, "").replace(/^\//, "");
+  const mark = raw.indexOf("?");
+  const route = mark >= 0 ? raw.slice(0, mark) : raw;
+  const query = Object.fromEntries(new URLSearchParams(mark >= 0 ? raw.slice(mark + 1) : ""));
+  const parts = route.split("/").filter(Boolean).map(decodePart);
+  const page = parts.length ? parts[0] : "home";
+  const rest = parts.slice(1);
+  if (page === "record") {
+    const named = rest.length > 1 && TABS.includes(rest[rest.length - 1]);
+    const tab = named ? rest[rest.length - 1] : "overview";
+    const path = (named ? rest.slice(0, -1) : rest).join("/");
+    return { page, path, tab, query, raw };
+  }
+  if (page === "sweep") return { page, path: rest.join("/"), tab: "", query, raw };
+  return { page: PAGES.includes(page) ? page : "missing", path: "", tab: "", query, raw };
+}
+
+const Board = {
+  name: "KalfaBoard",
+  components: { HomeView: Home, RunsView: Runs, CompareView: Compare, SweepView: Sweep, RecordView: Record },
+  setup() {
+    const route = ref(parseHash(window.location.hash));
+    const onHash = () => {
+      store.fault = "";
+      route.value = parseHash(window.location.hash);
+    };
+    const running = computed(() => store.records.filter(isActive).length);
+    const sweepHref = computed(() => {
+      const sweep = latestSweep();
+      return sweep ? sweepLink(sweep.path) : "";
+    });
+    const compareHref = computed(() => compareLink(store.selected));
+    const liveTitle = computed(() => (store.connected ? "live: the server reports changes every " + store.every + "s"
+      : "not connected to the live stream, retrying"));
+    const changeEvery = (event) => setEvery(event.target.value);
+
+    watch(running, (count) => {
+      document.title = count ? "kalfa board (" + count + " running)" : "kalfa board";
+    }, { immediate: true });
+    onMounted(() => {
+      window.addEventListener("hashchange", onHash);
+      watchScheme();
+      refresh();
+      startLive();
+    });
+    return { store, route, running, sweepHref, compareHref, liveTitle, changeEvery, cycleTheme, EVERY };
+  },
+  template: `
+    <header class="topbar">
+      <a class="brand" href="#/">kalfa</a>
+      <nav class="nav">
+        <a :class="{ active: route.page === 'home' }" href="#/">home</a>
+        <a :class="{ active: route.page === 'runs' }" href="#/runs">runs</a>
+        <a :class="{ active: route.page === 'compare' }" :href="compareHref">compare<span v-if="store.selected.length" class="count">{{ store.selected.length }}</span></a>
+        <a v-if="sweepHref" :class="{ active: route.page === 'sweep' }" :href="sweepHref">sweep</a>
+        <span v-else class="nav-off" title="no sweep under this root">sweep</span>
+      </nav>
+      <span class="root mono" :title="store.root">{{ store.root }}</span>
+      <span class="spacer"></span>
+      <span class="live" :class="{ on: store.connected }" :title="liveTitle">
+        <span class="dot"></span>{{ store.connected ? "live" : "offline" }}<span v-if="running" class="count">{{ running }}</span>
+      </span>
+      <select class="every" :value="store.every" @change="changeEvery" title="how often the server looks for changes">
+        <option v-for="value in EVERY" :key="value" :value="value">{{ value }}s</option>
+      </select>
+      <button type="button" class="tool" @click="cycleTheme" title="theme: auto follows the system">{{ store.theme }}</button>
+    </header>
+    <div v-if="store.fault" class="error-box page-fault">{{ store.fault }}</div>
+    <main class="main">
+      <home-view v-if="route.page === 'home'"></home-view>
+      <runs-view v-else-if="route.page === 'runs'"></runs-view>
+      <compare-view v-else-if="route.page === 'compare'" :key="'compare:' + route.raw" :query="route.query"></compare-view>
+      <sweep-view v-else-if="route.page === 'sweep'" :key="'sweep:' + route.path" :path="route.path"></sweep-view>
+      <record-view v-else-if="route.page === 'record'" :key="'record:' + route.path" :path="route.path" :tab="route.tab"></record-view>
+      <div v-else class="empty">there is no page at #/{{ route.raw }}; go <a class="link" href="#/">home</a></div>
+    </main>`,
+};
+
+const app = createApp(Board);
+app.config.errorHandler = (error) => {
+  console.error(error);
+  store.fault = "the page hit an error: " + (error && error.message ? error.message : String(error));
+};
+applyTheme();
+app.mount("#app");
+window.kalfaMounted = true;

kalfa/board/static/board.css

@@ -0,0 +1,228 @@
+:root {
+  color-scheme: light;
+  --bg: #f4f4f2;
+  --surface: #fcfcfb;
+  --surface-2: #efeeeb;
+  --ink: #0b0b0b;
+  --ink-2: #52514e;
+  --muted: #74736e;
+  --line: #e2e1dc;
+  --line-2: #cbc9c2;
+  --accent: #2a78d6;
+  --accent-soft: #e3edfa;
+  --running: #2a78d6;
+  --stale: #b97a00;
+  --done: #1b8a5a;
+  --stopped: #74736e;
+  --failed: #d03b3a;
+  --series-1: #2a78d6;
+  --series-2: #eb6834;
+  --series-3: #1baf7a;
+  --series-4: #eda100;
+  --series-5: #e87ba4;
+  --series-6: #008300;
+  --series-7: #6250d6;
+  --series-8: #e34948;
+  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  --radius: 8px;
+  --shadow: 0 1px 2px rgba(20, 20, 18, 0.06);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    color-scheme: dark;
+    --bg: #121211;
+    --surface: #1a1a19;
+    --surface-2: #232321;
+    --ink: #f0efec;
+    --ink-2: #c3c2b7;
+    --muted: #8f8e86;
+    --line: #2c2c2a;
+    --line-2: #3d3d3a;
+    --accent: #5b9cec;
+    --accent-soft: #1d2d44;
+    --running: #5b9cec;
+    --stale: #d9a227;
+    --done: #3dbb83;
+    --stopped: #8f8e86;
+    --failed: #ec6b6a;
+    --series-1: #3987e5;
+    --series-2: #d95926;
+    --series-3: #199e70;
+    --series-4: #c98500;
+    --series-5: #d55181;
+    --series-6: #008300;
+    --series-7: #9085e9;
+    --series-8: #e66767;
+    --shadow: none;
+  }
+}
+
+:root[data-theme="dark"] {
+  color-scheme: dark;
+  --bg: #121211;
+  --surface: #1a1a19;
+  --surface-2: #232321;
+  --ink: #f0efec;
+  --ink-2: #c3c2b7;
+  --muted: #8f8e86;
+  --line: #2c2c2a;
+  --line-2: #3d3d3a;
+  --accent: #5b9cec;
+  --accent-soft: #1d2d44;
+  --running: #5b9cec;
+  --stale: #d9a227;
+  --done: #3dbb83;
+  --stopped: #8f8e86;
+  --failed: #ec6b6a;
+  --series-1: #3987e5;
+  --series-2: #d95926;
+  --series-3: #199e70;
+  --series-4: #c98500;
+  --series-5: #d55181;
+  --series-6: #008300;
+  --series-7: #9085e9;
+  --series-8: #e66767;
+  --shadow: none;
+}
+
+* { box-sizing: border-box; }
+html, body { margin: 0; padding: 0; }
+body { font: 13px/1.5 var(--font); color: var(--ink); background: var(--bg); min-height: 100vh; }
+h1, h2, h3 { margin: 0; font-weight: 600; }
+h2 { font-size: 17px; }
+h3 { font-size: 14px; }
+a { color: inherit; }
+button, input, select { font: inherit; color: inherit; }
+pre { margin: 0; }
+.mono { font-family: var(--mono); font-size: 12px; }
+.muted { color: var(--muted); }
+.small { font-size: 12px; }
+.num { text-align: right; font-variant-numeric: tabular-nums; }
+.spacer { flex: 1; }
+.link { color: var(--accent); text-decoration: none; }
+.link:hover { text-decoration: underline; }
+.empty { color: var(--muted); margin: 8px 0; }
+.loading { color: var(--muted); margin: 16px 0; }
+.loading::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border: 2px solid var(--line-2); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; vertical-align: -1px; }
+@keyframes spin { to { transform: rotate(360deg); } }
+.fail-text { color: var(--failed); }
+
+.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 8px 16px; background: var(--surface); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
+.brand { font-weight: 700; font-size: 15px; text-decoration: none; letter-spacing: 0.02em; }
+.nav { display: flex; gap: 4px; flex-wrap: wrap; }
+.nav a, .nav-off { padding: 4px 10px; border-radius: 6px; text-decoration: none; color: var(--ink-2); }
+.nav a:hover { background: var(--surface-2); color: var(--ink); }
+.nav a.active { background: var(--accent-soft); color: var(--accent); }
+.nav-off { color: var(--muted); opacity: 0.6; cursor: default; }
+.count { display: inline-block; margin-left: 6px; padding: 0 6px; min-width: 18px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 11px; text-align: center; line-height: 18px; }
+.root { color: var(--muted); max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: left; }
+.live { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
+.live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
+.live.on { color: var(--ink-2); }
+.live.on .dot { background: var(--done); box-shadow: 0 0 0 3px color-mix(in srgb, var(--done) 25%, transparent); }
+.every { padding: 3px 6px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--surface); }
+
+.main { max-width: 1440px; margin: 0 auto; padding: 16px; }
+.page { display: flex; flex-direction: column; gap: 12px; }
+.page-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
+.section-title { margin-top: 8px; }
+.page-fault { margin: 12px 16px 0; }
+
+.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px; min-width: 0; }
+.card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; min-width: 0; }
+.card-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
+.card-tools { display: flex; gap: 4px; flex: none; }
+.card-note { margin-bottom: 4px; }
+.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 12px; }
+.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); gap: 12px; }
+.stat-label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
+.stat-value { font-size: 18px; font-weight: 600; margin: 2px 0; overflow-wrap: anywhere; }
+.chip { display: inline-block; margin: 2px 4px 2px 0; padding: 1px 7px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12px; }
+.notice { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 12px; border-radius: var(--radius); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
+.error-box { padding: 8px 12px; border-radius: var(--radius); color: var(--failed); background: color-mix(in srgb, var(--failed) 10%, transparent); border: 1px solid color-mix(in srgb, var(--failed) 35%, transparent); white-space: pre-wrap; overflow-wrap: anywhere; }
+.notice-box { padding: 8px 12px; border-radius: var(--radius); color: var(--ink); background: color-mix(in srgb, var(--stopped) 12%, transparent); border: 1px solid color-mix(in srgb, var(--stopped) 40%, transparent); white-space: pre-wrap; overflow-wrap: anywhere; }
+
+.button, .tool { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line-2); background: var(--surface); border-radius: 6px; cursor: pointer; text-decoration: none; white-space: nowrap; }
+.button { padding: 5px 12px; }
+.tool { padding: 2px 8px; font-size: 12px; color: var(--ink-2); }
+.button:hover, .tool:hover { border-color: var(--accent); color: var(--accent); }
+.tool.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
+.button.ghost { border-color: transparent; background: transparent; }
+.button.danger { border-color: color-mix(in srgb, var(--failed) 50%, transparent); color: var(--failed); }
+.button.danger:hover { background: color-mix(in srgb, var(--failed) 10%, transparent); color: var(--failed); border-color: var(--failed); }
+.button.disabled, .button:disabled { opacity: 0.5; pointer-events: none; }
+.filter { padding: 5px 9px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--surface); min-width: 0; width: min(360px, 100%); }
+.filter:focus, .every:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
+.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.toolbar .filter { flex: 1; width: auto; max-width: 640px; }
+
+.badge { display: inline-block; padding: 0 8px; border-radius: 10px; font-size: 11px; line-height: 18px; font-weight: 600; white-space: nowrap; --tone: var(--stopped); color: var(--tone); background: color-mix(in srgb, var(--tone) 14%, transparent); border: 1px solid color-mix(in srgb, var(--tone) 35%, transparent); }
+.badge.is-running { --tone: var(--running); }
+.badge.is-stale { --tone: var(--stale); }
+.badge.is-done { --tone: var(--done); }
+.badge.is-stopped { --tone: var(--stopped); }
+.badge.is-failed { --tone: var(--failed); }
+.badge.is-partial { --tone: var(--stale); }
+.badge.is-unknown { --tone: var(--muted); }
+
+.progress { display: inline-flex; align-items: center; gap: 8px; min-width: 120px; }
+.progress-track { flex: 1; min-width: 60px; height: 6px; border-radius: 3px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
+.progress-fill { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.3s ease; }
+.progress.unknown .progress-track { opacity: 0.5; }
+.progress-text { color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 12px; }
+
+.spark { display: inline-block; vertical-align: middle; color: var(--accent); }
+
+.table-box { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
+.table-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
+table.data { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
+table.data th, table.data td { padding: 6px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; white-space: nowrap; }
+table.data th { position: sticky; top: 0; background: var(--surface-2); color: var(--ink-2); font-weight: 600; font-size: 12px; user-select: none; }
+table.data th.sortable { cursor: pointer; }
+table.data th.sortable:hover { color: var(--ink); }
+table.data th.num, table.data td.num { text-align: right; }
+table.data tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
+table.data tbody tr.selected { background: var(--accent-soft); }
+table.data tbody tr:last-child td { border-bottom: 0; }
+table.data .check { width: 28px; padding-right: 0; }
+table.data .arrow { color: var(--accent); font-size: 9px; }
+table.data td.empty { text-align: center; padding: 16px; }
+
+.live-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 12px; }
+.live-card { display: flex; flex-direction: column; gap: 6px; text-decoration: none; }
+.live-card:hover { border-color: var(--accent); }
+.live-head { display: flex; align-items: center; gap: 8px; }
+.live-name { font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+.plot { width: 100%; min-height: 120px; }
+.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(10, 10, 9, 0.55); }
+.modal-box { display: flex; flex-direction: column; width: min(1280px, 100%); height: min(860px, 100%); padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
+.plot.large { flex: 1; min-height: 0; }
+
+.diff { font-family: var(--mono); font-size: 12px; padding: 8px; overflow-x: auto; background: var(--surface-2); border-radius: 6px; }
+.diff span { display: block; white-space: pre; min-height: 1.4em; }
+.diff .head { color: var(--muted); }
+.diff .hunk { color: var(--accent); }
+.diff .add { color: var(--done); background: color-mix(in srgb, var(--done) 10%, transparent); }
+.diff .del { color: var(--failed); background: color-mix(in srgb, var(--failed) 10%, transparent); }
+.shared { line-height: 2; }
+
+.record-head { display: flex; flex-direction: column; gap: 8px; }
+.record-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+.record-title h2 { overflow-wrap: anywhere; }
+.record-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
+.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; }
+.tab { padding: 6px 12px; text-decoration: none; color: var(--ink-2); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
+.tab:hover { color: var(--ink); }
+.tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
+.tab-body { min-width: 0; }
+
+@media (max-width: 720px) {
+  .main { padding: 12px 16px; }
+  .root { display: none; }
+  .grid { grid-template-columns: 1fr; }
+  .record-meta { gap: 8px 12px; }
+}

kalfa/board/static/charts.css

@@ -0,0 +1,46 @@
+.chart-card .tool.tuned::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
+
+.chart-modal { padding: 16px; }
+.chart-box { width: min(1480px, 100%); height: min(940px, 100%); gap: 6px; box-shadow: var(--shadow); font-family: var(--font); color: var(--ink); }
+.chart-box > .card-head { margin-bottom: 0; }
+.chart-body { flex: 1; min-height: 0; display: flex; gap: 14px; }
+.chart-stage { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: flex-start; overflow: auto; }
+.chart-stage .plot.large { min-height: 200px; }
+
+.chart-panel { flex: none; width: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 0 4px 8px 14px; border-left: 1px solid var(--line); font-size: 12px; }
+.chart-group { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; border: 0; }
+.chart-group-title { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
+details.chart-group > summary { cursor: pointer; user-select: none; }
+details.chart-group > summary:hover { color: var(--ink); }
+.chart-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
+.chart-label { flex: none; width: 74px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.chart-unit { flex: none; color: var(--muted); }
+.chart-hint { color: var(--muted); font-size: 11px; line-height: 1.4; }
+
+.chart-panel input[type="number"], .chart-panel input[type="text"], .chart-panel select, .chart-panel textarea { min-width: 0; padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font-family: var(--font); font-size: 12px; }
+.chart-row input[type="number"], .chart-row input[type="text"], .chart-row select { flex: 1 1 0; width: 0; }
+.chart-panel input:focus, .chart-panel select:focus, .chart-panel textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
+.chart-panel select:disabled { opacity: 0.5; }
+.chart-panel input[type="range"] { flex: 1; min-width: 0; margin: 0; accent-color: var(--accent); }
+.chart-panel input[type="checkbox"] { margin: 0; accent-color: var(--accent); }
+.chart-panel textarea { width: 100%; min-height: 104px; resize: vertical; padding: 6px 8px; font-family: var(--mono); line-height: 1.45; }
+.chart-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--ink); }
+
+.chart-auto { flex: none; min-width: 42px; padding: 1px 4px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--muted); font-family: var(--mono); font-size: 11px; text-align: right; cursor: pointer; }
+.chart-auto:not(:disabled):hover { color: var(--accent); border-color: var(--line); }
+.chart-auto:disabled { cursor: default; }
+
+.chart-swatches { display: flex; flex-wrap: wrap; gap: 3px; padding-left: 80px; }
+.chart-swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--line); }
+
+.chart-actions { flex-wrap: wrap; }
+.chart-reset:hover { border-color: var(--failed); color: var(--failed); }
+.chart-error { color: var(--failed); font-size: 11px; white-space: pre-wrap; overflow-wrap: anywhere; }
+
+@media (max-width: 900px) {
+  .chart-modal { padding: 8px; }
+  .chart-box { height: 100%; overflow-y: auto; }
+  .chart-body { flex: none; flex-direction: column; }
+  .chart-stage { flex: none; height: 62vh; }
+  .chart-panel { width: auto; overflow: visible; padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--line); }
+}

kalfa/board/static/components/badge.js

@@ -0,0 +1,14 @@
+const KNOWN = ["running", "stale", "done", "stopped", "failed", "partial", "unknown"];
+
+export const Badge = {
+  name: "KBadge",
+  props: { status: { type: String, default: "unknown" } },
+  setup(props) {
+    const label = () => props.status || "unknown";
+    const tone = () => (KNOWN.includes(label()) ? label() : "unknown");
+    return { label, tone };
+  },
+  template: '<span class="badge" :class="\'is-\' + tone()">{{ label() }}</span>',
+};
+
+export default Badge;

kalfa/board/static/components/chart.js

@@ -0,0 +1,204 @@
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch }
+  from "https://cdn.jsdelivr.net/npm/vue@3.4.38/dist/vue.esm-browser.prod.js";
+
+import { draw, exportImage, numberOf, purge } from "../plot.js";
+import { store } from "../store.js";
+import { ChartSettings, chartSettings, drawOptions, forgetSettings, isTuned, payloadOf, saveSettings }
+  from "./settings.js";
+
+
+function labelsOf(kind, options) {
+  const fallback = { histogram: ["", "count"], heatmap: ["predicted", "truth"] }[kind] || ["", ""];
+  return { xlabel: options.xlabel || fallback[0], ylabel: options.ylabel || fallback[1] };
+}
+
+export const Chart = {
+  name: "KChart",
+  components: { KChartSettings: ChartSettings },
+  props: {
+    title: { type: String, default: "" },
+    kind: { type: String, default: "lines" },
+    data: { default: null },
+    options: { type: Object, default: () => ({}) },
+    height: { type: Number, default: 260 },
+    logToggle: { type: Boolean, default: true },
+    note: { type: String, default: "" },
+    settingsKey: { type: String, default: "" },
+    binsBox: { type: Boolean, default: false },
+  },
+  emits: ["settings"],
+  setup(props, { emit }) {
+    const host = ref(null);
+    const large = ref(null);
+    const open = ref(false);
+    const panel = ref(true);
+    const failure = ref("");
+    const measured = ref({ width: 0, height: 0 });
+    let pressed = false;
+    let announced = "";
+
+    const base = () => props.options || {};
+    const key = computed(() => props.settingsKey || props.kind + ":" + props.title);
+    const settings = computed(() => chartSettings(key.value));
+    const tuned = computed(() => isTuned(settings.value));
+    const logy = computed(() => {
+      const scale = settings.value.yscale;
+      return scale ? scale === "log" : Boolean(base().logy);
+    });
+    const auto = computed(() => ({
+      logx: Boolean(base().logx),
+      logy: Boolean(base().logy),
+      horizontal: base().horizontal !== false,
+      ...labelsOf(props.kind, base()),
+    }));
+    const box = computed(() => ({
+      width: numberOf(settings.value.boxWidth),
+      height: numberOf(settings.value.boxHeight),
+    }));
+    const largeStyle = computed(() => {
+      const style = {};
+      if (box.value.width) style.width = Math.max(200, box.value.width) + "px";
+      if (box.value.height) {
+        style.height = Math.max(200, box.value.height) + "px";
+        style.flex = "none";
+      }
+      return style;
+    });
+
+    const optionsFor = (height) => ({ ...base(), ...drawOptions(settings.value), revision: key.value, height });
+    const paint = (el, height) => {
+      if (!el || props.data === null || props.data === undefined) return;
+      try {
+        draw(props.kind, el, props.data, optionsFor(height));
+        failure.value = "";
+      } catch (error) {
+        failure.value = "cannot draw this chart: " + error.message;
+      }
+    };
+    const bigHeight = () => {
+      if (box.value.height) return Math.max(200, box.value.height);
+      return Math.max(240, (large.value && large.value.clientHeight) || window.innerHeight * 0.6);
+    };
+    const paintLarge = () => {
+      const el = large.value;
+      if (!open.value || !el) return;
+      paint(el, bigHeight());
+      const size = { width: el.clientWidth, height: el.clientHeight };
+      if (size.width !== measured.value.width || size.height !== measured.value.height) measured.value = size;
+    };
+    const redraw = () => {
+      paint(host.value, props.height);
+      if (open.value) nextTick(paintLarge);
+    };
+    const announce = (force) => {
+      const payload = payloadOf(key.value, settings.value, base());
+      const text = JSON.stringify(payload);
+      if (text === announced) return;
+      announced = text;
+      if (force) emit("settings", payload);
+    };
+
+    const onKey = (event) => {
+      if (event.key === "Escape") close();
+    };
+    const close = () => {
+      purge(large.value);
+      open.value = false;
+      window.removeEventListener("keydown", onKey);
+    };
+    const expand = () => {
+      open.value = true;
+      window.addEventListener("keydown", onKey);
+      nextTick(paintLarge);
+    };
+    const press = (event) => {
+      pressed = event.target === event.currentTarget;
+    };
+    const release = (event) => {
+      if (pressed && event.target === event.currentTarget) close();
+      pressed = false;
+    };
+    const togglePanel = () => {
+      panel.value = !panel.value;
+    };
+    const toggleLog = () => {
+      const next = !logy.value;
+      settings.value.yscale = next === Boolean(base().logy) ? "" : next ? "log" : "linear";
+    };
+    const reset = () => forgetSettings(key.value);
+    const download = (format) => {
+      const current = settings.value;
+      exportImage(large.value, {
+        format,
+        width: numberOf(current.imageWidth) || measured.value.width,
+        height: numberOf(current.imageHeight) || measured.value.height,
+        scale: numberOf(current.imageScale),
+        filename: props.title || key.value,
+      }).catch((error) => {
+        failure.value = "cannot download this chart: " + error.message;
+      });
+    };
+
+    watch([key, () => JSON.stringify(settings.value)], (now, before) => {
+      if (now[0] === before[0]) saveSettings(key.value, settings.value);
+      redraw();
+      announce(true);
+    });
+    watch(() => props.data, redraw);
+    watch(() => props.kind, redraw);
+    watch(() => JSON.stringify(props.options || {}), redraw);
+    watch(() => store.paint, redraw);
+    onMounted(() => {
+      redraw();
+      announce(tuned.value);
+    });
+    onBeforeUnmount(() => {
+      window.removeEventListener("keydown", onKey);
+      purge(host.value);
+      purge(large.value);
+    });
+    return {
+      host, large, open, panel, failure, measured, settings, tuned, logy, auto, largeStyle, expand, close, press,
+      release, togglePanel, toggleLog, reset, download,
+    };
+  },
+  template: `
+    <div class="card chart-card">
+      <div class="card-head">
+        <span class="card-title" :title="title">{{ title }}</span>
+        <span class="card-tools">
+          <button v-if="logToggle" type="button" class="tool" :class="{ on: logy }" @click="toggleLog">log y</button>
+          <button type="button" class="tool" :class="{ tuned: tuned }" @click="expand"
+            :title="tuned ? 'open this chart large; it has saved settings' : 'open this chart large with its settings'">expand</button>
+        </span>
+      </div>
+      <div v-if="note" class="card-note muted small">{{ note }}</div>
+      <div v-if="failure" class="error-box">{{ failure }}</div>
+      <div ref="host" class="plot" :style="{ height: height + 'px' }"></div>
+      <teleport to="body">
+        <div v-if="open" class="modal chart-modal" @mousedown="press" @click="release">
+          <div class="modal-box chart-box" role="dialog" aria-modal="true" :aria-label="title || 'chart'">
+            <div class="card-head">
+              <span class="card-title" :title="title">{{ title }}</span>
+              <span class="card-tools">
+                <button v-if="logToggle" type="button" class="tool" :class="{ on: logy }" @click="toggleLog">log y</button>
+                <button type="button" class="tool" :class="{ on: panel }" @click="togglePanel">settings</button>
+                <button type="button" class="tool" @click="close">close</button>
+              </span>
+            </div>
+            <div v-if="note" class="card-note muted small">{{ note }}</div>
+            <div v-if="failure" class="error-box">{{ failure }}</div>
+            <div class="chart-body">
+              <div class="chart-stage">
+                <div ref="large" class="plot large" :style="largeStyle"></div>
+              </div>
+              <k-chart-settings v-if="panel" :settings="settings" :kind="kind" :auto="auto" :size="measured"
+                :bins-box="binsBox" @reset="reset" @download="download"></k-chart-settings>
+            </div>
+          </div>
+        </div>
+      </teleport>
+    </div>`,
+};
+
+export default Chart;