[ngrams] transparency for annotated terms

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

@@ -754,4 +754,49 @@ li .leaf:hover a.settings {
   height: 20px;
 }
 
+.annotation-run {
+  cursor: pointer;
+}
+.annotation-run.candidate-term.graph-term.stop-term {
+  color: #000;
+  background-image: linear-gradient(rgba(255, 152, 0, 0.34), rgba(255, 152, 0, 0.34)), linear-gradient(rgba(67, 160, 71, 0.33), rgba(67, 160, 71, 0.33)), linear-gradient(rgba(229, 57, 53, 0.33), rgba(229, 57, 53, 0.33));
+}
+.annotation-run.candidate-term.graph-term {
+  color: #000;
+  background-image: linear-gradient(rgba(255, 152, 0, 0.5), rgba(255, 152, 0, 0.5)), linear-gradient(rgba(67, 160, 71, 0.5), rgba(67, 160, 71, 0.5));
+}
+.annotation-run.candidate-term.stop-term {
+  color: #000;
+  background-image: linear-gradient(rgba(255, 152, 0, 0.5), rgba(255, 152, 0, 0.5)), linear-gradient(rgba(229, 57, 53, 0.5), rgba(229, 57, 53, 0.5));
+}
+.annotation-run.graph-term.stop-term {
+  color: #000;
+  background-image: linear-gradient(rgba(67, 160, 71, 0.5), rgba(67, 160, 71, 0.5)), linear-gradient(rgba(229, 57, 53, 0.5), rgba(229, 57, 53, 0.5));
+}
+.annotation-run.candidate-term {
+  color: #000;
+  background-color: #FF9800;
+}
+.annotation-run.graph-term {
+  color: #000;
+  background-color: #43A047;
+}
+.annotation-run.stop-term {
+  color: #000;
+  background-color: #E53935;
+}
+
+.context-menu .candidate-term {
+  color: #000;
+  background-color: #FF9800;
+}
+.context-menu .graph-term {
+  color: #000;
+  background-color: #43A047;
+}
+.context-menu .stop-term {
+  color: #000;
+  background-color: #E53935;
+}
+
 /*# sourceMappingURL=sass.css.map */

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"],"names":[],"mappings":"AAAA;AAEA;EACI;EACA;EACA;EACA;;;AAEJ;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;;;ACjBA;EACE;EACA;;AAEA;EACE;EACA;EACA;;AACA;EACE;EACA;;AAEN;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EAtCA;EACA;EAEA;EAqCE;EACA;;AACF;EACE;;AACF;EACE;;AAEF;EACE;;AAEF;EAlDA;EACA;EAEA;EAiDE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;;AAGA;EACE;EACA;;AACN;EACE;;AACF;EACE;;AAEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACrFJ;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;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;;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;;;AAEJ;EACI;EACA;;;AAGF;EACE;;;AAEJ;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AC1KF;EACE;;;AAGA;EACE;EACA;;AACA;EACE;;AACF;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;EACA;;;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;;;AC/HR;EACE;;AAEA;EACE;;AACA;EACE;;AACJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AACF;EACE;EACA;;AACA;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;EArDR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AA2DM;EACE;EACA;EACA;EACA;EACA;EA7DR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAmEE;EACE;EACA;EACA;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAGE;EACE;;AAEF;EACE;;;ACtGV;EACE;;AACF;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGE;EACE;EACA;;AAEF;EACE;EACA;;;AAEV;EACE;;AACA;EACE;EACA;EACA;;;AAKE;EACE;EACA;;AACF;EACE;;AACA;EACE;EACA;;AACJ;EACE;;AACA;EACE;;AACJ;EACE;;;AAER;EACE;;;AChDF;EACE;AACA;EACA;;AAEA;EACE;;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","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;EACI;EACA;EACA;EACA;;;AAEJ;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;;;ACjBA;EACE;EACA;;AAEA;EACE;EACA;EACA;;AACA;EACE;EACA;;AAEN;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EAtCA;EACA;EAEA;EAqCE;EACA;;AACF;EACE;;AACF;EACE;;AAEF;EACE;;AAEF;EAlDA;EACA;EAEA;EAiDE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;;AAGA;EACE;EACA;;AACN;EACE;;AACF;EACE;;AAEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACrFJ;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;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;;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;;;AAEJ;EACI;EACA;;;AAGF;EACE;;;AAEJ;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AC1KF;EACE;;;AAGA;EACE;EACA;;AACA;EACE;;AACF;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;EACA;;;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;;;AC/HR;EACE;;AAEA;EACE;;AACA;EACE;;AACJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AACF;EACE;EACA;;AACA;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;EArDR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AA2DM;EACE;EACA;EACA;EACA;EACA;EA7DR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAmEE;EACE;EACA;EACA;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAGE;EACE;;AAEF;EACE;;;ACtGV;EACE;;AACF;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGE;EACE;EACA;;AAEF;EACE;EACA;;;AAEV;EACE;;AACA;EACE;EACA;EACA;;;AAKE;EACE;EACA;;AACF;EACE;;AACA;EACE;EACA;;AACJ;EACE;;AACA;EACE;;AACJ;EACE;;;AAER;EACE;;;AChDF;EACE;AACA;EACA;;AAEA;EACE;;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;;;AC1BR;EACE;;AAEA;EACE;EANA;;AASF;EACE;EAbA;;AAgBF;EACE;EAjBA;;AAoBF;EACE;EArBA;;AAwBF;EACE;EACA,kBA/ByB;;AAiC3B;EACE;EACA,kBAlCqB;;AAoCvB;EACE;EACA,kBArCoB;;;AAwCtB;EACE;EACA,kBA5CyB;;AA8C3B;EACE;EACA,kBA/CqB;;AAiDvB;EACE;EACA,kBAlDoB","file":"sass.css"}
\ No newline at end of file

src/Gargantext/Components/Annotation/AnnotatedField.purs

@@ -11,9 +11,11 @@
 -- | 2. We will need a more ambitious search algorithm for skipgrams.
 module Gargantext.Components.Annotation.AnnotatedField where
 
-import Data.List ( List(..), (:) )
+import Data.Array as A
+import Data.List ( List(..), (:), length )
 import Data.Maybe ( Maybe(..), maybe )
-import Data.Tuple (Tuple(..))
+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
@@ -25,9 +27,10 @@ import Reactix.SyntheticEvent as E
 import Gargantext.Prelude
 
 import Gargantext.Types (CTabNgramType(..), TermList)
-import Gargantext.Components.Annotation.Utils ( termBootstrapClass )
+import Gargantext.Components.Annotation.Utils ( termBootstrapClass, termClass )
 import Gargantext.Components.NgramsTable.Core (NgramsTable, NgramsTerm, findNgramTermList, highlightNgrams, normNgram)
 import Gargantext.Components.Annotation.Menu ( annotationMenu, MenuType(..) )
+import Gargantext.Utils.Reactix as R2
 import Gargantext.Utils.Selection as Sel
 
 thisModule :: String
@@ -44,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
@@ -103,9 +106,7 @@ 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 (List (Tuple NgramsTerm TermList)))
@@ -119,8 +120,8 @@ type Run =
   , 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
@@ -128,10 +129,10 @@ annotatedRunComponent = R.staticComponent "AnnotatedRun" cpt
     cpt    { list: Nil, onSelect, text }     _ =
       HTML.span { on: { mouseUp: onSelect Nothing } } [ HTML.text text ]
 
-    cpt    { list: (ngram /\ list) : _otherLists, onSelect, text } _ =
-      -- TODO _otherLists
+    cpt    { list: lst@((ngram /\ list) : otherLists), onSelect, text } _ =
       HTML.span { className
                 , on: { click: onSelect (Just (ngram /\ list)) } } [ HTML.text text ]
       where
-        className = "annotation-run bg-" <> termBootstrapClass list
-
+        bgClasses = joinWith " " $ A.fromFoldable $ termClass <<< snd <$> lst
+        -- className = "annotation-run bg-" <> termBootstrapClass list
+        className = "annotation-run " <> bgClasses

src/Gargantext/Components/Annotation/Utils.purs

@@ -3,11 +3,11 @@ 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 = "warning"

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/sass.sass

@@ -6,3 +6,4 @@
 @use "_code_editor.sass"
 @use "_styles.sass"
 @use "_range_slider.sass"
+@use "_annotation.sass"