@teselagen/ui 0.7.32 → 0.7.33-beta.2

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

@@ -1,265 +1,29 @@
-:root {
-  --base1: #ffffff;
-  --base2: #cdcdcd;
-}
-
-body.bp3-dark {
-  --base1: #393a3a;
-  --base2: #293742;
-}
-
-.bp3-dark .tg-card {
-  background: #394b59 !important;
-}
-
-.preserve-newline {
-  white-space: pre-line;
-}
-
-.bp3-dialog {
-  max-width: 100vw;
-}
-
-/* adding back in blueprint v2 default styling to all <h/> elements */
-h1 {
-  line-height: 40px;
-  font-size: 36px;
-}
-
-h2 {
-  line-height: 32px;
-  font-size: 28px;
-}
-
-h3 {
-  line-height: 25px;
-  font-size: 22px;
-}
-
-h4 {
-  line-height: 21px;
-  font-size: 18px;
-}
-
-h5 {
-  line-height: 19px;
-  font-size: 16px;
-}
-
-h6 {
-  line-height: 16px;
-  font-size: 14px;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-h1.bp3-heading,
-h2.bp3-heading,
-h3.bp3-heading,
-h4.bp3-heading,
-h5.bp3-heading,
-h6.bp3-heading {
-  color: #182026;
-  font-weight: 300;
-  margin: 0 0 10px;
-  padding: 0;
-  line-height: normal;
-}
-
-.bp3-dark h1,
-.bp3-dark h2,
-.bp3-dark h3,
-.bp3-dark h4,
-.bp3-dark h5,
-.bp3-dark h6 {
-  color: #f5f8fa;
-}
-.bp3-dark textarea {
-  background: #293742;
-  color: #f5f8fa;
-}
-
-/* bp3 fix https://github.com/palantir/blueprint/issues/2807 */
-.bp3-popover-wrapper {
-  display: inline-block;
+/* Copyright (C) 2018 TeselaGen Biotechnology, Inc. */
+.tg-timeline {
   position: relative;
-  vertical-align: top;
-}
-/* this line is necessary otherwise the line above setting "position: relative;" caused nested long bp3 submenus to not appear correctly when using the fix below */
-.bp3-submenu .bp3-popover-wrapper {
-  position: unset;
-}
-/* this fixes https://github.com/palantir/blueprint/issues/4791 but requires the "position: unset;" fix above */
-.bp3-submenu > * > .bp3-menu {
-  max-height: 96vh;
-  overflow: auto;
-}
-
-/* bp3 fix https://github.com/palantir/blueprint/issues/2807 */
-span.bp3-popover-target {
-  display: block;
-}
-
-.bp3-portal {
-  z-index: 100000;
-}
-.bp3-switch {
-  width: fit-content;
-  display: flex;
-  align-items: center;
-}
-
-.Select {
-  min-width: 170px;
-}
-
-/* override the default blueprint input focus to instead rely on an inset box shadow. This resolves any issues with overflow:hidden cutting off input box shadows */
-.bp3-dark .bp3-input:focus,
-.bp3-input:focus {
-  box-shadow: inset 0 0 3px 1px #137cbd;
-}
-
-.notClickable {
-  cursor: default !important;
-}
-.bp3-toast-container {
-  z-index: 100001;
+  white-space: nowrap;
 }
 
-.link-button {
-  background: none !important;
-  border: none;
-  padding: 0 !important;
-  font-family: arial, sans-serif;
-  color: rgb(0, 151, 227);
-  /* text-decoration: underline; */
-  cursor: pointer;
-}
-.link-button:hover {
-  color: rgb(98, 198, 248);
-  text-decoration: underline;
-}
-
-.above-dialog {
-  z-index: 100001;
-}
-
-code {
-  display: block;
-  white-space: pre-wrap;
-}
-
-.bp3-toast.no-close-button [aria-label="Close"] {
-  display: none;
-}
-
-.isDataTitle .tippy-box[data-theme~="teselagen"] .tippy-arrow {
-  opacity: 0 !important;
-}
-.isDataTitle .tippy-box[data-theme~="teselagen"] {
-  background-color: #4f4a50f4 !important;
-  border-radius: 0 !important;
-  color: #f3f3f3 !important;
-  font-size: 11px !important;
-  white-space: pre-wrap;
-  padding: 0px 0px !important;
-}
-
-[data-tippy-root]:has(.tippy-box[data-theme~="teselagen"]) {
-  z-index: 100000 !important;
-}
-
-[data-tippy-root] .tippy-box[data-theme~="teselagen"] {
-  background-color: #394b59;
-  color: #f5f8fa;
-  padding: 4px 4px;
-  word-break: break-word;
-}
-[data-tippy-root] .tippy-box[data-theme~="teselagen"] .tippy-arrow {
-  color: #394b59;
-}
-.bp3-dark [data-tippy-root] .tippy-box[data-theme~="teselagen"] {
-  background-color: #e1e8ed;
-  color: #394b59;
-}
-.bp3-dark [data-tippy-root] .tippy-box[data-theme~="teselagen"] .tippy-arrow {
-  /* background-color: #e1e8ed; */
-  color: #e1e8ed;
-}
-.isCellEditable .rt-td {
-  position: relative;
-}
-
-.ReactTable .tg-cell-edit-boolean-checkbox {
-  margin-bottom: 0;
-}
-
-.cellDragHandle {
-  height: 8px;
-  width: 8px;
-  cursor: crosshair;
-  border: 1px solid rgb(255, 255, 255);
-  background-color: rgb(76, 107, 171);
+.tg-timeline-line {
   position: absolute;
-  bottom: -4px;
-  right: -4px;
-}
-
-/* make AnchorButton match Button */
-.bp3-button {
-  font-family: Arial;
-}
-
-button {
-  transition: all 0.2s ease-in-out;
-}
-
-button:not(:disabled):active {
-  transform: translateY(1px);
-}
-.bp3-tabs.bp3-vertical > .bp3-tab-panel {
-  min-width: 0px;
-}
-.bp3-toast[class*="bp3-intent-"] .bp3-button.tg-clear-all-toasts {
-  border: 1px solid white !important;
-}
-.bp3-toast[class*="bp3-intent-"] .bp3-button.tg-clear-all-toasts:hover {
-  /* background: blue !important; */
-  /* background: unset !important; */
-  background-color: #137cbd !important;
-}
-
-/* .bp3-toast .tg-clear-all-toasts {
-  background: unset !important;
-  color: unset !important;
-  padding: unset !important;
-  margin: unset !important;
-  font-size: unset !important;
-  line-height: unset !important;
-  border: unset !important;
-  box-shadow: unset !important;
-  text-align: unset !important;
-  cursor: pointer !important;
-} */
-
-.bp3-dialog-header .bp3-heading {
-  width: 10px; /* tnw: this is a hack to prevent the dialog title from causing the dialog width to expand larger than the dialog content*/
-}
-
-/* to fix tooltip styling issue - https://github.com/palantir/blueprint/issues/3430 */
-.bp3-popover[style*="transform-origin"][style*="bottom"] .bp3-popover-arrow {
-  transform: translate(0, -0.5px);
-}
-.bp3-popover[style*="transform-origin"][style*="left"] .bp3-popover-arrow {
-  transform: translate(0.5px, 0);
-}
-.bp3-popover[style*="transform-origin"][style*="top"] .bp3-popover-arrow {
-  transform: translate(0, 0.5px);
-}
-.bp3-popover[style*="transform-origin"][style*="right"] .bp3-popover-arrow {
-  transform: translate(-0.5px, 0);
+  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/{DataTable/utils/withTableParams.js → withTableParams.js}

@@ -32,7 +32,6 @@ import { branch, compose } from "recompose";
 export const useTableParams = props => {
   const {
     additionalFilter,
-    additionalOrFilter,
     controlled_pageSize,
     defaults: _defaults,
     doNotCoercePageSize,
@@ -166,16 +165,6 @@ export const useTableParams = props => {
   );
 
   const queryParams = useMemo(() => {
-    const additionalFilterToUse =
-      typeof additionalFilter === "function"
-        ? additionalFilter
-        : () => additionalFilter;
-
-    const additionalOrFilterToUse =
-      typeof additionalOrFilter === "function"
-        ? additionalOrFilter
-        : () => additionalOrFilter;
-
     return getQueryParams({
       doNotCoercePageSize,
       currentParams,
@@ -185,8 +174,7 @@ export const useTableParams = props => {
       schema: convertedSchema,
       isInfinite: isInfinite || (isSimple && !withPaging),
       isLocalCall,
-      additionalFilter: additionalFilterToUse,
-      additionalOrFilter: additionalOrFilterToUse,
+      additionalFilter,
       noOrderError,
       isCodeModel,
       ownProps: passingProps
@@ -194,7 +182,6 @@ export const useTableParams = props => {
   }, [
     additionalFilter,
     passingProps,
-    additionalOrFilter,
     doNotCoercePageSize,
     currentParams,
     entities,

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