fix queryParams unconnected

TeselaGen · Jul 29, 2024 · 82e62cb · 82e62cb
1 parent 1d71059
commit 82e62cb
Show file tree

Hide file tree

Showing 17 changed files with 1,468 additions and 1,199 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -45,6 +45,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Added menu item to allow user to export DNA as FASTA when looking at a protein sequence to resolve https://github.com/TeselaGen/tg-oss/issues/61 [`#61`](https://github.com/TeselaGen/tg-oss/issues/61)
 - Added fix for clipboard commands when there are multiple editors on a page to resolve https://github.com/TeselaGen/tg-oss/issues/24 [`#24`](https://github.com/TeselaGen/tg-oss/issues/24)
 - closes #35 [`#35`](https://github.com/TeselaGen/tg-oss/issues/35)
-- refactor [`ec2050c`](https://github.com/TeselaGen/tg-oss/commit/ec2050cfce60e27cb9fc3ef6242303ded2e7ef5e)
+- refactor [`2ebddf6`](https://github.com/TeselaGen/tg-oss/commit/2ebddf65509b90255198fb3c3659143f431c6d3f)
 - updating yarn lock [`ff41df0`](https://github.com/TeselaGen/tg-oss/commit/ff41df0b49b8051fcba084f7eaa44cf23284926d)
 - updating deps, moving to lodash-es, moving all packages to type: module [`bc7312c`](https://github.com/TeselaGen/tg-oss/commit/bc7312ccbe27c2d9a11cf2563ba978199428b50a)
diff --git a/packages/ui/cypress/e2e/fieldFilter.spec.js b/packages/ui/cypress/e2e/fieldFilter.spec.js
@@ -14,6 +14,7 @@ describe("field filters", () => {
         cy.get(".bp3-popover input").type(firstAge);
         cy.get(".bp3-popover").contains("Filter").click();
         cy.get(".rt-tr-group.with-row-data").should("have.length.at.least", 1);
+        cy.get(".rt-tr-group.with-row-data").should("have.length.at.most", 10);
       });
   });
 

diff --git a/packages/ui/demo/src/examples/DataTable.js b/packages/ui/demo/src/examples/DataTable.js
@@ -529,8 +529,7 @@ const DataTableDemo = () => {
                 expandAllByDefault={expandAllByDefault}
                 extraCompact={extraCompact}
                 {...(getRowClassName && {
-                  getRowClassName: rowInfo => {
-                    console.info(`rowInfo:`, rowInfo);
+                  getRowClassName: () => {
                     return {
                       "custom-getRowClassName": true
                     };

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ui",
-  "version": "0.4.19-beta.7",
+  "version": "0.4.19-beta.13",
   "main": "./src/index.js",
   "type": "module",
   "exports": {

diff --git a/packages/ui/src/DataTable/ColumnFilterMenu.js b/packages/ui/src/DataTable/ColumnFilterMenu.js
@@ -29,32 +29,32 @@ export const ColumnFilterMenu = ({
         hide: { enabled: false },
         flip: { enabled: false }
       }}
+      content={
+        <FilterMenu
+          addFilters={addFilters}
+          compact={compact}
+          currentFilter={currentFilter}
+          currentParams={currentParams}
+          dataType={dataType}
+          filterOn={filterOn}
+          removeSingleFilter={removeSingleFilter}
+          schemaForField={schemaForField}
+          setNewParams={setNewParams}
+          togglePopover={() => {
+            setColumnFilterMenuOpen(false);
+          }}
+        />
+      }
     >
       <Icon
         style={{ marginLeft: 5 }}
         icon="filter"
         iconSize={extraCompact ? 14 : undefined}
-        onClick={() => {
-          setColumnFilterMenuOpen(!columnFilterMenuOpen);
-        }}
+        onClick={() => setColumnFilterMenuOpen(prev => !prev)}
         className={classNames("tg-filter-menu-button", {
           "tg-active-filter": !!filterActiveForColumn
         })}
       />
-      <FilterMenu
-        addFilters={addFilters}
-        compact={compact}
-        currentFilter={currentFilter}
-        currentParams={currentParams}
-        dataType={dataType}
-        filterOn={filterOn}
-        removeSingleFilter={removeSingleFilter}
-        schemaForField={schemaForField}
-        setNewParams={setNewParams}
-        togglePopover={() => {
-          setColumnFilterMenuOpen(false);
-        }}
-      />
     </Popover>
   );
 };
diff --git a/packages/ui/src/DataTable/Columns.js b/packages/ui/src/DataTable/Columns.js
@@ -42,7 +42,7 @@ import { getCCDisplayName } from "./utils/queryParams";
 
 dayjs.extend(localizedFormat);
 
-const renderColumnHeader = ({
+const RenderColumnHeader = ({
   addFilters,
   column,
   compact,
@@ -114,54 +114,8 @@ const renderColumnHeader = ({
 
   const sortDown = ordering && ordering === "asc";
   const sortUp = ordering && !sortDown;
-  const sortComponent =
-    withSort && !disableSorting ? (
-      <div className="tg-sort-arrow-container">
-        <Icon
-          data-tip="Sort Z-A (Hold shift to sort multiple columns)"
-          icon="chevron-up"
-          className={classNames({
-            active: sortUp
-          })}
-          color={sortUp ? "#106ba3" : undefined}
-          iconSize={extraCompact ? 10 : 12}
-          onClick={e => {
-            setOrder("-" + ccDisplayName, sortUp, e.shiftKey);
-          }}
-        />
-        <Icon
-          data-tip="Sort A-Z (Hold shift to sort multiple columns)"
-          icon="chevron-down"
-          className={classNames({
-            active: sortDown
-          })}
-          color={sortDown ? "#106ba3" : undefined}
-          iconSize={extraCompact ? 10 : 12}
-          onClick={e => {
-            setOrder(ccDisplayName, sortDown, e.shiftKey);
-          }}
-        />
-      </div>
-    ) : null;
   const FilterMenu = column.FilterMenu || FilterAndSortMenu;
 
-  const filterMenu =
-    withFilter && !disableFiltering ? (
-      <ColumnFilterMenu
-        FilterMenu={FilterMenu}
-        filterActiveForColumn={filterActiveForColumn}
-        addFilters={addFilters}
-        removeSingleFilter={removeSingleFilter}
-        currentFilter={currentFilter}
-        filterOn={ccDisplayName}
-        dataType={columnDataType}
-        schemaForField={column}
-        currentParams={currentParams}
-        setNewParams={setNewParams}
-        compact={compact}
-        extraCompact={extraCompact}
-      />
-    ) : null;
   let maybeCheckbox;
   if (isCellEditable && !isNotEditable && type === "boolean") {
     let isIndeterminate = false;
@@ -239,8 +193,50 @@ const renderColumnHeader = ({
       <div
         style={{ display: "flex", marginLeft: "auto", alignItems: "center" }}
       >
-        {sortComponent}
-        {filterMenu}
+        {withSort && !disableSorting && (
+          <div className="tg-sort-arrow-container">
+            <Icon
+              data-tip="Sort Z-A (Hold shift to sort multiple columns)"
+              icon="chevron-up"
+              className={classNames({
+                active: sortUp
+              })}
+              color={sortUp ? "#106ba3" : undefined}
+              iconSize={extraCompact ? 10 : 12}
+              onClick={e => {
+                setOrder("-" + ccDisplayName, sortUp, e.shiftKey);
+              }}
+            />
+            <Icon
+              data-tip="Sort A-Z (Hold shift to sort multiple columns)"
+              icon="chevron-down"
+              className={classNames({
+                active: sortDown
+              })}
+              color={sortDown ? "#106ba3" : undefined}
+              iconSize={extraCompact ? 10 : 12}
+              onClick={e => {
+                setOrder(ccDisplayName, sortDown, e.shiftKey);
+              }}
+            />
+          </div>
+        )}
+        {withFilter && !disableFiltering && (
+          <ColumnFilterMenu
+            FilterMenu={FilterMenu}
+            filterActiveForColumn={filterActiveForColumn}
+            addFilters={addFilters}
+            removeSingleFilter={removeSingleFilter}
+            currentFilter={currentFilter}
+            filterOn={ccDisplayName}
+            dataType={columnDataType}
+            schemaForField={column}
+            currentParams={currentParams}
+            setNewParams={setNewParams}
+            compact={compact}
+            extraCompact={extraCompact}
+          />
+        )}
       </div>
     </div>
   );
@@ -487,7 +483,7 @@ const RenderCell = ({
   );
 };
 
-export const renderColumns = props => {
+export const RenderColumns = props => {
   const {
     addFilters,
     cellRenderer,
@@ -506,6 +502,7 @@ export const renderColumns = props => {
     isCellEditable,
     isEntityDisabled,
     isLocalCall,
+    isSimple,
     isSingleSelect,
     isSelectionARectangle,
     noDeselectAll,
@@ -538,10 +535,12 @@ export const renderColumns = props => {
     updateValidation,
     withCheckboxes,
     withExpandAndCollapseAllButton,
-    withFilter = !props.isSimple,
+    withFilter: _withFilter,
     withSort = true
   } = props;
 
+  const withFilter = _withFilter === undefined ? !isSimple : _withFilter;
+
   const onDragEnd = cellsToSelect => {
     const [primaryRowId, primaryCellPath] = primarySelectedCellId.split(":");
     const pathToField = getFieldPathToField(schema);
@@ -742,6 +741,8 @@ export const renderColumns = props => {
     // TODOCOPY we need a way to potentially omit certain columns from being added as a \t element (talk to taoh about this)
     let text = typeof val !== "string" ? row.value : val;
 
+    // We should try to take out the props from here, it produces
+    // unnecessary rerenders
     const record = row.original;
     if (column.getClipboardData) {
       text = column.getClipboardData(row.value, record, row, props);
@@ -787,6 +788,7 @@ export const renderColumns = props => {
   if (!columns.length) {
     return columns;
   }
+
   const columnsToRender = [];
   if (SubComponent) {
     columnsToRender.push({
@@ -948,7 +950,7 @@ export const renderColumns = props => {
   columns.forEach(column => {
     const tableColumn = {
       ...column,
-      Header: renderColumnHeader({
+      Header: RenderColumnHeader({
         column,
         isLocalCall,
         filters,
@@ -994,17 +996,17 @@ export const renderColumns = props => {
         return val;
       };
     } else if (column.type === "timestamp") {
-      tableColumn.Cell = props => {
-        return props.value ? dayjs(props.value).format("lll") : "";
+      tableColumn.Cell = ({ value }) => {
+        return value ? dayjs(value).format("lll") : "";
       };
     } else if (column.type === "color") {
-      tableColumn.Cell = props => {
-        return props.value ? (
+      tableColumn.Cell = ({ value }) => {
+        return value ? (
           <div
             style={{
               height: 20,
               width: 40,
-              background: props.value,
+              background: value,
               border: "1px solid #182026",
               borderRadius: 5
             }}
@@ -1015,23 +1017,23 @@ export const renderColumns = props => {
       };
     } else if (column.type === "boolean") {
       if (isCellEditable) {
-        tableColumn.Cell = props => (props.value ? "True" : "False");
+        tableColumn.Cell = ({ value }) => (value ? "True" : "False");
       } else {
-        tableColumn.Cell = props => (
+        tableColumn.Cell = ({ value }) => (
           <Icon
             className={classNames({
-              [Classes.TEXT_MUTED]: !props.value
+              [Classes.TEXT_MUTED]: !value
             })}
-            icon={props.value ? "tick" : "cross"}
+            icon={value ? "tick" : "cross"}
           />
         );
       }
     } else if (column.type === "markdown") {
-      tableColumn.Cell = props => (
-        <ReactMarkdown remarkPlugins={[remarkGfm]}>{props.value}</ReactMarkdown>
+      tableColumn.Cell = ({ value }) => (
+        <ReactMarkdown remarkPlugins={[remarkGfm]}>{value}</ReactMarkdown>
       );
     } else {
-      tableColumn.Cell = props => props.value;
+      tableColumn.Cell = ({ value }) => value;
     }
     const oldFunc = tableColumn.Cell;