Add a basic fulltext concept search to the history timeline

ingef · May 28, 2024 · c0eb3ab · c0eb3ab
1 parent 9d9c695
commit c0eb3ab
Show file tree

Hide file tree

Showing 12 changed files with 594 additions and 379 deletions.
diff --git a/frontend/src/js/entity-history/EntityIdsList.tsx b/frontend/src/js/entity-history/EntityIdsList.tsx
@@ -32,15 +32,17 @@ const Statuses = styled("div")`
   gap: 2px;
   margin-left: auto;
 `;
+
 const EntityStatus = styled("div")`
   border-radius: ${({ theme }) => theme.borderRadius};
   border: 2px solid ${({ theme }) => theme.col.blueGrayDark};
   background-color: white;
-  padding: 1px 4px;
+  padding: 0px 4px;
   font-size: ${({ theme }) => theme.font.xs};
   color: ${({ theme }) => theme.col.blueGrayDark};
   font-weight: 700;
 `;
+
 const TheEntityId = styled("div")<{ active?: boolean }>`
   font-weight: 700;
   flex-shrink: 0;

diff --git a/frontend/src/js/entity-history/History.tsx b/frontend/src/js/entity-history/History.tsx
@@ -24,11 +24,13 @@ import { EntityHeader } from "./EntityHeader";
 import InteractionControl from "./InteractionControl";
 import type { LoadingPayload } from "./LoadHistoryDropzone";
 import { Navigation } from "./Navigation";
+import SearchControl from "./SearchControl";
 import SourcesControl from "./SourcesControl";
-import Timeline from "./Timeline";
+import { Timeline } from "./Timeline";
 import VisibilityControl from "./VisibilityControl";
 import { useUpdateHistorySession } from "./actions";
 import { EntityId } from "./reducer";
+import { TimelineSearchProvider } from "./timelineSearchState";
 
 const FullScreen = styled("div")`
   position: fixed;
@@ -95,10 +97,6 @@ const SxSourcesControl = styled(SourcesControl)`
   width: 450px;
 `;
 
-const SxTimeline = styled(Timeline)`
-  margin: 10px 0 0;
-`;
-
 export interface EntityIdsStatus {
   [entityId: string]: SelectOptionT[];
 }
@@ -179,93 +177,97 @@ export const History = () => {
     useOpenCloseInteraction();
 
   return (
-    <FullScreen>
-      <PanelGroup units="pixels" direction="horizontal">
-        <Panel minSize={400} defaultSize={400} maxSize={800}>
-          <SxNavigation
-            blurred={blurred}
-            entityIds={entityIds}
-            entityIdsStatus={entityIdsStatus}
-            currentEntityId={currentEntityId}
-            currentEntityIndex={currentEntityIndex}
-            entityStatusOptions={entityStatusOptions}
-            setEntityStatusOptions={setEntityStatusOptions}
-            onLoadFromFile={onLoadFromFile}
-            onResetHistory={onResetEntityStatus}
-          />
-        </Panel>
-        <ResizeHandle />
-        <Panel minSize={500}>
-          <ErrorBoundary fallback={<ErrorFallback allowFullRefresh />}>
-            <Main>
-              <Header>
-                <Controls>
-                  <SxSourcesControl
-                    options={options}
-                    sourcesFilter={sourcesFilter}
-                    setSourcesFilter={setSourcesFilter}
-                  />
-                </Controls>
-                {currentEntityId && (
-                  <EntityHeader
-                    blurred={blurred}
-                    currentEntityIndex={currentEntityIndex}
-                    currentEntityId={currentEntityId}
-                    status={currentEntityStatus}
-                    setStatus={setCurrentEntityStatus}
-                    entityStatusOptions={entityStatusOptions}
-                  />
-                )}
-              </Header>
-              <Flex>
-                <Sidebar>
-                  <VisibilityControl
-                    blurred={blurred}
-                    toggleBlurred={toggleBlurred}
-                  />
-                  {showAdvancedControls && (
-                    <DetailControl
-                      detailLevel={detailLevel}
-                      setDetailLevel={setDetailLevel}
+    <TimelineSearchProvider>
+      <FullScreen>
+        <PanelGroup units="pixels" direction="horizontal">
+          <Panel minSize={400} defaultSize={400} maxSize={800}>
+            <SxNavigation
+              blurred={blurred}
+              entityIds={entityIds}
+              entityIdsStatus={entityIdsStatus}
+              currentEntityId={currentEntityId}
+              currentEntityIndex={currentEntityIndex}
+              entityStatusOptions={entityStatusOptions}
+              setEntityStatusOptions={setEntityStatusOptions}
+              onLoadFromFile={onLoadFromFile}
+              onResetHistory={onResetEntityStatus}
+            />
+          </Panel>
+          <ResizeHandle />
+          <Panel minSize={500}>
+            <ErrorBoundary fallback={<ErrorFallback allowFullRefresh />}>
+              <Main>
+                <Header>
+                  <Controls>
+                    <SxSourcesControl
+                      options={options}
+                      sourcesFilter={sourcesFilter}
+                      setSourcesFilter={setSourcesFilter}
+                    />
+                  </Controls>
+                  {currentEntityId && (
+                    <EntityHeader
+                      blurred={blurred}
+                      currentEntityIndex={currentEntityIndex}
+                      currentEntityId={currentEntityId}
+                      status={currentEntityStatus}
+                      setStatus={setCurrentEntityStatus}
+                      entityStatusOptions={entityStatusOptions}
                     />
                   )}
-                  <InteractionControl
-                    onCloseAll={closeAll}
-                    onOpenAll={openAll}
-                  />
-                  <ContentControl
-                    value={contentFilter}
-                    onChange={setContentFilter}
-                  />
-                  <SidebarBottom>
-                    {resultUrls.length > 0 && (
-                      <DownloadResultsDropdownButton
-                        tiny
-                        resultUrls={resultUrls}
-                        tooltip={t("history.downloadEntityData")}
+                </Header>
+                <Flex>
+                  <Sidebar>
+                    <SearchControl />
+                    <VisibilityControl
+                      blurred={blurred}
+                      toggleBlurred={toggleBlurred}
+                    />
+                    {showAdvancedControls && (
+                      <DetailControl
+                        detailLevel={detailLevel}
+                        setDetailLevel={setDetailLevel}
                       />
                     )}
-                  </SidebarBottom>
-                </Sidebar>
-                <SxTimeline
-                  blurred={blurred}
-                  detailLevel={detailLevel}
-                  sources={sourcesSet}
-                  contentFilter={contentFilter}
-                  currentEntityInfos={currentEntityInfos}
-                  currentEntityTimeStratifiedInfos={
-                    currentEntityTimeStratifiedInfos
-                  }
-                  getIsOpen={getIsOpen}
-                  toggleOpenYear={toggleOpenYear}
-                  toggleOpenQuarter={toggleOpenQuarter}
-                />
-              </Flex>
-            </Main>
-          </ErrorBoundary>
-        </Panel>
-      </PanelGroup>
-    </FullScreen>
+                    <InteractionControl
+                      onCloseAll={closeAll}
+                      onOpenAll={openAll}
+                    />
+                    <ContentControl
+                      value={contentFilter}
+                      onChange={setContentFilter}
+                    />
+                    <SidebarBottom>
+                      {resultUrls.length > 0 && (
+                        <DownloadResultsDropdownButton
+                          tiny
+                          resultUrls={resultUrls}
+                          tooltip={t("history.downloadEntityData")}
+                        />
+                      )}
+                    </SidebarBottom>
+                  </Sidebar>
+                  <Timeline
+                    className="mt-[10px]"
+                    blurred={blurred}
+                    detailLevel={detailLevel}
+                    sources={sourcesSet}
+                    contentFilter={contentFilter}
+                    currentEntityInfos={currentEntityInfos}
+                    currentEntityTimeStratifiedInfos={
+                      currentEntityTimeStratifiedInfos
+                    }
+                    getIsOpen={getIsOpen}
+                    toggleOpenYear={toggleOpenYear}
+                    toggleOpenQuarter={toggleOpenQuarter}
+                  />
+                </Flex>
+              </Main>
+            </ErrorBoundary>
+          </Panel>
+        </PanelGroup>
+      </FullScreen>
+    </TimelineSearchProvider>
   );
 };
 

diff --git a/frontend/src/js/entity-history/NavigationHeader.tsx b/frontend/src/js/entity-history/NavigationHeader.tsx
@@ -40,11 +40,11 @@ const SxHeading3 = styled(Heading3)`
 const Count = styled(SxHeading3)`
   justify-self: end;
 `;
+
 const Text = styled("span")`
   font-size: ${({ theme }) => theme.font.md};
   color: ${({ theme }) => theme.col.gray};
-  text-transform: uppercase;
-  font-weight: 300;
+  font-weight: 400;
 `;
 
 const SpecialText = styled("p")<{ zero?: boolean }>`
@@ -55,12 +55,6 @@ const SpecialText = styled("p")<{ zero?: boolean }>`
   font-weight: 400;
 `;
 
-const StatsGrid = styled("div")`
-  display: grid;
-  gap: 0px 4px;
-  grid-template-columns: auto 1fr;
-`;
-
 interface Props {
   className?: string;
   idsCount: number;
@@ -104,12 +98,12 @@ export const NavigationHeader = memo(
             />
           </WithTooltip>
         </BaseInfo>
-        <StatsGrid>
+        <div className="grid gap-x-2 grid-cols-[auto_1fr] items-center">
           <Count>{idsCount}</Count>
           <Text>{t("tooltip.entitiesFound", { count: idsCount })}</Text>
           <Count>{markedCount}</Count>
           <Text>{t("history.marked", { count: markedCount })}</Text>
-        </StatsGrid>
+        </div>
         <ProgressBar donePercent={100 * (markedCount / idsCount)} />
       </Root>
     );

diff --git a/frontend/src/js/entity-history/SearchControl.tsx b/frontend/src/js/entity-history/SearchControl.tsx
@@ -0,0 +1,29 @@
+import { memo } from "react";
+import { useTranslation } from "react-i18next";
+
+import { faSearch } from "@fortawesome/free-solid-svg-icons";
+import IconButton from "../button/IconButton";
+import WithTooltip from "../tooltip/WithTooltip";
+import { useTimelineSearch } from "./timelineSearchState";
+
+const SearchControl = () => {
+  const { t } = useTranslation();
+
+  const { searchVisible, setSearchVisible } = useTimelineSearch();
+  const toggleSearchVisible = () => setSearchVisible(!searchVisible);
+
+  return (
+    <div className="flex flex-col items-center">
+      <WithTooltip text={t("history.search")}>
+        <IconButton
+          className="px-[10px] py-2"
+          active={searchVisible}
+          onClick={toggleSearchVisible}
+          icon={faSearch}
+        />
+      </WithTooltip>
+    </div>
+  );
+};
+
+export default memo(SearchControl);