@teselagen/ui 0.8.8 → 0.9.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ui",
-  "version": "0.8.8",
+  "version": "0.9.3",
   "main": "./src/index.js",
   "type": "module",
   "exports": {
@@ -17,7 +17,7 @@
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "^8.0.0",
-    "@teselagen/react-table": "6.10.16",
+    "@teselagen/react-table": "6.10.18",
     "classnames": "^2.3.2",
     "color": "^3.2.1",
     "copy-to-clipboard": "^3.3.1",
@@ -51,8 +51,6 @@
     "url-join": "^4.0.1",
     "use-deep-compare-effect": "^1.6.1",
     "write-excel-file": "^1.4.25",
-    "cypress-real-events": "^1.13.0",
-    "chance": "^1.1.11",
     "@dnd-kit/utilities": "3.2.2",
     "@teselagen/file-utils": "0.3.20",
     "@blueprintjs/icons": "3.33.0"

package/src/DataTable/Columns.js

@@ -33,10 +33,10 @@ import getTextFromEl from "../utils/getTextFromEl";
 import rowClick, { finalizeSelection } from "./utils/rowClick";
 import { editCellHelper } from "./editCellHelper";
 import { getCellVal } from "./getCellVal";
-import { getCCDisplayName } from "./utils/queryParams";
 import { useDispatch } from "react-redux";
 import { change as _change } from "redux-form";
 import { RenderCell } from "./RenderCell";
+import { getCCDisplayName } from "./utils/tableQueryParamsToHasuraClauses";
 
 dayjs.extend(localizedFormat);
 
@@ -104,7 +104,7 @@ const RenderColumnHeader = ({
   if (order && order.length) {
     order.forEach(order => {
       const orderField = order.replace("-", "");
-      if (orderField === ccDisplayName) {
+      if (orderField === path) {
         if (orderField === order) {
           ordering = "asc";
         } else {

package/src/DataTable/DisplayOptions.js

@@ -10,7 +10,7 @@ import {
   Popover,
   Switch
 } from "@blueprintjs/core";
-import { getCCDisplayName } from "./utils/queryParams";
+import { getCCDisplayName } from "./utils/tableQueryParamsToHasuraClauses";
 
 const DisplayOptions = ({
   compact,

package/src/DataTable/FilterAndSortMenu.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { DateInput, DateRangeInput } from "@blueprintjs/datetime";
-import { camelCase } from "lodash-es";
+import { camelCase, startCase } from "lodash-es";
 import classNames from "classnames";
 import {
   Menu,
@@ -349,43 +349,40 @@ function getFilterMenuItems(dataType) {
   let filterMenuItems = [];
   if (dataType === "string") {
     filterMenuItems = [
-      "Contains",
-      "Not Contains",
-      "Starts With",
-      "Ends With",
-      "Is Exactly",
-      "Regex",
-      "In List",
-      "Not In List",
-      "Is Empty",
-      "Not Empty"
+      "contains",
+      "notContains",
+      "startsWith",
+      "endsWith",
+      "isExactly",
+      "regex",
+      "inList",
+      "notInList",
+      "isEmpty",
+      "notEmpty"
     ];
   } else if (dataType === "lookup") {
     filterMenuItems = [
-      "Contains",
-      "Not Contains",
-      "Starts With",
-      "Ends With",
-      "Is Exactly",
-      "Regex"
+      "contains",
+      "notContains",
+      "startsWith",
+      "endsWith",
+      "isExactly",
+      "regex"
     ];
   } else if (dataType === "boolean") {
-    filterMenuItems = ["True", "False"];
+    filterMenuItems = ["true", "false"];
   } else if (dataType === "number" || dataType === "integer") {
-    // else if (dataType === "lookup") {
-    //   filterMenuItems = ["None"];
-    // }
     filterMenuItems = [
-      "Greater Than",
-      "Less Than",
-      "In Range",
-      "Outside Range",
-      "Equal To",
-      "In List",
-      "Not In List"
+      "greaterThan",
+      "lessThan",
+      "inRange",
+      "outsideRange",
+      "equalTo",
+      "inList",
+      "notInList"
     ];
   } else if (dataType === "timestamp") {
-    filterMenuItems = ["Is Between", "Not Between", "Is Before", "Is After"];
+    filterMenuItems = ["isBetween", "notBetween", "isBefore", "isAfter"];
   }
-  return filterMenuItems;
+  return filterMenuItems.map(item => startCase(item));
 }

package/src/DataTable/index.js

@@ -27,7 +27,8 @@ import {
   isFunction,
   isEqual,
   every,
-  some
+  some,
+  identity
 } from "lodash-es";
 import {
   Button,
@@ -43,7 +44,7 @@ import {
 import { arrayMove } from "@dnd-kit/sortable";
 import classNames from "classnames";
 import scrollIntoView from "dom-scroll-into-view";
-import ReactTable from "@teselagen/react-table";
+import ReactTable, { VIRTUALIZE_CUTOFF_LENGTH } from "@teselagen/react-table";
 import immer, { produceWithPatches, enablePatches, applyPatches } from "immer";
 import papaparse from "papaparse";
 import { useDispatch, useSelector } from "react-redux";
@@ -92,10 +93,9 @@ import { viewColumn, openColumn, multiViewColumn } from "./viewColumn";
 import convertSchema from "./utils/convertSchema";
 import TableFormTrackerContext from "./TableFormTrackerContext";
 import {
-  getCCDisplayName,
-  getCurrentParamsFromUrl,
   getQueryParams,
   makeDataTableHandlers,
+  getCurrentParamsFromUrl,
   setCurrentParamsOnUrl
 } from "./utils/queryParams";
 import { useColumns } from "./Columns";
@@ -103,6 +103,7 @@ import { formValueSelector, change as _change } from "redux-form";
 import { throwFormError } from "../throwFormError";
 import { isObservableArray, toJS } from "mobx";
 import { isBeingCalledExcessively } from "../utils/isBeingCalledExcessively";
+import { getCCDisplayName } from "./utils/tableQueryParamsToHasuraClauses";
 
 enablePatches();
 const IS_LINUX = window.navigator.platform.toLowerCase().search("linux") > -1;
@@ -141,6 +142,7 @@ const DataTable = ({
   );
   const tableRef = useRef();
   const alreadySelected = useRef(false);
+  const [noVirtual, setNoVirtual] = useState(false);
   const [onlyShowRowsWErrors, setOnlyShowRowsWErrors] = useState(false);
   const [entitiesUndoRedoStack, setEntitiesUndoRedoStack] = useState({
     currentVersion: 0
@@ -337,16 +339,6 @@ const DataTable = ({
 
   const queryParams = useMemo(() => {
     if (!isTableParamsConnected) {
-      const additionalFilterToUse =
-        typeof props.additionalFilter === "function"
-          ? props.additionalFilter
-          : () => props.additionalFilter;
-
-      const additionalOrFilterToUse =
-        typeof props.additionalOrFilter === "function"
-          ? props.additionalOrFilter
-          : () => props.additionalOrFilter;
-
       return getQueryParams({
         doNotCoercePageSize,
         currentParams,
@@ -356,8 +348,7 @@ const DataTable = ({
         schema: convertedSchema,
         isInfinite,
         isLocalCall,
-        additionalFilter: additionalFilterToUse,
-        additionalOrFilter: additionalOrFilterToUse,
+        additionalFilter: props.additionalFilter,
         noOrderError: props.noOrderError,
         isCodeModel: props.isCodeModel,
         ownProps: props
@@ -614,7 +605,7 @@ const DataTable = ({
                 : !val;
           });
         }
-        if (noValsForField) {
+        if (noValsForField && entities.length) {
           return {
             ...field,
             isHidden: true,
@@ -1156,70 +1147,94 @@ const DataTable = ({
     updateValidation
   ]);
 
-  const handleCopySelectedCells = useCallback(
-    e => {
-      // if the current selection is consecutive cells then copy with
-      // tabs between. if not then just select primary selected cell
-      if (isEmpty(selectedCells)) return;
-      const pathToIndex = getFieldPathToIndex(schema);
-      const entityIdToEntity = getEntityIdToEntity(entities);
-      const selectionGrid = [];
-      let firstRowIndex;
-      let firstCellIndex;
-      Object.keys(selectedCells).forEach(key => {
-        const [rowId, path] = key.split(":");
-        const eInfo = entityIdToEntity[rowId];
-        if (eInfo) {
-          if (firstRowIndex === undefined || eInfo.i < firstRowIndex) {
-            firstRowIndex = eInfo.i;
-          }
-          if (!selectionGrid[eInfo.i]) {
-            selectionGrid[eInfo.i] = [];
-          }
-          const cellIndex = pathToIndex[path];
-          if (firstCellIndex === undefined || cellIndex < firstCellIndex) {
-            firstCellIndex = cellIndex;
-          }
-          selectionGrid[eInfo.i][cellIndex] = true;
+  const waitUntilAllRowsAreRendered = useCallback(() => {
+    return new Promise(resolve => {
+      const interval = setInterval(() => {
+        const allRowEls =
+          tableRef.current?.tableRef?.querySelectorAll(".rt-tr-group");
+        if (allRowEls?.length === entities.length) {
+          clearInterval(interval);
+          resolve();
         }
-      });
-      if (firstRowIndex === undefined) return;
-      const allRows = getAllRows(e);
-      let fullCellText = "";
-      const fullJson = [];
-      times(selectionGrid.length, i => {
-        const row = selectionGrid[i];
-        if (fullCellText) {
-          fullCellText += "\n";
+      }, 50);
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handleCopySelectedCells = useCallback(async () => {
+    // if the current selection is consecutive cells then copy with
+    // tabs between. if not then just select primary selected cell
+    if (isEmpty(selectedCells)) return;
+
+    // Temporarily disable virtualization for large tables
+    if (entities.length > VIRTUALIZE_CUTOFF_LENGTH) {
+      setNoVirtual(true);
+      await waitUntilAllRowsAreRendered();
+    }
+
+    const pathToIndex = getFieldPathToIndex(schema);
+    const entityIdToEntity = getEntityIdToEntity(entities);
+    const selectionGrid = [];
+    let firstRowIndex;
+    let firstCellIndex;
+    Object.keys(selectedCells).forEach(key => {
+      const [rowId, path] = key.split(":");
+      const eInfo = entityIdToEntity[rowId];
+      if (eInfo) {
+        if (firstRowIndex === undefined || eInfo.i < firstRowIndex) {
+          firstRowIndex = eInfo.i;
         }
-        if (!row) {
-          return;
-        } else {
-          const jsonRow = [];
-          // ignore header
-          let [rowCopyText, json] = getRowCopyText(allRows[i + 1]);
-          rowCopyText = rowCopyText.split("\t");
-          times(row.length, i => {
-            const cell = row[i];
-            if (cell) {
-              fullCellText += rowCopyText[i];
-              jsonRow.push(json[i]);
-            }
-            if (i !== row.length - 1 && i >= firstCellIndex)
-              fullCellText += "\t";
-          });
-          fullJson.push(jsonRow);
+        if (!selectionGrid[eInfo.i]) {
+          selectionGrid[eInfo.i] = [];
         }
-      });
-      if (!fullCellText) return window.toastr.warning("No text to copy");
+        const cellIndex = pathToIndex[path];
+        if (firstCellIndex === undefined || cellIndex < firstCellIndex) {
+          firstCellIndex = cellIndex;
+        }
+        selectionGrid[eInfo.i][cellIndex] = true;
+      }
+    });
+    if (firstRowIndex === undefined) return;
+    const allRows = getAllRows(tableRef);
+    let fullCellText = "";
+    const fullJson = [];
+    times(selectionGrid.length, i => {
+      const row = selectionGrid[i];
+      if (fullCellText) {
+        fullCellText += "\n";
+      }
+      if (!row) {
+        return;
+      } else {
+        const jsonRow = [];
+        // ignore header
+        let [rowCopyText, json] = getRowCopyText(allRows[i + 1]);
+        rowCopyText = rowCopyText.split("\t");
+        times(row.length, i => {
+          const cell = row[i];
+          if (cell) {
+            fullCellText += rowCopyText[i];
+            jsonRow.push(json[i]);
+          }
+          if (i !== row.length - 1 && i >= firstCellIndex) fullCellText += "\t";
+        });
+        fullJson.push(jsonRow);
+      }
+    });
+    if (!fullCellText) return window.toastr.warning("No text to copy");
 
-      handleCopyHelper(fullCellText, fullJson, "Selected cells copied");
-    },
-    [entities, selectedCells, schema]
-  );
+    handleCopyHelper(fullCellText, fullJson, "Selected cells copied");
+
+    // Re-enable virtualization if it was disabled
+    setNoVirtual(false);
+  }, [entities, selectedCells, schema, waitUntilAllRowsAreRendered]);
 
   const handleCopySelectedRows = useCallback(
-    (selectedRecords, e) => {
+    async selectedRecords => {
+      if (entities.length > VIRTUALIZE_CUTOFF_LENGTH) {
+        setNoVirtual(true);
+        await waitUntilAllRowsAreRendered();
+      }
       const idToIndex = entities.reduce((acc, e, i) => {
         acc[e.id || e.code] = i;
         return acc;
@@ -1227,17 +1242,17 @@ const DataTable = ({
 
       //index 0 of the table is the column titles
       //must add 1 to rowNum
-      const rowNumbersToCopy = selectedRecords
-        .map(rec => idToIndex[rec.id || rec.code] + 1)
-        .sort();
+      const rowNumbersToCopy = Array.from(
+        new Set(selectedRecords.map(rec => idToIndex[rec.id || rec.code] + 1))
+      ).sort();
 
       if (!rowNumbersToCopy.length) return;
       rowNumbersToCopy.unshift(0); //add in the header row
       try {
-        const allRowEls = getAllRows(e);
+        const allRowEls = getAllRows(tableRef);
         if (!allRowEls) return;
-        const rowEls = rowNumbersToCopy.map(i => allRowEls[i]);
-
+        const rowEls = rowNumbersToCopy.map(i => allRowEls[i]).filter(identity);
+        if (window.Cypress) window.Cypress.__copiedRowsLength = rowEls.length;
         handleCopyRows(rowEls, {
           onFinishMsg: "Selected rows copied"
         });
@@ -1245,8 +1260,9 @@ const DataTable = ({
         console.error(`error:`, error);
         window.toastr.error("Error copying rows.");
       }
+      setNoVirtual(false);
     },
-    [entities]
+    [entities, waitUntilAllRowsAreRendered]
   );
 
   const handleCopyHotkey = useCallback(
@@ -2107,7 +2123,7 @@ const DataTable = ({
             <MenuItem
               key="copyColumn"
               onClick={() => {
-                handleCopyColumn(e, cellWrapper);
+                handleCopyColumn(tableRef, cellWrapper);
               }}
               text="Column"
             />
@@ -2117,7 +2133,7 @@ const DataTable = ({
               <MenuItem
                 key="copyColumnSelected"
                 onClick={() => {
-                  handleCopyColumn(e, cellWrapper, selectedRecords);
+                  handleCopyColumn(tableRef, cellWrapper, selectedRecords);
                 }}
                 text="Column (Selected)"
               />
@@ -2157,7 +2173,7 @@ const DataTable = ({
           <MenuItem
             key="copyFullTableRows"
             onClick={() => {
-              handleCopyTable(e);
+              handleCopyTable(tableRef);
               // loop through each cell in the row
             }}
             text="Table"
@@ -2765,6 +2781,7 @@ const DataTable = ({
       <ReactTable
         data={filteredEnts}
         ref={tableRef}
+        noVirtual={noVirtual}
         className={classNames({
           isCellEditable,
           "tg-table-loading": isLoading,
@@ -2846,12 +2863,18 @@ const DataTable = ({
       resizePersist,
       resized,
       rowsToShow,
-      style
+      style,
+      noVirtual
     ]
   );
 
   return (
-    <div tabIndex="1" onKeyDown={handleKeyDown} onKeyUp={handleKeyUp}>
+    <div
+      tabIndex="1"
+      style={{ height: "100%" }}
+      onKeyDown={handleKeyDown}
+      onKeyUp={handleKeyUp}
+    >
       <div
         className={classNames(
           "data-table-container",
@@ -3089,7 +3112,7 @@ const DataTable = ({
                     try {
                       const allEntities = await safeQuery(fragment, {
                         variables: {
-                          filter: variables.filter,
+                          where: variables.where,
                           sort: variables.sort
                         },
                         canCancel: true
@@ -3163,8 +3186,8 @@ const DataTable = ({
                 )}
               </div>
               <Button
-                onClick={e => {
-                  handleCopyTable(e, { isDownload: true });
+                onClick={() => {
+                  handleCopyTable(tableRef, { isDownload: true });
                 }}
                 data-tip="Download Table as CSV"
                 minimal

package/src/DataTable/style.css

@@ -246,7 +246,7 @@ body:not(.drag-active)
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  margin-top: 20px;
+  margin-top: 10px;
 }
 
 .ReactTable {