Marius tasks

static/scripts/base.mjs

@@ -1,4 +1,4 @@
-import { convertToID, updateFilters } from "./dataUtility.mjs";
+import { convertToID, updateFilters, processQuery } from "./dataUtility.mjs";
 
 // Highlight the current view in the navbar
 const selectedView = $("nav").data("current-view");
@@ -318,5 +318,9 @@ $(document).ready(function() {
     $("#sidebar").toggleClass("visible-sidebar");
     $("#mask").hide();
   });
+
+  $("#study-info-modal").on("hidden.bs.modal", function() {
+    window.sessionStorage.removeItem("modalID");
+  });
 });
 

static/scripts/dataUtility.mjs

@@ -78,6 +78,16 @@ function updateFilters(filters) {
   window.sessionStorage.setItem("filters", JSON.stringify(filters));
 }
 
+/**
+ * Processes a search query over the titles and returns the matching studies.
+ * @param {string} query - The search query entered by the user.
+ * @returns {Array} An array of matching studies.
+ */
+function processQuery(query) {
+  const results = titles.filter(entry => entry["Title"].includes(query));
+  return results;
+}
+
 /**
  * Converts all occurrences of the "€" character in the given HTML ID to spaces.
  *
@@ -361,14 +371,28 @@ function createColorScale(uniqueValues) {
  * @param {string|number} studyID - The unique identifier of the study to display information for.
  */
 function showStudyModal(studyID) {
+  // Set the modal parameter
+  window.sessionStorage.setItem("modalID", studyID);
+  window.sessionStorage.setItem("similarityThreshold", 1);
+
   // Find the data entry for the given ID
   const entry = getDataEntry(studyID.toString());
 
   // Set the header text of the modal
   $("#study-info-header").text(`Paper Info (ID: ${studyID})`);
+  const infoHTML = [];
+
+  // Add Study Summary to the infoHTML
+  infoHTML.push(`
+    <h5 class="study-info-panel-header">Study Summary</h5>
+    <strong>Title</strong>: ${titles.find(elem => elem["ID"] === entry["ID"])["Title"] || "N/A"}<br />
+    <strong>Authors</strong>: ${entry["Authors"] || "N/A"}<br />
+    <strong>Abstract</strong>: ${abstracts.find(elem => elem["ID"] === entry["ID"])["Abstract"] || "N/A"}<br />
+    <strong>Keywords</strong>: ${entry["Keywords"] || "N/A"}
+  `)
 
   // All the selections here are present because the modal is rendered in the base template which every page extends
-  const infoHTML = $(".panel").map((index, panel) => {
+  $(".panel").each((index, panel) => {
       // Skip the "Advanced Filters" panel
       if ($(panel).data("panel-value") === "Advanced Filters") {
         return;
@@ -387,16 +411,8 @@ function showStudyModal(studyID) {
 
       const panelHTML = `<h5 class="study-info-panel-header">${heading}</h5>` + filtersHTML;
 
-      return panelHTML;
-  }).get();
-
-  // Add Study Summary to the infoHTML
-  infoHTML.push(`
-    <h5 class="study-info-panel-header">Study Summary</h5>
-    <strong>Title</strong>: ${titles.find(elem => elem["ID"] === entry["ID"])["Title"] || "N/A"}<br />
-    <strong>Keywords</strong>: ${entry["Keywords"] || "N/A"}<br />
-    <strong>Abstract</strong>: ${abstracts.find(elem => elem["ID"] === entry["ID"])["Abstract"] || "N/A"}<br />
-  `)
+      infoHTML.push(panelHTML);
+  });
 
   $(`#study-info-modal-body`).html(infoHTML.join("<br />"));
 
@@ -407,4 +423,4 @@ function showStudyModal(studyID) {
   $(`#study-info-modal`).modal("show");
 }
 
-export  {data, colorPalette, defaultColor, updateFilters, convertToID, getCategory, getValue, filterData, getActiveFilters, parseData, getDataEntry, showStudyModal, createColorScale, sortNodesByCategory, cleanDataString, specialOrders, defaultColors};
+export  {data, colorPalette, defaultColor, updateFilters, convertToID, getCategory, getValue, filterData, getActiveFilters, parseData, getDataEntry, showStudyModal, createColorScale, sortNodesByCategory, cleanDataString, specialOrders, defaultColors, processQuery};

static/scripts/similarity.mjs

@@ -184,6 +184,13 @@ function openNetworkDetails(nodeID, links) {
   $("#connectionsModal").modal("show");
 }
 
+function findSimilarStudies(links) {
+  const modalID = window.sessionStorage.getItem("modalID");
+  if (modalID) {
+    openNetworkDetails(modalID, links);
+  }
+}
+
 /*
   Section for preparing the data for the similarity graph
   - The data needs to be available with respect to the current filters
@@ -286,6 +293,8 @@ function drawGraph(threshold) {
 
   // Draw the legend
   createLegend(nodes, colorScale, $("#similarityColorCategory").val(), $("#legend"));
+
+  findSimilarStudies(links);
 }
 
 function drawULayout(container, graphData, colorScale) {
@@ -604,5 +613,9 @@ $(document).ready(function() {
     this.noUiSlider.on("end", function(values, handle) {    
       drawGraph(similarityThreshold);
     });
-  })
-})
+  });
+
+  $("#connectionsModal").on("hidden.bs.modal", function () {
+    window.sessionStorage.removeItem("modalID");
+  });
+});

static/scripts/timeline.mjs

@@ -254,7 +254,6 @@ function drawTimelineGraph() {
   const innerWidth = $("#timeline-graph-container").width() - margin.left - margin.right;
   const nodeRadius = innerWidth / 150;
   const height = Math.max(250, maxYearsCount * (nodeRadius * 4));
-  console.log({height, maxYearsCount, nodeRadius});
   const innerHeight = height - margin.top - margin.bottom;
   const axisHeight = innerHeight;
 

static/styles/base.css

@@ -81,10 +81,9 @@ nav {
   border-radius: 5px; /* Rounded corners */
 }
 
-.navbar-item:hover {
-  background-color: var(--color-accent); /* Use the same color with 60% opacity */
-  opacity: 0.6;
-  color: white;
+.navbar-item:hover:not(.navbar-item-selected) {
+  background-color: #f8e6e6;
+  border-color: var(--color-accent);
   border-radius: 5px;
 }
 
@@ -132,6 +131,7 @@ h3 {
   display: flex;
   justify-content: end;
   gap: 0.5em;
+  align-items: center;
 }
 
 .slider-container {
@@ -202,17 +202,25 @@ h3 {
 }
 
 #study-link-btn {
-  background-color: #B89491;
+  background-color: var(--color-accent);
   color: white;
   border: none;
-  padding: 0.375em 0.75em;
+  padding: 0.375rem 0.75rem;
   border-radius: 5px;
   text-decoration: none;
   opacity: 1;
+  font-size: 1rem;
+  border: 1px solid var(--color-accent);
+}
+
+#similar-studies-btn {
+  background-color: var(--color-accent);
+  border: 1px solid var(--color-accent);
 }
 
 #study-link-btn:hover,
-#study-link:hover {
+#study-link:hover,
+#similar-studies-btn:hover {
   opacity: 0.6;
 }
 
@@ -299,6 +307,14 @@ a:link, a:visited {
   nav {
     padding: 0.5em;
   }
+
+  .sidebar-buttons {
+    margin-top: 1em;
+  }
+
+  .sidebar-buttons > div {
+    margin-top: 0 !important;
+  }
 }
 
 @media (max-width: 630px) {

static/styles/similarity.css

@@ -1,9 +1,6 @@
 /* General Container */
 #similarityContainer {
-  background: var(--color-gray-light);
-  border-radius: 8px;
   padding: 1.5em;
-  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
   margin: 1.5em 0;
 }
 
@@ -136,9 +133,10 @@
 
 /* Important: Set minimum dimensions for the graph container */
 #graphContainer {
+  border-radius: 8px;
+  background: var(--color-gray-light);
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
   width: 100%;
-  border: 0px solid #ddd;
-  border-radius: 0px;
   overflow: visible;
   margin-bottom: 1em; /* Add some space below the visualization */
 }

static/styles/timeline.css

@@ -1,8 +1,5 @@
 #timeline-container {
-  background: var(--color-gray-light);
-  border-radius: 8px;
   padding: 1.5em;
-  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
   margin: 1.5em 0;
 }
 
@@ -109,12 +106,13 @@
 /* Container dimensions */
 #timeline-graph-container {
   width: 100%;
-  height: 600px;
-  border-radius: 5px;
   overflow: visible;
   margin-bottom: 1.5em;
   text-align: center;
   align-items: center;
+  background: var(--color-gray-light);
+  border-radius: 8px;
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
 }
 
 /* Legend styling */

templates/bar-chart.html

@@ -51,7 +51,7 @@ <h5 class="modal-title" id="modal-header-info">Row Details</h5>
 
 {% block scripts %}
   {{ super() }}
-  <script type="module" src="{{ url_for('static', filename='scripts/chart.umd.min.js')}}"></script>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.0/dist/chart.umd.min.js" integrity="sha256-Lye89HGy1p3XhJT24hcvsoRw64Q4IOL5a7hdOflhjTA=" crossorigin="anonymous"></script>
   <script type="module" src="{{ url_for('static', filename='scripts/barChart.mjs') }}"></script>
 {% endblock scripts %}
 

templates/base.html

@@ -6,17 +6,18 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   {# Links #}
-  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles/bootstrap.min.css') }}">
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
   <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles/nouislider.css') }}">
   <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles/base.css') }}">
   {% block styles %}
   {% endblock styles %}
 
   {# Scripts #}
-  <script src="{{ url_for('static', filename='scripts/bootstrap.bundle.min.js') }}"></script>
-  <script src="{{ url_for('static', filename='scripts/jQuery.js') }}"></script>
   <script src="{{ url_for('static', filename='scripts/nouislider.js') }}"></script>
-  <script type="module" src="{{ url_for('static', filename='scripts/d3.v7.min.js') }}"></script>
+  {# From CDNs #}
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+  <script src="https://code.jquery.com/jquery-3.7.1.slim.min.js" integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8=" crossorigin="anonymous" defer></script>
+  <script src="https://cdn.jsdelivr.net/npm/d3@7" defer></script>
 
   {# Dynamic Section #}
   {% block head %}
@@ -60,7 +61,7 @@
     <header class="mb-3">
       <nav data-current-view="{{ current_view }}">
         <a href="https://open-earable.teco.edu/" target="_blank">
-          <img id="open-earable-logo" src="{{ url_for('static', filename='images/OE_Logo_black_RGB.png') }}" alt="Open Earable Logo">
+          <img id="open-earable-logo" src="{{ url_for('static', filename='images/OE_Logo_black_RGB.png') }}" alt="Open Earable Logo" tabindex="-1">
         </a>
         <div id="earXplore-repo">
           <a href="https://github.com/OpenEarable/earXplore/tree/master" target="_blank">
@@ -111,7 +112,7 @@ <h3>EarXplore</h3>
             <span class="navbar-text">
               EarXplore Paper
             </span>
-            <img src="{{ url_for('static', filename='images/add_study_icon.svg')}}" alt="Paper Icon" class="navbar-icon">
+            <img src="{{ url_for('static', filename='images/paper_icon.svg')}}" alt="Paper Icon" class="navbar-icon">
           </button>
         </a>
         <button id="toggle-sidebar">
@@ -243,6 +244,7 @@ <h5 class="modal-title" id="study-info-header">Study Information Header</h5>
         </div>
         <div class="modal-body" id="study-info-modal-body"></div>
         <div class="modal-footer">
+          <button class="btn btn-secondary" id="similar-studies-btn"><a href="{{ url_for('similarity') }}">Find Similar Studies</a></button>
           <button type="button" id="study-link-btn"><a id="study-link" target="_blank">Open Paper</a></button>
           <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
         </div>