@teselagen/ui 0.7.33-beta.3 → 0.7.33-beta.5

package/DataTable/utils/queryParams.d.ts

@@ -3,12 +3,6 @@ export function getMergedOpts(topLevel?: {}, instanceLevel?: {}): {
     defaults: any;
     formName: string;
 };
-/**
- *
- * @param {object} field
- * @returns the camelCase display name of the field, to be used for filters, sorting, etc
- */
-export function getCCDisplayName(field: object): string;
 export function getCurrentParamsFromUrl(location: any, isSimple: any): any;
 export function setCurrentParamsOnUrl(newParams: any, replace: any, isSimple: any): void;
 export function makeDataTableHandlers({ setNewParams, defaults, onlyOneFilter }: {
@@ -25,7 +19,7 @@ export function makeDataTableHandlers({ setNewParams, defaults, onlyOneFilter }:
     setOrder: (order: any, isRemove: any, shiftHeld: any) => any;
     setNewParams: any;
 };
-export function getQueryParams({ currentParams, defaults, schema, isInfinite, entities, isLocalCall, additionalFilter, doNotCoercePageSize, ownProps }: {
+export function getQueryParams({ currentParams, defaults, schema, isInfinite, entities, isLocalCall, additionalFilter, doNotCoercePageSize, noOrderError, ownProps }: {
     currentParams: any;
     defaults: any;
     schema: any;
@@ -34,6 +28,7 @@ export function getQueryParams({ currentParams, defaults, schema, isInfinite, en
     isLocalCall: any;
     additionalFilter: any;
     doNotCoercePageSize: any;
+    noOrderError: any;
     ownProps: any;
 }): {
     entities: any[];
@@ -48,7 +43,7 @@ export function getQueryParams({ currentParams, defaults, schema, isInfinite, en
     };
     page: any;
     pageSize: any;
-    order: any;
+    order: any[];
     filters: any;
     searchTerm: any;
 };

package/DataTable/utils/tableQueryParamsToHasuraClauses.d.ts

@@ -12,3 +12,15 @@ export function tableQueryParamsToHasuraClauses({ page, pageSize, searchTerm, fi
     limit: any;
     offset: number;
 };
+/**
+ * Takes a schema and returns an object with the fields mapped by their camelCased display name.
+ * If the displayName is not set or is a jsx element, the path is used instead.
+ * The same conversion must be done when using the result of this method
+ */
+export function getFieldsMappedByCCDisplayName(schema: any): any;
+/**
+ *
+ * @param {object} field
+ * @returns the camelCase display name of the field, to be used for filters, sorting, etc
+ */
+export function getCCDisplayName(field: object): string;

package/index.cjs.js

@@ -19402,6 +19402,7 @@ function tableQueryParamsToHasuraClauses({
   // Add schema as a parameter
   additionalFilter
 }) {
+  const ccFields = getFieldsMappedByCCDisplayName(schema);
   let where = {};
   const order_by = {};
   const limit = pageSize || 25;
@@ -19449,28 +19450,124 @@ function tableQueryParamsToHasuraClauses({
   }
   if (filters && filters.length > 0) {
     const filterClauses = filters.map((filter2) => {
-      const { selectedFilter, filterOn, filterValue } = filter2;
+      let { selectedFilter, filterOn, filterValue } = filter2;
+      const fieldSchema = ccFields[filterOn] || {};
+      const { path: path2, reference: reference2, type: type2 } = fieldSchema;
+      let stringFilterValue = filterValue && filterValue.toString ? filterValue.toString() : filterValue;
+      if (stringFilterValue === false) {
+        stringFilterValue = "false";
+      } else {
+        stringFilterValue = stringFilterValue || "";
+      }
+      const arrayFilterValue = Array.isArray(filterValue) ? filterValue : stringFilterValue.split(";");
+      if (type2 === "number" || type2 === "integer") {
+        filterValue = Array.isArray(filterValue) ? filterValue.map((val) => Number(val)) : Number(filterValue);
+      }
+      if (fieldSchema.normalizeFilter) {
+        filterValue = fieldSchema.normalizeFilter(
+          filterValue,
+          selectedFilter,
+          filterOn
+        );
+      }
+      if (reference2) {
+        filterOn = reference2.sourceField;
+      } else {
+        filterOn = path2 || filterOn;
+      }
       switch (selectedFilter) {
-        case "textContains":
+        case "none":
+          return {};
+        case "startsWith":
+          return { [filterOn]: { _ilike: `${filterValue}%` } };
+        case "endsWith":
+          return { [filterOn]: { _ilike: `%${filterValue}` } };
+        case "contains":
           return { [filterOn]: { _ilike: `%${filterValue}%` } };
-        case "textEquals":
+        case "notContains":
+          return { [filterOn]: { _not_ilike: `%${filterValue}%` } };
+        case "isExactly":
           return { [filterOn]: { _eq: filterValue } };
-        case "textNotEquals":
-          return { [filterOn]: { _neq: filterValue } };
-        case "numberEquals":
-          return { [filterOn]: { _eq: parseFloat(filterValue) } };
-        case "numberGreaterThan":
+        case "isEmpty":
+          return {
+            _or: [
+              { [filterOn]: { _eq: "" } },
+              { [filterOn]: { _is_null: true } }
+            ]
+          };
+        case "notEmpty":
+          return {
+            _and: [
+              { [filterOn]: { _neq: "" } },
+              { [filterOn]: { _is_null: false } }
+            ]
+          };
+        case "inList":
+          return { [filterOn]: { _in: filterValue } };
+        case "notInList":
+          return { [filterOn]: { _nin: filterValue } };
+        case "true":
+          return { [filterOn]: { _eq: true } };
+        case "false":
+          return { [filterOn]: { _eq: false } };
+        case "dateIs":
+          return { [filterOn]: { _eq: filterValue } };
+        case "notBetween":
+          return {
+            _or: [
+              {
+                [filterOn]: {
+                  _lt: new Date(arrayFilterValue[0])
+                }
+              },
+              {
+                [filterOn]: {
+                  _gt: new Date(new Date(arrayFilterValue[1]).setHours(23, 59))
+                }
+              }
+            ]
+          };
+        case "isBetween":
+          return {
+            [filterOn]: {
+              _gte: new Date(arrayFilterValue[0]),
+              _lte: new Date(new Date(arrayFilterValue[1]).setHours(23, 59))
+            }
+          };
+        case "isBefore":
+          return { [filterOn]: { _lt: new Date(filterValue) } };
+        case "isAfter":
+          return { [filterOn]: { _gt: new Date(filterValue) } };
+        case "greaterThan":
           return { [filterOn]: { _gt: parseFloat(filterValue) } };
-        case "numberLessThan":
+        case "lessThan":
           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 } };
+        case "inRange":
+          return {
+            [filterOn]: {
+              _gte: parseFloat(arrayFilterValue[0]),
+              _lte: parseFloat(arrayFilterValue[1])
+            }
+          };
+        case "outsideRange":
+          return {
+            _or: [
+              {
+                [filterOn]: {
+                  _lt: parseFloat(arrayFilterValue[0])
+                }
+              },
+              {
+                [filterOn]: {
+                  _gt: parseFloat(arrayFilterValue[1])
+                }
+              }
+            ]
+          };
+        case "equalTo":
+          return { [filterOn]: { _eq: parseFloat(filterValue) } };
+        case "regex":
+          return { [filterOn]: { _regex: filterValue } };
         default:
           console.warn(`Unsupported filter type: ${selectedFilter}`);
           return {};
@@ -19497,6 +19594,21 @@ function tableQueryParamsToHasuraClauses({
   return { where, order_by, limit, offset: offset3 };
 }
 __name(tableQueryParamsToHasuraClauses, "tableQueryParamsToHasuraClauses");
+function getFieldsMappedByCCDisplayName(schema) {
+  if (!schema || !schema.fields) return {};
+  return schema.fields.reduce((acc, field) => {
+    const ccDisplayName = getCCDisplayName(field);
+    acc[ccDisplayName] = field;
+    return acc;
+  }, {});
+}
+__name(getFieldsMappedByCCDisplayName, "getFieldsMappedByCCDisplayName");
+function getCCDisplayName(field) {
+  return camelCase(
+    typeof field.displayName === "string" ? field.displayName : field.path
+  );
+}
+__name(getCCDisplayName, "getCCDisplayName");
 function filterLocalEntitiesToHasura(records, { where, order_by, limit, offset: offset3, isInfinite } = {}) {
   let filteredRecords = [...records];
   if (where) {
@@ -19526,10 +19638,16 @@ function applyWhereClause(records, where) {
     }
     for (const key in filter2) {
       if (key === "_and") {
+        if (isEmpty$1(filter2[key])) {
+          continue;
+        }
         if (!every(filter2[key], (subFilter) => applyFilter(record, subFilter))) {
           return false;
         }
       } else if (key === "_or") {
+        if (isEmpty$1(filter2[key])) {
+          continue;
+        }
         if (!some(filter2[key], (subFilter) => applyFilter(record, subFilter))) {
           return false;
         }
@@ -19685,12 +19803,6 @@ function safeParse(val) {
   }
 }
 __name(safeParse, "safeParse");
-function getCCDisplayName(field) {
-  return camelCase(
-    typeof field.displayName === "string" ? field.displayName : field.path
-  );
-}
-__name(getCCDisplayName, "getCCDisplayName");
 function getCurrentParamsFromUrl(location2, isSimple) {
   let { search: search2 } = location2;
   if (isSimple) {
@@ -19859,7 +19971,7 @@ function getQueryParams({
   isLocalCall,
   additionalFilter,
   doNotCoercePageSize,
-  // noOrderError,
+  noOrderError,
   // isCodeModel,
   ownProps
 }) {
@@ -19883,11 +19995,31 @@ function getQueryParams({
     )[0];
     pageSize = closest;
   }
+  const cleanedOrder = [];
+  if (order2 && order2.length) {
+    const ccFields = getFieldsMappedByCCDisplayName(schema);
+    order2.forEach((orderVal) => {
+      const ccDisplayName = orderVal.replace(/^-/gi, "");
+      const schemaForField = ccFields[ccDisplayName];
+      if (schemaForField) {
+        const { path: path2 } = schemaForField;
+        const reversed = ccDisplayName !== orderVal;
+        const prefix2 = reversed ? "-" : "";
+        cleanedOrder.push(prefix2 + path2);
+      } else {
+        !noOrderError && console.error(
+          "No schema for field found!",
+          ccDisplayName,
+          JSON.stringify(schema.fields, null, 2)
+        );
+      }
+    });
+  }
   const toReturn = {
     //these are values that might be generally useful for the wrapped component
     page,
     pageSize: ownProps.controlled_pageSize || pageSize,
-    order: order2,
+    order: cleanedOrder,
     filters,
     searchTerm
   };
@@ -19896,19 +20028,20 @@ function getQueryParams({
     pageSize,
     searchTerm,
     filters,
-    order: order2,
+    order: cleanedOrder,
     schema
   });
   initializeHasuraWhereAndFilter(additionalFilter, where, currentParams);
   addCustomColumnFilters(where, schema.fields, currentParams);
   if (isLocalCall) {
-    return filterLocalEntitiesToHasura(entities, {
+    const toRet = filterLocalEntitiesToHasura(entities, {
       where,
       order_by,
       limit,
       offset: offset3,
       isInfinite
     });
+    return toRet;
   } else {
     return __spreadProps(__spreadValues({}, toReturn), {
       variables: {
@@ -71628,6 +71761,7 @@ const useTableParams = /* @__PURE__ */ __name((props) => {
       isInfinite: isInfinite || isSimple && !withPaging,
       isLocalCall,
       additionalFilter,
+      noOrderError,
       ownProps: passingProps
     });
   }, [

package/index.es.js

@@ -19384,6 +19384,7 @@ function tableQueryParamsToHasuraClauses({
   // Add schema as a parameter
   additionalFilter
 }) {
+  const ccFields = getFieldsMappedByCCDisplayName(schema);
   let where = {};
   const order_by = {};
   const limit = pageSize || 25;
@@ -19431,28 +19432,124 @@ function tableQueryParamsToHasuraClauses({
   }
   if (filters && filters.length > 0) {
     const filterClauses = filters.map((filter2) => {
-      const { selectedFilter, filterOn, filterValue } = filter2;
+      let { selectedFilter, filterOn, filterValue } = filter2;
+      const fieldSchema = ccFields[filterOn] || {};
+      const { path: path2, reference: reference2, type: type2 } = fieldSchema;
+      let stringFilterValue = filterValue && filterValue.toString ? filterValue.toString() : filterValue;
+      if (stringFilterValue === false) {
+        stringFilterValue = "false";
+      } else {
+        stringFilterValue = stringFilterValue || "";
+      }
+      const arrayFilterValue = Array.isArray(filterValue) ? filterValue : stringFilterValue.split(";");
+      if (type2 === "number" || type2 === "integer") {
+        filterValue = Array.isArray(filterValue) ? filterValue.map((val) => Number(val)) : Number(filterValue);
+      }
+      if (fieldSchema.normalizeFilter) {
+        filterValue = fieldSchema.normalizeFilter(
+          filterValue,
+          selectedFilter,
+          filterOn
+        );
+      }
+      if (reference2) {
+        filterOn = reference2.sourceField;
+      } else {
+        filterOn = path2 || filterOn;
+      }
       switch (selectedFilter) {
-        case "textContains":
+        case "none":
+          return {};
+        case "startsWith":
+          return { [filterOn]: { _ilike: `${filterValue}%` } };
+        case "endsWith":
+          return { [filterOn]: { _ilike: `%${filterValue}` } };
+        case "contains":
           return { [filterOn]: { _ilike: `%${filterValue}%` } };
-        case "textEquals":
+        case "notContains":
+          return { [filterOn]: { _not_ilike: `%${filterValue}%` } };
+        case "isExactly":
           return { [filterOn]: { _eq: filterValue } };
-        case "textNotEquals":
-          return { [filterOn]: { _neq: filterValue } };
-        case "numberEquals":
-          return { [filterOn]: { _eq: parseFloat(filterValue) } };
-        case "numberGreaterThan":
+        case "isEmpty":
+          return {
+            _or: [
+              { [filterOn]: { _eq: "" } },
+              { [filterOn]: { _is_null: true } }
+            ]
+          };
+        case "notEmpty":
+          return {
+            _and: [
+              { [filterOn]: { _neq: "" } },
+              { [filterOn]: { _is_null: false } }
+            ]
+          };
+        case "inList":
+          return { [filterOn]: { _in: filterValue } };
+        case "notInList":
+          return { [filterOn]: { _nin: filterValue } };
+        case "true":
+          return { [filterOn]: { _eq: true } };
+        case "false":
+          return { [filterOn]: { _eq: false } };
+        case "dateIs":
+          return { [filterOn]: { _eq: filterValue } };
+        case "notBetween":
+          return {
+            _or: [
+              {
+                [filterOn]: {
+                  _lt: new Date(arrayFilterValue[0])
+                }
+              },
+              {
+                [filterOn]: {
+                  _gt: new Date(new Date(arrayFilterValue[1]).setHours(23, 59))
+                }
+              }
+            ]
+          };
+        case "isBetween":
+          return {
+            [filterOn]: {
+              _gte: new Date(arrayFilterValue[0]),
+              _lte: new Date(new Date(arrayFilterValue[1]).setHours(23, 59))
+            }
+          };
+        case "isBefore":
+          return { [filterOn]: { _lt: new Date(filterValue) } };
+        case "isAfter":
+          return { [filterOn]: { _gt: new Date(filterValue) } };
+        case "greaterThan":
           return { [filterOn]: { _gt: parseFloat(filterValue) } };
-        case "numberLessThan":
+        case "lessThan":
           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 } };
+        case "inRange":
+          return {
+            [filterOn]: {
+              _gte: parseFloat(arrayFilterValue[0]),
+              _lte: parseFloat(arrayFilterValue[1])
+            }
+          };
+        case "outsideRange":
+          return {
+            _or: [
+              {
+                [filterOn]: {
+                  _lt: parseFloat(arrayFilterValue[0])
+                }
+              },
+              {
+                [filterOn]: {
+                  _gt: parseFloat(arrayFilterValue[1])
+                }
+              }
+            ]
+          };
+        case "equalTo":
+          return { [filterOn]: { _eq: parseFloat(filterValue) } };
+        case "regex":
+          return { [filterOn]: { _regex: filterValue } };
         default:
           console.warn(`Unsupported filter type: ${selectedFilter}`);
           return {};
@@ -19479,6 +19576,21 @@ function tableQueryParamsToHasuraClauses({
   return { where, order_by, limit, offset: offset3 };
 }
 __name(tableQueryParamsToHasuraClauses, "tableQueryParamsToHasuraClauses");
+function getFieldsMappedByCCDisplayName(schema) {
+  if (!schema || !schema.fields) return {};
+  return schema.fields.reduce((acc, field) => {
+    const ccDisplayName = getCCDisplayName(field);
+    acc[ccDisplayName] = field;
+    return acc;
+  }, {});
+}
+__name(getFieldsMappedByCCDisplayName, "getFieldsMappedByCCDisplayName");
+function getCCDisplayName(field) {
+  return camelCase(
+    typeof field.displayName === "string" ? field.displayName : field.path
+  );
+}
+__name(getCCDisplayName, "getCCDisplayName");
 function filterLocalEntitiesToHasura(records, { where, order_by, limit, offset: offset3, isInfinite } = {}) {
   let filteredRecords = [...records];
   if (where) {
@@ -19508,10 +19620,16 @@ function applyWhereClause(records, where) {
     }
     for (const key in filter2) {
       if (key === "_and") {
+        if (isEmpty$1(filter2[key])) {
+          continue;
+        }
         if (!every(filter2[key], (subFilter) => applyFilter(record, subFilter))) {
           return false;
         }
       } else if (key === "_or") {
+        if (isEmpty$1(filter2[key])) {
+          continue;
+        }
         if (!some(filter2[key], (subFilter) => applyFilter(record, subFilter))) {
           return false;
         }
@@ -19667,12 +19785,6 @@ function safeParse(val) {
   }
 }
 __name(safeParse, "safeParse");
-function getCCDisplayName(field) {
-  return camelCase(
-    typeof field.displayName === "string" ? field.displayName : field.path
-  );
-}
-__name(getCCDisplayName, "getCCDisplayName");
 function getCurrentParamsFromUrl(location2, isSimple) {
   let { search: search2 } = location2;
   if (isSimple) {
@@ -19841,7 +19953,7 @@ function getQueryParams({
   isLocalCall,
   additionalFilter,
   doNotCoercePageSize,
-  // noOrderError,
+  noOrderError,
   // isCodeModel,
   ownProps
 }) {
@@ -19865,11 +19977,31 @@ function getQueryParams({
     )[0];
     pageSize = closest;
   }
+  const cleanedOrder = [];
+  if (order2 && order2.length) {
+    const ccFields = getFieldsMappedByCCDisplayName(schema);
+    order2.forEach((orderVal) => {
+      const ccDisplayName = orderVal.replace(/^-/gi, "");
+      const schemaForField = ccFields[ccDisplayName];
+      if (schemaForField) {
+        const { path: path2 } = schemaForField;
+        const reversed = ccDisplayName !== orderVal;
+        const prefix2 = reversed ? "-" : "";
+        cleanedOrder.push(prefix2 + path2);
+      } else {
+        !noOrderError && console.error(
+          "No schema for field found!",
+          ccDisplayName,
+          JSON.stringify(schema.fields, null, 2)
+        );
+      }
+    });
+  }
   const toReturn = {
     //these are values that might be generally useful for the wrapped component
     page,
     pageSize: ownProps.controlled_pageSize || pageSize,
-    order: order2,
+    order: cleanedOrder,
     filters,
     searchTerm
   };
@@ -19878,19 +20010,20 @@ function getQueryParams({
     pageSize,
     searchTerm,
     filters,
-    order: order2,
+    order: cleanedOrder,
     schema
   });
   initializeHasuraWhereAndFilter(additionalFilter, where, currentParams);
   addCustomColumnFilters(where, schema.fields, currentParams);
   if (isLocalCall) {
-    return filterLocalEntitiesToHasura(entities, {
+    const toRet = filterLocalEntitiesToHasura(entities, {
       where,
       order_by,
       limit,
       offset: offset3,
       isInfinite
     });
+    return toRet;
   } else {
     return __spreadProps(__spreadValues({}, toReturn), {
       variables: {
@@ -71610,6 +71743,7 @@ const useTableParams = /* @__PURE__ */ __name((props) => {
       isInfinite: isInfinite || isSimple && !withPaging,
       isLocalCall,
       additionalFilter,
+      noOrderError,
       ownProps: passingProps
     });
   }, [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ui",
-  "version": "0.7.33-beta.3",
+  "version": "0.7.33-beta.5",
   "main": "./src/index.js",
   "type": "module",
   "exports": {

package/src/AdvancedOptions.spec.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import AdvancedOptions from "./AdvancedOptions";
+
+describe("AdvancedOptions", () => {
+  test("renders correctly with given props and default state", () => {
+    const { queryByText, container } = render(
+      <AdvancedOptions label="Test Label" content="Test Content" />
+    );
+    expect(queryByText("Test Label")).toBeInTheDocument();
+    expect(queryByText("Test Content")).not.toBeInTheDocument();
+
+    expect(
+      container.querySelector(".bp3-icon-caret-right")
+    ).toBeInTheDocument();
+  });
+
+  test("toggles content when clicked", () => {
+    const { getByText, queryByText, container } = render(
+      <AdvancedOptions label="Test Label" content="Test Content" />
+    );
+    fireEvent.click(getByText("Test Label"));
+    expect(queryByText("Test Content")).toBeInTheDocument();
+    expect(container.querySelector(".bp3-icon-caret-down")).toBeInTheDocument();
+  });
+});

package/src/AsyncValidateFieldSpinner/index.js

@@ -0,0 +1,12 @@
+/* Copyright (C) 2018 TeselaGen Biotechnology, Inc. */
+
+import React from "react";
+import { Spinner } from "@blueprintjs/core";
+
+export default function AsyncValidateFieldSpinner({ validating }) {
+  if (validating) {
+    return <Spinner size="18" />;
+  } else {
+    return null;
+  }
+}

package/src/BlueprintError/index.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { Classes } from "@blueprintjs/core";
+import classNames from "classnames";
+
+export default function BlueprintError({ error }) {
+  if (!error) return null;
+  return (
+    <div className={classNames(Classes.FORM_GROUP, Classes.INTENT_DANGER)}>
+      <div className={classNames(Classes.FORM_HELPER_TEXT, "preserve-newline")}>
+        {error}
+      </div>
+    </div>
+  );
+}

package/src/BounceLoader/index.js

@@ -0,0 +1,16 @@
+/* taken from http://tobiasahlin.com/spinkit/ */
+import React from "react";
+import classNames from "classnames";
+import "./style.css";
+
+export function BounceLoader({ style, className }) {
+  return (
+    <div className={classNames("tg-bounce-loader", className)} style={style}>
+      <div className="rect1" />
+      <div className="rect2" />
+      <div className="rect3" />
+      <div className="rect4" />
+      <div className="rect5" />
+    </div>
+  );
+}