merged

48942fd2 · Sudhir Kumar · c56d3283 · 9a5d4242 · 48942fd2 · 48942fd2
Commit 48942fd2 authored Jun 22, 2018 by Sudhir Kumar
32 changed files
--- a/.babelrc
+++ b/.babelrc
+{
+    "presets": ["es2015"]
+
+}
--- a/bower.json
+++ b/bower.json
 {
-  "name": "purescript-gargantext",
-  "ignore": [
-    "**/.*",
-    "node_modules",
-    "bower_components",
-    "output"
-  ],
-  "dependencies": {
-    "purescript-prelude": "^3.1.0",
-    "purescript-console": "^3.0.0",
-    "purescript-thermite": "^5.0.0",
-    "purescript-affjax": "^5.0.0",
-    "purescript-routing": "^6.1.2",
-    "purescript-argonaut-codecs": "^2.0.0",
-    "purescript-argonaut-traversals": "^2.0.0",
-    "purescript-argonaut": "^3.1.0",
-    "purescript-random": "^3.0.0",
-    "purescript-css": "^3.4.0"
-  },
-  "devDependencies": {
-    "purescript-psci-support": "^3.0.0"
-  },
-  "resolutions": {
-    "purescript-maybe": "^3.0.0",
-    "purescript-monoid": "^3.0.0",
-    "purescript-invariant": "^3.0.0",
-    "purescript-functions": "^3.0.0",
-    "purescript-functors": "^2.0.0",
-    "purescript-const": "^3.0.0",
-    "purescript-contravariant": "^3.0.0",
-    "purescript-tuples": "^4.0.0",
-    "purescript-distributive": "^3.0.0",
-    "purescript-identity": "^3.0.0",
-    "purescript-transformers": "^3.0.0",
-    "purescript-arrays": "^4.0.1",
-    "purescript-nonempty": "^4.0.0",
-    "purescript-unfoldable": "^3.0.0",
-    "purescript-lazy": "^3.0.0",
-    "purescript-unsafe-coerce": "^3.0.0",
-    "purescript-strings": "^3.0.0",
-    "purescript-generics": "^4.0.0",
-    "purescript-tailrec": "^3.0.0",
-    "purescript-proxy": "^2.0.0",
-    "purescript-integers": "^3.0.0",
-    "purescript-globals": "^3.0.0",
-    "purescript-maps": "^3.0.0",
-    "purescript-st": "^3.0.0",
-    "purescript-eff": "^3.0.0",
-    "purescript-profunctor": "^3.0.0",
-    "purescript-enums": "^3.1.0",
-    "purescript-profunctor-lenses": "^3.0.0",
-    "purescript-sets": "^3.0.0",
-    "purescript-argonaut-core": "^3.1.0",
-    "purescript-lists": "^4.0.0",
-    "purescript-argonaut-codecs": "^3.0.0",
-    "purescript-argonaut-traversals": "^3.0.0",
-    "purescript-argonaut": "^3.1.0",
-    "purescript-prelude": "^3.1.0",
-    "purescript-either": "^3.1.0",
-    "purescript-foldable-traversable": "^3.6.1",
-    "purescript-control": "^3.0.0",
-    "purescript-bifunctors": "^3.0.0",
-    "purescript-newtype": "^2.0.0"
-  }
+        "name": "purescript-gargantext",
+        "ignore": [
+                "**/.*",
+                "node_modules",
+                "bower_components",
+                "output"
+        ],
+        "dependencies": {
+                "purescript-prelude": "^3.1.0",
+                "purescript-console": "^3.0.0",
+                "purescript-thermite": "^5.0.0",
+                "purescript-affjax": "^5.0.0",
+                "purescript-routing": "^6.1.2",
+                "purescript-argonaut-codecs": "^2.0.0",
+                "purescript-argonaut-traversals": "^2.0.0",
+                "purescript-argonaut": "^3.1.0",
+                "purescript-random": "^3.0.0",
+                "purescript-css": "^3.4.0"
+        },
+        "devDependencies": {
+                "purescript-psci-support": "^3.0.0"
+        },
+        "resolutions": {
+                "purescript-maybe": "^3.0.0",
+                "purescript-monoid": "^3.0.0",
+                "purescript-invariant": "^3.0.0",
+                "purescript-functions": "^3.0.0",
+                "purescript-functors": "^2.0.0",
+                "purescript-const": "^3.0.0",
+                "purescript-contravariant": "^3.0.0",
+                "purescript-tuples": "^4.0.0",
+                "purescript-distributive": "^3.0.0",
+                "purescript-identity": "^3.0.0",
+                "purescript-transformers": "^3.0.0",
+                "purescript-arrays": "^4.0.1",
+                "purescript-nonempty": "^4.0.0",
+                "purescript-unfoldable": "^3.0.0",
+                "purescript-lazy": "^3.0.0",
+                "purescript-unsafe-coerce": "^3.0.0",
+                "purescript-strings": "^3.0.0",
+                "purescript-generics": "^4.0.0",
+                "purescript-tailrec": "^3.0.0",
+                "purescript-proxy": "^2.0.0",
+                "purescript-integers": "^3.0.0",
+                "purescript-globals": "^3.0.0",
+                "purescript-maps": "^3.0.0",
+                "purescript-st": "^3.0.0",
+                "purescript-eff": "^3.0.0",
+                "purescript-profunctor": "^3.0.0",
+                "purescript-enums": "^3.1.0",
+                "purescript-profunctor-lenses": "^3.0.0",
+                "purescript-sets": "^3.0.0",
+                "purescript-argonaut-core": "^3.1.0",
+                "purescript-lists": "^4.0.0",
+                "purescript-argonaut-codecs": "^3.0.0",
+                "purescript-argonaut-traversals": "^3.0.0",
+                "purescript-argonaut": "^3.1.0",
+                "purescript-prelude": "^3.1.0",
+                "purescript-either": "^3.1.0",
+                "purescript-foldable-traversable": "^3.6.1",
+                "purescript-control": "^3.0.0",
+                "purescript-bifunctors": "^3.0.0",
+                "purescript-newtype": "^2.0.0"
+        }
 }
+
--- 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;
+}
--- a/dist/index.html
+++ b/dist/index.html
@@ -37,7 +37,7 @@
             content: " ";
             position: absolute;
             width: 1px;
-             background-color: #000;
+             background-color: "#000";
             top: 5px;
             bottom: 7px;
             height: 7px;
@@ -49,15 +49,13 @@
             left: -10px;
             width: 10px;
             height: 1px;
-             background-color: #000;
+             background-color: "#000";
             top: 12px;
         }
 	      </style>
-
-
    </head>
    <body>
-        <div id="app" class ="container"></div>
+        <div id="app" class ="container-fluid"></div>
        <script src="bundle.js"></script>
        <script src="js/bootstrap-native.min.js"></script>
    </body>

--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
 {
-  "dependencies": {
-    "create-react-class": "^15.6.2",
-    "echarts": "^3.8.5",
-    "echarts-for-react": "^2.0.0",
-    "prop-types": "15.6.0",
-    "react": "^16.2.0",
-    "react-addons-css-transition-group": "^16.2.0",
-    "react-dom": "^16.2.0",
-    "react-echarts-v3": "^1.0.14"
-  }
+    "dependencies": {
+        "create-react-class": "^15.6.2",
+        "echarts": "^3.8.5",
+        "echarts-for-react": "^2.0.0",
+        "imports-loader": "^0.7.1",
+        "prop-types": "15.6.0",
+        "react": "^16.2.0",
+        "react-dom": "^16.2.0",
+        "react-echarts-v3": "^1.0.14",
+        "sigma": "^1.2.1",
+        "graph-explorer": "git+ssh://git@gitlab.iscpif.fr:20022/gargantext/graphExplorer.git"
+    },
+    "browserify": {
+        "transform": [
+            [
+                "babelify",
+                {
+                    "presets": [
+                        "es2015",
+                        "stage-0",
+                        "react"
+                    ]
+                }
+            ]
+        ]
+    },
+    "babel": {
+        "presets": [
+            "es2015",
+            "stage-0",
+            "react"
+        ]
+    },
+    "devDependencies": {
+        "babel-core": "^6.26.0",
+        "babel-preset-es2015": "^6.24.1",
+        "babel-preset-react": "^6.24.1",
+        "babel-preset-stage-0": "^6.24.1",
+        "babel-runtime": "^6.26.0",
+        "babelify": "^8.0.0"
+    }
 }
--- a/src/Chart.js
+++ b/src/Chart.js
@@ -3,3 +3,4 @@
 var ReactEcharts = require("echarts-for-react");

 exports.eChartsClass = ReactEcharts.default;
+exports.eChartsClass2 = ReactEcharts.default;
--- a/src/Chart.purs
+++ b/src/Chart.purs
 module Chart where

-import Prelude
+import Prelude (($), (<<<), (<$>))

 import CSS (Color, white)
-import React (ReactClass, ReactElement, createElementDynamic)
-import React.DOM.Props (Props, unsafeFromPropsArray, unsafeMkProps)
-import Control.Monad.Eff (Eff)
-import DOM (DOM)
-import DOM.HTML (window) as DOM
-import DOM.HTML.Types (htmlDocumentToParentNode) as DOM
-import DOM.HTML.Window (document) as DOM
-import DOM.Node.ParentNode (QuerySelector(..))
-import DOM.Node.ParentNode (querySelector) as DOM
-import Data.Maybe (fromJust)
-import Partial.Unsafe (unsafePartial)
-import React (ReactElement)
+import Data.Maybe (Maybe(..))
 import React as R
 import React.DOM (p)
-import React.DOM.Props (Props, className, unsafeFromPropsArray)
-import ReactDOM as RDOM
-import Thermite (Render, Spec, createReactSpec, defaultPerformAction, simpleSpec)
+import React.DOM.Props (Props, unsafeFromPropsArray, unsafeMkProps)

 -- eCharts Props

@@ -45,7 +32,7 @@ group = unsafeMkProps "group"

 type EchartsProps eff =
  { className   :: String,
-    style       :: String,  -- object,
+    style       :: String,  -- objealect-black-altdarkmincnaquadahherry-blossomect,
    theme       :: String,
    group       :: String,
    option      :: Option, --  PropTypes.object.isRequired,
@@ -67,13 +54,16 @@ type OptsLoading =
    zlevel    :: Int
  }

+type OpTest =
+  {option :: Option}
+
 type Option =
-  { title    :: Title
-  , legend   :: Legend
+  { title    :: Maybe Title
+  , legend   :: Maybe Legend
  , tooltip  :: Tooltip
  , grid     :: Grid
-  , xAxis    :: Array XAxis
-  , yAxis    :: Array YAxis
+  , xAxis    :: XAxis
+  , yAxis    :: YAxis
  , series   :: Array Series
  , dataZoom :: Array DataZoom
  }
@@ -94,35 +84,33 @@ type Grid =
 type Legend =
  {"type"  :: String
  , show   :: Boolean
-  , zlevel :: Number
-  , z      :: Number
-  , left   :: Number
-  , top    :: Number
-  , right  :: Number
-  , bottom :: Number
-  , width  :: Number
-  , height :: Number
-  , orient :: String
-  , align  :: String
-  , padding       :: Number
-  , itemGap       :: Number
-  , itemWidth     :: Number
-  , itemHeight    :: Number
-  , formatter     :: String
-  , selectedMode  :: Boolean
-  , inactiveColor :: Color
-  , selected      :: String -- object
-  , "data"        :: Array Data
+  , zlevel :: Maybe Number
+  , z      :: Maybe Number
+  , left   :: Maybe Number
+  , top    :: Maybe Number
+  , right  :: Maybe Number
+  , bottom :: Maybe Number
+  , width  :: Maybe Number
+  , height :: Maybe Number
+  , orient :: Maybe String
+  , align  :: Maybe String
+  , padding       :: Maybe Number
+  , itemGap       :: Maybe Number
+  , itemWidth     :: Maybe Number
+  , itemHeight    :: Maybe Number
+  , formatter     :: Maybe String
+  , selectedMode  :: Maybe Boolean
+  , inactiveColor :: Maybe Color
+  , selected      :: Maybe String -- object
+  , "data"        :: Maybe (Array Data)
  }

 type Data =
  { name      :: String
-  , icon      :: String
-  , textStyle :: {}
+  , icon      :: Maybe String
+  , textStyle :: Maybe {}
  }

-
-
 type SubtextStyle =
  { color      :: Color
  , fontStyle  :: String
@@ -146,14 +134,15 @@ type SubtextStyle =

 type Tooltip =
  { trigger   :: String
-  , formatter :: String -- TODO function
+  , formatter :: Maybe String -- TODO function
  }

 type XAxis =
-  { "data"   :: Array String
+  { "data"   :: Array Data
  , "type"   :: String
  , axisTick :: AxisTick
  }
+
 type AxisTick =
  {
    alignWithLabel :: Boolean
@@ -213,10 +202,14 @@ type Title =
 type Rich = {}


-foreign import eChartsClass :: forall props. ReactClass props
+foreign import eChartsClass :: forall props. R.ReactClass props
+foreign import eChartsClass2 :: R.ReactClass OpTest

-echarts :: forall eff. Array Props -> ReactElement
-echarts p = createElementDynamic eChartsClass (unsafeFromPropsArray p) []
+echarts :: forall eff. Array Props -> R.ReactElement
+echarts p = R.createElementDynamic eChartsClass (unsafeFromPropsArray p) []
+
+echarts' :: forall eff. Option -> R.ReactElement
+echarts' chart = R.createElementDynamic eChartsClass2 {option: chart} []

 -- Props

@@ -373,12 +366,106 @@ yAxisIndex = unsafeMkProps "yAxisIndex"
      -- , p''
      -- ]

-histogram :: ReactElement
+legend' :: Legend
+legend' =
+  {
+    "type": "plain"
+   , show: true
+   , zlevel: Nothing
+   , z: Nothing
+   , left: Nothing
+   , top: Nothing
+   , right: Nothing
+   , bottom: Nothing
+   , width: Nothing
+   , height: Nothing
+   , orient: Nothing
+   , align: Nothing
+   , padding: Nothing
+   , itemGap: Nothing
+   , itemWidth: Nothing
+   , itemHeight: Nothing
+   , formatter: Nothing
+   , selectedMode: Nothing
+   , inactiveColor: Nothing
+   , selected: Nothing
+   , "data": Nothing
+  }
+
+data1 :: Data
+data1 = {name: "Map terms coverage", icon: Nothing, textStyle: Nothing}
+
+data2 :: Data
+data2 = {name: "Favorites", icon: Nothing, textStyle: Nothing}
+
+data3 :: Data
+data3 = {name: "All", icon: Nothing, textStyle: Nothing}
+
+xAxis' :: XAxis
+xAxis' =
+ {
+   "data": [xData1, xData2, xData3]
+ , "type": "category"
+ , axisTick: {alignWithLabel: true}
+ }
+
+xData1 :: Data
+xData1 = {name: "Jan", icon: Nothing, textStyle: Nothing}
+
+xData2 :: Data
+xData2 = {name: "Feb", icon: Nothing, textStyle: Nothing}
+
+xData3 :: Data
+xData3 = {name: "Mar", icon: Nothing, textStyle: Nothing}
+
+yData1 :: YAxis
+yData1 =
+  {
+    "type": "value"
+  , name: "Score metric"
+  , min: 0
+  , position: "right"
+  , axisLabel: {formatter: "{value}"}
+  }
+
+tooltip' :: Tooltip
+tooltip' =
+  {
+    trigger: "axis"
+  , formatter: Nothing
+  }
+
+
+series' :: Series
+series' =
+  {
+    name: "All"
+  , "type": "bar"
+  , "data": [201, 777, 879]
+  }
+
+opt :: Option
+opt =
+  {
+    title: Nothing
+    ,legend: Nothing
+    ,tooltip: tooltip'
+    ,grid: {containLabel: true}
+    ,xAxis: xAxis'
+    ,yAxis: yData1
+    ,series: [series']
+    ,dataZoom: [dz1', dz1', dz2', dz2']
+  }
+
+histogram2 :: R.ReactElement
+histogram2 = echarts' opt
+
+histogram :: R.ReactElement
 histogram = echarts
     [ option
       [ tooltip [trigger "axis"]
       , grid [containLabel true]
-       , legend [data' ["Map terms coverage", "Favorites", "All"]]
+       , legend [data' ["TEST MUDADA", "Favorites", "All"]]
       -- , legend [data' ["Map Terms coverage", "Favorites", "All"]]
       , xAxis
         [ type' "category"
@@ -388,12 +475,41 @@ histogram = echarts
                 , "Sep", "Oct", "Nov" , "Dec"
                 ]
         ]
-       , dataZoom [dz1,dz1,dz2,dz2]
+       , dataZoom' [dz1', dz1', dz2', dz2']
       , yAxis [ya1, ya2]
       , series [sd1, sd2, sd3]
       ]
     ]

+{-
+type DataZoom =
+  {"type"      :: String
+  , xAxisIndex :: Int
+  , filterMode :: String
+  , start      :: Int
+  , end        :: Int
+  }
+-}
+
+dz1' :: DataZoom
+dz1' = {
+  "type": "slider"
+  ,xAxisIndex: 0
+  ,filterMode: "empty"
+  ,start: 0
+  ,end: 100
+  }
+
+dz2' :: DataZoom
+dz2' = {
+  "type": "inside"
+  ,xAxisIndex: 0
+  ,filterMode: "empty"
+  ,start: 0
+  ,end: 100
+  }
+
+dz1 :: forall props. props
 dz1 = unsafeFromPropsArray
      [ type' "slider"
      , xAxisIndex 0
@@ -402,6 +518,7 @@ dz1 = unsafeFromPropsArray
      , end 100
      ]

+dz2 :: forall props. props
 dz2 = unsafeFromPropsArray
      [ type' "inside"
      , xAxisIndex 0
@@ -410,6 +527,7 @@ dz2 = unsafeFromPropsArray
      , end 100
      ]

+ya1 :: forall props. props
 ya1 = unsafeFromPropsArray
      [ type' "value"
      , name "Score metric"
@@ -417,7 +535,7 @@ ya1 = unsafeFromPropsArray
      , position "right"
      , axisLabel [formatter "{value}"]
      ]
-
+ya2 :: forall props. props
 ya2 = unsafeFromPropsArray
      [ type' "value"
      , name "Publications (by year)"
@@ -426,6 +544,7 @@ ya2 = unsafeFromPropsArray
      , axisLabel [formatter "{value}"]
      ]

+sd1 :: forall props. props
 sd1 = unsafeFromPropsArray
      [ name "Map terms coverage"
      , type' "line"
@@ -439,6 +558,7 @@ sd1 = unsafeFromPropsArray
      , data' [95, 80, 75, 35, 30, 50, 70, 80, 95, 95, 95, 99]
      ]

+sd3 :: forall props. props
 sd3 = unsafeFromPropsArray
      [ name "All"
      , type' "bar"
@@ -447,7 +567,21 @@ sd3 = unsafeFromPropsArray
      , data' [201, 222, 223, 777, 244, 255, 555, 879, 938, 1364, 1806, 2324]
      ]

+dataZoom' :: Array DataZoom -> Props
+dataZoom' dzs = unsafeMkProps "dataZoom" $ dzToProps <$> dzs
+
+dzToProps :: forall props. DataZoom -> props
+dzToProps dz = unsafeFromPropsArray
+               [ type' dz."type"
+               , xAxisIndex dz.xAxisIndex
+               , filterMode dz.filterMode
+               , start dz.start
+               , end dz.end
+               ]
+
+

+sd2 :: forall props. props
 sd2 = unsafeFromPropsArray
      [ name "Favorites"
      , type' "bar"
@@ -457,5 +591,5 @@ sd2 = unsafeFromPropsArray
      ]


-p'' :: ReactElement
+p'' :: R.ReactElement
 p'' = p [] []
--- a/src/Charts/Color.purs
+++ b/src/Charts/Color.purs
+module Charts.Color
+       (
+         ChartColor(),
+         chartColor
+       ) where
+
+import Prelude ((<<<))
+import CSS (Color, toHexString)
+
+newtype ChartColor = ChartColor String
+
+chartColor :: Color -> ChartColor
+chartColor = ChartColor <<< toHexString
--- a/src/Charts/Data.purs
+++ b/src/Charts/Data.purs
+module Charts.Data where
+
+import Charts.Font (TextStyle, Icon)
+import Prelude ((<<<))
+import Unsafe.Coerce (unsafeCoerce)
+
+type DataN =
+  { name :: String
+  , icon :: Icon
+  , textStyle :: TextStyle
+  }
+
+type DataV =
+  { value :: String
+  , textStyle :: TextStyle
+  }
+
+type DataS =
+  { name :: String
+  , value :: Number
+  }
--- a/src/Charts/ECharts.js
+++ b/src/Charts/ECharts.js
+"use strict";
+
+var ReactEcharts = require("echarts-for-react");
+
+exports.eChartsClass = ReactEcharts.default;
--- a/src/Charts/ECharts.purs
+++ b/src/Charts/ECharts.purs
--- a/src/Charts/Font.purs
+++ b/src/Charts/Font.purs
+module Charts.Font
+       (
+         TextStyle,
+         ChartFontStyle(),
+         chartFontStyle,
+         ChartFontWeight(),
+         chartFontWeight,
+         Icon(),
+         ImageURL(..),
+         Shape(..),
+         IconOptions(..),
+         icon
+       ) where
+
+import CSS (FontStyle(..), FontWeight(..), Prefixed(..), Value(..))
+import Charts.Color (ChartColor)
+import Charts.Position (LeftRelativePosition, Position, TopRelativePosition)
+import Data.Generic (class Generic, gShow)
+import Data.String (toLower)
+import Prelude (Unit, ($), (<<<), (<>))
+
+type TextStyle =
+  { color      :: ChartColor
+  , fontStyle  :: ChartFontStyle
+  , fontWeight :: ChartFontWeight
+  , fontFamily :: String
+  , fontSize   :: Int
+  , align      :: Position LeftRelativePosition
+  , verticalAlign :: Position TopRelativePosition
+  , lineHeight    :: Position Unit
+  , width         :: Position Unit
+  , height        :: Position Unit
+  , textBorderColor :: ChartColor
+  , textBorderWidth :: Number
+  , textShadowColor :: ChartColor
+  , textShadowBlur  :: ChartColor
+  , textShadowOffsetX :: Number
+  , textShadowOffsetY :: Number
+  }
+
+
+newtype ChartFontStyle = ChartFontStyle String
+
+chartFontStyle :: FontStyle -> ChartFontStyle
+chartFontStyle (FontStyle (Value (Plain "italic"))) = ChartFontStyle "italic"
+chartFontStyle (FontStyle (Value (Plain "oblique"))) = ChartFontStyle "oblique"
+chartFontStyle _ = ChartFontStyle "normal"
+
+
+newtype ChartFontWeight = ChartFontWeight String
+
+chartFontWeight :: FontWeight -> ChartFontWeight
+chartFontWeight (FontWeight (Value (Plain "bold"))) = ChartFontWeight "bold"
+chartFontWeight (FontWeight (Value (Plain "bolder"))) = ChartFontWeight "bolder"
+chartFontWeight (FontWeight (Value (Plain "lighter"))) = ChartFontWeight "lighter"
+chartFontWeight  _ = ChartFontWeight "normal"
+
+
+newtype Icon = Icon String
+
+newtype ImageURL = ImageURL String
+
+data Shape = Circle | Rect | RoundRect | Triangle | Diamond | Pin | Arrow
+derive instance genericShape :: Generic Shape
+
+data IconOptions = Shape Shape | Image ImageURL
+
+icon :: IconOptions -> Icon
+icon (Shape s) = Icon <<< toLower $ gShow s
+icon (Image (ImageURL url)) = Icon $ "image://" <> url
--- a/src/Charts/Legend.purs
+++ b/src/Charts/Legend.purs
+module Charts.Legend
+       (
+         LegendType(..),
+         PlainOrScroll(..),
+         legendType,
+         Orient(),
+         Orientation(..),
+         orient,
+         SelectedMode(),
+         LegendMode(..),
+         selectedMode
+       ) where
+
+import Data.Generic (class Generic, gShow)
+import Data.String (toLower)
+import Prelude (class Show, show, (<<<))
+import Unsafe.Coerce (unsafeCoerce)
+
+newtype LegendType = LegendType String
+
+data PlainOrScroll = Plain | Scroll
+instance showPlainOrScroll :: Show PlainOrScroll where
+  show (Plain) = "plain"
+  show (Scroll) = "scroll"
+
+legendType :: PlainOrScroll -> LegendType
+legendType = LegendType <<< toLower <<< show
+
+
+newtype Orient = Orient String
+
+data Orientation = Horizontal | Vertical
+derive instance genericOrientation :: Generic Orientation
+
+orient :: Orientation -> Orient
+orient = Orient <<< toLower <<< gShow
+
+
+foreign import data SelectedMode :: Type
+
+data LegendMode = Bool Boolean | Single | Multiple
+derive instance genericLegendMode :: Generic LegendMode
+
+selectedMode :: LegendMode -> SelectedMode
+selectedMode (Bool b) = unsafeCoerce b
+selectedMode (Single) = unsafeCoerce "single"
+selectedMode (Multiple) = unsafeCoerce "multiple"
+
--- a/src/Charts/Position.purs
+++ b/src/Charts/Position.purs
+module Charts.Position
+       (
+         Position(),
+         numberPosition,
+         percentPosition,
+         relativePosition,
+         Align(..),
+         TopRelativePosition(..),
+         LeftRelativePosition(..)
+       ) where
+
+import Prelude (class Show, show, ($), (<>))
+import Unsafe.Coerce (unsafeCoerce)
+
+-- | The type `Position` is made to render a css position.
+-- | It should be either a `Number`, a `"Number%"` or a `Position` type (`TopRelativePosition` for exemple)
+-- | To construct such a type you will have to use one of the smart constructor
+foreign import data Position :: Type -> Type
+
+-- | Smart constructor to build a JS Number
+numberPosition :: forall r. Number -> Position r
+numberPosition = unsafeCoerce
+
+-- | Smart constructor to build a JS Percent
+percentPosition :: forall r. Number -> Position r
+percentPosition n = unsafeCoerce $ (show n) <> "%"
+
+-- | Smart constructor to build a JS String giving position's detail ("top", "left", ...)
+relativePosition :: forall a. Show a => Align a -> Position a
+relativePosition (Auto) = unsafeCoerce "auto"
+relativePosition (Relative r) = unsafeCoerce $ show r
+
+data Align p = Auto | Relative p
+
+data TopRelativePosition = Top | Middle | Bottom
+instance showTopRelativePosition :: Show TopRelativePosition
+  where show (Top) = "top"
+        show (Middle) = "middle"
+        show (Bottom) = "bottom"
+
+data LeftRelativePosition = LeftPos | Center | RightPos
+instance showLeftRelativePosition :: Show LeftRelativePosition
+  where show (LeftPos) = "left"
+        show (Center) = "center"
+        show (RightPos) = "right"
--- a/src/Charts/Series.purs
+++ b/src/Charts/Series.purs
+module Charts.Series where
+
+import Charts.Data (DataS)
+import Prelude (class Show, show, (<<<))
+
+
+newtype SeriesType = SeriesType String
+
+data SeriesShape = Line
+                 | Bar | PictorialBar
+                 | Pie
+                 | Scatter | EffectScater
+                 | Radar
+                 | Tree | TreeMap
+                 | Sunburst
+                 | Boxplot
+                 | Candlestick
+                 | Heatmap
+                 | Map
+                 | Parallel
+                 | Lines
+                 | Graph
+                 | Sankey
+                 | Funnel
+                 | Gauge
+                 | ThemeRiver
+
+instance showSeriesShape :: Show SeriesShape where
+  show Line = "line"
+  show Bar = "bar"
+  show Pie = "pie"
+  show Sunburst = "sunburst"
+  show Funnel = "funnel"
+  show Heatmap = "heatmap"
+  show _ = ""
+
+seriesType :: SeriesShape -> SeriesType
+seriesType = SeriesType <<< show
+
+type Series =
+  { name   :: String
+  , "type" :: SeriesType
+  , "data" :: Array DataS
+  }
--- a/src/Charts/Type.purs
+++ b/src/Charts/Type.purs
+module Charts.Type where
+
+import Charts.Font
+
+import CSS (Color)
+import Charts.Series
+import Charts.Data
+import Charts.Color (ChartColor(..))
+import Charts.Font (Icon, icon, TextStyle)
+import Charts.Legend (LegendType, SelectedMode, selectedMode, Orient)
+import Charts.Position (LeftRelativePosition, Position, TopRelativePosition)
+import Data.Either (Either)
+import Data.Maybe (Maybe)
+import Prelude (Unit, (<<<))
+
+
+newtype ChartAlign = ChartAlign String
+
+type Echarts =
+  { className   :: Maybe String,
+    style       :: Maybe String,  -- objealect-black-altdarkmincnaquadahherry-blossomect,
+    theme       :: Maybe String,
+    group       :: Maybe String,
+    option      :: Option, --  PropTypes.object.isRequired,
+    initOpts    :: Maybe String, -- PropTypes.object,
+    notMerge    :: Maybe Boolean,
+    lazyUpdate  :: Maybe Boolean,
+    loading     :: Maybe Boolean,
+    optsLoading :: Maybe OptsLoading, --  PropTypes.object,
+    onReady     :: Maybe String, --  PropTypes.func,
+    resizable   :: Maybe Boolean, -- PropTypes.bool,
+    onEvents    :: Maybe String --  PropTypes.object
+  }
+
+type Option =
+  { title    :: Title
+  , legend   :: Legend
+  , tooltip  :: Tooltip
+  , grid     :: Grid
+  , xAxis    :: XAxis
+  , yAxis    :: YAxis
+  , series   :: Array Series
+  , dataZoom :: Array DataZoom
+  }
+
+type Title =
+  {
+    id :: String -- None by default
+  , show :: Boolean -- default True
+  , text :: String -- default ''
+  , link :: String -- default ''
+  , target :: String -- default 'blank'
+  , textStyle :: TextStyle
+  , subtext :: String -- default ''
+  , sublink :: String -- default ''
+  , subtarget :: String -- default 'blank'
+  , subtextStyle :: TextStyle
+  , padding :: Number -- default '5'
+  , itemGap :: Number -- default '10'
+  , zlevel :: Number -- default '0'
+  , z :: Number -- default '2'
+  , left :: Position LeftRelativePosition -- default 'auto'
+  , top :: Position TopRelativePosition -- default 'auto'
+  , right :: Position Unit -- default 'auto'
+  , bottom :: Position Unit -- default 'auto'
+  , backgroundColor :: ChartColor -- default 'transparent''
+  , borderColor :: ChartColor -- default '#ccc'
+  , borderWidth :: Number -- default '1'
+  , borderRadius :: Number -- default 0; data NumberOrArray = Number | Array Number
+  , shadowBlur :: Number
+  , shadowColor :: ChartColor
+  , shadowOffsetX :: Number
+  , shadowOffsetY :: Number
+  }
+
+type OptsLoading =
+  { text      :: String,
+    color     :: Color,  --- color
+    textColor :: Color, --color
+    maskColor :: Color, --color
+    zlevel    :: Int
+  }
+
+type DataZoom =
+  {"type"      :: String
+  , xAxisIndex :: Int
+  , filterMode :: String
+  , start      :: Int
+  , end        :: Int
+  }
+
+type Grid =
+  {containLabel :: Boolean
+  }
+
+type Legend =
+  {
+    id :: String
+  , "type" :: LegendType
+  , show :: Boolean
+  , zlevel :: Number
+  , z :: Number
+  , left :: Position LeftRelativePosition -- default 'auto
+  , top :: Position TopRelativePosition
+  , right :: Position Unit
+  , bottom :: Position Unit
+  , width :: Position Unit
+  , height :: Position Unit
+  , orient :: Orient
+  , align :: Position LeftRelativePosition
+  , padding :: Number
+  , itemGap :: Number
+  , itemWidth :: Number
+  , itemHeight :: Number
+  , formatter :: Maybe String
+  , selectedMode :: SelectedMode
+  , inactiveColor :: ChartColor
+  , selected :: Maybe String -- object
+  , textStyle :: TextStyle
+  , "data" :: Array DataN
+  }
+
+type Tooltip =
+  { trigger   :: String
+  , formatter :: Maybe String -- TODO function
+  }
+
+type XAxis =
+  { "data"   :: Array DataV
+  , "type"   :: String
+  , axisTick :: AxisTick
+  , show :: Boolean
+  }
+
+type AxisTick =
+  {
+    alignWithLabel :: Boolean
+  }
+
+type YAxis =
+  { "type"    :: String
+  , name      :: String
+  , min       :: Int
+  , position  :: String
+  , axisLabel :: AxisLabel
+  , show :: Boolean
+  }
+
+type AxisLabel =
+  { formatter :: String -- string or function
+  }
+
+type Rich = {}
--- a/src/Dashboard.purs
+++ b/src/Dashboard.purs
+module Dashboard where
+
+import Charts.ECharts
+
+import DOM (DOM)
+import Data.Unit (Unit)
+import Prelude (pure, unit)
+import React.DOM (div, h1, text, title)
+import React.DOM.Props (className)
+import Thermite (PerformAction, Render, Spec, simpleSpec)
+
+type State = Unit
+
+data Action = None
+
+initialState :: State
+initialState = unit
+
+performAction :: forall eff props. PerformAction (dom :: DOM | eff) State props Action
+performAction _ _ _ = pure unit
+
+render :: forall props. Render State props Action
+render dispatch _ state _ = [
+    h1 [] [text "IMT DashBoard"]
+  , histogram1
+  , div [className "row"] [
+      div [className "col-md-4 content"] [histogram2]
+    , div [className "col-md-4 content"] [histogram3]
+    , div [className "col-md-4 content"] [histogram4]
+    ]
+  ]
+
+layoutDashboard :: forall props eff. Spec (dom :: DOM | eff) State props Action
+layoutDashboard = simpleSpec performAction render
--- a/src/AnnotationDocumentView.purs
+++ b/src/AnnotationDocumentView.purs
-module AnnotationDocumentView where
+module DocAnnotation where

 import Prelude hiding (div)
 import React (ReactElement)

--- a/src/DocView.purs
+++ b/src/DocView.purs
@@ -2,7 +2,7 @@ module DocView where

 import Data.Argonaut

-import Chart (histogram, p'')
+import Chart (histogram2, p'')
 import Control.Monad.Aff (Aff, attempt)
 import Control.Monad.Aff.Class (liftAff)
 import Control.Monad.Cont.Trans (lift)
@@ -32,6 +32,9 @@ import ReactDOM as RDOM
 import Thermite (PerformAction, Render, Spec, cotransform, createReactSpec, defaultPerformAction, modifyState, simpleSpec)
 import Unsafe.Coerce (unsafeCoerce)

+import Gargantext.REST (get)
+
+
 main :: forall e. Eff (dom:: DOM, console :: CONSOLE, ajax :: AJAX | e) Unit
 main = do
  case createReactSpec layoutDocview tdata of
@@ -113,7 +116,7 @@ layoutDocview = simpleSpec performAction render
            [ p''
            , div [] [ text "    Filter ", input [] []]
            , h3 [] [text "Chart Title"]
-            , histogram
+            , histogram2
            , p''
            , br' []
            , div [] [ b [] [text d.title]
@@ -143,7 +146,8 @@ performAction (ChangePageSize ps) _ _ = void (cotransform (\state ->  changePage
 performAction (ChangePage p) _ _ = void (cotransform (\(TableData td) -> TableData $ td { currentPage = p} ))

 performAction LoadData _ _ = void do
-  res <- lift $ loadData
+  res <- lift $ get "http://localhost:8008/corpus/452132/facet/documents/table"
+  --res <- lift $ loadData "http://localhost:8009/corpus/1/facet/documents/table"
  case res of
     Left err -> cotransform $ \(state) ->  state
     Right resData -> do
@@ -379,22 +383,3 @@ showRow {row : (Corpus c), delete} =
                true  -> "fas "
                false -> "far "

-
-
-loadData :: forall eff. Aff ( console :: CONSOLE, ajax :: AJAX| eff) (Either String (Array Response))
-loadData  = do
-  affResp <- liftAff $ attempt $ affjax defaultRequest
-    { method  = Left GET
-    , url     = "http://localhost:8009/corpus/1/facet/documents/table"
-    , headers =  [ ContentType applicationJSON
-                 , Accept applicationJSON
-              --   , RequestHeader "Authorization" $  "Bearer " <> token
-                 ]
-   --  , content = Just $ encodeJson reqBody
-    }
-  case affResp of
-    Left err -> do
-      pure $ Left $ show err
-    Right a -> do
-      let res = decodeJson a.response
-      pure res
--- a/src/Gargantext/REST.purs
+++ b/src/Gargantext/REST.purs
+module Gargantext.REST where
+
+import Data.Argonaut
+import Data.HTTP.Method (Method(..))
+import Network.HTTP.RequestHeader (RequestHeader(..))
+import Prelude (bind, ($), pure, show)
+import Data.MediaType.Common (applicationJSON)
+
+import Control.Monad.Aff (Aff, attempt)
+import Control.Monad.Aff.Class (liftAff)
+import Control.Monad.Eff.Console (CONSOLE)
+
+import Data.Either (Either(..))
+
+import Network.HTTP.Affjax (AJAX, affjax, defaultRequest)
+
+
+get :: forall eff t2 t31. DecodeJson t31 => String -> 
+                      Aff ( console :: CONSOLE, ajax :: AJAX| eff)
+                          (Either String t31)
+get url = do
+  affResp <- liftAff $ attempt $ affjax defaultRequest
+    { method  = Left GET
+    , url     = url
+    , headers =  [ ContentType applicationJSON
+                 , Accept applicationJSON
+              --   , RequestHeader "Authorization" $  "Bearer " <> token
+                 ]
+    }
+  case affResp of
+    Left err -> do
+      pure $ Left $ show err
+    Right a -> do
+      let res = decodeJson a.response
+      pure res
--- a/src/GraphExplorer.js
+++ b/src/GraphExplorer.js
--- a/src/GraphExplorer.purs
+++ b/src/GraphExplorer.purs
 module GraphExplorer where

-import React.DOM (button, button', div, form', input, li', menu, text, ul, ul')
-import React.DOM.Props (_id, _type, className, name, placeholder, value)
-import Thermite (Spec, defaultPerformAction, simpleSpec)
+import Prelude hiding (div)

-newtype State = State {mode :: String}
+import Control.Monad.Aff (runAff)
+import Control.Monad.Aff.Class (liftAff)
+import Control.Monad.Aff.Console (CONSOLE)
+import Control.Monad.Cont.Trans (lift)
+import Control.Monad.Eff (Eff)
+import Control.Monad.Eff.Class (liftEff)
+import Control.Monad.Eff.Console (log)
+import DOM (DOM)
+import DOM.File.FileReader (fileReader, readAsText, result)
+import DOM.File.Types (File, fileToBlob)
+import React (ReactClass, createElement)
+import React.DOM (button, button', div, form', input, li, li', menu, text, ul')
+import React.DOM.Props (_id, _type, className, name, onChange, onClick, placeholder, style, value)
+import Thermite (PerformAction, Render, Spec, modifyState, simpleSpec)

-data Action = NoOp
+foreign import data GraphData :: Type
+
+foreign import initialGraph :: GraphData
+
+foreign import initialFile :: File
+
+foreign import getFile :: forall e. e -> File
+
+foreign import parseJSON :: forall eff a. a -> Eff eff GraphData
+
+foreign import graphExplorerComponent :: ReactClass {graph :: GraphData, mode :: String}
+
+foreign import logger :: forall a eff. a -> Eff eff Unit
+
+newtype State = State {mode :: String, graph :: GraphData, file :: File}
+
+data Action
+  = SetGraph
+  | SetFile File

 initialState :: State
-initialState = State {mode : "select"}
+initialState = State {mode : "select", graph : initialGraph, file : initialFile}
+
+
+reader :: forall eff. File -> Eff (console :: CONSOLE, dom :: DOM | eff) GraphData
+reader f = do
+  fr <- fileReader
+  readAsText (fileToBlob f) fr
+  res <- result fr
+  --log $ show res
+  let da = parseJSON res
+  logger da
+  da

-spec :: forall eff props. Spec eff State props Action
-spec = simpleSpec defaultPerformAction render
+
+spec :: forall eff props. Spec (console :: CONSOLE, dom :: DOM | eff) State props Action
+spec = simpleSpec performAction render
  where
-    render _ _ _ _ =
+    render :: Render State props Action
+    render d _ (State st) _ =
      [  div [className "row"] [
            div [className "col-md-12"]
            [ menu [_id "toolbar"]
              [ ul'
-                [ li'
+                [ li [style {display : "inline-block"}]
                  [ form'
-                    [ input [_type "file", name "file", value ""] []
-                    , input [_type "submit", value "submit"] []
+                    [ input [_type "file", name "file", onChange (\e -> d $ SetFile $ getFile e)] []
+                    , input [_type "button", value "submit", onClick \_ -> d SetGraph] []
                    ]
                  ]
                , li'
@@ -48,12 +90,24 @@ spec = simpleSpec defaultPerformAction render
           ]
         , div [className "row"]
           [ div [className "col-md-8"]
-             [ div [] [text "GraphExplorer here...."]
+             [ div [style {border : "1px black solid", height: "90%"}]
+               [ text "GraphExplorer here...."
+               , createElement graphExplorerComponent { graph : st.graph
+                                                      , mode : st.mode
+                                                      } []
+               ]
             ]
           , div [className "col-md-4"]
-             [ div [_id "sidepanel"]
+             [ div [_id "sidepanel", style {border : "1px black solid", height: "90%"}]
               [ text "SidePanel for contextual information"
               ]
             ]
           ]
         ]
+    performAction :: PerformAction (console :: CONSOLE, dom :: DOM | eff) State props Action
+    performAction SetGraph _ (State st) = void do
+      gd <- liftEff $ reader st.file
+      modifyState \(State s) -> State $ s {graph = gd}
+
+    performAction (SetFile f) _ _ = void do
+      modifyState \(State s) -> State $ s {file = f}
--- a/src/NTree.purs
+++ b/src/NTree.purs
@@ -51,8 +51,8 @@ toggleNode sid a = a
 myCorpus :: Int -> String -> NTree (Tuple String String)
 myCorpus n name = NNode n false name
    [ NLeaf (Tuple "Facets"    "#/corpus")
-    , NLeaf (Tuple "Graph"     "#/corpus")
-    , NLeaf (Tuple "Dashboard" "#/userPage")
+    , NLeaf (Tuple "Graph"     "#/docView")
+    , NLeaf (Tuple "Dashboard" "#/dashboard")
    ]

 exampleTree :: NTree (Tuple String String)

--- a/src/Navigation.purs
+++ b/src/Navigation.purs
@@ -5,7 +5,7 @@ import Gargantext.Data.Lang
 import Prelude hiding (div)

 import AddCorpusview as AC
-import AnnotationDocumentView as D
+import DocAnnotation as D
 import Control.Monad.Cont.Trans (lift)
 import Control.Monad.Eff (Eff)
 import Control.Monad.Eff.Class (liftEff)
@@ -37,6 +37,9 @@ import Tabview as TV
 import Thermite (PerformAction, Render, Spec, _render, cotransform, defaultPerformAction, defaultRender, focus, modifyState, simpleSpec, withState)
 import Unsafe.Coerce (unsafeCoerce)
 import UserPage as UP
+import GraphExplorer as GE
+import NgramsTable as NG
+import Dashboard as Dsh

 type E e = (dom :: DOM, ajax :: AJAX, console :: CONSOLE | e)

@@ -48,7 +51,7 @@ type AppState =
  , docViewState   :: DV.State
  , searchState    :: S.State
  , userPage       :: UP.State
-  , annotationdocumentView   :: D.State
+  , docAnnotationView   :: D.State
  , ntreeView   :: NT.State
  , tabview :: TV.State
  , search :: String
@@ -57,6 +60,8 @@ type AppState =
  , showCorpus :: Boolean
  , graphExplorer :: GE.State
  , initialized :: Boolean
+  , ngState :: NG.State
+  , dashboard :: Dsh.State
  }

 initAppState :: AppState
@@ -68,7 +73,7 @@ initAppState =
  , docViewState   : DV.tdata
  , searchState    : S.initialState
  , userPage       : UP.initialState
-  , annotationdocumentView   : D.initialState
+  , docAnnotationView   : D.initialState
  , ntreeView : NT.exampleTree
  , tabview : TV.initialState
  , search : ""
@@ -77,6 +82,8 @@ initAppState =
  , showCorpus : false
  , graphExplorer : GE.initialState
  , initialized : false
+  , ngState : NG.initialState
+  , dashboard : Dsh.initialState
  }

 data Action
@@ -88,15 +95,17 @@ data Action
  | DocViewA   DV.Action
  | SearchA    S.Action
  | UserPageA  UP.Action
-  | AnnotationDocumentViewA  D.Action
+  | DocAnnotationViewA  D.Action
  | TreeViewA  NT.Action
  | TabViewA TV.Action
  | GraphExplorerA GE.Action
+  | DashboardA Dsh.Action
  | Search String
  | Go
  | CorpusAnalysisA CA.Action
  | ShowLogin
  | ShowAddcorpus
+  | NgramsA  NG.Action



@@ -107,7 +116,6 @@ performAction :: forall eff props. PerformAction ( dom :: DOM
                                                 ) AppState props Action
 performAction (SetRoute route)  _ _ = void do
  modifyState $ _ {currentRoute = pure route}
-
 performAction (Search s)  _ _ = void do
  modifyState $ _ {search = s}

@@ -139,6 +147,11 @@ performAction Initialize  _ state = void do
          modifyState $ _ {initialized = true, ntreeView = if length d > 0 then fnTransform $ unsafePartial $ fromJust $ head d else NT.initialState}
    _ -> do
      modifyState id
+
+performAction Go  _ _ = void do
+  _ <- lift $ setHash "/addCorpus"
+  modifyState id
+
 performAction _ _ _ = void do
  modifyState id

@@ -207,15 +220,20 @@ _userPageAction = prism UserPageA \action ->
    UserPageA caction -> Right caction
    _-> Left action

+_dashBoardAction :: Prism' Action Dsh.Action
+_dashBoardAction = prism DashboardA \action ->
+  case action of
+    DashboardA caction -> Right caction
+    _ -> Left action

-_annotationdocumentviewState :: Lens' AppState D.State
-_annotationdocumentviewState = lens (\s -> s.annotationdocumentView) (\s ss -> s{annotationdocumentView = ss})
+_docAnnotationViewState :: Lens' AppState D.State
+_docAnnotationViewState = lens (\s -> s.docAnnotationView) (\s ss -> s{docAnnotationView = ss})


-_annotationdocumentviewAction :: Prism' Action D.Action
-_annotationdocumentviewAction = prism AnnotationDocumentViewA \action ->
+_docAnnotationViewAction :: Prism' Action D.Action
+_docAnnotationViewAction = prism DocAnnotationViewA \action ->
  case action of
-    AnnotationDocumentViewA caction -> Right caction
+    DocAnnotationViewA caction -> Right caction
    _-> Left action


@@ -240,18 +258,17 @@ _tabviewAction = prism TabViewA \action ->
    TabViewA caction -> Right caction
    _-> Left action

-
-
 _corpusState :: Lens' AppState CA.State
 _corpusState = lens (\s -> s.corpusAnalysis) (\s ss -> s {corpusAnalysis = ss})

-
 _corpusAction :: Prism' Action CA.Action
 _corpusAction = prism CorpusAnalysisA \action ->
  case action of
    CorpusAnalysisA caction -> Right caction
    _-> Left action

+_dashBoardSate :: Lens' AppState Dsh.State
+_dashBoardSate = lens (\s -> s.dashboard) (\s ss -> s {dashboard = ss})

 _graphExplorerState :: Lens' AppState GE.State
 _graphExplorerState = lens (\s -> s.graphExplorer) (\s ss -> s{graphExplorer = ss})
@@ -263,6 +280,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
@@ -277,16 +305,19 @@ pagesComponent s =
                                 | eff
                                 ) AppState props Action
    selectSpec CorpusAnalysis = layout0 $ focus _corpusState  _corpusAction CA.spec'
-    -- selectSpec Login      = focus _loginState _loginAction LN.renderSpec
+    selectSpec Login      = focus _loginState _loginAction LN.renderSpec
    selectSpec Home        = layout0 $ focus _landingState   _landingAction   (L.layoutLanding EN)
-    -- selectSpec AddCorpus  = layout0 $ focus _addCorpusState _addCorpusAction AC.layoutAddcorpus
+    selectSpec AddCorpus  = layout0 $ focus _addCorpusState _addCorpusAction AC.layoutAddcorpus
    selectSpec DocView    = layout0 $ focus _docViewState   _docViewAction   DV.layoutDocview
    selectSpec UserPage   = layout0 $ focus _userPageState  _userPageAction  UP.layoutUser
-    selectSpec (AnnotationDocumentView i)   = layout0 $ focus _annotationdocumentviewState  _annotationdocumentviewAction  D.docview
+    selectSpec (DocAnnotation i)   = layout0 $ focus _docAnnotationViewState  _docAnnotationViewAction  D.docview
    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 Dashboard = layout0 $ focus _dashBoardSate _dashBoardAction Dsh.layoutDashboard
+
    selectSpec _ = simpleSpec defaultPerformAction defaultRender

 routingSpec :: forall props eff. Spec (ajax :: AJAX, console :: CONSOLE, dom :: DOM |eff) AppState props Action
@@ -311,9 +342,9 @@ layout0 layout =
         else outerLayout1
      , rs bs      ]
    ls = over _render \render d p s c ->
-      [div [className "col-md-3"] (render d p s c)]
+      [div [className "col-md-2"] (render d p s c)]
    rs = over _render \render d p s c ->
-      [ div [className "col-md-8"] (render d p s c) ]
+      [ div [className "col-md-10"] (render d p s c) ]
    cont = over _render \render d p s c ->
      [ div [ className "row" ] (render d p s c) ]

@@ -564,6 +595,7 @@ layoutSpec =
 dispatchAction :: forall t115 t445 t447.
                  Bind t445 => Applicative t445  =>
                  (Action -> t445 t447) -> t115 -> Routes -> t445 Unit
+
 dispatchAction dispatcher _ Home = do
  _ <- dispatcher Initialize
  _ <- dispatcher $ SetRoute Home
@@ -596,18 +628,16 @@ dispatchAction dispatcher _ UserPage = do
  _ <- dispatcher $ UserPageA $ UP.NoOp
  pure unit

-dispatchAction dispatcher _ (AnnotationDocumentView i) = do
-  _ <- dispatcher $ SetRoute  $ AnnotationDocumentView i
-  _ <- dispatcher $ AnnotationDocumentViewA $ D.NoOp
+dispatchAction dispatcher _ (DocAnnotation i) = do
+  _ <- dispatcher $ SetRoute  $ DocAnnotation i
+  _ <- dispatcher $ DocAnnotationViewA $ D.NoOp
  pure unit

-
 dispatchAction dispatcher _ Tabview = do
  _ <- dispatcher $ SetRoute  $ Tabview
  _ <- dispatcher $ TabViewA $ TV.NoOp
  pure unit

-
 dispatchAction dispatcher _ CorpusAnalysis = do
  _ <- dispatcher $ SetRoute  $ CorpusAnalysis
  --_ <- dispatcher $ CorpusAnalysisA $ CA.NoOp
@@ -617,3 +647,12 @@ 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
+
+dispatchAction dispatcher _ Dashboard = do
+  _ <- dispatcher $ SetRoute $ Dashboard
+  pure unit
--- a/src/NgramsItem.purs
+++ b/src/NgramsItem.purs
+module NgramsItem where
+
+import Prelude
+
+import Control.Monad.Eff.Console (CONSOLE)
+import DOM (DOM)
+import Data.Newtype (class Newtype)
+import Network.HTTP.Affjax (AJAX)
+import React (ReactElement)
+import React.DOM (input, span, td, text, tr)
+import React.DOM.Props (_type, checked, className, color, onChange, style, title)
+import Thermite (PerformAction, Render, Spec, modifyState, simpleSpec)
+import Utils (getter, setter)
+
+newtype State = State
+  { term :: Term
+  }
+
+initialState :: State
+initialState = State {term : Term {id : 10, term : "hello", occurrence : 10, _type : None, children : []}}
+
+newtype Term = Term {id :: Int, term :: String, occurrence :: Int, _type :: TermType, children :: Array Term}
+
+derive instance newtypeTerm :: Newtype Term _
+
+data TermType = MapTerm | StopTerm | None
+
+derive instance eqTermType :: Eq TermType
+
+instance showTermType :: Show TermType where
+  show MapTerm = "MapTerm"
+  show StopTerm = "StopTerm"
+  show None = "None"
+
+data Action
+  = SetMap Boolean
+  | SetStop Boolean
+
+performAction :: forall eff props. PerformAction ( console :: CONSOLE , ajax    :: AJAX, dom     :: DOM | eff ) State props Action
+performAction (SetMap b)   _ _ = void do
+  modifyState \(State s) -> State s {term = setter (_{_type = (if b then MapTerm else None)}) s.term}
+
+performAction (SetStop b)   _ _ = void do
+    modifyState \(State s) -> State s {term = setter (_{_type = (if b then StopTerm else None)}) s.term}
+
+ngramsItemSpec :: forall props eff . Spec (console::CONSOLE, ajax::AJAX, dom::DOM | eff) State props Action
+ngramsItemSpec = simpleSpec performAction render
+  where
+    render :: Render State props Action
+    render dispatch _ (State state) _ =
+      [
+        tr []
+        [ td [] [ checkbox_map]
+        , td [] [ checkbox_stop]
+        , td [] [ dispTerm (getter _.term state.term)  (getter _._type state.term) ]
+        , td [] [ text $ show $ getter _.occurrence state.term]
+        ]
+      ]
+      where
+        checkbox_map =
+          input [ _type "checkbox"
+                , className "checkbox"
+                , checked $ getter _._type state.term == MapTerm
+                , title "Mark as completed"
+                , onChange $ dispatch <<< ( const $ SetMap $ not (getter _._type state.term == MapTerm))
+                ] []
+        checkbox_stop =
+          input
+          [ _type "checkbox"
+          , className "checkbox"
+          , checked $ getter _._type state.term == StopTerm
+          , title "Mark as completed"
+          , onChange $ dispatch <<< ( const $ SetStop $ not (getter _._type state.term == StopTerm))
+          ] []
+
+
+dispTerm :: String -> TermType -> ReactElement
+dispTerm term MapTerm = span [style {color :"green"}] [text $ term]
+dispTerm term StopTerm = span [style {color :"red", textDecoration : "line-through"}] [text $ term]
+dispTerm term None = span [style {color :"black"}] [text term]
--- a/src/NgramsTable.purs
+++ b/src/NgramsTable.purs
--- a/src/PageRouter.purs
+++ b/src/PageRouter.purs
@@ -22,54 +22,48 @@ data Routes
  | DocView
  | SearchView
  | UserPage
-  | AnnotationDocumentView Int
+  | DocAnnotation Int
  | Tabview
  | CorpusAnalysis
  | PGraphExplorer
+  | NGramsTable
+  | Dashboard


 instance showRoutes :: Show Routes where
-  show Home       = "Home"
  show Login      = "Login"
  show AddCorpus  = "AddCorpus"
  show DocView    = "DocView"
  show SearchView = "SearchView"
  show UserPage   = "UserPage"
-  show (AnnotationDocumentView i)  = "DocumentView"
-  show Tabview   = "Tabview"
+  show (DocAnnotation i)= "DocumentView"
+  show Tabview          = "Tabview"
  show CorpusAnalysis   = "corpus"
-  show PGraphExplorer = "graphExplorer"
+  show PGraphExplorer   = "graphExplorer"
+  show NGramsTable      = "NGramsTable"
+  show Dashboard        = "Dashboard"
+  show Home             = "Home"

 int :: Match Int
 int = floor <$> num

-
 routing :: Match Routes
 routing =
-   loginRoute
-  <|> tabview
-  <|> documentView
-  <|> userPageRoute
-  <|> searchRoute
-  <|> docviewRoute
-  <|> addcorpusRoute
-  <|> corpusAnalysis
-  <|> graphExplorer
-  <|> home
+      Login          <$   route "login"
+  <|> Tabview        <$   route "tabview"
+  <|> DocAnnotation  <$> (route "documentView" *> int)
+  <|> UserPage       <$   route "userPage"
+  <|> SearchView     <$   route "search"
+  <|> DocView        <$   route "docView"
+  <|> AddCorpus      <$   route "addCorpus"
+  <|> CorpusAnalysis <$   route "corpus"
+  <|> PGraphExplorer <$   route "graphExplorer"
+  <|> NGramsTable    <$   route "ngrams"
+  <|> Dashboard      <$   route "dashboard"
+  <|> Home           <$     lit ""
  where
-    tabview  = Tabview   <$ route "tabview"
-    documentView   = AnnotationDocumentView <$> (route "documentView" *> int)
-    userPageRoute  = UserPage   <$ route "userPage"
-    searchRoute    = SearchView <$ route "search"
-    docviewRoute   = DocView    <$ route "docView"
-    addcorpusRoute = AddCorpus  <$ route "addCorpus"
-    loginRoute     = Login      <$ route "login"
-    corpusAnalysis = CorpusAnalysis <$ route "corpus"
-    graphExplorer  = PGraphExplorer <$ route "graphExplorer"
-    home           = Home       <$ lit ""
    route str      = lit "" *> lit str

-
 routeHandler :: forall e. ( Maybe Routes -> Routes -> Eff
                            ( dom     :: DOM
                            , console :: CONSOLE

--- a/src/Utils.purs
+++ b/src/Utils.purs
+module Utils where
+
+import Prelude
+
+import Data.Newtype (class Newtype, unwrap, wrap)
+
+setterv :: forall nt record field. Newtype nt record => (record -> field -> record) -> field -> nt -> nt
+setterv fn v t = (setter (flip fn v) t)
+
+setter :: forall nt record. Newtype nt record => (record -> record) -> nt -> nt
+setter fn = wrap <<< fn <<< unwrap
+
+getter :: forall record field nt. Newtype nt record => (record -> field) -> nt -> field
+getter fn = fn <<< unwrap
--- a/src/graphexplorer/ReactGraphExplorer.js
+++ b/src/graphexplorer/ReactGraphExplorer.js
+var React = require('react');
+var PropTypes = require('prop-types');
+
+var graphExplorer = require('graph-explorer');
+
+console.log(graphExplorer);
+
+const GraphExplorer = graphExplorer.default;
+
+class ReactGraphExplorer extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.ge = new GraphExplorer(props.settings, props.handlers);
+    this.state = { graph: props.graph, mode: props.mode };
+
+    this.initRenderer = this.initRenderer.bind(this);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    console.log(this.ge);
+    if (nextProps.graph) {
+      this.setState({ graph: nextProps.graph }, () => {
+        this.ge.loadGraph(this.state.graph);
+        this.ge.clusterize();
+        this.ge.spatialize();
+      });
+    }
+
+    this.setState({ mode: nextProps.mode }, () => {
+      this.ge.sigma.settings('mode', this.state.mode);
+    });
+  }
+
+  initRenderer(container) {
+    this.ge.addRenderer(container);
+  }
+
+  render() {
+    return React.createElement('div', { id: 'ge-container', ref: this.initRenderer }, null);
+  }
+}
+
+ReactGraphExplorer.propTypes = {
+  graph: PropTypes.shape({
+    nodes: PropTypes.arrayOf(
+      PropTypes.shape({
+        id: PropTypes.string.isRequired,
+        label: PropTypes.string,
+        x: PropTypes.number,
+        y: PropTypes.number,
+        size: PropTypes.number,
+        type: PropTypes.string,
+        attributes: PropTypes.object // TODO(lucas): Specify this further.
+      })
+    ).isRequired,
+    edges: PropTypes.arrayOf(
+      PropTypes.shape({
+        id: PropTypes.string.isRequired,
+        source: PropTypes.string.isRequired,
+        target: PropTypes.string.isRequired,
+        weight: PropTypes.number // NOTE(lucas): required?
+      }).isRequired
+    )
+  }),
+  settings: PropTypes.shape({
+    // TODO(lucas)
+  }),
+  mode: PropTypes.string,
+  handlers: PropTypes.shape({
+    overNode: PropTypes.func,
+    outNode: PropTypes.func,
+    clickNode: PropTypes.func,
+    doubleClickNode: PropTypes.func,
+    rightClickNode: PropTypes.func,
+    overEdge: PropTypes.func,
+    outEdge: PropTypes.func,
+    clickEdge: PropTypes.func,
+    doubleClickEdge: PropTypes.func,
+    rightClickEdge: PropTypes.func,
+    clickStage: PropTypes.func,
+    doubleClickStage: PropTypes.func,
+    rightClickStage: PropTypes.func
+  })
+};
+
+export default ReactGraphExplorer;
--- a/src/graphexplorer/registerServiceWorker.js
+++ b/src/graphexplorer/registerServiceWorker.js
+// In production, we register a service worker to serve assets from local cache.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on the "N+1" visit to a page, since previously
+// cached resources are updated in the background.
+
+// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
+// This link also includes instructions on opting out of this behavior.
+
+const isLocalhost = Boolean(
+  window.location.hostname === 'localhost' ||
+    // [::1] is the IPv6 localhost address.
+    window.location.hostname === '[::1]' ||
+    // 127.0.0.1/8 is considered localhost for IPv4.
+    window.location.hostname.match(
+      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+    )
+);
+
+export default function register() {
+  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+    // The URL constructor is available in all browsers that support SW.
+    const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
+    if (publicUrl.origin !== window.location.origin) {
+      // Our service worker won't work if PUBLIC_URL is on a different origin
+      // from what our page is served on. This might happen if a CDN is used to
+      // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
+      return;
+    }
+
+    window.addEventListener('load', () => {
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+
+      if (isLocalhost) {
+        // This is running on localhost. Lets check if a service worker still exists or not.
+        checkValidServiceWorker(swUrl);
+      } else {
+        // Is not local host. Just register service worker
+        registerValidSW(swUrl);
+      }
+    });
+  }
+}
+
+function registerValidSW(swUrl) {
+  navigator.serviceWorker
+    .register(swUrl)
+    .then(registration => {
+      registration.onupdatefound = () => {
+        const installingWorker = registration.installing;
+        installingWorker.onstatechange = () => {
+          if (installingWorker.state === 'installed') {
+            if (navigator.serviceWorker.controller) {
+              // At this point, the old content will have been purged and
+              // the fresh content will have been added to the cache.
+              // It's the perfect time to display a "New content is
+              // available; please refresh." message in your web app.
+              console.log('New content is available; please refresh.');
+            } else {
+              // At this point, everything has been precached.
+              // It's the perfect time to display a
+              // "Content is cached for offline use." message.
+              console.log('Content is cached for offline use.');
+            }
+          }
+        };
+      };
+    })
+    .catch(error => {
+      console.error('Error during service worker registration:', error);
+    });
+}
+
+function checkValidServiceWorker(swUrl) {
+  // Check if the service worker can be found. If it can't reload the page.
+  fetch(swUrl)
+    .then(response => {
+      // Ensure service worker exists, and that we really are getting a JS file.
+      if (
+        response.status === 404 ||
+        response.headers.get('content-type').indexOf('javascript') === -1
+      ) {
+        // No service worker found. Probably a different app. Reload the page.
+        navigator.serviceWorker.ready.then(registration => {
+          registration.unregister().then(() => {
+            window.location.reload();
+          });
+        });
+      } else {
+        // Service worker found. Proceed as normal.
+        registerValidSW(swUrl);
+      }
+    })
+    .catch(() => {
+      console.log(
+        'No internet connection found. App is running in offline mode.'
+      );
+    });
+}
+
+export function unregister() {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.ready.then(registration => {
+      registration.unregister();
+    });
+  }
+}
--- a/yarn.lock
+++ b/yarn.lock