feat(nimbus): revamp sidebar view for results page

experimenter/experimenter/experiments/models.py

@@ -561,6 +561,9 @@ def get_detail_preview_recipe_json_url(self):
     def get_results_url(self):
         return reverse("nimbus-ui-results", kwargs={"slug": self.slug})
 
+    def get_new_results_url(self):
+        return reverse("nimbus-ui-new-results", kwargs={"slug": self.slug})
+
     @property
     def experiment_url(self):
         return urljoin(f"https://{settings.HOSTNAME}", self.get_absolute_url())
@@ -1168,6 +1171,8 @@ def sidebar_links(self, current_path):
                 "icon": "fa-solid fa-chart-column",
                 "active": current_path == self.get_results_url(),
                 "disabled": self.disable_results_link,
+                "new_results_url": self.get_new_results_url(),
+                "subsections": self.results_sidebar_sections(),
             },
             {"title": "Edit", "is_header": True},
             {
@@ -1200,6 +1205,28 @@ def sidebar_links(self, current_path):
             },
         ]
 
+    def results_sidebar_sections(self):
+        # TODO: show metrics by grouped categories based on metric area
+
+        return [
+            {
+                "title": "Overview",
+                "subitems": [
+                    {"title": "Hypothesis"},
+                    {"title": "Branch overview"},
+                    {"title": "Key takeaways"},
+                    {"title": "Next steps"},
+                    {"title": "Project Impact"},
+                ],
+            },
+            {
+                "title": "All metrics",
+                "subitems": [
+                    {"title": metric} for metric in self.default_metrics.values()
+                ],
+            },
+        ]
+
     def timeline(self):
         timeline_entries = [
             {
@@ -1290,10 +1317,14 @@ def get_branch_data(self, analysis_basis, selected_segment):
         for branch in self.branches.all().prefetch_related("screenshots"):
             slug = branch.slug
             participant_metrics = (
-                overall_results.get(slug, {})
-                .get("branch_data", {})
-                .get("other_metrics", {})
-                .get("identity", {})
+                (
+                    overall_results.get(slug, {})
+                    .get("branch_data", {})
+                    .get("other_metrics", {})
+                    .get("identity", {})
+                )
+                if isinstance(overall_results, dict)
+                else {}
             )
             num_participants = (
                 participant_metrics.get("absolute", {}).get("first", {}).get("point", 0)

experimenter/experimenter/nimbus_ui/templates/common/sidebar_link.html

@@ -1,9 +1,36 @@
-<a {% if external %}target="_blank"{% endif %}
-   class="nav-link mb-2 {% if request.path == link %}active{% endif %} nav-link-hover {% if disabled %}disabled{% endif %}"
-   data-testid="nav-edit-{{ title|lower }}"
-   href="{{ link }}"
-   {% if data_bs_toggle %}data-bs-toggle="{{ data_bs_toggle }}"{% endif %}
-   {% if data_bs_target %}data-bs-target="{{ data_bs_target }}"{% endif %}>
-  <i class="{{ icon }} pe-2"></i>
-  <span>{{ title }}</span>
-</a>
+<div>
+  <a {% if external %}target="_blank"{% endif %}
+     class="nav-link mb-2 {% if request.path == link %}active{% endif %} nav-link-hover {% if disabled %}disabled{% endif %}"
+     data-testid="nav-edit-{{ title|lower }}"
+     href="{{ link }}"
+     {% if data_bs_toggle %}data-bs-toggle="{{ data_bs_toggle }}"{% endif %}
+     {% if data_bs_target %}data-bs-target="{{ data_bs_target }}"{% endif %}>
+    <i class="{{ icon }} pe-2"></i>
+    <span>{{ title }}</span>
+  </a>
+  {% if request.path == new_results_url %}
+    <div class="accordion ms-2" id="{{ title|lower|cut:" " }}-accordion">
+      {% for item in subsection %}
+        <div class="accordion-item ms-4 text-secondary bg-transparent border-0 {% if forloop.last %}mb-3{% endif %}">
+          <button class="accordion-button collapsed bg-transparent p-2 text-reset fw-bold shadow-none"
+                  type="button"
+                  data-bs-toggle="collapse"
+                  data-bs-target="#collapse{{ item.title|lower|cut:" " }}"
+                  aria-expanded="false"
+                  aria-controls="collapse{{ item.title|lower|cut:" " }}">{{ item.title }}</button>
+          <div class="accordion-collapse collapse"
+               id="collapse{{ item.title|lower|cut:" " }}"
+               data-bs-parent="#{{ title|lower|cut:" " }}-accordion">
+            <ul class="nav flex-column ms-4">
+              {% for subitem in item.subitems %}
+                <li class="nav-item w-100">
+                  <a class="nav-link text-reset" href="#">{{ subitem.title }}</a>
+                </li>
+              {% endfor %}
+            </ul>
+          </div>
+        </div>
+      {% endfor %}
+    </div>
+  {% endif %}
+</div>

experimenter/experimenter/nimbus_ui/templates/nimbus_experiments/sidebar.html

@@ -4,7 +4,7 @@
       <strong class="ms-3">{{ item.title }}</strong>
       <hr class="my-0 mb-2">
     {% else %}
-      {% include "common/sidebar_link.html" with title=item.title link=item.link icon=item.icon active=item.active disabled=item.disabled %}
+      {% include "common/sidebar_link.html" with title=item.title link=item.link icon=item.icon active=item.active disabled=item.disabled new_results_url=item.new_results_url subsection=item.subsections %}
 
     {% endif %}
   {% endfor %}