Merge pull request #273 from cBioPortal/fix/mobile-view

fix multiple bugs on mobile
cBioPortal · Nov 21, 2024 · 19645ce · 19645ce
2 parents 8a5c30b + 5596411
commit 19645ce
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 32 deletions.
diff --git a/web/src/main/javascript/src/components/Header/Header.tsx b/web/src/main/javascript/src/components/Header/Header.tsx
@@ -111,10 +111,11 @@ export default function Header({
               flexShrink: 0,
               alignItems: "center",
               visibility: searchSectionHidden ? "hidden" : "unset",
+              pointerEvents: searchSectionHidden ? 'none' : 'unset'
             }}
           >
             <SearchBySelect />
-            <SearchBar oncoTreeData={oncoTreeData} oncoTree={oncoTree} disabled={searchSectionHidden} />
+            <SearchBar oncoTreeData={oncoTreeData} oncoTree={oncoTree} />
             <div style={{ marginRight: 20 }} />
             <VersionSelect
               onVersionChange={onVersionChange}

diff --git a/web/src/main/javascript/src/components/SearchBar/SearchBar.tsx b/web/src/main/javascript/src/components/SearchBar/SearchBar.tsx
@@ -30,7 +30,6 @@ export interface ISearchBarProps {
   oncoTreeData: OncoTreeNode;
   oncoTree: OncoTree | undefined;
   mobileView?: boolean;
-  disabled?: boolean;
 }
 
 const NEXT_BUTTON_DATA_TYPE = "nextButton";
@@ -41,7 +40,6 @@ export default function SearchBar({
   oncoTreeData,
   oncoTree,
   mobileView = false,
-  disabled = false,
 }: ISearchBarProps) {
   const [searchParams, setSearchParams] = useSearchParams();
   const search = searchParams.get("search");
@@ -207,7 +205,6 @@ export default function SearchBar({
       <ReactSelect
         inputValue={input}
         value={getSearchBarValue()}
-        isDisabled={disabled}
         placeholder={
           isValidField(field)
             ? SEARCH_BY_FIELD_INFO[field].searchBarPlaceHolder
@@ -229,7 +226,7 @@ export default function SearchBar({
         }}
         options={options}
         components={{
-          ClearIndicator,
+          ClearIndicator: (props) => <ClearIndicator {...props} searchResults={cancerTypeResults} searchResultsIndex={cancerTypeResultsIndex} />,
           Control,
         }}
         styles={{
@@ -262,26 +259,31 @@ export default function SearchBar({
     </div>
   );
 
+  interface IClearIndicatorProps extends  ClearIndicatorProps<
+  OncoTreeSearchOption,
+  false,
+  GroupBase<OncoTreeSearchOption>
+> {
+    searchResults: D3OncoTreeNode[] | undefined,
+    searchResultsIndex: number | undefined
+  }
+
   function ClearIndicator(
-    props: ClearIndicatorProps<
-      OncoTreeSearchOption,
-      false,
-      GroupBase<OncoTreeSearchOption>
-    >,
+    {searchResults, searchResultsIndex, ...props}: IClearIndicatorProps,
   ) {
     const inputStyle = props.getStyles("input", { ...props, isHidden: false });
     const inputColor = inputStyle.color ?? "black";
     const clearIndicatorClass = css(props.getStyles("clearIndicator", props));
 
     const resultsAndIndexDefined =
-      cancerTypeResults !== undefined && cancerTypeResultsIndex !== undefined;
+      searchResults !== undefined && searchResultsIndex !== undefined;
 
     function getResultsNumberSpan() {
       if (!resultsAndIndexDefined) {
         return undefined;
       }
 
-      if (cancerTypeResults.length === 0) {
+      if (searchResults.length === 0) {
         return (
           <span
             className={clearIndicatorClass}
@@ -300,45 +302,51 @@ export default function SearchBar({
           style={{
             color: Array.isArray(inputColor) ? inputColor[0] : inputColor,
           }}
-        >{`${cancerTypeResultsIndex + 1}/${cancerTypeResults.length}`}</span>
+        >{`${searchResultsIndex + 1}/${searchResults.length}`}</span>
       );
     }
 
-    const getPreviousResult = resultsAndIndexDefined
-    ? () => {
-        let newIndex = cancerTypeResults.length - 1;
+    const getPreviousResult = useCallback(() => {
+      if (!resultsAndIndexDefined) {
+        return;
+      }
+
+      let newIndex = searchResults.length - 1;
         if (cancerTypeResultsIndex !== 0) {
-          newIndex = cancerTypeResultsIndex - 1;
+          newIndex = searchResultsIndex - 1;
         }
-        oncoTree?.focus(cancerTypeResults[newIndex]);
+        oncoTree?.focus(searchResults[newIndex]);
         setCancerTypeResultsIndex(newIndex);
+    }, [resultsAndIndexDefined, searchResults, searchResultsIndex]);
+
+    const getNextResult = useCallback(() => {
+      if (!resultsAndIndexDefined) {
+        return;
       }
-    : undefined;
 
-    const getNextResult = resultsAndIndexDefined
-    ? () => {
-        let newIndex = 0;
+      let newIndex = 0;
         if (
           cancerTypeResultsIndex !==
-          cancerTypeResults.length - 1
+          searchResults.length - 1
         ) {
-          newIndex = cancerTypeResultsIndex + 1;
+          newIndex = searchResultsIndex + 1;
         }
-        oncoTree?.focus(cancerTypeResults[newIndex]);
+        oncoTree?.focus(searchResults[newIndex]);
         setCancerTypeResultsIndex(newIndex);
-      }
-    : undefined
+    }, [resultsAndIndexDefined, searchResults, searchResultsIndex]);
+
+    const isMobile = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
 
     return (
       <>
         {getResultsNumberSpan()}
-        {resultsAndIndexDefined && cancerTypeResults.length > 0 && (
+        {resultsAndIndexDefined && searchResults.length > 0 && (
           <div style={{ userSelect: "none", display: "flex" }}>
             <div
               data-type={PREV_BUTTON_DATA_TYPE}
               className={clearIndicatorClass}
-              onClick={mobileView ? undefined : getPreviousResult}
-              onTouchStart={mobileView ? getPreviousResult : undefined}
+              onClick={isMobile ? undefined : getPreviousResult}
+              onTouchStart={isMobile ? getPreviousResult : undefined}
             >
               <FontAwesomeIcon
                 style={{ pointerEvents: "none" }}
@@ -348,8 +356,8 @@ export default function SearchBar({
             <div
               data-type={NEXT_BUTTON_DATA_TYPE}
               className={clearIndicatorClass}
-              onClick={mobileView ? undefined : getNextResult}
-              onTouchStart={mobileView ? getNextResult : undefined}
+              onClick={isMobile ? undefined : getNextResult}
+              onTouchStart={isMobile ? getNextResult : undefined}
             >
               <FontAwesomeIcon
                 style={{ pointerEvents: "none" }}