Merge branch '272-dev-folder-view' of...

Merge branch '272-dev-folder-view' of ssh://gitlab.iscpif.fr:20022/gargantext/purescript-gargantext into dev-merge

dist/styles/sass.css

@@ -829,4 +829,11 @@ ul li {
   background-color: #F5949931;
 }
 
+.folders {
+  display: grid;
+  grid-template-columns: 100px 100px 100px;
+  gap: 10px;
+  margin: 10px 0px;
+}
+
 /*# sourceMappingURL=sass.css.map */

dist/styles/sass.css.map

-{"version":3,"sourceRoot":"","sources":["../../src/sass/_menu.sass","../../src/sass/_context_menu.sass","../../src/sass/_graph.sass","../../src/sass/_login.sass","../../src/sass/_tree.sass","../../src/sass/_code_editor.sass","../../src/sass/_styles.sass","../../src/sass/_range_slider.sass","../../src/sass/_annotation.sass"],"names":[],"mappings":"AAAA;AAEA;AACA;AACA;AACA;AACA;AAEA;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;;;AAEF;AACI;EACA;;;AAEJ;AACI;EACA;;;AAGJ;AACA;EACI;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;EACA;;;AAEF;EACE;;;AC7CF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AClBF;EACE;EACA;EACA;;;AAEF;AAkCE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAxCA;EAZA;EACA;EAEA;EAWE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;;AAGA;EACE;EACA;;AACN;EACE;;AACF;EACE;;AAEF;EApCA;EACA;EAEA;EAmCE;EACA;;AACF;EACE;;AACF;EACE;;AAWF;EAEE;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AAEJ;EACE;;AAEA;EACE;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACrFJ;EACE;;;AAOF;EACE;;AACA;EACE;EACA;;;AAEJ;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;AAEE;EACE;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AAKJ;EACE;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EACE;;AACF;EACE;EACA;EACA;EACA;;AACA;EACE;;AACN;EACE;EACA;EACA;EACA;;;AAGN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;;;AAGF;EACE;;;AAEJ;EACI;EACA;;;AAGF;EACE;;;AAEJ;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;ACvKF;EACE;;;AAGA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGA;EACE;;AACF;EACE;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAGN;EACE;;;AAIA;EACE;;AACA;EACE;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;EACA;EACA;;AACF;EACE;;AACF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AACF;EACE;;AAGN;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AAIR;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAEV;EACE;;AACF;EACE;;AAEE;EACE;;AACF;EACE;;AACN;EACE;;AAEE;EACE;;;AAGR;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;;AAIF;EACE;;AAEA;EACE;;;AAGN;EACE;;AACF;EACE;;AACF;EACE;;;AAEJ;EACE;;;ACpJE;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EApCR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AA0CM;EACE;EACA;EACA;EACA;EACA;EA5CR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAkDE;EACE;EACA;EACA;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAGE;EACE;;AAEF;EACE;;;ACrFV;EACE;;AACF;EAEE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGE;EACE;EACA;;AAEF;EACE;EACA;;;AAEV;EACE;;AACA;EACE;;AACF;EACE;EACA;EACA;;;AAIA;EACE;;AACA;EACE;EACA;;AACF;EACE;;AACA;EACE;;AACJ;EACE;;;AAER;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;AAGI;EACE;;AACF;EACE;;;AAEN;EACE;EACA;EACA;;;AAIA;EACE;;AACF;EACE;;;AAEJ;EACE;;AACA;EACE;;;AAEJ;EACE;EACA;;;AClFF;EACE;AACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EAEA;;AAEA;EACE;EAEA;EACA;EACA;;;AAGN;EACE;;;ACxBJ;EACE;;AAEA;EANE;EACA;;AAQF;EAbE;EACA;;AAeF;EAhBE;EACA;;AAkBF;EAnBE;EACA;;AAqBF;EA1BE;EACA,kBANyB;;AAkC3B;EA7BE;EACA,kBAPqB;;AAsCvB;EAhCE;EACA,kBAJoB;;;AAuCtB;EApCE;EACA,kBANyB;;AA4C3B;EAvCE;EACA,kBAPqB;;AAgDvB;EA1CE;EACA,kBAJoB","file":"sass.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/sass/_menu.sass","../../src/sass/_context_menu.sass","../../src/sass/_graph.sass","../../src/sass/_login.sass","../../src/sass/_tree.sass","../../src/sass/_code_editor.sass","../../src/sass/_styles.sass","../../src/sass/_range_slider.sass","../../src/sass/_annotation.sass","../../src/sass/_folder_view.sass"],"names":[],"mappings":"AAAA;AAEA;AACA;AACA;AACA;AACA;AAEA;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;;;AAEF;AACI;EACA;;;AAEJ;AACI;EACA;;;AAGJ;AACA;EACI;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;EACA;;;AAEF;EACE;;;AC7CF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AClBF;EACE;EACA;EACA;;;AAEF;AAkCE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAxCA;EAZA;EACA;EAEA;EAWE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;;AAGA;EACE;EACA;;AACN;EACE;;AACF;EACE;;AAEF;EApCA;EACA;EAEA;EAmCE;EACA;;AACF;EACE;;AACF;EACE;;AAWF;EAEE;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AAEJ;EACE;;AAEA;EACE;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACrFJ;EACE;;;AAOF;EACE;;AACA;EACE;EACA;;;AAEJ;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;AAEE;EACE;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AAKJ;EACE;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EACE;;AACF;EACE;EACA;EACA;EACA;;AACA;EACE;;AACN;EACE;EACA;EACA;EACA;;;AAGN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;;;AAGF;EACE;;;AAEJ;EACI;EACA;;;AAGF;EACE;;;AAEJ;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;ACvKF;EACE;;;AAGA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGA;EACE;;AACF;EACE;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAGN;EACE;;;AAIA;EACE;;AACA;EACE;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;EACA;EACA;;AACF;EACE;;AACF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AACF;EACE;;AAGN;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AAIR;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAEV;EACE;;AACF;EACE;;AAEE;EACE;;AACF;EACE;;AACN;EACE;;AAEE;EACE;;;AAGR;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;;AAIF;EACE;;AAEA;EACE;;;AAGN;EACE;;AACF;EACE;;AACF;EACE;;;AAEJ;EACE;;;ACpJE;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EApCR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AA0CM;EACE;EACA;EACA;EACA;EACA;EA5CR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAkDE;EACE;EACA;EACA;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAGE;EACE;;AAEF;EACE;;;ACrFV;EACE;;AACF;EAEE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGE;EACE;EACA;;AAEF;EACE;EACA;;;AAEV;EACE;;AACA;EACE;;AACF;EACE;EACA;EACA;;;AAIA;EACE;;AACA;EACE;EACA;;AACF;EACE;;AACA;EACE;;AACJ;EACE;;;AAER;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;AAGI;EACE;;AACF;EACE;;;AAEN;EACE;EACA;EACA;;;AAIA;EACE;;AACF;EACE;;;AAEJ;EACE;;AACA;EACE;;;AAEJ;EACE;EACA;;;AClFF;EACE;AACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EAEA;;AAEA;EACE;EAEA;EACA;EACA;;;AAGN;EACE;;;ACxBJ;EACE;;AAEA;EANE;EACA;;AAQF;EAbE;EACA;;AAeF;EAhBE;EACA;;AAkBF;EAnBE;EACA;;AAqBF;EA1BE;EACA,kBANyB;;AAkC3B;EA7BE;EACA,kBAPqB;;AAsCvB;EAhCE;EACA,kBAJoB;;;AAuCtB;EApCE;EACA,kBANyB;;AA4C3B;EAvCE;EACA,kBAPqB;;AAgDvB;EA1CE;EACA,kBAJoB;;;ACRxB;EACE;EACA;EACA;EACA","file":"sass.css"}
\ No newline at end of file

src/Gargantext/Components/Nodes/Corpus.purs

 module Gargantext.Components.Nodes.Corpus where
 
 import Gargantext.Prelude
-  ( Unit, bind, const, discard, pure, show, unit
-  , ($), (+), (-), (<), (<$>), (<<<), (<>), (==), (>))
+  ( Unit, bind, discard, pure, show, unit, compare
+  , ($), (+), (-), (<), (<$>), (<<<), (<>), (==), (>), class Show, class Eq, Ordering)
 import Data.Argonaut (class DecodeJson, decodeJson, encodeJson)
 import Data.Argonaut.Parser (jsonParser)
 import Data.Array as A
 import Data.Either (Either(..))
+import Data.Generic.Rep (class Generic)
+import Data.Generic.Rep.Eq (genericEq)
+import Data.Generic.Rep.Show (genericShow)
 import Data.List as List
 import Data.Maybe (Maybe(..), fromMaybe)
 import Data.Tuple (Tuple(..))
-import Data.Tuple.Nested ((/\))
 import DOM.Simple.Console (log2)
 import Effect (Effect)
 import Effect.Aff (Aff, launchAff_, throwError)
@@ -30,9 +32,10 @@ import Gargantext.Components.Nodes.Types
 import Gargantext.Components.Nodes.Corpus.Types (CorpusData, Hyperdata(..))
 import Gargantext.Data.Array as GDA
 import Gargantext.Hooks.Loader (useLoader)
-import Gargantext.Routes (SessionRoute(NodeAPI, Children))
+import Gargantext.Routes (SessionRoute(NodeAPI, Children, TreeFirstLevel), AppRoute(Home), appPath, nodeTypeAppRoute)
 import Gargantext.Sessions (Session, get, put, sessionId)
-import Gargantext.Types (NodeType(..), AffTableResult)
+import Gargantext.Types (NodeType(..), AffTableResult, SessionId, fldr)
+import Gargantext.Components.Forest.Tree.Node.Tools.FTree (FTree, LNode(..), NTree(..), fTreeID)
 import Gargantext.Utils.Crypto as Crypto
 import Gargantext.Utils.Reactix as R2
 import Gargantext.Utils.Toestand as T2
@@ -48,7 +51,7 @@ corpusLayout props = R.createElement corpusLayoutCpt props []
 corpusLayoutCpt :: R.Component Props
 corpusLayoutCpt = here.component "corpusLayout" cpt where
   cpt { nodeId, session } _ = cp <$> R.useContext session where
-    cp s = corpusLayoutWithKey { key, nodeId, session: s } where
+    cp s = corpusLayoutMain { key, nodeId, session: s } where
       key = show (sessionId s) <> "-" <> show nodeId
 
 type KeyProps =
@@ -57,6 +60,42 @@ type KeyProps =
   , session :: Session
   )
 
+corpusLayoutMain :: R2.Leaf KeyProps
+corpusLayoutMain props = R.createElement corpusLayoutMainCpt props []
+
+corpusLayoutMainCpt :: R.Component KeyProps
+corpusLayoutMainCpt = here.component "corpusLayoutMain" cpt
+  where
+    cpt { nodeId, key, session } _ = do
+      viewType <- T.useBox Folders
+
+      pure $ H.div{} [
+        H.div{} [viewTypeSelector {state: viewType} ]
+      , H.div{} [corpusLayoutSelection {state: viewType, key, session, nodeId}]
+      ]
+
+type SelectionProps = 
+  ( nodeId  :: Int
+  , key     :: String
+  , session :: Session
+  , state   :: T.Box ViewType
+  )
+
+corpusLayoutSelection :: R2.Leaf SelectionProps
+corpusLayoutSelection props = R.createElement corpusLayoutSelectionCpt props []
+
+corpusLayoutSelectionCpt :: R.Component SelectionProps
+corpusLayoutSelectionCpt = here.component "corpusLayoutSelection" cpt where
+  cpt { nodeId, session, key, state} _ = do
+    state' <- T.useLive T.unequal state
+    viewType <- T.read state
+
+    pure $ renderContent viewType nodeId session key
+
+  renderContent Folders nodeId session key = folderViewLoad { nodeId, session }
+  renderContent Code nodeId session key = corpusLayoutWithKey { key, nodeId, session }
+
+
 corpusLayoutWithKey :: R2.Leaf KeyProps
 corpusLayoutWithKey props = R.createElement corpusLayoutWithKeyCpt props []
 
@@ -100,8 +139,7 @@ corpusLayoutViewCpt = here.component "corpusLayoutView" cpt
           [ H.div { className: "btn btn-primary " <> (saveEnabled fieldsWithIndex fields')
                   , on: { click: onClickSave {fields: fields', nodeId, reload, session} }
                   }
-            [ H.span { className: "fa fa-floppy-o" } [  ]
-            ]
+            [ H.span { className: "fa fa-floppy-o" } [  ] ]
           ]
         , H.div {}
           [ fieldsCodeEditor { fields: fieldsS
@@ -134,6 +172,80 @@ corpusLayoutViewCpt = here.component "corpusLayoutView" cpt
     onClickAdd fieldsS _ = do
       T.modify_ (\fields -> List.snoc fields $ Tuple (List.length fields) defaultField) fieldsS
 
+data FolderStyle = FolderUp | FolderChild
+
+folderViewLoad :: R2.Leaf LoadProps
+folderViewLoad props = R.createElement folderViewLoadCpt props []
+
+folderViewLoadCpt :: R.Component LoadProps
+folderViewLoadCpt = here.component "folderViewLoadCpt" cpt where
+  cpt {nodeId, session} _ = do
+    useLoader {nodeId, session} loadFolders $
+      \folders -> folderView {folders, nodeId, session}
+
+type FolderViewProps = 
+  ( 
+    nodeId :: Int
+  , folders:: FTree
+  , session :: Session
+  )
+
+folderView :: Record FolderViewProps -> R.Element
+folderView props = R.createElement folderViewCpt props []
+
+folderViewCpt :: R.Component FolderViewProps
+folderViewCpt = here.component "folderViewCpt" cpt where
+  cpt {nodeId, session, folders: (NTree (LNode {parent_id: parentId}) (folders))} _ = do
+    let sid = sessionId session 
+    let foldersS = A.sortBy sortFolders folders
+    let children = makeFolderElements foldersS sid
+    let parent = makeParentFolder parentId sid
+
+    pure $ H.div {className: "folders"} $ parent <> children
+
+  makeFolderElements :: Array (NTree LNode) -> SessionId -> Array R.Element
+  makeFolderElements foldersS sid = makeFolderElementsMap <$> foldersS where
+    makeFolderElementsMap :: NTree LNode -> R.Element
+    makeFolderElementsMap (NTree (LNode node) _) = folder {style: FolderChild, text: node.name, nodeId: node.id, nodeType: node.nodeType, sid: sid} []
+
+  makeParentFolder :: Maybe Int -> SessionId -> Array R.Element
+  makeParentFolder (Just parentId) sid =
+    -- FIXME: The NodeType here should not be hardcoded to FolderPrivate but we currently can't get the actual NodeType
+    -- without performing another API call. Also parentId is never being returned by this API even when it clearly exists
+    [ folder {style: FolderUp, text: "..", nodeId: parentId, nodeType: FolderPrivate, sid: sid} [] ]
+  makeParentFolder Nothing _ = []
+
+  sortFolders :: FTree -> FTree -> Ordering
+  sortFolders a b = compare (fTreeID a) (fTreeID b)
+
+
+type FolderProps = 
+  (
+    style :: FolderStyle
+  , text :: String
+  , nodeType :: NodeType
+  , nodeId :: Int
+  , sid :: SessionId
+  )
+
+folder :: R2.Component FolderProps
+folder = R.createElement folderCpt
+
+folderCpt :: R.Component FolderProps
+folderCpt = here.component "folderCpt" cpt where
+  cpt {style, text, nodeId, sid, nodeType} _ = do
+    pure $ H.a {className: "btn btn-primary", href: "/#/" <> getFolderPath nodeType sid nodeId}  [ H.i { className: icon style nodeType } []
+                                                                   , H.br {}
+                                                                   , H.text text]
+  
+  icon :: FolderStyle -> NodeType -> String
+  icon FolderUp _ = "fa fa-folder-open"
+  icon _ nodeType = fldr nodeType false
+
+  getFolderPath :: NodeType -> SessionId -> Int -> String
+  getFolderPath nodeType sid nodeId = appPath $ fromMaybe Home $ nodeTypeAppRoute nodeType sid nodeId
+
+
 type FieldsCodeEditorProps =
   (
     fields :: T.Box FTFieldsWithIndex
@@ -406,6 +518,9 @@ type LoadProps =
 loadCorpus' :: Record LoadProps -> Aff (NodePoly Hyperdata)
 loadCorpus' {nodeId, session} = get session $ NodeAPI Corpus (Just nodeId) ""
 
+loadFolders :: Record LoadProps -> Aff FTree
+loadFolders {nodeId, session} = get session $ TreeFirstLevel (Just nodeId) ""
+
 -- Just to make reloading effective
 loadCorpusWithReload :: { reload :: T2.Reload  | LoadProps } -> Aff (NodePoly Hyperdata)
 loadCorpusWithReload {nodeId, session} = loadCorpus' {nodeId, session}
@@ -466,3 +581,43 @@ type LoadWithReloadProps =
 -- Just to make reloading effective
 loadCorpusWithChildAndReload :: Record LoadWithReloadProps -> Aff CorpusData
 loadCorpusWithChildAndReload {nodeId, reload, session} = loadCorpusWithChild {nodeId, session}
+
+data ViewType = Code | Folders
+derive instance genericViewType :: Generic ViewType _
+instance eqViewType :: Eq ViewType where
+  eq = genericEq
+instance showViewType :: Show ViewType where
+  show = genericShow
+
+type ViewTypeSelectorProps =
+  (
+    state :: T.Box ViewType
+  )
+
+viewTypeSelector :: Record ViewTypeSelectorProps -> R.Element
+viewTypeSelector p = R.createElement viewTypeSelectorCpt p []
+
+viewTypeSelectorCpt :: R.Component ViewTypeSelectorProps
+viewTypeSelectorCpt = here.component "viewTypeSelector" cpt
+  where
+    cpt {state} _ = do
+      state' <- T.useLive T.unequal state
+
+      pure $ H.div { className: "btn-group"
+                   , role: "group" } [
+          viewTypeButton Folders state' state
+        , viewTypeButton Code state' state
+        ]
+
+    viewTypeButton viewType state' state =
+      H.button { className: "btn btn-primary" <> active
+               , on: { click: \_ -> T.write viewType state }
+               , type: "button"
+               } [
+        H.i { className: "fa " <> (icon viewType) } []
+      ]
+      where
+        active = if viewType == state' then " active" else ""
+
+    icon Folders = "fa-folder"
+    icon Code = "fa-code"

src/sass/_folder_view.sass

+.folders
+  display: grid
+  grid-template-columns: 100px 100px 100px
+  gap: 10px
+  margin: 10px 0px
\ No newline at end of file

src/sass/sass.sass

@@ -7,3 +7,4 @@
 @use "_styles.sass"
 @use "_range_slider.sass"
 @use "_annotation.sass"
+@use "_folder_view.sass"