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

package/src/simplifyHasuraWhere.js

@@ -0,0 +1,80 @@
+export function simplifyHasuraWhere(whereClause) {
+  const simplifiedWhere = {};
+
+  for (const key in whereClause) {
+    // eslint-disable-next-line no-prototype-builtins
+    if (whereClause.hasOwnProperty(key)) {
+      const value = whereClause[key];
+
+      if (
+        typeof value === "object" &&
+        value !== null &&
+        !Array.isArray(value)
+      ) {
+        if (key.includes(".")) {
+          // Handle dot-nested where clauses
+          const keys = key.split(".");
+          let currentObj = simplifiedWhere;
+          for (let i = 0; i < keys.length - 1; i++) {
+            const nestedKey = keys[i];
+            if (!currentObj[nestedKey]) {
+              currentObj[nestedKey] = {};
+            }
+            currentObj = currentObj[nestedKey];
+          }
+          if (typeof value === "object" && value !== null && "_eq" in value) {
+            currentObj[keys[keys.length - 1]] = value;
+          } else {
+            currentObj[keys[keys.length - 1]] = { _eq: value };
+          }
+        } else {
+          // Handle regular Hasura operators or already nested objects.
+          if (
+            typeof value === "object" &&
+            value !== null &&
+            !("_eq" in value) &&
+            !("_gt" in value) &&
+            !("_lt" in value) &&
+            !("_gte" in value) &&
+            !("_lte" in value) &&
+            !("_in" in value) &&
+            !("_nin" in value) &&
+            !("_neq" in value) &&
+            !("_like" in value) &&
+            !("_nlike" in value) &&
+            !("_ilike" in value) &&
+            !("_nilike" in value) &&
+            !("_similar" in value) &&
+            !("_nsimilar" in value) &&
+            !("_regex" in value) &&
+            !("_nregex" in value) &&
+            !("_iregex" in value) &&
+            !("_niregex" in value)
+          ) {
+            simplifiedWhere[key] = simplifyHasuraWhere(value);
+          } else {
+            simplifiedWhere[key] = value;
+          }
+        }
+      } else {
+        // Handle simplified _eq where clauses
+        if (key.includes(".")) {
+          const keys = key.split(".");
+          let currentObj = simplifiedWhere;
+          for (let i = 0; i < keys.length - 1; i++) {
+            const nestedKey = keys[i];
+            if (!currentObj[nestedKey]) {
+              currentObj[nestedKey] = {};
+            }
+            currentObj = currentObj[nestedKey];
+          }
+          currentObj[keys[keys.length - 1]] = { _eq: value };
+        } else {
+          simplifiedWhere[key] = { _eq: value };
+        }
+      }
+    }
+  }
+
+  return simplifiedWhere;
+}

package/src/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/style.css

@@ -0,0 +1,29 @@
+/* Copyright (C) 2018 TeselaGen Biotechnology, Inc. */
+.tg-timeline {
+  position: relative;
+  white-space: nowrap;
+}
+
+.tg-timeline-line {
+  position: absolute;
+  height: 90%;
+  border-left: 2px solid #bfccd6;
+  top: 3px;
+  left: 5px;
+}
+
+.tg-timeline-event {
+  margin-bottom: 15px;
+}
+
+.tg-timeline-circle {
+  width: 12px;
+  min-width: 12px;
+  height: 12px;
+  min-height: 12px;
+  z-index: 1;
+  margin-right: 10px;
+  border-radius: 100px;
+  background: #e1e8ed;
+  border: 2px solid #137cbd;
+}

package/src/tableQueryParamsToHasuraClauses.js

@@ -0,0 +1,113 @@
+export function tableQueryParamsToHasuraClauses({
+  page,
+  pageSize,
+  searchTerm,
+  filters,
+  order,
+  schema, // Add schema as a parameter
+  additionalFilter
+}) {
+  let where = {};
+  const order_by = {};
+  const limit = pageSize || 25;
+  const offset = page && pageSize ? (page - 1) * pageSize : 0;
+
+  if (searchTerm) {
+    const searchTermFilters = [];
+    schema.fields.forEach(field => {
+      const { type, path, searchDisabled } = field;
+      if (searchDisabled || field.filterDisabled || type === "color") return;
+      const filterValue = searchTerm; // No cleaning needed here, we're using _ilike
+
+      if (type === "string" || type === "lookup") {
+        searchTermFilters.push({
+          [path]: { _ilike: `%${filterValue}%` }
+        });
+      } else if (type === "boolean") {
+        let regex;
+        try {
+          regex = new RegExp("^" + searchTerm, "ig");
+        } catch (error) {
+          //ignore
+        }
+        if (regex) {
+          if ("true".replace(regex, "") !== "true") {
+            searchTermFilters.push({
+              [path]: { _eq: true }
+            });
+          } else if ("false".replace(regex, "") !== "false") {
+            searchTermFilters.push({
+              [path]: { _eq: false }
+            });
+          }
+        }
+      } else if (
+        (type === "number" || type === "integer") &&
+        !isNaN(filterValue)
+      ) {
+        searchTermFilters.push({
+          [path]: { _eq: parseFloat(filterValue) }
+        });
+      }
+    });
+    if (searchTermFilters.length > 0) {
+      if (Object.keys(where).length > 0) {
+        where = { _and: [where, { _or: searchTermFilters }] };
+      } else {
+        where = { _or: searchTermFilters };
+      }
+    }
+  }
+
+  if (filters && filters.length > 0) {
+    const filterClauses = filters.map(filter => {
+      const { selectedFilter, filterOn, filterValue } = filter;
+      switch (selectedFilter) {
+        case "textContains":
+          return { [filterOn]: { _ilike: `%${filterValue}%` } };
+        case "textEquals":
+          return { [filterOn]: { _eq: filterValue } };
+        case "textNotEquals":
+          return { [filterOn]: { _neq: filterValue } };
+        case "numberEquals":
+          return { [filterOn]: { _eq: parseFloat(filterValue) } };
+        case "numberGreaterThan":
+          return { [filterOn]: { _gt: parseFloat(filterValue) } };
+        case "numberLessThan":
+          return { [filterOn]: { _lt: parseFloat(filterValue) } };
+        case "numberGreaterThanEquals":
+          return { [filterOn]: { _gte: parseFloat(filterValue) } };
+        case "numberLessThanEquals":
+          return { [filterOn]: { _lte: parseFloat(filterValue) } };
+        case "isNull":
+          return { [filterOn]: { _is_null: true } };
+        case "isNotNull":
+          return { [filterOn]: { _is_null: false } };
+        default:
+          console.warn(`Unsupported filter type: ${selectedFilter}`);
+          return {};
+      }
+    });
+
+    if (filterClauses.length > 0) {
+      if (Object.keys(where).length > 0) {
+        where = { _and: [where, ...filterClauses] };
+      } else {
+        where = { _and: filterClauses };
+      }
+    }
+  }
+
+  if (order && order.length > 0) {
+    order.forEach(item => {
+      const field = item.startsWith("-") ? item.substring(1) : item;
+      const direction = item.startsWith("-") ? "desc" : "asc";
+      order_by[field] = direction;
+    });
+  }
+
+  if (additionalFilter) {
+    where = { _and: [where, additionalFilter] };
+  }
+  return { where, order_by, limit, offset };
+}

package/src/tagUtils.js

@@ -0,0 +1,45 @@
+import { flatMap, keyBy } from "lodash-es";
+import determineBlackOrWhiteTextColor from "./determineBlackOrWhiteTextColor";
+
+export function getTagsAndTagOptions(allTags) {
+  return flatMap(allTags, tag => {
+    if (tag.tagOptions && tag.tagOptions.length) {
+      return tag.tagOptions.map(tagO => {
+        const fullname = `${tag.name}: ${tagO.name}`;
+        const value = `${tag.id}:${tagO.id}`;
+        return {
+          ...tagO,
+          label: fullname,
+          value,
+          id: tagO.id
+        };
+      });
+    }
+    return {
+      ...tag,
+      label: tag.name,
+      value: tag.id
+    };
+  });
+}
+
+export function getKeyedTagsAndTagOptions(tags) {
+  return keyBy(getTagsAndTagOptions(tags), "value");
+}
+
+export function getTagColorStyle(color) {
+  return color
+    ? {
+        style: {
+          backgroundColor: color,
+          color: determineBlackOrWhiteTextColor(color)
+        }
+      }
+    : {};
+}
+export function getTagProps({ color, label, name }) {
+  return {
+    ...getTagColorStyle(color),
+    children: label || name
+  };
+}

package/src/tgFormValues.js

@@ -0,0 +1,35 @@
+import React, { useMemo } from "react";
+import { connect } from "react-redux";
+import { FormName, formValueSelector } from "redux-form";
+
+const tgFormValues =
+  (...fieldNames) =>
+  Component =>
+  props => {
+    return (
+      <FormName>
+        {formName => {
+          const name = formName.form;
+          const Wrapped = useMemo(() => {
+            const selector = formValueSelector(name || "");
+            const wrapper = connect(state => {
+              const vals = {};
+              fieldNames.forEach(name => {
+                vals[name] = selector(state, name);
+              });
+              return vals;
+            });
+            return wrapper(Component);
+          }, [name]);
+          return <Wrapped {...props} />;
+        }}
+      </FormName>
+    );
+  };
+export default tgFormValues;
+
+export const tgFormValueSelector = (formName, ...fields) => {
+  return connect(state => {
+    return formValueSelector(formName)(state, ...fields);
+  });
+};

package/src/tg_modalState.js

@@ -0,0 +1,47 @@
+import { omit } from "lodash-es";
+
+export default function tg_modalState(
+  state = {},
+  { type, name, uniqueName, props = {} }
+) {
+  const existingModalState = state[name] || {};
+  const { __registeredAs = {} } = existingModalState;
+  if (type === "TG_REGISTER_MODAL") {
+    return {
+      ...state,
+      [name]: {
+        ...existingModalState,
+        __registeredAs: { ...__registeredAs, [uniqueName]: true }
+      }
+    };
+  }
+  if (type === "TG_UNREGISTER_MODAL") {
+    return {
+      ...state,
+      [name]: {
+        ...existingModalState,
+        __registeredAs: omit(__registeredAs, uniqueName)
+      }
+    };
+  }
+  if (type === "TG_SHOW_MODAL") {
+    return {
+      ...state,
+      [name]: {
+        ...existingModalState,
+        ...props,
+        open: true
+      }
+    };
+  }
+  if (type === "TG_HIDE_MODAL") {
+    return {
+      ...state,
+      [name]: {
+        __registeredAs: existingModalState.__registeredAs,
+        open: false
+      }
+    };
+  }
+  return state;
+}

package/src/throwFormError.js

@@ -0,0 +1,16 @@
+import { SubmissionError } from "redux-form";
+
+export const throwFormError = error => {
+  if (error.message) {
+    console.error("error:", error);
+  }
+  const errorToUse = error.message
+    ? { _error: error.message }
+    : typeof error === "string"
+    ? { _error: error }
+    : error;
+  if (!errorToUse._error) {
+    errorToUse._error = "Error Submitting Form";
+  }
+  throw new SubmissionError(errorToUse);
+};

package/src/toastr.js

@@ -0,0 +1,148 @@
+import { Position, Toaster, Intent, Classes } from "@blueprintjs/core";
+import classNames from "classnames";
+
+const TopToaster = Toaster.create({
+  className: "top-toaster",
+  position: Position.TOP
+});
+
+const BottomToaster = Toaster.create({
+  className: "bottom-toaster",
+  position: Position.BOTTOM
+});
+
+window.__tgClearAllToasts = () => {
+  TopToaster.clear();
+  BottomToaster.clear();
+};
+
+let counter = 5000;
+const generateToast = intent => (message, options) => {
+  options = options || {};
+  const toastToUse = options.bottom ? BottomToaster : TopToaster;
+  let updatedTimeout;
+  if (options.updateTimeout) {
+    //generate a slightly different than default timeout to make the update stay on the page for a full 5 seconds
+    if (counter > 5500) {
+      updatedTimeout = --counter;
+    } else {
+      updatedTimeout = ++counter;
+    }
+  }
+  if (intent === Intent.DANGER) {
+    console.error("Toastr error message: ", message);
+  }
+  if (intent === Intent.WARNING) {
+    console.error("Toastr warning message: ", message);
+  }
+
+  const maybeAddClearAll = () => {
+    // wipe any existing clear all buttons
+    const existingClearAllButtons =
+      document.querySelectorAll(`.tg-clear-all-toasts`);
+    existingClearAllButtons.forEach(button => {
+      button.remove();
+    });
+    const activeToasts = document.querySelectorAll(
+      `.bp3-toast:not(.bp3-toast-exit)`
+    );
+    if (activeToasts.length > 1) {
+      // add custom clear all button
+
+      const topToaster = document.querySelector(`.bp3-toast`);
+      if (!topToaster) return;
+      const closeButton = document.createElement("div");
+      closeButton.classList.add(
+        Classes.BUTTON,
+        Classes.LARGE,
+        Classes.INTENT_PRIMARY,
+        "tg-clear-all-toasts"
+      );
+      closeButton.innerText = "Clear all";
+      closeButton.onclick = window.__tgClearAllToasts;
+      // position the button to the right of the message
+      closeButton.style.position = "absolute";
+      closeButton.style.right = "-100px";
+
+      topToaster.appendChild(closeButton);
+    }
+  };
+  const uniqKey = toastToUse.show(
+    {
+      intent,
+      message,
+      onDismiss: () => {
+        if (options.onDismiss) {
+          options.onDismiss();
+        }
+        setTimeout(() => {
+          maybeAddClearAll();
+        }, 0);
+      },
+      timeout:
+        options.timeout ||
+        updatedTimeout ||
+        (!window.Cypress &&
+        (intent === Intent.DANGER || intent === Intent.WARNING)
+          ? 60000
+          : undefined),
+      action: options.action,
+      icon: options.icon,
+      className: classNames("preserve-newline", options.className)
+    },
+    options.key
+  );
+  setTimeout(() => {
+    maybeAddClearAll();
+  }, 0);
+  function clear() {
+    toastToUse.dismiss(uniqKey);
+    setTimeout(() => {
+      maybeAddClearAll();
+    }, 0);
+  }
+  clear.key = uniqKey;
+  return clear;
+};
+
+function preventDuplicates(func) {
+  const previousToasts = {};
+  return (message, options = {}) => {
+    const clearToast = func(message, options);
+    // no duplicate check for toasts with updates
+
+    if (!options.key) {
+      if (!options.key && previousToasts[message]) {
+        previousToasts[message](); //clear it!
+      }
+
+      setTimeout(() => {
+        delete previousToasts[message];
+      }, options.timeout || 5000);
+
+      previousToasts[message] = clearToast;
+    }
+    return clearToast;
+  };
+}
+
+if (!window.toastr) window.toastr = {};
+if (!window.toastr.success) {
+  window.toastr.success = preventDuplicates(generateToast(Intent.SUCCESS));
+}
+
+if (!window.toastr.error) {
+  window.toastr.error = preventDuplicates(generateToast(Intent.DANGER));
+}
+
+if (!window.toastr.warning) {
+  window.toastr.warning = preventDuplicates(generateToast(Intent.WARNING));
+}
+
+if (!window.toastr.info) {
+  window.toastr.info = preventDuplicates(generateToast(Intent.PRIMARY));
+}
+
+if (!window.toastr.default) {
+  window.toastr.default = preventDuplicates(generateToast(Intent.NONE));
+}