enhance web viewer?

SuperScriptViewer/static/site.css

@@ -1,8 +1,10 @@
+/*navigation style*/
 p.hamburger {
     margin: 0 5px 0 5px; 
     padding: 0;
 }
 
+/*graph style*/
 div.block-target {
     position: absolute;
     background: green;
@@ -81,4 +83,28 @@ div.cell-bio {
 text.link-delay {
     font-size: 12px;
     color: black;
+}
+
+/*side panel style*/
+div.tabitem-activated {
+    background: #0000ff;
+}
+b.tabitem-activated {
+    color: white;
+}
+
+div.tabitem-deactivated {
+    background: #ffffff00;
+}
+b.tabitem-deactivated {
+    color: black;
+}
+
+pre {
+    border: 1px solid black;
+    border-radius: 2px;
+    padding: 5px;
+    margin: 5px;
+    background: #3f3f3f;
+    color: white;
 }

SuperScriptViewer/static/site.js

@@ -1,4 +1,4 @@
-previousHighlight = ""
+previousHighlight = "";
 
 function highlightLink(target) {
     realTarget = ".target" + target
@@ -56,18 +56,44 @@ function queryInfo(obj) {
         },
         function(data, status) {
             //set id
-            $("#propertyWindow-id").text(obj);
+            $("#sidepanel-properties-id").text(obj);
 
             //set data
-            $("#propertyWindow-container").empty()
+            $("#sidepanel-properties-container").empty()
             for (var key in data) {
-                $("#propertyWindow-container").append("<p><b>" + key + ":</b><br />" + data[key] +"</p>")
+                $("#sidepanel-properties-container").append("<p><b>" + key + ":</b><br /><pre>" + data[key] +"</pre></p>")
             }
-
-            $("#propertyWindow-main").show();
         });
 }
 
-function closePropertyWindow() {
-    $("#propertyWindow-main").hide();
+function sidePanelSwitcher(target) {
+    // 0->property; 1->display; 2->tools
+    //disable all
+    $("#sidepanel-properties").hide();
+    $("#sidepanel-display").hide();
+    $("#sidepanel-tools").hide();
+    $(".tabitem").each(function() {
+        $(this).removeClass("tabitem-activated").addClass("tabitem-deactivated");
+    });
+
+    switch (target) {
+        case 0:
+            $("#sidepanel-properties").show();
+            $(".tabitem1").each(function() {
+                $(this).removeClass("tabitem-deactivated").addClass("tabitem-activated");
+            });
+            break;
+        case 1:
+            $("#sidepanel-display").show();
+            $(".tabitem2").each(function() {
+                $(this).removeClass("tabitem-deactivated").addClass("tabitem-activated");
+            });
+            break;
+        case 2:
+            $("#sidepanel-tools").show();
+            $(".tabitem3").each(function() {
+                $(this).removeClass("tabitem-deactivated").addClass("tabitem-activated");
+            });
+            break;
+    }
 }