fix: make sure selected roi is rendered on top of other rois (#46)

Prevents other rois to be selected when clicking on the selected roi
close #37

src/components/api/RoiList.tsx

@@ -1,9 +1,17 @@
-import { useRois } from '../../hooks';
+import { useRoiState, useRois } from '../../hooks';
+import { assert } from '../../utilities/assert';
 
 import { RoiBox } from './RoiBox';
 
 export function RoiList() {
-  const rois = useRois();
+  const rois = useRois().slice();
+  const { selectedRoi } = useRoiState();
+  if (selectedRoi) {
+    const index = rois.findIndex((roi) => roi.id === selectedRoi);
+    assert(index !== -1, 'Selected ROI not found');
+    const roi = rois.splice(index, 1)[0];
+    rois.push(roi);
+  }
   return (
     <>
       {rois.map((roi) => (

src/context/updaters/endAction.ts

@@ -10,7 +10,6 @@ export function endAction(draft: ReactRoiState) {
   if (!selectedRoi) return;
   const roi = rois.find((roi) => roi.id === selectedRoi);
   const commitedRoi = committedRois.find((roi) => roi.id === selectedRoi);
-  assert(roi, 'Selected ROI not found');
 
   if (!roi) return;