update litemol to molstar

backend/proteins/templates/proteins/_structure_section.html

@@ -1,11 +1,11 @@
 <h3>Structure</h3>
 <div class='row'
      id="protein-structure"
-     data-fpbase-init="litemol"
+     data-fpbase-init="molstar"
      data-pdb-ids='{{pdb_ids_json|safe}}'>
   <div class="col-12 col-md-6 order-2 order-md-1">
-    <div style="height: 400px; background: white;">
-      <div id="litemol-viewer"></div>
+    <div style="height: 96%; background: white;">
+      <div id="molstar-viewer"></div>
     </div>
   </div>
   <div class='col-12 col-md-6 mt-2 order-1 order-md-2'>

biome.json

@@ -8,13 +8,7 @@
     }
   },
   "files": {
-    "includes": [
-      "frontend/**",
-      "packages/**",
-      "!!frontend/src/css/litemol",
-      "!!frontend/src/js/pdb/LiteMol-plugin.js",
-      "!!packages/spectra/src/index.css"
-    ]
+    "includes": ["frontend/**", "packages/**", "!!packages/spectra/src/index.css"]
   },
   "formatter": {
     "indentStyle": "space",

frontend/package.json

@@ -24,6 +24,7 @@
     "d3-zoom": "^3.0.0",
     "highcharts": "^12.4.0",
     "nouislider": "^14.7.0",
+    "pdbe-molstar": "^3.8.0",
     "process": "^0.11.10",
     "progressbar.js": "^1.1.0",
     "react": "^19.2.0",

frontend/src/css/_molstar.scss

@@ -0,0 +1,36 @@
+// Mol* viewer custom styles
+
+#chem-title {
+  color: #666;
+  font-size: 1rem;
+  font-weight: 400;
+}
+
+// Ensure Mol* viewer fills container properly
+#molstar-viewer {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  // pdbe-molstar plugin container
+  >div {
+    width: 100% !important;
+    height: 100% !important;
+  }
+}
+
+/* hide black window borders */
+.msp-plugin .msp-plugin-content.msp-layout-standard {
+  border: none;
+}
+
+#molstar-viewer {
+  /* Higher than the comparison slider's z-index (100) */
+  z-index: 150;
+}
+
+// Hide certain controls in the simple standard view
+// Hide the "Toggle Controls Panel" button (wrench icon)
+.msp-layout-standard button[title="Toggle Controls Panel"] {
+  display: none;
+}