phonograph/svelte/src/table-viewer.webc.svelte

<svelte:options
  customElement={{
    props: {
      columns: { type: "Array" },
    },
    shadow: "none",
    tag: "table-viewer",
  }}
/>

<script lang="ts">
  import { z } from "zod";

  import { type Datum, datum_schema } from "./datum.svelte";
  import DatumEditor from "./datum-editor.svelte";
  import {
    type Coords,
    type Row,
    type FieldInfo,
    coords_eq,
    field_info_schema,
  } from "./field.svelte";
  import FieldAdder from "./field-adder.svelte";
  import FieldHeader from "./field-header.svelte";
  import { get_empty_datum_for } from "./presentation.svelte";
  import TableCell from "./table-cell.svelte";

  type Props = {
    columns?: {
      name: string;
      regtype: string;
    }[];
  };

  let { columns = [] }: Props = $props();

  type CellDelta = {
    // Assumes that primary keys are immutable and that rows are only added or
    // removed upon a refresh.
    coords: Coords;
    value_initial: Datum;
    value_updated: Datum;
  };

  type Delta = {
    cells: CellDelta[];
  };

  type LazyData = {
    rows: Row[];
    fields: FieldInfo[];
  };

  type Selection = {
    region: "main" | "inserter";
    coords: Coords;
    original_value: Datum;
  };

  let selections = $state<Selection[]>([]);
  // While the datum editor is focused and while updated values are being pushed
  // to the server, other actions such as changing the set of selected cells are
  // restricted.
  let editor_value = $state<Datum | undefined>(undefined);
  let deltas = $state<{
    commit_queued: Delta[];
    commit_pending: Delta[];
    committed: Delta[];
    revert_queued: Delta[];
    revert_pending: Delta[];
    reverted: Delta[];
  }>({
    commit_queued: [],
    commit_pending: [],
    committed: [],
    revert_queued: [],
    revert_pending: [],
    reverted: [],
  });
  let datum_editor = $state<DatumEditor | undefined>();
  let focus_cursor = $state<(() => unknown) | undefined>();
  let inserter_rows = $state<Row[]>([]);
  let lazy_data = $state<LazyData | undefined>();
  let dragged_header = $state<number | undefined>();

  // -------- Helper Functions -------- //

  function arrow_key_direction(
    key: string,
  ): "Down" | "Left" | "Right" | "Up" | undefined {
    if (key === "ArrowDown") {
      return "Down";
    } else if (key === "ArrowLeft") {
      return "Left";
    } else if (key === "ArrowRight") {
      return "Right";
    } else if (key === "ArrowUp") {
      return "Up";
    } else {
      return undefined;
    }
  }

  function selections_eq(
    a: Omit<Selection, "original_value">,
    b: Omit<Selection, "original_value">,
  ): boolean {
    return a.region === b.region && coords_eq(a.coords, b.coords);
  }

  function update_field_ordinality({
    field_index,
    beyond_index,
  }: {
    field_index: number;
    beyond_index: number;
  }) {
    if (!lazy_data) {
      console.warn("preconditions for update_field_ordinality() not met");
      return;
    }
    let target_ordinality: number | undefined;
    const ordinality_near = lazy_data.fields[beyond_index].field.ordinality;
    if (beyond_index > field_index) {
      // Field is moving towards the end.
      const ordinality_far =
        lazy_data.fields[beyond_index + 1]?.field.ordinality;
      if (ordinality_far) {
        target_ordinality = (ordinality_near + ordinality_far) / 2;
      } else {
        target_ordinality = ordinality_near + 1;
      }
    } else if (beyond_index < field_index) {
      // Field is moving towards the start.
      const ordinality_far =
        lazy_data.fields[beyond_index - 1]?.field.ordinality;
      if (ordinality_far) {
        target_ordinality = (ordinality_near + ordinality_far) / 2;
      } else {
        // Avoid setting ordinality <= 0.
        target_ordinality = ordinality_near / 2;
      }
    } else {
      // No movement.
      return;
    }

    // Imperatively submit HTML form.
    const form = document.createElement("form");
    form.setAttribute("action", "update-field-ordinality");
    form.setAttribute("method", "post");
    form.style.display = "none";
    const field_id_input = document.createElement("input");
    field_id_input.type = "hidden";
    field_id_input.name = "field_id";
    field_id_input.value = lazy_data.fields[field_index].field.id;
    const ordinality_input = document.createElement("input");
    ordinality_input.name = "ordinality";
    ordinality_input.type = "hidden";
    ordinality_input.value = `${target_ordinality}`;
    form.appendChild(field_id_input);
    form.appendChild(ordinality_input);
    document.body.appendChild(form);
    form.submit();
  }

  // -------- Updates and Effects -------- //

  function set_selections(arr: Omit<Selection, "original_value">[]) {
    selections = arr.map((sel) => {
      let cell_data: Datum | undefined;
      if (sel.region === "main") {
        cell_data = lazy_data?.rows[sel.coords[0]].data[sel.coords[1]];
      } else if (sel.region === "inserter") {
        cell_data = inserter_rows[sel.coords[0]].data[sel.coords[1]];
      } else {
        throw new Error("invalid region");
      }
      return {
        ...sel,
        original_value: cell_data!,
      };
    });
    if (arr.length === 1) {
      const [sel] = arr;
      let cell_data: Datum | undefined;
      if (sel.region === "main") {
        cell_data = lazy_data?.rows[sel.coords[0]].data[sel.coords[1]];
      } else if (sel.region === "inserter") {
        cell_data = inserter_rows[sel.coords[0]].data[sel.coords[1]];
      }
      editor_value = cell_data;
    } else {
      editor_value = undefined;
    }
  }

  function move_cursor(
    direction: "Down" | "Left" | "Right" | "Up",
    { additive }: { additive?: boolean } = {},
  ) {
    if (!lazy_data || selections.length === 0) {
      console.warn("move_selection() preconditions not met");
      return;
    }

    const cursor = selections[0];
    let new_cursor: Omit<Selection, "original_value"> | undefined;
    if (
      direction === "Right" &&
      cursor.coords[1] < lazy_data.fields.length - 1
    ) {
      new_cursor = {
        region: cursor.region,
        coords: [cursor.coords[0], cursor.coords[1] + 1],
      };
    } else if (direction === "Left" && cursor.coords[1] > 0) {
      new_cursor = {
        region: cursor.region,
        coords: [cursor.coords[0], cursor.coords[1] - 1],
      };
    } else if (direction === "Down") {
      if (cursor.region === "main") {
        if (cursor.coords[0] < lazy_data.rows.length - 1) {
          new_cursor = {
            region: "main",
            coords: [cursor.coords[0] + 1, cursor.coords[1]],
          };
        } else {
          // At bottom of main table.
          new_cursor = {
            region: "inserter",
            coords: [0, cursor.coords[1]],
          };
        }
      } else if (cursor.region === "inserter") {
        if (cursor.coords[0] < inserter_rows.length - 1) {
          new_cursor = {
            region: "inserter",
            coords: [cursor.coords[0] + 1, cursor.coords[1]],
          };
        }
      }
    } else if (direction === "Up") {
      if (cursor.region === "main") {
        if (cursor.coords[0] > 0) {
          new_cursor = {
            region: "main",
            coords: [cursor.coords[0] - 1, cursor.coords[1]],
          };
        }
      } else if (cursor.region === "inserter") {
        if (cursor.coords[0] > 0) {
          new_cursor = {
            region: "inserter",
            coords: [cursor.coords[0] - 1, cursor.coords[1]],
          };
        } else {
          // At top of inserter table.
          new_cursor = {
            region: "main",
            coords: [lazy_data.rows.length - 1, cursor.coords[1]],
          };
        }
      }
    }
    if (new_cursor !== undefined) {
      const first_selection = selections[selections.length - 1];
      if (
        additive &&
        first_selection !== undefined &&
        !selections_eq(new_cursor, first_selection)
      ) {
        // By convention, we keep the first selected cell at the end of the
        // selections array, and the current cursor at the beginning. Everything
        // in the bounded box should be populated in between.
        const all_selections: Omit<Selection, "original_value">[] = [];
        const left_idx = Math.min(
          new_cursor.coords[1],
          first_selection.coords[1],
        );
        const right_idx = Math.max(
          new_cursor.coords[1],
          first_selection.coords[1],
        );
        if (new_cursor.region === first_selection.region) {
          for (
            let row_idx = Math.min(
              new_cursor.coords[0],
              first_selection.coords[0],
            );
            row_idx <=
            Math.max(new_cursor.coords[0], first_selection.coords[0]);
            row_idx += 1
          ) {
            for (
              let field_idx = left_idx;
              field_idx <= right_idx;
              field_idx += 1
            ) {
              all_selections.push({
                region: new_cursor.region,
                coords: [row_idx, field_idx],
              });
            }
          }
        } else {
          const main_sel =
            new_cursor.region === "main" ? new_cursor : first_selection;
          const inserter_sel =
            new_cursor.region === "inserter" ? new_cursor : first_selection;
          for (
            let row_idx = main_sel.coords[0];
            row_idx < lazy_data.rows.length;
            row_idx += 1
          ) {
            for (
              let field_idx = left_idx;
              field_idx <= right_idx;
              field_idx += 1
            ) {
              all_selections.push({
                region: "main",
                coords: [row_idx, field_idx],
              });
            }
          }
          for (
            let row_idx = 0;
            row_idx <= inserter_sel.coords[0];
            row_idx += 1
          ) {
            for (
              let field_idx = left_idx;
              field_idx <= right_idx;
              field_idx += 1
            ) {
              all_selections.push({
                region: "inserter",
                coords: [row_idx, field_idx],
              });
            }
          }
        }
        set_selections([
          new_cursor,
          ...all_selections.filter(
            (sel) =>
              !selections_eq(sel, new_cursor) &&
              !selections_eq(sel, first_selection),
          ),
          first_selection,
        ]);
      } else {
        set_selections([new_cursor]);
      }
    }
  }

  function try_sync_edit_to_cells() {
    if (!lazy_data || selections.length !== 1) {
      console.warn("preconditions for try_sync_edit_to_cells() not met");
      return;
    }
    if (editor_value === undefined) {
      return;
    }
    const [sel] = selections;
    if (sel.region === "main") {
      lazy_data.rows[sel.coords[0]].data[sel.coords[1]] = editor_value;
    } else if (sel.region === "inserter") {
      inserter_rows[sel.coords[0]].data[sel.coords[1]] = editor_value;
    } else {
      throw new Error("Unknown region");
    }
  }

  function try_queue_delta() {
    // Copy `editor_value` so that it can be used intuitively within closures.
    const editor_value_scoped = editor_value;
    if (editor_value_scoped === undefined) {
      console.debug("not a valid cell value");
      cancel_edit();
    } else {
      if (selections.length > 0) {
        deltas.commit_queued = [
          ...deltas.commit_queued,
          {
            cells: selections
              .filter(({ region }) => region === "main")
              .map((sel) => ({
                coords: sel.coords,
                value_initial: sel.original_value,
                value_updated: editor_value_scoped,
              })),
          },
        ];
        console.debug("Commit queue:", deltas.commit_queued);
        selections = selections.map((sel) => ({
          ...sel,
          original_value: editor_value_scoped,
        }));
      }
    }
  }

  async function commit_delta(delta: Delta) {
    // Copy `lazy_data` so that it can be used intuitively within closures.
    const lazy_data_scoped = lazy_data;
    if (!lazy_data_scoped) {
      console.warn("sync_delta() preconditions not met");
      return;
    }
    deltas.commit_pending = [...deltas.commit_pending, delta];
    const resp = await fetch("update-values", {
      method: "post",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        cells: delta.cells.map((cell) => ({
          pkey: JSON.parse(lazy_data_scoped.rows[cell.coords[0]].key as string),
          column: lazy_data_scoped.fields[cell.coords[1]].field.name,
          value: cell.value_updated,
        })),
      }),
    });
    if (resp.status >= 200 && resp.status < 300) {
      deltas.commit_pending = deltas.commit_pending.filter((x) => x !== delta);
      deltas.committed = [...deltas.committed, delta];
    } else {
      // TODO display feedback to user
      console.error(resp);
      console.error(await resp.text());
    }
  }

  function tick_delta_queue() {
    const front_of_queue: Delta | undefined = deltas.commit_queued[0];
    if (front_of_queue) {
      deltas.commit_queued = deltas.commit_queued.filter(
        (x) => x !== front_of_queue,
      );
      commit_delta(front_of_queue).catch(console.error);
    }
  }

  function cancel_edit() {
    selections.forEach(({ coords, original_value, region }) => {
      if (region === "main") {
        if (lazy_data) {
          lazy_data.rows[coords[0]].data[coords[1]] = original_value;
        }
      } else if (region === "inserter") {
        inserter_rows[coords[0]].data[coords[1]] = original_value;
      } else {
        throw new Error("Unknown region");
      }
    });
    // Reset editor input value
    set_selections(selections);
  }

  // -------- Event Handlers -------- //

  function handle_cell_keydown(ev: KeyboardEvent) {
    if (!lazy_data) {
      console.warn("preconditions for handle_table_keydown() not met");
      return;
    }
    const arrow_direction = arrow_key_direction(ev.key);
    if (arrow_direction) {
      ev.preventDefault();
      if (ev.shiftKey) {
        move_cursor(arrow_direction, { additive: true });
      } else {
        move_cursor(arrow_direction);
      }
    } else if (
      !ev.altKey &&
      !ev.ctrlKey &&
      !ev.metaKey &&
      /^[a-zA-Z0-9`~!@#$%^&*()_=+[\]{}\\|;:'",<.>/?-]$/.test(ev.key)
    ) {
      const sel = selections[0];
      if (sel) {
        editor_value = get_empty_datum_for(
          lazy_data.fields[sel.coords[1]].field.presentation,
        );
        datum_editor?.focus();
      }
    } else if (ev.key === "Enter") {
      if (ev.shiftKey) {
        if (selections[0]?.region === "main") {
          set_selections([
            {
              region: "inserter",
              coords: [0, selections[0]?.coords[1] ?? 0],
            },
          ]);
        } else {
          inserter_rows = [
            ...inserter_rows,
            {
              key: inserter_rows.length,
              data: lazy_data.fields.map(({ field: { presentation } }) =>
                get_empty_datum_for(presentation),
              ),
            },
          ];
        }
      } else {
        datum_editor?.focus();
      }
    }
  }

  function handle_restore_focus() {
    focus_cursor?.();
  }

  // -------- Initial API Fetch -------- //

  (async function () {
    const get_data_response_schema = z.object({
      rows: z.array(
        z.object({
          pkey: z.string(),
          data: z.array(datum_schema),
        }),
      ),
      fields: z.array(field_info_schema),
    });
    const resp = await fetch("get-data");
    const body = get_data_response_schema.parse(await resp.json());
    lazy_data = {
      fields: body.fields,
      rows: body.rows.map(({ data, pkey }) => ({ data, key: pkey })),
    };
    inserter_rows = [
      {
        key: 0,
        data: body.fields.map(({ field: { presentation } }) =>
          get_empty_datum_for(presentation),
        ),
      },
    ];
    if (lazy_data.rows.length > 0 && lazy_data.fields.length > 0) {
      set_selections([
        {
          region: "main",
          coords: [0, 0],
        },
      ]);
    }
  })().catch(console.error);

  setInterval(tick_delta_queue, 500);
</script>

{#snippet table_region({
  region_name,
  rows,
  on_cell_click,
}: {
  region_name: "main" | "inserter";
  rows: Row[];
  on_cell_click(ev: MouseEvent, coords: Coords): void;
})}
  {#if lazy_data}
    {#each rows as row, row_index}
      <div class="lens-table__row" role="row">
        {#each lazy_data.fields as field, field_index}
          <TableCell
            coords={[row_index, field_index]}
            cursor={selections[0]?.region === region_name &&
              coords_eq(selections[0].coords, [row_index, field_index])}
            {field}
            onbecomecursor={(focus) => {
              focus_cursor = focus;
            }}
            ondblclick={() => datum_editor?.focus()}
            onkeydown={(ev) => handle_cell_keydown(ev)}
            onmousedown={on_cell_click}
            selected={selections.some(
              (sel) =>
                sel.region === region_name &&
                coords_eq(sel.coords, [row_index, field_index]),
            )}
            table_region={region_name}
            value={row.data[field_index]}
          />
        {/each}
      </div>
    {/each}
  {/if}
{/snippet}

<div
  class="lens-grid"
  onpaste={(ev) => {
    console.log("paste");
    console.log(ev.clipboardData?.getData("text"));
  }}
>
  {#if lazy_data}
    <div class="lens-table" role="grid">
      <div class={["lens-table__headers"]}>
        {#each lazy_data.fields as _, field_index}
          <FieldHeader
            bind:field={lazy_data.fields[field_index]}
            index={field_index}
            ondragstart={() => {
              dragged_header = field_index;
            }}
            ondragover={(ev) => {
              // Enable element as drop target
              ev.preventDefault();
            }}
            ondrop={(ev) => {
              ev.preventDefault();
              if (dragged_header !== undefined) {
                update_field_ordinality({
                  field_index: dragged_header,
                  beyond_index: field_index,
                });
              }
            }}
          />
        {/each}
        <div class="lens-table__header-actions">
          <FieldAdder {columns}></FieldAdder>
        </div>
      </div>
      <div class="lens-table__main">
        {@render table_region({
          region_name: "main",
          rows: lazy_data.rows,
          on_cell_click: (ev: MouseEvent, coords: Coords) => {
            if (ev.metaKey || ev.ctrlKey) {
              // TODO
              // selections = [...selections.filter((prev) => !coords_eq(prev, coords)), coords];
              // editor_input_value = "";
            } else {
              set_selections([{ region: "main", coords }]);
            }
          },
        })}
      </div>
      <form method="post" action="insert">
        <div class="lens-inserter">
          <h3 class="lens-inserter__help">
            Insert rows &mdash; press "shift + enter" to jump here or add a row
          </h3>
          <div class="lens-inserter__main">
            <div class="lens-inserter__rows">
              {@render table_region({
                region_name: "inserter",
                rows: inserter_rows,
                on_cell_click: (ev: MouseEvent, coords: Coords) => {
                  if (ev.metaKey || ev.ctrlKey) {
                    // TODO
                    // selections = [...selections.filter((prev) => !coords_eq(prev, coords)), coords];
                    // editor_input_value = "";
                  } else {
                    set_selections([{ region: "inserter", coords }]);
                  }
                },
              })}
            </div>
            <button
              aria-label="Insert rows"
              class="lens-inserter__submit"
              onkeydown={(ev) => {
                // Prevent keypress (e.g. pressing Enter on the button to submit
                // it) from triggering a table interaction.
                ev.stopPropagation();
              }}
              title="Insert rows"
              type="submit"
            >
              <i class="ti ti-upload"></i>
            </button>
          </div>
        </div>
        {#each inserter_rows as row}
          {#each lazy_data.fields as field, field_index}
            <input
              type="hidden"
              name={field.field.name}
              value={JSON.stringify(row.data[field_index])}
            />
          {/each}
        {/each}
      </form>
    </div>
    <div class="table-viewer__datum-editor">
      {#if selections.length === 1}
        <DatumEditor
          bind:this={datum_editor}
          bind:value={editor_value}
          field_info={lazy_data.fields[selections[0].coords[1]]}
          on_blur={() => try_queue_delta()}
          on_cancel_edit={cancel_edit}
          on_change={() => {
            try_sync_edit_to_cells();
          }}
          on_restore_focus={handle_restore_focus}
        />
      {/if}
    </div>
  {/if}
</div>