feat(frontend): enable advanced research (#463)

* working on component querying backend

* feat(frontend): link advanced research component with backend

* feat(frontend): add parent, child, ancestor, descendant filter

* feat(frontend): disable modified filter with comment

* feat(frontend): add search results with pagination

* feat(frontend): search expression is refactored by backend

* refactor(frontend): replace search page, avoid useeffect and many rerenders

* refactor(frontend): a file for each main component

* feat(frontend): is:external and is:not:external filter

* feat(frontend): add external filter

* refactor(frontend): clean code, add error message if needed

* lint

* refactor(frontend): change multiple select filter behaviour

* refactor(frontend): remove useless states and props

* feat(frontend): unify design with select and inputs components only

* refactor(frontend): refactor singleSelectFilter

* feat: improve search results display (#484)

* feat(frontend): make language selection for translations more intuitive (#461)

The PR modifies the translations section of the edit entry page:

* Changes "All languages" terminology to "Fallback translations" (fixes #458)
* Adds an info alert if "en" (English) or "xx" (Fallback translations) is not the main language for an entry (fixes #457)
/ Fixes the fact that the alert message about changing the display name of a language appears even if the language had no translations and we add the first one (fixes #459)
* Adds a "Show all existing translations" checkbox to see all the languages that currently have translations, with their translations Adds a possibility to "pin" languages to select them (so they stay in local storage and appear at the top for each entry), and a possibility to hide (unselect) these languages easily (with an icon next to their title)
* Modifies the selection of new languages: I removed the "number of languages shown" button that had to be clicked to add a language, and created a "Show another language" button at the bottom of the section. Also, the dialog is now an autocomplete instead of a select, and you just type the languages that you want to add and see languages that are not selected, instead of seeing all current languages and being able to remove them. The autocomplete with the options is also automatically focused when opening the dialog.
* Adds vite-plugin-svgr to easily import svg files in React

---------

Co-authored-by: Charles Perier <[email protected]>

* feat: add property filter to search API (#456)

* feat: add property filter to search API

* chore: generate SDK

* chore: Add info banners on the frontend (#473)

* docs: add info banners

* refactor: delete unnecessary components

* fix: add line break

* improve search results, and few other improvements

* show translations instead of translated languages

---------

Co-authored-by: Charles Perier <[email protected]>
Co-authored-by: Eric Nguyen <[email protected]>

* refactor(frontend): remove useless lines, add css

* rewording

* test

---------

Co-authored-by: alice.juan <[email protected]>
Co-authored-by: Charles Perier <[email protected]>
Co-authored-by: Charles Perier <[email protected]>
Co-authored-by: Eric Nguyen <[email protected]>

backend/editor/models/node_models.py

@@ -30,7 +30,6 @@ class EntryNodeCreate(BaseModel):
 class EntryNode(BaseModel):
     id: str
     preceding_lines: list[str]
-    src_position: int
     main_language: str
     tags: dict[str, list[str]]
     properties: dict[str, str]

taxonomy-editor-frontend/src/App.tsx

@@ -7,12 +7,11 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 import { createTheme, CssBaseline, ThemeProvider } from "@mui/material";
 
-import { RootNodesWrapper } from "./pages/project/root-nodes";
 import { EditEntryWrapper } from "./pages/project/editentry";
 import { ExportTaxonomyWrapper } from "./pages/project/export";
 import { GoToProject } from "./pages/go-to-project";
 import { Home } from "./pages/home";
-import { SearchNodeWrapper } from "./pages/project/search";
+import { AdvancedSearchForm } from "./pages/project/search";
 import { StartProject } from "./pages/startproject";
 import { Errors } from "./pages/project/errors";
 import { ProjectPage, projectLoader } from "./pages/project";
@@ -58,15 +57,15 @@ const router = createBrowserRouter([
           },
           {
             path: "entry",
-            element: <RootNodesWrapper />,
+            element: <Navigate to="../search" relative="path" />,
           },
           {
             path: "entry/:id",
             element: <EditEntryWrapper />,
           },
           {
             path: "search",
-            element: <SearchNodeWrapper />,
+            element: <AdvancedSearchForm />,
           },
           {
             path: "errors",

taxonomy-editor-frontend/src/backend-types/types.ts

@@ -1,8 +1 @@
-export type NodeInfo = {
-  id: string;
-  is_external: boolean;
-};
-
-export type RootEntriesAPIResponse = Array<NodeInfo[]>;
-
 export type ParentsAPIResponse = string[];

taxonomy-editor-frontend/src/components/EntryNodesTableBody.tsx

@@ -0,0 +1,122 @@
+import { EntryNode } from "@/client";
+import {
+  Chip,
+  Stack,
+  TableBody,
+  TableCell,
+  TableRow,
+  Tooltip,
+  Typography,
+} from "@mui/material";
+import { Link } from "react-router-dom";
+import ISO6391 from "iso-639-1";
+import { useEffect, useState } from "react";
+import { SHOWN_LANGUAGES_KEY } from "@/pages/project/editentry/ListTranslations";
+
+type Props = {
+  entryNodes: EntryNode[];
+  taxonomyName: string;
+  branchName: string;
+};
+
+const EntryTitle = ({ id }: { id: string }) => {
+  const languageCode = id.split(":", 1)[0];
+  const languageName = ISO6391.getName(languageCode);
+  return (
+    <Typography variant="subtitle1">
+      {id.slice(languageCode.length + 1)}
+      <Tooltip title="Main language of the entry" placement="right" arrow>
+        <Chip label={languageName} size="small" sx={{ ml: 1, mb: 0.5 }} />
+      </Tooltip>
+    </Typography>
+  );
+};
+
+const getTranslations = (
+  tags: Record<string, string[]>,
+  shownLanguageCodes: string[]
+) => {
+  const result: string[] = [];
+
+  shownLanguageCodes.forEach((languageCode) => {
+    const languageName =
+      languageCode === "xx"
+        ? "Fallback translations"
+        : ISO6391.getName(languageCode);
+    const translations = tags[`tags_${languageCode}`];
+    if (translations) {
+      result.push(`${languageName}: ${translations.join(", ")}`);
+    }
+  });
+
+  return result;
+};
+
+export const EntryNodesTableBody = ({
+  entryNodes,
+  taxonomyName,
+  branchName,
+}: Props) => {
+  const [shownLanguageCodes, setShownLanguageCodes] = useState<string[]>([]);
+
+  useEffect(() => {
+    // get shown languages from local storage if it exists else use main language
+    try {
+      const rawLocalStorageShownLanguages =
+        localStorage.getItem(SHOWN_LANGUAGES_KEY);
+      let localStorageShownLanguages: string[] | null =
+        rawLocalStorageShownLanguages
+          ? JSON.parse(rawLocalStorageShownLanguages)
+          : null;
+      // validate that shown languages is an array of strings and filter all items that are valid language codes
+      if (
+        Array.isArray(localStorageShownLanguages) &&
+        localStorageShownLanguages.every((item) => typeof item === "string")
+      ) {
+        localStorageShownLanguages = localStorageShownLanguages.filter(
+          (item) => {
+            return item === "xx" || ISO6391.validate(item);
+          }
+        );
+      } else {
+        localStorageShownLanguages = [];
+      }
+      setShownLanguageCodes(localStorageShownLanguages);
+    } catch (e) {
+      // shown languages is an empty list, when we can't parse the local storage
+      console.log(e);
+    }
+  }, []);
+
+  return (
+    <>
+      <TableBody>
+        {entryNodes.map(({ id, isExternal, tags }) => (
+          <TableRow
+            key={id}
+            hover
+            component={Link}
+            to={`/${taxonomyName}/${branchName}/entry/${id}`}
+            sx={{ textDecoration: "none" }}
+          >
+            <TableCell align="left" component="td" scope="row">
+              <Stack gap={0.5}>
+                <EntryTitle id={id} />
+                {isExternal && (
+                  <Typography variant="subtitle2" color="secondary">
+                    External Node
+                  </Typography>
+                )}
+                {getTranslations(tags, shownLanguageCodes).map((line, i) => (
+                  <Typography key={i} variant="body2" color="inherit">
+                    {line}
+                  </Typography>
+                ))}
+              </Stack>
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </>
+  );
+};

taxonomy-editor-frontend/src/components/ResponsiveAppBar.tsx

@@ -26,7 +26,6 @@ const getDisplayedPages = (
 
   const navUrlPrefix = `${params.taxonomyName}/${params.branchName}/`;
   return [
-    { url: navUrlPrefix + "entry", translationKey: "Nodes" },
     { url: navUrlPrefix + "search", translationKey: "Search" },
     { url: navUrlPrefix + "export", translationKey: "Export" },
     { url: navUrlPrefix + "errors", translationKey: "Errors" },
@@ -46,7 +45,7 @@ export const ResponsiveAppBar = () => {
   };
 
   return (
-    <AppBar position="sticky" sx={{ textColor: "#000", background: "#f2e9e4" }}>
+    <AppBar position="sticky" sx={{ color: "#000", background: "#f2e9e4" }}>
       <Container maxWidth={false}>
         <Toolbar disableGutters>
           {/* Mobile content */}

taxonomy-editor-frontend/src/pages/project/editentry/ListTranslations.tsx

@@ -16,7 +16,7 @@ import { useMemo, useEffect, useState } from "react";
 import ISO6391 from "iso-639-1";
 import { TranslationTags } from "./TranslationTags";
 
-const SHOWN_LANGUAGES_KEY = "shownLanguages";
+export const SHOWN_LANGUAGES_KEY = "shownLanguages";
 
 const getLanguageName = (languageCode: string): string => {
   if (languageCode === "xx") {