Limit facet options and render them nicely (#243)

Author: Cito

src/components/browse/dataset/datasetHeader.tsx

@@ -5,6 +5,7 @@ import { SearchResponseModel } from "../../../models/dataset";
 import { useNavigate } from "react-router-dom";
 import { querySearchService } from "../../../api/browse";
 import { handleFilterAndSearch } from "../shared";
+import { renderFacetOption } from "../sidebar/filter";
 
 interface DatasetHeaderProps {
   dsCount: number;
@@ -23,6 +24,12 @@ interface DatasetHeaderProps {
   setPage: Dispatch<SetStateAction<number>>;
 }
 
+function renderItem(item: string): string {
+  let facetAndValue = item.split("|", 2)[1];
+  let [facet, value] = facetAndValue.split(": ", 2);
+  return facet + ": " + renderFacetOption(value, facet);
+}
+
 /** Section at the top of Browse page. It contains search keywords, applied filters and datasets count found. */
 const DatasetHeader = (props: DatasetHeaderProps) => {
   const navigate = useNavigate();
@@ -147,13 +154,13 @@ const DatasetHeader = (props: DatasetHeaderProps) => {
           )}
           {getFilterParamsList().map((item, idx) => (
             <Badge
-              key={item.split("|")[1]}
+              key={item.split("|", 2)[1]}
               className="py-1 m-0 me-2 text-black fs-7 border text-capitalize bg-white border-secondary fw-normal"
               style={{
                 whiteSpace: "nowrap",
                 textOverflow: "ellipsis",
               }}
-              title={item.split("|")[1]}
+              title={renderItem(item)}
             >
               <div className="lh-1">
                 <Row className="flex-nowrap">
@@ -164,7 +171,7 @@ const DatasetHeader = (props: DatasetHeaderProps) => {
                     />
                   </Col>
                   <Col className="ps-0 align-items-center d-flex">
-                    <span className="px-1 mb-0">{item.split("|")[1]}</span>
+                    <span className="px-1 mb-0">{renderItem(item)}</span>
                   </Col>
                 </Row>
               </div>

src/components/browse/sidebar/filter.tsx

@@ -2,6 +2,31 @@ import React, { Dispatch, SetStateAction } from "react";
 import { Form, Col, Container, Row, Badge } from "react-bootstrap";
 import { FacetModel, FacetFilterModel } from "../../../models/facets";
 
+const ALWAYS_TITLE_CASE_OPTIONS = /Experiment|Study Type/i;
+
+const SOMETIMES_TITLE_CASE_OPTIONS = /Platform|Analysis Level/i;
+
+const TITLE_CASE_WORDS = /Illumina|Total/gi;
+
+const UPPER_CASE_REPLACE = ["HiSeq"];
+
+export function renderFacetOption(value: string, facet: string): string {
+  if (!value) return "unspecified";
+  value = value.replace(/_/g, " ");
+  if (facet && ALWAYS_TITLE_CASE_OPTIONS.test(facet)) {
+    value = value.toLowerCase().replace(/\b\w/g, (char) => char.toUpperCase());
+  } else if (facet && SOMETIMES_TITLE_CASE_OPTIONS.test(facet)) {
+    value = value.replace(
+      TITLE_CASE_WORDS,
+      (word) => word.slice(0, 1).toUpperCase() + word.slice(1).toLowerCase()
+    );
+    for (let word of UPPER_CASE_REPLACE) {
+      value = value.replace(word.toUpperCase(), word);
+    }
+  }
+  return value;
+}
+
 interface FilterProps {
   facet: FacetModel;
   check: Map<string, boolean>;
@@ -63,7 +88,7 @@ const Filter = (props: FilterProps) => {
                     <Row>
                       <Col lg={10} md={10} sm={10} xl={10} xs={10} xxl={10}>
                         <p className="ps-2 my-0 text-capitalize text-break">
-                          {option.value}
+                          {renderFacetOption(option.value, props.facet.name)}
                         </p>
                       </Col>
                       <Col

src/components/browse/sidebar/sidebar.tsx

@@ -11,6 +11,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faBars } from "@fortawesome/free-solid-svg-icons";
 import { handleFilterAndSearch } from "../shared";
 
+const MAX_FACET_OPTIONS = 5;
+
 interface SidebarProps {
   facetList: FacetModel[] | null;
   setSearchResults: Dispatch<SetStateAction<SearchResponseModel | null>>;
@@ -86,6 +88,7 @@ const Sidebar = (props: SidebarProps) => {
       {props.facetList === null || props.facetList.length === 0 ? null : (
         <Row className="position-relative w-100 px-1 mx-0">
           {props.facetList
+            .filter((facet) => facet.options.length <= MAX_FACET_OPTIONS)
             .sort((a, b) => (b.key < a.key ? 1 : -1))
             .map((facet, index) => (
               <Filter

src/mocks/handlers.js

@@ -63,7 +63,6 @@ export const handlers = [
   }),
   // intercept user creation request
   http.post(USERS_URL.href, () => {
-    console.log("registered called")
     session.id = user.id;
     session.state = "Registered";
     return HttpResponse.json(undefined, { status: 201 });
@@ -105,7 +104,7 @@ async function getMatchingParamString(request, responseMap) {
       Object.entries(bodyParams).forEach(([key, value]) => {
         requestParams.set(key, value);
       });
-    } catch { }
+    } catch {}
   }
   // find the response with the most matching parameters
   let bestParamString = null;