@teselagen/ui 0.7.32 → 0.7.33-beta.2

package/src/adHoc.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { compose } from "recompose";
+
+//adHoc allows you to add dynamic HOCs to a component
+export default func => WrappedComponent => props => {
+  const calledFunc = func(props);
+  const composeArgs = Array.isArray(calledFunc) ? calledFunc : [calledFunc];
+  const ComposedAndWrapped = compose(...composeArgs)(WrappedComponent);
+  return <ComposedAndWrapped {...props} />;
+};

package/src/basicHandleActionsWithFullState.js

@@ -0,0 +1,14 @@
+export default function basicHandleActionsWithFullState(
+  handlers,
+  defaultState
+) {
+  return (state = defaultState, action, fullState) => {
+    const { type } = action;
+    const handler = handlers[type];
+    if (handler) {
+      return handler(state, action, fullState);
+    } else {
+      return state;
+    }
+  };
+}

package/src/browserUtils.js

@@ -0,0 +1,3 @@
+export const isSafari = /^((?!chrome|android).)*safari/i.test(
+  navigator.userAgent
+);

package/src/combineReducersWithFullState.js

@@ -0,0 +1,14 @@
+export default function combineReducers(reducers = {}) {
+  const reducerKeys = Object.keys(reducers);
+  return function combination(state = {}, action, fullState) {
+    let hasChanged = false;
+    const nextState = {};
+    fullState = fullState || state;
+    for (let i = 0; i < reducerKeys.length; i++) {
+      const key = reducerKeys[i];
+      nextState[key] = reducers[key](state[key], action, fullState);
+      hasChanged = hasChanged || nextState[key] !== state[key];
+    }
+    return hasChanged ? nextState : state;
+  };
+}

package/src/commandControls.js

@@ -0,0 +1,82 @@
+import React from "react";
+import { Tooltip, Checkbox, Button, Switch } from "@blueprintjs/core";
+
+export const withCommand =
+  mappings =>
+  WrappedComponent =>
+  ({ cmd, cmdOptions = {}, ...props }) => {
+    const mappedProps = {};
+    Object.keys(mappings).forEach(k => {
+      mappedProps[k] =
+        mappings[k] === "execute"
+          ? event => cmd.execute({ event })
+          : typeof mappings[k] === "function"
+            ? mappings[k](cmd, props)
+            : cmd[mappings[k]];
+    });
+
+    let out = <WrappedComponent {...mappedProps} {...props} />;
+    const tooltip =
+      cmd.tooltip || (typeof cmd.isDisabled === "string" && cmd.isDisabled);
+    if (tooltip && !cmdOptions.ignoreTooltip) {
+      out = <Tooltip content={tooltip}>{out}</Tooltip>;
+    }
+
+    return cmd.isHidden && !cmdOptions.ignoreHidden ? null : out;
+  };
+
+export const CmdCheckbox = withCommand({
+  onChange: "execute",
+  label: (cmd, props) =>
+    props.name ||
+    (props.prefix && (
+      <React.Fragment>
+        {props.prefix}
+        {cmd.name}
+      </React.Fragment>
+    )) ||
+    cmd.name,
+  disabled: "isDisabled",
+  checked: "isActive"
+})(Checkbox);
+
+export const CmdSwitch = withCommand({
+  onChange: "execute",
+  label: (cmd, props) =>
+    props.name ||
+    (props.prefix && (
+      <React.Fragment>
+        {props.prefix}
+        {cmd.name}
+      </React.Fragment>
+    )) ||
+    cmd.name,
+  disabled: "isDisabled",
+  checked: "isActive"
+})(Switch);
+
+const Div = ({ onChange, children }) => {
+  return <div onClick={onChange}>{children}</div>;
+};
+
+export const CmdDiv = withCommand({
+  onChange: "execute",
+  children: (cmd, props) =>
+    props.name ||
+    (props.prefix && (
+      <React.Fragment>
+        {props.prefix}
+        {cmd.name}
+      </React.Fragment>
+    )) ||
+    cmd.name,
+  disabled: "isDisabled",
+  checked: "isActive"
+})(Div);
+
+export const CmdButton = withCommand({
+  onClick: "execute",
+  text: cmd => (cmd.isActive === false && cmd.inactiveName) || cmd.name,
+  icon: "icon",
+  disabled: "isDisabled"
+})(Button);

package/src/commandUtils.js

@@ -0,0 +1,112 @@
+import { startCase } from "lodash-es";
+
+// Generic factory function to create command objects.
+// TODO add documentation
+export function genericCommandFactory(config) {
+  const out = {};
+  // eslint-disable-next-line no-unused-vars
+  for (const cmdId in config.commandDefs) {
+    const def = config.commandDefs[cmdId];
+    const command = { id: cmdId };
+    command.execute = (...execArgs) => {
+      config.handleReturn(
+        cmdId,
+        def.handler &&
+          def.handler.apply(command, config.getArguments(cmdId, execArgs))
+      );
+    };
+
+    const properties = [
+      "icon",
+      "name",
+      "component",
+      "shortName",
+      "description",
+      "hotkey",
+      "hotkeyProps",
+      "isDisabled",
+      "submenu",
+      "isActive",
+      "isHidden",
+      "tooltip",
+      "inactiveIcon",
+      "inactiveName"
+    ];
+
+    properties.forEach(prop => {
+      if (def[prop] !== undefined) {
+        if (typeof def[prop] === "function") {
+          Object.defineProperty(command, prop, {
+            get: () => {
+              return def[prop].apply(command, config.getArguments(cmdId, []));
+            }
+          });
+        } else {
+          command[prop] = def[prop];
+        }
+      }
+    });
+
+    // If no name was specified in the definition, let's try to give some
+    // auto-generated names
+    if (!def.name) {
+      command.name = startCase(cmdId);
+      if (def.toggle && cmdId.startsWith("toggle")) {
+        command.name = startCase(cmdId.replace("toggle", def.toggle[0] || ""));
+        command.inactiveName = startCase(
+          cmdId.replace("toggle", def.toggle[1] || "")
+        );
+        command.shortName = startCase(cmdId.replace("toggle", ""));
+      }
+    }
+
+    out[cmdId] = command;
+  }
+
+  return out;
+}
+
+// Extract hotkey props from the given commands or command defs, returning
+// a mapping of command ids to hotkey prop objects
+export function getCommandHotkeys(commandsOrDefs) {
+  const hotkeyDefs = {};
+  Object.keys(commandsOrDefs).forEach(cmdId => {
+    if (commandsOrDefs[cmdId].hotkey) {
+      hotkeyDefs[cmdId] = {
+        combo: commandsOrDefs[cmdId].hotkey,
+        label: commandsOrDefs[cmdId].name || startCase(cmdId),
+        ...commandsOrDefs[cmdId].hotkeyProps
+      };
+    }
+  });
+
+  return hotkeyDefs;
+}
+
+// Extract handler functions from the given commands, returning a mapping of
+// command ids to handlers (directly - no checks added).
+export function getCommandHandlers(commands) {
+  const handlers = {};
+  Object.keys(commands).forEach(cmdId => {
+    handlers[cmdId] = commands[cmdId].execute;
+  });
+
+  return handlers;
+}
+
+// Get hotkey handler functions for the given commands, returning a mapping of
+// command ids to hotkey handlers.
+export function getCommandHotkeyHandlers(commands) {
+  const handlers = {};
+  Object.keys(commands).forEach(cmdId => {
+    if (commands[cmdId].hotkey) {
+      handlers[cmdId] = event => {
+        if (!commands[cmdId].isDisabled && !commands[cmdId].isHidden) {
+          commands[cmdId].execute({ event, viaHotkey: true });
+        }
+      };
+    }
+  });
+
+  return handlers;
+}

package/src/convertSchema.js

@@ -0,0 +1,69 @@
+import { camelCase } from "lodash-es";
+import { startCase, keyBy, map } from "lodash-es";
+
+function convertSchema(schema) {
+  let schemaToUse = schema;
+  if (!schemaToUse.fields && Array.isArray(schema)) {
+    schemaToUse = {
+      fields: schema
+    };
+  }
+  schemaToUse = {
+    ...schemaToUse
+  };
+  schemaToUse.fields = schemaToUse.fields.map((field, i) => {
+    let fieldToUse = field;
+    if (typeof field === "string") {
+      fieldToUse = {
+        displayName: startCase(camelCase(field)),
+        path: field,
+        type: "string"
+      };
+    } else if (!field.type) {
+      fieldToUse = {
+        ...field,
+        type: "string"
+      };
+    }
+    if (!fieldToUse.displayName) {
+      fieldToUse = {
+        ...fieldToUse,
+        displayName: startCase(camelCase(fieldToUse.path))
+      };
+    }
+    // paths are needed for column resizing
+    if (!fieldToUse.path) {
+      fieldToUse = {
+        ...fieldToUse,
+        filterDisabled: true,
+        sortDisabled: true,
+        path: "fake-path" + i
+      };
+    }
+    return fieldToUse;
+  });
+  return schemaToUse;
+}
+
+export function mergeSchemas(_originalSchema, _overrideSchema) {
+  const originalSchema = convertSchema(_originalSchema);
+  const overrideSchema = convertSchema(_overrideSchema);
+
+  const overridesByKey = keyBy(overrideSchema.fields, "path");
+  return {
+    ...originalSchema,
+    ...overrideSchema,
+    fields: originalSchema.fields
+      .map(f => {
+        const override = overridesByKey[f.path];
+        if (override) {
+          delete overridesByKey[f.path];
+          return override;
+        }
+        return f;
+      })
+      .concat(map(overridesByKey))
+  };
+}
+
+export default convertSchema;

package/src/dataTableEnhancer.js

@@ -0,0 +1,41 @@
+/**
+ * @param {options} options
+ * @typedef {object} options
+ * @property {boolean} isPlural Are we searching for 1 thing or many?
+ * @property {string} queryName What the props come back on ( by default = modelName + 'Query')
+ */
+import { reduxForm } from "redux-form";
+import { branch, compose, withProps } from "recompose";
+import { withRouter } from "react-router-dom";
+
+/*
+  Right now DataTable is doing the same as withTableParams, so the logic is being
+  run twice. We need to refactor this to make it more DRY.
+  We could do two possible refactorings:
+  - remove withTableParams and just give all the appropiate props to DataTable. This would
+  make the component simpler.
+  - remove the logic from DataTable and just use withTableParams and a new hook called
+  useTableParams. This would be more flexible in the case we want to be able to use
+  pagination in a different component.
+  We should avoid having the component handle all the different
+  cases of input because of the next reasons:
+  1. It makes the component more complex and harder to understand.
+  2. It makes the component harder to test.
+  3. It makes the component harder to reuse.
+  4. Maintaining the the logic in the component is harder.
+  Keeping the logic and uses simple makes maintaining easier.
+
+  In my opinion, reduxForm could be replaced here with regular redux or even just be taken down.
+  Could be a major simplification, but this needs to be analized with lims for better
+  understanding if it's possible.
+*/
+export default compose(
+  // form prop is needed for redux-form, but we are giving this prop as
+  // formName, so we need to rename it. Previously it was done in the withTableParams, but now
+  // it doesn't have it by default.
+  withProps(({ formName }) => ({ form: formName })),
+  // the formName is passed via withTableParams and is often user overridden
+  branch(props => !props.noForm, reduxForm({})),
+  // don't use withRouter if noRouter is passed!
+  branch(props => !props.noRouter, withRouter)
+);

package/src/defaultFormatters.js

@@ -0,0 +1,32 @@
+import { toNumber } from "lodash-es";
+import { getVals } from "./getVals";
+import { isValueEmpty } from "./isValueEmpty";
+import { isTruthy } from "./isTruthy";
+
+export const defaultFormatters = {
+  boolean: newVal => {
+    return isTruthy(newVal);
+  },
+  dropdown: (newVal, field) => {
+    const valsMap = {};
+    getVals(field.values).forEach(v => {
+      valsMap[v.toLowerCase().trim()] = v;
+    });
+    return valsMap[newVal?.toLowerCase().trim()] || newVal;
+  },
+  dropdownMulti: (newVal, field) => {
+    const valsMap = {};
+    getVals(field.values).forEach(v => {
+      valsMap[v.toLowerCase().trim()] = v;
+    });
+    if (!newVal) return;
+    return newVal
+      .split(",")
+      .map(v => valsMap[v.toLowerCase().trim()] || v)
+      .join(",");
+  },
+  number: newVal => {
+    if (isValueEmpty(newVal)) return newVal;
+    return toNumber(newVal);
+  }
+};

package/src/defaultValidators.js

@@ -0,0 +1,40 @@
+import { isNumber } from "lodash-es";
+import { getVals } from "./getVals";
+import { isValueEmpty } from "./isValueEmpty";
+
+export const defaultValidators = {
+  dropdown: (newVal, field) => {
+    const err = "Please choose one of the accepted values";
+    if (!newVal) {
+      if (field.isRequired) return err;
+    } else if (!getVals(field.values).includes(newVal)) {
+      return err;
+    }
+  },
+  dropdownMulti: (newVal, field) => {
+    const err = "Please choose one of the accepted values";
+    if (!newVal) {
+      if (field.isRequired) return err;
+    } else {
+      let err;
+      newVal.split(",").some(v => {
+        if (!getVals(field.values).includes(v)) {
+          err = `${v} is not an accepted value`;
+          return true;
+        }
+        return false;
+      });
+      return err;
+    }
+  },
+  number: (newVal, field) => {
+    if (isValueEmpty(newVal) && !field.isRequired) return;
+    if (isNaN(newVal) || !isNumber(newVal)) {
+      return "Must be a number";
+    }
+  },
+  string: (newVal, field) => {
+    if (!field.isRequired) return false;
+    if (!newVal) return "Please enter a value here";
+  }
+};

package/src/determineBlackOrWhiteTextColor.js

@@ -0,0 +1,4 @@
+/* Copyright (C) 2018 TeselaGen Biotechnology, Inc. */
+import Color from "color";
+
+export default c => (Color(c).isLight() ? "#000000" : "#FFFFFF");

package/src/editCellHelper.js

@@ -0,0 +1,44 @@
+import { set } from "lodash-es";
+import { defaultValidators } from "./defaultValidators";
+import { defaultFormatters } from "./defaultFormatters";
+
+//(mutative) responsible for formatting and then validating the
+
+export const editCellHelper = ({
+  entity,
+  path,
+  schema,
+  columnSchema,
+  newVal
+}) => {
+  let nv = newVal;
+
+  const colSchema =
+    columnSchema || schema?.fields?.find(({ path: p }) => p === path) || {};
+  path = path || colSchema.path;
+  const { format, validate, type } = colSchema;
+  let error;
+  if (nv === undefined && colSchema.defaultValue !== undefined)
+    nv = colSchema.defaultValue;
+
+  if (format) {
+    nv = format(nv, colSchema);
+  }
+  if (defaultFormatters[type]) {
+    nv = defaultFormatters[type](nv, colSchema);
+  }
+  if (validate) {
+    error = validate(nv, colSchema, entity);
+  }
+  if (!error) {
+    const validator =
+      defaultValidators[type] ||
+      type === "string" ||
+      (type === undefined && defaultValidators.string);
+    if (validator) {
+      error = validator(nv, colSchema);
+    }
+  }
+  set(entity, path, nv);
+  return { entity, error };
+};

package/src/filterLocalEntitiesToHasura.js

@@ -0,0 +1,216 @@
+import {
+  isEmpty,
+  every,
+  some,
+  isEqual,
+  isString,
+  isNull,
+  isArray,
+  includes,
+  isObject,
+  has,
+  orderBy
+} from "lodash-es";
+
+export function filterLocalEntitiesToHasura(
+  records,
+  { where, order_by, limit, offset, isInfinite } = {}
+) {
+  let filteredRecords = [...records];
+
+  // Apply where clause if it exists
+  if (where) {
+    filteredRecords = applyWhereClause(filteredRecords, where);
+  }
+
+  // Apply order_by if it exists
+  if (order_by) {
+    filteredRecords = applyOrderBy(filteredRecords, order_by);
+  }
+
+  // Store the complete filtered and ordered records for pagination info
+  const allFilteredRecords = [...filteredRecords];
+
+  // Apply limit and offset
+  if (!isInfinite && offset !== undefined) {
+    filteredRecords = filteredRecords.slice(offset);
+  }
+
+  if (!isInfinite && limit !== undefined) {
+    filteredRecords = filteredRecords.slice(0, limit);
+  }
+
+  // For consistency, always return an object with entities, entitiesAcrossPages, and entityCount
+  return {
+    entities: filteredRecords,
+    entitiesAcrossPages: allFilteredRecords,
+    entityCount: allFilteredRecords.length
+  };
+}
+
+function applyWhereClause(records, where) {
+  function applyFilter(record, filter) {
+    if (isEmpty(filter)) {
+      return true; // No filter, all records pass
+    }
+
+    for (const key in filter) {
+      if (key === "_and") {
+        if (!every(filter[key], subFilter => applyFilter(record, subFilter))) {
+          return false;
+        }
+      } else if (key === "_or") {
+        if (!some(filter[key], subFilter => applyFilter(record, subFilter))) {
+          return false;
+        }
+      } else if (key === "_not") {
+        if (applyFilter(record, filter[key])) {
+          return false;
+        }
+      } else {
+        const value = record[key];
+        const conditions = filter[key];
+
+        for (const operator in conditions) {
+          const conditionValue = conditions[operator];
+
+          // Handle range conditions (_gt/_lt or _gte/_lte combinations)
+          if (operator === "_gt" && conditions._lt) {
+            if (!(value > conditionValue && value < conditions._lt))
+              return false;
+            continue;
+          }
+          if (operator === "_gte" && conditions._lte) {
+            if (!(value >= conditionValue && value <= conditions._lte))
+              return false;
+            continue;
+          }
+
+          switch (operator) {
+            case "_eq":
+              if (!isEqual(value, conditionValue)) return false;
+              break;
+            case "_neq":
+              if (isEqual(value, conditionValue)) return false;
+              break;
+            case "_gt":
+              if (!(value > conditionValue)) return false;
+              break;
+            case "_gte":
+              if (!(value >= conditionValue)) return false;
+              break;
+            case "_lt":
+              if (!(value < conditionValue)) return false;
+              break;
+            case "_lte":
+              if (!(value <= conditionValue)) return false;
+              break;
+            case "_like":
+              if (
+                !isString(value) ||
+                !new RegExp(conditionValue.replace(/%/g, ".*")).test(value)
+              )
+                return false;
+              break;
+            case "_ilike":
+              if (
+                !isString(value) ||
+                !new RegExp(conditionValue.replace(/%/g, ".*"), "i").test(value)
+              )
+                return false;
+              break;
+            case "_nlike":
+              if (
+                !isString(value) ||
+                new RegExp(conditionValue.replace(/%/g, ".*")).test(value)
+              )
+                return false;
+              break;
+            case "_nilike":
+              if (
+                !isString(value) ||
+                new RegExp(conditionValue.replace(/%/g, ".*"), "i").test(value)
+              )
+                return false;
+              break;
+            case "_starts_with":
+              if (!isString(value) || !value.startsWith(conditionValue))
+                return false;
+              break;
+            case "_ends_with":
+              if (!isString(value) || !value.endsWith(conditionValue))
+                return false;
+              break;
+            case "_is_null":
+              if (
+                (conditionValue && !isNull(value)) ||
+                (!conditionValue && isNull(value))
+              )
+                return false;
+              break;
+            case "_contains":
+              if (
+                !isArray(value) ||
+                !every(conditionValue, item => includes(value, item))
+              )
+                return false;
+              break;
+            case "_contained_in":
+              if (
+                !isArray(value) ||
+                !every(value, item => includes(conditionValue, item))
+              )
+                return false;
+              break;
+            case "_has_key":
+              if (!isObject(value) || !has(value, conditionValue)) return false;
+              break;
+            case "_has_keys_any":
+              if (
+                !isObject(value) ||
+                !some(conditionValue, item => has(value, item))
+              )
+                return false;
+              break;
+            case "_has_keys_all":
+              if (
+                !isObject(value) ||
+                !every(conditionValue, item => has(value, item))
+              )
+                return false;
+              break;
+            case "_similar":
+              if (
+                !isString(value) ||
+                !new RegExp(conditionValue.replace(/%/g, ".*")).test(value)
+              )
+                return false;
+              break;
+            default:
+              if (operator.startsWith("_")) {
+                console.warn(`Unsupported operator: ${operator}`);
+                return false;
+              } else {
+                console.warn(`Unsupported operator: ${operator}`);
+                return false;
+              }
+          }
+        }
+      }
+    }
+
+    return true;
+  }
+
+  return records.filter(record => applyFilter(record, where));
+}
+
+function applyOrderBy(records, order_by) {
+  const keys = Object.keys(order_by);
+  if (keys.length > 0) {
+    const field = keys[0];
+    const direction = order_by[field] === "asc" ? "asc" : "desc";
+    return orderBy(records, [field], [direction]);
+  }
+  return records;
+}