@bramas/simulant-ui 0.0.0-stage → 0.1.1

package/src/components/GenericEditor.tsx

@@ -0,0 +1,413 @@
+// A form generated from an editor schema (the settings of a project).
+import { createEffect, For, Match, Switch } from "solid-js";
+import { createStore } from "solid-js/store"
+
+import type { EditorSchema, EditorField } from "@bramas/simulant-core/types/editor-schema";
+
+export interface GenericEditorProps {
+  schema: EditorSchema;
+  onInput: (value: any) => void;
+  value?: any;
+}
+
+function commitNativeEdit(
+  element: HTMLTextAreaElement,
+  replacement: string,
+  start: number,
+  end: number,
+  selectionStart: number,
+  selectionEnd: number,
+  onInput: (value: string) => void
+) {
+  element.setRangeText(replacement, start, end, 'end');
+  element.setSelectionRange(selectionStart, selectionEnd);
+  onInput(element.value);
+}
+
+function getTouchedLineRange(value: string, selectionStart: number, selectionEnd: number) {
+  const blockStart = value.lastIndexOf('\n', selectionStart - 1) + 1;
+  let effectiveEnd = selectionEnd;
+
+  if (selectionEnd > selectionStart && value[selectionEnd - 1] === '\n') {
+    effectiveEnd -= 1;
+  }
+
+  const nextNewLine = value.indexOf('\n', Math.max(blockStart, effectiveEnd));
+  const blockEnd = nextNewLine === -1 ? value.length : nextNewLine;
+
+  return { blockStart, blockEnd };
+}
+
+function indentSelectedLines(
+  element: HTMLTextAreaElement,
+  onInput: (value: string) => void,
+  indentUnit: string,
+  selectionStart: number,
+  selectionEnd: number
+) {
+  const value = element.value;
+  const { blockStart, blockEnd } = getTouchedLineRange(value, selectionStart, selectionEnd);
+  const selectedBlock = value.slice(blockStart, blockEnd);
+  const lines = selectedBlock.split('\n');
+  const replacement = lines.map((line) => `${indentUnit}${line}`).join('\n');
+
+  const startOffset = selectionStart === selectionEnd ? indentUnit.length : selectionStart - blockStart + indentUnit.length;
+  const endOffset = selectionEnd - blockStart + indentUnit.length * lines.length;
+
+  commitNativeEdit(
+    element,
+    replacement,
+    blockStart,
+    blockEnd,
+    blockStart + startOffset,
+    blockStart + endOffset,
+    onInput,
+  );
+}
+
+function unindentSelectedLines(
+  element: HTMLTextAreaElement,
+  onInput: (value: string) => void,
+  selectionStart: number,
+  selectionEnd: number
+) {
+  const value = element.value;
+  const { blockStart, blockEnd } = getTouchedLineRange(value, selectionStart, selectionEnd);
+  const selectedBlock = value.slice(blockStart, blockEnd);
+  const lines = selectedBlock.split('\n');
+
+  let removedBeforeSelectionStart = 0;
+  let removedBeforeSelectionEnd = 0;
+
+  const replacement = lines.map((line, index) => {
+    let removal = 0;
+    if (line.startsWith('  ')) {
+      removal = 2;
+    } else if (line.startsWith('\t')) {
+      removal = 1;
+    }
+
+    if (removal > 0) {
+      if (index === 0) {
+        removedBeforeSelectionStart = Math.min(removal, Math.max(0, selectionStart - blockStart));
+      }
+      removedBeforeSelectionEnd += removal;
+    }
+
+    return line.slice(removal);
+  }).join('\n');
+
+  const nextSelectionStart = Math.max(blockStart, selectionStart - removedBeforeSelectionStart);
+  const nextSelectionEnd = Math.max(nextSelectionStart, selectionEnd - removedBeforeSelectionEnd);
+
+  commitNativeEdit(
+    element,
+    replacement,
+    blockStart,
+    blockEnd,
+    nextSelectionStart,
+    nextSelectionEnd,
+    onInput,
+  );
+}
+
+function CodeEditor(props: {
+  value: string;
+  onInput: (value: string) => void;
+  placeholder?: string;
+  rows?: number;
+}) {
+  let textareaRef: HTMLTextAreaElement | undefined;
+  let gutterRef: HTMLDivElement | undefined;
+
+  const lineNumbers = () => {
+    const lineCount = Math.max(1, props.value.split('\n').length);
+    return Array.from({ length: lineCount }, (_, index) => index + 1);
+  };
+
+  const syncScroll = () => {
+    if (textareaRef && gutterRef) {
+      gutterRef.scrollTop = textareaRef.scrollTop;
+    }
+  };
+
+  const handleKeyDown = (event: KeyboardEvent) => {
+    const textarea = event.currentTarget as HTMLTextAreaElement;
+    const { selectionStart, selectionEnd, value } = textarea;
+
+    if (event.key === 'Tab') {
+      event.preventDefault();
+      const hasSelection = selectionEnd > selectionStart;
+      const touchesMultipleLines = value.slice(selectionStart, selectionEnd).includes('\n');
+
+      if (event.shiftKey) {
+        unindentSelectedLines(textarea, props.onInput, selectionStart, selectionEnd);
+        return;
+      }
+
+      const indentation = '  ';
+
+      if (hasSelection || touchesMultipleLines) {
+        indentSelectedLines(textarea, props.onInput, indentation, selectionStart, selectionEnd);
+        return;
+      }
+
+      commitNativeEdit(
+        textarea,
+        indentation,
+        selectionStart,
+        selectionEnd,
+        selectionStart + indentation.length,
+        selectionStart + indentation.length,
+        props.onInput,
+      );
+      return;
+    }
+
+    if (event.key === 'Enter') {
+      const lineStart = value.lastIndexOf('\n', selectionStart - 1) + 1;
+      const currentLine = value.slice(lineStart, selectionStart);
+      const indentation = currentLine.match(/^[\t ]*/)?.[0] ?? '';
+
+      if (indentation.length > 0) {
+        event.preventDefault();
+        const insert = `\n${indentation}`;
+        const cursor = selectionStart + insert.length;
+        commitNativeEdit(
+          textarea,
+          insert,
+          selectionStart,
+          selectionEnd,
+          cursor,
+          cursor,
+          props.onInput,
+        );
+      }
+    }
+  };
+
+  return (
+    <div
+      style={{
+        display: 'grid',
+        'grid-template-columns': '3.5em minmax(0, 1fr)',
+        border: '1px solid #c9d2dc',
+        'border-radius': '6px',
+        overflow: 'hidden',
+        'background-color': '#f8fafc'
+      }}
+    >
+      <div
+        ref={gutterRef}
+        aria-hidden="true"
+        style={{
+          'font-family': 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace',
+          'font-size': '0.9em',
+          'line-height': '1.5',
+          padding: '0.75em 0.5em',
+          'text-align': 'right',
+          color: '#6b7280',
+          'background-color': '#eef2f7',
+          'border-right': '1px solid #d7dee7',
+          overflow: 'hidden',
+          'user-select': 'none'
+        }}
+      >
+        <For each={lineNumbers()}>
+          {(lineNumber) => <div>{lineNumber}</div>}
+        </For>
+      </div>
+      <textarea
+        ref={textareaRef}
+        value={props.value}
+        onInput={(event) => props.onInput(event.currentTarget.value)}
+        onKeyDown={handleKeyDown}
+        onScroll={syncScroll}
+        placeholder={props.placeholder}
+        rows={props.rows ?? 12}
+        spellcheck={false}
+        style={{
+          width: '100%',
+          margin: '0',
+          border: 'none',
+          outline: 'none',
+          resize: 'vertical',
+          padding: '0.75em',
+          'background-color': '#fcfdff',
+          color: '#17202a',
+          'font-family': 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace',
+          'font-size': '0.9em',
+          'line-height': '1.5',
+          'white-space': 'pre',
+          'tab-size': '2'
+        }}
+      />
+    </div>
+  );
+}
+
+type SetField = (key: string, value: any) => void;
+
+function renderTextArea(
+  field: Extract<EditorField, { type: 'text' | 'textarea' | 'code' }>,
+  fieldStore: { [key: string]: any; },
+  setFieldStore: SetField
+) {
+  const isCodeEditor = field.type === 'code';
+
+  return (
+    <div class="sim-field sim-field-wide">
+      <label>
+        {field.label}:{' '}
+        {'placeholder' in field && field.placeholder && (
+          <span class="sim-muted">({field.placeholder})</span>
+        )}
+        {isCodeEditor ? (
+          <CodeEditor
+            value={fieldStore[field.key] ?? ''}
+            onInput={(value) => setFieldStore(field.key, value)}
+            placeholder={'placeholder' in field ? field.placeholder : undefined}
+            rows={'rows' in field && field.rows ? field.rows : 12}
+          />
+        ) : (
+          <textarea
+            value={fieldStore[field.key] ?? ''}
+            onInput={(e) => setFieldStore(field.key, e.currentTarget.value)}
+            placeholder={'placeholder' in field ? field.placeholder : undefined}
+            rows={'rows' in field && field.rows ? field.rows : 4}
+            spellcheck={field.type === 'textarea' ? field.spellcheck : false}
+          />
+        )}
+      </label>
+    </div>
+  );
+}
+
+function RenderField(props: {field: EditorField, fieldStore: {[key: string]: any;}, setFieldStore: SetField}) {
+
+    return (
+      <Switch>
+        <Match when={props.field.type === 'number' && props.field}>
+          {(f) => (
+            <div class="sim-field">
+              <label>
+                {f().label}:{' '}
+                <input
+                  type="number"
+                  value={props.fieldStore[props.field.key]}
+                  onInput={(e) => {
+                    // An empty or partial number is not a value yet: wait for the next keystroke.
+                    const n = e.currentTarget.valueAsNumber;
+                    if (!Number.isNaN(n)) props.setFieldStore(props.field.key, n);
+                  }}
+                  min={'min' in props.field ? props.field.min : undefined}
+                  max={'max' in props.field ? props.field.max : undefined}
+                  step={'step' in props.field ? props.field.step : undefined}
+                />
+              </label>
+            </div>
+          )}
+        </Match>
+
+        <Match when={props.field.type === 'text' && props.field && !('multiline' in props.field && props.field.multiline)}>
+          <div class="sim-field sim-field-wide">
+            <label>
+              {props.field.label}:{' '}
+              {'placeholder' in props.field && props.field.placeholder && (
+                <span class="sim-muted">({props.field.placeholder})</span>
+              )}
+              <input
+                type="text" 
+                value={props.fieldStore[props.field.key] ?? ''} 
+                onInput={(e) => props.setFieldStore(props.field.key, e.currentTarget.value)}
+                placeholder={'placeholder' in props.field ? props.field.placeholder : undefined}
+                pattern={'pattern' in props.field ? props.field.pattern : undefined}
+                spellcheck={false}
+              />
+            </label>
+          </div>
+        </Match>
+
+        <Match when={props.field.type === 'code' || props.field.type === 'textarea' || (props.field.type === 'text' && 'multiline' in props.field && props.field.multiline)}>
+          {renderTextArea(
+            props.field as Extract<EditorField, { type: 'text' | 'textarea' | 'code' }>,
+            props.fieldStore,
+            props.setFieldStore
+          )}
+        </Match>
+        
+        <Match when={props.field.type === 'boolean' && props.field}>
+          {(f) => (
+            <div class="sim-field">
+              <label>
+                <input
+                  type="checkbox"
+                  checked={props.fieldStore[props.field.key]}
+                  onInput={(e) => props.setFieldStore(props.field.key, e.currentTarget.checked)}
+                />
+                {' '}{props.field.label}
+              </label>
+            </div>
+          )}
+        </Match>
+
+        <Match when={props.field.type === 'select' && props.field}>
+          {(f) => (
+            <div class="sim-field">
+              <label>
+                {props.field.label}:{' '}
+                <select 
+                  value={props.fieldStore[props.field.key]} 
+                  onInput={(e) => props.setFieldStore(props.field.key,
+                    typeof props.field.defaultValue === 'number' 
+                      ? parseFloat(e.currentTarget.value)
+                      : e.currentTarget.value
+                  )}
+                >
+                  <For each={'options' in f() ? f().options : []}>
+                    {(option) => <option value={option.value}>{option.label}</option>}
+                  </For>
+                </select>
+              </label>
+            </div>
+          )}
+        </Match>
+      </Switch>
+    );
+  };
+
+
+/** The values the form shows: the schema's defaults, overridden by `value`. */
+export function formValues(schema: EditorSchema, value?: any): Record<string, any> {
+  const result: Record<string, any> = {};
+  for (const field of schema.fields) {
+    result[field.key] = value && value[field.key] !== undefined ? value[field.key] : (field as any).defaultValue;
+  }
+  return result;
+}
+
+export function GenericEditor(props: GenericEditorProps) {
+
+  const [fieldStore, setFieldStore] = createStore<{[key: string]: any}>({});
+
+  // Show `props.value` (loading settings does not count as an edit).
+  createEffect(() => setFieldStore(formValues(props.schema, props.value)));
+
+  // Only the user's edits are reported.
+  const setField: SetField = (key, value) => {
+    setFieldStore(key, value);
+    props.onInput({ ...fieldStore });
+  };
+
+  return (
+    <div class="sim-form">
+      <For each={props.schema.fields}>
+        {(field) => <RenderField
+          field={field}
+          fieldStore={fieldStore}
+          setFieldStore={setField} />
+        }
+      </For>
+    </div>
+  );
+}

package/src/components/LeanView.tsx

@@ -0,0 +1,162 @@
+/**
+ * The generated Lean model of an experiment, as `simulant lean` writes it, beside the model
+ * view's `.sim` sources. A gutter says what each region translates; clicking a region shows its
+ * source, and `focus` (from the sources) highlights the regions that translate a declaration or
+ * a line. The library components the model imports follow, folded.
+ */
+import { For, Show, createEffect, createMemo, createSignal, on, type JSX } from 'solid-js';
+import type { LeanBlock, LeanDescription, SourceRef } from '@bramas/simulant-core/types/project';
+import { leanModuleName } from '@bramas/simulant-lean-gen/names';
+import { tokenizeLean } from './highlight';
+
+export interface LeanViewProps {
+  lean: LeanDescription;
+  /** The simulation's name: `simulant lean -p <simulation>` names the module after it. */
+  simulation: string;
+  /** How a reference reads (`algo1.sim:32`). */
+  refLabel: (ref: SourceRef) => string;
+  onShowSource: (ref: SourceRef) => void;
+  /** Regions to highlight: those translating this declaration (and line); `seq` repeats a request. */
+  focus?: SourceRef & { seq: number };
+}
+
+const matches = (b: { refs: SourceRef[] }, f: SourceRef) =>
+  b.refs.some(r => r.source === f.source && (f.line === undefined || r.line === f.line));
+
+export function LeanView(props: LeanViewProps) {
+  const module = () => leanModuleName(props.simulation);
+  const path = () => `lean/Generated/${module()}/Model.lean`;
+  /** The text as the CLI writes it for this simulation (the module is named after the simulation). */
+  const rename = (text: string) => text.split(`Generated.${props.lean.module}`).join(`Generated.${module()}`);
+
+  const download = (text: string, name: string) => {
+    const url = URL.createObjectURL(new Blob([text], { type: 'text/plain' }));
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = name;
+    a.click();
+    setTimeout(() => URL.revokeObjectURL(url), 1000);
+  };
+
+  return (
+    <div class="mv-lean">
+      <section class="sim-card mv-section">
+        <h3>
+          Lean model <span class="sim-muted mv-lean-path">{path()}</span>
+          <span class="sim-spacer" style={{ flex: 1 }} />
+          <Show when={'text' in props.lean}>
+            <button class="sim-ghost" onClick={() => 'text' in props.lean && download(rename(props.lean.text), 'Model.lean')}>Download</button>
+          </Show>
+        </h3>
+        <p class="mv-note">
+          Generated from the same compiled experiment as the simulation and the checks, by <code>simulant lean -p {props.simulation}</code>.
+          The rounds, executions, fairness and <code>Correct</code> are defined once, by hand, in the semantic core (<code>lean/Simulant/</code>);
+          proofs go in <code>Proofs/</code>. The gutter says what each part translates: click a part to see its source, or a declaration's
+          {' '}<em>Lean</em> button to find its translation.
+        </p>
+      </section>
+      <Show when={'text' in props.lean ? props.lean : undefined} fallback={
+        <section class="sim-card mv-section mv-caveats">
+          <h3>No Lean translation</h3>
+          <p class="mv-note">{(props.lean as { error: string }).error}</p>
+        </section>
+      }>
+        {lean => (
+          <>
+            <LeanFile text={rename(lean().text)} blocks={lean().blocks} {...props} />
+            <For each={lean().library}>
+              {lib => {
+                const [open, setOpen] = createSignal(false);
+                return (
+                  <section class="algorithm-viewer mv-source mv-defs">
+                    <button class="mv-defs-head" onClick={() => setOpen(v => !v)} aria-expanded={open()}>
+                      <span class="mv-fold">{open() ? '▾' : '▸'}</span>
+                      <span class="algorithm-caption">{lib.module}</span>
+                      <span class="sim-muted">imported: generated from the standard library, shared by every model that uses it</span>
+                    </button>
+                    <Show when={open()}>
+                      <LeanFile text={lib.text} blocks={[{ line: 1, endLine: lib.text.split('\n').length, label: 'library component', refs: lib.refs }]} {...props} />
+                    </Show>
+                  </section>
+                );
+              }}
+            </For>
+          </>
+        )}
+      </Show>
+    </div>
+  );
+}
+
+function LeanFile(p: { text: string; blocks: LeanBlock[] } & LeanViewProps): JSX.Element {
+  const lines = createMemo(() => tokenizeLean(p.text.split('\n').map((text, i) => ({ number: i + 1, text }))));
+  /** For each line, the smallest region containing it (a case of the step, rather than the step). */
+  const innermost = createMemo(() => {
+    const out: (number | undefined)[] = [];
+    p.blocks.forEach((b, i) => {
+      for (let l = b.line; l <= b.endLine; l++) {
+        const cur = out[l];
+        if (cur === undefined || p.blocks[cur].endLine - p.blocks[cur].line > b.endLine - b.line) out[l] = i;
+      }
+    });
+    return out;
+  });
+  const starts = createMemo(() => {
+    const out = new Map<number, LeanBlock[]>();
+    for (const b of p.blocks) out.set(b.line, [...(out.get(b.line) ?? []), b]);
+    return out;
+  });
+  const [hovered, setHovered] = createSignal<number | undefined>();
+  const focused = createMemo(() => p.focus ? new Set(p.blocks.flatMap((b, i) => matches(b, p.focus!) ? [i] : [])) : new Set<number>());
+  const [flash, setFlash] = createSignal(false);
+  let body: HTMLDivElement | undefined;
+  createEffect(on(() => p.focus?.seq, () => {
+    const first = [...focused()].map(i => p.blocks[i]).sort((a, b) => a.line - b.line)[0];
+    if (!first) return;
+    setFlash(true);
+    setTimeout(() => setFlash(false), 1600);
+    body?.querySelector(`[data-line-number="${first.line}"]`)?.scrollIntoView({ block: 'center', behavior: 'smooth' });
+  }, { defer: true }));
+
+  const lit = (line: number) => {
+    const i = innermost()[line];
+    if (i === undefined) return '';
+    if (flash() && [...focused()].some(f => p.blocks[f].line <= line && line <= p.blocks[f].endLine)) return ' mv-flash-line';
+    return hovered() === i ? ' mv-lean-hover' : '';
+  };
+
+  return (
+    <div class="algorithm-viewer mv-source mv-lean-file">
+      <div class="algorithm-body" ref={body} onMouseLeave={() => setHovered(undefined)}>
+        <For each={lines()}>
+          {line => {
+            const block = () => innermost()[line.number];
+            const show = () => {
+              const b = block();
+              if (b !== undefined && p.blocks[b].refs[0]) p.onShowSource(p.blocks[b].refs[0]);
+            };
+            return (
+              <div class={`algorithm-line mv-lean-line${lit(line.number)}${block() !== undefined && p.blocks[block()!].refs.length ? ' mv-linked' : ''}`}
+                data-line-number={line.number} onMouseEnter={() => setHovered(block())} onClick={show}>
+                <span class="mv-gutter">
+                  <For each={starts().get(line.number) ?? []}>
+                    {b => (
+                      <span class="mv-gutter-item" title={b.refs.map(p.refLabel).join(', ')}>
+                        {b.label}
+                        <For each={b.refs.slice(0, 1)}>{r => <span class="mv-gutter-ref">{p.refLabel(r)}</span>}</For>
+                      </span>
+                    )}
+                  </For>
+                </span>
+                <span class="line-number">{line.number}</span>
+                <span class="line-content">
+                  <For each={line.tokens}>{t => t.kind ? <span class={`tok-${t.kind}`}>{t.text}</span> : t.text}</For>
+                </span>
+              </div>
+            );
+          }}
+        </For>
+      </div>
+    </div>
+  );
+}