feat: Implement basic article search feature #414

fifth-island · 2025-06-19T13:46:56Z

Adds a new search bar to the top navigation, using a 'Data Socket' pattern with React Context and RTK Query. Includes internationalization support for new UI text and configures the proxy for the standalone backend API.

Description

This Pull Request implements a new Article Search feature.

A search bar is added to the top navigation bar.
It allows users to search for articles from a backend database in real-time.
The feature is built to be a modular, self-contained add-on, with the backend service running separately in Docker.
Basic internationalization support for all new UI text has been added for both English and German (it has to be further developed when integrated to the real API).

Related Issues

This feature was implemented based on the architecture requirements from the "Versatile Visual Analytics Framework for Exploration and Research" paper. No issue number was assigned.

Design Decisions

The implementation follows the existing architectural patterns of the application, specifically the "Data Socket" pattern.

ArticleDataContext.tsx: A new React Context was created to act as the "Data Socket". This component is responsible for all data fetching logic. It listens for search query changes and uses the RTK Query useLazyGetArticlesQuery hook to trigger API calls. This centralizes the data logic and keeps UI components "dumb".
ArticleSearchBar.tsx: The search bar is a simple UI component. It gets the search results and the loading state from the ArticleDataContext and sends user input back to the context. It does not fetch data itself.
articleApi.ts: An RTK Query service was created to define the API endpoint (/api/articles) for fetching data. This keeps API definitions separate from UI and state logic.
Modularity: This approach ensures the entire feature is highly modular. The ArticleDataProvider can be wrapped around the application in App.tsx to provide the search functionality anywhere it's needed, and the backend is fully independent. For now, it is just a temporary element, as it will be modified after the development of the UI mockups.

Performance & Quality

The search query is debounced within the component to prevent excessive API calls while the user is typing. No formal performance profiles have been attached for this initial implementation. It is an initial implementation with no true database. The only quality tests performed was checking the performance of the API calls when fetching the data to the search bar, which demonstrated to be happening efficiently.

Performance & Quality

Checklist

I, the author of this PR checked the following requirements for good software quality:

I, the reviewer checked the following things:

I ran the software once and tried all new and related functionality to this PR
I looked at all new and changed lines of code and commented on possible problems
I read the added documentation and checked if it is understandable and clear
I checked the added tests for completeness
I checked the internationalized strings for spelling errors
I checked the performance metrics for problems or unexplained degradation
I checked that the changes are noted in the changelog

Adds a new search bar to the top navigation, using a 'Data Socket' pattern with React Context and RTK Query. Includes internationalization support for new UI text and configures the proxy for the standalone backend API.

This commit establishes the foundational frontend architecture for the semantic search feature. It represents the second iteration of development, focusing on building out the UI components and data flow in preparation for backend integration. - Implements SemanticSearchContext for managing state and API interactions. - Integrates the main SemanticSearchContainer within the existing TopBarPopover. - Adds placeholder components, TypeScript types, and a Redux slice. - Includes internationalization keys for all new user-facing text.

github-actions · 2025-06-24T08:34:17Z

Test Results

0 tests ±0 0 ✅ ±0 0s ⏱️ ±0s
0 suites ±0 0 💤 ±0
0 files ±0 0 ❌ ±0

Results for commit 129366a. ± Comparison against base commit f578619.

♻️ This comment has been updated with latest results.

This commit fixes a series of cascading test failures that occurred after introducing the semantic search feature. - Wraps test components in ArticleDataProvider to provide necessary context. - Removes a duplicate data-testid that caused an ambiguous element error.

…z feedback

…cleDialog

src/context/SemanticSearchContext.tsx

NXXR · 2025-08-19T09:26:41Z

src/context/SemanticSearchContext.tsx

+    throw new Error('useSemanticSearch must be used within a SemanticSearchProvider');
+  }
+  return context;
+}


this result handling should be done in the articleAPI which should then return SerarchResult objects.
This way the API response transformations are easier to maintain and the components in the App only use the defined types.

Solved. II moved it to the API handling.

src/store/SemanticSearchSlice.ts

locales/de-global.json5

src/components/OnboardingComponents/SemanticSearch/SemanticSearchContainer.tsx

src/App.tsx

test/setup.ts

NXXR · 2025-08-19T13:47:47Z

.env.template

 # This is for development only. For production you need to replace this with the actual URL.
 VITE_API_URL=http://localhost:8000

+# VITE_ARTICLE_API_URL= http://sc-010187l:8001/
+VITE_ARTICLE_API_URL=http://localhost:8001


this is a bad comment (Ours above too 😅). Explain what the Variable is for.
Also don't expose network internal or development names to git 😬 bad enough that we do this for the IDP below.

Suggested change

# This is for development only. For production you need to replace this with the actual URL.

VITE_API_URL=http://localhost:8000

# VITE_ARTICLE_API_URL= http://sc-010187l:8001/

VITE_ARTICLE_API_URL=http://localhost:8001

# Development only. For production you need to replace this with the actual URLto the Backend API (https://github.com/SciCompMod/ESID-Backend).

VITE_API_URL=http://localhost:8000

# Development only. For production you need to replace this with the actual URL to your Knowledgebase API (https://github.com/SciCompMod/ESID-Knowledgebase).

VITE_ARTICLE_API_URL=http://localhost:8001

NXXR · 2025-08-19T13:51:05Z

.gitignore

+# .env
+.eslintcache
 .env
+.venv
+__pycache__/
+/public/assets
+/public/locales
+/public/node_modules
+/public/pdf.worker.min.mjs
 .eslintcache
+.env
+.DS_Store


This looks like some leftovers from development?
I don't see why we would have python stuff in our repo.
not sure why the pdf worker is in here if it's still committed as the .js 🤔 is that on purpose?

Suggested change

# .env

.eslintcache

.env

.venv

__pycache__/

/public/assets

/public/locales

/public/node_modules

/public/pdf.worker.min.mjs

.eslintcache

.env

.DS_Store

.env

.eslintcache

As for this change here, you are correct on your points. But I added the pdf worker here in an attempt to deal with the failing in loading PDFs, as there were two versions of the library. I still have not come to tangible fixes on this end.

…atical logic

NXXR · 2025-09-09T09:38:43Z

@NXXR feedback to Sarah when added (User Feedback 20, 2, 3)

…arch

feat: Implement article search feature

425a25a

Adds a new search bar to the top navigation, using a 'Data Socket' pattern with React Context and RTK Query. Includes internationalization support for new UI text and configures the proxy for the standalone backend API.

fifth-island requested a review from NXXR June 19, 2025 13:51

fifth-island changed the title ~~feat: Implement article search feature~~ feat: Implement basic article search feature Jun 19, 2025

fifth-island added 2 commits June 24, 2025 10:55

Merge branch 'develop' into feature/article-search

09c8a85

fifth-island force-pushed the feature/article-search branch from 4befb49 to 09c8a85 Compare July 15, 2025 14:39

fifth-island added 9 commits July 16, 2025 10:51

refactor: revert to GET request for search API

f8e812c

feat: Remove ArticleSearchBar and use direct API calls based on Morit…

500856e

…z feedback

refactor: Align frontend with updated search API response

01c1a88

feat: Implement PDF viewer for search results

a9bb2b9

fix: Add missing license file for pdf.js worker

4477955

feat(semantic-search): Implement language-agnostic pagination in Arti…

403a99f

…cleDialog

feat: Implement responsive zoom and UI enhancements in ArticleDialog

146ed3b

fix: readjustments for PDF displayer

aba24cd

fix: contribute.md formatting and adapted to latest backend

79d9a58

NXXR requested a review from JonasGilg August 5, 2025 10:52

NXXR requested changes Aug 19, 2025

View reviewed changes

fifth-island added 3 commits August 20, 2025 14:48

updated language changes

bd0d9b0

Fixed load bar, search bar centralization, and semantic search mathem…

b544a95

…atical logic

feat(semantic-search): Refactor and enhance component PART 2

9b3f6b2

fifth-island force-pushed the feature/article-search branch from 8117a4b to 9b3f6b2 Compare August 21, 2025 13:30

latest changes -- missing PDF package fixes and .env fixes

c5a9787

This was referenced Sep 9, 2025

Add info about data sources. #279

Open

Enhance Compartment Labels #272

Open

NXXR added 3 commits November 30, 2025 18:35

Merge remote-tracking branch 'origin/develop' into feature/article-se…

7eeae6a

…arch

update package lock

c12b07c

remove redundant package entry

896e758

run formatter

129366a

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: Implement basic article search feature #414

feat: Implement basic article search feature #414

Uh oh!

fifth-island commented Jun 19, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Jun 24, 2025 •

edited

Loading

Uh oh!

Uh oh!

NXXR Aug 19, 2025

Uh oh!

fifth-island Aug 21, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

NXXR Aug 19, 2025

Uh oh!

NXXR Aug 19, 2025

Uh oh!

fifth-island Aug 22, 2025

Uh oh!

NXXR commented Sep 9, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

feat: Implement basic article search feature #414

Are you sure you want to change the base?

feat: Implement basic article search feature #414

Uh oh!

Conversation

fifth-island commented Jun 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related Issues

Design Decisions

Performance & Quality

Performance & Quality

Checklist

Uh oh!

github-actions bot commented Jun 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Test Results

Uh oh!

Uh oh!

NXXR Aug 19, 2025

Choose a reason for hiding this comment

Uh oh!

fifth-island Aug 21, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

NXXR Aug 19, 2025

Choose a reason for hiding this comment

Uh oh!

NXXR Aug 19, 2025

Choose a reason for hiding this comment

Uh oh!

fifth-island Aug 22, 2025

Choose a reason for hiding this comment

Uh oh!

NXXR commented Sep 9, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

fifth-island commented Jun 19, 2025 •

edited

Loading

github-actions bot commented Jun 24, 2025 •

edited

Loading