coherent use of circle symbol for densification methods

w-m · Oct 2, 2024 · 5940af5 · 5940af5
1 parent 9568d6c
commit 5940af5
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 23 deletions.
diff --git a/data_extraction/build_html.py b/data_extraction/build_html.py
@@ -110,7 +110,20 @@ def combine_tables_to_html():
         df["Shortname"] = df["Method"].apply(lambda x: shortnames[x])
         df["NewMethod"] = df["Shortname"] + df["Submethod"]
         # make Method column a link to the method summary + add color box
-        df["Method"] = '<a class="method-name" href="#' + df["Method"] + '"> <span class="legend-color-box-container"><span class="legend-color-box" style=background-color:'+df["Shortname"].map(groupcolors)+'></span><span class="legend-color-box-methods"></span>' + df["NewMethod"] + '</span></a>'
+        df["Method"] = (
+            '<a class="method-name" href="#' 
+            + df["Method"] 
+            + '"> <span class="legend-color-box-container">'
+            + '<span class="' 
+            + df["Method"].apply(lambda x: "legend-color-box densification" if x in shortnames_d else "legend-color-box")
+            + '" style="background-color:' 
+            + df["Shortname"].map(groupcolors) 
+            + '"></span>'
+            + '<span class="legend-color-box-methods"></span>' 
+            + df["NewMethod"] 
+            + '</span></a>'
+        )
+
 
         #change Size [Bytes] to Size [MB] and round
         df.insert(5, "Size [MB]", df["Size [Bytes]"] / 1024 / 1024)
@@ -407,7 +420,9 @@ def load_methods_summaries(ranks, groupcolors):
                         color = groupcolors[shortnames[file.split(".")[0]]]
                     except KeyError:
                         color = "#ffffff"
-                    title = f'<a href="{links[file.split(".")[0]]}" target="_blank" class="title-link" style="--title-box-color: {color}">{title}</a>'
+
+                    class_str =  "title-link" if category == "c" else "title-link densification" #for different symbols
+                    title = f'<a href="{links[file.split(".")[0]]}" target="_blank" class="{class_str}" style="--title-box-color: {color}">{title}</a>'
                 summary = file_content.split('\n', 1)[1].strip()
 
                 #insert color if applicable

diff --git a/project-page/static/css/style.css b/project-page/static/css/style.css
@@ -1,25 +1,5 @@
 .katex { line-height: 2 !important; }
 
-.text-item {
-  display: inline-block;
-  font-size: 1em;
-  line-height: 1;
-  vertical-align: baseline;
-  position: relative;
-  margin-right: 0.25em;
-}
-
-.text-color-box {
-  display: inline-block;
-  width: 0.8em;
-  height: 0.8em;
-  margin-right: 0.2em;
-  border-radius: 0.2em;
-  vertical-align: middle;
-  position: relative;
-  top: -0.1em;
-}
-
 .title-link {
   position: relative;
 }
@@ -36,6 +16,10 @@
   margin-right: 10px; 
 }
 
+.title-link.densification::before {
+  border-radius: 100px; 
+}
+
 .rounded-bullet {
   display: inline-flex;
   align-items: center;
@@ -181,6 +165,10 @@ input[type="checkbox"] {
   flex-shrink: 0; 
 }
 
+.legend-color-box.densification {
+  border-radius: 100px;
+}
+
 .legend-color-box-container {
   display: flex;
   align-items: center;

diff --git a/project-page/static/js/scripts.js b/project-page/static/js/scripts.js
@@ -147,7 +147,11 @@ function drawLegend() {
         checkbox.addEventListener('change', updatePlotVisibility);
 
         var colorBox = document.createElement('div');
-        colorBox.className = 'legend-color-box';
+        if (group in densificationMethods){
+            colorBox.className = 'legend-color-box densification';
+        }else{
+            colorBox.className = 'legend-color-box';
+        }
         colorBox.style.backgroundColor = groupColors[group];
 
         var labelText = document.createElement('a');