Merge pull request #154 from DigitalProductInnovationAndDevelopment/development

Dark Mode & new search UI

Author: TrixiRa

backend/routes/autocomplete.js

@@ -80,19 +80,29 @@ router.get('/', async (req, res) => {
     }
   }
 
-  if (type === 'institution' && query.length >= 2) {
+  if (type === 'institution' && query.length >= 1) {
     try {
-      const url = `${OPENALEX_API_BASE}/institutions`;
-      const params = { search: query, per_page: 10 };
+      // Use OpenAlex autocomplete endpoint for better partial matching
+      const url = `${OPENALEX_API_BASE}/autocomplete`;
+      const params = { 
+        q: query,
+        mailto: 'team@ourresearch.org'
+      };
       const response = await axios.get(url, { params, headers: OPENALEX_HEADERS });
       const data = response.data;
-      const results = (data.results || []).map(inst => ({
-        id: inst.id,
-        display_name: inst.display_name
-      }));
-      return res.json({ results });
+      
+      // Filter results to only include institutions
+      const institutionResults = (data.results || [])
+        .filter(item => item.entity_type === 'institution')
+        .map(inst => ({
+          id: inst.id,
+          display_name: inst.display_name
+        }));
+      
+      return res.json({ results: institutionResults });
     } catch (err) {
-      return res.status(500).json({ results: [], error: 'Failed to fetch from OpenAlex' });
+      console.error('OpenAlex autocomplete error:', err.message);
+      return res.status(500).json({ results: [], error: 'Failed to fetch from OpenAlex autocomplete' });
     }
   }
 

backend/routes/publications.js

@@ -146,8 +146,7 @@ router.get('/keyword_trends', async (req, res) => {
             start_date,
             end_date,
             per_page = 200,
-            years,
-            limit
+            institution_id
         } = req.query;
 
         let filterParts = [];
@@ -159,6 +158,11 @@ router.get('/keyword_trends', async (req, res) => {
         if (keyword) {
             filterParts.push(`title_and_abstract.search:${keyword}`);
         }
+        // Add institution filter if provided
+        if (institution_id) {
+            filterParts.push(`authorships.institutions.id:I${institution_id}`);
+        }
+
         // Only add date filters if start_date or end_date is provided
         if (start_date) {
             filterParts.push(`from_publication_date:${start_date}`);

frontend/package-lock.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "cors": "^2.8.5",
     "d3-geo": "^3.1.1",
+    "ogl": "^1.0.11",
     "react": "^18.2.0",
     "react-datepicker": "^8.4.0",
     "react-dom": "^18.2.0",

frontend/package.json

@@ -1,14 +1,14 @@
 import React, { useState } from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
-import { LandingPageLight } from './pages/light_mode/landing_light';
-import SearchPageLight from './pages/light_mode/search_light';
-import { AboutPage } from './pages/light_mode/about_light';
-import { PositionDetailLight } from './pages/light_mode/position_detail_light';
-import GraphViewLight from './pages/light_mode/graph_view_light';
-import WorldMapPapersPage from './pages/light_mode/WorldMapPapersPage';
+import { LandingPageLight } from './pages/home';
+import SearchPageLight from './pages/search';
+import { AboutPage } from './pages/about';
+import { PositionDetailLight } from './pages/trend_graphs';
+import GraphViewLight from './pages/collaboration_graph';
+import WorldMapPapersPage from './pages/world_map';
 
 function App() {
-  const [isDarkMode, setIsDarkMode] = useState(false);
+  const [isDarkMode, setIsDarkMode] = useState(true);
 
   const toggleDarkMode = () => {
     setIsDarkMode(!isDarkMode);
@@ -21,11 +21,11 @@ function App() {
         <main>
           <Routes>
             <Route path="/" element={<LandingPageLight darkMode={isDarkMode} toggleDarkMode={toggleDarkMode} />} />
-            <Route path="/search" element={<SearchPageLight darkMode={isDarkMode} toggleDarkMode={toggleDarkMode} />} />
+            <Route path="/search" element={<SearchPageLight darkMode={isDarkMode} />} />
             <Route path="/graph-view" element={<GraphViewLight darkMode={isDarkMode} toggleDarkMode={toggleDarkMode} />} />
             <Route path="/about" element={<AboutPage darkMode={isDarkMode} toggleDarkMode={toggleDarkMode} />} />
-            <Route path="/trends" element={<PositionDetailLight darkMode={isDarkMode} toggleDarkMode={toggleDarkMode} />} />
-            <Route path="/world-map" element={<WorldMapPapersPage darkMode={isDarkMode} toggleDarkMode={toggleDarkMode} />} />
+            <Route path="/trends" element={<PositionDetailLight darkMode={true} />} />
+            <Route path="/world-map" element={<WorldMapPapersPage />} />
           </Routes>
         </main>
       </div>

frontend/src/App.jsx

@@ -23,6 +23,20 @@ body.dark {
   color: var(--color-text-dark);
 }
 
+/* Dark mode input placeholder styles */
+.dark input::placeholder {
+  color: #888;
+  opacity: 1;
+}
+
+.dark input:-ms-input-placeholder {
+  color: #888;
+}
+
+.dark input::-ms-input-placeholder {
+  color: #888;
+}
+
 /* App layout */
 .app {
   width: 100%;

frontend/src/assets/icons/world-map.svg

@@ -1,61 +1,87 @@
 .dropdownContainer {
   position: relative;
   width: 100%;
-  max-width: 400px;
-  margin-bottom: 1rem;
+  margin-bottom: 0;
 }
+
 .label {
   font-weight: 600;
   margin-bottom: 0.25rem;
   display: block;
 }
+
 .inputWrapper {
+  position: relative;
   display: flex;
   align-items: center;
 }
+
 .input {
   width: 100%;
-  padding: 0.5rem;
-  border: 1px solid #ccc;
-  border-radius: 4px 0 0 4px;
+  padding: 0.75rem;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
   outline: none;
   font-size: 1rem;
+  background: #222;
+  color: #fff;
 }
+
 .toggleBtn {
-  border: 1px solid #ccc;
-  border-left: none;
-  background: #f7f7f7;
-  padding: 0.5rem 0.75rem;
-  border-radius: 0 4px 4px 0;
+  position: absolute;
+  right: 32px;
+  top: 50%;
+  transform: translateY(-50%);
+  border: none;
+  background: transparent;
+  padding: 0.25rem;
   cursor: pointer;
-  font-size: 1rem;
+  font-size: 0.75rem;
+  color: #6b7280;
+  z-index: 5;
+  height: 24px;
+  width: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
+
 .dropdownList {
   position: absolute;
   top: 100%;
   left: 0;
   right: 0;
   max-height: 220px;
   overflow-y: auto;
-  background: #fff;
+  background: #222;
+  color: #fff;
   border: 1px solid #ccc;
   border-top: none;
   z-index: 10;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 }
+
 .dropdownItem {
-  padding: 0.5rem 1rem;
+  padding: 0.75rem 1rem;
   cursor: pointer;
   transition: background 0.15s;
+  background: #222;
+  color: #fff;
 }
+
 .dropdownItem:hover {
-  background: #f0f0f0;
+  background: #333;
+  color: #fff;
 }
-.loading, .noResults {
+
+.loading,
+.noResults {
   padding: 0.75rem 1rem;
-  color: #888;
+  color: #6b7280;
   text-align: center;
+  font-size: 0.875rem;
 }
+
 .selectedValue {
   margin-top: 0.5rem;
   font-size: 0.95rem;