About page (#362)

* #354 Add about us page + abstract

* Add about page text + styling

* #354 Add apl logo, axonolotl, title + alt text, more styling

* #354 Incorporate feedback

* #354 Bug fixes

* #354 Update bossdb logo

* edits about page text

Co-authored-by: Daniel Xenes <daniel.xenes@jhuapl.edu>

neuvue_project/neuvue/urls.py

@@ -22,6 +22,7 @@
     TaskView,
     IndexView,
     AuthView,
+    AboutView,
     InspectTaskView,
     LineageView,
     TokenView,
@@ -62,7 +63,8 @@
     path('report/', ReportView.as_view(), name="report"),
     path('userNamespace/', UserNamespaceView.as_view(), name="user-namespace"),
     path('save_state', SaveStateView.as_view(), name="save-state"),
-    path('save_operations', SaveOperationsView.as_view(), name="save-operations")
+    path('save_operations', SaveOperationsView.as_view(), name="save-operations"),
+    path('about', AboutView.as_view(), name="about"),
 ]
 
 

neuvue_project/templates/about.html

@@ -0,0 +1,91 @@
+{% extends "base.html" %}
+{% load static %}
+
+{% block content %}
+<div class="basic">
+    <div class="container text-light pb-5">
+        <h2 class="pt-5 pb-3" role="heading" aria-level="1"> About Us </h2>
+
+        <p>
+            We are a team of research scientists and engineers from the Johns Hopkins Applied Physics 
+            Laboratory that developed NeuVue with the help of a friendly <em>axon</em>olotl!
+        </p>
+
+        <div class="medium-logo-container my-3">
+            <a href="https://jhuapl.edu" title="JHU/APL">
+                <div class="logo-card">
+                    <img class="medium-logo-img px-3 py-5" src="{% static "images/apl_small_vertical_white.png" %}" alt="JHU/APL"></img>
+                </div>
+            </a>
+            <div class="logo-card">
+                <img class="medium-logo-img" src="{% static "images/axonolotl.png" %}" title="Axonolotl" alt="Axonolotl"></img>
+            </div>
+        </div>
+
+        <p>
+            NeuVue is a software platform created for large-scale proofreading of machine segmentation and neural 
+            circuit reconstruction in high-resolution electron microscopy connectomics datasets. NeuVue provides an 
+            intuitive interface for proofreaders to collaboratively view, annotate, and edit segmentation and 
+            connectivity data.
+
+            NeuVue has everything you need for a high-throughput proofreading workflow! Analytical dashboards, data 
+            visualization tools, and simple API enables stakeholders real-time access to proofreading progress at an 
+            individual proofreader level as well as global reconstruction quality insights. NeuVue is intentionally 
+            agnostic to the underlying data management backend and can be easily deployed in an AWS environment. 
+            Proofreaders can work with powerful streamlined tools for splitting and merging connectivity data in 
+            dense nano-scale reconstruction better than ever before. 
+        </p>
+
+        <p class="fw-bold">
+            This research was enabled by the IARPA Machine Intelligence from Cortical Networks (MICrONS) program. 
+            <a class="text-secondary-color-activated" href="https://www.iarpa.gov/research-programs/microns">Learn more about MICrONS.</a>
+        </p>
+
+        <h2 class="pt-5 pb-3"> Publications </h2>
+
+        <p>
+            <a class="text-secondary-color-activated" href="https://www.biorxiv.org/content/10.1101/2022.07.18.500521v1" target="_blank" rel="noopener noreferrer">
+                NeuVue: A Framework and Workflows for High-Throughput Electron Microscopy Connectomics Proofreading
+            </a>
+        </p>
+        <p>
+            Check us out at the Computational Tools and Other Resources: Microscopy and Imaging session at <a class="text-secondary-color-activated" href="https://www.sfn.org/meetings/neuroscience-2022">SfN 2022</a>!
+        </p>
+
+        <h2 class="pt-5 pb-3"> Collaborators </h2>
+
+        <div class="small-logo-container">
+            <a href="https://bossdb.org" title="BossDB">
+                <div class="logo-card bg-light">
+                    <img class="small-logo-img" src="{% static 'images/bossdb.png' %}" alt="BossDB"></img>
+                </div>
+            </a>
+            <a href="https://alleninstitute.org/what-we-do/brain-science/research/allen-institute-brain-science/" title="Allen Institute for Brain Science">
+                <div class="logo-card bg-light">
+                    <img class="small-logo-img" src="{% static 'images/aibs.png' %}" alt="Allen Institute for Brain Science"></img>
+                </div>
+            </a>
+            <a href="https://toliaslab.org/" title="Baylor College of Medicine">
+                <div class="logo-card bg-light">
+                    <img class="small-logo-img" src="{% static 'images/Baylor_College_of_Medicine_Logo.png' %}" alt="Baylor College of Medicine"></img>
+                </div>
+            </a>
+            <a href="https://seunglab.org/" title="Princeton University">
+                <div class="logo-card bg-light">
+                    <img class="small-logo-img" src="{% static 'images/University-of-Princeton-Logo.png' %}" alt="Princeton University"></img>
+                </div>
+            </a>
+        </div>
+
+        <h2 class="pt-5 pb-3"> Contact Us </h2>
+
+        <p>
+            We'd love to hear from you! Reach out at <a class="text-secondary-color-activated" href="mailto:info@neuvue.io">info@neuvue.io</a> with questions or if you are interested in collaborating with us.
+        </p>
+
+    </div>
+</div>
+<script>
+
+</script>
+{% endblock %}

neuvue_project/templates/base.html

@@ -85,6 +85,10 @@
                 </li>
                 {% else %}
 
+                <li class="nav-item">
+                    <a class="nav-link", href="{% url "about" %}"> About</a>
+                </li>
+
                 <li class="nav-item">
                     <a class="nav-link" href="{% provider_login_url 'google' %}">Login</a>
                 </li>

neuvue_project/templates/index.html

@@ -4,7 +4,7 @@
 
 {% block content %}
 
-<div class="basic workspace">
+<div class="basic workspace overflow-hidden">
   <div class="intro">
     <div class="container-fluid">
       <div class="row">

neuvue_project/templates/preferences.html

@@ -11,7 +11,7 @@
 {% endblock %}
 {% block content %}
 <div class="basic pref">
-<div class="pref_main_container">
+<div class="pref_main_container mt-0 pt-4">
     <form id="configForm" action="" method="post" >
     {% csrf_token %}
     <div class="navbar-text" style='font-size:1vw;'> <h2> Neuroglancer Preferences </h2>

neuvue_project/templates/workspace.html

@@ -7,7 +7,7 @@
 <! Information Hidden Menu >
 
 {% if is_open %}
-<div class="basic workspace">
+<div class="basic workspace overflow-hidden">
 {% else %}
 <div class="basic interTask">
 {% endif %}

neuvue_project/workspace/static/css/workspace.css

@@ -56,7 +56,10 @@ ul li {
   background-image: url('/static/images/neuron_background_sketch-01-min.png'); 
   background-size: 70vw;
   background-repeat: repeat;
-  height: 96vh;
+  min-height: 96vh;
+}
+
+.overflow-hidden {
   overflow: hidden;
 }
 
@@ -66,12 +69,10 @@ ul li {
 
 .basic.tasks {
   width: 100%;
-  overflow: visible;
 }
 
 .basic.dashboard {
   width: 100%;
-  overflow: visible;
 }
 
 .basic.interTask {
@@ -402,9 +403,6 @@ color: var(--primary-accent);
   max-width: 12%;
 }
 
-
-
-
 .copyButton{
   background-color: var(--secondary-accent);
   display: flex;
@@ -1022,3 +1020,46 @@ input[type=radio]:checked + label > img {
   background-color: darkgray !important;
 }
 
+.text-secondary-color-activated {
+  color: var(--secondary-accent-activated);
+}
+
+/* Small logo classes */
+.small-logo-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill,minmax(var(--max-width),1fr));
+  column-gap: 4px;
+  --max-width: 240px;
+}
+
+.logo-card {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  border-radius: 2px;
+  height: calc(var(--max-width) / 2 - 6px);
+}
+
+.small-logo-img {
+  max-width: calc(var(--max-width) - 30px);
+  max-height: calc(var(--max-width) / 2 - 20px);
+}
+
+/* Medium logo classes */
+.medium-logo-container {
+  display: flex;
+  flex-wrap: wrap;
+  --max-height: 200px;
+}
+
+/* center medium logos only on mobile */
+@media(max-width: 500px) {
+  .medium-logo-container {
+    display: block;
+  }
+}
+
+.medium-logo-img {
+  max-width: calc(var(--max-height)*4);
+  max-height: var(--max-height);
+}

neuvue_project/workspace/views.py

@@ -881,6 +881,10 @@ class AuthView(View):
     def get(self, request, *args, **kwargs):
         return render(request, "auth_redirect.html")
 
+class AboutView(View):
+    def get(self, request, *args, **kwargs):
+        return render(request, "about.html")
+
 class TokenView(View):
     def get(self, request, *args, **kwargs):
         return render(request, "token.html", context={'code': request.GET.get('code')})