Ngrams Table Added to Navigation

dist/css/Login.css

@@ -27,3 +27,8 @@
 #user-page-info {
     margin-top : 38px;
 }
+
+.tableHeader {
+    background-color : blue;
+    color: white;
+}

src/Navigation.purs

@@ -35,6 +35,7 @@ import Thermite (PerformAction, Render, Spec, _render, cotransform, defaultPerfo
 import Unsafe.Coerce (unsafeCoerce)
 import UserPage as UP
 import GraphExplorer as GE
+import NgramsTable as NG
 
 type E e = (dom :: DOM, ajax :: AJAX, console :: CONSOLE | e)
 
@@ -54,6 +55,7 @@ type AppState =
   , showLogin :: Boolean
   , showCorpus :: Boolean
   , graphExplorer :: GE.State
+  , ngState :: NG.State
   }
 
 initAppState :: AppState
@@ -73,6 +75,7 @@ initAppState =
   , showLogin : false
   , showCorpus : false
   , graphExplorer : GE.initialState
+  , ngState : NG.initialState
   }
 
 data Action
@@ -93,6 +96,7 @@ data Action
   | CorpusAnalysisA CA.Action
   | ShowLogin
   | ShowAddcorpus
+  | NgramsA  NG.Action
 
 
 
@@ -246,6 +250,17 @@ _graphExplorerAction = prism GraphExplorerA \action ->
     _-> Left action
 
 
+
+_ngState :: Lens' AppState NG.State
+_ngState = lens (\s -> s.ngState) (\s ss -> s{ngState = ss})
+
+_ngAction :: Prism' Action NG.Action
+_ngAction = prism NgramsA \action ->
+  case action of
+    NgramsA caction -> Right caction
+    _-> Left action
+
+
 pagesComponent :: forall props eff. AppState -> Spec (E eff) AppState props Action
 pagesComponent s =
   case s.currentRoute of
@@ -269,7 +284,9 @@ pagesComponent s =
     selectSpec Tabview   = layout0 $ focus _tabviewState  _tabviewAction  TV.tab1
     -- To be removed
     selectSpec SearchView = layout0 $ focus _searchState _searchAction  S.searchSpec
+    selectSpec NGramsTable  = layout0 $ focus _ngState _ngAction  NG.ngramsTableSpec
     selectSpec PGraphExplorer = focus _graphExplorerState _graphExplorerAction  GE.spec
+
     selectSpec _ = simpleSpec defaultPerformAction defaultRender
 
 routingSpec :: forall props eff. Spec (dom :: DOM |eff) AppState props Action
@@ -598,3 +615,8 @@ dispatchAction dispatcher _ PGraphExplorer = do
   _ <- dispatcher $ SetRoute  $ PGraphExplorer
   --_ <- dispatcher $ GraphExplorerA $ GE.NoOp
   pure unit
+
+dispatchAction dispatcher _ NGramsTable = do
+  _ <- dispatcher $ SetRoute  $ NGramsTable
+  _ <- dispatcher $ NgramsA $ NG.NoOp
+  pure unit

src/NgramsTable.purs

+module NgramsTable where
+
+import Prelude
+
+import Control.Monad.Eff.Console (CONSOLE)
+import DOM (DOM)
+import Network.HTTP.Affjax (AJAX)
+import React.DOM (input, table, tbody, td, text, th, thead, tr)
+import React.DOM.Props (_type, checked, className, onChange, scope, title)
+import Thermite (PerformAction, Render, Spec, modifyState, simpleSpec)
+import Unsafe.Coerce (unsafeCoerce)
+
+type State =
+  {
+    completed :: Boolean
+  }
+
+initialState :: State
+initialState =
+  {
+    completed : true
+  }
+
+data Action
+  = NoOp
+  | ChangeCompleted Boolean
+
+
+performAction :: forall eff props. PerformAction ( console :: CONSOLE , ajax    :: AJAX, dom     :: DOM | eff ) State props Action
+performAction NoOp _ _ = void do
+  modifyState id
+
+performAction (ChangeCompleted b)   _ _ = void $ modifyState $ _ { completed = b }
+
+
+ngramsTableSpec :: forall props eff . Spec (console::CONSOLE, ajax::AJAX, dom::DOM | eff) State props Action
+ngramsTableSpec = simpleSpec performAction render
+  where
+    render :: Render State props Action
+    render dispatch _ state _ =
+      [table [ className "table able table-bordered"]
+                  [ thead [ className "tableHeader table-bordered"]
+                    [ tr []
+                      [ th [ scope "col"] [ text "Map" ]
+                      , th [ scope "col"] [ text "Stop"]
+                      , th [ scope "col"] [ text "Terms"]
+                      , th [ scope "col"] [ text "Occurences(nb)" ]
+                      ]
+                    ]
+                  , tbody []
+
+                    [ tr [] [
+                         td [] [ input_checkbox]
+                            , td [][ input_checkbox]
+                            , td [] [ text "India"]
+                            , td [] [ text "807"]
+                            ]
+                    , tr [] [ td [][  input_checkbox]
+                            , td [] [ input_checkbox]
+
+                            , td [] [ text "Tobacco use"]
+                            , td [] [ text "351"]
+                            ]
+                    , tr [] [ td []
+                              [  input_checkbox]
+                            , td []
+                              [ input_checkbox]
+                            , td [] [ text "tobacco"]
+                            , td [] [ text "336"]
+                            ]
+                    ,tr [] [ td []
+                              [  input_checkbox]
+                            , td []
+                              [ input_checkbox]
+                            , td [] [ text "studies"]
+                            , td [] [ text "282"]
+                            ]
+                    , tr [] [ td []
+                              [  input_checkbox]
+                            , td []
+                              [ input_checkbox]
+                            , td [] [ text "prevalence"]
+                            , td [] [ text "217"]
+                            ]
+
+                    , tr [] [ td []
+                              [  input_checkbox]
+                            , td []
+                              [ input_checkbox]
+                            , td [] [ text "smoking"]
+                            , td [] [ text "169"]
+                            ]
+                    ]
+                  ]
+      ]
+      where
+        input_checkbox = input [ _type "checkbox"
+                                    , className "checkbox"
+                                    , checked state.completed
+                                    , title "Mark as completed"
+                                    , onChange \e -> dispatch (ChangeCompleted (unsafeCoerce e).target.checked)
+                                    ] []

src/PageRouter.purs

@@ -26,6 +26,7 @@ data Routes
   | Tabview
   | CorpusAnalysis
   | PGraphExplorer
+  | NGramsTable
 
 
 instance showRoutes :: Show Routes where
@@ -39,6 +40,7 @@ instance showRoutes :: Show Routes where
   show Tabview   = "Tabview"
   show CorpusAnalysis   = "corpus"
   show PGraphExplorer = "graphExplorer"
+  show NGramsTable = "NGramsTable"
 
 int :: Match Int
 int = floor <$> num
@@ -55,8 +57,10 @@ routing =
   <|> addcorpusRoute
   <|> corpusAnalysis
   <|> graphExplorer
+  <|> ngramsTable
   <|> home
   where
+    ngramsTable = NGramsTable <$ route "ngrams"
     tabview  = Tabview   <$ route "tabview"
     documentView   = AnnotationDocumentView <$> (route "documentView" *> int)
     userPageRoute  = UserPage   <$ route "userPage"

yarn.lock

@@ -2653,15 +2653,6 @@ react-echarts-v3@^1.0.14:
     element-resize-detector latest
     lodash latest
 
-"react-graph-explorer@git+ssh://git@gitlab.iscpif.fr:20022/gargantext/reactGraphExplorer.git":
-  version "0.1.0"
-  resolved "git+ssh://git@gitlab.iscpif.fr:20022/gargantext/reactGraphExplorer.git#aaed893de5fc6029639815d75426bc5d06646050"
-  dependencies:
-    graph-explorer "git+ssh://git@gitlab.iscpif.fr:20022/gargantext/graphExplorer.git"
-    prop-types "^15.6.0"
-    react "^16.2.0"
-    react-dom "^16.2.0"
-
 react@^16.2.0:
   version "16.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba"