start fixing ts errors

dicom-viewer/src/App.tsx

@@ -21,6 +21,14 @@ import cornerstoneDICOMImageLoader from "@cornerstonejs/dicom-image-loader"
 
 window.cornerstoneTools = cornerstoneTools;
 
+
+type ViewportDiv = HTMLDivElement & {
+  _cornerstoneEnabled?: boolean;
+  _lastViewportType?: any;
+  _resizeObserver?: ResizeObserver;
+  _overlayListener?: EventListener;
+};
+
 const { MouseBindings, KeyboardBindings } = csToolsEnums;
 
 const { IMAGE_RENDERED } = Enums.Events;
@@ -142,6 +150,7 @@ function App() {
   const [referenceLinesEnabled, setReferenceLinesEnabled] = useState(true);
 
   const [showAdvancedMouseBindings, setShowAdvancedMouseBindings] = useState(false);
+  const [showAdvancedCtrlMouseBindings, setShowAdvancedCtrlMouseBindings] = useState(false);
 
   const sortViewportImageIdsBySliceLocation = () => {
     setViewportImageIds(prev => {
@@ -222,7 +231,7 @@ function App() {
   const [viewportMenuOpen, setViewportMenuOpen] = useState(false)
 
   // Store refs for each viewport
-  const viewportRefs = useRef<Array<HTMLDivElement | null>>([])
+  const viewportRefs = useRef<Array<ViewportDiv | null>>([]);
 
   // Store the properties and scroll position of existing viewports before grid change
   const prevViewportProps = useRef<Record<number, any>>({});
@@ -702,13 +711,13 @@ function App() {
 
 
         // Always (re-)attach overlay update for each viewport
-        if (element._overlayListener) {
+        if ((element)._overlayListener) {
           // Remove previous listener if present
-          viewport.element.removeEventListener(IMAGE_RENDERED, element._overlayListener);
+          viewport.element.removeEventListener(IMAGE_RENDERED, (element)._overlayListener);
         }
         const overlayListener = () => updateOverlay(i, viewport);
         viewport.element.addEventListener(IMAGE_RENDERED, overlayListener);
-        element._overlayListener = overlayListener;
+        (element)._overlayListener = overlayListener;
         updateOverlay(i, viewport);
       }
 
@@ -763,9 +772,9 @@ function App() {
     // Cleanup: disconnect ResizeObservers
     return () => {
       viewportRefs.current.forEach(el => {
-        if (el && el._resizeObserver) {
-          el._resizeObserver.disconnect();
-          delete el._resizeObserver;
+        if (el && (el)._resizeObserver) {
+          (el)._resizeObserver.disconnect();
+          delete (el)._resizeObserver;
         }
       });
       cancelAnimationFrame(raf);
@@ -1329,7 +1338,6 @@ function App() {
       position: "relative",
       width: "99vw",
       height: "99vh",
-      background: "#111",
       padding: "12px", // <-- Add this line
       boxSizing: "border-box", // <-- Ensure padding doesn't shrink content
       background: "#222",
@@ -1620,7 +1628,7 @@ function App() {
                   fontSize: "15px",
                 }}
                 onClick={() => {
-                  saveVisibleViewportState(viewportGrid, renderingEngineRef.current);
+                  saveVisibleViewportState();
                   setViewportGrid({ rows: opt.rows, cols: opt.cols })
                   setViewportMenuOpen(false)
                 }}
@@ -1804,33 +1812,50 @@ function App() {
                   </div>
                 ))}
 
-                {/* Expandable advanced ctrl+mouse bindings */}
-                {showAdvancedMouseBindings && (
-                  <div style={{ marginTop: 8 }}>
-                    {ALL_MOUSE_BINDINGS.slice(3).map((btn) => (
-                      <div key={btn.value + "_ctrl"} style={{ marginBottom: 10 }}>
-                        <label style={{ marginRight: 8 }}>{btn.label} + Ctrl:</label>
-                        <select
-                          value={ctrlMouseToolBindings[btn.value] || ""}
-                          onChange={e => setCtrlMouseToolBindings(prev => ({ ...prev, [btn.value]: e.target.value }))}
-                          style={{
-                            background: "#333",
-                            color: "#fff",
-                            border: "1px solid #444",
-                            borderRadius: "4px",
-                            padding: "4px 8px",
-                            fontSize: "14px",
-                          }}
-                        >
-                          <option value="">(None)</option>
-                          {TOOL_OPTIONS.map(opt => (
-                            <option key={opt.value} value={opt.value}>{opt.label}</option>
-                          ))}
-                        </select>
-                      </div>
-                    ))}
-                  </div>
-                )}
+                {/* Separate button for advanced Ctrl+Mouse bindings */}
+                <div style={{ margin: "12px 0" }}>
+                  <button
+                    style={{
+                      background: "#333",
+                      color: "#fff",
+                      border: "none",
+                      borderRadius: "4px",
+                      padding: "4px 12px",
+                      cursor: "pointer",
+                      fontSize: "14px",
+                      marginBottom: "8px",
+                    }}
+                    onClick={() => setShowAdvancedCtrlMouseBindings(v => !v)}
+                  >
+                    {showAdvancedCtrlMouseBindings ? "Hide" : "Show"} Advanced Ctrl + Mouse Bindings
+                  </button>
+                  {showAdvancedCtrlMouseBindings && (
+                    <div style={{ marginTop: 8 }}>
+                      {ALL_MOUSE_BINDINGS.slice(3).map((btn) => (
+                        <div key={btn.value + "_ctrl"} style={{ marginBottom: 10 }}>
+                          <label style={{ marginRight: 8 }}>{btn.label} + Ctrl:</label>
+                          <select
+                            value={ctrlMouseToolBindings[btn.value] || ""}
+                            onChange={e => setCtrlMouseToolBindings(prev => ({ ...prev, [btn.value]: e.target.value }))}
+                            style={{
+                              background: "#333",
+                              color: "#fff",
+                              border: "1px solid #444",
+                              borderRadius: "4px",
+                              padding: "4px 8px",
+                              fontSize: "14px",
+                            }}
+                          >
+                            <option value="">(None)</option>
+                            {TOOL_OPTIONS.map(opt => (
+                              <option key={opt.value} value={opt.value}>{opt.label}</option>
+                            ))}
+                          </select>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
               </div>
               <button
                 style={{

dicom-viewer/src/lib/createImageIds.ts

@@ -1,7 +1,6 @@
 import { api } from "dicomweb-client"
 import cornerstoneDICOMImageLoader from "@cornerstonejs/dicom-image-loader"
 
-import { readFile } from "dicom-parser"
 /**
 /**
  * Uses dicomweb-client to fetch metadata of a study, cache it in cornerstone,

dicom-viewer/src/lib/createImageIdsAndCacheMetaData.ts

@@ -1,7 +1,6 @@
 import { api } from "dicomweb-client"
 import cornerstoneDICOMImageLoader from "@cornerstonejs/dicom-image-loader"
 
-import { readFile } from "dicom-parser"
 /**
 /**
  * Uses dicomweb-client to fetch metadata of a study, cache it in cornerstone,