feat: add filters explanations

src/Gargantext/Components/Forest/Tree/Node/Action/Search.purs

@@ -62,12 +62,13 @@ actionSearchWithLangsCpt = here.component "actionSearchWithLangs" cpt
   cpt { dispatch, id, langs, session } _ = do
     { errors } <- Store.use
     search <- T.useBox $ defaultSearch { node_id = id }
-    pure $ R.fragment
-      [ H.p { className: "action-search mx-2" }
+    pure $ H.div { className: "m-2" }
+      [ H.p { className: "action-search child" }
           [ H.text $ "Search and create a private "
               <> "corpus with the search query as corpus name."
           ]
-      , H.form { className: "search-bar m-2" }
+
+      , H.form { className: "search-bar child" }
           [ searchFormContent
               { databases: allDatabases
               , errors
@@ -79,6 +80,7 @@ actionSearchWithLangsCpt = here.component "actionSearchWithLangs" cpt
               []
           ]
       ]
+
     where
     searchOn
       :: (Action -> Aff Unit)

src/Gargantext/Components/Forest/Tree/Node/Action/Search/SearchForm.purs

@@ -3,6 +3,7 @@ module Gargantext.Components.Forest.Tree.Node.Action.Search.SearchForm where
 import Gargantext.Prelude
 
 import Affjax.RequestHeader (value)
+import CSS.Elements (thead)
 import Data.Array as A
 import Data.Maybe (Maybe(..), maybe, fromMaybe)
 import Data.Newtype (over)
@@ -28,6 +29,7 @@ import Gargantext.Sessions (Session(..))
 import Gargantext.Types (FrontendError)
 import Gargantext.Types as GT
 import Gargantext.Utils.Reactix as R2
+import React.DOM.Dynamic (blockquote)
 import Reactix as R
 import Reactix.DOM.HTML as H
 import Toestand as T
@@ -613,17 +615,34 @@ type SearchInputProps =
   )
 
 filtersExplanation :: R.Element
-filtersExplanation = H.div { className: "container mt-5" }
-  [ H.div { className: "alert alert-info" }
-      [ H.text "To apply multiple filters in OpenAlex, separate each condition with commas. For example, to find works authored by \"John Doe\" from \"Harvard University\" published in 2023, the query would be structured as:" ]
-  , H.pre { className: "bg-light-2" }
-      [ H.code {}
+filtersExplanation = H.details { display: "inline-block", width: "100%", className: "flex-fill" }
+  [ H.summary { style: { cursor: "pointer", backgroundColor: "0.3s" }, className: "flex-fill" }
+      [ H.i { className: "fa fa-question-circle-o" } []
+      , H.text " How to add filters ?"
+      ]
+  , H.div { className: "alert alert-info" }
+      [ H.p {}
+          [ H.text
+              """
+                To apply filters, the first thing to do is to define your search query using the OpenAlex search bar  
+              """
+          , H.a { href: "https://openalex.org/works", className: "alert-link" } [ H.text "available at this address. " ]
+          ]
+      , H.p {}
+          [ H.text
+              """
+                Once you are done, copy and paste here the filter parameters you'll find in the url (after the 'filter='). It should look like that:
+              """
+          ]
+      , H.code {}
           [ H.text "authorships.author.id%3Aa5109346276,authorships.institutions.lineage%3Ai57206974"
           ]
+      , H.p {}
+          [ H.a { href: "https://docs.openalex.org/how-to-use-the-api/get-lists-of-entities/filter-entity-lists", className: "alert-link" }
+              [ H.text "Click here to learn more about filters composition."
+              ]
+          ]
       ]
-  , H.text "This syntax allows you to combine multiple filters as an "
-  , H.strong {} [ H.text "AND" ]
-  , H.text " query, ensuring all conditions are met in the results."
   ]
 
 filtersInput :: R2.Component SearchInputProps
@@ -634,9 +653,9 @@ filtersInputCpt =
   let
     cpt { search } _ = do
       state <- T.useLive T.unequal search
-      pure $ H.div { className: "form-group px-1" }
+      pure $ H.div { className: "form-group px-1 flex-fill" }
         [ H.label { className: "form-group__label", htmlFor: "filters-openalex-input" }
-            [ filtersExplanation
+            [
             ]
         , H.input
             { id: "filters-openalex-input"
@@ -645,15 +664,14 @@ filtersInputCpt =
             , on: { change: (\e -> T.modify_ (_ { filters = e.target.value }) search) }
             , placeholder: "Add filters"
             , type: "text"
+            , ariaDescribedBy: "filters-help-block"
             }
+        , H.span { className: "form-text text-muted", id: "filters-help-block" } [ filtersExplanation ]
 
         ]
   in
     here.component "filtersInput" cpt
 
--- Je veux un composant input qui apparait quand on click sur le datasource openalex
--- quand un texte est entré je veux qu'il soit enregistré dans 
-
 searchInput :: R2.Component SearchInputProps
 searchInput = R.createElement searchInputCpt