[config] Store Graph Sidepanel expand/hide choice

* #403

dist/styles/bootstrap-darkster.css

@@ -9463,6 +9463,11 @@ select.form-control {
 .phylo-selection-tab__counter__value {
   color: #0F81C7;
 }
+.phylo-selection-tab__counter__expand {
+  position: absolute;
+  right: 1.25rem;
+  bottom: 1rem;
+}
 .phylo-selection-tab__nil {
   margin: 16px 20px;
 }

dist/styles/bootstrap-default.css

@@ -9416,6 +9416,11 @@ select.form-control {
 .phylo-selection-tab__counter__value {
   color: #17a2b8;
 }
+.phylo-selection-tab__counter__expand {
+  position: absolute;
+  right: 1.25rem;
+  bottom: 1rem;
+}
 .phylo-selection-tab__nil {
   margin: 16px 20px;
 }

dist/styles/bootstrap-greyson.css

@@ -9172,6 +9172,11 @@ select.form-control {
 .phylo-selection-tab__counter__value {
   color: #5c8f94;
 }
+.phylo-selection-tab__counter__expand {
+  position: absolute;
+  right: 1.25rem;
+  bottom: 1rem;
+}
 .phylo-selection-tab__nil {
   margin: 16px 20px;
 }

dist/styles/bootstrap-herbie.css

@@ -9420,6 +9420,11 @@ select.form-control {
 .phylo-selection-tab__counter__value {
   color: #74DBEF;
 }
+.phylo-selection-tab__counter__expand {
+  position: absolute;
+  right: 1.25rem;
+  bottom: 1rem;
+}
 .phylo-selection-tab__nil {
   margin: 16px 20px;
 }

dist/styles/bootstrap-monotony.css

@@ -9421,6 +9421,11 @@ select.form-control {
 .phylo-selection-tab__counter__value {
   color: #515151;
 }
+.phylo-selection-tab__counter__expand {
+  position: absolute;
+  right: 1.25rem;
+  bottom: 1rem;
+}
 .phylo-selection-tab__nil {
   margin: 16px 20px;
 }

src/Gargantext/Components/GraphExplorer/Sidebar/Sidebar.purs

@@ -32,10 +32,11 @@ import Gargantext.Components.NgramsTable.Core as NTC
 import Gargantext.Config.REST (AffRESTError)
 import Gargantext.Data.Array (mapMaybe)
 import Gargantext.Ends (Frontends)
+import Gargantext.Hooks.FirstEffect (useFirstEffect')
 import Gargantext.Hooks.Sigmax.Types as SigmaxT
 import Gargantext.Sessions (Session)
 import Gargantext.Types (CTabNgramType, FrontendError(..), NodeID, TabSubType(..), TabType(..), TermList(..), modeTabType)
-import Gargantext.Utils (nbsp, (?))
+import Gargantext.Utils (nbsp, setter, (?))
 import Gargantext.Utils.Reactix as R2
 import Gargantext.Utils.Toestand as T2
 import Math as Math
@@ -258,23 +259,33 @@ selectedNodes = R2.leaf selectedNodesCpt
 selectedNodesCpt :: R.Component SelectedNodesProps
 selectedNodesCpt = here.component "selectedNodes" cpt where
   cpt props _ = do
-    -- States
+    -- | States
+    -- |
     { selectedNodeIds
     , graph
-    , showNGramsActions
+    , expandSelection
     } <- GraphStore.use
 
-    showNGramsActions'  <- R2.useLive' showNGramsActions
     selectedNodeIds'    <- R2.useLive' selectedNodeIds
     graph'              <- R2.useLive' graph
+    expandSelection'    <- R2.useLive' expandSelection
 
-    -- Behaviors
+    -- | Effects
+    -- |
+
+    -- transfer local Component change to Local Storage cache
+    useFirstEffect' $
+      flip T.listen expandSelection onExpandSelectionChange
+
+    -- | Behaviors
+    -- |
     let
       onBadgeClick id _ = T.write_ (Set.singleton id) selectedNodeIds
 
-      onExpandClick _ = T.modify_ (not) showNGramsActions
+      onExpandClick _ = T.modify_ (not) expandSelection
 
-    -- Render
+    -- | Render
+    -- |
     pure $
 
       H.ul
@@ -308,7 +319,7 @@ selectedNodesCpt = here.component "selectedNodes" cpt where
         ,
           -- Expand NGrams actions
           B.iconButton
-          { name: showNGramsActions' ?
+          { name: expandSelection' ?
               "caret-up" $
               "caret-down"
           , className: "graph-selected-nodes__expand"
@@ -317,7 +328,7 @@ selectedNodesCpt = here.component "selectedNodes" cpt where
         ]
       ,
         -- NGrams actions
-        R2.when showNGramsActions' $
+        R2.when expandSelection' $
 
           H.li
           { className: intercalate " "
@@ -362,6 +373,12 @@ selectedNodesCpt = here.component "selectedNodes" cpt where
           ]
       ]
 
+onExpandSelectionChange :: T.Change Boolean -> Effect Unit
+onExpandSelectionChange { new } = do
+  cache <- R2.loadLocalStorageState' R2.graphParamsKey GET.defaultCacheParams
+  let update = setter (_ { expandSelection = new }) cache
+  R2.setLocalStorageState R2.graphParamsKey update
+
 ---------------------------------------------------------
 
 neighborhood :: R2.Leaf ()
@@ -370,17 +387,18 @@ neighborhood = R2.leaf neighborhoodCpt
 neighborhoodCpt :: R.Memo ()
 neighborhoodCpt = R.memo' $ here.component "neighborhood" cpt where
   cpt _ _ = do
-    -- States
+    -- | States
+    -- |
     { selectedNodeIds
     , graph
-    , showWordCloud
+    , expandNeighborhood
     } <- GraphStore.use
 
     selectedNodeIds' <-
       R2.useLive' selectedNodeIds
 
-    showWordCloud' <-
-      R2.useLive' showWordCloud
+    expandNeighborhood' <-
+      R2.useLive' expandNeighborhood
 
     graph' <-
       R2.useLive' graph
@@ -394,7 +412,8 @@ neighborhoodCpt = R.memo' $ here.component "neighborhood" cpt where
     termCount /\ termCountBox <-
       R2.useBox' 0
 
-    -- Computed
+    -- | Computed
+    -- |
     let
       minSize = F.foldl Math.min 0.0 (Seq.map _.size (SigmaxT.graphNodes graph'))
 
@@ -405,13 +424,20 @@ neighborhoodCpt = R.memo' $ here.component "neighborhood" cpt where
       withTruncateResults = (termCount > maxTruncateResult) && (not showMore)
 
 
-    -- Behaviors
+    -- | Behaviors
+    -- |
     let
       onBadgeClick id _ = T.write_ (Set.singleton id) selectedNodeIds
 
-      onExpandClick _ = T.modify_ (not) showWordCloud
+      onExpandClick _ = T.modify_ (not) expandNeighborhood
+
+    -- | Effects
+    -- |
+
+    -- transfer local Component change to Local Storage cache
+    useFirstEffect' $
+      flip T.listen expandNeighborhood onExpandNeighborhoodChange
 
-    -- Effects
     R.useEffect1' selectedNodeIds' do
       let refreshed = neighbourBadges graph' selectedNodeIds'
       let count     = Seq.length refreshed
@@ -420,7 +446,8 @@ neighborhoodCpt = R.memo' $ here.component "neighborhood" cpt where
       T.write_ ordered termListBox
       T.write_ false showMoreBox
 
-    -- Render
+    -- | Render
+    -- |
     pure $
 
       H.ul
@@ -446,7 +473,7 @@ neighborhoodCpt = R.memo' $ here.component "neighborhood" cpt where
           ,
             -- Expand word cloud
             B.iconButton
-            { name: showWordCloud' ?
+            { name: expandNeighborhood' ?
                 "caret-up" $
                 "caret-down"
             , className: "graph-neighborhood__expand"
@@ -456,7 +483,7 @@ neighborhoodCpt = R.memo' $ here.component "neighborhood" cpt where
         ]
       ,
         -- Word cloud
-        R2.when showWordCloud' $
+        R2.when expandNeighborhood' $
 
           H.li
           { className: "list-group-item"}
@@ -505,6 +532,12 @@ neighborhoodCpt = R.memo' $ here.component "neighborhood" cpt where
           ]
       ]
 
+onExpandNeighborhoodChange :: T.Change Boolean -> Effect Unit
+onExpandNeighborhoodChange { new } = do
+  cache <- R2.loadLocalStorageState' R2.graphParamsKey GET.defaultCacheParams
+  let update = setter (_ { expandNeighborhood = new }) cache
+  R2.setLocalStorageState R2.graphParamsKey update
+
 ---------------------------------------------------------
 
 type UpdateTermButtonProps =

src/Gargantext/Components/GraphExplorer/Store.purs

@@ -14,6 +14,7 @@ import Data.Set as Set
 import Gargantext.Components.GraphExplorer.Types as GET
 import Gargantext.Hooks.Sigmax.Types as SigmaxT
 import Gargantext.Types as GT
+import Gargantext.Utils (getter)
 import Gargantext.Utils.Range as Range
 import Gargantext.Utils.Reactix as R2
 import Gargantext.Utils.Stores as Stores
@@ -35,8 +36,8 @@ type Store =
   , sideTab            :: T.Box GET.SideTab
   , showSidebar        :: T.Box GT.SidePanelState
   , showDoc            :: T.Box (Maybe GET.GraphSideDoc)
-  , showWordCloud      :: T.Box Boolean
-  , showNGramsActions  :: T.Box Boolean
+  , expandSelection    :: T.Box Boolean
+  , expandNeighborhood :: T.Box Boolean
   -- Controls
   , multiSelectEnabled :: T.Box Boolean
   , edgeConfluence     :: T.Box Range.NumberRange
@@ -65,8 +66,8 @@ type State =
   , sideTab            :: GET.SideTab
   , showSidebar        :: GT.SidePanelState
   , showDoc            :: Maybe GET.GraphSideDoc
-  , showWordCloud      :: Boolean
-  , showNGramsActions  :: Boolean
+  , expandSelection    :: Boolean
+  , expandNeighborhood :: Boolean
   -- Controls
   , multiSelectEnabled :: Boolean
   , edgeConfluence     :: Range.NumberRange
@@ -90,8 +91,8 @@ options ::
   , showDoc             :: Maybe GET.GraphSideDoc
   , showSidebar         :: GT.SidePanelState
   , sideTab             :: GET.SideTab
-  , showWordCloud       :: Boolean
-  , showNGramsActions  :: Boolean
+  , expandSelection     :: Boolean
+  , expandNeighborhood  :: Boolean
   -- Controls
   , labelSize           :: Number
   , mouseSelectorSize   :: Number
@@ -111,8 +112,8 @@ options =
   , sideTab             : GET.SideTabLegend
   , showSidebar         : GT.InitialClosed
   , showDoc             : Nothing
-  , showWordCloud       : true
-  , showNGramsActions   : true
+  , expandSelection     : getter _.expandSelection GET.defaultCacheParams
+  , expandNeighborhood  : getter _.expandNeighborhood GET.defaultCacheParams
   -- Controls
   , multiSelectEnabled  : false
   , labelSize           : 14.0

src/Gargantext/Components/GraphExplorer/Types.purs

@@ -3,11 +3,12 @@ module Gargantext.Components.GraphExplorer.Types where
 import Gargantext.Prelude
 
 import Data.Array ((!!), length)
-import Data.Generic.Rep (class Generic)
 import Data.Eq.Generic (genericEq)
+import Data.Generic.Rep (class Generic)
 import Data.Maybe (Maybe(..), fromJust)
 import Data.Newtype (class Newtype)
 import Data.Ord.Generic (genericCompare)
+import Data.Show.Generic (genericShow)
 import Data.Symbol (SProxy(..))
 import Partial.Unsafe (unsafePartial)
 import Record as Record
@@ -267,3 +268,26 @@ instance JSON.WriteForeign HyperdataGraph where
 data Stage = Init | Ready | Cleanup
 derive instance Generic Stage _
 derive instance Eq Stage
+
+-----------------------------------------------------------------------
+
+newtype CacheParams = CacheParams
+  { expandSelection     :: Boolean
+  , expandNeighborhood  :: Boolean
+  }
+
+derive instance Newtype CacheParams _
+derive instance Generic CacheParams _
+derive instance Eq CacheParams
+instance Show CacheParams where show = genericShow
+derive newtype instance JSON.ReadForeign CacheParams
+derive newtype instance JSON.WriteForeign CacheParams
+
+-- (!) in case cache storage (ie. JavaScript Local Storage) returns an invalid
+--     objects (eg. possible data migration), this will safely set new default
+--     values
+defaultCacheParams :: CacheParams
+defaultCacheParams = CacheParams
+  { expandSelection   : true
+  , expandNeighborhood: true
+  }

src/Gargantext/Components/Nodes/Corpus/Phylo.purs

@@ -11,11 +11,13 @@ import Gargantext.Components.Bootstrap as B
 import Gargantext.Components.PhyloExplorer.API (get)
 import Gargantext.Components.PhyloExplorer.Layout (layout)
 import Gargantext.Components.PhyloExplorer.Store as PhyloStore
-import Gargantext.Components.PhyloExplorer.Types (PhyloDataSet)
+import Gargantext.Components.PhyloExplorer.Types (CacheParams, PhyloDataSet, defaultCacheParams)
 import Gargantext.Config.REST (logRESTError)
+import Gargantext.Hooks.FirstEffect (useFirstEffect')
 import Gargantext.Hooks.Loader (useLoaderEffect)
 import Gargantext.Hooks.Session (useSession)
 import Gargantext.Types (NodeID)
+import Gargantext.Utils (getter)
 import Gargantext.Utils.Reactix as R2
 import Reactix as R
 import Reactix.DOM.HTML as H
@@ -38,7 +40,8 @@ nodeCpt = here.component "node" cpt where
     -- |
     session <- useSession
 
-    state' /\ state <- R2.useBox' Nothing
+    state' /\ state <- R2.useBox' (Nothing :: Maybe PhyloDataSet)
+    cache' /\ cache <- R2.useBox' (defaultCacheParams :: CacheParams)
 
     -- | Computed
     -- |
@@ -47,6 +50,10 @@ nodeCpt = here.component "node" cpt where
     -- | Hooks
     -- |
 
+    -- load Local Storage cache (if exists)
+    useFirstEffect' $
+      R2.loadLocalStorageState R2.phyloParamsKey cache
+
     useLoaderEffect
       { errorHandler
       , loader: get session
@@ -93,6 +100,9 @@ nodeCpt = here.component "node" cpt where
                 -- Data
                 { phyloDataSet
                 , phyloId: nodeId
+                -- (cache params)
+                , expandSelection: getter _.expandSelection cache'
+                , expandNeighborhood: getter _.expandNeighborhood cache'
                 -- (default options)
                 } `Record.merge` PhyloStore.options
 

src/Gargantext/Components/Nodes/Graph.purs

@@ -17,10 +17,12 @@ import Gargantext.Components.GraphExplorer.Layout (convert, layout)
 import Gargantext.Components.GraphExplorer.Store as GraphStore
 import Gargantext.Components.GraphExplorer.Types as GET
 import Gargantext.Config.REST (logRESTError)
+import Gargantext.Hooks.FirstEffect (useFirstEffect')
 import Gargantext.Hooks.Loader (useLoaderEffect)
 import Gargantext.Hooks.Session (useSession)
 import Gargantext.Hooks.Sigmax as Sigmax
 import Gargantext.Hooks.Sigmax.Types as SigmaxT
+import Gargantext.Utils (getter)
 import Gargantext.Utils.Range as Range
 import Gargantext.Utils.Reactix as R2
 import Reactix as R
@@ -48,9 +50,19 @@ nodeCpt = here.component "node" cpt where
 
     graphVersion'   <- R2.useLive' graphVersion
     state' /\ state <- R2.useBox' Nothing
+    cache' /\ cache <- R2.useBox' (GET.defaultCacheParams :: GET.CacheParams)
+
+    -- | Computed
+    -- |
+    let errorHandler = logRESTError here "[explorerLayout]"
 
     -- | Hooks
     -- |
+
+    -- load Local Storage cache (if exists)
+    useFirstEffect' $
+      R2.loadLocalStorageState R2.graphParamsKey cache
+
     useLoaderEffect
       { errorHandler
       , loader: GraphAPI.getNodes session graphVersion'
@@ -80,21 +92,20 @@ nodeCpt = here.component "node" cpt where
           {}
 
       , defaultSlot:
-          R2.fromMaybe state' handler
+          R2.fromMaybe state' \loaded ->
+            let
+              GET.HyperdataGraph { graph: hyperdataGraph } = loaded
+              Tuple mMetaData graph = convert hyperdataGraph
+            in
+              hydrateStore
+              { graph
+              , hyperdataGraph: loaded
+              , mMetaData
+              , graphId
+              , cacheParams: cache'
+              }
       }
 
-    where
-      errorHandler = logRESTError here "[explorerLayout]"
-      handler loaded@(GET.HyperdataGraph { graph: hyperdataGraph }) =
-        hydrateStore
-        { graph
-        , hyperdataGraph: loaded
-        , mMetaData
-        , graphId
-        }
-        where
-          Tuple mMetaData graph = convert hyperdataGraph
-
 --------------------------------------------------------
 
 type HydrateStoreProps =
@@ -102,6 +113,7 @@ type HydrateStoreProps =
   , graph           :: SigmaxT.SGraph
   , hyperdataGraph  :: GET.HyperdataGraph
   , graphId         :: GET.GraphId
+  , cacheParams     :: GET.CacheParams
   )
 
 hydrateStore:: R2.Leaf HydrateStoreProps
@@ -113,6 +125,7 @@ hydrateStoreCpt = here.component "hydrateStore" cpt where
       , graph
       , graphId
       , hyperdataGraph
+      , cacheParams
       } _ = do
     -- | Computed
     -- |
@@ -144,6 +157,9 @@ hydrateStoreCpt = here.component "hydrateStore" cpt where
           { min: 0.0
           , max: I.toNumber $ Seq.length $ SigmaxT.graphEdges graph
           }
+      -- (cache options)
+      , expandSelection: getter _.expandSelection cacheParams
+      , expandNeighborhood: getter _.expandNeighborhood cacheParams
       -- (default options)
       } `Record.merge` GraphStore.options
 

src/Gargantext/Components/PhyloExplorer/Sidebar/SelectionTab.purs

@@ -13,8 +13,9 @@ import Effect (Effect)
 import Gargantext.Components.Bootstrap as B
 import Gargantext.Components.Bootstrap.Types (ButtonVariant(..), Variant(..))
 import Gargantext.Components.PhyloExplorer.Store as PhyloStore
-import Gargantext.Components.PhyloExplorer.Types (ExtractedCount(..), ExtractedTerm(..))
-import Gargantext.Utils (nbsp, (?))
+import Gargantext.Components.PhyloExplorer.Types (ExtractedCount(..), ExtractedTerm(..), defaultCacheParams)
+import Gargantext.Hooks.FirstEffect (useFirstEffect')
+import Gargantext.Utils (nbsp, setter, (?))
 import Gargantext.Utils.Reactix as R2
 import Reactix as R
 import Reactix.DOM.HTML as H
@@ -28,22 +29,23 @@ type Props =
 selectionTab :: R2.Leaf Props
 selectionTab = R2.leaf component
 
-componentName :: String
-componentName = "Gargantext.Components.PhyloExplorer.SideBar.SelectionTab"
+here :: R2.Here
+here = R2.here "Gargantext.Components.PhyloExplorer.SideBar.SelectionTab"
 
 component :: R.Component Props
-component = R.hooksComponent componentName cpt where
+component = here.component "main" cpt where
   cpt { selectTermCallback
       } _ = do
     -- | State
     -- |
     store <- PhyloStore.use
 
-    extractedTerms <- R2.useLive' store.extractedTerms
-    extractedCount <- R2.useLive' store.extractedCount
-    selectedTerm   <- R2.useLive' store.selectedTerm
-    selectedBranch <- R2.useLive' store.selectedBranch
-    selectedSource <- R2.useLive' store.selectedSource
+    extractedTerms      <- R2.useLive' store.extractedTerms
+    extractedCount      <- R2.useLive' store.extractedCount
+    selectedTerm        <- R2.useLive' store.selectedTerm
+    selectedBranch      <- R2.useLive' store.selectedBranch
+    selectedSource      <- R2.useLive' store.selectedSource
+    expandNeighborhood  <- R2.useLive' store.expandNeighborhood
 
     showMore' /\ showMore <- R2.useBox' false
 
@@ -68,6 +70,17 @@ component = R.hooksComponent componentName cpt where
     R.useEffect1' extractedTerms $
       T.write_ false showMore
 
+    -- transfer local Component change to Local Storage cache
+    useFirstEffect' $
+      flip T.listen store.expandNeighborhood onExpandNeighborhoodChange
+
+
+    -- | Behaviors
+    -- |
+    let
+      onExpandClick _ = T.modify_ (not) store.expandNeighborhood
+
+
     -- | Render
     -- |
     pure $
@@ -249,53 +262,64 @@ component = R.hooksComponent componentName cpt where
                     ,
                       detailsCount count.branchCount "branches" false
                     ]
+                  ,
+                    -- Expand word cloud
+                    B.iconButton
+                    { name: expandNeighborhood ?
+                        "caret-up" $
+                        "caret-down"
+                    , className: "phylo-selection-tab__counter__expand"
+                    , callback: onExpandClick
+                    }
                   ]
             ,
               -- Term word cloud
-              H.li
-              { className: "list-group-item" }
-              [
-                H.ul
-                {} $
-                flip mapWithIndex extractedTerms
-                  \index (ExtractedTerm { label, ratio }) ->
-
-                    R2.when
-                    (
-                      truncateResults == false
-                    || index < maxTruncateResult
-                    ) $
-                      H.li
-                      { className: "phylo-selection-tab__selection__item"}
-                      [
-                        H.a
-                        { className: "badge badge-light"
-                        -- adjust font size according to term frequency
-                        , style:
-                            { fontSize: termFontSize ratio
-                            , lineHeight: termFontSize ratio
+              R2.when expandNeighborhood $
+
+                H.li
+                { className: "list-group-item" }
+                [
+                  H.ul
+                  {} $
+                  flip mapWithIndex extractedTerms
+                    \index (ExtractedTerm { label, ratio }) ->
+
+                      R2.when
+                      (
+                        truncateResults == false
+                      || index < maxTruncateResult
+                      ) $
+                        H.li
+                        { className: "phylo-selection-tab__selection__item"}
+                        [
+                          H.a
+                          { className: "badge badge-light"
+                          -- adjust font size according to term frequency
+                          , style:
+                              { fontSize: termFontSize ratio
+                              , lineHeight: termFontSize ratio
+                              }
+                          , on:
+                            { click: \_ -> selectTermCallback label
                             }
-                        , on:
-                          { click: \_ -> selectTermCallback label
                           }
-                        }
-                        [
-                          H.text label
+                          [
+                            H.text label
+                          ]
                         ]
-                      ]
-              ,
-                R2.when (truncateResults) $
-
-                  B.button
-                  { variant: ButtonVariant Light
-                  , callback: \_ -> T.modify_ not showMore
-                  , block: true
-                  , className: "phylo-selection-tab__selection__show-more"
-                  }
-                  [
-                    H.text "Show more"
-                  ]
-              ]
+                ,
+                  R2.when (truncateResults) $
+
+                    B.button
+                    { variant: ButtonVariant Light
+                    , callback: \_ -> T.modify_ not showMore
+                    , block: true
+                    , className: "phylo-selection-tab__selection__show-more"
+                    }
+                    [
+                      H.text "Show more"
+                    ]
+                ]
             ]
           ]
       -- ,
@@ -346,3 +370,9 @@ detailsCount value label weighty =
       H.text $ nbsp 1 <> label
     ]
   ]
+
+onExpandNeighborhoodChange :: T.Change Boolean -> Effect Unit
+onExpandNeighborhoodChange { new } = do
+  cache <- R2.loadLocalStorageState' R2.phyloParamsKey defaultCacheParams
+  let update = setter (_ { expandNeighborhood = new }) cache
+  R2.setLocalStorageState R2.phyloParamsKey update

src/Gargantext/Components/PhyloExplorer/Store.purs

@@ -11,8 +11,9 @@ module Gargantext.Components.PhyloExplorer.Store
 import Gargantext.Prelude
 
 import Data.Maybe (Maybe(..))
-import Gargantext.Components.PhyloExplorer.Types (DisplayView(..), ExtractedCount, ExtractedTerm, FrameDoc, PhyloDataSet, Source, TabView(..), Term)
+import Gargantext.Components.PhyloExplorer.Types (DisplayView(..), ExtractedCount, ExtractedTerm, FrameDoc, PhyloDataSet, Source, TabView(..), Term, defaultCacheParams)
 import Gargantext.Types (NodeID, SidePanelState(..))
+import Gargantext.Utils (getter)
 import Gargantext.Utils.Reactix as R2
 import Gargantext.Utils.Stores as Stores
 import Reactix as R
@@ -24,104 +25,112 @@ here = R2.here "Gargantext.Components.GraphExplorer.Store"
 
 type Store =
   -- Data
-  ( phyloDataSet       :: T.Box PhyloDataSet
-  , phyloId            :: T.Box NodeID
-  , isBuilt            :: T.Box Boolean
+  ( phyloDataSet        :: T.Box PhyloDataSet
+  , phyloId             :: T.Box NodeID
+  , isBuilt             :: T.Box Boolean
   -- Layout
-  , toolBarDisplayed   :: T.Box Boolean
-  , isIsolineDisplayed :: T.Box Boolean
-  , sideBarDisplayed   :: T.Box SidePanelState
-  , sideBarTabView     :: T.Box TabView
-  , frameDoc           :: T.Box (Maybe FrameDoc)
+  , toolBarDisplayed    :: T.Box Boolean
+  , isIsolineDisplayed  :: T.Box Boolean
+  , sideBarDisplayed    :: T.Box SidePanelState
+  , sideBarTabView      :: T.Box TabView
+  , frameDoc            :: T.Box (Maybe FrameDoc)
+  , expandSelection     :: T.Box Boolean
+  , expandNeighborhood  :: T.Box Boolean
   -- Topbar
-  , source             :: T.Box String
-  , sources            :: T.Box (Array Source)
-  , terms              :: T.Box (Array Term)
-  , search             :: T.Box String
-  , result             :: T.Box (Maybe Term)
+  , source              :: T.Box String
+  , sources             :: T.Box (Array Source)
+  , terms               :: T.Box (Array Term)
+  , search              :: T.Box String
+  , result              :: T.Box (Maybe Term)
   -- Sidebar
-  , extractedTerms     :: T.Box (Array ExtractedTerm)
-  , selectedTerm       :: T.Box (Maybe String)
-  , selectedBranch     :: T.Box (Maybe String)
-  , selectedSource     :: T.Box (Maybe String)
-  , extractedCount     :: T.Box (Maybe ExtractedCount)
+  , extractedTerms      :: T.Box (Array ExtractedTerm)
+  , selectedTerm        :: T.Box (Maybe String)
+  , selectedBranch      :: T.Box (Maybe String)
+  , selectedSource      :: T.Box (Maybe String)
+  , extractedCount      :: T.Box (Maybe ExtractedCount)
   -- Toolbar
-  , displayView        :: T.Box DisplayView
+  , displayView         :: T.Box DisplayView
   )
 
 type State =
   -- Data
-  ( phyloDataSet       :: PhyloDataSet
-  , phyloId            :: NodeID
-  , isBuilt            :: Boolean
+  ( phyloDataSet        :: PhyloDataSet
+  , phyloId             :: NodeID
+  , isBuilt             :: Boolean
   -- Layout
-  , toolBarDisplayed   :: Boolean
-  , isIsolineDisplayed :: Boolean
-  , sideBarDisplayed   :: SidePanelState
-  , sideBarTabView     :: TabView
-  , frameDoc           :: Maybe FrameDoc
+  , toolBarDisplayed    :: Boolean
+  , isIsolineDisplayed  :: Boolean
+  , sideBarDisplayed    :: SidePanelState
+  , sideBarTabView      :: TabView
+  , frameDoc            :: Maybe FrameDoc
+  , expandSelection     :: Boolean
+  , expandNeighborhood  :: Boolean
   -- Topbar
-  , source             :: String
-  , sources            :: Array Source
-  , terms              :: Array Term
-  , search             :: String
-  , result             :: Maybe Term
+  , source              :: String
+  , sources             :: Array Source
+  , terms               :: Array Term
+  , search              :: String
+  , result              :: Maybe Term
   -- Sidebar
-  , extractedTerms     :: Array ExtractedTerm
-  , selectedTerm       :: Maybe String
-  , selectedBranch     :: Maybe String
-  , selectedSource     :: Maybe String
-  , extractedCount     :: Maybe ExtractedCount
+  , extractedTerms      :: Array ExtractedTerm
+  , selectedTerm        :: Maybe String
+  , selectedBranch      :: Maybe String
+  , selectedSource      :: Maybe String
+  , extractedCount      :: Maybe ExtractedCount
   -- Toolbar
-  , displayView        :: DisplayView
+  , displayView         :: DisplayView
   )
 
 options ::
-  { isBuilt            :: Boolean
+  { isBuilt             :: Boolean
   -- Layout
-  , toolBarDisplayed   :: Boolean
-  , isIsolineDisplayed :: Boolean
-  , sideBarDisplayed   :: SidePanelState
-  , sideBarTabView     :: TabView
-  , frameDoc           :: Maybe FrameDoc
+  , toolBarDisplayed    :: Boolean
+  , isIsolineDisplayed  :: Boolean
+  , sideBarDisplayed    :: SidePanelState
+  , sideBarTabView      :: TabView
+  , frameDoc            :: Maybe FrameDoc
+  , expandSelection     :: Boolean
+  , expandNeighborhood  :: Boolean
   -- Topbar
-  , source             :: String
-  , sources            :: Array Source
-  , terms              :: Array Term
-  , search             :: String
-  , result             :: Maybe Term
+  , source              :: String
+  , sources             :: Array Source
+  , terms               :: Array Term
+  , search              :: String
+  , result              :: Maybe Term
   -- Sidebar
-  , extractedTerms     :: Array ExtractedTerm
-  , selectedTerm       :: Maybe String
-  , selectedBranch     :: Maybe String
-  , selectedSource     :: Maybe String
-  , extractedCount     :: Maybe ExtractedCount
+  , extractedTerms      :: Array ExtractedTerm
+  , selectedTerm        :: Maybe String
+  , selectedBranch      :: Maybe String
+  , selectedSource      :: Maybe String
+  , extractedCount      :: Maybe ExtractedCount
   -- Toolbar
-  , displayView        :: DisplayView
+  , displayView         :: DisplayView
   }
 options =
   -- Data
-  { isBuilt            : false
+  { isBuilt             : false
   -- Layout
-  , toolBarDisplayed   : false
-  , isIsolineDisplayed : false
-  , sideBarDisplayed   : InitialClosed
-  , sideBarTabView     : DetailsTab
-  , frameDoc           : Nothing
+  , toolBarDisplayed    : false
+  , isIsolineDisplayed  : false
+  , sideBarDisplayed    : InitialClosed
+  , sideBarTabView      : DetailsTab
+  , frameDoc            : Nothing
+  , expandSelection     : getter _.expandSelection defaultCacheParams
+  , expandNeighborhood  : getter _.expandNeighborhood defaultCacheParams
   -- Topbar
-  , source             : ""
-  , sources            : mempty
-  , terms              : mempty
-  , search             : ""
-  , result             : Nothing
+  , source              : ""
+  , sources             : mempty
+  , terms               : mempty
+  , search              : ""
+  , result              : Nothing
   -- Sidebar
-  , extractedTerms     : mempty
-  , selectedTerm       : Nothing
-  , selectedBranch     : Nothing
-  , selectedSource     : Nothing
-  , extractedCount     : Nothing
+  , extractedTerms      : mempty
+  , selectedTerm        : Nothing
+  , selectedBranch      : Nothing
+  , selectedSource      : Nothing
+  , extractedCount      : Nothing
   -- Toolbar
-  , displayView        : HeadingMode
+  , displayView         : HeadingMode
   }
 
 context :: R.Context (Record Store)

src/Gargantext/Components/PhyloExplorer/Types.purs

@@ -11,6 +11,7 @@ module Gargantext.Components.PhyloExplorer.Types
   , ExtractedTerm(..)
   , ExtractedCount(..)
   , FrameDoc(..)
+  , CacheParams(..), defaultCacheParams
   ) where
 
 import Gargantext.Prelude
@@ -498,3 +499,26 @@ newtype FrameDoc = FrameDoc
 
 derive instance Generic FrameDoc _
 derive instance Eq FrameDoc
+
+----------------------------------------------------------------
+
+newtype CacheParams = CacheParams
+  { expandSelection     :: Boolean
+  , expandNeighborhood  :: Boolean
+  }
+
+derive instance Newtype CacheParams _
+derive instance Generic CacheParams _
+derive instance Eq CacheParams
+instance Show CacheParams where show = genericShow
+derive newtype instance JSON.ReadForeign CacheParams
+derive newtype instance JSON.WriteForeign CacheParams
+
+-- (!) in case cache storage (ie. JavaScript Local Storage) returns an invalid
+--     objects (eg. possible data migration), this will safely set new default
+--     values
+defaultCacheParams :: CacheParams
+defaultCacheParams = CacheParams
+  { expandSelection   : true
+  , expandNeighborhood: true
+  }

src/Gargantext/Utils/Reactix.purs

@@ -12,8 +12,8 @@ import DOM.Simple.Types (class IsNode, class IsElement, DOMRect)
 import Data.Array as A
 import Data.Either (hush)
 import Data.Function.Uncurried (Fn1, runFn1, Fn2, runFn2)
-import Data.Maybe as Maybe
 import Data.Maybe (Maybe(..), fromJust, fromMaybe)
+import Data.Maybe as Maybe
 import Data.Nullable (Nullable, null, toMaybe)
 import Data.Tuple (Tuple)
 import Data.Tuple.Nested ((/\))
@@ -397,6 +397,12 @@ getls = window >>= localStorage
 openNodesKey :: LocalStorageKey
 openNodesKey = "garg-open-nodes"
 
+graphParamsKey :: LocalStorageKey
+graphParamsKey = "garg-graph-params"
+
+phyloParamsKey :: LocalStorageKey
+phyloParamsKey = "garg-phylo-params"
+
 type LocalStorageKey = String
 
 loadLocalStorageState :: forall s. JSON.ReadForeign s => LocalStorageKey -> T.Box s -> Effect Unit
@@ -410,6 +416,16 @@ loadLocalStorageState key cell = do
     Nothing -> pure unit
     Just p  -> void $ T.write p cell
 
+loadLocalStorageState' :: forall s.
+     JSON.ReadForeign s
+  => LocalStorageKey
+  -> s
+  -> Effect s
+loadLocalStorageState' key default = do
+  (item :: Maybe String) <- getls >>= getItem key
+  let parsed = hush <<< JSON.readJSON $ Maybe.fromMaybe "" item
+  pure $ Maybe.fromMaybe default parsed
+
 listenLocalStorageState :: forall s. JSON.WriteForeign s => LocalStorageKey -> T.Change s -> Effect Unit
 listenLocalStorageState key { old, new } = do
   --let json = Json.stringify $ Argonaut.encodeJson new
@@ -417,6 +433,15 @@ listenLocalStorageState key { old, new } = do
   storage <- getls
   setItem key json storage
 
+setLocalStorageState :: forall s.
+     JSON.WriteForeign s
+  => LocalStorageKey
+  -> s
+  -> Effect Unit
+setLocalStorageState key s =
+  let json = JSON.writeJSON s
+  in getls >>= setItem key json
+
 getMessageDataStr :: DE.MessageEvent -> String
 getMessageDataStr = getMessageData
 

src/sass/_legacy/_phylo.scss

@@ -590,6 +590,17 @@ $decreasing-color: #11638F;
     &__value {
       color: $info;
     }
+
+    &__expand {
+      // Following <list-group-item> spacing
+      $position-x: $list-group-item-padding-x;
+      // Empirical: fit well with icon overlay
+      $position-y: 1rem;
+
+      position: absolute;
+      right: $position-x;
+      bottom: $position-y;
+    }
   }
 
   &__nil {