Export utility functions and enhance documentation for clarity in ren…

…dering components

packages/core/src/render.ts

@@ -32,7 +32,7 @@ export type RenderRow = {
  * @param idPrefix - The prefix to add to the IDs of the flattened rows (optional, defaults to an empty string).
  * @returns The flattened array of RenderRow objects.
  */
-const flattenRows = (
+export const flattenRows = (
   rows: Rows,
   flattenedRows: RenderRow[] = [],
   idPrefix: string = '',
@@ -105,7 +105,7 @@ const secondAggRR = (data: any, state: UpsetConfig) => {
  * @param membership - An object representing the set membership query. The keys are set names and the values are 'Yes' or 'No' indicating whether the row should belong to the set or not.
  * @returns The filtered rows that match the set membership query.
  */
-function getQueryResult(rows: Rows, membership: SetQueryMembership): Rows {
+export function getQueryResult(rows: Rows, membership: SetQueryMembership): Rows {
   const queryResults: Rows = { order: [], values: {} };
   flattenRows(rows).forEach((renderRow) => {
     let match = true;

packages/upset/src/components/Rows/MatrixRows.tsx

@@ -54,6 +54,30 @@ const shouldRender = (row: Row, collapsedIds: string[]) => {
   return true;
 };
 
+/**
+ * Component that renders matrix rows with transitions.
+ *
+ * @component
+ * @param {Props} props - The properties object.
+ * @param {Row[]} props.rows - The array of rows to render.
+ *
+ * @returns {JSX.Element} The rendered matrix rows component.
+ *
+ * @function calculateYTransform
+ * Calculates the y-transform for a given row.
+ * If `queryBySetsInterface` is true, all rows are shifted down by the height of the interface.
+ *
+ * @function rowTransitions
+ * Generates transitions for the rows using react-spring's `useTransition`.
+ * 
+ * @param {Row} row - The row object.
+ * @param {number} index - The index of the row.
+ * @returns {number} The calculated y-transform value.
+ *
+ * @param {Array} rows - The array of rows with their respective ids and indices.
+ * @param {Object} config - The configuration object for the transitions.
+ * @returns {Array} The array of transition objects.
+ */
 export const MatrixRows: FC<Props> = ({ rows }) => {
   const dimensions = useRecoilValue(dimensionsSelector);
   const collapsedIds = useRecoilValue(collapsedSelector);

packages/upset/src/components/SvgBase.tsx

@@ -9,18 +9,8 @@ import { currentIntersectionSelector } from '../atoms/config/currentIntersection
 import { calculateDimensions } from '../dimensions';
 import { queryBySetsInterfaceAtom } from '../atoms/queryBySetsAtoms';
 
-type SvgBaseSettings = {
-  margin: number;
-  height: number;
-  width: number;
-};
-
-type Props = {
-  defaultSettings?: SvgBaseSettings;
-};
-
-export const SvgBase: FC<Props> = ({ children, defaultSettings }) => {
-  const dimensions = useRecoilValue(dimensionsSelector) || defaultSettings;
+export const SvgBase: FC = ({ children }) => {
+  const dimensions = useRecoilValue(dimensionsSelector);
   const { actions } = useContext(ProvenanceContext);
   const selectedIntersection = useRecoilValue(currentIntersectionSelector);
   const queryBySetsInterfaceOpen = useRecoilValue(queryBySetsInterfaceAtom);

packages/upset/src/components/custom/QueryBySet/QueryBySetInterface.tsx

@@ -1,15 +1,14 @@
-import { useRecoilState, useRecoilState, useRecoilValue } from 'recoil';
-
+import { useRecoilState, useRecoilValue } from 'recoil';
 import { css } from '@emotion/react';
 import { Check, Edit } from '@mui/icons-material';
 import { SvgIcon, Tooltip } from '@mui/material';
 import {
   useContext, useEffect, useMemo, useState,
 } from 'react';
 import {
-  getBelongingSetsFromSetMembership,
-  getRows, isRowAggregate, Row, Rows,
+  getRows, getQueryResult,
   SetQueryMembership,
+  isRowAggregate,
 } from '@visdesignlab/upset2-core';
 import { dimensionsSelector } from '../../../atoms/dimensionsAtom';
 import translate from '../../../utils/transform';
@@ -19,32 +18,12 @@ import { visibleSetSelector } from '../../../atoms/config/visibleSetsAtoms';
 import { SizeBar } from '../../Columns/SizeBar';
 import { dataAtom } from '../../../atoms/dataAtom';
 import { ProvenanceContext } from '../../Root';
-import { upsetConfigAtom } from '../../../atoms/config/upsetConfigAtoms';
 import { queryBySetsInterfaceAtom } from '../../../atoms/queryBySetsAtoms';
 
 // edit icon size
 const EDIT_ICON_SIZE = 14;
 const CHECK_ICON_SIZE = 16;
 
-/**
- * Flattens a nested structure of rows into a single array of rows.
- *
- * @param r - The nested structure of rows to flatten.
- * @returns An array of rows where all nested rows are flattened into a single level.
- */
-function flattenRows(r: Rows): Row[] {
-  const flattenedRows: Row[] = [];
-  Object.values(r.values).forEach((row) => {
-    if (isRowAggregate(row)) {
-      flattenedRows.push(...flattenRows(row.items));
-    } else {
-      flattenedRows.push(row);
-    }
-  });
-
-  return flattenedRows;
-}
-
 /**
  * Filters rows based on their set membership status according to the provided membership query.
  *
@@ -57,26 +36,26 @@ function flattenRows(r: Rows): Row[] {
  * - If the membership status for a set is 'No', the row must not belong to that set.
  * - If the membership status for a set is 'May', the row is considered a match regardless of its membership in that set.
  */
-function getQueryResult(r: Rows, membership: SetQueryMembership): Row[] {
-  const queryResults: Row[] = [];
-  flattenRows(r).forEach((row) => {
-    let match = true;
-    Object.entries(membership).forEach(([set, status]) => {
-      if (status === 'Yes' && !getBelongingSetsFromSetMembership(row.setMembership).includes(set)) {
-        match = false;
-      }
-      if (status === 'No' && getBelongingSetsFromSetMembership(row.setMembership).includes(set)) {
-        match = false;
-      }
-    });
+// function getQueryResult(r: Rows, membership: SetQueryMembership): Row[] {
+//   const queryResults: Row[] = [];
+//   flattenRows(r).forEach((renderRow) => {
+//     let match = true;
+//     Object.entries(membership).forEach(([set, status]) => {
+//       if (status === 'Yes' && !getBelongingSetsFromSetMembership(renderRow.row.setMembership).includes(set)) {
+//         match = false;
+//       }
+//       if (status === 'No' && getBelongingSetsFromSetMembership(renderRow.row.setMembership).includes(set)) {
+//         match = false;
+//       }
+//     });
 
-    if (match) {
-      queryResults.push(row);
-    }
-  });
+//     if (match) {
+//       queryResults.push(renderRow.row);
+//     }
+//   });
 
-  return queryResults;
-}
+//   return queryResults;
+// }
 
 /**
  * Query by Set interface component.
@@ -129,9 +108,10 @@ export const QueryBySetInterface = () => {
   function getQuerySize() {
     let size = 0;
 
-    const queryResults = queryResult;
-    queryResults.forEach((result) => {
-      size += result.size;
+    const queryResults = Object.values(queryResult.values);
+    queryResults.forEach((row) => {
+      if (!isRowAggregate(row))
+        size += row.size;
     });
 
     return size;
@@ -328,7 +308,7 @@ export const QueryBySetInterface = () => {
       </g>
       {/* Query size bar */}
       <g transform={translate(0, dimensions.body.rowHeight)}>
-        <SizeBar size={getQuerySize()} color="rgb(161, 217, 155)" />
+        <SizeBar size={getQuerySize()} selected={0} />
       </g>
       {/* Query result text */}
       <g

packages/upset/src/components/custom/QueryBySet/SetQueryRow.tsx

@@ -109,7 +109,7 @@ export const SetQueryRow: FC = () => {
             ))}
           </g>
           <g transform={translate(0, dimensions.body.rowHeight - 2)}>
-            <SizeBar size={totalQuerySize()} color="rgb(161, 217, 155)" />
+            <SizeBar size={totalQuerySize()} selected={0} />
           </g>
         </g>
       </g>