changes without random html id

dist/styles/bootstrap-darkster.css

@@ -8236,6 +8236,12 @@ a:focus {
 #portal .text-nowrap {
   white-space: nowrap;
 }
+#app .text-truncate,
+#portal .text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 #app .text-left,
 #portal .text-left {
   text-align: left;
@@ -9324,6 +9330,33 @@ a:focus {
 #portal .virtual-space::after {
   content: "​";
 }
+#app .btn-seemore,
+#portal .btn-seemore {
+  text-decoration: none;
+  font-size: x-small;
+}
+#app .btn-seemore :hover,
+#portal .btn-seemore :hover {
+  text-decoration: underline;
+}
+#app .annotated-field-runs.collapse:not(.show),
+#portal .annotated-field-runs.collapse:not(.show) {
+  display: block;
+  max-height: 3.5rem;
+  overflow: hidden;
+}
+#app .annotated-field-runs.collapsing,
+#portal .annotated-field-runs.collapsing {
+  height: 3rem;
+}
+#app a.btn-seemore.collapsed::after,
+#portal a.btn-seemore.collapsed::after {
+  content: "+ show more";
+}
+#app a.btn-seemore:not(.collapsed)::after,
+#portal a.btn-seemore:not(.collapsed)::after {
+  content: "- show less";
+}
 
 .range-control {
   display: inline-flex;

dist/styles/bootstrap-default.css

@@ -8042,6 +8042,12 @@ a:focus {
 #portal .text-nowrap {
   white-space: nowrap;
 }
+#app .text-truncate,
+#portal .text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 #app .text-left,
 #portal .text-left {
   text-align: left;
@@ -9130,6 +9136,33 @@ a:focus {
 #portal .virtual-space::after {
   content: "​";
 }
+#app .btn-seemore,
+#portal .btn-seemore {
+  text-decoration: none;
+  font-size: x-small;
+}
+#app .btn-seemore :hover,
+#portal .btn-seemore :hover {
+  text-decoration: underline;
+}
+#app .annotated-field-runs.collapse:not(.show),
+#portal .annotated-field-runs.collapse:not(.show) {
+  display: block;
+  max-height: 3.5rem;
+  overflow: hidden;
+}
+#app .annotated-field-runs.collapsing,
+#portal .annotated-field-runs.collapsing {
+  height: 3rem;
+}
+#app a.btn-seemore.collapsed::after,
+#portal a.btn-seemore.collapsed::after {
+  content: "+ show more";
+}
+#app a.btn-seemore:not(.collapsed)::after,
+#portal a.btn-seemore:not(.collapsed)::after {
+  content: "- show less";
+}
 
 .range-control {
   display: inline-flex;

dist/styles/bootstrap-greyson.css

@@ -7802,6 +7802,12 @@ a:focus {
 #portal .text-nowrap {
   white-space: nowrap;
 }
+#app .text-truncate,
+#portal .text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 #app .text-left,
 #portal .text-left {
   text-align: left;
@@ -8890,6 +8896,33 @@ a:focus {
 #portal .virtual-space::after {
   content: "​";
 }
+#app .btn-seemore,
+#portal .btn-seemore {
+  text-decoration: none;
+  font-size: x-small;
+}
+#app .btn-seemore :hover,
+#portal .btn-seemore :hover {
+  text-decoration: underline;
+}
+#app .annotated-field-runs.collapse:not(.show),
+#portal .annotated-field-runs.collapse:not(.show) {
+  display: block;
+  max-height: 3.5rem;
+  overflow: hidden;
+}
+#app .annotated-field-runs.collapsing,
+#portal .annotated-field-runs.collapsing {
+  height: 3rem;
+}
+#app a.btn-seemore.collapsed::after,
+#portal a.btn-seemore.collapsed::after {
+  content: "+ show more";
+}
+#app a.btn-seemore:not(.collapsed)::after,
+#portal a.btn-seemore:not(.collapsed)::after {
+  content: "- show less";
+}
 
 .range-control {
   display: inline-flex;

dist/styles/bootstrap-herbie.css

@@ -8050,6 +8050,12 @@ a:focus {
 #portal .text-nowrap {
   white-space: nowrap;
 }
+#app .text-truncate,
+#portal .text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 #app .text-left,
 #portal .text-left {
   text-align: left;
@@ -9138,6 +9144,33 @@ a:focus {
 #portal .virtual-space::after {
   content: "​";
 }
+#app .btn-seemore,
+#portal .btn-seemore {
+  text-decoration: none;
+  font-size: x-small;
+}
+#app .btn-seemore :hover,
+#portal .btn-seemore :hover {
+  text-decoration: underline;
+}
+#app .annotated-field-runs.collapse:not(.show),
+#portal .annotated-field-runs.collapse:not(.show) {
+  display: block;
+  max-height: 3.5rem;
+  overflow: hidden;
+}
+#app .annotated-field-runs.collapsing,
+#portal .annotated-field-runs.collapsing {
+  height: 3rem;
+}
+#app a.btn-seemore.collapsed::after,
+#portal a.btn-seemore.collapsed::after {
+  content: "+ show more";
+}
+#app a.btn-seemore:not(.collapsed)::after,
+#portal a.btn-seemore:not(.collapsed)::after {
+  content: "- show less";
+}
 
 .range-control {
   display: inline-flex;

dist/styles/bootstrap-monotony.css

@@ -8051,6 +8051,12 @@ a:focus {
 #portal .text-nowrap {
   white-space: nowrap;
 }
+#app .text-truncate,
+#portal .text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 #app .text-left,
 #portal .text-left {
   text-align: left;
@@ -9139,6 +9145,33 @@ a:focus {
 #portal .virtual-space::after {
   content: "​";
 }
+#app .btn-seemore,
+#portal .btn-seemore {
+  text-decoration: none;
+  font-size: x-small;
+}
+#app .btn-seemore :hover,
+#portal .btn-seemore :hover {
+  text-decoration: underline;
+}
+#app .annotated-field-runs.collapse:not(.show),
+#portal .annotated-field-runs.collapse:not(.show) {
+  display: block;
+  max-height: 3.5rem;
+  overflow: hidden;
+}
+#app .annotated-field-runs.collapsing,
+#portal .annotated-field-runs.collapsing {
+  height: 3rem;
+}
+#app a.btn-seemore.collapsed::after,
+#portal a.btn-seemore.collapsed::after {
+  content: "+ show more";
+}
+#app a.btn-seemore:not(.collapsed)::after,
+#portal a.btn-seemore:not(.collapsed)::after {
+  content: "- show less";
+}
 
 .range-control {
   display: inline-flex;

src/Gargantext/Components/Annotation/Field.purs

@@ -9,7 +9,10 @@
 -- |
 -- | 1. We must only re-search the text when the ngrams change for performance
 -- | 2. We will need a more ambitious search algorithm for skipgrams.
-module Gargantext.Components.Annotation.Field where
+module Gargantext.Components.Annotation.Field
+  ( annotatedField
+  )
+  where
 
 import Gargantext.Prelude
 
@@ -52,6 +55,7 @@ type MouseEvent = E.SyntheticEvent DE.MouseEvent
 -- defaultProps :: Record Props
 -- defaultProps = { ngrams: NgramsTable Map.empty, text: Nothing, setTermList: \_ _ _ -> pure unit }
 
+
 annotatedField :: R2.Leaf Props
 annotatedField = R2.leaf annotatedFieldCpt
 annotatedFieldCpt :: R.Component Props
@@ -98,6 +102,8 @@ annotatedFieldInnerCpt = here.component "annotatedFieldInner" cpt where
           , text
           }
       
+      htmlId = "annotated-field-runs-" <> "0"
+
     -- | Render
     -- |
     pure $
@@ -112,7 +118,10 @@ annotatedFieldInnerCpt = here.component "annotatedFieldInner" cpt where
           EditionMode ->
 
             H.div
-            { className: "annotated-field-runs" }
+            { className: "annotated-field-runs collapse"
+            , aria: { expanded: false } 
+            , id: htmlId
+            }
             ((\p -> annotateRun p) <$> wrap <$> compile cache ngrams fieldText)
 
 
@@ -129,6 +138,14 @@ annotatedFieldInnerCpt = here.component "annotatedFieldInner" cpt where
                 , onSelect: onAnnotationSelect { menuRef, ngrams, redrawMenu, setTermList }
                 }
               ]
+      ,
+        H.a { role: "button"
+            , className: "collapsed btn-seemore text-primary"
+            , data: { toggle: "collapse" }
+            , aria: { expanded: false, controls: htmlId }
+            , href: "#" <> htmlId
+            }
+            [ H.text "" ]
 
       ]
 

src/sass/base/_utilities.scss

@@ -164,6 +164,11 @@
   .text-justify  { text-align: justify; }
   .text-wrap     { white-space: normal; }
   .text-nowrap   { white-space: nowrap; }
+  .text-truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
   
   .text-left   { text-align: left;    }
   .text-right  { text-align: right;   }
@@ -351,4 +356,32 @@
       content: "\200B";
     }
   }
+
+
+  .btn-seemore {
+    text-decoration: none;
+    font-size: x-small;
+    :hover {
+      text-decoration: underline;
+    }
+  }
+
+  .annotated-field-runs.collapse:not(.show) {
+    display: block;
+    max-height: 3.5rem;
+    overflow: hidden;
+  }
+  
+  .annotated-field-runs.collapsing {
+    height: 3rem;
+  }
+  
+  a.btn-seemore.collapsed::after {
+    content: '+ show more';
+  }
+  
+  a.btn-seemore:not(.collapsed)::after {
+    content: '- show less';
+  }
+
 }