Skip to content

Commit

Permalink
feat(frontend): enable advanced research (#463)
Browse files Browse the repository at this point in the history
* 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 <charlesperier@Charless-Laptop.local>

* 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 <charlesperier@Charless-Laptop.local>
Co-authored-by: Eric Nguyen <ericnguyen.developper@gmail.com>

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

* rewording

* test

---------

Co-authored-by: alice.juan <alice.juan@student-cs.fr>
Co-authored-by: Charles Perier <82757576+perierc@users.noreply.github.com>
Co-authored-by: Charles Perier <charlesperier@Charless-Laptop.local>
Co-authored-by: Eric Nguyen <ericnguyen.developper@gmail.com>
  • Loading branch information
5 people authored Apr 11, 2024
1 parent 6391abb commit 20ca2e4
Show file tree
Hide file tree
Showing 15 changed files with 768 additions and 511 deletions.
1 change: 0 additions & 1 deletion backend/editor/models/node_models.py
Original file line number Diff line number Diff line change
Expand Up @@ -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]
Expand Down
7 changes: 3 additions & 4 deletions taxonomy-editor-frontend/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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",
Expand Down
7 changes: 0 additions & 7 deletions taxonomy-editor-frontend/src/backend-types/types.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1 @@
export type NodeInfo = {
id: string;
is_external: boolean;
};

export type RootEntriesAPIResponse = Array<NodeInfo[]>;

export type ParentsAPIResponse = string[];
122 changes: 122 additions & 0 deletions taxonomy-editor-frontend/src/components/EntryNodesTableBody.tsx
Original file line number Diff line number Diff line change
@@ -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>
</>
);
};
48 changes: 0 additions & 48 deletions taxonomy-editor-frontend/src/components/NodesTableBody.tsx

This file was deleted.

3 changes: 1 addition & 2 deletions taxonomy-editor-frontend/src/components/ResponsiveAppBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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" },
Expand All @@ -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 */}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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") {
Expand Down
Loading

0 comments on commit 20ca2e4

Please sign in to comment.