fix: Ensure Contact Map sidebar visibility on mobile with Higher Z-Index

Author: AmirMohammad Cheraghali

src/App.tsx

@@ -72,6 +72,9 @@ function App() {
               viewerRef.current?.setCameraOrientation((window as any).__pendingOrientation);
               delete (window as any).__pendingOrientation;
             }
+            if (initialUrlState.measurements) {
+              viewerRef.current?.restoreMeasurements(initialUrlState.measurements);
+            }
             setHasRestoredState(false);
           }, 500);
         } catch (e) { console.warn("App: Failed to restore state", e); }

src/components/ContactMap.tsx

@@ -851,12 +851,41 @@ export const ContactMap: React.FC<ContactMapProps> = ({
                     )}
 
                     <div className={`
-                        absolute inset-y-0 right-0 z-50 w-80 shadow-2xl transition-transform duration-300 ease-in-out md:shadow-none
+                        absolute inset-y-0 right-0 z-[100] w-full max-w-[320px] md:w-80 shadow-2xl transition-transform duration-300 ease-in-out md:shadow-none
                         ${showMobileSidebar ? 'translate-x-0' : 'translate-x-full'} md:translate-x-0 md:relative md:flex md:flex-col md:border-l md:overflow-y-auto
                         flex flex-col border-l overflow-y-auto
                         ${isLightMode ? 'bg-white border-neutral-100' : 'bg-neutral-900 border-neutral-800'}
                     `}>
 
+
+                        {/* Mobile Actions (Hidden on Desktop) */}
+                        <div className="md:hidden p-3 border-b border-neutral-100 dark:border-neutral-800 space-y-2">
+                            <h4 className="text-xs font-bold uppercase opacity-50 tracking-wider">Actions</h4>
+                            <div className="grid grid-cols-2 gap-2">
+                                <button
+                                    onClick={handleDownloadClick}
+                                    className={`flex items-center justify-center gap-2 px-3 py-2 rounded-lg text-xs font-medium transition-colors ${isLightMode ? 'bg-blue-600 text-white' : 'bg-blue-600 text-white'}`}
+                                >
+                                    <BookOpen className="w-4 h-4" />
+                                    <span>PDF Report</span>
+                                </button>
+                                <button
+                                    onClick={handleDownload}
+                                    className={`flex items-center justify-center gap-2 px-3 py-2 rounded-lg text-xs font-medium transition-colors ${isLightMode ? 'bg-neutral-100 text-neutral-600' : 'bg-neutral-800 text-neutral-300'}`}
+                                >
+                                    <Download className="w-4 h-4" />
+                                    <span>Image</span>
+                                </button>
+                                <button
+                                    onClick={handleDownloadCSV}
+                                    className={`col-span-2 flex items-center justify-center gap-2 px-3 py-2 rounded-lg text-xs font-medium transition-colors ${isLightMode ? 'bg-neutral-100 text-neutral-600' : 'bg-neutral-800 text-neutral-300'}`}
+                                >
+                                    <FileText className="w-4 h-4" />
+                                    <span>Export CSV</span>
+                                </button>
+                            </div>
+                        </div>
+
                         {/* Section: View & Zoom */}
                         <div className="p-3 border-b border-neutral-100 dark:border-neutral-800 space-y-3">
                             <h4 className="text-xs font-bold uppercase opacity-50 tracking-wider">View Options</h4>

src/components/ProteinViewer.tsx

@@ -60,6 +60,8 @@ export interface ProteinViewerRef {
     recordTurntable: (duration?: number) => Promise<Blob>;
     clearMeasurements: () => void;
     visualizeContact: (chainA: string, resA: number, chainB: string, resB: number) => void;
+    getMeasurements: () => MeasurementData[];
+    restoreMeasurements: (measurements: { atom1: any, atom2: any }[]) => void;
 }
 
 
@@ -827,6 +829,45 @@ export const ProteinViewer = forwardRef<ProteinViewerRef, ProteinViewerProps>(({
                     }
                 });
             }
+        },
+        getMeasurements: () => measurementsRef.current,
+        restoreMeasurements: (list: { atom1: any, atom2: any }[]) => {
+            if (!componentRef.current || !list || list.length === 0) return;
+            // Clear existing first
+            measurementsRef.current = [];
+
+            // Helper to find atom index
+            const findAtom = (info: any) => {
+                let found: any = null;
+                if (!componentRef.current) return null;
+                // Try precise match first
+                const sel = new window.NGL.Selection(`${info.r}:${info.c} and .${info.a}`);
+                componentRef.current.structure.eachAtom((atom: any) => {
+                    found = atom;
+                }, sel);
+                return found;
+            };
+
+            list.forEach(m => {
+                const a1 = findAtom({ c: m.atom1.chain, r: m.atom1.resNo, a: m.atom1.atomName });
+                const a2 = findAtom({ c: m.atom2.chain, r: m.atom2.resNo, a: m.atom2.atomName });
+
+                if (a1 && a2) {
+                    const dx = a1.x - a2.x;
+                    const dy = a1.y - a2.y;
+                    const dz = a1.z - a2.z;
+                    const dist = Math.sqrt(dx * dx + dy * dy + dz * dz);
+
+                    const mData: MeasurementData = {
+                        atom1: { chain: a1.chainname, resNo: a1.resno, atomName: a1.atomname, x: a1.x, y: a1.y, z: a1.z, index: a1.index },
+                        atom2: { chain: a2.chainname, resNo: a2.resno, atomName: a2.atomname, x: a2.x, y: a2.y, z: a2.z, index: a2.index },
+                        distance: dist,
+                        shapeId: `measure-${Date.now()}-${Math.random()}`
+                    };
+                    measurementsRef.current.push(mData);
+                    drawMeasurement(mData);
+                }
+            });
         }
     }));
 

src/utils/urlManager.ts

@@ -10,7 +10,7 @@ export interface AppState {
     showLigands: boolean;
     showSurface: boolean;
     customColors?: CustomColorRule[];
-
+    measurements?: { atom1: any, atom2: any, distance: number }[];
 }
 
 /**
@@ -50,7 +50,19 @@ export const getShareableURL = (state: AppState): string => {
         } catch (e) { console.warn("Failed to serialize custom colors", e); }
     }
 
-
+    // 5. Measurements (Encoded JSON)
+    if (state.measurements && state.measurements.length > 0) {
+        try {
+            // Simplify measurement data to essential IDs to save space
+            const minimalData = state.measurements.map(m => ({
+                a1: { c: m.atom1.chain, r: m.atom1.resNo, a: m.atom1.atomName },
+                a2: { c: m.atom2.chain, r: m.atom2.resNo, a: m.atom2.atomName }
+            }));
+            const json = JSON.stringify(minimalData);
+            const b64 = btoa(json);
+            params.set('meas', b64);
+        } catch (e) { console.warn("Failed to serialize measurements", e); }
+    }
 
     const url = new URL(window.location.href);
     url.search = params.toString();
@@ -99,7 +111,20 @@ export const parseURLState = (): Partial<AppState> => {
         } catch (e) { console.warn("Failed to parse custom colors", e); }
     }
 
-
+    // 5. Measurements
+    const meas = params.get('meas');
+    if (meas) {
+        try {
+            const json = atob(meas);
+            const minimalData = JSON.parse(json);
+            // Rehydrate to expected format (partial)
+            state.measurements = minimalData.map((m: any) => ({
+                atom1: { chain: m.a1.c, resNo: m.a1.r, atomName: m.a1.a },
+                atom2: { chain: m.a2.c, resNo: m.a2.r, atomName: m.a2.a },
+                distance: 0 // Will be recalculated by viewer
+            }));
+        } catch (e) { console.warn("Failed to parse measurements", e); }
+    }
 
     return state;
 };