Added entire galaxy layout and scrollbar on mainpanel

compressed_galaxy.json.gz

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a9b5b5413a48cd47850d76049e9e57805fae099d78f8a425abc3dd98af077b6d
+size 19985280

css/style.css

@@ -686,3 +686,79 @@ display: none;
     right: 8px;
 }
 
+
+/* Make mainpanel fully scrollable */
+#mainpanel {
+  max-height: 90vh; /* Reduce from 100vh to leave space for bottom elements */
+  overflow-y: auto; /* Enable vertical scrolling */
+  overflow-x: hidden; /* Prevent horizontal scrolling */
+  box-sizing: border-box; /* Include padding in the element's total width and height */
+  padding-bottom: 20px; /* Add padding at the bottom to ensure last element is visible */
+}
+
+/* Ensure all dropdowns in the panel stay within the scrollable area */
+#attributeselect .list,
+#coloringselect .list,
+#atlasselect .list {
+  position: absolute;
+  margin-left: 0;
+  margin-top: 0;
+  z-index: 100;
+  width: 226px;
+  left: 0;
+  top: 100%; /* Position below the select button */
+}
+
+/* Fix for the developer container to ensure it's always visible */
+#developercontainer {
+  position: fixed;
+  bottom: 0;
+  left: 25px;
+  margin-bottom: 5px;
+  background-color: rgba(255, 255, 255, 0.8);
+  padding: 5px;
+  border-radius: 3px;
+  max-width: 80%;
+  z-index: 50;
+  font-size: 11px;
+  line-height: 1.3;
+}
+
+/* Add media query for smaller displays */
+@media screen and (max-height: 700px) {
+  #mainpanel {
+    max-height: 85vh; /* Make panel even smaller on small screens */
+  }
+  
+  #developercontainer {
+    max-width: 70%; /* Make developer info smaller on small screens */
+    font-size: 10px;
+  }
+}
+
+/* For very small screens */
+@media screen and (max-height: 500px) {
+  #developercontainer {
+    max-width: 60%;
+    font-size: 9px;
+  }
+}
+
+/* Improve scrollbar appearance */
+#mainpanel::-webkit-scrollbar {
+  width: 8px;
+}
+
+#mainpanel::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4px;
+}
+
+#mainpanel::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 4px;
+}
+
+#mainpanel::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}

index.html

@@ -34,7 +34,7 @@
     <div class="info cf">
       <dl>
         <dt class="moreinformation"></dt>
-        <dd class="line"><a href="#information" class="line fb">More about this visualisation</a></dd>
+        <dd class="line"><a href="#information" class="line fb">More about the Model Atlas</a></dd>
       </dl>
     </div>
 <div id="legend">

js/main.js

@@ -824,6 +824,7 @@ function AtlasSelector(a) {
 function getAvailableAtlases() {
   return [
     { name: "Modalities Atlas", file: "compressed_modalities_data.json.gz" },
+    { name: "Hugging Face Galaxy", file: "compressed_galaxy.json.gz" },
     { name: "Large NLP Atlas", file: "compressed_large_nlp_data.json.gz" },
   ];
 }