From 6b1a5bea899b542872b4864169837175e0fa4bf5 Mon Sep 17 00:00:00 2001
From: "alice.juan" <alice.juan@student-cs.fr>
Date: Wed, 27 Mar 2024 08:55:27 +0100
Subject: [PATCH] feat(frontend): add external filter

---
 .../src/pages/project/search/FiltersArea.tsx  |  28 +++-
 .../pages/project/search/SearchResults.tsx    |  31 ++---
 .../project/search/ThreeOptionsSwitch.tsx     | 123 ++++++++++--------
 .../src/pages/project/search/index.tsx        |   7 +-
 4 files changed, 112 insertions(+), 77 deletions(-)

diff --git a/taxonomy-editor-frontend/src/pages/project/search/FiltersArea.tsx b/taxonomy-editor-frontend/src/pages/project/search/FiltersArea.tsx
index 27199424..f4d5a01f 100644
--- a/taxonomy-editor-frontend/src/pages/project/search/FiltersArea.tsx
+++ b/taxonomy-editor-frontend/src/pages/project/search/FiltersArea.tsx
@@ -61,12 +61,16 @@ export const FiltersArea = ({
     for (const filter of updatedFilters) {
       switch (filter.filterType) {
         case "is":
-          if (filter.filterValue === "root") {
-            filtersStates.isRootNodesChecked = true;
-          } else if (filter.filterValue === "external") {
-            filtersStates.taxonomyScopeMode = "out";
-          } else if (filter.filterValue === "not:external") {
-            filtersStates.taxonomyScopeMode = "in";
+          switch (filter.filterValue) {
+            case "root":
+              filtersStates.isRootNodesChecked = true;
+              break;
+            case "external":
+              filtersStates.taxonomyScopeMode = "out";
+              break;
+            case "not:external":
+              filtersStates.taxonomyScopeMode = "in";
+              break;
           }
           break;
         case "language":
@@ -140,7 +144,17 @@ export const FiltersArea = ({
         }
         label="Root nodes"
       />
-      <ThreeOptionsSwitch filterValue={taxonomyScope} setFilterValue={setTaxonomyScope} options={{"in": {text:"IN", isNegated:true},"out":{text:"OUT",isNegated:false}}} setQ={setQ} keySearchTerm="external" setCurrentPage={setCurrentPage}/>
+      <ThreeOptionsSwitch
+        filterValue={taxonomyScope}
+        setFilterValue={setTaxonomyScope}
+        options={{
+          in: { text: "IN", isNegated: true },
+          out: { text: "OUT", isNegated: false },
+        }}
+        setQ={setQ}
+        keySearchTerm="external"
+        setCurrentPage={setCurrentPage}
+      />
       <MultipleSelectFilter
         label="Translated into"
         filterValue={chosenLanguagesCodes}
diff --git a/taxonomy-editor-frontend/src/pages/project/search/SearchResults.tsx b/taxonomy-editor-frontend/src/pages/project/search/SearchResults.tsx
index 45605496..e3a67d57 100644
--- a/taxonomy-editor-frontend/src/pages/project/search/SearchResults.tsx
+++ b/taxonomy-editor-frontend/src/pages/project/search/SearchResults.tsx
@@ -20,16 +20,17 @@ import {
 import { Dispatch, SetStateAction, useState } from "react";
 import AddBoxIcon from "@mui/icons-material/AddBox";
 import { useParams } from "react-router-dom";
+import { NodeInfo } from "@/backend-types/types";
 
 type AdvancedResearchResultsType = {
-  nodeIds: string[];
+  nodeInfos: NodeInfo[];
   nodeCount: number | undefined;
   currentPage: number;
   setCurrentPage: Dispatch<SetStateAction<number>>;
 };
 
 export const AdvancedResearchResults = ({
-  nodeIds,
+  nodeInfos,
   nodeCount = 0,
   currentPage,
   setCurrentPage,
@@ -68,26 +69,26 @@ export const AdvancedResearchResults = ({
         <Table>
           <TableHead>
             <TableRow>
-              <Stack direction="row" alignItems="center">
-                <TableCell align="left">
+              <TableCell align="left">
+                <Stack direction="row" alignItems="center">
                   <Typography variant="h6">Nodes</Typography>
-                </TableCell>
-                <IconButton
-                  sx={{ ml: 1, color: greyHexCode }}
-                  onClick={() => {
-                    setOpenNewNodeDialog(true);
-                  }}
-                >
-                  <AddBoxIcon />
-                </IconButton>
-              </Stack>
+                  <IconButton
+                    sx={{ ml: 1, color: greyHexCode }}
+                    onClick={() => {
+                      setOpenNewNodeDialog(true);
+                    }}
+                  >
+                    <AddBoxIcon />
+                  </IconButton>
+                </Stack>
+              </TableCell>
               <TableCell align="left">
                 <Typography variant="h6">Action</Typography>
               </TableCell>
             </TableRow>
           </TableHead>
           <NodesTableBody
-            nodeIds={nodeIds ?? []}
+            nodeInfos={nodeInfos ?? []}
             taxonomyName={taxonomyName ?? ""}
             branchName={branchName ?? ""}
           />
diff --git a/taxonomy-editor-frontend/src/pages/project/search/ThreeOptionsSwitch.tsx b/taxonomy-editor-frontend/src/pages/project/search/ThreeOptionsSwitch.tsx
index 727b9965..454aac53 100644
--- a/taxonomy-editor-frontend/src/pages/project/search/ThreeOptionsSwitch.tsx
+++ b/taxonomy-editor-frontend/src/pages/project/search/ThreeOptionsSwitch.tsx
@@ -1,61 +1,76 @@
-import { ToggleButton, ToggleButtonGroup, Typography } from "@mui/material"
+import { ToggleButton, ToggleButtonGroup, Typography } from "@mui/material";
 import React, { Dispatch, SetStateAction } from "react";
 
-  const toggleTheme = {
-    "& .MuiToggleButton-root": {
+const toggleTheme = {
+  "& .MuiToggleButton-root": {
+    color: "#341100",
+    "&.Mui-selected": {
       color: "#341100",
-      "&.Mui-selected": {
-        color: "#341100",
-      },
-      borderColor: "rgba(0, 0, 0, 0.23)",
     },
-  };
+    borderColor: "rgba(0, 0, 0, 0.23)",
+  },
+};
 
 type ThreeOptionsSwitchType = {
-    filterValue: string,
-    setFilterValue: Dispatch<SetStateAction<string>>,
-    options: {[key: string]: { text: string; isNegated: boolean}};
-    setQ: Dispatch<SetStateAction<string>>;
-    keySearchTerm: string;
-    setCurrentPage: Dispatch<SetStateAction<number>>;
-}
-  
-export const ThreeOptionsSwitch = ({filterValue, setFilterValue, options, setQ, keySearchTerm, setCurrentPage}:ThreeOptionsSwitchType) => {
+  filterValue: string;
+  setFilterValue: Dispatch<SetStateAction<string>>;
+  options: { [key: string]: { text: string; isNegated: boolean } };
+  setQ: Dispatch<SetStateAction<string>>;
+  keySearchTerm: string;
+  setCurrentPage: Dispatch<SetStateAction<number>>;
+};
 
-    const handleChange = (
-        event: React.MouseEvent<HTMLElement>,
-        newValue: string,
-    ) => {
-        setFilterValue(newValue);
-        setCurrentPage(1);
-        let newFilterExpression="";
-        if (options[newValue].isNegated) {
-            newFilterExpression = ` is:not:${keySearchTerm}`;
-        } else {
-            newFilterExpression = ` is:${keySearchTerm}`;
-        }
-        setQ((prevQ) => {
-            prevQ = prevQ.replace(`is:not:${keySearchTerm}`,"");
-            prevQ = prevQ.replace(`is:${keySearchTerm}`,"");
-            return prevQ+newFilterExpression;
-        });
-    };
-    return (
-        <div style={{ display: 'flex', flexDirection: 'column' }}>
-            <Typography variant="subtitle1" gutterBottom sx={{mb:0, m:"8px", color:"#341100"}}>
-                Taxonomy
-            </Typography>
-            <ToggleButtonGroup
-                sx={toggleTheme}
-                value={filterValue}
-                exclusive
-                onChange={handleChange}
-                aria-label="Platform"
-                >
-                {Object.entries(options).map(([value,option]) => (
-                    <ToggleButton key={value} value={value} sx={{height:"2em"}}>{option.text}</ToggleButton>
-                ))}
-            </ToggleButtonGroup>
-        </div>
-    )
-}
\ No newline at end of file
+export const ThreeOptionsSwitch = ({
+  filterValue,
+  setFilterValue,
+  options,
+  setQ,
+  keySearchTerm,
+  setCurrentPage,
+}: ThreeOptionsSwitchType) => {
+  const handleChange = (
+    event: React.MouseEvent<HTMLElement>,
+    newValue: string
+  ) => {
+    setFilterValue(newValue);
+    setCurrentPage(1);
+    let newFilterExpression = "";
+    if (newValue) {
+      // one of the options is selected
+      if (options[newValue].isNegated) {
+        newFilterExpression = ` is:not:${keySearchTerm}`;
+      } else {
+        newFilterExpression = ` is:${keySearchTerm}`;
+      }
+    }
+    setQ((prevQ) => {
+      prevQ = prevQ.replace(`is:not:${keySearchTerm}`, "");
+      prevQ = prevQ.replace(`is:${keySearchTerm}`, "");
+      return prevQ + newFilterExpression;
+    });
+  };
+  return (
+    <div style={{ display: "flex", flexDirection: "column" }}>
+      <Typography
+        variant="subtitle1"
+        gutterBottom
+        sx={{ mb: 0, m: "8px", color: "#341100" }}
+      >
+        Taxonomy
+      </Typography>
+      <ToggleButtonGroup
+        sx={toggleTheme}
+        value={filterValue}
+        exclusive
+        onChange={handleChange}
+        aria-label="Platform"
+      >
+        {Object.entries(options).map(([value, option]) => (
+          <ToggleButton key={value} value={value} sx={{ height: "2em" }}>
+            {option.text}
+          </ToggleButton>
+        ))}
+      </ToggleButtonGroup>
+    </div>
+  );
+};
diff --git a/taxonomy-editor-frontend/src/pages/project/search/index.tsx b/taxonomy-editor-frontend/src/pages/project/search/index.tsx
index a8912f3d..ba2c2dfd 100644
--- a/taxonomy-editor-frontend/src/pages/project/search/index.tsx
+++ b/taxonomy-editor-frontend/src/pages/project/search/index.tsx
@@ -62,7 +62,12 @@ export const AdvancedResearchForm = () => {
         filters={entryNodeSearchResult?.filters ?? []}
       />
       <AdvancedResearchResults
-        nodeIds={entryNodeSearchResult?.nodes.map((node) => node.id) ?? []}
+        nodeInfos={
+          entryNodeSearchResult?.nodes.map((node) => ({
+            id: node.id,
+            is_external: node.isExternal,
+          })) ?? []
+        }
         nodeCount={entryNodeSearchResult?.nodeCount}
         currentPage={currentPage}
         setCurrentPage={setCurrentPage}