@teselagen/ui 0.7.33-beta.5 → 0.7.33

package/removeCleanRows.js

@@ -0,0 +1,22 @@
+import { isEntityClean } from "./isEntityClean";
+import { getIdOrCodeOrIndex } from "./getIdOrCodeOrIndex";
+
+export const removeCleanRows = (entities, cellValidation) => {
+  const toFilterOut = {};
+  const entsToUse = (entities || []).filter(e => {
+    if (!(e._isClean || isEntityClean(e))) return true;
+    else {
+      toFilterOut[getIdOrCodeOrIndex(e)] = true;
+      return false;
+    }
+  });
+
+  const validationToUse = {};
+  Object.entries(cellValidation || {}).forEach(([k, v]) => {
+    const [rowId] = k.split(":");
+    if (!toFilterOut[rowId]) {
+      validationToUse[k] = v;
+    }
+  });
+  return { entsToUse, validationToUse };
+};

package/renderOnDoc.js

@@ -0,0 +1,32 @@
+import { createRoot } from "react-dom/client";
+
+export function renderOnDoc(fn) {
+  const elemDiv = document.createElement("div");
+  elemDiv.style.cssText =
+    "position:absolute;width:100%;height:100%;top:0px;opacity:0.3;z-index:0;";
+  document.body.appendChild(elemDiv);
+  const root = createRoot(elemDiv);
+  const handleClose = () => {
+    setTimeout(() => {
+      root.unmount(elemDiv);
+      document.body.removeChild(elemDiv);
+    });
+  };
+  root.render(fn(handleClose));
+}
+
+export function renderOnDocSimple(el) {
+  const elemDiv = document.createElement("div");
+  elemDiv.style.cssText =
+    "position:absolute;width:100%;height:100%;top:0px;opacity:1;z-index:10000;";
+  document.body.appendChild(elemDiv);
+  const root = createRoot(elemDiv);
+  root.render(el);
+  const handleClose = () => {
+    setTimeout(() => {
+      root.unmount();
+      document.body.removeChild(elemDiv);
+    });
+  };
+  return handleClose;
+}

package/rerenderOnWindowResize.js

@@ -0,0 +1,26 @@
+import { throttle } from "lodash-es";
+// use like this within a react component:
+
+// constructor(props){
+//   super(props)
+//   rerenderOnWindowResize(this)
+// }
+
+export default function rerenderOnWindowResize(that) {
+  that.updateDimensions = throttle(() => {
+    if (that.props.disabled) return;
+    that.forceUpdate();
+  }, 250);
+  const componentDidMount = that.componentDidMount;
+  const componentWillUnmount = that.componentWillUnmount;
+
+  that.componentDidMount = (...args) => {
+    componentDidMount && componentDidMount.bind(that)(...args);
+    window.addEventListener("resize", that.updateDimensions);
+  };
+
+  that.componentWillUnmount = (...args) => {
+    componentWillUnmount && componentWillUnmount.bind(that)(...args);
+    window.removeEventListener("resize", that.updateDimensions);
+  };
+}

package/rowClick.js

@@ -0,0 +1,181 @@
+import { isEmpty, forEach, range } from "lodash-es";
+import { getSelectedRowsFromEntities } from "./selection";
+import { getIdOrCodeOrIndex } from "./getIdOrCodeOrIndex";
+import { getRecordsFromIdMap } from "./withSelectedEntities";
+
+export default function rowClick(
+  e,
+  rowInfo,
+  entities,
+  {
+    reduxFormSelectedEntityIdMap,
+    isSingleSelect,
+    noSelect,
+    onRowClick,
+    isEntityDisabled,
+    withCheckboxes,
+    onDeselect,
+    onSingleRowSelect,
+    onMultiRowSelect,
+    noDeselectAll,
+    onRowSelect,
+    change
+  }
+) {
+  const entity = rowInfo.original;
+  onRowClick(e, entity, rowInfo);
+  if (noSelect || isEntityDisabled(entity)) return;
+  const rowId = getIdOrCodeOrIndex(entity, rowInfo.index);
+  if (rowId === undefined) return;
+  const ctrl = e.metaKey || e.ctrlKey || (withCheckboxes && !e.shiftKey);
+  const oldIdMap = reduxFormSelectedEntityIdMap || {};
+  const rowSelected = oldIdMap[rowId];
+  let newIdMap = {
+    [rowId]: {
+      time: Date.now(),
+      entity
+    }
+  };
+
+  if (isSingleSelect) {
+    if (rowSelected) newIdMap = {};
+  } else if (rowSelected && e.shiftKey) return;
+  else if (rowSelected && ctrl) {
+    newIdMap = {
+      ...oldIdMap
+    };
+    delete newIdMap[rowId];
+  } else if (rowSelected) {
+    newIdMap = {};
+  } else if (ctrl) {
+    newIdMap = {
+      ...oldIdMap,
+      ...newIdMap
+    };
+  } else if (e.shiftKey && !isEmpty(oldIdMap)) {
+    newIdMap = {
+      [rowId]: {
+        entity,
+        time: Date.now()
+      }
+    };
+    const currentlySelectedRowIndices = getSelectedRowsFromEntities(
+      entities,
+      oldIdMap
+    );
+    if (currentlySelectedRowIndices.length) {
+      let timeToBeat = {
+        id: null,
+        time: null
+      };
+      forEach(oldIdMap, ({ time }, key) => {
+        if (time && time > timeToBeat.time)
+          timeToBeat = {
+            id: key,
+            time
+          };
+      });
+      const mostRecentlySelectedIndex = entities.findIndex((e, i) => {
+        let id = getIdOrCodeOrIndex(e, i);
+        if (!id && id !== 0) id = "";
+        return id.toString() === timeToBeat.id;
+      });
+
+      if (mostRecentlySelectedIndex !== -1) {
+        const highRange =
+          rowInfo.index < mostRecentlySelectedIndex
+            ? mostRecentlySelectedIndex - 1
+            : rowInfo.index;
+        const lowRange =
+          rowInfo.index > mostRecentlySelectedIndex
+            ? mostRecentlySelectedIndex + 1
+            : rowInfo.index;
+        range(lowRange, highRange + 1).forEach(i => {
+          if (isEntityDisabled && isEntityDisabled(entities[i])) {
+            return;
+          }
+          const recordId = entities[i] && getIdOrCodeOrIndex(entities[i], i);
+          if (recordId || recordId === 0)
+            // newIdMap[recordId] = { entity: entities[i] };
+            newIdMap[recordId] = { entity: entities[i], time: Date.now() };
+        });
+        newIdMap = {
+          ...oldIdMap,
+          ...newIdMap
+        };
+        if (newIdMap[rowId]) {
+          //the entity we just clicked on should have the "freshest" time
+          newIdMap[rowId].time = Date.now() + 1;
+        }
+      }
+    }
+  }
+
+  finalizeSelection({
+    idMap: newIdMap,
+    entities,
+    props: {
+      onDeselect,
+      onSingleRowSelect,
+      onMultiRowSelect,
+      noDeselectAll,
+      onRowSelect,
+      noSelect,
+      change
+    }
+  });
+}
+
+export function changeSelectedEntities({ idMap, entities = [], change }) {
+  const newIdMap = { ...idMap };
+  const entityIdToIndex = {};
+  entities.forEach((e, i) => {
+    entityIdToIndex[getIdOrCodeOrIndex(e, 0)] = i;
+  });
+  // we want to store the index of the entity so that it can be used to preserve order in selection
+  Object.keys(newIdMap).forEach(key => {
+    if (!newIdMap[key]) return;
+    const rowIndex =
+      entityIdToIndex[getIdOrCodeOrIndex(newIdMap[key].entity, 0)];
+    newIdMap[key] = {
+      ...newIdMap[key],
+      rowIndex: rowIndex === undefined ? 10000000 : rowIndex
+    };
+  });
+
+  change("reduxFormSelectedEntityIdMap", newIdMap);
+}
+
+export function finalizeSelection({
+  idMap,
+  entities,
+  props: {
+    onDeselect,
+    onSingleRowSelect,
+    onMultiRowSelect,
+    noDeselectAll,
+    onRowSelect,
+    noSelect,
+    change
+  }
+}) {
+  if (noSelect) return;
+  if (
+    noDeselectAll &&
+    Object.keys(idMap).filter(id => {
+      return idMap[id];
+    }).length === 0
+  ) {
+    return;
+  }
+
+  changeSelectedEntities({ idMap, entities, change });
+  const selectedRecords = getRecordsFromIdMap(idMap);
+  onRowSelect(selectedRecords);
+
+  selectedRecords.length === 0
+    ? onDeselect()
+    : selectedRecords.length > 1
+      ? onMultiRowSelect(selectedRecords)
+      : onSingleRowSelect(selectedRecords[0]);
+}

package/selection.js

@@ -0,0 +1,8 @@
+import { getIdOrCodeOrIndex } from "./getIdOrCodeOrIndex";
+
+export const getSelectedRowsFromEntities = (entities, idMap) => {
+  if (!idMap) return [];
+  return entities.reduce((acc, entity, i) => {
+    return idMap[getIdOrCodeOrIndex(entity, i)] ? acc.concat(i) : acc;
+  }, []);
+};

package/showAppSpinner.js

@@ -0,0 +1,12 @@
+import React from "react";
+import { Overlay } from "@blueprintjs/core";
+import { renderOnDocSimple } from "./utils/renderOnDoc";
+import Loading from "./Loading";
+
+export default function showAppSpinner() {
+  return renderOnDocSimple(
+    <Overlay isOpen={true}>
+      <Loading centeredInPage loading></Loading>
+    </Overlay>
+  );
+}

package/showDialogOnDocBody.js

@@ -0,0 +1,33 @@
+import { createRoot } from "react-dom/client";
+import React from "react";
+// import withDialog from "./enhancers/withDialog";
+import { Dialog } from "@blueprintjs/core";
+import { nanoid } from "nanoid";
+
+//this is only really useful for unconnected standalone simple dialogs
+//remember to pass usePortal={false} to the <Dialog/> component so it will close properly
+export default function showDialogOnDocBody(DialogComp, options = {}) {
+  const dialogHolder = document.createElement("div");
+  const className = "myDialog" + nanoid();
+  dialogHolder.className = className;
+  document.body.appendChild(dialogHolder);
+  const onClose = () => {
+    document.querySelector("." + className).remove();
+  };
+  let DialogCompToUse;
+  if (options.addDialogContainer) {
+    DialogCompToUse = props => {
+      return (
+        <Dialog usePortal={false} title="pass a {title} prop" isOpen {...props}>
+          <DialogComp {...props} hideModal={onClose} onClose={onClose} />
+        </Dialog>
+      );
+    };
+  } else {
+    DialogCompToUse = DialogComp;
+  }
+  const root = createRoot(dialogHolder);
+  root.render(
+    <DialogCompToUse hideModal={onClose} onClose={onClose} {...options} />
+  );
+}

package/showProgressToast.js

@@ -0,0 +1,22 @@
+/* Copyright (C) 2018 TeselaGen Biotechnology, Inc. */
+import React from "react";
+import { ProgressBar } from "@blueprintjs/core";
+
+export default (message, value, key, opts) => {
+  return window.toastr.default(
+    <div>
+      <div style={{ marginBottom: 10 }}>{message}</div>
+      <ProgressBar
+        intent={value >= 1 ? "success" : "primary"}
+        animate={value < 1 || !value}
+        stripes={value < 1 || !value}
+        value={value}
+      />
+    </div>,
+    {
+      timeout: value >= 1 ? 3000 : 100000,
+      key,
+      ...opts
+    }
+  );
+};

package/sortify.js

@@ -0,0 +1,73 @@
+/*!
+ *    Copyright 2015-2016 Thomas Rosenau
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+/**
+ * Create a “sorted” version of an object.
+ *
+ * JS engines internally keep track of an object's keys in the order of
+ * creation time, i.e. {a:1,b:2} is treated differently from {b:2,a:1}.
+ * That difference can be seen when JSON.stringify is called on that object.
+ * This function normalizes any kind of object by rearranging the keys in
+ * alphabetical order (numerical keys first, since v8 does so, and there's
+ * nothing we can do about it).
+ * @param {*} o The object to be sorted
+ */
+
+/* eslint-disable */
+const sortKeys = o => {
+  if (Array.isArray(o)) {
+    return o.map(sortKeys);
+  } else if (o instanceof Object) {
+    // put numeric keys first
+    let numeric = [];
+    let nonNumeric = [];
+    Object.keys(o).forEach(key => {
+      if (/^(0|[1-9][0-9]*)$/.test(key)) {
+        numeric.push(+key);
+      } else {
+        nonNumeric.push(key);
+      }
+    });
+    // do the rearrangement
+    return numeric
+      .sort(function (a, b) {
+        return a - b;
+      })
+      .concat(nonNumeric.sort())
+      .reduce((result, key) => {
+        result[key] = sortKeys(o[key]); // recurse!
+        return result;
+      }, {});
+  }
+  return o;
+};
+
+const jsonStringify = JSON.stringify.bind(JSON);
+
+const sortify = (value, replacer, space) => {
+  // replacer, toJSON(), cyclic references and other stuff is better handled by native stringifier.
+  // So we do JSON.stringify(sortKeys( JSON.parse(JSON.stringify()) )).
+  // This approach is slightly slower but much safer than a manual stringification.
+  let nativeJson = jsonStringify(value, replacer, 0);
+  if (!nativeJson || (nativeJson[0] !== "{" && nativeJson[0] !== "[")) {
+    // if value is not an Object or Array
+    return nativeJson;
+  }
+  let cleanObj = JSON.parse(nativeJson);
+  return jsonStringify(sortKeys(cleanObj), null, space);
+};
+
+export default sortify;

package/src/DataTable/index.js

@@ -603,7 +603,7 @@ const DataTable = ({
                 : !val;
           });
         }
-        if (noValsForField) {
+        if (noValsForField && entities.length) {
           return {
             ...field,
             isHidden: true,

package/src/DataTable/utils/filterLocalEntitiesToHasura.js

@@ -77,6 +77,15 @@ function applyWhereClause(records, where) {
         const value = record[key];
         const conditions = filter[key];
 
+        // Handle nested object properties
+        if (
+          isObject(value) &&
+          isObject(conditions) &&
+          !hasOperator(conditions)
+        ) {
+          return applyFilter(value, conditions);
+        }
+
         for (const operator in conditions) {
           const conditionValue = conditions[operator];
 
@@ -208,6 +217,11 @@ function applyWhereClause(records, where) {
     return true;
   }
 
+  // Helper to check if an object contains any Hasura operators
+  function hasOperator(obj) {
+    return Object.keys(obj).some(key => key.startsWith("_"));
+  }
+
   return records.filter(record => applyFilter(record, where));
 }
 

package/src/DataTable/utils/filterLocalEntitiesToHasura.test.js

@@ -297,6 +297,55 @@ describe("filterLocalEntitiesToHasura", () => {
     expect(result.entitiesAcrossPages).toEqual([records[0]]);
     expect(result.entityCount).toBe(1);
   });
+  it("should filter with nested filters in _and and _or properly ", () => {
+    const result = filterLocalEntitiesToHasura(
+      [
+        {
+          id: 1,
+          type: {
+            special: "01"
+          }
+        },
+        {
+          id: 2,
+          type: {
+            special: "02"
+          }
+        }
+      ],
+      {
+        where: {
+          _and: [
+            {
+              type: {
+                special: {
+                  _ilike: "%01%"
+                }
+              }
+            }
+          ],
+          _or: []
+        }
+      }
+    );
+    expect(result.entities).toEqual([
+      {
+        id: 1,
+        type: {
+          special: "01"
+        }
+      }
+    ]);
+    expect(result.entitiesAcrossPages).toEqual([
+      {
+        id: 1,
+        type: {
+          special: "01"
+        }
+      }
+    ]);
+    expect(result.entityCount).toBe(1);
+  });
 
   it("should handle empty where clause", () => {
     const result = filterLocalEntitiesToHasura(records, {});

package/src/DataTable/utils/queryParams.js

@@ -303,7 +303,7 @@ export function getQueryParams({
     });
   }
 
-  const toReturn = {
+  let toRet = {
     //these are values that might be generally useful for the wrapped component
     page,
     pageSize: ownProps.controlled_pageSize || pageSize,
@@ -325,17 +325,20 @@ export function getQueryParams({
   if (isLocalCall) {
     //if the table is local (aka not directly connected to a db) then we need to
     //handle filtering/paging/sorting all on the front end
-    const toRet = filterLocalEntitiesToHasura(entities, {
-      where,
-      order_by,
-      limit,
-      offset,
-      isInfinite
-    });
+    toRet = {
+      ...toRet,
+      ...filterLocalEntitiesToHasura(entities, {
+        where,
+        order_by,
+        limit,
+        offset,
+        isInfinite
+      })
+    };
     return toRet;
   } else {
     return {
-      ...toReturn,
+      ...toRet,
       variables: {
         where,
         order_by,