@spectric/ui 0.0.21 → 0.0.23

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

@@ -1,13 +1,21 @@
 /* eslint-disable @kbn/eslint/require-license-header */
-import { FieldTypes, KueryNode } from '../..';
-import { wildcardSymbol } from '../kuery/node_types/wildcard';
+import { FieldTypes, KueryNode } from "../..";
+import { wildcardSymbol } from "../kuery/node_types/wildcard";
+import { wktToGeoJSON } from "@terraformer/wkt";
 
 export const KQL_WILDCARD_SYMBOL = wildcardSymbol;
-export const KQL_NODE_TYPE_WILDCARD = 'wildcard';
-export type FunctionName = 'is' | 'and' | 'or' | 'not' | 'range' | 'exists' | 'nested';
+export const KQL_NODE_TYPE_WILDCARD = "wildcard";
+export type FunctionName =
+  | "is"
+  | "and"
+  | "or"
+  | "not"
+  | "range"
+  | "exists"
+  | "nested";
 const and = (node: KueryNode) => {
   const children = node.arguments || [];
-  let query: any = { "$and": children.map((c: KueryNode) => toMongo(c)) }
+  let query: any = { $and: children.map((c: KueryNode) => toMongo(c)) };
 
   return query;
 };
@@ -17,62 +25,65 @@ const is = (node: KueryNode) => {
   } = node;
 
   let value = toMongo(valueArg);
-  const isExistsQuery = valueArg.type === 'wildcard' && (valueArg.value as any) === '@kuery-wildcard@';
+  const isExistsQuery =
+    valueArg.type === "wildcard" &&
+    (valueArg.value as any) === "@kuery-wildcard@";
   if (isExistsQuery) {
-    return exists(node)
+    return exists(node);
   }
-  let query: any = {}
-  query[toMongo(fieldNameArg)] = { "$eq": value }
+  let query: any = {};
+  query[toMongo(fieldNameArg)] = { $eq: value };
   return query;
 };
 
 const or = (node: KueryNode) => {
   const children = node.arguments || [];
   return {
-    "$or": children
-      .map((child: KueryNode) => {
-        return toMongo(child);
-      })
-  }
-
+    $or: children.map((child: KueryNode) => {
+      return toMongo(child);
+    }),
+  };
 };
 const not = (node: KueryNode) => {
   const [fieldNameArg] = node.arguments;
   let query: any = {};
-  query = { "$ne": toMongo(fieldNameArg) }
+  query = { $ne: toMongo(fieldNameArg) };
   return query;
 };
 
 const AST_TO_CQL = {
-  gt: '$gt',
-  lt: '$lt',
-  gte: '$gte',
-  lte: '$lte',
+  gt: "$gt",
+  lt: "$lt",
+  gte: "$gte",
+  lte: "$lte",
 };
 const range = (node: KueryNode) => {
   const [fieldNameArg, operator] = node.arguments;
-  let valueArg = operator.value
+  let valueArg = operator.value;
   // @ts-ignore
   const opsign = AST_TO_CQL[operator.name];
   let value = toMongo(valueArg);
 
-  let query: any = {}
-  query[fieldNameArg.value] = {}
-  query[fieldNameArg.value][opsign] = value
-  return query
-
-
+  let query: any = {};
+  query[fieldNameArg.value] = {};
+  query[fieldNameArg.value][opsign] = value;
+  return query;
 };
 const exists = (node: KueryNode) => {
   const [fieldNameArg] = node.arguments;
-  return { [toMongo(fieldNameArg)]: { $ne: null } }
+  return { [toMongo(fieldNameArg)]: { $ne: null } };
 };
 
 const nested = (node: KueryNode) => {
-
-  console.warn("TODO Implement nested search", node)
-  return ""
-}
+  console.warn("TODO Implement nested search", node);
+  return "";
+};
+const geospatial = (node: KueryNode) => {
+  const [fieldName, operator, value] = node.arguments;
+  if (operator == "within") {
+    return { [fieldName.value]: { $geoWithin: wktToGeoJSON(value.value) } };
+  }
+};
 export const functions = {
   is,
   and,
@@ -80,7 +91,8 @@ export const functions = {
   not,
   range,
   exists,
-  nested
+  nested,
+  geospatial,
 };
 const nodeTypes = {
   function: (node: KueryNode) => {
@@ -92,7 +104,7 @@ const nodeTypes = {
   },
   wildcard: (node: KueryNode) => {
     const { value } = node;
-    return `/${value.split(KQL_WILDCARD_SYMBOL).join('.*')}/`;
+    return `/${value.split(KQL_WILDCARD_SYMBOL).join(".*")}/`;
   },
 };
 

package/src/components/symbols.ts

@@ -0,0 +1,6 @@
+export const EDIT = "🖉";
+export const DELETE = "🗑";
+export const ARROW_LEFT = "🠈";
+export const ARROW_RIGHT = "🠊";
+export const ARROW_UP = "🠉";
+export const ARROW_DOWN = "🠋";

package/src/components/table/__tests__/table.spec.ts

@@ -28,7 +28,7 @@ test.beforeEach(async ({ page }) => {
 test.describe("Spectric Table Tests", () => {
   test("MultiSelect Table Select All/Deselect All ", async ({ page }) => {
     await page.goto(
-      "http://localhost:6006/iframe.html?globals=&args=&id=spectric-ui-components-ui-table--milti-select&viewMode=story"
+      "http://localhost:6006/iframe.html?globals=&args=&id=spectric-ui-components-ui-table--multi-select&viewMode=story"
     );
     let tableLocator = page.locator("spectric-table");
     tableLocator.waitFor();
@@ -149,7 +149,7 @@ test.describe("Spectric Table Tests", () => {
     page,
   }) => {
     await page.goto(
-      "http://localhost:6006/iframe.html?globals=&args=&id=spectric-ui-components-ui-table--milti-select&viewMode=story"
+      "http://localhost:6006/iframe.html?globals=&args=&id=spectric-ui-components-ui-table--multi-select&viewMode=story"
     );
     let tableLocator = page.locator("spectric-table");
     await tableLocator.waitFor();

package/src/components/table/cell.ts

@@ -79,7 +79,11 @@ export class TableCellElement<T> extends LitElement implements CellProps<T> {
       column: this.column,
     });
   };
-  _displayTooltip = () => {
+  _displayOverflowTooltip = () => {
+    if (this.column.disableCellOverflowTooltip) {
+      this.overflow = null;
+      return;
+    }
     let div = this.querySelector("div.cell-contents");
     let span = this.querySelector("span");
     if (div && span) {
@@ -90,7 +94,7 @@ export class TableCellElement<T> extends LitElement implements CellProps<T> {
         divBounds.width * divBounds.height
       ) {
         console.log(
-          "We need to show a tooltip witht he content because we are overflowing"
+          "We need to show a tooltip with the content because we are overflowing"
         );
         this.overflow = this.getRenderedValue();
         this.updateComplete.then(() => {
@@ -118,16 +122,16 @@ export class TableCellElement<T> extends LitElement implements CellProps<T> {
   protected render(): unknown {
     let rendered = this.getRenderedValue();
     let classes = ["cell-contents"];
-    if (this.column.filterable) {
-      classes.push("filterable");
+    if (this.column.filterable || this.column.cellActions?.length) {
+      classes.push("hasActions");
     }
-
+    const buttonSize = this.table.getCellActionButtonSize();
     let filterButtons = cache(
       this.column.filterable
-        ? html`<div class="table-cell-actions">
+        ? html`
             <spectric-button
               @click=${this._handleFilterOut}
-              size="tiny"
+              .size=${buttonSize}
               variant="text"
               icon
               tooltip="Filter Out Value"
@@ -135,15 +139,26 @@ export class TableCellElement<T> extends LitElement implements CellProps<T> {
             >
             <spectric-button
               @click=${this._handleFilterFor}
-              size="tiny"
+              .size=${buttonSize}
               variant="text"
               icon
               tooltip="Filter For Value"
               >+</spectric-button
             >
-          </div>`
+          `
         : null
     );
+
+    let actions = (this.column.cellActions || []).map((action) => {
+      return html`<spectric-button
+        @click=${() => action.onClick(this.row, this.column)}
+        .size=${buttonSize}
+        variant="text"
+        icon
+        .tooltip=${action.tooltip}
+        >${action.icon}</spectric-button
+      >`;
+    });
     this.styleRules = {
       width: this.column.width ? this.column.width + "px" : null,
       whiteSpace: this.column.whiteSpace || null,
@@ -151,9 +166,11 @@ export class TableCellElement<T> extends LitElement implements CellProps<T> {
     return html`
       <td
         style=${styleMap(this.styleRules)}
-        @mouseenter=${this._displayTooltip}
+        @mouseenter=${this._displayOverflowTooltip}
       >
-        ${filterButtons}
+        <div class="table-cell-actions ${buttonSize}">
+          ${actions} ${filterButtons}
+        </div>
         <div class=${classes.join(" ")}>
           ${this.overflow
             ? html`<spectric-tooltip .text=${this.overflow}></spectric-tooltip>`

package/src/components/table/header.ts

@@ -14,6 +14,7 @@ import {
   TableSortDirection,
 } from "./table";
 import { DisposableElement } from "../../classes";
+import { ARROW_DOWN, ARROW_UP } from "../symbols";
 
 interface HeaderProps<T> {
   columns: ColumnSettings<T>[];
@@ -125,9 +126,9 @@ export class TableHeaderElement<T>
       : "";
     let sortDirection =
       column.sortDirection === TableSortDirection.ascending
-        ? `🠉`
+        ? ARROW_UP
         : column.sortDirection == TableSortDirection.descending
-        ? `🠋`
+        ? ARROW_DOWN
         : ``;
     let sortClass = column.sortDirection || TableSortDirection.none;
     let resizable = column.allowResize || column.allowResize === undefined;

package/src/components/table/table.css

@@ -20,14 +20,16 @@ spectric-table spectric-table-virtual-body tr:hover{
     background-color: color-mix(in srgb, var(--spectric-primary, #1ea7fd), transparent 70%)
 }
 
-spectric-table tr {
+spectric-table spectric-table-virtual-body tr {
     height: var(--rowHeight);
 }
 spectric-table td{
-   height: var(--rowHeight);
    padding:1px;
    border: 1px solid transparent;
 }
+spectric-table spectric-table-virtual-body td{
+   height: var(--rowHeight);
+}
 
 spectric-table div[role="table"]{
     display: table;
@@ -42,7 +44,7 @@ spectric-table-cell td{
     position: relative;
 }
 
-spectric-table td:hover:has(.filterable) {
+spectric-table td:hover:has(.hasActions) {
     border: 1px solid var(--spectric-primary, #1ea7fd);
 }
 
@@ -52,9 +54,14 @@ spectric-table-cell .table-cell-actions{
     width: 100%;
     flex-direction: row-reverse;
     visibility: hidden;
-    top: -10px;
     z-index: 1;
 }
+spectric-table-cell .table-cell-actions.tiny{
+    top: -10px;
+}
+spectric-table-cell .table-cell-actions.xxsmall{
+    top: -16px;
+}
 spectric-table-cell td:hover .table-cell-actions{
     visibility: unset;
 }

package/src/components/table/table.ts

@@ -14,6 +14,7 @@ import { spreadProps } from "../../utils/spread";
 import { PaginationChangeProps, PaginationProps } from "../pagination";
 import { FilterEvent } from "./cell";
 import { createSortChain } from "./sorting";
+import { ButtonSizesTypes } from "../Button";
 
 export type { TableProps, TableEvents };
 
@@ -41,6 +42,11 @@ export enum TableSortDirection {
   none = "none",
 }
 export type TableSortDirectionTypes = `${TableSortDirection}`;
+export type CellAction<T> = {
+  tooltip: DomRenderable;
+  icon: DomRenderable;
+  onClick: (row: T, column: ColumnSettings<T>) => void;
+};
 export type ColumnSettings<T> = {
   [TABLE_CREATED_SELECTION_COLUMN]?: boolean;
   width?: number;
@@ -53,6 +59,8 @@ export type ColumnSettings<T> = {
   sortable?: boolean;
   sortDirection?: TableSortDirectionTypes;
   filterable?: boolean;
+  disableCellOverflowTooltip?: boolean;
+  cellActions?: CellAction<T>[];
   title?: DomRenderable | ((table: SpectricTableElement<T>) => DomRenderable);
   /**
    * Key to used for getting data from an object for a cell
@@ -125,6 +133,11 @@ export class SpectricTableElement<T = any>
    */
   @property({ type: Number, reflect: true })
   fontSize: number = 16;
+
+  protected cellActionButtonSize: ButtonSizesTypes = "xxsmall";
+  getCellActionButtonSize() {
+    return this.cellActionButtonSize;
+  }
   static getDefaultDataSorterAndPaginatior<T>(data: T[]) {
     return (props: TableDataOptions<T>) => {
       //let sorts = props.columns.filter(column => column.sortable && column.sortDirection && column.sortDirection !== TableSortDirection.none)
@@ -237,7 +250,7 @@ export class SpectricTableElement<T = any>
   protected createRenderRoot(): HTMLElement | DocumentFragment {
     return this;
   }
-  forceRefreshofSelectionColumn() {
+  private forceRefreshofSelectionColumn() {
     // 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(
@@ -251,6 +264,9 @@ export class SpectricTableElement<T = any>
     this.selected = selected;
     this.forceRefreshofSelectionColumn();
   }
+  getSelected() {
+    return this.selected;
+  }
   deselectAll() {
     this.selected = [];
     this.forceRefreshofSelectionColumn();
@@ -261,6 +277,53 @@ export class SpectricTableElement<T = any>
     this.forceRefreshofSelectionColumn();
     this.dispatchEvent(new CustomEvent("selected", { detail: this.selected }));
   }
+  async scrollToRow(row: T | number) {
+    let index: number = -1;
+    if (Number.isInteger(row)) {
+      index = row as number;
+    } else {
+      index = this.data.findIndex((value) => value === row);
+    }
+    if (index !== -1) {
+      let body = this.querySelector("spectric-table-virtual-body");
+      let wrapper = this.querySelector(".table-wrapper")!;
+      let scrollPosition = index * this._getRowHeight();
+      wrapper.scrollTo({
+        top: scrollPosition,
+        behavior: "smooth",
+      });
+      //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));
+        if (wrapper.scrollTop == scrollPosition) {
+          console.log("Scroll complete");
+          break;
+        }
+      }
+      if (body) {
+        //Highlight the row we scrolled to
+        requestAnimationFrame(() => {
+          let rows = [...body.querySelectorAll("tr")];
+          rows = rows.filter(
+            (row) => row.querySelector("spectric-table-cell")?.index === index
+          );
+          if (rows.length) {
+            rows[0].animate(
+              [{ backgroundColor: "red" }, { backgroundColor: "unset" }],
+              { duration: 200, iterations: 5 }
+            );
+          }
+        });
+      }
+    }
+  }
+  _getRowHeight = () => {
+    let rowHeight = this.rowHeight - TD_BorderAndPadding;
+    if (rowHeight < this.fontSize + TD_BorderAndPadding) {
+      rowHeight = this.fontSize + TD_BorderAndPadding;
+    }
+    return rowHeight;
+  };
   _handleSelectAllChange = (e: DomEvent<HTMLInputElement>) => {
     e.stopPropagation();
     if (e.target.checked) {
@@ -271,6 +334,8 @@ export class SpectricTableElement<T = any>
   };
   private selectColumnConfig: ColumnSettings<T> = {
     [TABLE_CREATED_SELECTION_COLUMN]: true,
+    allowResize: false,
+    filterable: false,
     width: 39,
     title: (table) => {
       return table.select === "multi"
@@ -314,6 +379,14 @@ export class SpectricTableElement<T = any>
     },
   };
   protected update(changedProperties: PropertyValues): void {
+    if (changedProperties.has("data")) {
+      this.selected = this.data.reduce((a, row) => {
+        if (this.selected.includes(row)) {
+          a.push(row);
+        }
+        return a;
+      }, [] as T[]);
+    }
     if (changedProperties.has("columns")) {
       if (this.select !== TableSelectOptions.none) {
         if (!this.columns.find((col) => col[TABLE_CREATED_SELECTION_COLUMN])) {
@@ -333,10 +406,7 @@ export class SpectricTableElement<T = any>
   }
   protected render(): unknown {
     let columns = this.columns.filter((column) => !column.hidden);
-    let rowHeight = this.rowHeight - TD_BorderAndPadding;
-    if (rowHeight < this.fontSize + TD_BorderAndPadding) {
-      rowHeight = this.fontSize + TD_BorderAndPadding;
-    }
+    let rowHeight = this._getRowHeight();
     return html`
       <div
         class="table-wrapper"

package/src/components/table/virtualBody.ts

@@ -43,14 +43,19 @@ export class TableVirtualBodyElement<T>
   columnsMeasured: boolean = false;
   constructor() {
     super();
+    let lastScroll = 0;
     this.addDisposableListener(
       () => this.table.querySelector(".table-wrapper")!,
       "scroll",
       () => {
         const scrollTop = this.table.querySelector(".table-wrapper")!.scrollTop;
-        requestAnimationFrame(() => {
-          this.startIndex = Math.floor(scrollTop / this.rowHeight);
-        });
+        // Prevent changing the start index if the scroll hasn't changed more than at at least 1/4 a row
+        // I think I have bad math that is causing a new scroll event due to a couple pixel height difference after I create the spacers
+        if (Math.abs(lastScroll - scrollTop) <= this.rowHeight / 4) {
+          return;
+        }
+        lastScroll = scrollTop;
+        this.startIndex = Math.floor(scrollTop / this.rowHeight);
       }
     );
   }