@teselagen/ui 0.7.31 → 0.7.33-beta.1

package/initializeHasuraWhereAndFilter.js

@@ -0,0 +1,27 @@
+export function initializeHasuraWhereAndFilter(
+  additionalFilter,
+  where = {},
+  currentParams
+) {
+  where._and = where._and || [];
+  where._or = where._or || [];
+  if (typeof additionalFilter === "function") {
+    const newWhere = additionalFilter(where, currentParams);
+    if (newWhere) {
+      where = {
+        ...where,
+        ...newWhere
+      };
+    }
+  } else if (typeof additionalFilter === "object")
+    where._and.push(additionalFilter);
+}
+
+export const addCustomColumnFilters = (where, fields, currentParams) => {
+  fields.forEach(field => {
+    const { customColumnFilter, filterDisabled } = field;
+    if (filterDisabled || !customColumnFilter) return;
+    customColumnFilter(where, currentParams);
+  });
+};
+

package/{src/utils/isBeingCalledExcessively.js → isBeingCalledExcessively.js}

@@ -22,4 +22,3 @@ export const isBeingCalledExcessively = ({ uniqName }) => {
     throw new Error(`isBeingCalledExcessively: ${uniqName}`);
   }
 };
-

package/package.json

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

package/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/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/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/src/AdvancedOptions.spec.js

@@ -1,26 +0,0 @@
-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

@@ -1,12 +0,0 @@
-/* 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

@@ -1,14 +0,0 @@
-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

@@ -1,16 +0,0 @@
-/* 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>
-  );
-}