Merge remote-tracking branch 'origin/262-dev-phylo-doc-search-ux-improvements' into dev-merge

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

@@ -14,7 +14,7 @@ import Data.Set as Set
 import Data.Tuple.Nested ((/\))
 import Effect (Effect)
 import Gargantext.Components.Bootstrap as B
-import Gargantext.Components.Bootstrap.Types (ButtonVariant(..), Variant(..))
+import Gargantext.Components.Bootstrap.Types (ButtonVariant(..), ComponentStatus(..), Variant(..))
 import Gargantext.Components.FacetsTable (DocumentsView(..), Rows(..), initialPageGQL, loadPageGQL, publicationDate)
 import Gargantext.Components.GraphExplorer.Store as GraphStore
 import Gargantext.Components.GraphExplorer.Types (CorpusId, DocId, GraphSideDoc(..), ListId)
@@ -174,7 +174,7 @@ docListCpt = here.component "main" cpt where
       , state
       }
     
-    { goToURL } <- useLinkHandler
+    { goToURL, goToURLInNewTab } <- useLinkHandler
 
     -- | Effects
     -- |
@@ -203,6 +203,8 @@ docListCpt = here.component "main" cpt where
           Docs { docs } -> T.write_ (Just docs) rows
           _             -> T.write_ (Just Seq.empty) rows
 
+    let statusOrAndButtons = if A.length selectedNgramsTerms' >= 2 then Enabled else Disabled
+
     -- | Computed
     -- |
     let
@@ -258,11 +260,11 @@ docListCpt = here.component "main" cpt where
           R2.when (results == Seq.empty) $
             H.div {}
             [
-              H.ul { className: "flex-row list-group vertical-align-middle" } 
-              [ H.li {} [ andOrButton { state: buttonState } ]
-              , H.li {} [ H.h6 {} [ H.text "No related documents" ] ]
-              , H.li {} [ B.iconButton { name: "search", title: "Search the web", callback: \_ -> webSearch (A.fromFoldable selectedNgramsTerms') goToURL } ]
-              , H.li {} [ B.iconButton { name: "wikipedia-w", title: "Search Wikipedia", callback: \_ -> wikipediaSearch (A.fromFoldable selectedNgramsTerms') goToURL } ]
+              H.ul { className: "flex-row list-group justify-content-space-between align-items-center mb-1" } 
+              [ H.li {} [ andOrButton { state: buttonState, buttonStatus: statusOrAndButtons } ]
+              , H.li {} [ H.p { className: "text-bold" } [ H.text "No related documents" ] ]
+              , H.li {} [ B.iconButton { name: "search", title: "Search the web", callback: \_ -> webSearch (A.fromFoldable selectedNgramsTerms') goToURLInNewTab } ]
+              , H.li {} [ B.iconButton { name: "wikipedia-w", title: "Search Wikipedia", callback: \_ -> wikipediaSearch (A.fromFoldable selectedNgramsTerms') goToURLInNewTab } ]
               ]
             , B.caveat
               {}
@@ -275,11 +277,11 @@ docListCpt = here.component "main" cpt where
 
           H.div {}
             [
-              H.ul { className: "flex-row list-group vertical-align-middle" } 
-              [ H.li {} [ andOrButton { state: buttonState } ]
-              , H.li {} [ H.h6 {} [ H.text $ show (Seq.length results) <> " related documents" ] ]
-              , H.li {} [ B.iconButton { name: "search", title: "Search the web", callback: \_ -> webSearch (A.fromFoldable selectedNgramsTerms') goToURL } ]
-              , H.li {} [ B.iconButton { name: "wikipedia-w", title: "Search Wikipedia", callback: \_ -> wikipediaSearch (A.fromFoldable selectedNgramsTerms') goToURL } ]
+              H.ul { className: "flex-row list-group justify-content-space-between align-items-center mb-1" } 
+              [ H.li {} [ andOrButton { state: buttonState, buttonStatus: statusOrAndButtons } ]
+              , H.li {} [ H.p { className: "text-bold" } [ H.text $ show (Seq.length results) <> " related documents" ] ]
+              , H.li {} [ B.iconButton { name: "search", title: "Search the web", callback: \_ -> webSearch (A.fromFoldable selectedNgramsTerms') goToURLInNewTab } ]
+              , H.li {} [ B.iconButton { name: "wikipedia-w", title: "Search Wikipedia", callback: \_ -> wikipediaSearch (A.fromFoldable selectedNgramsTerms') goToURLInNewTab } ]
               ]
             , H.ul
               { className: intercalate " "
@@ -393,7 +395,8 @@ itemCpt = here.component "item" cpt where
 ---------------------------------------------------------
 
 type AndOrButtonProps =
-  ( state :: T.Box Boolean
+  ( state     :: T.Box Boolean
+  , buttonStatus  :: ComponentStatus
   )
 
 andOrButton :: R2.Leaf AndOrButtonProps
@@ -401,7 +404,7 @@ andOrButton = R2.leaf andOrButtonCpt
 andOrButtonCpt :: R.Component AndOrButtonProps
 andOrButtonCpt = here.component "andOrButton" cpt
   where
-    cpt { state } _ = do
+    cpt { state, buttonStatus } _ = do
       state' <- R2.useLive' state
 
       pure $
@@ -415,6 +418,7 @@ andOrButtonCpt = here.component "andOrButton" cpt
         [
           B.button
           { className: "btn-sm"
+          , status: buttonStatus
           , callback: \_ -> T.write_ false state
           , variant: state' ?
               OutlinedButtonVariant Secondary $
@@ -424,6 +428,7 @@ andOrButtonCpt = here.component "andOrButton" cpt
         ,
           B.button
           { className: "btn-sm"
+          , status: buttonStatus
           , callback: \_ -> T.write_ true state
           , variant: state' ?
               ButtonVariant Secondary $

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

@@ -164,7 +164,7 @@ docListCpt = here.component "main" cpt where
       , path: path'
       }
 
-    { goToURL } <- useLinkHandler
+    { goToURL, goToURLInNewTab } <- useLinkHandler
 
     -- | Effects
     -- |
@@ -245,11 +245,11 @@ docListCpt = here.component "main" cpt where
           R2.when (results == Seq.empty) $
             H.div {}
             [
-              H.ul { className: "flex-row list-group vertical-align-middle" } 
+              H.ul { className: "flex-row list-group justify-content-space-between align-items-center mb-1" } 
               [ H.li {} [ andOrButton { state: buttonState } ]
-              , H.li {} [ H.h6 {} [ H.text "No related documents" ] ]
-              , H.li {} [ B.iconButton { name: "search", title: "Search the web", callback: \_ -> webSearch q' goToURL} ]
-              , H.li {} [ B.iconButton { name: "wikipedia-w", title: "Search Wikipedia", callback: \_ -> wikipediaSearch q' goToURL} ]
+              , H.li {} [ H.p { className: "text-bold" } [ H.text "No related documents" ] ]
+              , H.li {} [ B.iconButton { name: "search", title: "Search the web", callback: \_ -> webSearch q' goToURLInNewTab} ]
+              , H.li {} [ B.iconButton { name: "wikipedia-w", title: "Search Wikipedia", callback: \_ -> wikipediaSearch q' goToURLInNewTab} ]
               ]
             , B.caveat
               {}
@@ -261,11 +261,11 @@ docListCpt = here.component "main" cpt where
           R2.when (not $ eq results Seq.empty) $
           H.div {}
           [
-            H.ul { className: "flex-row list-group vertical-align-middle" } 
+            H.ul { className: "flex-row list-group justify-content-space-between align-items-center mb-1" } 
               [ H.li {} [ andOrButton { state: buttonState } ]
-              , H.li {} [ H.h6 {} [ H.text $ show (Seq.length results) <> " related documents" ] ]
-              , H.li {} [ B.iconButton { name: "search", title: "Search the web", callback: \_ -> webSearch q' goToURL} ]
-              , H.li {} [ B.iconButton { name: "wikipedia-w", title: "Search Wikipedia", callback: \_ -> wikipediaSearch q' goToURL} ]
+              , H.li {} [ H.p { className: "text-bold" } [ H.text $ show (Seq.length results) <> " related documents" ] ]
+              , H.li {} [ B.iconButton { name: "search", title: "Search the web", callback: \_ -> webSearch q' goToURLInNewTab} ]
+              , H.li {} [ B.iconButton { name: "wikipedia-w", title: "Search Wikipedia", callback: \_ -> wikipediaSearch q' goToURLInNewTab} ]
               ]
             ,
             H.ul

src/Gargantext/Hooks/LinkHandler.purs

 module Gargantext.Hooks.LinkHandler
   ( Methods, useLinkHandler
-  , goToRoute, goToURL, goToPreviousPage
+  , goToRoute, goToPreviousPage, goToURL, goToURLInNewTab
   ) where
 
 import Gargantext.Prelude
@@ -18,12 +18,13 @@ import Type.Proxy (Proxy(..))
 import Web.HTML (window)
 import Web.HTML.History (back)
 import Web.HTML.Location (assign, setHref)
-import Web.HTML.Window (history, location)
+import Web.HTML.Window (history, location, open)
 
 type Methods =
   ( goToRoute        :: AppRoute -> Effect Unit
   , goToPreviousPage :: Unit -> Effect Unit
   , goToURL          :: String -> Effect Unit
+  , goToURLInNewTab  :: String -> Effect Unit
   )
 
 useLinkHandler :: R.Hooks (Record Methods)
@@ -41,6 +42,7 @@ useLinkHandler = do
           tile
     , goToPreviousPage  : const goToPreviousPage
     , goToURL           : goToURL
+    , goToURLInNewTab   : goToURLInNewTab
     }
 
 -- (?) Also exporting implementation methods, as it can be useful in an
@@ -55,6 +57,11 @@ goToPreviousPage = window >>= history >>= back
 goToURL :: String -> Effect Unit
 goToURL url = window >>= location >>= setHref url
 
+goToURLInNewTab :: String -> Effect Unit
+goToURLInNewTab url = do
+  _ <- window >>= open url "_blank" ""
+  pure unit
+
 --------------------------------------
 
 changeTileRoute ::