>>> continue

dist/styles/bootstrap-darkster.css

@@ -11747,6 +11747,10 @@ select.form-control {
   white-space: normal;
   word-break: break-word;
 }
+.phylo-selection-tab__highlight__type {
+  padding: 0.25em 0.4em;
+  font-weight: bold;
+}
 .phylo-selection-tab__selection {
   margin: 16px 20px 0;
 }
@@ -11771,6 +11775,10 @@ select.form-control {
 .phylo-selection-tab__nil {
   margin: 16px 20px;
 }
+.phylo-selection-tab__separator {
+  color: #adb5bd;
+  text-align: center;
+}
 
 .phylo-toolbar {
   display: flex;

dist/styles/bootstrap-default.css

@@ -11698,6 +11698,10 @@ select.form-control {
   white-space: normal;
   word-break: break-word;
 }
+.phylo-selection-tab__highlight__type {
+  padding: 0.25em 0.4em;
+  font-weight: bold;
+}
 .phylo-selection-tab__selection {
   margin: 16px 20px 0;
 }
@@ -11722,6 +11726,10 @@ select.form-control {
 .phylo-selection-tab__nil {
   margin: 16px 20px;
 }
+.phylo-selection-tab__separator {
+  color: #adb5bd;
+  text-align: center;
+}
 
 .phylo-toolbar {
   display: flex;

dist/styles/bootstrap-greyson.css

@@ -11455,6 +11455,10 @@ select.form-control {
   white-space: normal;
   word-break: break-word;
 }
+.phylo-selection-tab__highlight__type {
+  padding: 0.25em 0.4em;
+  font-weight: bold;
+}
 .phylo-selection-tab__selection {
   margin: 16px 20px 0;
 }
@@ -11479,6 +11483,10 @@ select.form-control {
 .phylo-selection-tab__nil {
   margin: 16px 20px;
 }
+.phylo-selection-tab__separator {
+  color: #adb5bd;
+  text-align: center;
+}
 
 .phylo-toolbar {
   display: flex;

dist/styles/bootstrap-herbie.css

@@ -11704,6 +11704,10 @@ select.form-control {
   white-space: normal;
   word-break: break-word;
 }
+.phylo-selection-tab__highlight__type {
+  padding: 0.25em 0.4em;
+  font-weight: bold;
+}
 .phylo-selection-tab__selection {
   margin: 16px 20px 0;
 }
@@ -11728,6 +11732,10 @@ select.form-control {
 .phylo-selection-tab__nil {
   margin: 16px 20px;
 }
+.phylo-selection-tab__separator {
+  color: #adb5bd;
+  text-align: center;
+}
 
 .phylo-toolbar {
   display: flex;

dist/styles/bootstrap-monotony.css

@@ -11704,6 +11704,10 @@ select.form-control {
   white-space: normal;
   word-break: break-word;
 }
+.phylo-selection-tab__highlight__type {
+  padding: 0.25em 0.4em;
+  font-weight: bold;
+}
 .phylo-selection-tab__selection {
   margin: 16px 20px 0;
 }
@@ -11728,6 +11732,10 @@ select.form-control {
 .phylo-selection-tab__nil {
   margin: 16px 20px;
 }
+.phylo-selection-tab__separator {
+  color: #adb5bd;
+  text-align: center;
+}
 
 .phylo-toolbar {
   display: flex;

src/Gargantext/Components/PhyloExplorer/SelectionTab.purs

@@ -97,12 +97,6 @@ component = R.hooksComponent componentName cpt where
               H.div
               { className: "phylo-selection-tab__highlight" }
               [
-                H.h6
-                {}
-                [
-                  H.text "Selected source"
-                ]
-              ,
                 H.ul
                 { className: "list-group" }
                 [
@@ -118,6 +112,12 @@ component = R.hooksComponent componentName cpt where
                     [
                       H.text s
                     ]
+                  ,
+                    H.span
+                    { className: "phylo-selection-tab__highlight__type" }
+                    [
+                      H.text "source"
+                    ]
                   ]
                 ]
               ]
@@ -131,12 +131,6 @@ component = R.hooksComponent componentName cpt where
               H.div
               { className: "phylo-selection-tab__highlight" }
               [
-                H.h6
-                {}
-                [
-                  H.text "Selected branch"
-                ]
-              ,
                 H.ul
                 { className: "list-group" }
                 [
@@ -152,6 +146,12 @@ component = R.hooksComponent componentName cpt where
                     [
                       H.text s
                     ]
+                  ,
+                    H.span
+                    { className: "phylo-selection-tab__highlight__type" }
+                    [
+                      H.text "branch"
+                    ]
                   ]
                 ]
               ]
@@ -165,12 +165,6 @@ component = R.hooksComponent componentName cpt where
               H.div
               { className: "phylo-selection-tab__highlight" }
               [
-                H.h6
-                {}
-                [
-                  H.text "Selected term"
-                ]
-              ,
                 H.ul
                 { className: "list-group" }
                 [
@@ -186,6 +180,12 @@ component = R.hooksComponent componentName cpt where
                     [
                       H.text s
                     ]
+                  ,
+                    H.span
+                    { className: "phylo-selection-tab__highlight__type" }
+                    [
+                      H.text "term"
+                    ]
                   ]
                 ,
                   H.li
@@ -204,6 +204,17 @@ component = R.hooksComponent componentName cpt where
                 ]
               ]
             ]
+      ,
+        -- (separator)
+        R2.if' (haveSelection) $
+
+          H.div
+          { className: "phylo-selection-tab__separator" }
+          [
+            B.icon
+            { name: "angle-down"
+            }
+          ]
       ,
         -- No extracted result
         R2.if' (haveSelection && null extractedTerms) $
@@ -211,12 +222,6 @@ component = R.hooksComponent componentName cpt where
           H.div
           { className: "phylo-selection-tab__selection" }
           [
-            H.h6
-            {}
-            [
-              H.text "Extracted result"
-            ]
-          ,
             B.caveat
             {}
             [
@@ -230,12 +235,6 @@ component = R.hooksComponent componentName cpt where
           H.div
           { className: "phylo-selection-tab__selection" }
           [
-            H.h6
-            {}
-            [
-              H.text "Extracted result"
-            ]
-          ,
             H.ul
             { className: "list-group" }
             [

src/sass/_legacy/_phylo.scss

@@ -596,6 +596,11 @@ $decreasing-color: #11638F;
       white-space: normal;
       word-break: break-word;
     }
+
+    &__type {
+      padding: $badge-padding-y $badge-padding-x;
+      font-weight: bold;
+    }
   }
 
   &__selection {
@@ -632,6 +637,11 @@ $decreasing-color: #11638F;
   &__nil {
     margin: $margin-y $margin-x
   }
+
+  &__separator {
+    color: $gray-500;
+    text-align: center;
+  }
 }
 
 ////////////////////////////////////////////////////////////////