Merge commit '18cfad4dae105e4397d5861256ba6c7e3346b992' into staging

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

@@ -1,11 +1,15 @@
 import { Badge, Button } from "@dataesr/dsfr-plus"
 import useScreenSize from "../../../../hooks/useScreenSize"
 import useUrl from "../../../search/hooks/useUrl"
+import useIntegration from "../../hooks/useIntegration"
 
 export default function NetworkFiltersButton() {
   const { screen } = useScreenSize()
+  const { integrationOptions } = useIntegration()
   const { currentFilters } = useUrl()
 
+  if (integrationOptions.showFilters === false) return null
+
   return (
     <Button
       className="fr-mt-1w fr-mr-1w"

client/src/pages/networks/components/options-bar/index.tsx

@@ -6,9 +6,13 @@ import NetworkSelectSourceButton from "../select-source/button"
 import NetworkFiltersButton from "../filters/button"
 import NetworkParametersButton from "../parameters/button"
 import useScreenSize from "../../../../hooks/useScreenSize"
+import useIntegration from "../../hooks/useIntegration"
 
 export default function NetworksOptionsBar() {
   const { screen } = useScreenSize()
+  const { integrationOptions } = useIntegration()
+
+  if (integrationOptions.showOptionsBar === false) return null
 
   return (
     <Container className="fr-mb-2w">

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

@@ -1,11 +1,15 @@
 import { Button } from "@dataesr/dsfr-plus"
 import useScreenSize from "../../../../hooks/useScreenSize"
 import { useIntl } from "react-intl"
+import useIntegration from "../../hooks/useIntegration"
 
 export default function NetworkParametersButton() {
   const intl = useIntl()
+  const { integrationOptions } = useIntegration()
   const { screen } = useScreenSize()
 
+  if (integrationOptions.showParameters === false) return null
+
   return (
     <Button
       className="fr-mt-1w fr-mr-1w"

client/src/pages/networks/components/search-bar/button.tsx

@@ -1,13 +1,17 @@
 import { Button } from "@dataesr/dsfr-plus"
 import useUrl from "../../../search/hooks/useUrl"
 import { useIntl } from "react-intl"
+import useIntegration from "../../hooks/useIntegration"
 
 export default function NetworkSearchBarButton() {
   const intl = useIntl()
+  const { integrationOptions } = useIntegration()
   const { currentQuery } = useUrl()
   const isEmptyQuery = !currentQuery || currentQuery === "*"
   const shortQuery = (currentQuery?.length || 0) > 20 ? currentQuery.slice(0, 17) + "..." : currentQuery
 
+  if (integrationOptions.showSearchBar === false) return null
+
   return (
     <Button
       className="fr-mt-1w fr-mr-1w"

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

@@ -1,3 +1,4 @@
+import { useState, useEffect } from "react"
 import { Container, SearchBar, Tag, TagGroup, Text } from "@dataesr/dsfr-plus"
 import Modal from "../../../../components/modal"
 import useUrl from "../../../search/hooks/useUrl"
@@ -8,7 +9,19 @@ import { networkQuery } from "../../config/query"
 export default function NetworkSearchBarModal() {
   const intl = useIntl()
   const { currentQuery, handleQueryChange } = useUrl()
-  const { expansions } = useSearchExpansion()
+  const [query, setQuery] = useState(currentQuery)
+  const [debouncedQuery, setDebouncedQuery] = useState(query)
+  const { expansions } = useSearchExpansion(debouncedQuery)
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedQuery(query)
+    }, 1000)
+
+    return () => {
+      clearTimeout(timer)
+    }
+  }, [query])
 
   const id = "networks-options-search-bar-modal"
 
@@ -20,6 +33,7 @@ export default function NetworkSearchBarModal() {
           buttonLabel={intl.formatMessage({ id: "networks.search-bar.button-label" })}
           defaultValue={currentQuery || ""}
           placeholder={intl.formatMessage({ id: "networks.search-bar.placeholder" })}
+          onChange={(event) => setQuery((event.target as HTMLInputElement).value)}
           onSearch={(value) => {
             handleQueryChange(networkQuery(value))
             // @ts-expect-error dsfr does not have types

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

@@ -1,11 +1,15 @@
 import { Button } from "@dataesr/dsfr-plus"
 import useTab from "../../hooks/useTab"
 import { useIntl } from "react-intl"
+import useIntegration from "../../hooks/useIntegration"
 
 export default function NetworkSelectModelButton() {
   const intl = useIntl()
+  const { integrationOptions } = useIntegration()
   const { currentTab } = useTab()
 
+  if (integrationOptions.showSelectModel === false) return null
+
   return (
     <Button
       className="fr-mt-1w fr-mr-1w"

client/src/pages/networks/components/select-model/index.tsx

@@ -9,7 +9,7 @@ export default function NetworkSelectModel() {
   const { currentTab, handleTabChange } = useTab()
   const { integrationOptions } = useIntegration()
 
-  if (integrationOptions?.showSelect === false) return null
+  if (integrationOptions?.showSelectModel === false) return null
 
   return (
     <Select

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

@@ -1,6 +1,11 @@
 import { Button } from "@dataesr/dsfr-plus"
+import useIntegration from "../../hooks/useIntegration"
 
 export default function NetworkSelectSourceButton() {
+  const { integrationOptions } = useIntegration()
+
+  if (integrationOptions.showSelectSource === false) return null
+
   return (
     <Button
       className="fr-mt-1w fr-mr-1w"

client/src/pages/networks/components/select-source/index.tsx

@@ -6,7 +6,7 @@ export default function NetworkSelectSource() {
   const intl = useIntl()
   const { integrationOptions } = useIntegration()
 
-  if (integrationOptions?.showSelect === false) return null
+  if (integrationOptions?.showSelectSource === false) return null
 
   return (
     <Select

client/src/pages/networks/hooks/useIntegration.ts

@@ -14,16 +14,18 @@ export default function useIntegration() {
   const integrationOptions: NetworksIntegrationOptions = isIntegration
     ? {
         showGraphOnly: getBooleanParam(searchParams.get("showGraphOnly"), false),
+        showHeader: getBooleanParam(searchParams.get("showHeader")),
+        showBreadcrumb: false,
         showTitle: getBooleanParam(searchParams.get("showTitle")),
-        showSubtitle: getBooleanParam(searchParams.get("showSubtitle")),
-        showClustersAnalytics: getBooleanParam(searchParams.get("showClustersAnalytics")),
-        showClustersButton: getBooleanParam(searchParams.get("showClustersButton")),
-        showSearchBar: getBooleanParam(searchParams.get("useSearch")),
+        showOptionsBar: getBooleanParam(searchParams.get("showOptionsBar")),
+        showSearchBar: getBooleanParam(searchParams.get("showSearchBar")),
+        showSelectModel: getBooleanParam(searchParams.get("showSelectModel")),
+        showSelectSource: getBooleanParam(searchParams.get("showSelectSource")),
         showFilters: getBooleanParam(searchParams.get("showFilters")),
+        showParameters: getBooleanParam(searchParams.get("showParameters")),
         showExports: getBooleanParam(searchParams.get("showExports")),
-        showBreadcrumb: false,
-        showSelect: getBooleanParam(searchParams.get("showSelect")),
-        showHeader: getBooleanParam(searchParams.get("showHeader")),
+        showClustersButton: getBooleanParam(searchParams.get("showClustersButton")),
+        showClustersAnalytics: getBooleanParam(searchParams.get("showClustersAnalytics")),
         graphHeight: searchParams.get("graphHeight") || DEFAULT_INTEGRATION.graphHeight,
       }
     : DEFAULT_INTEGRATION

client/src/pages/networks/hooks/useSearchExpansion.ts

@@ -3,17 +3,18 @@ import useUrl from "../../search/hooks/useUrl"
 import { mistralAgentCompletion } from "../../../api/networks/network/mistralai"
 import { useMemo } from "react"
 
-export default function useSearchExpansion() {
+export default function useSearchExpansion(forcedQuery?: string) {
   const { currentQuery } = useUrl()
+  const query = forcedQuery || currentQuery
 
   const { data, error, isFetching } = useQuery({
-    queryKey: ["network", "expansion", currentQuery],
+    queryKey: ["network", "expansion", query],
     queryFn: () =>
       mistralAgentCompletion({
-        query: currentQuery,
+        query: query,
         agentId: "ag:03ee88d7:20241211:extend-search:042576a9",
       }),
-    enabled: currentQuery?.length > 3,
+    enabled: query?.length > 3,
   })
 
   const values = useMemo(() => {

client/src/pages/networks/integration/config.ts

@@ -1,19 +1,21 @@
 import { useSuspenseQuery } from "@tanstack/react-query"
 import { useMemo } from "react"
+import { NetworksIntegrationOptions } from "../../../types/network"
 
-
-export const DEFAULT_INTEGRATION = {
+export const DEFAULT_INTEGRATION: NetworksIntegrationOptions = {
   showGraphOnly: false,
+  showHeader: true,
+  showBreadcrumb: true,
   showTitle: true,
-  showSubtitle: true,
-  showClustersAnalytics: true,
-  showClustersButton: true,
+  showOptionsBar: true,
   showSearchBar: true,
+  showSelectModel: true,
+  showSelectSource: true,
   showFilters: true,
+  showParameters: true,
   showExports: true,
-  showBreadcrumb: true,
-  showSelect: true,
-  showHeader: true,
+  showClustersButton: true,
+  showClustersAnalytics: true,
   graphHeight: "600px",
 }
 

client/src/pages/trends/components/filters/button.tsx

@@ -2,12 +2,16 @@ import { Badge, Button } from "@dataesr/dsfr-plus"
 import useScreenSize from "../../../../hooks/useScreenSize"
 import useUrl from "../../../search/hooks/useUrl"
 import { useIntl } from "react-intl"
+import useIntegration from "../../hooks/useIntegration"
 
 export default function TrendsFiltersButton() {
   const intl = useIntl()
+  const { integrationOptions } = useIntegration()
   const { screen } = useScreenSize()
   const { currentFilters } = useUrl()
 
+  if (integrationOptions.showFilters === false) return null
+
   return (
     <Button
       className="fr-mt-1w fr-mr-1w"

client/src/pages/trends/components/header/index.tsx

@@ -1,8 +1,13 @@
 import { Breadcrumb, Container, Link, Title } from "@dataesr/dsfr-plus"
 import { useIntl } from "react-intl"
+import useIntegration from "../../hooks/useIntegration"
+import { getBsoLocals } from "../../../networks/integration/config"
 
-function TrendsBreadcrum() {
+function TrendsBreadcrumb() {
   const intl = useIntl()
+  const { integrationOptions } = useIntegration()
+
+  if (integrationOptions.showBreadcrumb === false) return null
 
   return (
     <Breadcrumb className="fr-mt-0 fr-mb-2w">
@@ -14,21 +19,33 @@ function TrendsBreadcrum() {
 
 function TrendsTitle() {
   const intl = useIntl()
+  const { integrationId, integrationOptions } = useIntegration()
+
+  if (integrationOptions.showTitle === false) return null
+
+  const locals = integrationId ? getBsoLocals() : {}
+  const comment: string =
+    (intl.locale === "en" ? locals?.[integrationId]?.commentsNameEN : locals?.[integrationId]?.commentsName) ||
+    (integrationId ? `${intl.formatMessage({ id: "networks.header.title.perimeter" })} ${integrationId}` : "")
 
   return (
     <Container fluid className="fr-mb-2w">
       <Title as="h4" className="fr-mb-1w">
-        {intl.formatMessage({ id: "trends.header.title" })}
+        {intl.formatMessage({ id: "trends.header.title" })} {comment}
       </Title>
     </Container>
   )
 }
 
 export default function TrendsHeader() {
+  const { integrationOptions } = useIntegration()
+
+  if (integrationOptions.showHeader === false) return null
+
   return (
     <Container className="bg-trends fr-mb-1w" fluid>
       <Container className="fr-pt-4w fr-pb-1v">
-        <TrendsBreadcrum />
+        <TrendsBreadcrumb />
         <TrendsTitle />
       </Container>
     </Container>

client/src/pages/trends/components/options-bar/index.tsx

@@ -5,9 +5,13 @@ import TrendsSelectModelButton from "../select-model/button"
 import TrendsSelectSourceButton from "../select-source/button"
 import TrendsFiltersButton from "../filters/button"
 import TrendsParametersButton from "../parameters/button"
+import useIntegration from "../../hooks/useIntegration"
 
 export default function TrendsOptionsBar() {
   const { screen } = useScreenSize()
+  const { integrationOptions } = useIntegration()
+
+  if (integrationOptions.showOptionsBar === false) return null
 
   return (
     <Container className="fr-mb-2w">