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

Author: fifth-island

locales/de-global.json5

@@ -19,29 +19,13 @@
       attribution: 'Attribution',
       changelog: 'Versionshistorie',
     },
-    applicationMenu: {
-      about: 'Über ESID',
-      accessibility: 'Barrierefreiheit',
-      changelog: 'Änderungsprotokoll',
-      imprint: 'Impressum',
-      privacyPolicy: 'Datenschutzerklärung',
-      termsOfUse: 'Nutzungsbedingungen',
-    },
-    scenarioSelector: {
-      label: 'Szenario',
-    },
-    tour: 'Tour',
   },
   'icon-bar': {
     'previous-day-tooltip': 'Vorheriger Tag',
     'next-day-tooltip': 'Nächster Tag',
     'play-pause-tooltip': 'Start/Pause',
     'fullscreen-tooltip': 'Vollbild',
   },
-  history: {
-    placeholder: 'history',
-    title: 'Verlauf',
-  },
   BEZ: {
     K: 'Kreis',
     LK: 'Landkreis',
@@ -132,12 +116,6 @@
   today: 'Heute',
   more: 'Mehr',
   less: 'Weniger',
-  search: {
-    articles: {
-      placeholder: 'Artikel suchen...',
-      ariaLabel: 'Suchen Sie nach Artikeln und Dokumentationen',
-    },
-  },
   germany: 'Deutschland',
   WIP: 'Diese Funktionalität befindet sich noch in der Entwicklung.',
   'no-data': 'Keine Daten',
@@ -154,7 +132,6 @@
       purpose: 'Was ist der Zweck von ESID?',
     },
     results: {
-      initialPrompt: 'Geben Sie eine Frage ein, um nach relevanten Artikeln und Dokumentationen zu suchen.',
       noResults: 'Keine Ergebnisse gefunden. Versuchen Sie, Ihre Frage umzuformulieren oder andere Schlüsselwörter zu verwenden.',
       resultsFound_one: '1 Ergebnis gefunden für',
       resultsFound_other: '{{count}} Ergebnisse gefunden für',
@@ -164,11 +141,6 @@
       high: 'Hohe Relevanz',
       related: 'Verwandt',
     },
-    pagination: {
-      previous: 'Zurück',
-      next: 'Weiter',
-      pageOf: 'Seite {{current}} von {{total}}',
-    },
   },
   language: 'Sprache',
   legal: {
@@ -235,11 +207,4 @@
     reset: 'Auf Standardwert zurücksetzen',
     r0: 'Basisreproduktionszahl (R0)',
   },
-  history: {
-    title: 'Verlauf',
-  },
-  language: 'Sprache',
-  legal: {
-    attributions: 'Namensnennung',
-  },
 }

locales/en-global.json5

@@ -19,18 +19,6 @@
       attribution: 'Attribution',
       changelog: 'Changelog',
     },
-    applicationMenu: {
-      about: 'About ESID',
-      accessibility: 'Accessibility',
-      changelog: 'Changelog',
-      imprint: 'Imprint',
-      privacyPolicy: 'Privacy Policy',
-      termsOfUse: 'Terms of Use',
-    },
-    scenarioSelector: {
-      label: 'Scenario',
-    },
-    tour: 'Tour',
   },
   'icon-bar': {
     'previous-day-tooltip': 'Previous Day',
@@ -45,7 +33,6 @@
     placeholder: 'Main Content',
   },
   history: {
-    Tabtitle: 'history',
     title: 'History',
   },
   details: {
@@ -141,12 +128,6 @@
   today: 'Today',
   more: 'More',
   less: 'Less',
-  search: {
-    articles: {
-      placeholder: 'Search articles...',
-      ariaLabel: 'Search for articles and documentation',
-    },
-  },
   germany: 'Germany',
   'no-data': 'No Data',
   'loki-logo': 'LOKI logo',
@@ -172,7 +153,6 @@
       purpose: 'What is ESID purpose?',
     },
     results: {
-      initialPrompt: 'Enter a question to search for relevant articles and documentation.',
       noResults: 'No results found. Try rephrasing your question or using different keywords.',
       resultsFound_one: 'Found 1 result for',
       resultsFound_other: 'Found {{count}} results for',
@@ -182,11 +162,6 @@
       high: 'High Relevance',
       related: 'Related',
     },
-    pagination: {
-      previous: 'Previous',
-      next: 'Next',
-      pageOf: 'Page {{current}} of {{total}}',
-    },
   },
   language: 'Language',
   legal: {
@@ -253,8 +228,4 @@
     reset: 'Reset to default value',
     r0: 'Basic Reproduction Number (R0)',
   },
-  language: 'Language',
-  legal: {
-    attributions: 'Attributions',
-  },
 }

src/components/OnboardingComponents/SemanticSearch/ArticleDialog.tsx

@@ -40,6 +40,7 @@ export default function ArticleDialog({open, onClose, article}: ArticleDialogPro
   const [zoom, setZoom] = useState(1);
   const containerRef = useRef<HTMLDivElement>(null);
 
+  // Effect to register ResizeObserver to adjust Dialog to window resizes.
   useEffect(() => {
     const observer = new ResizeObserver((entries: ResizeObserverEntry[]) => {
       const entry = entries[0];
@@ -55,6 +56,7 @@ export default function ArticleDialog({open, onClose, article}: ArticleDialogPro
     return () => {
       observer.disconnect();
     };
+    // Runs once to initialize the observer.
   }, []);
 
   const goToNextPage = useCallback(() => {
@@ -77,12 +79,14 @@ export default function ArticleDialog({open, onClose, article}: ArticleDialogPro
     setZoom(1);
   }, []);
 
-  // Keyboard shortcuts for zoom and navigation
+  // Effect to handle keyboard shortcuts for zoom and navigation.
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
       if (!open) return;
 
       switch (event.key) {
+        // Listen for both '+' and '=' for zooming in. On many keyboards (like the US QWERTY),
+        // '+' is the shifted version of the '=' key, so this makes the shortcut more reliable.
         case '+':
         case '=':
           if (event.ctrlKey || event.metaKey) {
@@ -129,7 +133,8 @@ export default function ArticleDialog({open, onClose, article}: ArticleDialogPro
 
   function onDocumentLoadSuccess({numPages: nextNumPages}: {numPages: number}) {
     setNumPages(nextNumPages);
-    setPageNumber(1); // Reset to first page on new document load
+     // Reset to first page on new document load
+    setPageNumber(1);
   }
 
   return (
@@ -141,8 +146,14 @@ export default function ArticleDialog({open, onClose, article}: ArticleDialogPro
       scroll='paper'
       sx={{'& .MuiDialog-paper': {height: '90vh'}}}
     >
-      <DialogTitle sx={{m: 0, p: 6, pb: 5}}>
-        <Typography variant='h2' sx={{pr: '2rem'}}>
+      <DialogTitle
+        sx={{
+          margin: 0,
+          padding: 6,
+          paddingBottom: 5,
+        }}
+      >
+        <Typography variant='h2' sx={{paddingRight: '2rem'}}>
           {article.title}
         </Typography>
         <IconButton
@@ -161,7 +172,12 @@ export default function ArticleDialog({open, onClose, article}: ArticleDialogPro
       <DialogContent
         ref={containerRef}
         dividers
-        sx={{display: 'flex', flexDirection: 'column', alignItems: 'center', p: 1}}
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          padding: 1,
+        }}
       >
         <Document
           file={article.hyperlink}
@@ -172,7 +188,15 @@ export default function ArticleDialog({open, onClose, article}: ArticleDialogPro
           <Page pageNumber={pageNumber} width={containerWidth > 0 ? containerWidth : undefined} scale={zoom} />
         </Document>
       </DialogContent>
-      <Box sx={{display: 'flex', justifyContent: 'center', alignItems: 'center', p: 1, gap: 2}}>
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          padding: 1,
+          gap: 2,
+        }}
+      >
         <IconButton onClick={goToPreviousPage} disabled={pageNumber <= 1} aria-label='previous page'>
           <ArrowBackIosNewIcon />
         </IconButton>
@@ -182,7 +206,7 @@ export default function ArticleDialog({open, onClose, article}: ArticleDialogPro
         <IconButton onClick={goToNextPage} disabled={pageNumber >= numPages} aria-label='next page'>
           <ArrowForwardIosIcon />
         </IconButton>
-        <Box sx={{display: 'flex', alignItems: 'center', gap: 1, ml: 2}}>
+        <Box sx={{display: 'flex', alignItems: 'center', gap: 1, marginLeft: 2}}>
           <Tooltip title='Zoom Out (Ctrl/Cmd + -)'>
             <IconButton onClick={handleZoomOut} disabled={zoom <= 0.25} aria-label='zoom out'>
               <ZoomOutIcon />

src/components/OnboardingComponents/SemanticSearch/QuerySuggestions.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React, {useCallback, useMemo} from 'react';
-import {Box, Chip, Typography} from '@mui/material';
+import {Box, Chip, Typography, alpha, useTheme} from '@mui/material';
 import {useTranslation} from 'react-i18next';
 import {Localization} from 'types/localization';
 
@@ -23,6 +23,7 @@ export default function QuerySuggestions({
   onSuggestionClick,
   localization,
 }: QuerySuggestionsProps): JSX.Element {
+  const theme = useTheme();
   const {t: defaultT, i18n} = useTranslation();
 
   const memoizedLocalization = useMemo(
@@ -44,11 +45,28 @@ export default function QuerySuggestions({
   );
 
   return (
-    <Box mb={2}>
-      <Typography variant='caption' sx={{color: 'GrayText', mb: 1, display: 'block'}}>
+    <Box
+      sx={{
+        marginBottom: 2,
+      }}
+    >
+      <Typography
+        variant='caption'
+        sx={{
+          color: 'GrayText',
+          marginBottom: 1,
+          display: 'block',
+        }}
+      >
         {tOverride('semanticSearch.suggestions.title')}
       </Typography>
-      <Box display='flex' flexWrap='wrap' gap={1}>
+      <Box
+        sx={{
+          display: 'flex',
+          flexWrap: 'wrap',
+          gap: 1,
+        }}
+      >
         {suggestions.map((suggestion) => (
           <Chip
             key={suggestion}
@@ -61,7 +79,8 @@ export default function QuerySuggestions({
               borderColor: 'primary.light',
               color: 'primary.main',
               '&:hover': {
-                backgroundColor: 'primary.main_10', // Assuming a 10% opacity color from your theme
+                // Applying the primary color at 10% opacity from the theme.
+                backgroundColor: alpha(theme.palette.primary.main, 0.1),
                 borderColor: 'primary.main',
               },
             }}

src/components/OnboardingComponents/SemanticSearch/SemanticSearchContainer.tsx

@@ -7,8 +7,6 @@ import {useSemanticSearch} from 'context/SemanticSearchContext';
 import QuerySuggestions from './QuerySuggestions';
 import {useTranslation} from 'react-i18next';
 import SearchIcon from '@mui/icons-material/Search';
-import {useAppDispatch, useAppSelector} from 'store/hooks';
-import {setSemanticSearchQuery} from 'store/SemanticSearchSlice';
 import SearchResultsList from './SearchResultsList';
 import ArticleDialog from './ArticleDialog';
 import {SearchResult} from 'types/semanticSearch';
@@ -19,19 +17,16 @@ import {Localization} from 'types/localization';
  * It will manage the search state and orchestrate the child components.
  */
 export default function SemanticSearchContainer({localization}: {localization?: Localization}): JSX.Element {
-  const {searchResults, isLoading, performSearch, clearSearch} = useSemanticSearch();
-  const dispatch = useAppDispatch();
-  const query = useAppSelector((state) => state.semanticSearch.searchQuery);
-  const searchStatus = useAppSelector((state) => state.semanticSearch.searchStatus);
+  const {searchResults, isLoading, performSearch, clearSearch, searchStatus} = useSemanticSearch();
+  const [query, setQuery] = useState('');
   const {t: defaultT, i18n} = useTranslation();
   const [selectedArticle, setSelectedArticle] = useState<SearchResult | null>(null);
 
   useEffect(() => {
     return () => {
-      dispatch(setSemanticSearchQuery(''));
       clearSearch();
     };
-  }, [dispatch, clearSearch]);
+  }, [clearSearch]);
 
   const memoizedLocalization = useMemo(
     () =>
@@ -68,12 +63,12 @@ export default function SemanticSearchContainer({localization}: {localization?:
   };
 
   const handleClear = () => {
-    dispatch(setSemanticSearchQuery(''));
+    setQuery('');
     clearSearch();
   };
 
   const handleSuggestionClick = (suggestion: string) => {
-    dispatch(setSemanticSearchQuery(suggestion));
+    setQuery(suggestion);
     if (performSearch) {
       performSearch(suggestion);
     }
@@ -103,7 +98,7 @@ export default function SemanticSearchContainer({localization}: {localization?:
         variant='outlined'
         placeholder={tOverride('semanticSearch.placeholder')}
         value={query}
-        onChange={(e) => dispatch(setSemanticSearchQuery(e.target.value))}
+        onChange={(e) => setQuery(e.target.value)}
         onKeyDown={(e) => {
           if (e.key === 'Enter') {
             handleSearch();