feat: remove author and standard categories for cellguide cxgs and ad…

…d singletons back (#795)
chanzuckerberg · Feb 26, 2024 · 67502f6 · 67502f6
1 parent 4ba67ac
commit 67502f6
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 43 deletions.
diff --git a/client/src/actions/index.ts b/client/src/actions/index.ts
@@ -151,9 +151,15 @@ function prefetchEmbeddings(annoMatrix: AnnoMatrix) {
   );
 }
 
+function checkIfCellGuideCxg() {
+  const urlPath = window.location.pathname;
+  return urlPath.includes("/cellguide-cxgs");
+}
+
 /*
 Application bootstrap
 */
+
 const doInitialDataLoad = (): ((
   dispatch: AppDispatch,
   getState: GetState
@@ -181,12 +187,16 @@ const doInitialDataLoad = (): ((
       const obsCrossfilter = new AnnoMatrixObsCrossfilter(annoMatrix);
       prefetchEmbeddings(annoMatrix);
 
+      const isCellGuideCxg = checkIfCellGuideCxg();
       dispatch({
         type: "annoMatrix: init complete",
         annoMatrix,
         obsCrossfilter,
+        isCellGuideCxg,
       });
-      dispatch({ type: "initial data load complete" });
+
+      // save isCellGuideCxg to the reducer store
+      dispatch({ type: "initial data load complete", isCellGuideCxg });
 
       const defaultEmbedding = config?.parameters?.default_embedding;
       const layoutSchema = schema?.schema?.layout?.obs ?? [];

diff --git a/client/src/components/categorical/category/index.tsx b/client/src/components/categorical/category/index.tsx
@@ -48,6 +48,7 @@ type CategoryProps = PureCategoryProps & {
   crossfilter: any;
   isUserAnno: boolean;
   genesets: any;
+  isCellGuideCxg: boolean;
 };
 
 // @ts-expect-error ts-migrate(1238) FIXME: Unable to resolve signature of class decorator whe... Remove this comment to see the full error message
@@ -65,6 +66,7 @@ type CategoryProps = PureCategoryProps & {
     crossfilter: state.obsCrossfilter,
     isUserAnno,
     genesets: state.genesets.genesets,
+    isCellGuideCxg: state.controls.isCellGuideCxg,
   };
 })
 class Category extends React.PureComponent {
@@ -162,7 +164,7 @@ class Category extends React.PureComponent {
   fetchAsyncProps = async (props: any) => {
     const { annoMatrix, metadataField, colors } = props.watchProps;
     // @ts-expect-error ts-migrate(2339) FIXME: Property 'crossfilter' does not exist on type 'Rea... Remove this comment to see the full error message
-    const { crossfilter } = this.props;
+    const { crossfilter, isCellGuideCxg } = this.props;
 
     const [categoryData, categorySummary, colorData] = await this.fetchData(
       annoMatrix,
@@ -174,6 +176,7 @@ class Category extends React.PureComponent {
       categoryData,
       categorySummary,
       colorData,
+      isCellGuideCxg,
       crossfilter,
       ...this.updateColorTable(colorData),
       handleCategoryToggleAllClick: () =>
@@ -332,6 +335,7 @@ class Category extends React.PureComponent {
                 isColorAccessor,
                 handleCategoryToggleAllClick,
                 colorMode,
+                isCellGuideCxg,
               } = asyncProps;
               const selectionState = this.getSelectionState(categorySummary);
               return (
@@ -353,6 +357,7 @@ class Category extends React.PureComponent {
                   onCategoryMenuClick={this.handleCategoryClick}
                   onCategoryMenuKeyPress={this.handleCategoryKeyPress}
                   colorMode={colorMode}
+                  isCellGuideCxg={isCellGuideCxg}
                 />
               );
             }}
@@ -548,14 +553,16 @@ const CategoryRender = React.memo(
     onCategoryToggleAllClick,
     // @ts-expect-error ts-migrate(2339) FIXME: Property 'colorMode' does not exist... Remove this comment to see the full error message
     colorMode,
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'isCellGuideCxg' does not exist... Remove this comment to see the full error message
+    isCellGuideCxg,
   }) => {
     /*
     Render the core of the category, including checkboxes, controls, etc.
     */
     const { numCategoryValues } = categorySummary;
     const isSingularValue = !isUserAnno && numCategoryValues === 1;
 
-    if (isSingularValue) {
+    if (isSingularValue && !isCellGuideCxg) {
       /*
       Entire category has a single value, special case.
       */

diff --git a/client/src/components/categorical/index.tsx b/client/src/components/categorical/index.tsx
@@ -22,6 +22,8 @@ type State = any;
 @connect((state) => ({
   // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
   schema: (state as any).annoMatrix?.schema,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
+  isCellGuideCxg: (state as any).controls.isCellGuideCxg,
 }))
 // eslint-disable-next-line @typescript-eslint/ban-types --- FIXME: disabled temporarily on migrate to TS.
 class Categories extends React.Component<{}, State> {
@@ -81,14 +83,18 @@ class Categories extends React.Component<{}, State> {
    * @returns True if category has more than one category value or categories are not defined.
    */
   isCategoryDisplayable = (schema: Schema, catName: string): boolean => {
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'schema' does not exis... Remove this comment to see the full error message
+    const { isCellGuideCxg } = this.props;
+
     const columnSchema = schema.annotations.obsByName[catName];
     // Always display string and boolean types.
     if (!("categories" in columnSchema)) {
       return true;
     }
     // Only display categoricals if they have more than one value.
     return (
-      (columnSchema as CategoricalAnnotationColumnSchema).categories.length > 1
+      (columnSchema as CategoricalAnnotationColumnSchema).categories.length >
+        1 || isCellGuideCxg
     );
   };
 
@@ -97,8 +103,12 @@ class Categories extends React.Component<{}, State> {
    * @param catName - Name of category.
    * @returns True if given category name is in the set of standard category names.
    */
-  isCategoryNameStandard = (catName: string): boolean =>
-    STANDARD_CATEGORY_NAMES.includes(catName);
+  isCategoryNameStandard = (catName: string): boolean => {
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'schema' does not exis... Remove this comment to see the full error message
+    const { isCellGuideCxg } = this.props;
+    // if isCellGuideCxg is true, then all categories are standard
+    return STANDARD_CATEGORY_NAMES.includes(catName) || isCellGuideCxg;
+  };
 
   /**
    * Determine if category is excluded.
@@ -121,7 +131,8 @@ class Categories extends React.Component<{}, State> {
   render() {
     const { createAnnoModeActive, expandedCats } = this.state;
     // @ts-expect-error ts-migrate(2339) FIXME: Property 'schema' does not exis... Remove this comment to see the full error message
-    const { schema } = this.props;
+    const { schema, isCellGuideCxg } = this.props;
+
     /* Names for categorical, string and boolean types, sorted in display order.  Will be rendered in this order */
     const selectableCategoryNames = ControlsHelpers.selectableCategoryNames(
       schema
@@ -151,42 +162,61 @@ class Categories extends React.Component<{}, State> {
           paddingBottom: 0,
         }}
       >
-        {/* STANDARD FIELDS */}
-        {/* this is duplicative but flat, could be abstracted */}
-        {standardCategoryNames.length ? (
-          <Collapse>
-            <span>Standard Categories</span>
-            {standardCategoryNames.map((catName: string) => (
-              <Category
-                key={catName}
-                // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
-                metadataField={catName}
-                onExpansionChange={this.onExpansionChange}
-                isExpanded={expandedCats.has(catName)}
-                createAnnoModeActive={createAnnoModeActive}
-                categoryType="standard"
-              />
-            ))}
-          </Collapse>
-        ) : null}
-
-        {/* AUTHOR FIELDS */}
-        {authorCategoryNames.length ? (
-          <Collapse>
-            <span>Author Categories</span>
-            {authorCategoryNames.map((catName: string) => (
-              <Category
-                key={catName}
-                // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
-                metadataField={catName}
-                onExpansionChange={this.onExpansionChange}
-                isExpanded={expandedCats.has(catName)}
-                createAnnoModeActive={createAnnoModeActive}
-                categoryType="author"
-              />
-            ))}
-          </Collapse>
-        ) : null}
+        {isCellGuideCxg ? (
+          <>
+            {standardCategoryNames.length &&
+              standardCategoryNames.map((catName: string) => (
+                <Category
+                  key={catName}
+                  // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
+                  metadataField={catName}
+                  onExpansionChange={this.onExpansionChange}
+                  isExpanded={expandedCats.has(catName)}
+                  createAnnoModeActive={createAnnoModeActive}
+                  categoryType="standard"
+                />
+              ))}
+          </>
+        ) : (
+          <>
+            {/* STANDARD FIELDS */}
+            {/* this is duplicative but flat, could be abstracted */}
+            {standardCategoryNames.length ? (
+              <Collapse>
+                <span>Standard Categories</span>
+                {standardCategoryNames.map((catName: string) => (
+                  <Category
+                    key={catName}
+                    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
+                    metadataField={catName}
+                    onExpansionChange={this.onExpansionChange}
+                    isExpanded={expandedCats.has(catName)}
+                    createAnnoModeActive={createAnnoModeActive}
+                    categoryType="standard"
+                  />
+                ))}
+              </Collapse>
+            ) : null}
+
+            {/* AUTHOR FIELDS */}
+            {authorCategoryNames.length ? (
+              <Collapse>
+                <span>Author Categories</span>
+                {authorCategoryNames.map((catName: string) => (
+                  <Category
+                    key={catName}
+                    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
+                    metadataField={catName}
+                    onExpansionChange={this.onExpansionChange}
+                    isExpanded={expandedCats.has(catName)}
+                    createAnnoModeActive={createAnnoModeActive}
+                    categoryType="author"
+                  />
+                ))}
+              </Collapse>
+            ) : null}
+          </>
+        )}
       </div>
     );
   }

diff --git a/client/src/reducers/controls.ts b/client/src/reducers/controls.ts
@@ -68,6 +68,7 @@ interface ControlsState {
   geneSummary: string;
   geneName: string;
   geneSynonyms: string[];
+  isCellGuideCxg: boolean;
 }
 const Controls = (
   state: ControlsState = {
@@ -95,6 +96,7 @@ const Controls = (
     graphRenderCounter: 0 /* integer as <Component key={graphRenderCounter} - a change in key forces a remount */,
     colorLoading: false,
     datasetDrawer: false,
+    isCellGuideCxg: false,
   },
   action: AnyAction
 ) => {
@@ -117,6 +119,7 @@ const Controls = (
         loading: false,
         error: null,
         resettingInterface: false,
+        isCellGuideCxg: action.isCellGuideCxg,
       };
     }
     case "reset subset": {