Merge branch '228-doc-annotation-multiterms' into dev-doc-multi-annotation

dist/styles/annotation.css

-.annotation-run {
-    cursor: pointer;
-}
-.annotation-run.candidate-term, .context-menu .candidate-term{
-    color: #000;
-    background-color: #aaa;
-}
-.annotation-run.graph-term, .context-menu .graph-term {
-    color: #000;
-    background-color: #0f0;
-}
-.annotation-run.stop-term, .context-menu .stop-term {
-    color: #000;
-    background-color: #f00;
-}

dist/styles/sass.css

@@ -778,15 +778,15 @@ ul li {
 }
 .annotation-run.candidate-term.graph-term.stop-term {
   color: #000;
-  background-image: linear-gradient(rgba(184, 184, 184, 0.34), rgba(184, 184, 184, 0.34)), linear-gradient(rgba(149, 210, 149, 0.33), rgba(149, 210, 149, 0.33)), linear-gradient(rgba(245, 148, 153, 0.33), rgba(245, 148, 153, 0.33));
+  background-image: linear-gradient(rgba(184, 218, 255, 0.34), rgba(184, 218, 255, 0.34)), linear-gradient(rgba(149, 210, 149, 0.33), rgba(149, 210, 149, 0.33)), linear-gradient(rgba(245, 148, 153, 0.33), rgba(245, 148, 153, 0.33));
 }
 .annotation-run.candidate-term.graph-term {
   color: #000;
-  background-image: linear-gradient(rgba(184, 184, 184, 0.5), rgba(184, 184, 184, 0.5)), linear-gradient(rgba(149, 210, 149, 0.5), rgba(149, 210, 149, 0.5));
+  background-image: linear-gradient(rgba(184, 218, 255, 0.5), rgba(184, 218, 255, 0.5)), linear-gradient(rgba(149, 210, 149, 0.5), rgba(149, 210, 149, 0.5));
 }
 .annotation-run.candidate-term.stop-term {
   color: #000;
-  background-image: linear-gradient(rgba(184, 184, 184, 0.5), rgba(184, 184, 184, 0.5)), linear-gradient(rgba(245, 148, 153, 0.5), rgba(245, 148, 153, 0.5));
+  background-image: linear-gradient(rgba(184, 218, 255, 0.5), rgba(184, 218, 255, 0.5)), linear-gradient(rgba(245, 148, 153, 0.5), rgba(245, 148, 153, 0.5));
 }
 .annotation-run.graph-term.stop-term {
   color: #000;
@@ -794,7 +794,7 @@ ul li {
 }
 .annotation-run.candidate-term {
   color: #000;
-  background-color: #B8B8B876;
+  background-color: #b8daff;
 }
 .annotation-run.graph-term {
   color: #000;
@@ -807,7 +807,7 @@ ul li {
 
 .context-menu .candidate-term {
   color: #000;
-  background-color: #B8B8B876;
+  background-color: #b8daff;
 }
 .context-menu .graph-term {
   color: #000;

dist/styles/sass.css.map

-{"version":3,"sourceRoot":"","sources":["../../src/sass/_menu.sass","../../src/sass/_context_menu.sass","../../src/sass/_graph.sass","../../src/sass/_login.sass","../../src/sass/_tree.sass","../../src/sass/_code_editor.sass","../../src/sass/_styles.sass","../../src/sass/_range_slider.sass","../../src/sass/_annotation.sass"],"names":[],"mappings":"AAAA;AAEA;AACA;AACA;AACA;AACA;AAEA;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;;;AAEF;AACI;EACA;;;AAEJ;AACI;EACA;;;AAGJ;AACA;EACI;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;EACA;;;AAEF;EACE;;;AC7CF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AClBF;EACE;EACA;EACA;;;AAEF;AAkCE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAxCA;EAZA;EACA;EAEA;EAWE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;;AAGA;EACE;EACA;;AACN;EACE;;AACF;EACE;;AAEF;EApCA;EACA;EAEA;EAmCE;EACA;;AACF;EACE;;AACF;EACE;;AAWF;EAEE;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AAEJ;EACE;;AAEA;EACE;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACrFJ;EACE;;;AAOF;EACE;;AACA;EACE;EACA;;;AAEJ;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;AAEE;EACE;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AAKJ;EACE;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EACE;;AACF;EACE;EACA;EACA;EACA;;AACA;EACE;;AACN;EACE;EACA;EACA;EACA;;;AAGN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;;;AAGF;EACE;;;AAEJ;EACI;EACA;;;AAGF;EACE;;;AAEJ;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;ACvKF;EACE;;;AAGA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAER;EACE;;AAEE;EACE;;AACA;EACE;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;EACA;EACA;;AACF;EACE;;AACF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AACF;EACE;;AAGN;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AAIR;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAEV;EACE;;AACF;EACE;;AAEE;EACE;;AACF;EACE;;AACN;EACE;;AAEE;EACE;;;AAGR;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;;AAIF;EACE;;AAEA;EACE;;;AAGN;EACE;;AACF;EACE;;AACF;EACE;;;AC3IA;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EApCR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AA0CM;EACE;EACA;EACA;EACA;EACA;EA5CR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAkDE;EACE;EACA;EACA;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAGE;EACE;;AAEF;EACE;;;ACrFV;EACE;;AACF;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGE;EACE;EACA;;AAEF;EACE;EACA;;;AAEV;EACE;;AACA;EACE;;AACF;EACE;EACA;EACA;;;AAIA;EACE;;AACA;EACE;EACA;;AACF;EACE;;AACA;EACE;;AACJ;EACE;;;AAER;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;AAGI;EACE;;AACF;EACE;;;AAEN;EACE;EACA;EACA;;;AAIA;EACE;;AACF;EACE;;;AAGF;EACE;;;AAEJ;EACE;EACA;;;AChFF;EACE;AACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EAEA;;AAEA;EACE;EAEA;EACA;EACA;;;AAGN;EACE;;;ACzBJ;EACE;;AAEA;EANE;EACA;;AAQF;EAbE;EACA;;AAeF;EAhBE;EACA;;AAkBF;EAnBE;EACA;;AAqBF;EA1BE;EACA,kBALyB;;AAiC3B;EA7BE;EACA,kBANqB;;AAqCvB;EAhCE;EACA,kBAJoB;;;AAuCtB;EApCE;EACA,kBALyB;;AA2C3B;EAvCE;EACA,kBANqB;;AA+CvB;EA1CE;EACA,kBAJoB","file":"sass.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/sass/_menu.sass","../../src/sass/_context_menu.sass","../../src/sass/_graph.sass","../../src/sass/_login.sass","../../src/sass/_tree.sass","../../src/sass/_code_editor.sass","../../src/sass/_styles.sass","../../src/sass/_range_slider.sass","../../src/sass/_annotation.sass"],"names":[],"mappings":"AAAA;AAEA;AACA;AACA;AACA;AACA;AAEA;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;;;AAEF;AACI;EACA;;;AAEJ;AACI;EACA;;;AAGJ;AACA;EACI;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;EACA;;;AAEF;EACE;;;AC7CF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AClBF;EACE;EACA;EACA;;;AAEF;AAkCE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAxCA;EAZA;EACA;EAEA;EAWE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;;AAGA;EACE;EACA;;AACN;EACE;;AACF;EACE;;AAEF;EApCA;EACA;EAEA;EAmCE;EACA;;AACF;EACE;;AACF;EACE;;AAWF;EAEE;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AAEJ;EACE;;AAEA;EACE;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACrFJ;EACE;;;AAOF;EACE;;AACA;EACE;EACA;;;AAEJ;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;AAEE;EACE;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AAKJ;EACE;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EACE;;AACF;EACE;EACA;EACA;EACA;;AACA;EACE;;AACN;EACE;EACA;EACA;EACA;;;AAGN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;;;AAGF;EACE;;;AAEJ;EACI;EACA;;;AAGF;EACE;;;AAEJ;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;ACvKF;EACE;;;AAGA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAER;EACE;;AAEE;EACE;;AACA;EACE;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;EACA;EACA;;AACF;EACE;;AACF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AACF;EACE;;AAGN;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AAIR;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAEV;EACE;;AACF;EACE;;AAEE;EACE;;AACF;EACE;;AACN;EACE;;AAEE;EACE;;;AAGR;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;;AAIF;EACE;;AAEA;EACE;;;AAGN;EACE;;AACF;EACE;;AACF;EACE;;;AC3IA;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EApCR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AA0CM;EACE;EACA;EACA;EACA;EACA;EA5CR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAkDE;EACE;EACA;EACA;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAGE;EACE;;AAEF;EACE;;;ACrFV;EACE;;AACF;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGE;EACE;EACA;;AAEF;EACE;EACA;;;AAEV;EACE;;AACA;EACE;;AACF;EACE;EACA;EACA;;;AAIA;EACE;;AACA;EACE;EACA;;AACF;EACE;;AACA;EACE;;AACJ;EACE;;;AAER;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;AAGI;EACE;;AACF;EACE;;;AAEN;EACE;EACA;EACA;;;AAIA;EACE;;AACF;EACE;;;AAGF;EACE;;;AAEJ;EACE;EACA;;;AChFF;EACE;AACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EAEA;;AAEA;EACE;EAEA;EACA;EACA;;;AAGN;EACE;;;ACxBJ;EACE;;AAEA;EANE;EACA;;AAQF;EAbE;EACA;;AAeF;EAhBE;EACA;;AAkBF;EAnBE;EACA;;AAqBF;EA1BE;EACA,kBALyB;;AAiC3B;EA7BE;EACA,kBAPqB;;AAsCvB;EAhCE;EACA,kBAJoB;;;AAuCtB;EApCE;EACA,kBALyB;;AA2C3B;EAvCE;EACA,kBAPqB;;AAgDvB;EA1CE;EACA,kBAJoB","file":"sass.css"}
\ No newline at end of file

src/Gargantext/Components/Annotation/AnnotatedField.purs

@@ -11,11 +11,14 @@
 -- | 2. We will need a more ambitious search algorithm for skipgrams.
 module Gargantext.Components.Annotation.AnnotatedField where
 
+import Data.Array as A
+import Data.List ( List(..), (:), length )
 import Data.Maybe ( Maybe(..), maybe )
+import Data.String.Common ( joinWith )
+import Data.Tuple (Tuple(..), snd)
+import Data.Tuple.Nested ( (/\) )
 --import DOM.Simple.Console (log2)
 import DOM.Simple.Event as DE
-import Data.Tuple ( Tuple )
-import Data.Tuple.Nested ( (/\) )
 import Effect ( Effect )
 import Reactix as R
 import Reactix.DOM.HTML as HTML
@@ -24,8 +27,9 @@ import Reactix.SyntheticEvent as E
 import Gargantext.Prelude
 
 import Gargantext.Components.Annotation.Menu ( annotationMenu, AnnotationMenu, MenuType(..) )
-import Gargantext.Components.Annotation.Utils (termClass)
+import Gargantext.Components.Annotation.Utils ( termBootstrapClass, termClass )
 import Gargantext.Components.NgramsTable.Core (NgramsTable, NgramsTerm, findNgramTermList, highlightNgrams, normNgram)
+import Gargantext.Utils.Reactix as R2
 import Gargantext.Utils.Selection as Sel
 import Gargantext.Types (CTabNgramType(..), TermList)
 
@@ -43,8 +47,8 @@ type MouseEvent = E.SyntheticEvent DE.MouseEvent
 -- defaultProps :: Record Props
 -- defaultProps = { ngrams: NgramsTable Map.empty, text: Nothing, setTermList: \_ _ _ -> pure unit }
 
-annotatedField :: Record Props -> R.Element
-annotatedField p = R.createElement annotatedFieldComponent p []
+annotatedField :: R2.Component Props
+annotatedField = R.createElement annotatedFieldComponent
 
 annotatedFieldComponent :: R.Component Props
 annotatedFieldComponent = R.hooksComponentWithModule thisModule "annotatedField" cpt
@@ -63,50 +67,46 @@ annotatedFieldComponent = R.hooksComponentWithModule thisModule "annotatedField"
       pure $ HTML.div wrapperProps
         [ maybe (HTML.div {} []) annotationMenu $ R.readRef menuRef
         , HTML.div { className: "annotated-field-runs" }
-             $ annotateRun
-            <$> wrap
-            <$> compile ngrams fieldText
+             ((\p -> annotateRun p []) <$> wrap <$> compile ngrams fieldText)
         ]
 
-compile :: NgramsTable -> Maybe String -> Array (Tuple String (Maybe TermList))
+compile :: NgramsTable -> Maybe String -> Array (Tuple String (List (Tuple NgramsTerm TermList)))
 compile ngrams = maybe [] (highlightNgrams CTabTerms ngrams)
 
 -- Runs
 
-onAnnotationSelect { menuRef, ngrams, setRedrawMenu, setTermList } text mList event =
-  case mList of
-    Just list ->
-      showMenu { event
-                , getList: const (Just list)
-                , menuRef
-                , menuType: SetTermListItem
-                , setRedrawMenu
-                , setTermList
-                , text }
-    Nothing -> do
-      s <- Sel.getSelection
-      case s of
-        Just sel -> do
-          case Sel.selectionToString sel of
-            "" -> hideMenu { menuRef, setRedrawMenu }
-            sel' -> do
-              showMenu { event
-                        , getList: findNgramTermList ngrams
-                        , menuRef
-                        , menuType: NewNgram
-                        , setRedrawMenu
-                        , setTermList
-                        , text: sel' }
-        Nothing -> hideMenu { menuRef, setRedrawMenu }
-
-showMenu { event, getList, menuRef, menuType, setRedrawMenu, setTermList, text } = do
+onAnnotationSelect { menuRef, ngrams, setRedrawMenu, setTermList } Nothing event = do
+  s <- Sel.getSelection
+  case s of
+    Just sel -> do
+      case Sel.selectionToString sel of
+        "" -> hideMenu { menuRef, setRedrawMenu }
+        sel' -> do
+          showMenu { event
+                   , getList: findNgramTermList ngrams
+                   , menuRef
+                   , menuType: NewNgram
+                   , ngram: normNgram CTabTerms sel'
+                   , setRedrawMenu
+                   , setTermList }
+    Nothing -> hideMenu { menuRef, setRedrawMenu }
+onAnnotationSelect { menuRef, ngrams, setRedrawMenu, setTermList } (Just (Tuple ngram list)) event =
+  showMenu { event
+           , getList: const (Just list)
+           , menuRef
+           , menuType: SetTermListItem
+           , ngram
+           , setRedrawMenu
+           , setTermList }
+
+showMenu { event, getList, menuRef, menuType, ngram, setRedrawMenu, setTermList } = do
   let x = E.clientX event
       y = E.clientY event
-      n = normNgram CTabTerms text
-      list = getList n
+      -- n = normNgram CTabTerms text
+      list = getList ngram
       redrawMenu = setRedrawMenu not
       setList t = do
-        setTermList n list t
+        setTermList ngram list t
         hideMenu { menuRef, setRedrawMenu }
   E.preventDefault event
   --range <- Sel.getRange sel 0
@@ -128,24 +128,32 @@ hideMenu { menuRef, setRedrawMenu } = do
   redrawMenu
 
 type Run =
-  ( list :: (Maybe TermList)
-  , onSelect :: String -> Maybe TermList -> MouseEvent -> Effect Unit
+  ( list :: List (Tuple NgramsTerm TermList)
+  , onSelect :: Maybe (Tuple NgramsTerm TermList) -> MouseEvent -> Effect Unit
   , text :: String
   )
 
-annotateRun :: Record Run -> R.Element
-annotateRun p = R.createElement annotatedRunComponent p []
+annotateRun :: R2.Component Run
+annotateRun = R.createElement annotatedRunComponent
 
 annotatedRunComponent :: R.Component Run
 annotatedRunComponent = R.staticComponent "AnnotatedRun" cpt
   where
-    cpt { list, onSelect, text } _ = elt [ HTML.text text ]
+    cpt    { list: Nil, onSelect, text }     _ =
+      HTML.span { on: { mouseUp: onSelect Nothing } } [ HTML.text text ]
+
+    cpt    { list: lst@((ngram /\ list) : otherLists), onSelect, text } _ =
+      HTML.span { className
+                , on: { click: onSelect (Just (ngram /\ list)) } } [ HTML.text text ]
       where
-        cb = onSelect text list
-        elt =
-          case list of
-             Nothing -> HTML.span { on: { mouseUp: cb } }
-             Just l  -> HTML.span { -- className: "annotation-run bg-" <> termBootstrapClass l
-                                    className: "annotation-run " <> termClass l
-                                  , on: { click: cb } 
-                                  }
+        bgClasses = joinWith " " $ A.fromFoldable $ termClass <<< snd <$> lst
+        -- className = "annotation-run bg-" <> termBootstrapClass list
+        className = "annotation-run " <> bgClasses
+        -- cb = onSelect text list
+        -- elt =
+        --   case list of
+        --      Nothing -> HTML.span { on: { mouseUp: cb } }
+        --      Just l  -> HTML.span { -- className: "annotation-run bg-" <> termBootstrapClass l
+        --                             className: "annotation-run " <> termClass l
+        --                           , on: { click: cb }
+        --                           }

src/Gargantext/Components/Annotation/Utils.purs

@@ -3,11 +3,12 @@ module Gargantext.Components.Annotation.Utils where
 import Gargantext.Types ( TermList(..) )
 
 termClass :: TermList -> String
+termClass CandidateTerm = "candidate-term"
 termClass MapTerm = "graph-term"
 termClass StopTerm = "stop-term"
-termClass CandidateTerm = "candidate-term"
 
 termBootstrapClass :: TermList -> String
+-- termBootstrapClass CandidateTerm = "warning"
 termBootstrapClass MapTerm = "success"
 termBootstrapClass StopTerm = "danger"
 termBootstrapClass CandidateTerm = "primary"

src/Gargantext/Components/NgramsTable/Core.purs

@@ -102,9 +102,10 @@ import Data.Lens.Index (class Index, ix)
 import Data.Lens.Iso.Newtype (_Newtype)
 import Data.Lens.Record (prop)
 import Data.List ((:), List(Nil))
+import Data.List as L
 import Data.Map (Map)
 import Data.Map as Map
-import Data.Maybe (Maybe(..), fromMaybe, isJust)
+import Data.Maybe (Maybe(..), fromMaybe, fromMaybe', isJust)
 import Data.Monoid.Additive (Additive(..))
 import Data.Newtype (class Newtype)
 import Data.Set (Set)
@@ -116,7 +117,7 @@ import Data.String.Regex.Flags (global, multiline) as R
 import Data.String.Utils as SU
 import Data.Symbol (SProxy(..))
 import Data.These (These(..))
-import Data.Traversable (for, traverse_)
+import Data.Traversable (for, traverse_, traverse)
 import Data.TraversableWithIndex (traverseWithIndex)
 import Data.Tuple (Tuple(..), snd)
 import Data.Tuple.Nested ((/\))
@@ -500,67 +501,70 @@ wordBoundaryReg2 = case R.regex ("(" <> wordBoundaryChars <> ")\\1") (R.global <
   Left e  -> unsafePartial $ crashWith e
   Right r -> r
 
+type HighlightElement = Tuple String (List (Tuple NgramsTerm TermList))
+type HighlightAccumulator = List HighlightElement
+
 -- TODO: while this function works well with word boundaries,
 --       it inserts too many spaces.
-highlightNgrams :: CTabNgramType -> NgramsTable -> String -> Array (Tuple String (Maybe TermList))
+highlightNgrams :: CTabNgramType -> NgramsTable -> String -> Array HighlightElement
 highlightNgrams ntype table@(NgramsTable {ngrams_repo_elements: elts}) input0 =
     -- trace {pats, input0, input, ixs} \_ ->
-    let sN = unsafePartial (foldl goFold {i0: 0, s: input, l: Nil} ixs) in
-    A.reverse (A.fromFoldable (consNonEmpty (undb (init sN.s)) sN.l))
+    A.fromFoldable ((\(s /\ ls)-> undb s /\ ls) <$> unsafePartial (foldl goFold ((input /\ Nil) : Nil) ixs))
   where
     spR x = " " <> R.replace wordBoundaryReg "$1$1" x <> " "
     reR = R.replace wordBoundaryReg " "
     db = S.replaceAll (S.Pattern " ") (S.Replacement "  ")
     sp x = " " <> db x <> " "
     undb = R.replace wordBoundaryReg2 "$1"
-    init x = S.take (S.length x - 1) x
     input = spR input0
     pats = A.fromFoldable (Map.keys elts)
     ixs = indicesOfAny (sp <<< ngramsTermText <$> pats) (normNgramInternal ntype input)
 
-    consOnJustTail s xs@(Tuple _ (Just _) : _) =
-      Tuple s Nothing : xs
-    consOnJustTail _ xs = xs
-
-    consNonEmpty x xs
-      | S.null x  = xs
-      | otherwise = Tuple x Nothing : xs
-
-    -- NOTE that only the first matching pattern is used, the others are ignored!
-    goFold :: Partial => _ -> Tuple Int (Array Int) -> _
-    goFold { i0, s, l } (Tuple i pis)
-      | i < i0    =
-        -- Skip this pattern which is overlapping with a previous one.
-        { i0, s, l }
-      | otherwise =
-      case A.index pis 0 of
+    splitAcc :: Partial => Int -> HighlightAccumulator
+             -> Tuple HighlightAccumulator HighlightAccumulator
+    splitAcc i = go 0 Nil
+      where
+      go j pref acc =
+        case compare i j of
+          LT -> crashWith "highlightNgrams: splitAcc': i < j"
+          EQ -> L.reverse pref /\ acc
+          GT ->
+            case acc of
+              Nil -> crashWith "highlightNgrams: splitAcc': acc=Nil" -- pref /\ Nil
+              elt@(s /\ ls) : elts ->
+                let slen = S.length s in
+                case compare i (j + slen) of
+                  LT -> let {before: s0, after: s1} = S.splitAt (i - j) s in
+                        L.reverse ((s0 /\ ls) : pref) /\ ((s1 /\ ls) : elts)
+                  EQ -> L.reverse (elt : pref) /\ elts
+                  GT -> go (j + slen) (elt : pref) elts
+
+
+    extractInputTextMatch :: Int -> Int -> String -> String
+    extractInputTextMatch i len input = undb $ S.take len $ S.drop (i + 1) input
+
+    addNgramElt ng ne_list (elt /\ elt_lists) = (elt /\ ((ng /\ ne_list) : elt_lists))
+
+    goAcc :: Partial => Int -> HighlightAccumulator -> Tuple NgramsTerm Int -> HighlightAccumulator
+    goAcc i acc (pat /\ lpat) =
+      case lookupRootList pat table of
         Nothing ->
-          { i0, s, l }
-        Just pi ->
-          case A.index pats pi of
-            Nothing ->
-              crashWith "highlightNgrams: out of bounds pattern"
-            Just pat ->
-              let lpat = S.length (db (ngramsTermText pat)) in
-              case lookupRootList pat table of
-                Nothing ->
-                  crashWith "highlightNgrams: pattern missing from table"
-                Just ne_list ->
-                  let
-                    s1    = S.splitAt (i - i0) s
-                    s2    = S.splitAt lpat     (S.drop 1 s1.after)
-                    s3    = S.splitAt 1        s2.after
-                    unspB = if i0 == 0 then S.drop 1 else identity
-                    s3b   = s3.before
-                  in
-                  -- trace {s, i, i0, s1, s2, s3, pat, lpat, s3b} \_ ->
-                  -- `undb s2.before` and pat might differ by casing only!
-                  { i0: i + lpat + 2
-                  , s:  s3.after
-                  , l:  Tuple (undb s2.before) (Just ne_list) :
-                        consOnJustTail s3b
-                        (consNonEmpty (unspB (undb s1.before)) l)
-                  }
+          crashWith "highlightNgrams: pattern missing from table"
+        Just ne_list ->
+          let
+            (acc0 /\ acc1_2) = splitAcc i acc
+            (acc1 /\ acc2) = splitAcc (lpat + 1) acc1_2
+            text = extractInputTextMatch i lpat input
+            ng = normNgram ntype text
+          in
+            acc0 <> (addNgramElt ng ne_list <$> acc1) <> acc2
+
+    goFold :: Partial => HighlightAccumulator -> Tuple Int (Array Int) -> HighlightAccumulator
+    goFold acc (Tuple i pis) = foldl (goAcc i) acc $
+                           --  A.sortWith snd $
+                               map (\pat -> pat /\ S.length (db (ngramsTermText pat))) $
+                               fromMaybe' (\_ -> crashWith "highlightNgrams: out of bounds pattern") $
+                               traverse (A.index pats) pis
 
 -----------------------------------------------------------------------------------
 

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

@@ -123,7 +123,7 @@ docViewCpt = R.hooksComponentWithModule thisModule "docView" cpt
           ngrams = applyNgramsPatches (fst state) initTable
           annotate text = AnnotatedField.annotatedField { ngrams
                                                         , setTermList
-                                                        , text }
+                                                        , text } []
           badge s = H.span { className: "badge badge-default badge-pill" } [ H.text s ]
           badgeLi s = H.span { className: "list-group-item-heading" } [
                         H.span { className: "badge-container" } [

src/sass/_annotation.sass

@@ -4,7 +4,8 @@
 
 // Copied from bootstrap's bg-warning, bg-success, bg-danger:
 $annotation-graph-color: #95D29593
-$annotation-candidate-color: #B8B8B876
+// $annotation-candidate-color: #B8B8B876
+$annotation-candidate-color: #b8daff
 $annotation-stop-color: #F5949931
 
 @mixin lg1($color)