From 48b9ca7315d3dd5a9ab4c7311fad56622a21d681 Mon Sep 17 00:00:00 2001
From: bprize15 <bprize15@gmail.com>
Date: Thu, 21 Nov 2024 08:32:09 -0500
Subject: [PATCH 1/3] fix multiple bugs on mobile

---
 .../src/components/Header/Header.tsx          | 15 +++++------
 .../src/components/SearchBar/SearchBar.tsx    | 25 ++++++++++---------
 2 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/web/src/main/javascript/src/components/Header/Header.tsx b/web/src/main/javascript/src/components/Header/Header.tsx
index 526057f..1e46adb 100644
--- a/web/src/main/javascript/src/components/Header/Header.tsx
+++ b/web/src/main/javascript/src/components/Header/Header.tsx
@@ -111,15 +111,16 @@ export default function Header({
               flexShrink: 0,
               alignItems: "center",
               visibility: searchSectionHidden ? "hidden" : "unset",
+              pointerEvents: searchSectionHidden ? 'none' : 'unset'
             }}
           >
-            <SearchBySelect />
-            <SearchBar oncoTreeData={oncoTreeData} oncoTree={oncoTree} disabled={searchSectionHidden} />
-            <div style={{ marginRight: 20 }} />
-            <VersionSelect
-              onVersionChange={onVersionChange}
-              stats={treeStats}
-            />
+              <SearchBySelect />
+              <SearchBar oncoTreeData={oncoTreeData} oncoTree={oncoTree} />
+              <div style={{ marginRight: 20 }} />
+              <VersionSelect
+                onVersionChange={onVersionChange}
+                stats={treeStats}
+              />
           </div>
         )}
         <div style={{ flexGrow: 1 }} />
diff --git a/web/src/main/javascript/src/components/SearchBar/SearchBar.tsx b/web/src/main/javascript/src/components/SearchBar/SearchBar.tsx
index 38dd519..31948bc 100644
--- 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
@@ -304,20 +301,25 @@ export default function SearchBar({
       );
     }
 
-    const getPreviousResult = resultsAndIndexDefined
-    ? () => {
-        let newIndex = cancerTypeResults.length - 1;
+    const getPreviousResult = useCallback(() => {
+      if (!resultsAndIndexDefined) {
+        return;
+      }
+
+      let newIndex = cancerTypeResults.length - 1;
         if (cancerTypeResultsIndex !== 0) {
           newIndex = cancerTypeResultsIndex - 1;
         }
         oncoTree?.focus(cancerTypeResults[newIndex]);
         setCancerTypeResultsIndex(newIndex);
+    }, [resultsAndIndexDefined, cancerTypeResults, cancerTypeResultsIndex]);
+
+    const getNextResult = useCallback(() => {
+      if (!resultsAndIndexDefined) {
+        return;
       }
-    : undefined;
 
-    const getNextResult = resultsAndIndexDefined
-    ? () => {
-        let newIndex = 0;
+      let newIndex = 0;
         if (
           cancerTypeResultsIndex !==
           cancerTypeResults.length - 1
@@ -326,8 +328,7 @@ export default function SearchBar({
         }
         oncoTree?.focus(cancerTypeResults[newIndex]);
         setCancerTypeResultsIndex(newIndex);
-      }
-    : undefined
+    }, [resultsAndIndexDefined, cancerTypeResults, cancerTypeResultsIndex]);
 
     return (
       <>

From 4bb28d4eba17c31f01f4e24281b7ce593bbc5b0f Mon Sep 17 00:00:00 2001
From: bprize15 <bprize15@gmail.com>
Date: Thu, 21 Nov 2024 08:33:11 -0500
Subject: [PATCH 2/3] update formatting

---
 .../javascript/src/components/Header/Header.tsx    | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/web/src/main/javascript/src/components/Header/Header.tsx b/web/src/main/javascript/src/components/Header/Header.tsx
index 1e46adb..ab38123 100644
--- a/web/src/main/javascript/src/components/Header/Header.tsx
+++ b/web/src/main/javascript/src/components/Header/Header.tsx
@@ -114,13 +114,13 @@ export default function Header({
               pointerEvents: searchSectionHidden ? 'none' : 'unset'
             }}
           >
-              <SearchBySelect />
-              <SearchBar oncoTreeData={oncoTreeData} oncoTree={oncoTree} />
-              <div style={{ marginRight: 20 }} />
-              <VersionSelect
-                onVersionChange={onVersionChange}
-                stats={treeStats}
-              />
+            <SearchBySelect />
+            <SearchBar oncoTreeData={oncoTreeData} oncoTree={oncoTree} />
+            <div style={{ marginRight: 20 }} />
+            <VersionSelect
+              onVersionChange={onVersionChange}
+              stats={treeStats}
+            />
           </div>
         )}
         <div style={{ flexGrow: 1 }} />

From 5596411ce0f5c0cb228f71ef00c6c1fdc249205c Mon Sep 17 00:00:00 2001
From: bprize15 <bprize15@gmail.com>
Date: Thu, 21 Nov 2024 09:34:48 -0500
Subject: [PATCH 3/3] fix searchbar on mobile

---
 .../src/components/SearchBar/SearchBar.tsx    | 51 +++++++++++--------
 1 file changed, 29 insertions(+), 22 deletions(-)

diff --git a/web/src/main/javascript/src/components/SearchBar/SearchBar.tsx b/web/src/main/javascript/src/components/SearchBar/SearchBar.tsx
index 31948bc..bb54d9e 100644
--- a/web/src/main/javascript/src/components/SearchBar/SearchBar.tsx
+++ b/web/src/main/javascript/src/components/SearchBar/SearchBar.tsx
@@ -226,7 +226,7 @@ export default function SearchBar({
         }}
         options={options}
         components={{
-          ClearIndicator,
+          ClearIndicator: (props) => <ClearIndicator {...props} searchResults={cancerTypeResults} searchResultsIndex={cancerTypeResultsIndex} />,
           Control,
         }}
         styles={{
@@ -259,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}
@@ -297,7 +302,7 @@ export default function SearchBar({
           style={{
             color: Array.isArray(inputColor) ? inputColor[0] : inputColor,
           }}
-        >{`${cancerTypeResultsIndex + 1}/${cancerTypeResults.length}`}</span>
+        >{`${searchResultsIndex + 1}/${searchResults.length}`}</span>
       );
     }
 
@@ -306,13 +311,13 @@ export default function SearchBar({
         return;
       }
 
-      let newIndex = cancerTypeResults.length - 1;
+      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, cancerTypeResults, cancerTypeResultsIndex]);
+    }, [resultsAndIndexDefined, searchResults, searchResultsIndex]);
 
     const getNextResult = useCallback(() => {
       if (!resultsAndIndexDefined) {
@@ -322,24 +327,26 @@ export default function SearchBar({
       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);
-    }, [resultsAndIndexDefined, cancerTypeResults, cancerTypeResultsIndex]);
+    }, [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" }}
@@ -349,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" }}