feat(networks): navigate to search

client/src/pages/networks/components/clusters/button.tsx

@@ -1,9 +1,9 @@
 import { useIntl } from "react-intl"
-import { Button, ButtonGroup, Container } from "@dataesr/dsfr-plus"
+import { Button, ButtonGroup } from "@dataesr/dsfr-plus"
 import useSearchData from "../../hooks/useSearchData"
 import useIntegration from "../../hooks/useIntegration"
-import useScreenSize from "../../../../hooks/useScreenSize"
 import useOptions from "../../hooks/useOptions"
+import useScreenSize from "../../../../hooks/useScreenSize"
 
 export default function ClustersButton() {
   const intl = useIntl()
@@ -15,24 +15,22 @@ export default function ClustersButton() {
   if (integrationOptions.showClustersButton === false) return null
 
   return (
-    <Container fluid>
-      <ButtonGroup size="md">
-        <Button
-          iconPosition="right"
-          icon={parameters.clusters ? "arrow-up-line" : "arrow-down-line"}
-          onClick={() => handleParameterChange("clusters", !parameters.clusters)}
-          disabled={search.isFetching || Boolean(search.error)}
-        >
-          {intl.formatMessage({
-            id: parameters.clusters ? "networks.clusters.button.rm" : "networks.clusters.button.add",
-          })}
-        </Button>
-      </ButtonGroup>
-      {screen != "xs" && (
-        <p className="fr-text--xs fr-text-mention--grey">
-          {intl.formatMessage({ id: "networks.clusters.button.description" })}
-        </p>
-      )}
-    </Container>
+    <ButtonGroup size={["xs", "sm"].includes(screen) ? "sm" : "md"} className="fr-ml-1w">
+      <Button
+        title={intl.formatMessage({ id: "networks.clusters.button.description" })}
+        iconPosition="right"
+        icon={parameters.clusters ? "arrow-up-line" : "arrow-down-line"}
+        onClick={() => handleParameterChange("clusters", !parameters.clusters)}
+        disabled={search.isFetching || Boolean(search.error)}
+      >
+        {screen === "xs"
+          ? intl.formatMessage({
+              id: parameters.clusters ? "networks.clusters.button.rm.short" : "networks.clusters.button.add.short",
+            })
+          : intl.formatMessage({
+              id: parameters.clusters ? "networks.clusters.button.rm" : "networks.clusters.button.add",
+            })}
+      </Button>
+    </ButtonGroup>
   )
 }

client/src/pages/networks/components/clusters/index.tsx

@@ -1,6 +1,7 @@
 import { Col, Container, Row } from "@dataesr/dsfr-plus"
 import ClustersButton from "./button"
 import ContributeButton from "../contribute/button"
+import NavigateToSearch from "../navigate-to-search"
 import NetworkClustersItems from "./items"
 import NetworkAnalytics from "./analytics"
 import useIntegration from "../../hooks/useIntegration"
@@ -11,6 +12,7 @@ export default function NetworkClusters() {
     <Container fluid>
       {!integrationId ? (
         <Container fluid style={{ display: "flex", justifyContent: "space-between" }}>
+          <NavigateToSearch />
           <ClustersButton />
           <ContributeButton />
         </Container>

client/src/pages/networks/components/contribute/button.tsx

@@ -1,4 +1,4 @@
-import { Button, Container } from "@dataesr/dsfr-plus"
+import { Button, ButtonGroup } from "@dataesr/dsfr-plus"
 import { useIntl } from "react-intl"
 import useScreenSize from "../../../../hooks/useScreenSize"
 
@@ -8,7 +8,7 @@ export default function ContributeButton() {
   const search = window.location.search?.slice(1) || "q=*"
 
   return (
-    <Container fluid>
+    <ButtonGroup size={["xs", "sm"].includes(screen) ? "sm" : "md"}>
       <Button
         className="fr-ml-2w fr-pr-3w"
         as="a"
@@ -24,6 +24,6 @@ export default function ContributeButton() {
               id: "networks.contribute.button",
             })}
       </Button>
-    </Container>
+    </ButtonGroup>
   )
 }

client/src/pages/networks/components/navigate-to-search/index.tsx

@@ -0,0 +1,36 @@
+import { Button, ButtonGroup } from "@dataesr/dsfr-plus"
+import { useIntl } from "react-intl"
+import { useNavigate, useSearchParams } from "react-router-dom"
+import useOptions from "../../hooks/useOptions"
+import useScreenSize from "../../../../hooks/useScreenSize"
+
+export default function NavigateToSearch() {
+  const intl = useIntl()
+  const { screen } = useScreenSize()
+  const { currentSource } = useOptions()
+  const [searchParams] = useSearchParams()
+  const navigate = useNavigate()
+
+  const navigateToNetwork = () => {
+    const searchQuery = searchParams.get("q") ? `q=${searchParams.get("q")}` : ""
+    const searchFilters = searchParams.get("filters") ? `filters=${searchParams.get("filters")}` : ""
+    navigate(`/search/${currentSource}?${searchQuery}&${searchFilters}`)
+  }
+
+  return (
+    <ButtonGroup size={["xs", "sm"].includes(screen) ? "sm" : "md"} className="fr-mb-3w">
+      <Button
+        size="md"
+        color="blue-ecume"
+        variant="primary"
+        icon="arrow-left-line"
+        iconPosition="left"
+        onClick={navigateToNetwork}
+      >
+        {screen === "xs"
+          ? intl.formatMessage({ id: `networks.navigate-to-search.${currentSource}.short` })
+          : intl.formatMessage({ id: `networks.navigate-to-search.${currentSource}` })}
+      </Button>
+    </ButtonGroup>
+  )
+}

client/src/pages/networks/locales/en.json

@@ -74,7 +74,7 @@
     "networks.filters.button.label": "Filters",
     "networks.clusters.button.rm": "Hide communities* information",
     "networks.clusters.button.add": "Display communities* information",
-    "networks.clusters.button.description": "* Using the Louvain method. Community labels are then calculated by generative AI from the community's corpus of publications.",
+    "networks.clusters.button.description": "* Using the Louvain method. Community labels are then calculated by generative AI from the community's corpus of documents.",
     "networks.search.error204.title": "No Result",
     "networks.search.error204.text": "This search returns no data.",
     "networks.exports.title": "Export",
@@ -162,5 +162,9 @@
     "networks.section.clusters.badge-publications": "Publications",
     "networks.section.clusters.see-more": "See more ({count})",
     "networks.section.clusters.see-less": "Show less",
-    "networks.contribute.button": "Report an error"
+    "networks.contribute.button": "Report an error",
+    "networks.navigate-to-search.publications": "Search associated publications",
+    "networks.navigate-to-search.publications.short": "Associated publications",
+    "networks.navigate-to-search.patents": "Search associated patents",
+    "networks.navigate-to-search.patents.short": "Search associated patents"
 }

client/src/pages/networks/locales/fr.json

@@ -75,8 +75,10 @@
     "networks.parameters.modal.display": "Afficher le réseau",
     "networks.parameters.modal.reset": "Réinitialiser les paramètres",
     "networks.clusters.button.rm": "Masquer les informations des communautés*",
+    "networks.clusters.button.rm.short": "Masquer les communautés*",
     "networks.clusters.button.add": "Afficher les informations des communautés*",
-    "networks.clusters.button.description": "* Par la méthode de Louvain. Les labels des communautés sont ensuite calculés par IA générative à partir du corpus des publications de la communauté.",
+    "networks.clusters.button.add.short": "Afficher les communautés*",
+    "networks.clusters.button.description": "* Par la méthode de Louvain. Les labels des communautés sont ensuite calculés par IA générative à partir du corpus de documents de la communauté.",
     "networks.search.error204.title": "Pas de résultat",
     "networks.search.error204.text": "Cette recherche ne retourne aucune donnée.",
     "networks.exports.title": "Exporter",
@@ -166,5 +168,9 @@
     "networks.section.clusters.badge-publications": "Publications",
     "networks.section.clusters.see-more": "En voir plus ({count})",
     "networks.section.clusters.see-less": "Réduire",
-    "networks.contribute.button": "Signaler une erreur"
+    "networks.contribute.button": "Signaler une erreur",
+    "networks.navigate-to-search.publications": "Rechercher les publications associées",
+    "networks.navigate-to-search.publications.short": "Publications associées",
+    "networks.navigate-to-search.patents": "Rechercher les brevets associés",
+    "networks.navigate-to-search.patents.short": "Brevets associés"
 }