@crvouga/atlas 0.0.0-stage → 0.2.0

package/packages/visualizer/src/components/DataIssues.tsx

@@ -0,0 +1,70 @@
+import type { DataIssue } from '@crvouga/atlas/schema';
+import * as Dialog from '@radix-ui/react-dialog';
+import { useMemo } from 'react';
+
+import { useUiStore } from '../state/ui-store';
+import styles from './DataIssues.module.css';
+import { CloseIcon, NoteIcon, WarnIcon } from './icons';
+
+const SEVERITY_LABEL = { error: 'Problem', warning: 'Warning', info: 'Note' } as const;
+
+/**
+ * A quiet count of what went wrong while reading the data. It never interrupts; the list opens
+ * only when asked for.
+ */
+export function DataIssues({ issues }: { issues: DataIssue[] }) {
+  const open = useUiStore((s) => s.issuesOpen);
+  const setOpen = useUiStore((s) => s.setIssuesOpen);
+  const problems = issues.filter((i) => i.severity !== 'info').length;
+  const byFile = useMemo(() => {
+    const groups = new Map<string, DataIssue[]>();
+    for (const issue of issues) groups.set(issue.file, [...(groups.get(issue.file) ?? []), issue]);
+    return [...groups.entries()].sort(([, a], [, b]) => severityRank(b) - severityRank(a));
+  }, [issues]);
+  if (issues.length === 0) return null;
+  const label = problems ? `${problems} data ${problems === 1 ? 'problem' : 'problems'}` : `${issues.length} data ${issues.length === 1 ? 'note' : 'notes'}`;
+  return (
+    <Dialog.Root open={open} onOpenChange={setOpen}>
+      <Dialog.Trigger className={styles.trigger} data-has-problems={problems > 0}>
+        {problems ? <WarnIcon size={13} /> : <NoteIcon size={13} />}
+        {label}
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <Dialog.Overlay className={styles.overlay} />
+        <Dialog.Content className={styles.sheet}>
+          <div className={styles.head}>
+            <Dialog.Title className={styles.title}>What we couldn’t read</Dialog.Title>
+            <Dialog.Close className={styles.close} aria-label="Close">
+              <CloseIcon size={16} />
+            </Dialog.Close>
+          </div>
+          <Dialog.Description className={styles.lead}>
+            Everything else on the map is shown as usual. These are the parts of the spec and the runs that were skipped or guessed, file by file.
+          </Dialog.Description>
+          <div className={styles.list}>
+            {byFile.map(([file, list]) => (
+              <section key={file} className={styles.file}>
+                <h3 className={styles.fileName}>{file || 'General'}</h3>
+                <ul className={styles.items}>
+                  {list.map((issue, i) => (
+                    <li key={i} className={styles.item} data-severity={issue.severity}>
+                      <span className={styles.severity}>{SEVERITY_LABEL[issue.severity]}</span>
+                      <span>
+                        {issue.path && <span className={styles.path}>{issue.path}: </span>}
+                        {issue.message}
+                      </span>
+                    </li>
+                  ))}
+                </ul>
+              </section>
+            ))}
+          </div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+function severityRank(list: DataIssue[]) {
+  return Math.max(...list.map((i) => (i.severity === 'error' ? 2 : i.severity === 'warning' ? 1 : 0)));
+}

package/packages/visualizer/src/components/Header.module.css

@@ -0,0 +1,189 @@
+.header {
+  display: flex;
+  align-items: stretch;
+  gap: 20px;
+  min-height: var(--header-h);
+  padding: 0 16px;
+  background: var(--bg);
+  border-bottom: 1px solid var(--line);
+}
+
+.home {
+  display: inline-flex;
+  align-items: center;
+  color: var(--ink);
+  font-size: 1.0625rem;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.tabs {
+  display: flex;
+  align-items: stretch;
+  gap: 2px;
+  min-width: 0;
+}
+
+.tabs a {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 10px;
+  color: var(--ink-3);
+  font-size: 0.9375rem;
+  font-weight: 500;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.tabs a:hover {
+  color: var(--ink);
+}
+
+.tabs a[aria-current='page'] {
+  color: var(--ink);
+  font-weight: 600;
+  box-shadow: inset 0 -2px 0 var(--place);
+}
+
+.failing {
+  min-width: 1.125rem;
+  padding: 0 0.3rem;
+  border-radius: var(--pill);
+  background: var(--failed-soft);
+  color: var(--failed-ink);
+  font-size: 0.6875rem;
+  font-weight: 700;
+  line-height: 1.125rem;
+  text-align: center;
+}
+
+.tools {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-left: auto;
+  min-width: 0;
+  padding: 8px 0;
+}
+
+.live {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--place);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.liveDot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--place);
+  animation: pulse 1.4s var(--ease) infinite;
+}
+
+@keyframes pulse {
+  50% {
+    opacity: 0.35;
+  }
+}
+
+.sources,
+.select {
+  height: 2.125rem;
+  padding: 0 12px;
+  border: 1px solid var(--line-2);
+  border-radius: var(--pill);
+  background: var(--bg);
+  color: var(--ink);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.sources:hover,
+.select:hover {
+  background: var(--bg-2);
+}
+
+.sources span {
+  margin-left: 6px;
+  color: var(--ink-3);
+  font-weight: 400;
+}
+
+.sources[data-filtered] {
+  border-color: var(--place);
+  color: var(--place);
+}
+
+.sources[data-filtered] span {
+  color: var(--place);
+}
+
+.picker {
+  display: inline-flex;
+}
+
+.select {
+  max-width: 15rem;
+  font-weight: 500;
+}
+
+.search {
+  width: min(15rem, 28vw);
+  height: 2.125rem;
+  padding: 0 14px;
+  border: 1px solid transparent;
+  border-radius: var(--pill);
+  background: var(--bg-2);
+  font-size: 0.875rem;
+}
+
+.search::placeholder {
+  color: var(--ink-3);
+}
+
+.search:focus {
+  border-color: var(--place);
+  background: var(--bg);
+  outline: none;
+}
+
+@media (max-width: 760px) {
+  .header {
+    flex-wrap: wrap;
+    gap: 0 16px;
+  }
+
+  .home {
+    min-height: 2.75rem;
+  }
+
+  .tabs {
+    order: 3;
+    flex-basis: 100%;
+    min-height: 2.5rem;
+    overflow-x: auto;
+  }
+
+  .tools {
+    flex: 1;
+    justify-content: flex-end;
+  }
+
+  .live,
+  .picker {
+    display: none;
+  }
+
+  .search {
+    width: min(11rem, 40vw);
+  }
+}

package/packages/visualizer/src/components/Header.tsx

@@ -0,0 +1,127 @@
+import { Link, useLocation, useNavigate, useSearch } from '@tanstack/react-router';
+import { useEffect, useMemo } from 'react';
+
+import { useAtlas } from '../app/atlas-context';
+import { useSearchQuery } from '../app/search-query';
+import type { AtlasView } from '../data/model';
+import { LATEST } from '../data/queries';
+import { useEvidence } from '../evidence/evidence-context';
+import { plural } from '../evidence/format';
+import { excludedCount } from '../evidence/sources-panel';
+import { kindOfAddress, outlinePath, SPEC_KINDS } from '../spec-kind';
+import { useUiStore } from '../state/ui-store';
+import { DataIssues } from './DataIssues';
+import styles from './Header.module.css';
+
+const dateTime = new Intl.DateTimeFormat(undefined, { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' });
+
+export function formatRunTime(iso: string) {
+  const d = new Date(iso);
+  return Number.isNaN(d.getTime()) ? 'Unknown time' : dateTime.format(d);
+}
+
+/** The product's own name, without the subtitle a spec title may carry: "Gamezilla — the whole product" is Gamezilla. */
+export function productName(title: string | undefined) {
+  const name = title?.split(/\s+[—–|-]\s+|:\s+/)[0]?.trim();
+  return name || 'Atlas';
+}
+
+function RunPicker({ view }: { view: AtlasView }) {
+  const search = useSearch({ strict: false });
+  const navigate = useNavigate();
+  const { latestRunId } = useAtlas();
+  if (view.runs.length === 0) return null;
+  const latest = view.runs.find((run) => run.id === latestRunId);
+  return (
+    <label className={styles.picker}>
+      <span className="sr-only">Run</span>
+      <select
+        className={styles.select}
+        value={search.run ?? LATEST}
+        onChange={(event) => void navigate({ to: '.', search: (prev) => ({ ...prev, run: event.target.value === LATEST ? undefined : event.target.value }) })}
+      >
+        <option value={LATEST}>Latest{latest ? ` · ${formatRunTime(latest.startedAt)}` : ''}</option>
+        {view.runs.map((run) => (
+          <option key={run.id} value={run.id} disabled={run.progress === 'running'}>
+            {formatRunTime(run.startedAt)} · {run.progress === 'running' ? 'still running' : run.mode === 'showcase' ? 'with videos' : 'quick check'}
+          </option>
+        ))}
+      </select>
+    </label>
+  );
+}
+
+function runOnly(prev: { run?: unknown }) {
+  return typeof prev.run === 'string' ? { run: prev.run } : {};
+}
+
+/** Spec runs writing results right now. Their results are already in the lists below. */
+function LiveRuns() {
+  const { active } = useEvidence();
+  if (!active.length) return null;
+  const results = active.reduce((sum, run) => sum + run.completed, 0);
+  return (
+    <span className={styles.live} role="status" title={active.map((run) => run.packageDir).join(', ')}>
+      <span className={styles.liveDot} aria-hidden="true" />
+      Running {active.length === 1 ? active[0]!.packageDir.split('/').at(-1) : plural(active.length, 'suite', 'suites')} · {plural(results, 'result', 'results')}
+    </span>
+  );
+}
+
+function SourcesButton() {
+  const { layers, ready, unavailable, excluded } = useEvidence();
+  const setOpen = useUiStore((s) => s.setSourcesOpen);
+  if (!ready && !unavailable) return null;
+  const off = excludedCount(excluded);
+  return (
+    <button type="button" className={styles.sources} data-filtered={off > 0 || undefined} onClick={() => setOpen(true)}>
+      Sources
+      <span>{unavailable ? 'unavailable' : off > 0 ? `${off} off` : plural(layers.length, 'run', 'runs')}</span>
+    </button>
+  );
+}
+
+export function Header() {
+  const { view } = useAtlas();
+  const evidence = useEvidence();
+  const { pathname } = useLocation();
+  const { query, setQuery } = useSearchQuery();
+  const kind = kindOfAddress(pathname);
+  const product = productName(view?.title);
+  useEffect(() => {
+    document.title = product;
+  }, [product]);
+  const tabs = useMemo(
+    () =>
+      SPEC_KINDS.map((entry) => {
+        const files = evidence.files.filter(entry.accepts);
+        return { kind: entry, files: files.length, failing: files.filter((file) => (evidence.view.specs.get(outlinePath(file))?.summary.counts.failed ?? 0) > 0).length };
+      }).filter((tab) => tab.files > 0 || tab.kind === kind),
+    [evidence.files, evidence.view, kind]
+  );
+  return (
+    <header className={styles.header}>
+      <Link to="/" search={(prev) => runOnly(prev)} className={styles.home}>
+        {product}
+      </Link>
+      <nav className={styles.tabs} aria-label="Spec type">
+        <Link to="/" search={(prev) => runOnly(prev)} aria-current={pathname.startsWith('/specs/') ? undefined : 'page'}>
+          Statecharts
+        </Link>
+        {tabs.map((tab) => (
+          <Link key={tab.kind.id} to="/specs/$kind" params={{ kind: tab.kind.id }} search={{}} aria-current={tab.kind === kind ? 'page' : undefined}>
+            {tab.kind.label}
+            {tab.failing > 0 && <span className={styles.failing} aria-label={`${plural(tab.failing, tab.kind.one, tab.kind.many)} failing`}>{tab.failing}</span>}
+          </Link>
+        ))}
+      </nav>
+      <div className={styles.tools}>
+        <LiveRuns />
+        {!kind && view && <RunPicker view={view} />}
+        {!kind && view && <DataIssues issues={view.issues} />}
+        <SourcesButton />
+        <input className={styles.search} type="search" value={query} aria-label="Find" placeholder={kind ? `Find a ${kind.one}` : 'Find a place'} onChange={(event) => setQuery(event.target.value)} />
+      </div>
+    </header>
+  );
+}

package/packages/visualizer/src/components/Legend.module.css

@@ -0,0 +1,84 @@
+.legend {
+  display: flex;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+  align-items: center;
+  background: rgba(255, 255, 255, 0.94);
+  padding: 0.5rem 0.8rem;
+  border-radius: var(--radius);
+  border: 1px solid var(--line);
+  font-size: 0.78rem;
+  color: var(--ink-2);
+  box-shadow: var(--shadow-card);
+}
+
+.item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  white-space: nowrap;
+}
+
+.sep {
+  width: 1px;
+  height: 1rem;
+  background: var(--line);
+}
+
+.chip {
+  display: inline-grid;
+  place-items: center;
+  width: 1.6rem;
+  height: 1.1rem;
+  border-radius: var(--pill);
+  border: 1.5px solid;
+}
+
+.chip[data-kind='user'] {
+  background: var(--user-soft);
+  color: var(--user);
+  border-color: var(--user-line);
+}
+
+.chip[data-kind='system'] {
+  background: var(--system-soft);
+  color: var(--system);
+  border-color: var(--system-line);
+}
+
+.chip[data-kind='time'] {
+  background: var(--time-soft);
+  color: var(--time);
+  border-color: var(--time-line);
+}
+
+.chip[data-kind='none'] {
+  background: var(--bg);
+  border-color: var(--line-2);
+  border-style: dashed;
+}
+
+.frame {
+  width: 0.8rem;
+  height: 1.1rem;
+  border-radius: 0.2rem;
+  border: 2px solid var(--line);
+  background: var(--card);
+}
+
+.frame[data-status='passed'] {
+  border-color: var(--passed-line);
+}
+
+.frame[data-status='flaky'] {
+  border-color: var(--flaky);
+}
+
+.frame[data-status='failed'] {
+  border-color: var(--failed);
+}
+
+.frame[data-status='none'] {
+  border-style: dashed;
+  border-color: var(--faint);
+}

package/packages/visualizer/src/components/Legend.tsx

@@ -0,0 +1,50 @@
+import { KindIcon } from './labels';
+import styles from './Legend.module.css';
+
+export function Legend({ showTime }: { showTime: boolean }) {
+  return (
+    <div className={styles.legend} role="group" aria-label="Legend">
+      <span className={styles.item}>
+        <span className={styles.chip} data-kind="user">
+          <KindIcon kind="user" size={11} />
+        </span>
+        User action
+      </span>
+      <span className={styles.item}>
+        <span className={styles.chip} data-kind="system">
+          <KindIcon kind="system" size={11} />
+        </span>
+        System event
+      </span>
+      {showTime && (
+        <span className={styles.item}>
+          <span className={styles.chip} data-kind="time">
+            <KindIcon kind="time" size={11} />
+          </span>
+          Time passes
+        </span>
+      )}
+      <span className={styles.item}>
+        <span className={styles.chip} data-kind="none" />
+        Not reached or not run
+      </span>
+      <span className={styles.sep} aria-hidden="true" />
+      <span className={styles.item}>
+        <span className={styles.frame} data-status="passed" />
+        Working
+      </span>
+      <span className={styles.item}>
+        <span className={styles.frame} data-status="flaky" />
+        Unreliable
+      </span>
+      <span className={styles.item}>
+        <span className={styles.frame} data-status="failed" />
+        Broken
+      </span>
+      <span className={styles.item}>
+        <span className={styles.frame} data-status="none" />
+        Not checked
+      </span>
+    </div>
+  );
+}