@crvouga/atlas 0.10.2 → 0.12.0

package/packages/visualizer/src/views/SidePanel.tsx

@@ -1,94 +1,112 @@
-import * as Collapsible from '@radix-ui/react-collapsible';
+import { IconCheck, IconX, IconCircle } from '@tabler/icons-react';
+import { Accordion, Alert, Anchor, Box, Container, Flex, List, Stack, Text, Title } from '@mantine/core';
+
 import { Link } from '@tanstack/react-router';
 import type { ReactNode } from 'react';
-
-import { statusNote, type AtlasView, type StateView, type TransitionView } from '../data/model';
-import { ChevronIcon } from '../components/icons';
+import { IconChevronRight as ChevronIcon } from '@tabler/icons-react';
 import { KIND_LABEL } from '../components/labels';
 import { ScreenImage } from '../components/Screen';
 import { StatusBadge, StatusDot } from '../components/Status';
+import { statusNote, type AtlasView, type StateView, type TransitionView } from '../data/model';
+import { mapScope } from '../layout/graph';
 import { eventLooks, journeyLooks, stateLooks } from '../looks/collect';
 import { Stage } from '../looks/Stage';
-import { mapScope } from '../layout/graph';
 import type { MapSelection } from '../map/ChartMap';
-import styles from './views.module.css';
 import { ChartTests } from './ChartTests';
-
+import { ChartSource } from '../evidence/chart-source';
 function Section({ title, children }: { title: string; children: ReactNode }) {
   return (
-    <section className={styles.section}>
-      <h3 className={styles.sectionTitle}>{title}</h3>
+    <Box component="section" mb="lg">
+      <Title order={2} mb="sm">
+        {title}
+      </Title>
       {children}
-    </section>
+    </Box>
   );
 }
-
 function EventLink({ t, view, direction }: { t: TransitionView; view: AtlasView; direction: 'in' | 'out' }) {
   const other = direction === 'in' ? t.source : t.target;
   const otherState = other ? view.states.get(other) : undefined;
   return (
-    <Link
-      to="/chart/$chartId"
-      params={{ chartId: view.states.get(direction === 'in' ? t.target ?? t.source : t.source)?.chartId ?? t.chartId }}
-      search={(prev) => ({ run: prev.run, event: t.id, journey: prev.journey })}
-      className={styles.eventRow}
+    <Anchor
       data-status={t.status}
+      underline="never"
+      renderRoot={(props) => (
+        <Link
+          {...props}
+          to="/chart/$chartId"
+          params={{ chartId: view.states.get(direction === 'in' ? (t.target ?? t.source) : t.source)?.chartId ?? t.chartId }}
+          search={(prev) => ({ run: prev.run, event: t.id, journey: prev.journey })}
+        />
+      )}
     >
-      <span>{t.event}</span>
+      <Text span inherit>
+        {t.event}
+      </Text>
       {otherState && (
-        <span className={styles.eventTarget}>
+        <Text span inherit>
           {direction === 'in' ? 'from' : 'to'} {otherState.name}
-        </span>
+        </Text>
       )}
-    </Link>
+    </Anchor>
   );
 }
-
 function Developer({ rows }: { rows: [string, ReactNode][] }) {
   return (
-    <Collapsible.Root className={styles.dev}>
-      <Collapsible.Trigger className={styles.devTrigger}>
-        <ChevronIcon size={12} className={styles.devChevron} />
-        For developers
-      </Collapsible.Trigger>
-      <Collapsible.Content>
-        <dl className={styles.devList}>
-          {rows
-            .filter(([, v]) => v !== null && v !== undefined && v !== '')
-            .map(([k, v]) => (
-              <div key={k}>
-                <dt>{k}</dt>
-                <dd>{v}</dd>
-              </div>
-            ))}
-        </dl>
-      </Collapsible.Content>
-    </Collapsible.Root>
+    <Accordion variant="separated" my="lg">
+      <Accordion.Item value="developer">
+        <Accordion.Control>
+          <ChevronIcon aria-hidden="true" size={12} />
+          For developers
+        </Accordion.Control>
+        <Accordion.Panel>
+          <Box component="dl">
+            {rows
+              .filter(([, v]) => v !== null && v !== undefined && v !== '')
+              .map(([k, v]) => (
+                <Stack key={k} gap="sm">
+                  <Box component="dt">{k}</Box>
+                  <Box component="dd" m={0}>
+                    {v}
+                  </Box>
+                </Stack>
+              ))}
+          </Box>
+        </Accordion.Panel>
+      </Accordion.Item>
+    </Accordion>
   );
 }
-
 function Questions({ view, ids }: { view: AtlasView; ids: string[] }) {
   if (ids.length === 0) return null;
   return (
     <Section title="Open questions">
-      <ul className={styles.notes}>
+      <List spacing="xs" listStyleType="none">
         {ids.map((id) => {
           const q = view.questions.get(id);
           if (!q) return null;
           return (
-            <li key={id} className={styles.note}>
-              <strong>{q.title}</strong> {q.body}
-              {q.specToday && <span className={styles.noteMeta}>Spec today: {q.specToday}</span>}
-            </li>
+            <Alert key={id} color={'blue'} my="sm">
+              <Text span inherit fw={600}>
+                {q.title}
+              </Text>{' '}
+              {q.body}
+              {q.specToday && (
+                <Text span inherit c="dimmed">
+                  Spec today: {q.specToday}
+                </Text>
+              )}
+            </Alert>
           );
         })}
-      </ul>
+      </List>
     </Section>
   );
 }
-
 function ScreenDetails({ view, state }: { view: AtlasView; state: StateView }) {
-  const checks = state.result?.checks.length ? state.result.checks : state.specChecks.map((check) => ({ check, passed: null as boolean | null, expected: undefined, actual: undefined }));
+  const checks = state.result?.checks.length
+    ? state.result.checks
+    : state.specChecks.map((check) => ({ check, passed: null as boolean | null, expected: undefined, actual: undefined }));
   const note = statusNote(state.status);
   const events = state.result?.businessEvents;
   const screen = state.kind === 'screen' || state.kind === 'final';
@@ -96,111 +114,152 @@ function ScreenDetails({ view, state }: { view: AtlasView; state: StateView }) {
   const outgoing = state.outgoing.map((id) => view.transitions.get(id)).filter((t): t is TransitionView => Boolean(t));
   return (
     <>
-      <div className={styles.plateHead}>
-        <h2 className={styles.plateTitle}>{state.name}</h2>
+      <Flex gap="xs" align="center" wrap="wrap">
+        <Title order={1} mb="sm">
+          {state.name}
+        </Title>
         <StatusBadge status={state.status} />
-        {state.confidence === 'assumed' && <span className={styles.assumedBadge}>Assumed, not confirmed</span>}
-      </div>
-      {state.description && <p className={styles.lead}>{state.description}</p>}
-      {note && <p className={styles.statusNote}>{note}</p>}
+        {state.confidence === 'assumed' && (
+          <Text span inherit>
+            Assumed, not confirmed
+          </Text>
+        )}
+      </Flex>
+      {state.description && (
+        <Text component="div" c="dimmed">
+          {state.description}
+        </Text>
+      )}
+      {note && (
+        <Text component="div" c="dimmed">
+          {note}
+        </Text>
+      )}
       <Stage
         looks={stateLooks(state)}
         prefer="pictures"
         empty={
           screen ? (
-            <div className={styles.bigShot}>
+            <Stack>
               <ScreenImage key={state.name} state={state} size="full" description={false} lines={state.hints.length > 0} />
-            </div>
+            </Stack>
           ) : (
-            <p className={styles.lead}>This part of the chart has no screen of its own.</p>
+            <Text c="dimmed">This part of the chart has no screen of its own.</Text>
           )
         }
       />
-      <div>
-        <h3 className={styles.sectionTitle}>Where they go next</h3>
+      <Stack gap="sm">
+        <Title order={2} mb="sm">
+          Where they go next
+        </Title>
         {outgoing.length > 0 ? (
-          <div className={styles.eventList}>
+          <Stack gap="sm" miw={0}>
             {outgoing.map((transition) => (
               <EventLink key={transition.id} t={transition} view={view} direction="out" />
             ))}
-          </div>
+          </Stack>
         ) : (
-          <p className={styles.lead}>{state.deadEnd ? `This is where the journey stops: ${state.deadEnd}` : 'Nothing leaves this screen.'}</p>
+          <Text component="div" c="dimmed">
+            {state.deadEnd ? `This is where the journey stops: ${state.deadEnd}` : 'Nothing leaves this screen.'}
+          </Text>
         )}
-      </div>
+      </Stack>
       {checks.length > 0 && (
         <Section title="What should be on the screen">
-          <ul className={styles.checks}>
+          <List spacing="xs" listStyleType="none">
             {checks.map((c) => (
-              <li key={c.check} data-passed={c.passed === null ? 'unknown' : c.passed}>
-                <span className={styles.checkMark} aria-hidden="true">
-                  {c.passed === null ? '○' : c.passed ? '✓' : '✗'}
-                </span>
-                <span>
+              <List.Item key={c.check} data-passed={c.passed === null ? 'unknown' : c.passed}>
+                <Text aria-hidden="true" span inherit>
+                  {c.passed === null ? <IconCircle size={16} /> : c.passed ? <IconCheck size={16} /> : <IconX size={16} />}
+                </Text>
+                <Text span inherit>
                   {c.check}
                   {c.passed === false && (c.expected || c.actual) && (
-                    <span className={styles.expected}>
+                    <Text span inherit c="dimmed">
                       Expected {c.expected ?? 'something else'}, saw {c.actual ?? 'nothing'}
-                    </span>
+                    </Text>
                   )}
-                </span>
-              </li>
+                </Text>
+              </List.Item>
             ))}
-          </ul>
+          </List>
         </Section>
       )}
       {(state.specBusinessEvents.length > 0 || events) && (
         <Section title="What happens behind the scenes">
-          <ul className={styles.checks}>
+          <List spacing="xs" listStyleType="none">
             {(events?.expected ?? state.specBusinessEvents).map((e) => {
               const missing = events?.missing.includes(e);
               const noSignal = events?.noSignal.includes(e);
               const seen = events?.observed.includes(e);
               return (
-                <li key={e} data-passed={missing ? false : seen ? true : 'unknown'}>
-                  <span className={styles.checkMark} aria-hidden="true">
-                    {missing ? '✗' : seen ? '✓' : '○'}
-                  </span>
-                  <span>
+                <List.Item key={e} data-passed={missing ? false : seen ? true : 'unknown'}>
+                  <Text aria-hidden="true" span inherit>
+                    {missing ? <IconX size={16} /> : seen ? <IconCheck size={16} /> : <IconCircle size={16} />}
+                  </Text>
+                  <Text span inherit>
                     {e}
-                    {missing && <span className={styles.expected}>Didn’t happen in this run</span>}
-                    {noSignal && <span className={styles.expected}>Can’t be checked yet</span>}
-                  </span>
-                </li>
+                    {missing && (
+                      <Text span inherit c="dimmed">
+                        Didn’t happen in this run
+                      </Text>
+                    )}
+                    {noSignal && (
+                      <Text span inherit c="dimmed">
+                        Can’t be checked yet
+                      </Text>
+                    )}
+                  </Text>
+                </List.Item>
               );
             })}
-          </ul>
+          </List>
         </Section>
       )}
       {state.knownIssues.length > 0 && (
         <Section title="Known issues">
-          <ul className={styles.notes}>
+          <List spacing="xs" listStyleType="none">
             {state.knownIssues.map((n) => (
-              <li key={n.body} className={styles.note}>
+              <Alert key={n.body} color={'blue'} my="sm">
                 {n.body}
-              </li>
+              </Alert>
             ))}
-          </ul>
+          </List>
         </Section>
       )}
       <Questions view={view} ids={state.questionIds} />
       {incoming.length > 0 && (
         <Section title="How users get here">
-          <div className={styles.eventList}>
+          <Stack gap="sm" miw={0}>
             {incoming.map((t) => (
               <EventLink key={t.id} t={t} view={view} direction="in" />
             ))}
-          </div>
+          </Stack>
         </Section>
       )}
 
-      {state.deadEnd && outgoing.length > 0 && <p className={styles.note}>This is where the journey stops: {state.deadEnd}</p>}
+      {state.deadEnd && outgoing.length > 0 && (
+        <Alert color={'blue'} my="sm">
+          This is where the journey stops: {state.deadEnd}
+        </Alert>
+      )}
       <Developer
         rows={[
           ['State ID', <code key="id">{state.name}</code>],
           ['Spec file', <code key="f">{state.file}</code>],
           ['Snapshot name', state.snapshot ? <code key="s">{state.snapshot}</code> : null],
-          ['Sources', state.sources.length ? <ul key="src">{state.sources.map((s) => <li key={s}><code>{s}</code></li>)}</ul> : null],
+          [
+            'Sources',
+            state.sources.length ? (
+              <ul key="src">
+                {state.sources.map((s) => (
+                  <li key={s}>
+                    <code>{s}</code>
+                  </li>
+                ))}
+              </ul>
+            ) : null
+          ],
           ['Owner', state.owner],
           ['Tier', state.tier],
           [
@@ -220,27 +279,42 @@ function ScreenDetails({ view, state }: { view: AtlasView; state: StateView }) {
     </>
   );
 }
-
 function EventDetails({ view, t }: { view: AtlasView; t: TransitionView }) {
   const from = view.states.get(t.source);
   const to = t.target ? view.states.get(t.target) : undefined;
   const note = statusNote(t.status, t.result?.reason);
   return (
     <>
-      <div className={styles.plateHead}>
-        <h2 className={styles.plateTitle}>{t.event}</h2>
+      <Flex gap="xs" align="center" wrap="wrap">
+        <Title order={1} mb="sm">
+          {t.event}
+        </Title>
         <StatusBadge status={t.status} />
-      </div>
-      <p className={styles.lead}>{KIND_LABEL[t.kind]}</p>
-      <p className={styles.lead}>
-        From <strong>{from?.name ?? t.source}</strong> to <strong>{to?.name ?? 'a screen not in the spec'}</strong>.
-      </p>
-      {note && <p className={styles.statusNote}>{note}</p>}
+      </Flex>
+      <Text component="div" c="dimmed">
+        {KIND_LABEL[t.kind]}
+      </Text>
+      <Text component="div" c="dimmed">
+        From{' '}
+        <Text span inherit fw={600}>
+          {from?.name ?? t.source}
+        </Text>{' '}
+        to{' '}
+        <Text span inherit fw={600}>
+          {to?.name ?? 'a screen not in the spec'}
+        </Text>
+        .
+      </Text>
+      {note && (
+        <Text component="div" c="dimmed">
+          {note}
+        </Text>
+      )}
       <Stage
         looks={eventLooks(view, t)}
         prefer="film"
         notice={t.result?.clip.state === 'processing' ? 'The video of this event is still processing.' : null}
-        empty={<p className={styles.lead}>This event has no picture, video, or timeline in this run.</p>}
+        empty={<Text c="dimmed">This event has no picture, video, or timeline in this run.</Text>}
       />
       <Questions view={view} ids={t.questionIds} />
       <Developer
@@ -253,45 +327,72 @@ function EventDetails({ view, t }: { view: AtlasView; t: TransitionView }) {
     </>
   );
 }
-
 function JourneyLooks({ view, journeyId }: { view: AtlasView; journeyId: string }) {
   const looks = journeyLooks(view, journeyId);
   if (looks.pictures.length === 0 && looks.films.length === 0 && !looks.moments.some((moment) => moment.thumb)) return null;
   return <Stage looks={looks} prefer="timeline" />;
 }
-
 function JourneyDetails({ view, journeyId, chartId }: { view: AtlasView; journeyId: string; chartId: string }) {
   const j = view.journeys.find((x) => x.id === journeyId);
-  if (!j) return <p className={styles.lead}>This journey isn’t in the spec.</p>;
+  if (!j)
+    return (
+      <Text component="div" c="dimmed">
+        This journey isn’t in the spec.
+      </Text>
+    );
   return (
     <>
-      <div className={styles.plateHead}>
-        <h2 className={styles.plateTitle}>{j.name}</h2>
+      <Flex gap="xs" align="center" wrap="wrap">
+        <Title order={1} mb="sm">
+          {j.name}
+        </Title>
         <StatusBadge status={j.status} />
-      </div>
-      {j.description && <p className={styles.lead}>{j.description}</p>}
-      {!j.replay.ok && <p className={styles.warn}>The chart can’t follow this journey past “{j.replay.failedAt ?? j.replay.missingEnds.join(', ')}”.</p>}
+      </Flex>
+      {j.description && (
+        <Text component="div" c="dimmed">
+          {j.description}
+        </Text>
+      )}
+      {!j.replay.ok && (
+        <Text component="div" c="red.7">
+          The chart can’t follow this journey past “{j.replay.failedAt ?? j.replay.missingEnds.join(', ')}”.
+        </Text>
+      )}
       <JourneyLooks view={view} journeyId={j.id} />
-      <ol className={styles.steps}>
+      <List spacing="xs" listStyleType="none" type="ordered">
         {j.steps.map((step, i) => {
           const t = view.transitions.get(step.transitionIds[0] ?? '');
           if (!t) return null;
-          const here = view.transitions.get(t.id)?.chartId === chartId || [...view.transitions.values()].some((x) => x.carriedBy === t.id && x.chartId === chartId);
+          const here =
+            view.transitions.get(t.id)?.chartId === chartId ||
+            [...view.transitions.values()].some((x) => x.carriedBy === t.id && x.chartId === chartId);
           return (
-            <li key={i} data-here={here}>
-              <Link to="/chart/$chartId" params={{ chartId: t.chartId }} search={(prev) => ({ run: prev.run, journey: j.id, event: t.id })} className={styles.step}>
-                <span className={styles.stepNo}>{i + 1}</span>
-                <span className={styles.stepEvent} data-status={t.status}>{t.event}</span>
+            <List.Item key={i} data-here={here}>
+              <Anchor
+                renderRoot={(props) => (
+                  <Link
+                    {...props}
+                    to="/chart/$chartId"
+                    params={{ chartId: t.chartId }}
+                    search={(prev) => ({ run: prev.run, journey: j.id, event: t.id })}
+                  />
+                )}
+              >
+                <Text span inherit>
+                  {i + 1}
+                </Text>
+                <Text data-status={t.status} span inherit>
+                  {t.event}
+                </Text>
                 <StatusDot status={t.status} />
-              </Link>
-            </li>
+              </Anchor>
+            </List.Item>
           );
         })}
-      </ol>
+      </List>
     </>
   );
 }
-
 export function SidePanel({ view, chartId, selection }: { view: AtlasView; chartId: string; selection: MapSelection }) {
   const state = selection.screen ? view.states.get(selection.screen) : undefined;
   const transition = selection.event ? view.transitions.get(selection.event) : undefined;
@@ -307,25 +408,34 @@ export function SidePanel({ view, chartId, selection }: { view: AtlasView; chart
     body = <JourneyDetails view={view} journeyId={selection.journey} chartId={chartId} />;
     label = 'Journey';
   } else {
-    body = <p className={styles.lead}>This item isn’t in the spec any more. It may have been renamed or removed.</p>;
+    body = (
+      <Text component="div" c="dimmed">
+        This item isn’t in the spec any more. It may have been renamed or removed.
+      </Text>
+    );
     label = 'Not found';
   }
   const scopeName = state?.name ?? transition?.source;
   const scope = scopeName ? (mapScope(view, chartId, scopeName) ?? undefined) : undefined;
   return (
-    <article className={styles.plateScroll} aria-label={label}>
+    <Container aria-label={label} component="article" size="xl" w="100%" py="xl">
       {body}
       <ChartTests view={view} chartId={chartId} />
-      <Link
-        to="/chart/$chartId"
-        params={{ chartId }}
-        search={(prev) => ({ run: prev.run, screen: undefined, event: undefined, journey: undefined, group: scope })}
-        activeOptions={{ includeSearch: true, explicitUndefined: true }}
+      {view.charts.get(chartId)?.file && <ChartSource file={view.charts.get(chartId)!.file} />}
+      <Anchor
         aria-current={undefined}
-        className={styles.mapLink}
+        renderRoot={(props) => (
+          <Link
+            {...props}
+            to="/chart/$chartId"
+            params={{ chartId }}
+            search={(prev) => ({ run: prev.run, screen: undefined, event: undefined, journey: undefined, group: scope })}
+            activeOptions={{ includeSearch: true, explicitUndefined: true }}
+          />
+        )}
       >
         Show the map
-      </Link>
-    </article>
+      </Anchor>
+    </Container>
   );
 }

package/packages/visualizer/src/app/gazetteer.module.css

@@ -1,107 +0,0 @@
-.index {
-  background: var(--bg);
-  border-right: 1px solid var(--line);
-  overflow: auto;
-  padding: 12px 8px 32px;
-  min-height: 0;
-}
-
-.index h2 {
-  margin: 14px 10px 6px;
-  font-size: 0.9375rem;
-  font-weight: 600;
-}
-
-.index h3 {
-  margin: 16px 10px 4px;
-  color: var(--ink-3);
-  font-size: 0.75rem;
-  font-weight: 600;
-}
-
-.index ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.chart,
-.row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 10px;
-  padding: 6px 10px;
-  border-radius: 8px;
-  color: inherit;
-  font-size: 0.9rem;
-  text-decoration: none;
-}
-
-.thumb {
-  flex: none;
-  width: 28px;
-}
-
-.name {
-  flex: 1;
-  min-width: 0;
-}
-
-.chart {
-  color: var(--ink-2);
-  font-weight: 600;
-}
-
-.chart:hover,
-.row:hover {
-  background: var(--bg-2);
-}
-
-.chart[aria-current='page'],
-.row[aria-current='page'] {
-  background: var(--place-soft);
-  color: var(--ink);
-  font-weight: 600;
-}
-
-.status {
-  flex: none;
-  color: var(--ink-3);
-  font-size: 0.75rem;
-  font-weight: 400;
-  text-align: right;
-  white-space: nowrap;
-}
-
-.row[data-status='failed'] .status {
-  color: var(--failed);
-  font-weight: 600;
-}
-
-.row[data-status='flaky'] .status {
-  color: var(--flaky-ink);
-}
-
-.excluded {
-  padding: 6px 10px;
-  color: var(--ink-3);
-  font-size: 0.9rem;
-}
-
-.empty {
-  margin: 4px 10px;
-  color: var(--ink-3);
-  font-size: 0.875rem;
-}
-
-@media (max-width: 760px) {
-  .index {
-    flex: none;
-    max-height: none;
-    min-height: auto;
-    overflow: visible;
-    border-right: 0;
-    border-top: 1px solid var(--line);
-  }
-}

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

@@ -1,4 +0,0 @@
-.activity { display: inline-flex; align-items: center; justify-content: center; width: 12px; height: 12px; flex: none; color: var(--place); }
-.ring { box-sizing: border-box; width: 10px; height: 10px; border: 1.5px solid currentColor; border-right-color: transparent; border-bottom-color: transparent; border-radius: 50%; opacity: .65; animation: turn 1.8s linear infinite; }
-@keyframes turn { to { transform: rotate(360deg); } }
-@media (prefers-reduced-motion: reduce) { .ring { animation: none; } }