From a1a1795c9f63e4c7b192a24b5e806aeee4eee15a Mon Sep 17 00:00:00 2001 From: Abinaya Sudhir <abinaya@atomicits.com> Date: Sat, 26 May 2018 16:50:56 +0530 Subject: [PATCH] Ngrams Table Added to Navigation --- dist/css/Login.css | 5 +++ src/Navigation.purs | 22 ++++++++++ src/NgramsTable.purs | 102 +++++++++++++++++++++++++++++++++++++++++++ src/PageRouter.purs | 4 ++ yarn.lock | 9 ---- 5 files changed, 133 insertions(+), 9 deletions(-) create mode 100644 src/NgramsTable.purs diff --git a/dist/css/Login.css b/dist/css/Login.css index 5d48d7f54..533570c40 100644 --- a/dist/css/Login.css +++ b/dist/css/Login.css @@ -27,3 +27,8 @@ #user-page-info { margin-top : 38px; } + +.tableHeader { + background-color : blue; + color: white; +} diff --git a/src/Navigation.purs b/src/Navigation.purs index 4d1dc2fed..633217e46 100644 --- a/src/Navigation.purs +++ b/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 diff --git a/src/NgramsTable.purs b/src/NgramsTable.purs new file mode 100644 index 000000000..25b73a4c0 --- /dev/null +++ b/src/NgramsTable.purs @@ -0,0 +1,102 @@ +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) + ] [] diff --git a/src/PageRouter.purs b/src/PageRouter.purs index 4bb5c3158..9138c0033 100644 --- a/src/PageRouter.purs +++ b/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" diff --git a/yarn.lock b/yarn.lock index ab8b850af..2427acda6 100644 --- a/yarn.lock +++ b/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" -- 2.21.0