Survey hiearchy and data explorer: group attributes by parent entity

webapp/components/survey/NodeDefsSelector/AttributesSelector/AttributeSelector.scss

@@ -2,8 +2,8 @@
 
 .attribute-selector {
   display: flex;
+  width: 100%;
   justify-content: space-between;
-  margin: 0 0.5rem;
   border-top: none;
   border-left: none;
   border-right: none;

webapp/components/survey/NodeDefsSelector/AttributesSelector/AttributesList.js

@@ -0,0 +1,66 @@
+import './AttributesList.scss'
+
+import React, { useMemo } from 'react'
+import * as PropTypes from 'prop-types'
+
+import * as ObjectUtils from '@core/objectUtils'
+import * as Survey from '@core/survey/survey'
+import * as NodeDef from '@core/survey/nodeDef'
+
+import { useSurvey, useSurveyPreferredLang } from '@webapp/store/survey'
+
+import AttributeSelector from './AttributeSelector'
+
+export const AttributesList = (props) => {
+  const {
+    canSelectAttributes,
+    nodeDefContext,
+    nodeDefLabelType,
+    nodeDefUuidsAttributes,
+    onToggleAttribute,
+    showAncestorsLabel,
+    attributeDefs,
+  } = props
+
+  const survey = useSurvey()
+  const lang = useSurveyPreferredLang()
+  const childDefsByParentUuid = useMemo(
+    () => ObjectUtils.groupByProp(NodeDef.keys.parentUuid)(attributeDefs),
+    [attributeDefs]
+  )
+
+  return Object.entries(childDefsByParentUuid).map(([parentDefUuid, childDefs]) => {
+    const childDefParentDef = Survey.getNodeDefByUuid(parentDefUuid)(survey)
+
+    return childDefs.map((childDef, index) => {
+      const parentHeadingVisible = index === 0 && childDefParentDef !== nodeDefContext
+      return (
+        <div key={NodeDef.getUuid(childDef)} className="attribute-selector-wrapper">
+          {parentHeadingVisible && (
+            <span className="attribute-selector-parent-entity-heading">
+              {NodeDef.getLabelWithType({ nodeDef: childDefParentDef, lang, type: nodeDefLabelType })}
+            </span>
+          )}
+          <AttributeSelector
+            canSelectAttributes={canSelectAttributes}
+            nodeDef={childDef}
+            nodeDefUuidsAttributes={nodeDefUuidsAttributes}
+            onToggleAttribute={onToggleAttribute}
+            showNodeDefPath={!showAncestorsLabel}
+            nodeDefLabelType={nodeDefLabelType}
+          />
+        </div>
+      )
+    })
+  })
+}
+
+AttributesList.propTypes = {
+  attributeDefs: PropTypes.array.isRequired,
+  canSelectAttributes: PropTypes.bool,
+  nodeDefContext: PropTypes.object.isRequired,
+  nodeDefLabelType: PropTypes.string,
+  nodeDefUuidsAttributes: PropTypes.array,
+  onToggleAttribute: PropTypes.func,
+  showAncestorsLabel: PropTypes.bool,
+}

webapp/components/survey/NodeDefsSelector/AttributesSelector/AttributesList.scss

@@ -0,0 +1,10 @@
+.attribute-selector-wrapper {
+  display: flex;
+  flex-direction: column;
+  margin: 0 0.2rem;
+
+  .attribute-selector-parent-entity-heading {
+    font-style: italic;
+    font-size: small;
+  }
+}

webapp/components/survey/NodeDefsSelector/AttributesSelector/AttributesSelector.js

@@ -10,11 +10,12 @@ import * as NodeDef from '@core/survey/nodeDef'
 
 import ExpansionPanel from '@webapp/components/expansionPanel'
 import { Checkbox } from '@webapp/components/form'
-import { useSurvey, useSurveyCycleKey } from '@webapp/store/survey'
+import { useSurvey, useSurveyCycleKey, useSurveyPreferredLang } from '@webapp/store/survey'
 import { useAuthCanUseAnalysis } from '@webapp/store/user'
+import { useI18n } from '@webapp/store/system'
 
 import AttributeSelector from './AttributeSelector'
-import { useI18n } from '@webapp/store/system'
+import { AttributesList } from './AttributesList'
 
 const minDefsToShowSelectAll = 5
 
@@ -26,7 +27,6 @@ const AttributesSelector = (props) => {
     filterTypes = [],
     filterChainUuids = [],
     includeEntityFrequencySelector = false,
-    lang,
     nodeDefLabelType = NodeDef.NodeDefLabelTypes.label,
     nodeDefUuidEntity = null,
     nodeDefUuidsAttributes = [],
@@ -44,6 +44,7 @@ const AttributesSelector = (props) => {
   const i18n = useI18n()
   const survey = useSurvey()
   const cycle = useSurveyCycleKey()
+  const lang = useSurveyPreferredLang()
   const canUseAnalysis = useAuthCanUseAnalysis()
 
   const nodeDefContext = Survey.getNodeDefByUuid(nodeDefUuidEntity)(survey)
@@ -118,38 +119,35 @@ const AttributesSelector = (props) => {
               onChange={onSelectAll}
             />
           )}
-          {visibleChildDefs.map((childDef) => (
-            <AttributeSelector
-              key={NodeDef.getUuid(childDef)}
-              canSelectAttributes={canSelectAttributes}
-              nodeDef={childDef}
-              nodeDefUuidsAttributes={nodeDefUuidsAttributes}
-              onToggleAttribute={onToggleAttribute}
-              showNodeDefPath={!showAncestorsLabel}
-              nodeDefLabelType={nodeDefLabelType}
-            />
-          ))}
+          <AttributesList
+            attributeDefs={visibleChildDefs}
+            canSelectAttributes={canSelectAttributes}
+            nodeDefContext={nodeDefContext}
+            nodeDefLabelType={nodeDefLabelType}
+            nodeDefUuidsAttributes={nodeDefUuidsAttributes}
+            onToggleAttribute={onToggleAttribute}
+            showAncestorsLabel={showAncestorsLabel}
+          />
         </ExpansionPanel>
       )}
       {showAncestors && nodeDefAncestor && (
         <AttributesSelector
-          lang={lang}
           ancestorSelector
+          canSelectAttributes={canSelectAttributes}
+          filterChainUuids={filterChainUuids}
+          filterFunction={filterFunction}
+          filterTypes={filterTypes}
+          nodeDefLabelType={nodeDefLabelType}
           nodeDefUuidEntity={NodeDef.getUuid(nodeDefAncestor)}
           nodeDefUuidsAttributes={nodeDefUuidsAttributes}
           nodeDefUuidsToExclude={[NodeDef.getUuid(nodeDefContext)]}
           onAttributesSelection={onAttributesSelection}
           onToggleAttribute={onToggleAttribute}
-          filterFunction={filterFunction}
-          filterTypes={filterTypes}
-          filterChainUuids={filterChainUuids}
-          canSelectAttributes={canSelectAttributes}
-          showLabel={showAncestorsLabel}
           showAnalysisAttributes={showAnalysisAttributes}
           showAncestorsLabel={showAncestorsLabel}
+          showLabel={showAncestorsLabel}
           showMultipleAttributes={showMultipleAttributes}
           showSiblingsInSingleEntities={showSiblingsInSingleEntities}
-          nodeDefLabelType={nodeDefLabelType}
         />
       )}
     </div>
@@ -163,7 +161,6 @@ AttributesSelector.propTypes = {
   filterTypes: PropTypes.array,
   filterChainUuids: PropTypes.array,
   includeEntityFrequencySelector: PropTypes.bool,
-  lang: PropTypes.string.isRequired,
   nodeDefUuidEntity: PropTypes.string,
   nodeDefUuidsAttributes: PropTypes.array,
   nodeDefUuidsToExclude: PropTypes.array,

webapp/components/survey/NodeDefsSelector/AttributesSelector/AttributesSelector.scss

@@ -7,4 +7,6 @@
   display: grid;
   align-content: start;
   grid-row-gap: 0.3rem;
+
+
 }

webapp/components/survey/NodeDefsSelector/NodeDefsSelector.js

@@ -13,7 +13,7 @@ import * as NodeDefUIProps from '@webapp/components/survey/SurveyForm/nodeDefs/n
 import { ButtonIconFilter } from '@webapp/components/buttons'
 
 import { useI18n } from '@webapp/store/system'
-import { useSurvey, useSurveyPreferredLang } from '@webapp/store/survey'
+import { useSurvey } from '@webapp/store/survey'
 
 import AttributesSelector from './AttributesSelector'
 import EntitySelector from './EntitySelector'
@@ -36,7 +36,6 @@ const NodeDefsSelector = (props) => {
 
   const i18n = useI18n()
   const survey = useSurvey()
-  const lang = useSurveyPreferredLang()
 
   const [filterTypes, setFilterTypes] = useState([])
   const [filterChainUuids, setFilterChainUuids] = useState([])
@@ -111,7 +110,6 @@ const NodeDefsSelector = (props) => {
 
       {nodeDefUuidEntity && (
         <AttributesSelector
-          lang={lang}
           nodeDefUuidEntity={nodeDefUuidEntity}
           nodeDefUuidsAttributes={nodeDefUuidsAttributes}
           onAttributesSelection={onAttributesSelection}

webapp/components/survey/NodeDefsSelector/NodeDefsSelectorAggregate.js

@@ -7,7 +7,7 @@ import * as Expression from '@core/expressionParser/expression'
 import { Query } from '@common/model/query'
 import * as StepVariable from '@common/analysis/stepVariable'
 
-import { useSurvey, useSurveyPreferredLang } from '@webapp/store/survey'
+import { useSurvey } from '@webapp/store/survey'
 
 import ExpansionPanel from '@webapp/components/expansionPanel'
 
@@ -46,7 +46,6 @@ const NodeDefsSelectorAggregate = (props) => {
   } = props
 
   const survey = useSurvey()
-  const lang = useSurveyPreferredLang()
   const hierarchy = Survey.getHierarchy(NodeDef.isEntity)(survey)
 
   const variablesPrevSteps = getPrevCalculations({ nodeDefUuidEntity, survey })
@@ -96,7 +95,6 @@ const NodeDefsSelectorAggregate = (props) => {
           <ExpansionPanel buttonLabel="common.dimension" buttonLabelParams={{ count: 2 }}>
             <AttributesSelector
               onToggleAttribute={onToggleDimension}
-              lang={lang}
               filterFunction={(nodeDef) =>
                 NodeDef.isCode(nodeDef) || NodeDef.isTaxon(nodeDef) || NodeDef.isKey(nodeDef)
               }
@@ -112,7 +110,6 @@ const NodeDefsSelectorAggregate = (props) => {
 
           <ExpansionPanel buttonLabel="common.measure" buttonLabelParams={{ count: 2 }}>
             <AttributesSelector
-              lang={lang}
               filterTypes={[NodeDef.nodeDefType.decimal, NodeDef.nodeDefType.integer]}
               filterFunction={(nodeDef) => !NodeDef.isKey(nodeDef)}
               includeEntityFrequencySelector