vastgrid 0.1.0 → 0.2.0

package/dist/react/conditions-menu.js

@@ -0,0 +1,795 @@
+import { c as _c } from "react/compiler-runtime";
+import { use, useState, useTransition } from "react";
+import { formulaText } from "vastgrid-spec";
+import { ConditionError, nodeId, readConditions, writeConditions } from "../core/conditions.js";
+import { operatorsFor, takesNoValue } from "../core/filters.js";
+import { rowColumns } from "../core/measures.js";
+import { LocaleContext } from "./context.js";
+import { useGridSelector, useGridStore } from "./hooks.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** A tree with one node changed, or removed when `change` gives null. */
+function changed(group, id, change) {
+  const items = group.items.flatMap(item => {
+    if (item.id === id) {
+      const next = change(item);
+      return next ? [next] : [];
+    }
+    return item.kind === "group" ? [changed(item, id, change)] : [item];
+  });
+  return group.id === id ? change(group) ?? {
+    ...group,
+    items: []
+  } : {
+    ...group,
+    items
+  };
+}
+
+/** A condition on the first column, with the first operator of its type. */
+function newCondition(columns) {
+  const column = columns[0];
+  return {
+    kind: "condition",
+    id: nodeId(),
+    column: column?.name ?? "",
+    filter: {
+      kind: "condition",
+      operator: column ? operatorsFor(column.type)[0] : "eq",
+      first: "",
+      second: ""
+    }
+  };
+}
+
+/** An expression as a formula (§4.11), or its JSON when it has none. */
+function expressionText(expr) {
+  try {
+    return formulaText(expr);
+  } catch {
+    return JSON.stringify(expr);
+  }
+}
+/** A condition: its column, operator and texts. */
+function ConditionRow(t0) {
+  const $ = _c(74);
+  const {
+    node,
+    columns,
+    invalid,
+    messages,
+    onChange
+  } = t0;
+  let first;
+  let operator;
+  let second;
+  let set;
+  let t1;
+  let t2;
+  let t3;
+  let t4;
+  let t5;
+  let t6;
+  let t7;
+  if ($[0] !== columns || $[1] !== messages.condition || $[2] !== messages.conditionColumn || $[3] !== messages.operators || $[4] !== node.column || $[5] !== node.filter || $[6] !== node.id || $[7] !== onChange) {
+    let t8;
+    if ($[19] !== node.column) {
+      t8 = item => item.name === node.column;
+      $[19] = node.column;
+      $[20] = t8;
+    } else {
+      t8 = $[20];
+    }
+    const column = columns.find(t8);
+    const operators = column ? operatorsFor(column.type) : [];
+    ({
+      operator,
+      first,
+      second
+    } = node.filter);
+    let t9;
+    if ($[21] !== node.id || $[22] !== onChange) {
+      t9 = filter => onChange(node.id, current => current.kind === "condition" ? {
+        ...current,
+        filter: {
+          ...current.filter,
+          ...filter
+        }
+      } : current);
+      $[21] = node.id;
+      $[22] = onChange;
+      $[23] = t9;
+    } else {
+      t9 = $[23];
+    }
+    set = t9;
+    t6 = "vg-conditions__row";
+    const t10 = messages.conditionColumn;
+    const t11 = node.column;
+    let t12;
+    if ($[24] !== columns || $[25] !== node.id || $[26] !== onChange || $[27] !== operator) {
+      t12 = event => {
+        const next = columns.find(item_0 => item_0.name === event.target.value);
+        if (!next) {
+          return;
+        }
+        const kept = operatorsFor(next.type).includes(operator) ? operator : operatorsFor(next.type)[0];
+        onChange(node.id, current_0 => current_0.kind === "condition" ? {
+          ...current_0,
+          column: next.name,
+          filter: {
+            ...current_0.filter,
+            operator: kept
+          }
+        } : current_0);
+      };
+      $[24] = columns;
+      $[25] = node.id;
+      $[26] = onChange;
+      $[27] = operator;
+      $[28] = t12;
+    } else {
+      t12 = $[28];
+    }
+    let t13;
+    if ($[29] !== columns) {
+      t13 = columns.map(_temp);
+      $[29] = columns;
+      $[30] = t13;
+    } else {
+      t13 = $[30];
+    }
+    if ($[31] !== messages.conditionColumn || $[32] !== node.column || $[33] !== t12 || $[34] !== t13) {
+      t7 = /*#__PURE__*/_jsx("select", {
+        className: "vg-input",
+        "aria-label": t10,
+        value: t11,
+        onChange: t12,
+        children: t13
+      });
+      $[31] = messages.conditionColumn;
+      $[32] = node.column;
+      $[33] = t12;
+      $[34] = t13;
+      $[35] = t7;
+    } else {
+      t7 = $[35];
+    }
+    t1 = "vg-input";
+    t2 = messages.condition;
+    t3 = operator;
+    if ($[36] !== set) {
+      t4 = event_0 => set({
+        operator: event_0.target.value
+      });
+      $[36] = set;
+      $[37] = t4;
+    } else {
+      t4 = $[37];
+    }
+    let t14;
+    if ($[38] !== messages.operators) {
+      t14 = item_2 => /*#__PURE__*/_jsx("option", {
+        value: item_2,
+        children: messages.operators[item_2]
+      }, item_2);
+      $[38] = messages.operators;
+      $[39] = t14;
+    } else {
+      t14 = $[39];
+    }
+    t5 = operators.map(t14);
+    $[0] = columns;
+    $[1] = messages.condition;
+    $[2] = messages.conditionColumn;
+    $[3] = messages.operators;
+    $[4] = node.column;
+    $[5] = node.filter;
+    $[6] = node.id;
+    $[7] = onChange;
+    $[8] = first;
+    $[9] = operator;
+    $[10] = second;
+    $[11] = set;
+    $[12] = t1;
+    $[13] = t2;
+    $[14] = t3;
+    $[15] = t4;
+    $[16] = t5;
+    $[17] = t6;
+    $[18] = t7;
+  } else {
+    first = $[8];
+    operator = $[9];
+    second = $[10];
+    set = $[11];
+    t1 = $[12];
+    t2 = $[13];
+    t3 = $[14];
+    t4 = $[15];
+    t5 = $[16];
+    t6 = $[17];
+    t7 = $[18];
+  }
+  let t8;
+  if ($[40] !== t1 || $[41] !== t2 || $[42] !== t3 || $[43] !== t4 || $[44] !== t5) {
+    t8 = /*#__PURE__*/_jsx("select", {
+      className: t1,
+      "aria-label": t2,
+      value: t3,
+      onChange: t4,
+      children: t5
+    });
+    $[40] = t1;
+    $[41] = t2;
+    $[42] = t3;
+    $[43] = t4;
+    $[44] = t5;
+    $[45] = t8;
+  } else {
+    t8 = $[45];
+  }
+  let t9;
+  if ($[46] !== first || $[47] !== invalid || $[48] !== messages.minimum || $[49] !== messages.value || $[50] !== node.id || $[51] !== operator || $[52] !== set) {
+    t9 = !takesNoValue(operator) && /*#__PURE__*/_jsx("input", {
+      className: "vg-input",
+      "aria-label": operator === "between" ? messages.minimum : messages.value,
+      placeholder: operator === "between" ? messages.minimum : messages.value,
+      "aria-invalid": invalid === node.id,
+      value: first,
+      onChange: event_1 => set({
+        first: event_1.target.value
+      })
+    });
+    $[46] = first;
+    $[47] = invalid;
+    $[48] = messages.minimum;
+    $[49] = messages.value;
+    $[50] = node.id;
+    $[51] = operator;
+    $[52] = set;
+    $[53] = t9;
+  } else {
+    t9 = $[53];
+  }
+  let t10;
+  if ($[54] !== invalid || $[55] !== messages.maximum || $[56] !== node.id || $[57] !== operator || $[58] !== second || $[59] !== set) {
+    t10 = operator === "between" && /*#__PURE__*/_jsx("input", {
+      className: "vg-input",
+      "aria-label": messages.maximum,
+      placeholder: messages.maximum,
+      "aria-invalid": invalid === node.id,
+      value: second,
+      onChange: event_2 => set({
+        second: event_2.target.value
+      })
+    });
+    $[54] = invalid;
+    $[55] = messages.maximum;
+    $[56] = node.id;
+    $[57] = operator;
+    $[58] = second;
+    $[59] = set;
+    $[60] = t10;
+  } else {
+    t10 = $[60];
+  }
+  let t11;
+  if ($[61] !== node.id || $[62] !== onChange) {
+    t11 = () => onChange(node.id, _temp2);
+    $[61] = node.id;
+    $[62] = onChange;
+    $[63] = t11;
+  } else {
+    t11 = $[63];
+  }
+  let t12;
+  if ($[64] !== messages.removeCondition || $[65] !== t11) {
+    t12 = /*#__PURE__*/_jsx("button", {
+      type: "button",
+      className: "vg-button vg-button--small",
+      "aria-label": messages.removeCondition,
+      onClick: t11,
+      children: "\xD7"
+    });
+    $[64] = messages.removeCondition;
+    $[65] = t11;
+    $[66] = t12;
+  } else {
+    t12 = $[66];
+  }
+  let t13;
+  if ($[67] !== t10 || $[68] !== t12 || $[69] !== t6 || $[70] !== t7 || $[71] !== t8 || $[72] !== t9) {
+    t13 = /*#__PURE__*/_jsxs("li", {
+      className: t6,
+      children: [t7, t8, t9, t10, t12]
+    });
+    $[67] = t10;
+    $[68] = t12;
+    $[69] = t6;
+    $[70] = t7;
+    $[71] = t8;
+    $[72] = t9;
+    $[73] = t13;
+  } else {
+    t13 = $[73];
+  }
+  return t13;
+}
+
+/** A group: whether all of its items hold or one of them, its items, and buttons that add to it. */
+function _temp2() {
+  return null;
+}
+function _temp(item_1) {
+  return /*#__PURE__*/_jsx("option", {
+    value: item_1.name,
+    children: item_1.name
+  }, item_1.name);
+}
+function GroupBlock(t0) {
+  const $ = _c(60);
+  const {
+    node,
+    columns,
+    invalid,
+    messages,
+    onChange,
+    top
+  } = t0;
+  const t1 = top ? "vg-conditions__group vg-conditions__group--top" : "vg-conditions__group";
+  let t2;
+  if ($[0] !== node.id || $[1] !== onChange) {
+    t2 = event => {
+      const op = event.target.value;
+      onChange(node.id, current => current.kind === "group" ? {
+        ...current,
+        op
+      } : current);
+    };
+    $[0] = node.id;
+    $[1] = onChange;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  let t3;
+  if ($[3] !== messages.matchAll) {
+    t3 = /*#__PURE__*/_jsx("option", {
+      value: "and",
+      children: messages.matchAll
+    });
+    $[3] = messages.matchAll;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  let t4;
+  if ($[5] !== messages.matchAny) {
+    t4 = /*#__PURE__*/_jsx("option", {
+      value: "or",
+      children: messages.matchAny
+    });
+    $[5] = messages.matchAny;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  let t5;
+  if ($[7] !== messages.matchLabel || $[8] !== node.op || $[9] !== t2 || $[10] !== t3 || $[11] !== t4) {
+    t5 = /*#__PURE__*/_jsx("legend", {
+      children: /*#__PURE__*/_jsxs("select", {
+        className: "vg-input",
+        "aria-label": messages.matchLabel,
+        value: node.op,
+        onChange: t2,
+        children: [t3, t4]
+      })
+    });
+    $[7] = messages.matchLabel;
+    $[8] = node.op;
+    $[9] = t2;
+    $[10] = t3;
+    $[11] = t4;
+    $[12] = t5;
+  } else {
+    t5 = $[12];
+  }
+  let t6;
+  if ($[13] !== messages.noConditions || $[14] !== node.items.length || $[15] !== top) {
+    t6 = node.items.length === 0 && top && /*#__PURE__*/_jsx("p", {
+      className: "vg-filter__note",
+      children: messages.noConditions
+    });
+    $[13] = messages.noConditions;
+    $[14] = node.items.length;
+    $[15] = top;
+    $[16] = t6;
+  } else {
+    t6 = $[16];
+  }
+  let t7;
+  if ($[17] !== columns || $[18] !== invalid || $[19] !== messages || $[20] !== node.items || $[21] !== onChange) {
+    let t8;
+    if ($[23] !== columns || $[24] !== invalid || $[25] !== messages || $[26] !== onChange) {
+      t8 = item => item.kind === "group" ? /*#__PURE__*/_jsx("li", {
+        children: /*#__PURE__*/_jsx(GroupBlock, {
+          node: item,
+          columns: columns,
+          invalid: invalid,
+          messages: messages,
+          onChange: onChange
+        })
+      }, item.id) : item.kind === "condition" ? /*#__PURE__*/_jsx(ConditionRow, {
+        node: item,
+        columns: columns,
+        invalid: invalid,
+        messages: messages,
+        onChange: onChange
+      }, item.id) : /*#__PURE__*/_jsxs("li", {
+        className: "vg-conditions__row",
+        children: [/*#__PURE__*/_jsx("code", {
+          className: "vg-conditions__expression",
+          children: expressionText(item.expr)
+        }), /*#__PURE__*/_jsx("button", {
+          type: "button",
+          className: "vg-button vg-button--small",
+          "aria-label": messages.removeCondition,
+          onClick: () => onChange(item.id, _temp3),
+          children: "\xD7"
+        })]
+      }, item.id);
+      $[23] = columns;
+      $[24] = invalid;
+      $[25] = messages;
+      $[26] = onChange;
+      $[27] = t8;
+    } else {
+      t8 = $[27];
+    }
+    t7 = node.items.map(t8);
+    $[17] = columns;
+    $[18] = invalid;
+    $[19] = messages;
+    $[20] = node.items;
+    $[21] = onChange;
+    $[22] = t7;
+  } else {
+    t7 = $[22];
+  }
+  let t8;
+  if ($[28] !== t7) {
+    t8 = /*#__PURE__*/_jsx("ul", {
+      className: "vg-conditions__items",
+      children: t7
+    });
+    $[28] = t7;
+    $[29] = t8;
+  } else {
+    t8 = $[29];
+  }
+  let t9;
+  if ($[30] !== columns || $[31] !== node.id || $[32] !== onChange) {
+    t9 = () => {
+      const added = newCondition(columns);
+      onChange(node.id, current_0 => current_0.kind === "group" ? {
+        ...current_0,
+        items: [...current_0.items, added]
+      } : current_0);
+    };
+    $[30] = columns;
+    $[31] = node.id;
+    $[32] = onChange;
+    $[33] = t9;
+  } else {
+    t9 = $[33];
+  }
+  let t10;
+  if ($[34] !== messages.addCondition || $[35] !== t9) {
+    t10 = /*#__PURE__*/_jsx("button", {
+      type: "button",
+      className: "vg-button vg-button--small",
+      onClick: t9,
+      children: messages.addCondition
+    });
+    $[34] = messages.addCondition;
+    $[35] = t9;
+    $[36] = t10;
+  } else {
+    t10 = $[36];
+  }
+  let t11;
+  if ($[37] !== columns || $[38] !== node.id || $[39] !== node.op || $[40] !== onChange) {
+    t11 = () => {
+      const added_0 = {
+        kind: "group",
+        id: nodeId(),
+        op: node.op === "and" ? "or" : "and",
+        items: [newCondition(columns)]
+      };
+      onChange(node.id, current_1 => current_1.kind === "group" ? {
+        ...current_1,
+        items: [...current_1.items, added_0]
+      } : current_1);
+    };
+    $[37] = columns;
+    $[38] = node.id;
+    $[39] = node.op;
+    $[40] = onChange;
+    $[41] = t11;
+  } else {
+    t11 = $[41];
+  }
+  let t12;
+  if ($[42] !== messages.addGroup || $[43] !== t11) {
+    t12 = /*#__PURE__*/_jsx("button", {
+      type: "button",
+      className: "vg-button vg-button--small",
+      onClick: t11,
+      children: messages.addGroup
+    });
+    $[42] = messages.addGroup;
+    $[43] = t11;
+    $[44] = t12;
+  } else {
+    t12 = $[44];
+  }
+  let t13;
+  if ($[45] !== messages.removeGroup || $[46] !== node.id || $[47] !== onChange || $[48] !== top) {
+    t13 = !top && /*#__PURE__*/_jsx("button", {
+      type: "button",
+      className: "vg-button vg-button--small",
+      onClick: () => onChange(node.id, _temp4),
+      children: messages.removeGroup
+    });
+    $[45] = messages.removeGroup;
+    $[46] = node.id;
+    $[47] = onChange;
+    $[48] = top;
+    $[49] = t13;
+  } else {
+    t13 = $[49];
+  }
+  let t14;
+  if ($[50] !== t10 || $[51] !== t12 || $[52] !== t13) {
+    t14 = /*#__PURE__*/_jsxs("div", {
+      className: "vg-conditions__add",
+      children: [t10, t12, t13]
+    });
+    $[50] = t10;
+    $[51] = t12;
+    $[52] = t13;
+    $[53] = t14;
+  } else {
+    t14 = $[53];
+  }
+  let t15;
+  if ($[54] !== t1 || $[55] !== t14 || $[56] !== t5 || $[57] !== t6 || $[58] !== t8) {
+    t15 = /*#__PURE__*/_jsxs("fieldset", {
+      className: t1,
+      children: [t5, t6, t8, t14]
+    });
+    $[54] = t1;
+    $[55] = t14;
+    $[56] = t5;
+    $[57] = t6;
+    $[58] = t8;
+    $[59] = t15;
+  } else {
+    t15 = $[59];
+  }
+  return t15;
+}
+
+/**
+ * The content of the toolbar's conditions menu (§6.2.1 of the specification): every condition of the plan, those
+ * across columns included, as groups of conditions that all hold or one of which holds, nested. It reads `where`
+ * when it opens, and applying dispatches `filter.set`, which keeps the search. Expressions that it does not take
+ * apart are shown as formulas and kept, or removed. The toolbar loads it when the menu first opens.
+ */
+function _temp4() {
+  return null;
+}
+function _temp3() {
+  return null;
+}
+export default function ConditionsPanel(t0) {
+  const $ = _c(39);
+  const {
+    close
+  } = t0;
+  const store = useGridStore();
+  const {
+    messages
+  } = use(LocaleContext);
+  const table = useGridSelector(_temp5);
+  const plan = useGridSelector(_temp6);
+  let t1;
+  if ($[0] !== store) {
+    t1 = () => readConditions(store.getSnapshot().document.plan?.where);
+    $[0] = store;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const [draft, setDraft] = useState(t1);
+  const [invalid, setInvalid] = useState(null);
+  const [error, setError] = useState(null);
+  const [pending, startApply] = useTransition();
+  if (!table) {
+    return null;
+  }
+  let t2;
+  if ($[2] !== plan || $[3] !== table) {
+    t2 = rowColumns(plan, table);
+    $[2] = plan;
+    $[3] = table;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  const columns = t2;
+  let t3;
+  if ($[5] !== close || $[6] !== columns || $[7] !== messages.invalidCondition || $[8] !== store) {
+    t3 = group => {
+      let where;
+      ;
+      try {
+        where = writeConditions(group, columns);
+      } catch (t4) {
+        const failure = t4;
+        if (!(failure instanceof ConditionError)) {
+          throw failure;
+        }
+        setInvalid(failure.node);
+        setError(messages.invalidCondition);
+        return;
+      }
+      startApply(async () => {
+        const outcome = await store.dispatch({
+          command: "filter.set",
+          where
+        });
+        if (!outcome.ok) {
+          setError(outcome.error.message);
+          return;
+        }
+        setInvalid(null);
+        setError(null);
+        close();
+      });
+    };
+    $[5] = close;
+    $[6] = columns;
+    $[7] = messages.invalidCondition;
+    $[8] = store;
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  const apply = t3;
+  let t4;
+  if ($[10] !== apply || $[11] !== draft) {
+    t4 = event => {
+      event.preventDefault();
+      apply(draft);
+    };
+    $[10] = apply;
+    $[11] = draft;
+    $[12] = t4;
+  } else {
+    t4 = $[12];
+  }
+  let t5;
+  if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = (target, change) => setDraft(current => changed(current, target, change));
+    $[13] = t5;
+  } else {
+    t5 = $[13];
+  }
+  let t6;
+  if ($[14] !== columns || $[15] !== draft || $[16] !== invalid || $[17] !== messages) {
+    t6 = /*#__PURE__*/_jsx(GroupBlock, {
+      top: true,
+      node: draft,
+      columns: columns,
+      invalid: invalid,
+      messages: messages,
+      onChange: t5
+    });
+    $[14] = columns;
+    $[15] = draft;
+    $[16] = invalid;
+    $[17] = messages;
+    $[18] = t6;
+  } else {
+    t6 = $[18];
+  }
+  let t7;
+  if ($[19] !== error) {
+    t7 = error !== null && /*#__PURE__*/_jsx("p", {
+      role: "alert",
+      className: "vg-filter__error",
+      children: error
+    });
+    $[19] = error;
+    $[20] = t7;
+  } else {
+    t7 = $[20];
+  }
+  let t8;
+  if ($[21] !== apply || $[22] !== draft) {
+    t8 = () => apply({
+      ...draft,
+      items: []
+    });
+    $[21] = apply;
+    $[22] = draft;
+    $[23] = t8;
+  } else {
+    t8 = $[23];
+  }
+  let t9;
+  if ($[24] !== messages.clearConditions || $[25] !== pending || $[26] !== t8) {
+    t9 = /*#__PURE__*/_jsx("button", {
+      type: "button",
+      className: "vg-button",
+      disabled: pending,
+      onClick: t8,
+      children: messages.clearConditions
+    });
+    $[24] = messages.clearConditions;
+    $[25] = pending;
+    $[26] = t8;
+    $[27] = t9;
+  } else {
+    t9 = $[27];
+  }
+  let t10;
+  if ($[28] !== messages.apply || $[29] !== pending) {
+    t10 = /*#__PURE__*/_jsx("button", {
+      type: "submit",
+      className: "vg-button vg-button--primary",
+      disabled: pending,
+      children: messages.apply
+    });
+    $[28] = messages.apply;
+    $[29] = pending;
+    $[30] = t10;
+  } else {
+    t10 = $[30];
+  }
+  let t11;
+  if ($[31] !== t10 || $[32] !== t9) {
+    t11 = /*#__PURE__*/_jsxs("div", {
+      className: "vg-filter__actions",
+      children: [t9, t10]
+    });
+    $[31] = t10;
+    $[32] = t9;
+    $[33] = t11;
+  } else {
+    t11 = $[33];
+  }
+  let t12;
+  if ($[34] !== t11 || $[35] !== t4 || $[36] !== t6 || $[37] !== t7) {
+    t12 = /*#__PURE__*/_jsxs("form", {
+      onSubmit: t4,
+      children: [t6, t7, t11]
+    });
+    $[34] = t11;
+    $[35] = t4;
+    $[36] = t6;
+    $[37] = t7;
+    $[38] = t12;
+  } else {
+    t12 = $[38];
+  }
+  return t12;
+}
+function _temp6(snapshot_0) {
+  return snapshot_0.document.plan;
+}
+function _temp5(snapshot) {
+  return snapshot.table;
+}
+//# sourceMappingURL=conditions-menu.js.map