From 83bf1a1b859874ee925543ba289860105f6a636c Mon Sep 17 00:00:00 2001
From: haohangyan <hy2664@nyu.edu>
Date: Fri, 20 Sep 2024 12:50:24 -0400
Subject: [PATCH 1/8] Make left bar to a footer

---
 .../html/templates/indra/template.html        | 140 ++++++++++++------
 1 file changed, 95 insertions(+), 45 deletions(-)

diff --git a/indra/assemblers/html/templates/indra/template.html b/indra/assemblers/html/templates/indra/template.html
index f9ba93d47e..730c1e5737 100644
--- a/indra/assemblers/html/templates/indra/template.html
+++ b/indra/assemblers/html/templates/indra/template.html
@@ -61,14 +61,68 @@
           padding-right: 1em;
         }
 
-        .left {
-          width: 20em;
-          left: 0;
+        /* The footer */
+        .footer {
+            position: fixed;   /* Make sure the footer is always visible at the bottom */
+            bottom: 0;         /* Stick it to the bottom of the page */
+            left: 0;
+            right: 20em;
+            color: #606060;
+            text-align: left;
+            padding: 0.5em;
+            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .footer h4 {
+            font-size: 10pt;           /* Adjust font size for footer headings */
+            margin: 2px 0;             /* Smaller margin to reduce vertical spacing */
+        }
+
+        /* Adjust padding for blocks in the footer */
+        .side-info-block {
+            padding: 0.5em 8px 0.5em 8px;
+            margin-bottom: 0px;
+            padding-bottom: 0px;
+        }
+
+        /* Footer links */
+        .il-nav-link {
+            display: block;
+            margin: 5px 0;             /* margin between links */
+            color: #256DC5;            /* Blue color */
+            text-decoration: none;
+            margin-bottom: 0px;
+            padding-bottom: 0px;
+        }
+
+        .il-nav-link:hover {
+            text-decoration: underline; /* Add underline on hover */
+            color: #007bff;             /* Make hover color a brighter blue */
+        }
+
+        #about-this-service {
+            font-size: 10pt;          /* Adjust the font size of the header_desc block */
+        }
+
+        #about-this-project p {
+            font-size: 10pt;
+            margin-bottom: 0;
+        }
+
+        #about-this-project a {
+            font-size: 10pt;
+            color: #256DC5;
+            text-decoration: none;
         }
 
         .right {
-          width: 20em;
-          right: 0;
+            width: 20em;                /* Sidebar width */
+            right: 0;
+            position: fixed;            /* Make sure the sidebar stays on the right */
+            top: 0;
+            bottom: 0;
+            background-color: #fff;      /* White background */
+            overflow-y: auto;            /* Allow scrolling if content overflows */
         }
 
         /* The navigation menu links */
@@ -84,10 +138,6 @@
           text-decoration: none;
         }
 
-        .side-info-block {
-          padding: 1em 8px 1em 16px;
-        }
-
         .source-desc {
           border-radius: 4px;
           padding: 0.25em 0.5em 0.25em 0.5em;
@@ -112,15 +162,15 @@
         }
 
         @media (max-width: 1800px) {
-          .left {
-            display: none;
-          }
           .right {
             width: 20%;
           }
           .container {
             float: left;
           }
+          .footer {
+              right: 20%;
+          }
         }
 
         @media (max-width: 1500px) {
@@ -130,13 +180,18 @@
           .right {
             width: 15%;
           }
+          .footer {
+              right: 15%;
+          }
         }
 
         @media (max-width: 1100px) {
           .right {
             display: none;
           }
-        }
+          .footer {
+              right: 0em;
+          }
         {% endif %}
     </style>
 
@@ -173,38 +228,6 @@
   {% endblock %}
 </div>
 
-<!-- THE LEFT SIDEBAR -->
-<div class="side-info left bg-white " id="left-side-panel">
-  <div class="side-info-block">
-    <h4>Other Services</h4>
-    <a class=il-nav-link href="https://emmaa.indra.bio">EMMAA</a>
-    <a class=il-nav-link href="http://dialogue.bio">Bob with Bioagents</a>
-  </div>
-
-  <div class="side-info-block">
-    <h4 class="bg-white" type="button" data-toggle="collapse"
-        data-target="#about-this-service">
-      This Service
-    </h4>
-    <div id="about-this-service" class="collapse">
-      {% block header_desc %}
-      {% endblock %}
-    </div>
-
-
-    <h4 class="bg-white" type="button" data-toggle="collapse"
-        data-target="#about-this-project">
-      This Project
-    </h4>
-    <div id="about-this-project" class="collapse">
-      <p>INDRA is developed by <a class="parent-a" href="https://indralab.github.io/">indralabs</a>,
-        a part of the Harvard Medical School Laboratory of Systems Pharmacology.</p>
-      {% block additional_footer %}
-      {% endblock %}
-    </div>
-  </div>
-</div>
-{% endif %}
 
 <!-- THE MAIN BODY -->
 <main role="main" class="container">
@@ -224,6 +247,33 @@ <h2>{{ title }}</h2>
   </div>
 </main>
 
+{% endif %}
+<!-- THE FOOTER -->
+<footer class="footer bg-white">
+  <div class="side-info-block">
+    <h4>Other Services</h4>
+    <a class=il-nav-link href="https://emmaa.indra.bio">EMMAA</a>
+    <a class=il-nav-link href="http://dialogue.bio">Bob with Bioagents</a>
+  </div>
+
+  <div class="side-info-block">
+    <h4 class="bg-white">This Service</h4>
+    <div id="about-this-service">
+      {% block header_desc %}
+      {% endblock %}
+    </div>
+
+    <h4 class="bg-white">This Project</h4>
+    <div id="about-this-project">
+      <p>INDRA is developed by <a class="parent-a" href="https://indralab.github.io/">indralabs</a>,
+        a part of the Harvard Medical School Laboratory of Systems Pharmacology.</p>
+      {% block additional_footer %}
+      {% endblock %}
+    </div>
+  </div>
+</footer>
+
+
 {% if not simple %}
 <!-- THE RIGHT SIDEBAR -->
 <div class="side-info right bg-white" id="right-side-panel">

From 05e379a81248eba145bc7979c984a4ad9bd2b54d Mon Sep 17 00:00:00 2001
From: haohangyan <hy2664@nyu.edu>
Date: Fri, 20 Sep 2024 13:45:35 -0400
Subject: [PATCH 2/8] Change indralab to gyorilab

---
 indra/assemblers/html/templates/indra/template.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/indra/assemblers/html/templates/indra/template.html b/indra/assemblers/html/templates/indra/template.html
index 730c1e5737..5e5f1c8f9a 100644
--- a/indra/assemblers/html/templates/indra/template.html
+++ b/indra/assemblers/html/templates/indra/template.html
@@ -265,7 +265,7 @@ <h4 class="bg-white">This Service</h4>
 
     <h4 class="bg-white">This Project</h4>
     <div id="about-this-project">
-      <p>INDRA is developed by <a class="parent-a" href="https://indralab.github.io/">indralabs</a>,
+      <p>INDRA is developed by <a class="parent-a" href="https://indralab.github.io/">gyorilab</a>,
         a part of the Harvard Medical School Laboratory of Systems Pharmacology.</p>
       {% block additional_footer %}
       {% endblock %}

From 0950157fedee036e08003ed9fb28aed187baf0eb Mon Sep 17 00:00:00 2001
From: haohangyan <hy2664@nyu.edu>
Date: Fri, 20 Sep 2024 13:49:14 -0400
Subject: [PATCH 3/8] Made icons on the right smaller

---
 indra/assemblers/html/templates/indra/template.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/indra/assemblers/html/templates/indra/template.html b/indra/assemblers/html/templates/indra/template.html
index 5e5f1c8f9a..c165d376c0 100644
--- a/indra/assemblers/html/templates/indra/template.html
+++ b/indra/assemblers/html/templates/indra/template.html
@@ -140,7 +140,8 @@
 
         .source-desc {
           border-radius: 4px;
-          padding: 0.25em 0.5em 0.25em 0.5em;
+          padding: 0.1em 0.3em;
+          font-size: 0.8em;
           margin: 4px;
         }
 

From 9b0d1441c48c6765caba04fc701ead4764fa4fd9 Mon Sep 17 00:00:00 2001
From: haohangyan <hy2664@nyu.edu>
Date: Mon, 23 Sep 2024 11:53:43 -0400
Subject: [PATCH 4/8] Footer and right bar alignment and style

---
 .../html/templates/indra/template.html        | 57 ++++++++-----------
 1 file changed, 23 insertions(+), 34 deletions(-)

diff --git a/indra/assemblers/html/templates/indra/template.html b/indra/assemblers/html/templates/indra/template.html
index c165d376c0..f872494ad7 100644
--- a/indra/assemblers/html/templates/indra/template.html
+++ b/indra/assemblers/html/templates/indra/template.html
@@ -73,48 +73,35 @@
             box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
         }
 
-        .footer h4 {
-            font-size: 10pt;           /* Adjust font size for footer headings */
-            margin: 2px 0;             /* Smaller margin to reduce vertical spacing */
+        .footer h4, .footer p, .footer a {
+            font-size: 9pt;
+            line-height: 1.3;
+            margin: 0;  /* Reduces vertical spacing */
         }
 
-        /* Adjust padding for blocks in the footer */
         .side-info-block {
-            padding: 0.5em 8px 0.5em 8px;
-            margin-bottom: 0px;
-            padding-bottom: 0px;
+            padding: 0em 8px 0em 8px;
+            margin-bottom: 0;
         }
 
         /* Footer links */
         .il-nav-link {
             display: block;
-            margin: 5px 0;             /* margin between links */
-            color: #256DC5;            /* Blue color */
+            margin: 5px 0;
+            color: #256DC5;   /* Blue color */
             text-decoration: none;
-            margin-bottom: 0px;
-            padding-bottom: 0px;
         }
 
         .il-nav-link:hover {
-            text-decoration: underline; /* Add underline on hover */
-            color: #007bff;             /* Make hover color a brighter blue */
-        }
-
-        #about-this-service {
-            font-size: 10pt;          /* Adjust the font size of the header_desc block */
+            text-decoration: underline;
+            color: #007bff;
         }
 
-        #about-this-project p {
-            font-size: 10pt;
+        #about-this-service, #about-this-project p, #about-this-project a {
+            font-size: 9pt;
             margin-bottom: 0;
         }
 
-        #about-this-project a {
-            font-size: 10pt;
-            color: #256DC5;
-            text-decoration: none;
-        }
-
         .right {
             width: 20em;                /* Sidebar width */
             right: 0;
@@ -133,18 +120,26 @@
         }
 
         .side-info h4 {
-          font-size: 14pt;
+          font-size: 12pt;
           display: block;
           text-decoration: none;
         }
 
+        #sources-explanation {
+            font-size: 10pt;
+        }
+
         .source-desc {
           border-radius: 4px;
-          padding: 0.1em 0.3em;
+          padding: 0em 0em;
           font-size: 0.8em;
           margin: 4px;
         }
 
+        h3.bg-white {
+          font-size: 15pt;
+        }
+
         {% for category, data in source_colors %}
           {% for source, font_color in data['sources'].items() %}
             .source-{{ source }} {
@@ -251,11 +246,6 @@ <h2>{{ title }}</h2>
 {% endif %}
 <!-- THE FOOTER -->
 <footer class="footer bg-white">
-  <div class="side-info-block">
-    <h4>Other Services</h4>
-    <a class=il-nav-link href="https://emmaa.indra.bio">EMMAA</a>
-    <a class=il-nav-link href="http://dialogue.bio">Bob with Bioagents</a>
-  </div>
 
   <div class="side-info-block">
     <h4 class="bg-white">This Service</h4>
@@ -266,8 +256,7 @@ <h4 class="bg-white">This Service</h4>
 
     <h4 class="bg-white">This Project</h4>
     <div id="about-this-project">
-      <p>INDRA is developed by <a class="parent-a" href="https://indralab.github.io/">gyorilab</a>,
-        a part of the Harvard Medical School Laboratory of Systems Pharmacology.</p>
+      <p>INDRA is developed by <a class="parent-a" href="https://indralab.github.io/">gyorilab</a>.
       {% block additional_footer %}
       {% endblock %}
     </div>

From b067e8602a00b04834e1e4b4bf5791cb8285e437 Mon Sep 17 00:00:00 2001
From: haohangyan <hy2664@nyu.edu>
Date: Mon, 23 Sep 2024 13:10:28 -0400
Subject: [PATCH 5/8] Search content and footer alignment

---
 indra/assemblers/html/templates/indra/template.html | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/indra/assemblers/html/templates/indra/template.html b/indra/assemblers/html/templates/indra/template.html
index f872494ad7..16b5cfb410 100644
--- a/indra/assemblers/html/templates/indra/template.html
+++ b/indra/assemblers/html/templates/indra/template.html
@@ -71,6 +71,7 @@
             text-align: left;
             padding: 0.5em;
             box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+            height: 110px;
         }
 
         .footer h4, .footer p, .footer a {
@@ -155,6 +156,7 @@
         {% if not simple %}
         .content {
           padding-top:85px;
+          padding-bottom: 110px
         }
 
         @media (max-width: 1800px) {

From 563e22b1c6fc9a765b07e44d3c1ec3d779bc50f5 Mon Sep 17 00:00:00 2001
From: haohangyan <hy2664@nyu.edu>
Date: Mon, 23 Sep 2024 14:40:06 -0400
Subject: [PATCH 6/8] Explanation for sources and font size fix

---
 .../html/templates/indra/template.html        | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/indra/assemblers/html/templates/indra/template.html b/indra/assemblers/html/templates/indra/template.html
index 16b5cfb410..5b8d8b1f36 100644
--- a/indra/assemblers/html/templates/indra/template.html
+++ b/indra/assemblers/html/templates/indra/template.html
@@ -121,9 +121,10 @@
         }
 
         .side-info h4 {
-          font-size: 12pt;
+          font-size: 10pt;
           display: block;
           text-decoration: none;
+          margin-bottom: 0;
         }
 
         #sources-explanation {
@@ -133,12 +134,12 @@
         .source-desc {
           border-radius: 4px;
           padding: 0em 0em;
-          font-size: 0.8em;
-          margin: 4px;
+          font-size: 0.6em;
+          margin: 1px;
         }
 
         h3.bg-white {
-          font-size: 15pt;
+          font-size: 13pt;
         }
 
         {% for category, data in source_colors %}
@@ -161,13 +162,13 @@
 
         @media (max-width: 1800px) {
           .right {
-            width: 20%;
+            width: 15%;
           }
           .container {
             float: left;
           }
           .footer {
-              right: 20%;
+              right: 15%;
           }
         }
 
@@ -275,9 +276,10 @@ <h4 class="bg-white">This Project</h4>
         data-target="#sources-explanation">
       Our Sources:
     </h3>
-    <p id="sources-explanation" class="collapse">
-      INDRA allows us to combine the results from a multitude of sources. In
-      particular, the INDRA Database draws on the following...
+    <p id="sources-explanation" >
+      INDRA allows us to combine the results from a multitude of sources.
+      After each statement, we show how many pieces of evidence came from which sources.
+      In particular, the INDRA Database draws on the following...
     </p>
   </div>
   {% for category, data in source_colors %}

From f9bd277aa651f59265b8f38469c220a47e4f5589 Mon Sep 17 00:00:00 2001
From: Ben Gyori <ben.gyori@gmail.com>
Date: Tue, 24 Sep 2024 11:01:56 -0400
Subject: [PATCH 7/8] Fix ifs for simple mode

---
 indra/assemblers/html/templates/indra/template.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/indra/assemblers/html/templates/indra/template.html b/indra/assemblers/html/templates/indra/template.html
index 5b8d8b1f36..a2e23fbc05 100644
--- a/indra/assemblers/html/templates/indra/template.html
+++ b/indra/assemblers/html/templates/indra/template.html
@@ -227,6 +227,7 @@
   {% endblock %}
 </div>
 
+{% endif %}
 
 <!-- THE MAIN BODY -->
 <main role="main" class="container">
@@ -246,7 +247,7 @@ <h2>{{ title }}</h2>
   </div>
 </main>
 
-{% endif %}
+{% if not simple %}
 <!-- THE FOOTER -->
 <footer class="footer bg-white">
 
@@ -267,7 +268,6 @@ <h4 class="bg-white">This Project</h4>
 </footer>
 
 
-{% if not simple %}
 <!-- THE RIGHT SIDEBAR -->
 <div class="side-info right bg-white" id="right-side-panel">
   <div class="side-info-block">

From 9f1076eeec4dc222ed817dbc35829ad0249008fe Mon Sep 17 00:00:00 2001
From: Ben Gyori <ben.gyori@gmail.com>
Date: Fri, 27 Sep 2024 16:18:33 -0400
Subject: [PATCH 8/8] Update phrasing of template and simplify footer

---
 .../html/templates/indra/template.html        | 21 +++++++------------
 1 file changed, 7 insertions(+), 14 deletions(-)

diff --git a/indra/assemblers/html/templates/indra/template.html b/indra/assemblers/html/templates/indra/template.html
index a2e23fbc05..39843ef510 100644
--- a/indra/assemblers/html/templates/indra/template.html
+++ b/indra/assemblers/html/templates/indra/template.html
@@ -98,7 +98,7 @@
             color: #007bff;
         }
 
-        #about-this-service, #about-this-project p, #about-this-project a {
+        #about-this-project p, #about-this-project a {
             font-size: 9pt;
             margin-bottom: 0;
         }
@@ -252,16 +252,8 @@ <h2>{{ title }}</h2>
 <footer class="footer bg-white">
 
   <div class="side-info-block">
-    <h4 class="bg-white">This Service</h4>
-    <div id="about-this-service">
-      {% block header_desc %}
-      {% endblock %}
-    </div>
-
-    <h4 class="bg-white">This Project</h4>
     <div id="about-this-project">
-      <p>INDRA is developed by <a class="parent-a" href="https://indralab.github.io/">gyorilab</a>.
-      {% block additional_footer %}
+      {% block header_desc %}
       {% endblock %}
     </div>
   </div>
@@ -274,12 +266,13 @@ <h4 class="bg-white">This Project</h4>
     <h3 class="bg-white"
         type="button" data-toggle="collapse"
         data-target="#sources-explanation">
-      Our Sources:
+      INDRA sources:
     </h3>
     <p id="sources-explanation" >
-      INDRA allows us to combine the results from a multitude of sources.
-      After each statement, we show how many pieces of evidence came from which sources.
-      In particular, the INDRA Database draws on the following...
+      Colored badges next to statement headings correspond to evidence counts
+      from knowledge sources, as shown below. Badges to the left of the | separator
+      correspond to curated knowledge base sources, and badges to the
+      right of it correspond to machine reading systems.
     </p>
   </div>
   {% for category, data in source_colors %}