"By variable" groups

src/modules/RA/Scene/components/GeolayerSelect.js

@@ -5,6 +5,7 @@ import { LinearProgress, withDataProvider, GET_LIST } from 'react-admin';
 import debounce from 'lodash.debounce';
 import uniqBy from 'lodash.uniqby';
 
+import Box from '@material-ui/core/Box';
 import FormControl from '@material-ui/core/FormControl';
 import InputLabel from '@material-ui/core/InputLabel';
 import MenuItem from '@material-ui/core/MenuItem';
@@ -120,7 +121,11 @@ const GeolayerSelect = ({ dataProvider, onChange, excludeIds = [], includeIds =
    * Display progress bar until we have geolayers
    */
   if (!geolayers) {
-    return <LinearProgress />;
+    return (
+      <Box>
+        <LinearProgress timeout={0} style={{ marginTop: 30, marginBottom: 30 }} />
+      </Box>
+    );
   }
 
   if (!geolayers.length) {

src/modules/RA/Scene/components/TreeInput.js

@@ -35,6 +35,7 @@ const generateNodeProps = (treeData, setTreeData, includeIds) =>
       className: classnames({
         treeGroup: node.group,
         treeGroupExclusive: node.exclusive,
+        treeGroupByVariable: node.byVariable,
       }),
       buttons: [<TreeNodeToolbar {...menuProps} />],
     };
@@ -91,7 +92,7 @@ const TreeInput = ({ input: { value, onChange }, ...props }) => {
    */
   const addGroup = () => onChange([
     ...value,
-    { label: 'New group name', group: true },
+    { label: 'New group name', group: true, children: [], expanded: true },
   ]);
 
   if (!value) {

src/modules/RA/Scene/components/TreeInput.scss

@@ -31,4 +31,10 @@
       background-image: url(../assets/RadioButton.svg);
     }
   }
+
+  &ByVariable {
+    .rst__moveHandle {
+      background-image: url(../assets/List.svg);
+    }
+  }
 }

src/modules/RA/Scene/components/TreeNodeLabelInput.js

@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { changeNodeAtPath } from 'react-sortable-tree';
+import { changeNodeAtPath, getNodeAtPath } from 'react-sortable-tree';
+import Box from '@material-ui/core/Box';
 
 import TextField from '@material-ui/core/TextField';
 
@@ -16,9 +17,31 @@ const NodeLabel = ({ treeData, setTreeData, path, node }) => {
       newNode: { ...node, label },
     }));
 
+
+  const parentVariables = React.useMemo(
+    () => getNodeAtPath({
+      treeData,
+      path: path.slice(0, -1),
+      getNodeKey: ({ treeIndex }) => treeIndex,
+    })?.node?.variables,
+    [path, treeData],
+  );
+
   /* Only groups have editable labels */
   if (!node.group) {
-    return node.label;
+    return (
+      <>
+        {node.label}
+
+        {Boolean(parentVariables?.length) && (
+          <Box style={{ fontWeight: 400, fontSize: '0.8em' }}>
+            {parentVariables.map(({ id, label }) =>
+              // eslint-disable-next-line no-irregular-whitespace
+              `${label} : ${node.variables?.[id]}`).join(', ')}
+          </Box>
+        )}
+      </>
+    );
   }
 
   return <TextField onChange={handleChange} value={node.label} />;