kalfa 3.0.0.dev0__py3-none-any.whl

kalfa/board/static/store.js

@@ -0,0 +1,215 @@
+import { reactive } from "https://cdn.jsdelivr.net/npm/vue@3.4.38/dist/vue.esm-browser.prod.js";
+
+import { encodePath, getJson, live } from "./api.js";
+import { isNumber } from "./format.js";
+
+
+export const TABS = ["overview", "curves", "model", "data", "predictions", "plots", "config", "files", "log"];
+export const ACTIVE = ["running", "stale"];
+export const EVERY = [1, 2, 5, 10, 30];
+export const THEMES = ["auto", "light", "dark"];
+
+function readSetting(key, fallback) {
+  try {
+    const value = window.localStorage.getItem("kalfa." + key);
+    return value === null ? fallback : value;
+  } catch (error) {
+    return fallback;
+  }
+}
+
+function writeSetting(key, value) {
+  try {
+    window.localStorage.setItem("kalfa." + key, String(value));
+  } catch (error) {
+    return;
+  }
+}
+
+function startEvery() {
+  const value = Number(readSetting("every", "2"));
+  return EVERY.includes(value) ? value : 2;
+}
+
+function startTheme() {
+  const value = readSetting("theme", "auto");
+  return THEMES.includes(value) ? value : "auto";
+}
+
+export const store = reactive({
+  root: "",
+  records: [],
+  loaded: false,
+  error: "",
+  selected: [],
+  version: 0,
+  changed: [],
+  connected: false,
+  every: startEvery(),
+  theme: startTheme(),
+  paint: 0,
+  fault: "",
+});
+
+const listeners = new Set();
+let stopLive = null;
+let loading = 0;
+
+export function onLive(callback) {
+  listeners.add(callback);
+  return () => listeners.delete(callback);
+}
+
+function notify(changed) {
+  for (const callback of [...listeners]) {
+    try {
+      callback(changed);
+    } catch (error) {
+      console.error(error);
+    }
+  }
+}
+
+export async function refresh() {
+  const ticket = ++loading;
+  try {
+    const answer = await getJson("/api/records");
+    if (ticket !== loading) return;
+    store.root = answer && answer.root ? answer.root : "";
+    store.records = answer && Array.isArray(answer.records) ? answer.records : [];
+    store.error = "";
+  } catch (error) {
+    if (ticket === loading) store.error = error.message;
+  } finally {
+    store.loaded = true;
+  }
+}
+
+function changedHandler(changed) {
+  store.version += 1;
+  store.changed = Array.isArray(changed) ? changed : [];
+  refresh();
+  notify(changed);
+}
+
+export function startLive() {
+  if (stopLive) stopLive();
+  stopLive = live(changedHandler, (connected) => {
+    store.connected = connected;
+  }, store.every);
+}
+
+export function setEvery(value) {
+  const every = Number(value);
+  store.every = EVERY.includes(every) ? every : 2;
+  writeSetting("every", store.every);
+  startLive();
+}
+
+export function applyTheme() {
+  const root = document.documentElement;
+  if (store.theme === "auto") root.removeAttribute("data-theme");
+  else root.setAttribute("data-theme", store.theme);
+  store.paint += 1;
+}
+
+export function cycleTheme() {
+  const next = THEMES[(THEMES.indexOf(store.theme) + 1) % THEMES.length];
+  store.theme = next;
+  writeSetting("theme", next);
+  applyTheme();
+}
+
+export function watchScheme() {
+  if (!window.matchMedia) return;
+  const scheme = window.matchMedia("(prefers-color-scheme: dark)");
+  const repaint = () => {
+    if (store.theme === "auto") store.paint += 1;
+  };
+  if (scheme.addEventListener) scheme.addEventListener("change", repaint);
+}
+
+export function touches(changed, paths) {
+  if (!Array.isArray(changed)) return true;
+  if (!changed.length) return false;
+  if (paths.some((path) => path === "" || path === ".")) return true;
+  return changed.some((item) => paths.some((path) => item === path || item.startsWith(path + "/")
+    || path.startsWith(item + "/")));
+}
+
+export function setSelected(paths) {
+  store.selected = [...new Set((paths || []).filter(Boolean))];
+}
+
+export function toggleSelected(path) {
+  if (store.selected.includes(path)) setSelected(store.selected.filter((item) => item !== path));
+  else setSelected([...store.selected, path]);
+}
+
+export function recordLink(path, tab = "overview") {
+  return "#/record/" + encodePath(path) + "/" + (tab || "overview");
+}
+
+export function sweepLink(path) {
+  return "#/sweep/" + encodePath(path);
+}
+
+export function compareLink(paths, keys = "") {
+  const search = new URLSearchParams();
+  search.set("records", (paths || []).join(","));
+  if (keys) search.set("keys", keys);
+  return "#/compare?" + search.toString();
+}
+
+export function isSweepEntry(entry) {
+  return Boolean(entry) && entry.kind === "sweep";
+}
+
+export function statusOf(entry) {
+  if (!entry) return "unknown";
+  if (isSweepEntry(entry)) {
+    const sweep = entry.sweep || {};
+    if (sweep.running > 0) return "running";
+    if (sweep.stale > 0) return "stale";
+    const planned = sweep.points || sweep.count || 0;
+    if (sweep.count > 0 && sweep.done >= sweep.count && sweep.count >= planned) return "done";
+    return sweep.count > 0 ? "partial" : "empty";
+  }
+  return (entry.summary && entry.summary.status) || "unknown";
+}
+
+export function isActive(entry) {
+  return ACTIVE.includes(statusOf(entry));
+}
+
+export function nameOf(entry) {
+  if (!entry) return "";
+  if (entry.summary && entry.summary.name) return entry.summary.name;
+  return entry.path;
+}
+
+export function progressOf(entry) {
+  if (isSweepEntry(entry)) {
+    const sweep = entry.sweep || {};
+    return { value: sweep.done || 0, total: sweep.points || sweep.count || null, unit: "points" };
+  }
+  const summary = (entry && entry.summary) || {};
+  return {
+    value: summary.turn || 0,
+    total: summary.total || null,
+    unit: summary.unit || "turns",
+    part: isNumber(summary.fraction) ? summary.fraction : null,
+  };
+}
+
+export function linkOf(entry) {
+  return isSweepEntry(entry) ? sweepLink(entry.path) : recordLink(entry.path, "overview");
+}
+
+export function entryOf(path) {
+  return store.records.find((entry) => entry.path === path) || null;
+}
+
+export function latestSweep() {
+  return store.records.find(isSweepEntry) || null;
+}

kalfa/board/static/views/compare.js

@@ -0,0 +1,185 @@
+import { computed, onBeforeUnmount, onMounted, ref }
+  from "https://cdn.jsdelivr.net/npm/vue@3.4.38/dist/vue.esm-browser.prod.js";
+
+import { getJson, query } from "../api.js";
+import { Badge } from "../components/badge.js";
+import { Chart } from "../components/chart.js";
+import { ErrorBox } from "../components/error.js";
+import { Progress } from "../components/progress.js";
+import { bestText, seconds, text } from "../format.js";
+import { compareLink, onLive, recordLink, touches } from "../store.js";
+
+
+export function listOf(value) {
+  return String(value || "").split(",").map((item) => item.trim()).filter(Boolean);
+}
+
+export function tablesOf(series) {
+  return Object.keys(series || {}).filter((key) => key !== "turn").map((key) => ({ key, table: series[key] || {} }));
+}
+
+function hasValue(values) {
+  return Array.isArray(values) && values.some((value) => value !== null && value !== undefined);
+}
+
+export function seriesKeys(tables) {
+  const keys = [];
+  for (const entry of tables) {
+    for (const key of Object.keys(entry.table)) {
+      if (!keys.includes(key)) keys.push(key);
+    }
+  }
+  return keys;
+}
+
+export function diffLines(textValue) {
+  return String(textValue || "").split("\n").map((line) => {
+    let tone = "";
+    if (line.startsWith("+++") || line.startsWith("---")) tone = "head";
+    else if (line.startsWith("@@")) tone = "hunk";
+    else if (line.startsWith("+")) tone = "add";
+    else if (line.startsWith("-")) tone = "del";
+    return { line, tone };
+  });
+}
+
+export const Compare = {
+  name: "CompareView",
+  components: { KBadge: Badge, KChart: Chart, KError: ErrorBox, KProgress: Progress },
+  props: { query: { type: Object, default: () => ({}) } },
+  setup(props) {
+    const paths = listOf(props.query.records);
+    const keys = ref(props.query.keys || "");
+    const answer = ref(null);
+    const error = ref("");
+    const loading = ref(false);
+    let ticket = 0;
+    let off = null;
+
+    const load = async () => {
+      if (!paths.length) return;
+      const mine = ++ticket;
+      loading.value = true;
+      try {
+        const found = await getJson("/api/compare" + query({ records: paths, keys: listOf(keys.value) }));
+        if (mine !== ticket) return;
+        answer.value = found;
+        error.value = "";
+      } catch (failure) {
+        if (mine === ticket) error.value = failure.message;
+      } finally {
+        if (mine === ticket) loading.value = false;
+      }
+    };
+
+    const labels = computed(() => {
+      const found = answer.value || {};
+      const names = Array.isArray(found.names) ? found.names : [];
+      const records = Array.isArray(found.records) ? found.records : [];
+      return tablesOf(found.series).map((entry, index) => names[index] || (records[index] || {}).name || paths[index]
+        || entry.key);
+    });
+    const tables = computed(() => tablesOf((answer.value || {}).series));
+    const turns = computed(() => ((answer.value || {}).series || {}).turn || []);
+    const common = computed(() => seriesKeys(tables.value)
+      .filter((key) => tables.value.every((entry) => hasValue(entry.table[key]))));
+    const partial = computed(() => seriesKeys(tables.value).filter((key) => !common.value.includes(key)
+      && tables.value.some((entry) => hasValue(entry.table[key]))));
+    const charts = computed(() => common.value.map((key) => ({
+      key,
+      lines: tables.value.map((entry, index) => ({ name: labels.value[index], x: turns.value, y: entry.table[key] })),
+    })));
+    const records = computed(() => ((answer.value || {}).records || []).map((summary, index) => ({
+      summary, path: paths[index] || summary.path, label: labels.value[index] || summary.name,
+    })));
+    const differing = computed(() => Object.entries(((answer.value || {}).params || {}).differing || {}));
+    const shared = computed(() => Object.entries(((answer.value || {}).params || {}).shared || {}));
+    const diffs = computed(() => Object.entries((answer.value || {}).diffs || {})
+      .map(([title, body]) => ({ title, body, lines: body === null || body === undefined ? [] : diffLines(body) })));
+    const apply = () => {
+      window.location.hash = compareLink(paths, listOf(keys.value).join(","));
+    };
+
+    onMounted(() => {
+      load();
+      off = onLive((changed) => {
+        if (touches(changed, paths)) load();
+      });
+    });
+    onBeforeUnmount(() => {
+      ticket += 1;
+      if (off) off();
+    });
+    return {
+      paths, keys, answer, error, loading, charts, partial, records, differing, shared, diffs, apply, text, seconds,
+      bestText, recordLink,
+    };
+  },
+  template: `
+    <section class="page compare">
+      <div class="page-head">
+        <h2 class="section-title">compare</h2>
+        <span class="muted small">{{ paths.length }} records</span>
+      </div>
+      <div v-if="!paths.length" class="empty">pick two or more records on the <a class="link" href="#/runs">runs page</a>
+        and press compare</div>
+      <template v-else>
+        <form class="toolbar" @submit.prevent="apply">
+          <label class="small muted" for="compare-keys">series</label>
+          <input id="compare-keys" class="filter" v-model="keys" placeholder="val/rmse, train/mse (blank: every series of the first record)">
+          <button type="submit" class="button">apply</button>
+        </form>
+        <k-error :error="error"></k-error>
+        <div v-if="loading && !answer" class="loading">reading the records</div>
+        <template v-if="answer">
+          <div class="table-wrap">
+            <table class="data">
+              <thead><tr><th>record</th><th>status</th><th>progress</th><th>best</th><th>seconds</th></tr></thead>
+              <tbody>
+                <tr v-for="item in records" :key="item.path">
+                  <td><a class="link" :href="recordLink(item.path, 'overview')">{{ item.label }}</a></td>
+                  <td><k-badge :status="item.summary.status"></k-badge></td>
+                  <td><k-progress :value="item.summary.turn" :total="item.summary.total"></k-progress></td>
+                  <td class="num">{{ bestText(item.summary.best) }}</td>
+                  <td class="num">{{ seconds(item.summary.seconds) }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <h3 class="section-title">series</h3>
+          <div v-if="!charts.length" class="empty">the records share no series with values</div>
+          <div class="grid">
+            <k-chart v-for="chart in charts" :key="chart.key" :title="chart.key" :data="chart.lines"
+              :options="{ xlabel: 'turn' }"></k-chart>
+          </div>
+          <div v-if="partial.length" class="muted small">not in every record: {{ partial.join(", ") }}</div>
+          <h3 class="section-title">params that differ</h3>
+          <div v-if="!differing.length" class="empty">every param is the same</div>
+          <div v-else class="table-wrap">
+            <table class="data">
+              <thead><tr><th>param</th><th v-for="item in records" :key="item.path">{{ item.label }}</th></tr></thead>
+              <tbody>
+                <tr v-for="pair in differing" :key="pair[0]">
+                  <td class="mono">{{ pair[0] }}</td>
+                  <td v-for="(value, index) in pair[1]" :key="index" class="num">{{ text(value) }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <div v-if="shared.length" class="muted small shared">shared:
+            <span v-for="pair in shared" :key="pair[0]" class="chip">{{ pair[0] }} = {{ text(pair[1]) }}</span>
+          </div>
+          <h3 class="section-title">config diff</h3>
+          <div v-if="!diffs.length" class="empty">one record has nothing to diff against</div>
+          <div v-for="diff in diffs" :key="diff.title" class="card">
+            <div class="card-head"><span class="card-title">{{ diff.title }}</span></div>
+            <div v-if="diff.body === null || diff.body === undefined" class="empty">a resolved.yaml is missing</div>
+            <div v-else-if="!diff.body" class="empty">the resolved configs are the same</div>
+            <pre v-else class="diff"><span v-for="(item, index) in diff.lines" :key="index" :class="item.tone">{{ item.line }}</span></pre>
+          </div>
+        </template>
+      </template>
+    </section>`,
+};
+
+export default Compare;

kalfa/board/static/views/home.js

@@ -0,0 +1,90 @@
+import { computed } from "https://cdn.jsdelivr.net/npm/vue@3.4.38/dist/vue.esm-browser.prod.js";
+
+import { Badge } from "../components/badge.js";
+import { ErrorBox } from "../components/error.js";
+import { Progress } from "../components/progress.js";
+import { EMPTY, ago, bestText, liveNote, nonfiniteText, seconds, when } from "../format.js";
+import { isActive, isSweepEntry, linkOf, nameOf, progressOf, statusOf, store } from "../store.js";
+
+
+const RECENT = 20;
+
+export function metaOf(entry) {
+  if (isSweepEntry(entry)) {
+    const sweep = entry.sweep || {};
+    const strategy = sweep.strategy && sweep.strategy.use ? sweep.strategy.use : "sweep";
+    const parts = [strategy + " sweep", sweep.running ? sweep.running + " running" : "none running"];
+    if (sweep.stale) parts.push(sweep.stale + " stale");
+    if (sweep.failed) parts.push(sweep.failed + " failed");
+    return parts.join(", ");
+  }
+  const summary = entry.summary || {};
+  const parts = [];
+  if (liveNote(summary)) parts.push(liveNote(summary));
+  if (summary.best && summary.best.series) parts.push("best " + bestText(summary.best));
+  if (summary.updated) parts.push("updated " + ago(summary.updated));
+  if (summary.seconds) parts.push(seconds(summary.seconds));
+  return parts.join(", ") || EMPTY;
+}
+
+export const Home = {
+  name: "HomeView",
+  components: { KBadge: Badge, KError: ErrorBox, KProgress: Progress },
+  setup() {
+    const active = computed(() => store.records.filter(isActive));
+    const recent = computed(() => store.records.filter((entry) => !isActive(entry)).slice(0, RECENT));
+    const kindOf = (entry) => (isSweepEntry(entry) ? "sweep" : "record");
+    const startedOf = (entry) => when(isSweepEntry(entry) ? (entry.sweep || {}).started : (entry.summary || {}).started);
+    const failureOf = (entry) => (entry.summary && entry.summary.failure) || "";
+    const warningOf = (entry) => nonfiniteText(entry.summary && entry.summary.nonfinite);
+    return {
+      store, active, recent, kindOf, startedOf, failureOf, warningOf, linkOf, nameOf, progressOf, statusOf, metaOf,
+    };
+  },
+  template: `
+    <section class="page home">
+      <k-error :error="store.error"></k-error>
+      <div v-if="!store.loaded" class="loading">reading the records</div>
+      <template v-else>
+        <h2 class="section-title">running</h2>
+        <div v-if="!active.length" class="empty">nothing is running under {{ store.root || "the root" }}</div>
+        <div class="live-grid">
+          <a v-for="entry in active" :key="entry.path" class="card live-card" :href="linkOf(entry)">
+            <div class="live-head">
+              <span class="live-name">{{ nameOf(entry) }}</span>
+              <k-badge :status="statusOf(entry)"></k-badge>
+            </div>
+            <div class="muted small mono">{{ entry.path }}</div>
+            <k-progress :value="progressOf(entry).value" :total="progressOf(entry).total" :part="progressOf(entry).part"
+              :label="progressOf(entry).value + ' / ' + (progressOf(entry).total || '?') + ' ' + progressOf(entry).unit">
+            </k-progress>
+            <div class="muted small">{{ metaOf(entry) }}</div>
+            <div v-if="warningOf(entry)" class="fail-text small">{{ warningOf(entry) }}</div>
+          </a>
+        </div>
+        <h2 class="section-title">recent</h2>
+        <div v-if="!recent.length" class="empty">no other records under {{ store.root || "the root" }}</div>
+        <div v-else class="table-wrap">
+          <table class="data">
+            <thead>
+              <tr><th>name</th><th>kind</th><th>status</th><th>progress</th><th>started</th><th>details</th></tr>
+            </thead>
+            <tbody>
+              <tr v-for="entry in recent" :key="entry.path">
+                <td><a class="link" :href="linkOf(entry)">{{ nameOf(entry) }}</a>
+                  <div class="muted small mono" v-if="entry.path !== nameOf(entry)">{{ entry.path }}</div></td>
+                <td class="muted">{{ kindOf(entry) }}</td>
+                <td><k-badge :status="statusOf(entry)"></k-badge></td>
+                <td><k-progress :value="progressOf(entry).value" :total="progressOf(entry).total"></k-progress></td>
+                <td class="muted">{{ startedOf(entry) }}</td>
+                <td class="small">{{ metaOf(entry) }} <span v-if="failureOf(entry)" class="fail-text">{{ failureOf(entry) }}</span>
+                  <span v-if="warningOf(entry)" class="fail-text">{{ warningOf(entry) }}</span></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </template>
+    </section>`,
+};
+
+export default Home;

kalfa/board/static/views/record/config.js

@@ -0,0 +1,81 @@
+const CODE = "overflow: auto; max-height: 75vh; padding: 10px; background: var(--surface-2); border-radius: 6px; white-space: pre";
+
+export default {
+  name: "ConfigTab",
+  props: {
+    record: { type: Object, default: null },
+    path: { type: String, default: "" },
+    api: { default: null },
+    version: { type: Number, default: 0 },
+  },
+  data() {
+    return { notice: "", timer: null };
+  },
+  computed: {
+    code() { return CODE; },
+    text() { return this.record && typeof this.record.config === "string" ? this.record.config : ""; },
+    lines() { return this.text ? this.text.split("\n").length : 0; },
+    raw() { return this.api ? this.api.fileUrl(this.path, "resolved.yaml") : ""; },
+    mutable() {
+      const plan = (this.record && this.record.plan) || {};
+      return Array.isArray(plan.mutable) ? plan.mutable : [];
+    },
+  },
+  beforeUnmount() {
+    if (this.timer) clearTimeout(this.timer);
+  },
+  methods: {
+    flash(message) {
+      this.notice = message;
+      if (this.timer) clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        this.notice = "";
+        this.timer = null;
+      }, 1800);
+    },
+    selectText() {
+      const box = this.$refs.yaml;
+      const selection = window.getSelection ? window.getSelection() : null;
+      if (!box || !selection) return false;
+      const range = document.createRange();
+      range.selectNodeContents(box);
+      selection.removeAllRanges();
+      selection.addRange(range);
+      try {
+        return Boolean(document.execCommand && document.execCommand("copy"));
+      } catch (error) {
+        return false;
+      }
+    },
+    async copy() {
+      try {
+        await navigator.clipboard.writeText(this.text);
+        this.flash("copied");
+      } catch (error) {
+        this.flash(this.selectText() ? "copied" : "selected; copy it with the keyboard");
+      }
+    },
+  },
+  template: `
+  <div class="page pane-config">
+    <div class="muted small">The config as the run resolved it (resolved.yaml), after the sets and params of the command line;
+      continuing the record reads this file.</div>
+    <div class="empty" v-if="!text">this record has no resolved.yaml</div>
+    <section class="card" v-else>
+      <div class="card-head">
+        <span class="card-title mono">resolved.yaml</span>
+        <span class="card-tools">
+          <span class="muted small">{{ lines }} lines</span>
+          <span class="muted small" v-if="notice">{{ notice }}</span>
+          <button type="button" class="tool" @click="copy">copy</button>
+          <a class="tool" :href="raw" download="resolved.yaml">save</a>
+        </span>
+      </div>
+      <pre class="mono" ref="yaml" :style="code">{{ text }}</pre>
+    </section>
+    <section class="card" v-if="mutable.length">
+      <div class="card-head"><span class="card-title">mutable paths</span><span class="muted small">what a rule may patch while the run trains</span></div>
+      <div><span class="chip mono" v-for="item in mutable" :key="item">{{ item }}</span></div>
+    </section>
+  </div>`,
+};