@teselagen/ui 0.8.6-beta.2 → 0.8.6-beta.20

package/src/DataTable/utils/tableQueryParamsToHasuraClauses.js

@@ -11,44 +11,57 @@ export function tableQueryParamsToHasuraClauses({
 }) {
   const ccFields = getFieldsMappedByCCDisplayName(schema);
   let where = {};
-  const order_by = {};
+  const order_by = [];
   const limit = pageSize || 25;
   const offset = page && pageSize ? (page - 1) * pageSize : 0;
 
   if (searchTerm) {
     const searchTermFilters = [];
+    // Create a map to deduplicate fields by path
+    const uniqueFieldsByPath = {};
+
+    // Split the search term by comma to support multi-term searching
+    const searchTerms = searchTerm.split(",");
+
     schema.fields.forEach(field => {
       const { type, path, searchDisabled } = field;
+      if (uniqueFieldsByPath[path]) return; // Skip if already added
+      uniqueFieldsByPath[path] = true;
       if (searchDisabled || field.filterDisabled || type === "color") return;
-      const filterValue = searchTerm; // No cleaning needed here, we're using _ilike
 
-      if (type === "string" || type === "lookup") {
-        const o = set({}, path, { _ilike: `%${filterValue}%` });
-        searchTermFilters.push(o);
-      } else if (type === "boolean") {
-        let regex;
-        try {
-          regex = new RegExp("^" + searchTerm, "ig");
-        } catch (error) {
-          //ignore
-        }
-        if (regex) {
-          if ("true".replace(regex, "") !== "true") {
-            const o = set({}, path, { _eq: true });
-            searchTermFilters.push(o);
-          } else if ("false".replace(regex, "") !== "false") {
-            const o = set({}, path, { _eq: false });
-            searchTermFilters.push(o);
+      // Process each search term
+      searchTerms.forEach(term => {
+        const filterValue = term.trim(); // Trim the term to handle spaces after commas
+
+        if (type === "string" || type === "lookup") {
+          const o = set({}, path, { _ilike: `%${filterValue}%` });
+          searchTermFilters.push(o);
+        } else if (type === "boolean") {
+          let regex;
+          try {
+            regex = new RegExp("^" + filterValue, "ig");
+          } catch (error) {
+            //ignore
+          }
+          if (regex) {
+            if ("true".replace(regex, "") !== "true") {
+              const o = set({}, path, { _eq: true });
+              searchTermFilters.push(o);
+            } else if ("false".replace(regex, "") !== "false") {
+              const o = set({}, path, { _eq: false });
+              searchTermFilters.push(o);
+            }
           }
+        } else if (
+          (type === "number" || type === "integer") &&
+          !isNaN(filterValue)
+        ) {
+          const o = set({}, path, { _eq: parseFloat(filterValue) });
+          searchTermFilters.push(o);
         }
-      } else if (
-        (type === "number" || type === "integer") &&
-        !isNaN(filterValue)
-      ) {
-        const o = set({}, path, { _eq: parseFloat(filterValue) });
-        searchTermFilters.push(o);
-      }
+      });
     });
+
     if (searchTermFilters.length > 0) {
       if (Object.keys(where).length > 0) {
         where = { _and: [where, { _or: searchTermFilters }] };
@@ -59,157 +72,161 @@ export function tableQueryParamsToHasuraClauses({
   }
 
   if (filters && filters.length > 0) {
-    const filterClauses = filters
-      .map(filter => {
-        let { selectedFilter, filterOn, filterValue } = filter;
-        const fieldSchema = ccFields[filterOn] || {};
+    const filterClauses = filters.map(filter => {
+      let { selectedFilter, filterOn, filterValue } = filter;
+      const fieldSchema = ccFields[filterOn] || {};
 
-        const { path, reference, type } = fieldSchema;
-        let stringFilterValue =
-          filterValue && filterValue.toString
-            ? filterValue.toString()
-            : filterValue;
-        if (stringFilterValue === false) {
-          // we still want to be able to search for the string "false" which will get parsed to false
-          stringFilterValue = "false";
-        } else {
-          stringFilterValue = stringFilterValue || "";
-        }
-        const arrayFilterValue = Array.isArray(filterValue)
-          ? filterValue
-          : stringFilterValue.split(";");
+      const { path, reference, type, customColumnFilter } = fieldSchema;
+      if (customColumnFilter) {
+        return customColumnFilter(filterValue);
+      }
+      let stringFilterValue =
+        filterValue && filterValue.toString
+          ? filterValue.toString()
+          : filterValue;
+      if (stringFilterValue === false) {
+        // we still want to be able to search for the string "false" which will get parsed to false
+        stringFilterValue = "false";
+      } else {
+        stringFilterValue = stringFilterValue || "";
+      }
+      const arrayFilterValue = Array.isArray(filterValue)
+        ? filterValue
+        : stringFilterValue.split(";");
 
-        if (type === "number" || type === "integer") {
-          filterValue = Array.isArray(filterValue)
-            ? filterValue.map(val => Number(val))
-            : Number(filterValue);
-        }
+      if (type === "number" || type === "integer") {
+        filterValue = Array.isArray(filterValue)
+          ? filterValue.map(val => Number(val))
+          : Number(filterValue);
+      }
 
-        if (fieldSchema.normalizeFilter) {
-          filterValue = fieldSchema.normalizeFilter(
-            filterValue,
-            selectedFilter,
-            filterOn
-          );
-        }
+      if (fieldSchema.normalizeFilter) {
+        filterValue = fieldSchema.normalizeFilter(
+          filterValue,
+          selectedFilter,
+          filterOn
+        );
+      }
 
-        if (reference) {
-          filterOn = reference.sourceField;
-        } else {
-          filterOn = path || filterOn;
-        }
-        switch (selectedFilter) {
-          case "none":
-            return {};
-          case "startsWith":
-            return { [filterOn]: { _ilike: `${filterValue}%` } };
-          case "endsWith":
-            return { [filterOn]: { _ilike: `%${filterValue}` } };
-          case "contains":
-            return { [filterOn]: { _ilike: `%${filterValue}%` } };
-          case "notContains":
-            return { [filterOn]: { _not_ilike: `%${filterValue}%` } };
-          case "isExactly":
-            return { [filterOn]: { _eq: filterValue } };
-          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":
+      if (reference) {
+        filterOn = reference.sourceField;
+      } else {
+        filterOn = path || filterOn;
+      }
+      switch (selectedFilter) {
+        case "none":
+          return {};
+        case "startsWith":
+          return { [filterOn]: { _ilike: `${filterValue}%` } };
+        case "endsWith":
+          return { [filterOn]: { _ilike: `%${filterValue}` } };
+        case "contains":
+          return { [filterOn]: { _ilike: `%${filterValue}%` } };
+        case "notContains":
+          return { [filterOn]: { _nilike: `%${filterValue}%` } };
+        case "isExactly":
+          return { [filterOn]: { _eq: filterValue } };
+        case "isEmpty":
+          if (filterOn.includes(".")) {
+            // if we're filtering on a nested field, like a sequence table with parts.name
+            // we really want to just query on the top level field's existence
             return {
-              [filterOn]: {
-                _gte: new Date(arrayFilterValue[0]),
-                _lte: new Date(new Date(arrayFilterValue[1]).setHours(23, 59))
+              _not: {
+                [filterOn.split(".")[0]]: {}
               }
             };
-          case "isBefore":
-            return { [filterOn]: { _lt: new Date(filterValue) } };
-          case "isAfter":
-            return { [filterOn]: { _gt: new Date(filterValue) } };
-          case "greaterThan":
-            return { [filterOn]: { _gt: parseFloat(filterValue) } };
-          case "lessThan":
-            return { [filterOn]: { _lt: parseFloat(filterValue) } };
-          case "inRange":
-            return {
-              [filterOn]: {
-                _gte: parseFloat(arrayFilterValue[0]),
-                _lte: parseFloat(arrayFilterValue[1])
+          }
+          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 "outsideRange":
-            return {
-              _or: [
-                {
-                  [filterOn]: {
-                    _lt: parseFloat(arrayFilterValue[0])
-                  }
-                },
-                {
-                  [filterOn]: {
-                    _gt: parseFloat(arrayFilterValue[1])
-                  }
+            ]
+          };
+        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 "lessThan":
+          return { [filterOn]: { _lt: parseFloat(filterValue) } };
+        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:
-                  type === "number" || type === "integer"
-                    ? parseFloat(filterValue)
-                    : filterValue
               }
-            };
-          case "regex":
-            return { [filterOn]: { _regex: filterValue } };
-          default:
-            console.warn(`Unsupported filter type: ${selectedFilter}`);
-            return {};
-        }
-      })
-      .map(filter => {
-        const o = {};
-        set(o, Object.keys(filter)[0], filter[Object.keys(filter)[0]]);
-        return o;
-      });
+            ]
+          };
+        case "equalTo":
+          return {
+            [filterOn]: {
+              _eq:
+                type === "number" || type === "integer"
+                  ? parseFloat(filterValue)
+                  : filterValue
+            }
+          };
+        case "regex":
+          return { [filterOn]: { _regex: filterValue } };
+        default:
+          console.warn(`Unsupported filter type: ${selectedFilter}`);
+          return {};
+      }
+    });
 
     if (filterClauses.length > 0) {
       if (Object.keys(where).length > 0) {
@@ -224,7 +241,7 @@ export function tableQueryParamsToHasuraClauses({
     order.forEach(item => {
       const field = item.startsWith("-") ? item.substring(1) : item;
       const direction = item.startsWith("-") ? "desc" : "asc";
-      order_by[field] = direction;
+      order_by.push({ [field]: direction });
     });
   }
 

package/src/DataTable/utils/tableQueryParamsToHasuraClauses.test.js

@@ -14,7 +14,7 @@ describe("tableQueryParamsToHasuraClauses", () => {
     const result = tableQueryParamsToHasuraClauses({});
     expect(result).toEqual({
       where: {},
-      order_by: {},
+      order_by: [],
       limit: 25,
       offset: 0
     });
@@ -24,7 +24,7 @@ describe("tableQueryParamsToHasuraClauses", () => {
     const result = tableQueryParamsToHasuraClauses({ page: 2, pageSize: 10 });
     expect(result).toEqual({
       where: {},
-      order_by: {},
+      order_by: [],
       limit: 10,
       offset: 10
     });
@@ -39,7 +39,46 @@ describe("tableQueryParamsToHasuraClauses", () => {
       where: {
         _or: [{ name: { _ilike: "%test%" } }, { email: { _ilike: "%test%" } }]
       },
-      order_by: {},
+      order_by: [],
+      limit: 25,
+      offset: 0
+    });
+  });
+  it("should handle searchTerm with string fields with a comma in them", () => {
+    const result = tableQueryParamsToHasuraClauses({
+      searchTerm: "test,test2",
+      schema
+    });
+    expect(result).toEqual({
+      where: {
+        _or: [
+          { name: { _ilike: "%test%" } },
+          { name: { _ilike: "%test2%" } },
+          { email: { _ilike: "%test%" } },
+          { email: { _ilike: "%test2%" } }
+        ]
+      },
+      order_by: [],
+      limit: 25,
+      offset: 0
+    });
+  });
+  it("should flatten queries with dup paths", () => {
+    const result = tableQueryParamsToHasuraClauses({
+      searchTerm: "test",
+      schema: {
+        fields: [
+          ...schema.fields,
+          { path: "name", type: "string" },
+          { path: "name", type: "string" }
+        ]
+      }
+    });
+    expect(result).toEqual({
+      where: {
+        _or: [{ name: { _ilike: "%test%" } }, { email: { _ilike: "%test%" } }]
+      },
+      order_by: [],
       limit: 25,
       offset: 0
     });
@@ -58,7 +97,7 @@ describe("tableQueryParamsToHasuraClauses", () => {
           { email: { _ilike: "%30%" } }
         ]
       },
-      order_by: {},
+      order_by: [],
       limit: 25,
       offset: 0
     });
@@ -77,7 +116,7 @@ describe("tableQueryParamsToHasuraClauses", () => {
           { email: { _ilike: "%true%" } }
         ]
       },
-      order_by: {},
+      order_by: [],
       limit: 25,
       offset: 0
     });
@@ -92,7 +131,7 @@ describe("tableQueryParamsToHasuraClauses", () => {
       where: {
         _or: [{ name: { _ilike: "%test%" } }, { email: { _ilike: "%test%" } }]
       },
-      order_by: {},
+      order_by: [],
       limit: 25,
       offset: 0
     });
@@ -110,7 +149,7 @@ describe("tableQueryParamsToHasuraClauses", () => {
     });
     expect(result).toEqual({
       where: { _and: [{ name: { _ilike: "%test%" } }] },
-      order_by: {},
+      order_by: [],
       limit: 25,
       offset: 0
     });
@@ -125,7 +164,7 @@ describe("tableQueryParamsToHasuraClauses", () => {
     });
     expect(result).toEqual({
       where: { _and: [{ age: { _eq: 30 } }] },
-      order_by: {},
+      order_by: [],
       limit: 25,
       offset: 0
     });
@@ -135,7 +174,7 @@ describe("tableQueryParamsToHasuraClauses", () => {
     const result = tableQueryParamsToHasuraClauses({ order: ["name", "-age"] });
     expect(result).toEqual({
       where: {},
-      order_by: { name: "asc", age: "desc" },
+      order_by: [{ name: "asc" }, { age: "desc" }],
       limit: 25,
       offset: 0
     });
@@ -168,7 +207,7 @@ describe("tableQueryParamsToHasuraClauses", () => {
           { age: { _gt: 30 } }
         ]
       },
-      order_by: { name: "asc" },
+      order_by: [{ name: "asc" }],
       limit: 10,
       offset: 10
     });
@@ -198,7 +237,7 @@ describe("tableQueryParamsToHasuraClauses", () => {
           { age: { _gt: 30 } }
         ]
       },
-      order_by: {},
+      order_by: [],
       limit: 25,
       offset: 0
     });

package/src/index.js

@@ -41,6 +41,7 @@ export { default as popoverOverflowModifiers } from "./utils/popoverOverflowModi
 export * from "./utils/tgFormValues";
 export { default as tgFormValues } from "./utils/tgFormValues";
 export { default as withStore } from "./utils/withStore";
+export { default as determineBlackOrWhiteTextColor } from "./utils/determineBlackOrWhiteTextColor";
 export {
   default as withTableParams,
   useTableParams

package/src/utils/determineBlackOrWhiteTextColor.js

@@ -1,4 +1,11 @@
 /* Copyright (C) 2018 TeselaGen Biotechnology, Inc. */
 import Color from "color";
 
-export default c => (Color(c).isLight() ? "#000000" : "#FFFFFF");
+export default function determineBlackOrWhiteTextColor(c) {
+  try {
+    return Color(c).isLight() ? "#000000" : "#FFFFFF";
+  } catch (e) {
+    console.error("Error in color parsing:", e);
+    return "#000000"; // Fallback to black if color parsing fails
+  }
+}

package/utils/determineBlackOrWhiteTextColor.d.ts

@@ -1,2 +1 @@
-declare function _default(c: any): "#000000" | "#FFFFFF";
-export default _default;
+export default function determineBlackOrWhiteTextColor(c: any): "#000000" | "#FFFFFF";