@teselagen/ui 0.7.33-beta.1 → 0.7.33-beta.2

package/src/queryParams.js

@@ -0,0 +1,336 @@
+import queryString from "qs";
+import { uniqBy, clone, camelCase } from "lodash-es";
+import { tableQueryParamsToHasuraClauses } from "./tableQueryParamsToHasuraClauses";
+import { filterLocalEntitiesToHasura } from "./filterLocalEntitiesToHasura";
+import {
+  addCustomColumnFilters,
+  initializeHasuraWhereAndFilter
+} from "./initializeHasuraWhereAndFilter";
+
+const defaultPageSizes = [5, 10, 15, 25, 50, 100, 200, 400];
+
+export { defaultPageSizes };
+
+export function getMergedOpts(topLevel = {}, instanceLevel = {}) {
+  const merged = {
+    ...topLevel,
+    ...instanceLevel
+  };
+  return {
+    formName: "tgDataTable",
+    ...merged,
+    pageSize: merged.controlled_pageSize || merged.pageSize,
+    defaults: {
+      pageSize: merged.controlled_pageSize || 25,
+      order: [], //[-name, statusCode] //an array of camelCase display names with - sign to denote reverse
+      searchTerm: "",
+      page: 1,
+      filters: [
+        //filters look like this:
+        // {
+        //   selectedFilter: 'textContains', //camel case
+        //   filterOn: ccDisplayName, //camel case display name if available and string, otherwise path
+        //   filterValue: 'thomas',
+        // }
+      ],
+      ...(topLevel.defaults || {}),
+      ...(instanceLevel.defaults || {})
+    }
+  };
+}
+
+function safeStringify(val) {
+  if (val !== null && typeof val === "object") {
+    return JSON.stringify(val);
+  }
+  return val;
+}
+
+function safeParse(val) {
+  try {
+    return JSON.parse(val);
+  } catch (e) {
+    return val;
+  }
+}
+
+/**
+ *
+ * @param {object} field
+ * @returns the camelCase display name of the field, to be used for filters, sorting, etc
+ */
+export function getCCDisplayName(field) {
+  return camelCase(
+    typeof field.displayName === "string" ? field.displayName : field.path
+  );
+}
+
+export function getCurrentParamsFromUrl(location, isSimple) {
+  let { search } = location;
+  if (isSimple) {
+    search = window.location.href.split("?")[1] || "";
+  }
+
+  return parseFilters(queryString.parse(search, { ignoreQueryPrefix: true }));
+}
+
+export function setCurrentParamsOnUrl(newParams, replace, isSimple) {
+  const stringifiedFilters = stringifyFilters(newParams);
+  const search = `?${queryString.stringify(stringifiedFilters)}`;
+  if (isSimple) {
+    return window.location.replace(
+      `${window.location.href.split("?")[0]}${search}`
+    );
+  }
+  replace({
+    search
+  });
+}
+
+function stringifyFilters(newParams) {
+  let filters;
+  if (newParams.filters && newParams.filters.length) {
+    filters = newParams.filters.reduce(
+      (acc, { filterOn, selectedFilter, filterValue }, index) => {
+        acc +=
+          (index > 0 ? "::" : "") +
+          `${filterOn}__${camelCase(selectedFilter)}__${safeStringify(
+            Array.isArray(filterValue) ? filterValue.join(";") : filterValue
+          )}`;
+        return acc;
+      },
+      ""
+    );
+  }
+  let order;
+  if (newParams.order && newParams.order.length) {
+    order = newParams.order.reduce((acc, order, index) => {
+      acc += (index > 0 ? "___" : "") + order;
+      return acc;
+    }, "");
+  }
+  return {
+    ...newParams,
+    filters,
+    order
+  };
+}
+function parseFilters(newParams) {
+  return {
+    ...newParams,
+    order: newParams.order && newParams.order.split("___"),
+    filters:
+      newParams.filters &&
+      newParams.filters.split("::").map(filter => {
+        const splitFilter = filter.split("__");
+        const [filterOn, selectedFilter, filterValue] = splitFilter;
+        const parseFilterValue = filterValue => {
+          if (selectedFilter === "inList" || selectedFilter === "notInList") {
+            return filterValue.split(";");
+          }
+          if (
+            selectedFilter === "inRange" ||
+            selectedFilter === "outsideRange"
+          ) {
+            return filterValue.split(";").map(Number);
+          }
+          return safeParse(filterValue);
+        };
+        return {
+          filterOn,
+          selectedFilter,
+          filterValue: parseFilterValue(filterValue)
+        };
+      })
+  };
+}
+
+export function makeDataTableHandlers({
+  setNewParams,
+  defaults,
+  onlyOneFilter
+}) {
+  //all of these actions have currentParams bound to them as their last arg in withTableParams
+  const setSearchTerm = searchTerm => {
+    setNewParams(prev => ({
+      ...(prev ?? {}),
+      page: undefined, //set page undefined to return the table to page 1
+      searchTerm: searchTerm === defaults.searchTerm ? undefined : searchTerm
+    }));
+    onlyOneFilter && clearFilters();
+  };
+
+  const addFilters = newFilters => {
+    if (!newFilters) return;
+    setNewParams(prev => {
+      const filters = uniqBy(
+        [...newFilters, ...(onlyOneFilter ? [] : prev?.filters || [])],
+        "filterOn"
+      );
+      return {
+        ...(prev ?? {}),
+        page: undefined, //set page undefined to return the table to page 1
+        filters
+      };
+    });
+  };
+
+  const removeSingleFilter = filterOn =>
+    setNewParams(prev => {
+      const filters = prev?.filters
+        ? prev.filters.filter(filter => {
+            return filter.filterOn !== filterOn;
+          })
+        : undefined;
+      return { ...(prev ?? {}), filters };
+    });
+
+  const clearFilters = (additionalFilterKeys = []) => {
+    const toClear = {
+      filters: undefined,
+      searchTerm: undefined,
+      tags: undefined
+    };
+    additionalFilterKeys.forEach(key => {
+      toClear[key] = undefined;
+    });
+    setNewParams(toClear);
+  };
+
+  const setPageSize = pageSize =>
+    setNewParams(prev => ({
+      ...(prev ?? {}),
+      pageSize: pageSize === defaults.pageSize ? undefined : pageSize,
+      page: undefined //set page undefined to return the table to page 1
+    }));
+
+  const setOrder = (order, isRemove, shiftHeld) =>
+    setNewParams(prev => {
+      let newOrder = [];
+      if (shiftHeld) {
+        //first remove the old order
+        newOrder = [...(prev?.order || [])].filter(value => {
+          const shouldRemove =
+            value.replace(/^-/, "") === order.replace(/^-/, "");
+          return !shouldRemove;
+        });
+        //then, if we are adding, pop the order onto the array
+        if (!isRemove) {
+          newOrder.push(order);
+        }
+      } else {
+        if (isRemove) {
+          newOrder = [];
+        } else {
+          newOrder = [order];
+        }
+      }
+      return {
+        ...(prev ?? {}),
+        order: newOrder
+      };
+    });
+
+  const setPage = page => {
+    setNewParams(prev => ({
+      ...(prev ?? {}),
+      page: page === defaults.page ? undefined : page
+    }));
+  };
+
+  return {
+    setSearchTerm,
+    addFilters,
+    clearFilters,
+    removeSingleFilter,
+    setPageSize,
+    setPage,
+    setOrder,
+    setNewParams
+  };
+}
+
+export function getQueryParams({
+  currentParams,
+  // urlConnected,
+  defaults,
+  schema,
+  isInfinite,
+  entities,
+  isLocalCall,
+  additionalFilter,
+  doNotCoercePageSize,
+  // noOrderError,
+  // isCodeModel,
+  ownProps
+}) {
+  Object.keys(currentParams).forEach(function (key) {
+    if (currentParams[key] === undefined) {
+      delete currentParams[key]; //we want to use the default value if any of these are undefined
+    }
+  });
+  const tableQueryParams = {
+    ...defaults,
+    ...currentParams
+  };
+  let { page, pageSize, searchTerm, filters, order } = tableQueryParams;
+  if (page <= 0 || isNaN(page)) {
+    page = undefined;
+  }
+  if (isInfinite) {
+    page = undefined;
+    pageSize = undefined;
+  }
+  if (pageSize !== undefined && !doNotCoercePageSize) {
+    //pageSize might come in as an unexpected number so we coerce it to be one of the nums in our pageSizes array
+    const closest = clone(window.tgPageSizes || defaultPageSizes).sort(
+      (a, b) => Math.abs(pageSize - a) - Math.abs(pageSize - b)
+    )[0];
+    pageSize = closest;
+  }
+  const toReturn = {
+    //these are values that might be generally useful for the wrapped component
+    page,
+    pageSize: ownProps.controlled_pageSize || pageSize,
+    order,
+    filters,
+    searchTerm
+  };
+  // tnwtodo: need to make sure ignoreSearchTerm still works
+  // if (additionalOrFilterToUse && additionalOrFilterToUse.ignoreSearchTerm) {
+  //   searchTerm = "";
+  //   additionalOrFilterToUse = additionalOrFilterToUse.additionalOrFilterToUse;
+  // }
+
+  const { where, order_by, limit, offset } = tableQueryParamsToHasuraClauses({
+    page,
+    pageSize,
+    searchTerm,
+    filters,
+    order,
+    schema
+  });
+  initializeHasuraWhereAndFilter(additionalFilter, where, currentParams);
+  addCustomColumnFilters(where, schema.fields, currentParams);
+  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
+    return filterLocalEntitiesToHasura(entities, {
+      where,
+      order_by,
+      limit,
+      offset,
+      isInfinite
+    });
+  } else {
+    return {
+      ...toReturn,
+      variables: {
+        where,
+        order_by,
+        limit,
+        offset
+      }
+    };
+  }
+}

package/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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
+    }
+  );
+};