From f71bc709a8f84c481960817319ddf3b508a10d5f Mon Sep 17 00:00:00 2001
From: David Lougheed <david.lougheed@gmail.com>
Date: Thu, 18 Jan 2024 13:39:20 -0500
Subject: [PATCH] fix(client): use url-encoded node for peak results navigation

---
 client/src/components/Controls.js    |  5 +++--
 client/src/components/PeakResults.js | 11 +++++++----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Controls.js b/client/src/components/Controls.js
index d159a3ae..0374aed6 100644
--- a/client/src/components/Controls.js
+++ b/client/src/components/Controls.js
@@ -21,7 +21,7 @@ import {
   fetchPositions,
 } from '../actions.js'
 import {useNavigate, useParams} from "react-router-dom";
-import {useDatasetIndex, useUrlEncodedNode} from "../hooks";
+import {useUrlEncodedNode} from "../hooks";
 
 const defaultChrom = "rsID";
 
@@ -48,6 +48,7 @@ const Controls = ({toggleHelp}) => {
   const params = useParams();
   const navigate = useNavigate();
 
+  const urlEncodedNode = useUrlEncodedNode();
   const chroms = useSelector(state => state.chroms);
   const {chrom, position} = useSelector(state => state.ui);
   const positions = useSelector(state => state.positions);
@@ -55,7 +56,7 @@ const Controls = ({toggleHelp}) => {
 
   const dispatch = useDispatch();
 
-  const {node: urlEncodedNode, chrom: paramsChrom, position: paramsPosition} = params;
+  const {chrom: paramsChrom, position: paramsPosition} = params;
   const {isLoading, list} = positions;
 
   const [didFirstSearch, setDidFirstSearch] = useState(false);
diff --git a/client/src/components/PeakResults.js b/client/src/components/PeakResults.js
index 821f2385..86732ec9 100644
--- a/client/src/components/PeakResults.js
+++ b/client/src/components/PeakResults.js
@@ -9,6 +9,7 @@ import cx from 'clsx'
 import Icon from './Icon'
 import PeakAssay from './PeakAssay'
 import {doSearch, setChrom, setPosition} from "../actions";
+import {useUrlEncodedNode} from "../hooks";
 
 const groupAndSortPeaks = memoizeOne(groupBy(prop('assay')));
 
@@ -17,7 +18,9 @@ const PeakResults = () => {
   const navigate = useNavigate();
   const params = useParams();
 
-  const {node, chrom, position, assay: activeAssay} = params;
+  const {chrom, position, assay: activeAssay} = params;
+
+  const urlEncodedNode = useUrlEncodedNode();
 
   const assays = useSelector(state => state.assays.list || []);
 
@@ -37,12 +40,12 @@ const PeakResults = () => {
 
     if (activeAssay && !(activeAssay in peaksByAssay) && peaksLoaded) {
       // Assay isn't valid for the position in question
-      const url = `/datasets/${node}/explore/locus/${chrom}/${position}` +
+      const url = `/datasets/${urlEncodedNode}/explore/locus/${chrom}/${position}` +
         (assaysWithFeatures.length ? `/${assays[0]}` : "");
       console.info(`assay ${activeAssay} isn't valid for the locus in question; navigating to ${url}`);
       navigate(url, {replace: true});
     } else if (!activeAssay && assaysWithFeatures.length && peaksLoaded) {
-      const url = `/datasets/${node}/explore/locus/${chrom}/${position}/${assaysWithFeatures[0]}`;
+      const url = `/datasets/${urlEncodedNode}/explore/locus/${chrom}/${position}/${assaysWithFeatures[0]}`;
       console.info(`no assay selected; navigating to ${url}`);
       navigate(url, {replace: true});
     }
@@ -93,7 +96,7 @@ const PeakResults = () => {
                   className={cx({active: activeAssay === assay})}
                   onClick={() =>
                     nPeaks && navigate(
-                      `/datasets/${node}/explore/locus/${chrom}/${position}/${assay}`,
+                      `/datasets/${urlEncodedNode}/explore/locus/${chrom}/${position}/${assay}`,
                       {replace: true})}
                   disabled={!nPeaks}
                   aria-disabled={true}