Implement Sorting and Filtering of Changes based on Branches (#215)

smarr · Jul 26, 2024 · 792af37 · 792af37
2 parents 2d2e1c1 + 9e299f7
commit 792af37
Show file tree

Hide file tree

Showing 5 changed files with 327 additions and 19 deletions.
diff --git a/resources/style.css b/resources/style.css
@@ -3,6 +3,11 @@ body {
   margin: 0 auto;
 }
 
+body.project-body {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
 body.compare, body.timeline {
   max-width: initial;
 }
@@ -25,6 +30,114 @@ body.compare, body.timeline {
   margin-left: -10px;
 }
 
+@media (min-width: 576px) {
+  .container {
+      max-width: 100%;
+  }
+}
+
+@media (min-width: 800px) {
+  #project {
+    display: grid;
+    grid-template-columns: auto 800px auto;
+  }
+}
+
+@media (max-width: 800px) {
+  .branch-sidebar {
+    /* hidden */
+    display: none;
+  }
+}
+
+@media (max-width: 576px) {
+  #project {
+    display: block;
+  }
+}
+
+
+.branch-search {
+  width: 100%;
+  max-width: 100%;
+  padding: 8px;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+  transition: border-color 0.3s ease;
+}
+
+.branch-search:focus {
+  border-color: #007bff;
+  outline: none;
+}
+
+.branch-sidebar.left {
+  text-align: right;
+}
+
+.branch-sidebar {
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  background-color: #fff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  width: 200px;
+  max-width: 200px;
+  margin-top: 1em;
+  font-size: 75%;
+}
+
+.filter-header {
+  margin-bottom: 0.5em;
+  padding: 0.5em;
+}
+
+.sort-options {
+  background-color: #f9f9f9;
+  border-radius: 4px;
+  margin-bottom: 1em;
+  overflow: hidden;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  padding: 0.5em;
+}
+
+.sort-options a {
+  display: block;
+  color: #007bff;
+  text-decoration: none;
+  font-size: 0.9em;
+  padding: 4px 7px;
+  transition: background-color 0.3s, color 0.3s;
+}
+
+.sort-options a:hover,
+.sort-options a.selected-text {
+  background-color: #007bff;
+  color: white;
+}
+
+.branch-list {
+  max-height: 800px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.branch-list .list-group-item {
+  cursor: pointer;
+  padding: 2px 7px;
+  border: none;
+  color: #444444;
+}
+
+.branch-list .list-group-item:hover {
+  background-color: #f1f1f1;
+}
+
+.branch-list .list-group-item.active {
+  background-color: #007bff;
+  color: white;
+}
+
 nav.compare {
   position: -webkit-sticky;
   position: sticky;
@@ -559,3 +672,21 @@ td.warmup-plot {
 table#benchmark-set-change tbody.hide-most-rows tr.benchmark-row:nth-child(n+4) {
   display: none;
 }
+
+.link-container {
+    width: 100%;
+    text-align: center;
+}
+.link-container a {
+    display: block;
+    margin: 10px 0;
+}
+.main-content {
+    width: 100%;
+}
+.left-side, .right-side {
+    width: 15%;
+}
+.content-area {
+    width: 70%;
+}
diff --git a/src/backend/main/main.ts b/src/backend/main/main.ts
@@ -13,6 +13,7 @@ import {
   startRequest
 } from '../perf-tracker.js';
 import type { AllResults } from '../../shared/api.js';
+import type { ChangesResponse } from '../../shared/view-types.js';
 import { Database } from '../db/db.js';
 import { TimedCacheValidity } from '../db/timed-cache-validity.js';
 import { getNumberOrError } from '../request-check.js';
@@ -187,7 +188,7 @@ export async function getChangesAsJson(
 export async function getChanges(
   projectId: number,
   db: Database
-): Promise<{ changes: any[] }> {
+): Promise<ChangesResponse> {
   const result = await db.query({
     name: 'fetchAllChangesByProjectId',
     text: ` SELECT commitId, branchOrTag, projectId, repoURL, commitMessage,

diff --git a/src/backend/project/project.html b/src/backend/project/project.html
@@ -8,7 +8,7 @@
   {%- include('header.html') %}
   <script src="/static/project.js" type="module"></script>
 </head>
-<body>
+<body class="project-body">
 
   <div class="jumbotron">
     <h1 class="display-4">{%= it.name %}</h1>
@@ -18,6 +18,17 @@ <h2 class="display-5">{%= it.description%}</h2>
   </div>
 
   <div id="project">
+    <div class="branch-sidebar left">
+      <div class="filter-header">
+        <input type="text" class="branch-search" placeholder="Search branches/tags...">
+      </div>
+      <div class="sort-options">
+        <a href class="sort-option selected-text">Most Used</a>
+        <a href class="sort-option">Alphabetical</a>
+        <a href class="sort-option">Most Recent</a>
+      </div>
+      <div class="branch-list list-group"></div>
+    </div>
     <div class="card">
       <h5 class="card-header" id="{%= it.slug %}"><a
         href="/{%= it.slug %}/data">{%= it.name %}</a></h5>
@@ -43,6 +54,17 @@ <h5>Changes</h5>
         <a href="/{%= it.slug %}/timeline">Timeline</a>
       </div>
     </div>
+    <div class="branch-sidebar right">
+      <div class="filter-header">
+        <input type="text" class="branch-search" placeholder="Search branches/tags...">
+      </div>
+      <div class="sort-options">
+        <a href class="sort-option selected-text">Most Used</a>
+        <a href class="sort-option">Alphabetical</a>
+        <a href class="sort-option">Most Recent</a>
+      </div>
+      <div class="branch-list list-group"></div>
+    </div>
   </div>
 </body>
 </html>