Merge commit '9ca8095f9086a02b61128f1ed9cd7f5420bf631d' into staging

client/src/pages/trends/components/panel/item/index.tsx

@@ -38,7 +38,7 @@ export default function TrendsViewItem({ item }) {
       >
         <Row style={{ width: "100%" }} verticalAlign="middle">
           <Col sm="8" md="4" lg="4">
-            <Row horizontalAlign="center">
+            <Row horizontalAlign="left">
               <div>{item.label}</div>
             </Row>
           </Col>

client/src/pages/trends/components/parameters/toggle-normalize/index.tsx

@@ -1,10 +1,10 @@
 import { Toggle } from "@dataesr/dsfr-plus"
-import { useTrendsContext } from "../../../context"
 import { useIntl } from "react-intl"
+import useOptions from "../../../hooks/useOptions"
 
 export default function ToggleNormalize() {
   const intl = useIntl()
-  const { normalized, setNormalized } = useTrendsContext()
+  const { normalized, setNormalized } = useOptions()
 
   return (
     <Toggle

client/src/pages/trends/components/search-bar/modal.tsx

@@ -1,18 +1,28 @@
-import { Container } from "@dataesr/dsfr-plus"
+import { Container, SearchBar } from "@dataesr/dsfr-plus"
 import Modal from "../../../../components/modal"
-import TrendsSearchBar from "."
 import { useIntl } from "react-intl"
+import useUrl from "../../../search/hooks/useUrl"
 
 export default function TrendsSearchBarModal() {
   const intl = useIntl()
+  const { currentQuery, handleQueryChange } = useUrl()
+
   return (
     <Modal
       id={"trends-options-search-bar-modal"}
       size="lg"
       title={intl.formatMessage({ id: "trends.search-bar.modal.title" })}
     >
       <Container fluid className="fr-mb-4w">
-        <TrendsSearchBar />
+        <SearchBar
+          key={currentQuery}
+          buttonLabel={intl.formatMessage({ id: "trends.search-bar.button-label" })}
+          defaultValue={currentQuery}
+          placeholder={intl.formatMessage({ id: "trends.search-bar.placeholder" })}
+          onSearch={(value) => {
+            handleQueryChange(value)
+          }}
+        />
       </Container>
     </Modal>
   )

client/src/pages/trends/components/select-model/button.tsx

@@ -1,14 +1,14 @@
 import { Button } from "@dataesr/dsfr-plus"
 import { useIntl } from "react-intl"
-import { useTrendsContext } from "../../context"
 import useIntegration from "../../hooks/useIntegration"
 import useScreenSize from "../../../../hooks/useScreenSize"
+import useOptions from "../../hooks/useOptions"
 
 export default function TrendsSelectModelButton() {
   const intl = useIntl()
   const { screen } = useScreenSize()
   const { integrationOptions } = useIntegration()
-  const { model } = useTrendsContext()
+  const { currentModel } = useOptions()
 
   if (integrationOptions.showSelectModel === false) return null
 
@@ -22,7 +22,7 @@ export default function TrendsSelectModelButton() {
       data-fr-opened="false"
       variant="secondary"
     >
-      {["xs", "sm"].includes(screen) ? null : intl.formatMessage({ id: `trends.select-model.${model}` })}
+      {["xs", "sm"].includes(screen) ? null : intl.formatMessage({ id: `trends.select-model.${currentModel}` })}
     </Button>
   )
 }

client/src/pages/trends/components/select-model/modal.tsx

@@ -1,26 +1,22 @@
 import { Container, Listbox, ListboxItem } from "@dataesr/dsfr-plus"
-import Modal from "../../../../components/modal"
 import { useIntl } from "react-intl"
-import { useTrendsContext } from "../../context"
-import { getOpenAlexMapping } from "../../config/openalex"
+import Modal from "../../../../components/modal"
+import useOptions from "../../hooks/useOptions"
 
 export default function TrendsSelectModelModal() {
   const intl = useIntl()
-  const { model, setModel } = useTrendsContext()
+  const { currentModel, handleModelChange } = useOptions()
   const id = "trends-options-select-model-modal"
 
-  const openAlexMapping = getOpenAlexMapping()
-  console.log(openAlexMapping)
-
   return (
     <Modal id={id} size="lg" title={intl.formatMessage({ id: "trends.select-model.modal.title" })}>
       <Container fluid className="fr-mb-4w">
         <Listbox
-          selectedKeys={[model]}
+          selectedKeys={[currentModel]}
           selectionMode="single"
           onSelectionChange={(value) => {
             const selected = Object.values(value)[0]
-            selected && setModel(selected)
+            selected && handleModelChange(selected)
             // @ts-expect-error dsfr does not have types
             window.dsfr(document.getElementById(id)).modal.conceal()
           }}

client/src/pages/trends/components/select-source/button.tsx

@@ -1,28 +1,28 @@
 import { Button } from "@dataesr/dsfr-plus"
 import { useIntl } from "react-intl"
-import { useTrendsContext } from "../../context"
 import useIntegration from "../../hooks/useIntegration"
 import useScreenSize from "../../../../hooks/useScreenSize"
+import useOptions from "../../hooks/useOptions"
 
 export default function TrendsSelectSourceButton() {
   const intl = useIntl()
   const { screen } = useScreenSize()
   const { integrationOptions } = useIntegration()
-  const { source } = useTrendsContext()
+  const { currentSource } = useOptions()
 
   if (integrationOptions.showSelectSource === false) return null
 
   return (
     <Button
       className="fr-mt-1w fr-mr-1w"
-      icon={source === "publications" ? "article-line" : "chat-3-line"}
+      icon={currentSource === "publications" ? "article-line" : "chat-3-line"}
       iconPosition="left"
       as="button"
       aria-controls="trends-options-select-source-modal"
       data-fr-opened="false"
       variant="secondary"
     >
-      {["xs", "sm"].includes(screen) ? null : intl.formatMessage({ id: `trends.select-source.${source}` })}
+      {["xs", "sm"].includes(screen) ? null : intl.formatMessage({ id: `trends.select-source.${currentSource}` })}
     </Button>
   )
 }

client/src/pages/trends/components/select-source/modal.tsx

@@ -1,22 +1,22 @@
 import { Container, Listbox, ListboxItem } from "@dataesr/dsfr-plus"
-import Modal from "../../../../components/modal"
 import { useIntl } from "react-intl"
-import { useTrendsContext } from "../../context"
+import Modal from "../../../../components/modal"
+import useOptions from "../../hooks/useOptions"
 
 export default function TrendsSelectSourceModal() {
   const intl = useIntl()
-  const { source, setSource } = useTrendsContext()
+  const { currentSource, handleSourceChange } = useOptions()
   const id = "trends-options-select-source-modal"
 
   return (
     <Modal id={id} size="lg" title={intl.formatMessage({ id: "trends.select-source.modal.title" })}>
       <Container fluid className="fr-mb-4w">
         <Listbox
-          selectedKeys={[source]}
+          selectedKeys={[currentSource]}
           selectionMode="single"
           onSelectionChange={(value) => {
             const selected = Object.values(value)[0]
-            selected && setSource(selected)
+            selected && handleSourceChange(selected)
             // @ts-expect-error dsfr does not have types
             window.dsfr(document.getElementById(id)).modal.conceal()
           }}

client/src/pages/trends/hooks/useOptions.ts

@@ -0,0 +1,39 @@
+import { useCallback, useMemo } from "react"
+import { useSearchParams } from "react-router-dom"
+import { getBooleanParam } from "../../networks/utils"
+
+export default function useOptions() {
+  const [searchParams, setSearchParams] = useSearchParams()
+  const currentModel = searchParams.get("model") || "entity-fishing"
+  const currentSource = searchParams.get("source") || "publications"
+  const normalized = getBooleanParam(searchParams.get("normalized"), false)
+
+  const handleModelChange = useCallback(
+    (model: string) => {
+      searchParams.set("model", model)
+      setSearchParams(searchParams)
+    },
+    [searchParams, setSearchParams]
+  )
+
+  const handleSourceChange = useCallback(
+    (source: string) => {
+      searchParams.set("source", source)
+      setSearchParams(searchParams)
+    },
+    [searchParams, setSearchParams]
+  )
+
+  const setNormalized = useCallback(
+    (normalized: boolean) => {
+      searchParams.set("normalized", normalized ? "true" : "false")
+      setSearchParams(searchParams)
+    },
+    [searchParams, setSearchParams]
+  )
+
+  const values = useMemo(() => {
+    return { currentModel, handleModelChange, currentSource, handleSourceChange, normalized, setNormalized }
+  }, [currentModel, handleModelChange, currentSource, handleSourceChange, normalized, setNormalized])
+  return values
+}

client/src/pages/trends/hooks/useTrends.ts

@@ -1,10 +1,10 @@
 import { useMemo } from "react"
 import { useQuery } from "@tanstack/react-query"
 import { getCitationsTrends, getPublicationsTrends } from "../../../api/trends/publications"
-import { useTrendsContext } from "../context"
 import useUrl from "../../search/hooks/useUrl"
 import { MAX_YEAR, MIN_YEAR } from "../config/years"
 import { rangeArray } from "../../../utils/helpers"
+import useOptions from "./useOptions"
 
 const API_MAPPING = {
   publications: getPublicationsTrends,
@@ -13,18 +13,18 @@ const API_MAPPING = {
 
 export default function useTrends() {
   const { currentQuery, currentFilters, filters } = useUrl()
-  const { model, source, normalized } = useTrendsContext()
+  const { currentModel, currentSource, normalized } = useOptions()
 
   const trendsYears = {
     min: Number(currentFilters?.year?.values?.[0]?.value || MIN_YEAR),
     max: Number(currentFilters?.year?.values?.[1]?.value || MAX_YEAR),
   }
 
   const { data, error, isFetching } = useQuery({
-    queryKey: ["trends", source, model, currentQuery, model, filters, normalized],
+    queryKey: ["trends", currentSource, currentModel, currentQuery, currentModel, filters, normalized],
     queryFn: () =>
-      API_MAPPING[source]({
-        model: model,
+      API_MAPPING[currentSource]({
+        model: currentModel,
         query: currentQuery,
         years: rangeArray(trendsYears.min, trendsYears.max),
         filters: filters,

client/src/pages/trends/layout/index.tsx

@@ -4,7 +4,6 @@ import TrendsView from "../components/panel"
 import TrendsOptionsBar from "../components/options-bar"
 import TrendsOptionsModals from "../components/options-bar/modals"
 import useIntegration from "../hooks/useIntegration"
-import TrendsEvolutionChart from "../components/evolution-chart"
 
 export default function TrendsLayout() {
   const { integrationOptions } = useIntegration()
@@ -19,7 +18,6 @@ export default function TrendsLayout() {
       <Container>
         <TrendsView />
       </Container>
-      <TrendsEvolutionChart />
     </Container>
   )
 }