@spectric/ui 0.0.24 → 0.0.26

package/src/components/query_bar/querylanguage/outputTypes/toHTML.ts

@@ -1,4 +1,5 @@
 import { FieldTypes, GeospatialOperators, KueryNode } from "../..";
+import { LiteralTypeBuildNode } from "../kuery";
 import { wildcardSymbol } from "../kuery/node_types/wildcard";
 
 export const KQL_WILDCARD_SYMBOL = wildcardSymbol;
@@ -13,31 +14,32 @@ export type FunctionName =
   | "nested";
 const and = (node: KueryNode, fields?: FieldTypes[]) => {
   const children = node.arguments || [];
-  return (
+  let html =
     "<span class='and-expression'>" +
     children
       .map((child: KueryNode) => {
         return toHTML(child, fields);
       })
       .join(" AND ") +
-    "</span>"
-  );
-};
-const is = (node: KueryNode, fields?: FieldTypes[]) => {
-  var {
-    arguments: [fieldNameArg, valueArg, isPhrase],
-  } = node;
-  let operator = ":";
-  let value = toHTML(valueArg);
-  if (isPhrase.value) {
-    value = `"${value}"`;
-  }
-  let fieldName = toHTML(fieldNameArg);
-  if (fields && fields.find((f) => f.name === fieldName)?.type === "boolean") {
-    value = `<span class="value-constant">${valueArg.value}</span>`;
+    "</span>";
+  if (node.group !== undefined) {
+    try {
+      let { fieldName, values } = groupVariables(children);
+      let operator = ":";
+      if (fieldName === extractFieldName({ type: "literal", value: null })) {
+        //This is a multimatch search ("test","test1") are the values searched acrall all fields
+        fieldName = "";
+        operator = "";
+      }
+      return `<span class="and-expression">${fieldName}${operator}(${values.join(
+        " AND "
+      )})</span>`;
+    } catch (error) {
+      console.log(error);
+    }
+    return `( ${html} )`;
   }
-
-  return `<span class="is-expression"><span class="field-name">${fieldName}</span>${operator}<span class="expression-value">${value}</span></span>`;
+  return html;
 };
 
 const or = (node: KueryNode, fields?: FieldTypes[]) => {
@@ -47,13 +49,105 @@ const or = (node: KueryNode, fields?: FieldTypes[]) => {
       return toHTML(child, fields);
     })
     .join(" OR ");
-  return `<span class="or-expression">${args}</span>`;
+  let html = `<span class="or-expression">${args}</span>`;
+  if (node.group !== undefined) {
+    try {
+      let { fieldName, values } = groupVariables(children);
+      let operator = ":";
+      if (fieldName === extractFieldName({ type: "literal", value: null })) {
+        //This is a multimatch search ("test","test1") are the values searched acrall all fields
+        fieldName = "";
+        operator = "";
+      }
+      return `<span class="or-expression">${fieldName}${operator}(${values.join(
+        " OR "
+      )})</span>`;
+    } catch (error) {
+      console.log(error);
+    }
+    return `( ${html} )`;
+  }
+
+  return html;
+};
+
+const extractLiteralValue = (
+  fieldName: string,
+  valueArg: LiteralTypeBuildNode,
+  isPhrase: LiteralTypeBuildNode,
+  fields?: FieldTypes[]
+) => {
+  let value = toHTML(valueArg);
+  if (isPhrase.value) {
+    value = `"${value}"`;
+  }
+  if (fields && fields.find((f) => f.name === fieldName)?.type === "boolean") {
+    value = `<span class="value-constant">${valueArg.value}</span>`;
+  }
+  return `<span class="expression-value">${value}</span>`;
+};
+const extractFieldName = (fieldNameArg: any) => {
+  let fieldName = toHTML(fieldNameArg);
+  return `<span class="field-name">${fieldName}</span>`;
+};
+const is = (node: KueryNode, fields?: FieldTypes[]) => {
+  var {
+    arguments: [fieldNameArg, valueArg, isPhrase],
+  } = node;
+  let operator = ":";
+  let fieldName = extractFieldName(fieldNameArg);
+  if (fieldName === extractFieldName({ type: "literal", value: null })) {
+    //This is a multimatch search ("test","test1") are the values searched acrall all fields
+    fieldName = "";
+    operator = "";
+  }
+  let value = extractLiteralValue(fieldName, valueArg, isPhrase, fields);
+  return `<span class="is-expression">${fieldName}${operator}${value}</span>`;
 };
+
 const not = (node: KueryNode, fields?: FieldTypes[]) => {
   const [argument] = node.arguments;
   return `<span class="not-expression">not ${toHTML(argument, fields)}</span>`;
 };
 
+const groupVariables = (
+  nodes: KueryNode[],
+  fieldName: string | undefined = undefined,
+  fields?: FieldTypes[]
+) => {
+  let values: string[] = [];
+  if (!fieldName && nodes[0].function == "is") {
+    fieldName = extractFieldName(nodes[0].arguments[0]);
+  }
+  if (!fieldName) {
+    throw Error(
+      "Cannot group variables because they don't have a groupable field"
+    );
+  }
+  for (let node of nodes) {
+    var {
+      arguments: [fieldNameArg, valueArg, isPhrase],
+    } = node;
+    if (node.function == "is") {
+      if (extractFieldName(fieldNameArg) !== fieldName) {
+        throw Error(
+          "Cannot group variables because they aren't for the same field"
+        );
+      }
+      let value = extractLiteralValue(fieldName, valueArg, isPhrase, fields);
+      values.push(value);
+    } else if (node.function === "or" || node.function === "and") {
+      let grouped = groupVariables(node.arguments, fieldName, fields);
+      values.push(...grouped.values);
+    } else {
+      throw Error(
+        "Cannot group variables because they aren't for the same field"
+      );
+    }
+  }
+  return { fieldName, values };
+};
+
 const AST_TO_CQL = {
   gt: ">",
   lt: "<",
@@ -70,7 +164,11 @@ const range = (node: KueryNode) => {
     value = `${value}`;
   }
   //double check that its a number else quote it
-  if (Number.isNaN(parseFloat(value))) {
+  //parseFloat("2025-Not a float") parses as a float... so we double check with regex
+  if (
+    Number.isNaN(parseFloat(value)) ||
+    !value.match(/^[-+]?([0-9]*\.[0-9]+|[0-9]+(\.[0-9]*)?)$/)
+  ) {
     value = `<span class="expression-value">"${value}"</span>`;
   }
   return `<span class="range-expression"><span class="field-name">${fieldNameArg.value}</span> ${opsign} <span class="field-numeric">${value}</span></span>`;
@@ -90,8 +188,6 @@ const geospatial = (node: KueryNode) => {
   console.log(fieldName, operator, value);
   let opsine = GeospatialOperators[operator].value;
   return `<span><span class="field-name">${fieldName.value}</span> ${opsine}<span title="${value.value}">--GEOMETRY--</span></span>`;
-  if (operator === "within") return `WITHIN(${fieldName.value},${value.value})`;
-  throw Error(`Unsupported GEO Operator:${operator}`);
 };
 export const functions = {
   is,

package/src/components/table/table.css

@@ -1,99 +1,109 @@
-spectric-table{
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    line-height: 1;
+spectric-table {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  line-height: 1;
 }
-spectric-table .table-wrapper{
-    overflow: auto;
-    flex-grow: 1;
-    position: relative;
+spectric-table .table-wrapper {
+  overflow: auto;
+  flex-grow: 1;
+  position: relative;
 }
-spectric-table tr{
-    text-align: center;
+spectric-table tr {
+  text-align: center;
 }
 
-spectric-table tr.odd{
-    background-color: color-mix(in srgb, var(--spectric-primary, #1ea7fd), transparent 90%);
-}
-spectric-table spectric-table-virtual-body tr:hover{
-    background-color: color-mix(in srgb, var(--spectric-primary, #1ea7fd), transparent 70%)
+spectric-table tr.odd {
+  background-color: color-mix(
+    in srgb,
+    var(--spectric-primary, #1ea7fd),
+    transparent 90%
+  );
+}
+spectric-table spectric-table-virtual-body tr:hover {
+  background-color: color-mix(
+    in srgb,
+    var(--spectric-primary, #1ea7fd),
+    transparent 70%
+  );
+}
+spectric-table spectric-table-virtual-body tr.virtual-scroll-spacer:hover {
+  background-color: unset;
 }
 
 spectric-table spectric-table-virtual-body tr {
-    height: var(--rowHeight);
+  height: var(--rowHeight);
 }
-spectric-table td{
-   padding:1px;
-   border: 1px solid transparent;
+spectric-table td {
+  padding: 1px;
+  border: 1px solid transparent;
 }
-spectric-table spectric-table-virtual-body td{
-   height: var(--rowHeight);
+spectric-table spectric-table-virtual-body td {
+  height: var(--rowHeight);
 }
 
-spectric-table div[role="table"]{
-    display: table;
-    min-width: 100%;
+spectric-table div[role="table"] {
+  display: table;
+  min-width: 100%;
 }
 
-spectric-table-cell{
-    display: contents;
-    vertical-align: middle;
+spectric-table-cell {
+  display: contents;
+  vertical-align: middle;
 }
-spectric-table-cell td{
-    position: relative;
+spectric-table-cell td {
+  position: relative;
 }
 
 spectric-table td:hover:has(.hasActions) {
-    border: 1px solid var(--spectric-primary, #1ea7fd);
+  border: 1px solid var(--spectric-primary, #1ea7fd);
 }
 
-spectric-table-cell .table-cell-actions{
-    position: absolute;
-    display: flex;
-    width: 100%;
-    flex-direction: row-reverse;
-    visibility: hidden;
-    z-index: 1;
+spectric-table-cell .table-cell-actions {
+  position: absolute;
+  display: flex;
+  width: 100%;
+  flex-direction: row-reverse;
+  visibility: hidden;
+  z-index: 1;
 }
-spectric-table-cell .table-cell-actions.tiny{
-    top: -10px;
+spectric-table-cell .table-cell-actions.tiny {
+  top: -10px;
 }
-spectric-table-cell .table-cell-actions.xxsmall{
-    top: -16px;
+spectric-table-cell .table-cell-actions.xxsmall {
+  top: -16px;
 }
-spectric-table-cell td:hover .table-cell-actions{
-    visibility: unset;
+spectric-table-cell td:hover .table-cell-actions {
+  visibility: unset;
 }
-spectric-table .table-checkbox-single spectric-button{
-    --button-border-radius: 50%;
+spectric-table .table-checkbox-single spectric-button {
+  --button-border-radius: 50%;
 }
-spectric-input.table-checkbox-single[checked] spectric-button{
-    --text-on-color: transparent;
-    border-radius: 50%;
-    position: relative;
+spectric-input.table-checkbox-single[checked] spectric-button {
+  --text-on-color: transparent;
+  border-radius: 50%;
+  position: relative;
 }
 spectric-input.table-checkbox-single[checked] spectric-button::before {
-    position: absolute;
-    content: " ";
-    height: 50%;
-    width: 50%;
-    left: 25%;
-    top: 25%;
-    border-radius: 50%;
-    z-index: 1;
-    box-shadow: 0px 0px 0px 4px var(--input-color);
+  position: absolute;
+  content: " ";
+  height: 50%;
+  width: 50%;
+  left: 25%;
+  top: 25%;
+  border-radius: 50%;
+  z-index: 1;
+  box-shadow: 0px 0px 0px 4px var(--input-color);
 }
 
-
-spectric-table .cell-contents{
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: var(--lineClamp,1);
-    -webkit-box-pack: center;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-size: var(--fontSize);
-    line-height: calc(var(--lineClamp) * var(--fontSize));
-    height: var(--rowHeight);
-}
+spectric-table .cell-contents {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--lineClamp, 1);
+  -webkit-box-pack: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: var(--fontSize);
+  line-height: calc(var(--lineClamp) * var(--fontSize));
+  height: var(--rowHeight);
+}

package/src/components/table/table.ts

@@ -21,6 +21,7 @@ export type { TableProps, TableEvents };
 export type DomRenderable =
   | HTMLElement
   | TemplateResult
+  | TemplateResult<any>[]
   | string
   | number
   | null
@@ -72,7 +73,7 @@ export type ColumnSettings<T> = {
   render?: (
     row: T,
     index: number,
-    table: SpectricTableElement<T>
+    table: SpectricTableElement<T>,
   ) => DomRenderable;
   /**
    * Custom comparator function for sorting
@@ -98,7 +99,7 @@ export type DomEvent<T> = Event & {
 
 export const TD_BorderAndPadding = 4;
 const TABLE_CREATED_SELECTION_COLUMN = Symbol(
-  "spectric-table-selection-column"
+  "spectric-table-selection-column",
 );
 /**
  * React example
@@ -134,6 +135,14 @@ export class SpectricTableElement<T = any>
   @property({ type: Number, reflect: true })
   fontSize: number = 16;
 
+  /**
+   * Function that allows you to set the row class name programatically
+   */
+  @property({ type: Object, attribute: false })
+  getRowClass = (_row: T, index: number) => {
+    return index % 2 === 0 ? "odd" : "";
+  };
+
   protected cellActionButtonSize: ButtonSizesTypes = "xxsmall";
   getCellActionButtonSize() {
     return this.cellActionButtonSize;
@@ -143,7 +152,7 @@ export class SpectricTableElement<T = any>
       //let sorts = props.columns.filter(column => column.sortable && column.sortDirection && column.sortDirection !== TableSortDirection.none)
       let sorts = (props.sortOrder || []).map(
         (key) =>
-          props.columns.find((col) => col.key === key) as ColumnSettings<T>
+          props.columns.find((col) => col.key === key) as ColumnSettings<T>,
       );
       let rows = [...data]; // Need to copy the array to prevent mutating the ordering of the original data
       if (sorts.length) {
@@ -190,7 +199,7 @@ export class SpectricTableElement<T = any>
     this.dispatchEvent(
       new CustomEvent<PaginationChangeProps>("paginationChange", {
         detail: e.detail,
-      })
+      }),
     );
     this._emitChange();
   };
@@ -236,7 +245,7 @@ export class SpectricTableElement<T = any>
     this.dispatchEvent(
       new CustomEvent<TableDataOptions<T>>("change", {
         detail: { pagination, columns, sortOrder },
-      })
+      }),
     );
   };
   //@ts-ignore
@@ -254,10 +263,11 @@ export class SpectricTableElement<T = any>
     // Because lit reuses dom elements for speed/effeciency it wont update unless the props are a different object.
     //  So we set the selection colum to a "new object" to force the rerender
     let index = this.columns.findIndex(
-      (col) => col[TABLE_CREATED_SELECTION_COLUMN]
+      (col) => col[TABLE_CREATED_SELECTION_COLUMN],
     );
     if (index !== -1) {
       this.columns[index] = { ...this.selectColumnConfig };
+      this.columns = [...this.columns];
     }
   }
   setSelected(selected: T[]) {
@@ -268,13 +278,11 @@ export class SpectricTableElement<T = any>
     return this.selected;
   }
   deselectAll() {
-    this.selected = [];
-    this.forceRefreshofSelectionColumn();
+    this.setSelected([]);
     this.dispatchEvent(new CustomEvent("selected", { detail: this.selected }));
   }
   selectAll() {
-    this.selected = [...this.data];
-    this.forceRefreshofSelectionColumn();
+    this.setSelected([...this.data]);
     this.dispatchEvent(new CustomEvent("selected", { detail: this.selected }));
   }
   async scrollToRow(row: T | number) {
@@ -294,7 +302,7 @@ export class SpectricTableElement<T = any>
       });
       //Wait for the smooth scroll to complete. Scroll to doesn't return a promise so we must manually check periodically
       for (let wait = 0; wait < 100; wait++) {
-        await new Promise((resolve) => setTimeout(resolve, 10));
+        await new Promise((resolve) => requestAnimationFrame(resolve));
         if (wrapper.scrollTop == scrollPosition) {
           console.log("Scroll complete");
           break;
@@ -305,12 +313,12 @@ export class SpectricTableElement<T = any>
         requestAnimationFrame(() => {
           let rows = [...body.querySelectorAll("tr")];
           rows = rows.filter(
-            (row) => row.querySelector("spectric-table-cell")?.index === index
+            (row) => row.querySelector("spectric-table-cell")?.index === index,
           );
           if (rows.length) {
             rows[0].animate(
               [{ backgroundColor: "red" }, { backgroundColor: "unset" }],
-              { duration: 200, iterations: 5 }
+              { duration: 200, iterations: 5 },
             );
           }
         });
@@ -337,11 +345,14 @@ export class SpectricTableElement<T = any>
     allowResize: false,
     filterable: false,
     width: 39,
-    title: (table) => {
-      return table.select === "multi"
+    title: (table: SpectricTableElement<T>) => {
+      return table.select === TableSelectOptions.multi
         ? html`<spectric-input
             variant="checkbox"
             @change=${table._handleSelectAllChange}
+            ${spreadProps({
+              checked: table.selected.length === table.data.length,
+            })}
             .helperText=${"Select All"}
           ></spectric-input>`
         : null;
@@ -366,12 +377,12 @@ export class SpectricTableElement<T = any>
           if (e.target.checked) {
             if (table.select === "single") {
               table.selected = [];
-              table.forceRefreshofSelectionColumn();
             }
             table.selected.push(row);
           }
+          table.setSelected([...table.selected]);
           table.dispatchEvent(
-            new CustomEvent("selected", { detail: [...table.selected] })
+            new CustomEvent("selected", { detail: [...table.selected] }),
           );
         }}
       ></spectric-input>`;
@@ -395,10 +406,29 @@ export class SpectricTableElement<T = any>
       }
     }
     if (changedProperties.has("select")) {
-      if (this.select === "single" && this.selected.length > 1) {
-        this.selected = [this.selected[0]];
+      let selectIndex = this.columns.findIndex(
+        (col) => col[TABLE_CREATED_SELECTION_COLUMN],
+      );
+      if (this.select !== TableSelectOptions.none) {
+        this.forceRefreshofSelectionColumn();
+        if (!this.columns.find((col) => col[TABLE_CREATED_SELECTION_COLUMN])) {
+          this.columns.unshift(this.selectColumnConfig);
+          this.columns = [...this.columns];
+        }
+      } else {
+        if (selectIndex !== -1) {
+          this.columns.splice(selectIndex, 1);
+          this.columns = [...this.columns];
+          this.setSelected([]);
+        }
+      }
+      if (
+        this.select === TableSelectOptions.single &&
+        this.selected.length > 1
+      ) {
+        this.setSelected([this.selected[0]]);
         this.dispatchEvent(
-          new CustomEvent("selected", { detail: [...this.selected] })
+          new CustomEvent("selected", { detail: [this.selected[0]] }),
         );
       }
     }

package/src/components/table/virtualBody.ts

@@ -1,4 +1,4 @@
-import { html } from "lit";
+import { html, PropertyValues } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import {
   HTMLElementTagWithEvents,
@@ -56,10 +56,10 @@ export class TableVirtualBodyElement<T>
         }
         lastScroll = scrollTop;
         this.startIndex = Math.floor(scrollTop / this.rowHeight);
-      }
+      },
     );
   }
-  protected updated(): void {
+  protected update(changedProperties: PropertyValues): void {
     if (this.columnsMeasured === false) {
       let tr = this.querySelector("tr");
       let cells = tr?.querySelectorAll("spectric-table-cell td");
@@ -78,7 +78,9 @@ export class TableVirtualBodyElement<T>
         }
       }
     }
+    super.update(changedProperties);
   }
+
   protected createRenderRoot(): HTMLElement | DocumentFragment {
     return this;
   }
@@ -86,12 +88,12 @@ export class TableVirtualBodyElement<T>
     let totalRows = this.data.length;
     let buffer = 10; // Have a buffer of rows to prevent column jitter
     let headerHeight = this.table.querySelector(
-      "spectric-table-header"
+      "spectric-table-header",
     )!.clientHeight;
     let viewport = this.table.querySelector(".table-wrapper")!;
     let startIndex = Math.max(this.startIndex, 0);
     const rowsThatFit = Math.ceil(
-      (viewport.clientHeight - headerHeight) / this.rowHeight
+      (viewport.clientHeight - headerHeight) / this.rowHeight,
     );
     const endIndex = Math.min(startIndex + rowsThatFit + buffer, totalRows);
     const visibleRows = endIndex - startIndex;
@@ -132,19 +134,20 @@ export class TableVirtualBodyElement<T>
       >
         ${repeat(
           this.data.slice(Math.max(startIndex, 0), endIndex),
-          (row, index) => html` <tr
-            class="${(index + startIndex) % 2 === 0 ? "odd" : ""}"
-          >
-            ${repeat(this.columns, (col) => {
-              return html`<spectric-table-cell
-                .column=${col}
-                .row=${row}
-                .index=${index + startIndex}
-                .columns=${this.columns}
-                .table=${this.table}
-              ></spectric-table-cell>`;
-            })}
-          </tr>`
+          (row, index) =>
+            html` <tr
+              class="${this.table.getRowClass(row, index + startIndex)}"
+            >
+              ${repeat(this.columns, (col) => {
+                return html`<spectric-table-cell
+                  .column=${col}
+                  .row=${row}
+                  .index=${index + startIndex}
+                  .columns=${this.columns}
+                  .table=${this.table}
+                ></spectric-table-cell>`;
+              })}
+            </tr>`,
         )}
       </div>
       <tbody>

package/src/stories/QueryBar.stories.ts

@@ -9,17 +9,18 @@ import { html } from "lit";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { useArgs } from "@storybook/client-api";
 import { filterByColumn } from "./fixtures/data";
+import { createRef, ref } from "lit/directives/ref.js";
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-var code = "";
 
 const meta = {
   title: "UI/Query",
   tags: ["autodocs"],
   component: "spectric-query",
   render: (args) => {
+    const code = createRef<HTMLPreElement>();
     const [_, updateArgs] = useArgs();
     const fakevalues = async (field, text) => {
-      if (!args.fields.find((f) => f.name === field)) {
+      if (!args.fields || !args.fields.find((f) => f.name === field)) {
         return [];
       }
       return filterByColumn(field, text);
@@ -30,16 +31,15 @@ const meta = {
         .getValuesForField=${fakevalues}
         value=${ifDefined(args.value)}
         @change=${(e: CustomEvent<any>) => {
-          code = e.detail;
+          if (code.value) {
+            code.value.innerText = JSON.stringify(e.detail, null, 2);
+          }
           updateArgs({ ...args });
         }}
-        outputLanguage=${args.outputLanguage}
+        .outputLanguage=${args.outputLanguage}
       >
       </spectric-query>
-      <pre>
-    ${JSON.stringify(code, null, 2)}
-  </pre
-      >
+      <pre ${ref(code)}></pre>
     `;
   },
   argTypes: {
@@ -50,6 +50,7 @@ const meta = {
   },
   args: {
     outputLanguage: "toDSL",
+    value: "",
     fields: [
       { name: "test", type: "string" },
       { name: "test_num", type: "number" },