[docsTable] rows eyes opening/closing for doc annotate popup

src/Gargantext/Components/DocsTable.purs

@@ -34,7 +34,7 @@ import Gargantext.Hooks.Loader (useLoader, useLoaderWithCacheAPI, HashedResponse
 import Gargantext.Routes as Routes
 import Gargantext.Routes (SessionRoute(NodeAPI))
 import Gargantext.Sessions (Session, sessionId, get, delete)
-import Gargantext.Types (ListId, NodeID, NodeType(..), OrderBy(..), TableResult, TabSubType, TabType, showTabType')
+import Gargantext.Types (ListId, NodeID, NodeType(..), OrderBy(..), ReloadS, TableResult, TabSubType, TabType, showTabType')
 import Gargantext.Utils (sortWith)
 import Gargantext.Utils.CacheAPI as GUC
 import Gargantext.Utils.QueryString (joinQueryStrings, mQueryParamS, queryParam, queryParamS)
@@ -351,11 +351,14 @@ pagePaintRawCpt = R.hooksComponentWithModule thisModule "pagePaintRawCpt" cpt wh
                 , totalRecords }
       , localCategories
       , params } _ = do
+
+    reload <- R.useState' 0
+
     pure $ T.table
       { colNames
       , container: T.defaultContainer { title: "Documents" }
       , params
-      , rows: rows localCategories
+      , rows: rows reload localCategories
       , totalRecords
       , wrapColElts
       }
@@ -371,14 +374,14 @@ pagePaintRawCpt = R.hooksComponentWithModule thisModule "pagePaintRawCpt" cpt wh
         colNames = T.ColumnName <$> [ "Tag", "Date", "Title", "Source"]
         wrapColElts = const identity
         getCategory (lc /\ _) {_id, category} = fromMaybe category (lc ^. at _id)
-        rows lc@(_ /\ setLocalCategories) = row <$> A.toUnfoldable documents
+        rows reload lc@(_ /\ setLocalCategories) = row <$> A.toUnfoldable documents
           where
             row dv@(DocumentsView r) =
               { row:
                 T.makeRow [ -- H.div {} [ H.a { className, style, on: {click: click Favorite} } [] ]
                   H.div { className: "column-tag flex" } [
                     caroussel { category: cat, nodeId, row: dv, session, setLocalCategories } []
-                  , docChooser { listId, mCorpusId, nodeId: r._id, sidePanelTriggers } []
+                  , docChooser { listId, mCorpusId, nodeId: r._id, sidePanelTriggers, tableReload: reload } []
                   ]
                 --, H.input { type: "checkbox", defaultValue: checked, on: {click: click Trash} }
                 -- TODO show date: Year-Month-Day only
@@ -400,6 +403,7 @@ type DocChooser = (
   , mCorpusId         :: Maybe NodeID
   , nodeId            :: NodeID
   , sidePanelTriggers :: Record SidePanelTriggers
+  , tableReload       :: ReloadS
   )
 
 docChooser :: R2.Component DocChooser
@@ -414,9 +418,17 @@ docChooserCpt = R.hooksComponentWithModule thisModule "docChooser" cpt
     cpt { listId
         , mCorpusId: Just corpusId
         , nodeId
-        , sidePanelTriggers: { triggerAnnotatedDocIdChange } } _ = do
+        , sidePanelTriggers: { currentDocIdRef
+                             , triggerAnnotatedDocIdChange }
+        , tableReload: (_ /\ setReload) } _ = do
+
+      let eyeClass = if (R.readRef currentDocIdRef) == Just nodeId then
+                       "fa-eye"
+                     else
+                       "fa-eye-slash"
+
       pure $ H.div { className: "doc-chooser" } [
-        H.span { className: "fa fa-eye"
+        H.span { className: "fa " <> eyeClass
                , on: { click: onClick } } []
       ]
       where
@@ -425,6 +437,7 @@ docChooserCpt = R.hooksComponentWithModule thisModule "docChooser" cpt
           -- log2 "[docChooser] onClick, corpusId" corpusId
           -- log2 "[docChooser] onClick, nodeId" nodeId
           R2.callTrigger triggerAnnotatedDocIdChange { corpusId, listId, nodeId }
+          setReload $ (_ + 1)
 
 
 newtype SearchQuery = SearchQuery {

src/Gargantext/Components/Nodes/Texts.purs

@@ -350,31 +350,40 @@ sidePanel = R.createElement sidePanelCpt
 sidePanelCpt :: R.Component SidePanelProps
 sidePanelCpt = R.hooksComponentWithModule thisModule "sidePanel" cpt
   where
-    cpt { controls: { triggers: { triggerAnnotatedDocIdChange
-                                , triggerSidePanel } }
+    cpt { controls: { triggers: { currentDocIdRef
+                                , toggleSidePanel
+                                , triggerAnnotatedDocIdChange
+                                , triggerSidePanel
+                                } }
         , session } _ = do
 
       showSidePanel <- R.useState' InitialClosed
 
       R.useEffect' $ do
-        let trigger _ = do
-              snd showSidePanel $ const Opened
-        R2.setTrigger triggerSidePanel trigger
+        let toggleSidePanel' _  = snd showSidePanel toggleSidePanelState
+            triggerSidePanel' _ = snd showSidePanel $ const Opened
+        R2.setTrigger toggleSidePanel  toggleSidePanel'
+        R2.setTrigger triggerSidePanel triggerSidePanel'
 
       (mCorpusId /\ setMCorpusId) <- R.useState' Nothing
       (mListId /\ setMListId) <- R.useState' Nothing
       (mNodeId /\ setMNodeId) <- R.useState' Nothing
 
-      R.useEffect2 mListId mNodeId $ do
+      R.useEffect3 mCorpusId mListId mNodeId $ do
         let trigger :: Record TriggerAnnotatedDocIdChangeParams -> Effect Unit
             trigger { corpusId, listId, nodeId } = do
               -- log2 "[sidePanel trigger] trigger corpusId change" corpusId
               -- log2 "[sidePanel trigger] trigger listId change" listId
               -- log2 "[sidePanel trigger] trigger nodeId change" nodeId
-              setMCorpusId $ const $ Just corpusId
-              setMListId $ const $ Just listId
-              setMNodeId $ const $ Just nodeId
-              R2.callTrigger triggerSidePanel unit
+              if mCorpusId == Just corpusId && mListId == Just listId && mNodeId == Just nodeId && R.readRef currentDocIdRef == Just nodeId then do
+                R.setRef currentDocIdRef Nothing
+                R2.callTrigger toggleSidePanel unit
+              else do
+                setMCorpusId $ const $ Just corpusId
+                setMListId $ const $ Just listId
+                setMNodeId $ const $ Just nodeId
+                R.setRef currentDocIdRef $ Just nodeId
+                R2.callTrigger triggerSidePanel unit
         -- log2 "[sidePanel] trigger" trigger
         R2.setTrigger triggerAnnotatedDocIdChange trigger
 
@@ -386,10 +395,14 @@ sidePanelCpt = R.hooksComponentWithModule thisModule "sidePanel" cpt
             Opened -> { display: "block" }
             _      -> { display: "none" }
 
+      let closeSidePanel _ = do
+            R.setRef currentDocIdRef Nothing
+            snd showSidePanel $ const Closed
+
       pure $ H.div { style: mainStyle } [
         H.div { className: "header" } [
           H.span { className: "btn btn-danger"
-                 , on: { click: \_ -> snd showSidePanel $ const Closed } } [
+                 , on: { click: closeSidePanel } } [
             H.span { className: "fa fa-times" } []
           ]
         ]

src/Gargantext/Components/Nodes/Texts/Types.purs

@@ -24,17 +24,23 @@ type TriggerAnnotatedDocIdChangeParams = (
   )
 
 type SidePanelTriggers = (
-    triggerAnnotatedDocIdChange :: R2.Trigger (Record TriggerAnnotatedDocIdChangeParams)
-  , triggerSidePanel            :: R2.Trigger Unit
+    currentDocIdRef             :: R.Ref (Maybe Int)
+  , toggleSidePanel             :: R2.Trigger Unit  -- toggles side panel
+  , triggerAnnotatedDocIdChange :: R2.Trigger (Record TriggerAnnotatedDocIdChangeParams)
+  , triggerSidePanel            :: R2.Trigger Unit  -- opens side panel
 )
 
 emptySidePanelTriggers :: R.Hooks (Record SidePanelTriggers)
 emptySidePanelTriggers = do
+  currentDocIdRef             <- R.useRef Nothing
+  toggleSidePanel             <- R.useRef Nothing
   triggerAnnotatedDocIdChange <- R.useRef Nothing
   triggerSidePanel            <- R.useRef Nothing
 
   pure $ {
-      triggerAnnotatedDocIdChange
+      currentDocIdRef
+    , toggleSidePanel
+    , triggerAnnotatedDocIdChange
     , triggerSidePanel
     }