@spectric/ui 0.0.21 → 0.0.22

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(() => {
@@ -151,7 +155,7 @@ 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=${classes.join(" ")}>

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;

package/src/components/table/table.ts

@@ -53,6 +53,7 @@ export type ColumnSettings<T> = {
   sortable?: boolean;
   sortDirection?: TableSortDirectionTypes;
   filterable?: boolean;
+  disableCellOverflowTooltip?: boolean;
   title?: DomRenderable | ((table: SpectricTableElement<T>) => DomRenderable);
   /**
    * Key to used for getting data from an object for a cell
@@ -237,7 +238,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 +252,9 @@ export class SpectricTableElement<T = any>
     this.selected = selected;
     this.forceRefreshofSelectionColumn();
   }
+  getSelected() {
+    return this.selected;
+  }
   deselectAll() {
     this.selected = [];
     this.forceRefreshofSelectionColumn();
@@ -261,6 +265,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) {
@@ -314,6 +365,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 +392,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);
       }
     );
   }