[phylo] Memiescape (second iteration)

* #219

[phylo] Memiescape (second iteration)
* #219
1f173474 · arturo · 57cb9f70 · 1f173474 · 1f173474 · 1f173474
Commit 1f173474 authored Dec 02, 2021 by arturo
91 changed files
--- a/.gitignore
+++ b/.gitignore
@@ -46,3 +46,5 @@ bundle.js
 /dist/js/**/*.map
 /dist/styles/**/*.map

+# IDE specific
+.vscode
--- a/dist/index.html
+++ b/dist/index.html
@@ -7,7 +7,6 @@
        <!-- <link href="styles/bootstrap.min.css" rel="stylesheet"> -->
        <link id="bootstrap-css" href="styles/bootstrap-default.css" rel="stylesheet" />
        <link rel="stylesheet" type="text/css" href="styles/highlightjs-solarized-light.css" />
-        <link href="styles/sass.css" rel="stylesheet" type="text/css" />
        <style> * {margin: 0; padding: 0; list-style: none;} </style>
    </head>
    <body>

--- a/dist/styles/bootstrap-darkster.css
+++ b/dist/styles/bootstrap-darkster.css
--- a/dist/styles/bootstrap-default.css
+++ b/dist/styles/bootstrap-default.css
--- a/dist/styles/bootstrap-greyson.css
+++ b/dist/styles/bootstrap-greyson.css
--- a/dist/styles/bootstrap-herbie.css
+++ b/dist/styles/bootstrap-herbie.css
--- a/dist/styles/bootstrap-monotony.css
+++ b/dist/styles/bootstrap-monotony.css
--- a/package.json
+++ b/package.json
@@ -4,14 +4,14 @@
    "scripts": {
        "generate-purs-packages-nix": "./nix/generate-purs-packages.nix",
        "generate-psc-packages-nix": "./nix/generate-packages-json.bash",
-        "css": "sass src/sass/sass.sass:dist/styles/sass.css && yarn css-themes",
+        "css": "yarn css-themes",
        "css-themes": "yarn css-default-theme && yarn css-dark-theme && yarn css-darkster-theme && yarn css-greyson-theme && yarn css-herbie-theme && yarn css-monotony-theme",
-        "css-default-theme": "sass src/sass/bootstrap/default.sass:dist/styles/bootstrap-default.css",
+        "css-default-theme": "sass src/sass/themes/default.scss:dist/styles/bootstrap-default.css",
        "css-dark-theme": "cp node_modules/bootstrap-dark/src/bootstrap-dark.css dist/styles/bootstrap-dark.css",
-        "css-darkster-theme": "sass src/sass/bootstrap/darkster.scss:dist/styles/bootstrap-darkster.css",
-        "css-greyson-theme": "sass src/sass/bootstrap/greyson.scss:dist/styles/bootstrap-greyson.css",
-        "css-herbie-theme": "sass src/sass/bootstrap/herbie.scss:dist/styles/bootstrap-herbie.css",
-        "css-monotony-theme": "sass src/sass/bootstrap/monotony.scss:dist/styles/bootstrap-monotony.css",
+        "css-darkster-theme": "sass src/sass/themes/darkster.scss:dist/styles/bootstrap-darkster.css",
+        "css-greyson-theme": "sass src/sass/themes/greyson.scss:dist/styles/bootstrap-greyson.css",
+        "css-herbie-theme": "sass src/sass/themes/herbie.scss:dist/styles/bootstrap-herbie.css",
+        "css-monotony-theme": "sass src/sass/themes/monotony.scss:dist/styles/bootstrap-monotony.css",
        "docs": "pulp docs -- --format html",
        "repl": "pulp repl",
        "clean": "rm -Rf output node_modules",

--- a/src/Gargantext/Components/Bootstrap/Abstract/Cloak.purs
+++ b/src/Gargantext/Components/Bootstrap/Abstract/Cloak.purs
+module Gargantext.Components.Bootstrap.Cloak
+  ( cloak
+  ) where
+
+import Gargantext.Prelude
+
+import Data.Foldable (elem)
+import Data.Maybe (Maybe, fromMaybe)
+import Data.Tuple.Nested ((/\))
+import Effect.Timer (setTimeout)
+import Gargantext.Utils.Reactix as R2
+import Reactix as R
+import Toestand as T
+
+
+type Props =
+  ( defaultSlot             :: R.Element
+  , cloakSlot               :: R.Element
+  , isDisplayed             :: Boolean
+  , idlingPhaseDuration     :: Maybe Int -- Milliseconds
+  , sustainingPhaseDuration :: Maybe Int -- Milliseconds
+  )
+
+-- |  Abstract component type easing the transition display between a content
+-- |  component and transitional (or cloak) component
+-- |
+-- |
+-- |  Inputs:
+-- |    * `defaultSlot :: Element` transclude pattern providing elements
+-- |       to be finally displayed
+-- |    * `cloakSlot :: Element` transclude pattern proviging elements
+-- |       displayed during first phases (see lifecycle explanation below)
+-- |    * `isDisplayed :: Boolean` flag defining if the main content is
+-- |       ready to be displayed
+-- |    * `idlingPhaseDuration :: Maybe Int` if defined, perform idling
+-- |       phase (see lifecyle explanation below)
+-- |    * `sustainingPhaseDuration :: Maybe Int` if defined, perform sustaining
+-- |       phase (see lifecyle explanation below)
+-- |
+-- |
+-- |  The lifecycle is structured into 4 phases:
+-- |    1. OPTIONAL, a primary idle phase, where no component is being displayed
+-- |      ↳ why? if the flag switched from "off" to "on" in a particularly fast
+-- |        pace, it will jump the sustain and wait phases (ie. the display
+-- |        of the transitional component, see below) which won't be
+-- [        needed anymore
+-- |    2. OPTIONAL a sustain phase, where the transitional component will be
+-- |        displayed for a defined amount of time
+-- |        ↳ why? same heuristic as above, if the switch is too fast, the cloak
+-- |          will be displayed at such speed that it will create a flickering
+-- |          effect, this phase will avoid it
+-- |    3. a waiting phase, where the cloak will be displayed until the switch
+-- |        will be set to "on"
+-- |    4. a final display phase, where the main content component will be shown
+-- |
+-- |
+-- |  Simple transition:
+-- |
+-- |    ```purescript
+-- |      cloak
+-- |      { isDisplayed             : onPendingFlag
+-- |      , cloakSlot               : blankPlaceholder {}
+-- |      , defaultSlot             : componentToBeDisplayed {} []
+-- |      , idlingPhaseDuration     : Nothing
+-- |      , sustainingPhaseDuration : Nothing
+-- |      }
+-- |    ```
+-- |
+-- |
+-- |    Smart transition
+-- |
+-- |    ```purescript
+-- |      cloak
+-- |      { isDisplayed             : onPendingFlag
+-- |      , cloakSlot               : blankPlaceholder {}
+-- |      , defaultSlot             : componentToBeDisplayed {} []
+-- |      -- Idling phase set up
+-- |      --
+-- |      -- * if the computation for display makes less than 20ms, no
+-- |      --   transition at all will be displayed, and the content will arrive
+-- |      --   as soon as the 20ms delay is consumed
+-- |      -- * if the computation takes more, following phases will be set up
+-- |      --   (according to the configuration provided)
+-- |      , idlingPhaseDuration     : Just 20
+-- |      -- Sustaining phase set up
+-- |      --
+-- |      -- * now let's say the computation talking above makes 35ms before
+-- |      --   displaying its content, setting this parameter will avoid a:
+-- |      --      35ms (computation) - 20ms (idling) = 15ms (sustaining)
+-- |      -- * this very short delay will be considered as a UI flickering
+-- |      --   effect for the user, which is a UX smelly design
+-- |      -- * by setting the sustaining phase to 400ms, we ensure a period
+-- |      --   of time that eliminates this effect
+-- |      , sustainingPhaseDuration  : Just 400
+-- |      }
+-- |    ```
+cloak :: R2.Leaf Props
+cloak = R2.leaf component
+
+cname :: String
+cname = "b-cloak"
+
+component :: R.Component Props
+component = R.hooksComponent cname cpt where
+  cpt props _ = do
+    -- State
+    phase /\ phaseBox <- R2.useBox' (Idle :: Phase)
+
+    -- Computed
+    canCloakBeDisplayed   <- pure $ elem phase [ Sustain, Wait ]
+    canContentBeDisplayed <- pure $ elem phase [ Display ]
+
+    -- @executeDisplayingPhase
+    execDisplayingPhase <- pure $ const $
+      T.write_ Display phaseBox
+
+    -- Helpers
+    execDisplayingPhaseOr <- pure $ \fn ->
+
+      if props.isDisplayed
+      then execDisplayingPhase unit
+      else fn
+
+    -- @executeWaitingPhase
+    execWaitingPhase <- pure $ const $ execDisplayingPhaseOr $
+          T.write_ Wait phaseBox
+
+    -- @executeSustainingPhase
+    execSustainingPhase <- pure $ const $ execDisplayingPhaseOr $
+          T.write_ Sustain phaseBox
+
+      <*  setTimeout
+            (fromMaybe 0 props.sustainingPhaseDuration)
+            (execWaitingPhase unit)
+
+    -- @executeIdlingPhase
+    execIdlingPhase <- pure $ const $ execDisplayingPhaseOr $
+          T.write_ Idle phaseBox
+
+      <*  setTimeout
+            (fromMaybe 0 props.idlingPhaseDuration)
+            (execSustainingPhase unit)
+
+    -- Effects
+    R.useEffectOnce' $ execIdlingPhase unit
+
+    R.useEffect1' props.isDisplayed $
+
+      if (props.isDisplayed && phase == Wait)
+      then execDisplayingPhase unit
+      else pure unit
+
+    -- Render
+    pure $
+
+      R.fragment
+      [
+        R2.if' canCloakBeDisplayed    props.cloakSlot
+      ,
+        R2.if' canContentBeDisplayed  props.defaultSlot
+      ]
+
+
+data Phase =
+    Idle
+  | Sustain
+  | Wait
+  | Display
+
+derive instance eqPhase :: Eq Phase
--- a/src/Gargantext/Components/Bootstrap/Block/Caveat.purs
+++ b/src/Gargantext/Components/Bootstrap/Block/Caveat.purs
+module Gargantext.Components.Bootstrap.Caveat(caveat) where
+
+import Gargantext.Prelude
+
+import Data.Foldable (intercalate)
+import Gargantext.Components.Bootstrap.Types (Variant(..))
+import Gargantext.Utils.Reactix as R2
+import Reactix as R
+import Reactix.DOM.HTML as H
+
+type Props   = ( | Options )
+type Options =
+  ( className :: String
+  , variant   :: Variant
+  )
+
+options :: Record Options
+options =
+  { className : ""
+  , variant   : Light
+  }
+
+-- | Smart reference to the <alert> Bootstrap component,
+-- | trimming every features regarding the alert system
+-- |
+-- | https://getbootstrap.com/docs/4.6/components/alerts/
+caveat :: forall r. R2.OptComponent Options Props r
+caveat = R2.optComponent component options
+
+componentName :: String
+componentName = "b-caveat"
+
+bootstrapName :: String
+bootstrapName = "alert"
+
+component :: R.Component Props
+component = R.hooksComponent componentName cpt where
+  cpt props children = do
+    -- Computed
+    className <- pure $ intercalate " "
+      -- provided custom className
+      [ props.className
+      -- BEM classNames
+      , componentName
+      -- Bootstrap specific classNames
+      , bootstrapName
+      , bootstrapName <> "-" <> show props.variant
+      ]
+    -- Render
+    pure $
+
+      H.div
+      { className }
+      children
--- a/src/Gargantext/Components/Bootstrap/Block/Fieldset.purs
+++ b/src/Gargantext/Components/Bootstrap/Block/Fieldset.purs
+module Gargantext.Components.Bootstrap.Fieldset
+  ( fieldset
+  ) where
+
+import Gargantext.Prelude
+
+import Data.Array (intercalate)
+import Gargantext.Utils.Reactix as R2
+import Reactix as R
+import Reactix.DOM.HTML as H
+
+type Props =
+  ( titleSlot :: R.Element
+  | Options
+  )
+
+type Options =
+  ( className :: String
+  )
+
+options :: Record Options
+options =
+  { className: ""
+  }
+
+-- | Component simulating a native <fieldset>
+-- | (which has been completly reset by Bootstrap libraries)
+fieldset :: forall r. R2.OptComponent Options Props r
+fieldset = R2.optComponent component options
+
+componentName :: String
+componentName = "b-fieldset"
+
+component :: R.Component Props
+component = R.hooksComponent componentName cpt where
+  cpt props@{ titleSlot
+            } children = do
+    -- Computed
+    className <- pure $ intercalate " "
+      -- provided custom className
+      [ props.className
+      -- BEM classNames
+      , componentName
+      ]
+    -- Render
+    pure $
+
+      H.section
+      { className }
+      [
+        H.div
+        { className: componentName <> "__legend" }
+        [ titleSlot ]
+      ,
+        H.div
+        { className: componentName <> "__content" }
+        children
+      ]
--- a/src/Gargantext/Components/Bootstrap/Block/Spinner.purs
+++ b/src/Gargantext/Components/Bootstrap/Block/Spinner.purs
@@ -3,26 +3,25 @@ module Gargantext.Components.Bootstrap.Spinner(spinner) where
 import Gargantext.Prelude

 import Data.Foldable (intercalate)
+import Gargantext.Components.Bootstrap.Types (SpinnerTheme(..))
 import Gargantext.Utils.Reactix as R2
 import Reactix as R
 import Reactix.DOM.HTML as H

 type Props   = ( | Options)
 type Options =
-  ( theme :: String
+  ( theme     :: SpinnerTheme
  , className :: String
  )

 options :: Record Options
 options =
-  { theme: "border"
-  , className: ""
+  { theme     : BorderTheme
+  , className : ""
  }

 -- | Structural Component for the Bootstrap spinner
 -- |
-- |    * theme: `"border" (default) | "grow"`
-- |
 -- | https://getbootstrap.com/docs/4.4/components/spinners/
 spinner :: forall r. R2.OptLeaf Options Props r
 spinner = R2.optLeaf component options
@@ -43,7 +42,7 @@ component = R.hooksComponent componentName cpt where
      -- BEM classNames
      , componentName
      -- Bootstrap specific classNames
-      , bootstrapName <> "-" <> props.theme
+      , bootstrapName <> "-" <> show props.theme
      ]
    -- Render
    pure $

--- a/src/Gargantext/Components/Bootstrap/Bootstrap.purs
+++ b/src/Gargantext/Components/Bootstrap/Bootstrap.purs
@@ -4,7 +4,12 @@ module Gargantext.Components.Bootstrap

 import Gargantext.Components.Bootstrap.BaseModal(baseModal) as Exports
 import Gargantext.Components.Bootstrap.Button(button) as Exports
+import Gargantext.Components.Bootstrap.Caveat(caveat) as Exports
+import Gargantext.Components.Bootstrap.Cloak(cloak) as Exports
 import Gargantext.Components.Bootstrap.Div(div', div_) as Exports
+import Gargantext.Components.Bootstrap.Fieldset(fieldset) as Exports
 import Gargantext.Components.Bootstrap.FormInput(formInput) as Exports
+import Gargantext.Components.Bootstrap.FormSelect(formSelect) as Exports
 import Gargantext.Components.Bootstrap.FormTextarea(formTextarea) as Exports
+import Gargantext.Components.Bootstrap.Icon(icon) as Exports
 import Gargantext.Components.Bootstrap.Spinner(spinner) as Exports
--- a/src/Gargantext/Components/Bootstrap/Form/FormInput.purs
+++ b/src/Gargantext/Components/Bootstrap/Form/FormInput.purs
@@ -4,7 +4,7 @@ import Gargantext.Prelude

 import Data.Foldable (elem, intercalate)
 import Effect (Effect)
-import Gargantext.Components.Bootstrap.Types (ComponentStatus(..))
+import Gargantext.Components.Bootstrap.Types (ComponentStatus(..), Sizing(..))
 import Gargantext.Utils.Reactix as R2
 import Reactix as R
 import Reactix.DOM.HTML as H
@@ -21,7 +21,7 @@ type Options =
  , className   :: String
  , type        :: String
  , placeholder :: String
-  , size        :: String
+  , size        :: Sizing
  )

 options :: Record Options
@@ -30,13 +30,11 @@ options =
  , className   : ""
  , type        : "text"
  , placeholder : ""
-  , size        : "md"
+  , size        : MediumSize
  }

 -- | Structural Component for the Bootstrap input
 -- |
-- |    * size: `"md" (default) | "sm" | "lg"`
-- |
 -- | https://getbootstrap.com/docs/4.1/components/forms/
 formInput :: forall r. R2.OptLeaf Options Props r
 formInput = R2.optLeaf component options
@@ -61,7 +59,7 @@ component = R.hooksComponent componentName cpt where
      , componentName <> "--" <> show status
      -- Bootstrap specific classNames
      , bootstrapName
-      , bootstrapName <> "-" <> props.size
+      , bootstrapName <> "-" <> show props.size
      ]

    change <- pure $ onChange status callback
@@ -76,6 +74,7 @@ component = R.hooksComponent componentName cpt where
      , placeholder: props.placeholder
      , type: props.type
      , autoComplete: "off"
+      , value: props.value
      }

 -- | * Change event will effectively be triggered according to the

--- a/src/Gargantext/Components/Bootstrap/Form/FormSelect.purs
+++ b/src/Gargantext/Components/Bootstrap/Form/FormSelect.purs
--- a/src/Gargantext/Components/Bootstrap/Inline/Button.purs
+++ b/src/Gargantext/Components/Bootstrap/Inline/Button.purs
--- a/src/Gargantext/Components/Bootstrap/Inline/Icon.purs
+++ b/src/Gargantext/Components/Bootstrap/Inline/Icon.purs
--- a/src/Gargantext/Components/Bootstrap/Types.purs
+++ b/src/Gargantext/Components/Bootstrap/Types.purs
--- a/src/Gargantext/Components/DocsTable/DocumentFormCreation.purs
+++ b/src/Gargantext/Components/DocsTable/DocumentFormCreation.purs
@@ -12,7 +12,7 @@ import Data.Foldable (foldl, intercalate)
 import Data.Maybe (Maybe(..))
 import Effect (Effect)
 import Gargantext.Components.Bootstrap as B
-import Gargantext.Components.Bootstrap.Types (ComponentStatus(..))
+import Gargantext.Components.Bootstrap.Types (ButtonVariant(..), ComponentStatus(..), Variant(..))
 import Gargantext.Config.REST (AffRESTError)
 import Gargantext.Hooks.FormValidation (VForm, useFormValidation)
 import Gargantext.Hooks.FormValidation.Unboxed as FV
@@ -204,7 +204,7 @@ component = R.hooksComponent "documentFormCreation" cpt where
          B.button
          { callback: \_ -> onSubmit
          , status: props.status == Deferred ? Deferred $ Enabled
-          , variant: "primary"
+          , variant: ButtonVariant Primary
          , type: "submit"
          , block: true
          }

--- a/src/Gargantext/Components/Forest/Tree/Node.purs
+++ b/src/Gargantext/Components/Forest/Tree/Node.purs
@@ -198,7 +198,7 @@ nodeMainSpanCpt = here.component "nodeMainSpan" cpt
                          , session }

    popOverIcon =
-      H.a { className: "settings fa fa-cog" 
+      H.a { className: "settings fa fa-cog"
          , title : "Each node of the Tree can perform some actions.\n"
            <> "Click here to execute one of them." } []
    dropProps droppedFile droppedFile' isDragOver isDragOver' =
@@ -321,6 +321,7 @@ graphNodeActionsCpt = here.component "graphNodeActions" cpt where
  graphVersions session graphId = GraphAPI.graphVersions { graphId, session }
  errorHandler = logRESTError here "[graphNodeActions]"

+
 listNodeActions :: R2.Leaf NodeActionsCommon
 listNodeActions = R2.leafComponent listNodeActionsCpt
 listNodeActionsCpt :: R.Component NodeActionsCommon
@@ -334,4 +335,3 @@ listNodeActionsCpt = here.component "listNodeActions" cpt where
                 , nodeType: GT.TabNgramType GT.CTabTerms } }
    where
      errorHandler = logRESTError here "[listNodeActions]"
-
--- a/src/Gargantext/Components/Forest/Tree/Node/Action/Update.purs
+++ b/src/Gargantext/Components/Forest/Tree/Node/Action/Update.purs
--- a/src/Gargantext/Components/Forest/Tree/Node/Action/Update/Types.purs
+++ b/src/Gargantext/Components/Forest/Tree/Node/Action/Update/Types.purs
--- a/src/Gargantext/Components/Forest/Tree/Node/Settings.purs
+++ b/src/Gargantext/Components/Forest/Tree/Node/Settings.purs
--- a/src/Gargantext/Components/Forest/Tree/Node/Tools/Sync.purs
+++ b/src/Gargantext/Components/Forest/Tree/Node/Tools/Sync.purs
--- a/src/Gargantext/Components/GraphExplorer.purs
+++ b/src/Gargantext/Components/GraphExplorer.purs
--- a/src/Gargantext/Components/GraphExplorer/Button.purs
+++ b/src/Gargantext/Components/GraphExplorer/Button.purs
@@ -42,7 +42,7 @@ simpleButtonCpt :: R.Component Props
 simpleButtonCpt = here.component "simpleButton" cpt
  where
    cpt {onClick, text} _ = do
-      pure $ H.button { className: "btn btn-outline-primary"
+      pure $ H.button { className: "btn btn-outline-secondary"
                      , on: {click: onClick}
                      } [ R2.small {} [ H.text text ] ]


--- a/src/Gargantext/Components/GraphExplorer/ToggleButton.purs
+++ b/src/Gargantext/Components/GraphExplorer/ToggleButton.purs
--- a/src/Gargantext/Components/GraphExplorer/TopBar.purs
+++ b/src/Gargantext/Components/GraphExplorer/TopBar.purs
--- a/src/Gargantext/Components/Lang.purs
+++ b/src/Gargantext/Components/Lang.purs
--- a/src/Gargantext/Components/Nodes/Corpus/Phylo.purs
+++ b/src/Gargantext/Components/Nodes/Corpus/Phylo.purs
--- a/src/Gargantext/Components/Nodes/Home.purs
+++ b/src/Gargantext/Components/Nodes/Home.purs
--- a/src/Gargantext/Components/PhyloExplorer/API.purs
+++ b/src/Gargantext/Components/PhyloExplorer/API.purs
--- a/src/Gargantext/Components/PhyloExplorer/ConfigForm.purs
+++ b/src/Gargantext/Components/PhyloExplorer/ConfigForm.purs
--- a/src/Gargantext/Components/PhyloExplorer/ConfigFormContainer.purs
+++ b/src/Gargantext/Components/PhyloExplorer/ConfigFormContainer.purs
--- a/src/Gargantext/Components/PhyloExplorer/DetailsTab.purs
+++ b/src/Gargantext/Components/PhyloExplorer/DetailsTab.purs
--- a/src/Gargantext/Components/PhyloExplorer/Draw.js
+++ b/src/Gargantext/Components/PhyloExplorer/Draw.js
--- a/src/Gargantext/Components/PhyloExplorer/JSON.purs
+++ b/src/Gargantext/Components/PhyloExplorer/JSON.purs
--- a/src/Gargantext/Components/PhyloExplorer/Layout.purs
+++ b/src/Gargantext/Components/PhyloExplorer/Layout.purs
--- a/src/Gargantext/Components/PhyloExplorer/Resources.js
+++ b/src/Gargantext/Components/PhyloExplorer/Resources.js
--- a/src/Gargantext/Components/PhyloExplorer/Draw.purs
+++ b/src/Gargantext/Components/PhyloExplorer/Draw.purs
--- a/src/Gargantext/Components/PhyloExplorer/SelectionTab.purs
+++ b/src/Gargantext/Components/PhyloExplorer/SelectionTab.purs
--- a/src/Gargantext/Components/PhyloExplorer/SideBar.purs
+++ b/src/Gargantext/Components/PhyloExplorer/SideBar.purs
--- a/src/Gargantext/Components/PhyloExplorer/ToolBar.purs
+++ b/src/Gargantext/Components/PhyloExplorer/ToolBar.purs
--- a/src/Gargantext/Components/PhyloExplorer/TopBar.purs
+++ b/src/Gargantext/Components/PhyloExplorer/TopBar.purs
--- a/src/Gargantext/Components/PhyloExplorer/Types.purs
+++ b/src/Gargantext/Components/PhyloExplorer/Types.purs
--- a/src/Gargantext/Components/Reload.purs
+++ b/src/Gargantext/Components/Reload.purs
--- a/src/Gargantext/Components/Router.purs
+++ b/src/Gargantext/Components/Router.purs
--- a/src/Gargantext/Components/TopBar.purs
+++ b/src/Gargantext/Components/TopBar.purs
--- a/src/Gargantext/Ends.purs
+++ b/src/Gargantext/Ends.purs
--- a/src/Gargantext/Hooks/FirstEffect.purs
+++ b/src/Gargantext/Hooks/FirstEffect.purs
--- a/src/Gargantext/Hooks/FormValidation/Boxed.purs
+++ b/src/Gargantext/Hooks/FormValidation/Boxed.purs
--- a/src/Gargantext/Hooks/FormValidation/Unboxed.purs
+++ b/src/Gargantext/Hooks/FormValidation/Unboxed.purs
--- a/src/Gargantext/Hooks/StateRecord/Unboxed.purs
+++ b/src/Gargantext/Hooks/StateRecord/Unboxed.purs
--- a/src/Gargantext/Hooks/UpdateEffect.purs
+++ b/src/Gargantext/Hooks/UpdateEffect.purs
--- a/src/Gargantext/Routes.purs
+++ b/src/Gargantext/Routes.purs
--- a/src/Gargantext/Utils/Reactix.purs
+++ b/src/Gargantext/Utils/Reactix.purs
--- a/src/sass/_abstract.sass
+++ b/src/sass/_abstract.sass
--- a/src/sass/_base.sass
+++ b/src/sass/_base.sass
--- a/src/sass/_components.sass
+++ b/src/sass/_components.sass
+@import "./components/_grouped.scss"
--- a/src/sass/_legacy.sass
+++ b/src/sass/_legacy.sass
--- a/src/sass/_legacy/README.md
+++ b/src/sass/_legacy/README.md
--- a/src/sass/_annotation.sass
+++ b/src/sass/_annotation.sass
--- a/src/sass/_code_editor.sass
+++ b/src/sass/_code_editor.sass
--- a/src/sass/_context_menu.sass
+++ b/src/sass/_context_menu.sass
--- a/src/sass/_folder_view.sass
+++ b/src/sass/_folder_view.sass
--- a/src/sass/_graph.sass
+++ b/src/sass/_graph.sass
--- a/src/sass/_login.sass
+++ b/src/sass/_login.sass
--- a/src/sass/_menu.sass
+++ b/src/sass/_menu.sass
--- a/src/sass/_legacy/_phylo.scss
+++ b/src/sass/_legacy/_phylo.scss
--- a/src/sass/_range_slider.sass
+++ b/src/sass/_range_slider.sass
--- a/src/sass/_styles.sass
+++ b/src/sass/_styles.sass
--- a/src/sass/_tree.sass
+++ b/src/sass/_tree.sass
--- a/src/sass/_modules.sass
+++ b/src/sass/_modules.sass
--- a/src/sass/_phylo.scss
+++ b/src/sass/_phylo.scss
--- a/src/sass/abstract/_form.scss
+++ b/src/sass/abstract/_form.scss
--- a/src/sass/abstract/_members.scss
+++ b/src/sass/abstract/_members.scss
--- a/src/sass/abstract/_variables.scss
+++ b/src/sass/abstract/_variables.scss
--- a/src/sass/bootstrap/_common.scss
+++ b/src/sass/bootstrap/_common.scss
--- a/src/sass/base/_layout.scss
+++ b/src/sass/base/_layout.scss
--- a/src/sass/base/_nav.scss
+++ b/src/sass/base/_nav.scss
--- a/src/sass/base/_typography.scss
+++ b/src/sass/base/_typography.scss
--- a/src/sass/bootstrap/default.sass
+++ b/src/sass/bootstrap/default.sass
--- a/src/sass/components/_grouped.scss
+++ b/src/sass/components/_grouped.scss
--- a/src/sass/modules/_form.scss
+++ b/src/sass/modules/_form.scss
--- a/src/sass/modules/_layout.scss
+++ b/src/sass/modules/_layout.scss
--- a/src/sass/sass.sass
+++ b/src/sass/sass.sass
--- a/src/sass/bootstrap/darkster.scss
+++ b/src/sass/bootstrap/darkster.scss
--- a/src/sass/themes/default.scss
+++ b/src/sass/themes/default.scss
--- a/src/sass/bootstrap/greyson.scss
+++ b/src/sass/bootstrap/greyson.scss
--- a/src/sass/bootstrap/herbie.scss
+++ b/src/sass/bootstrap/herbie.scss
--- a/src/sass/bootstrap/monotony.scss
+++ b/src/sass/bootstrap/monotony.scss