chain: layout adjustments (#4178)

* chain: layout adjustments (buttons bar);

* keep chain "quantitiative" and "categorical" translations

* code cleanup

* code cleanup

* code cleanup; merging chain statistical analysis form into sampling design form

* moved to sampling design form only necessary fields

* code cleanup

* code cleanup

* code cleanup

* code cleanup

---------

Co-authored-by: Stefano Ricci <SteRiccio@users.noreply.github.com>

Author: SteRiccio

core/i18n/resources/en/common.js

@@ -720,7 +720,7 @@ It can be simple text or Markdown language (https://www.markdownguide.org).`,
       surveyNotPublished: '$t(chainView.cannotStartRStudio.common): publish the survey first',
     },
     nonResponseBiasCorrection: 'Non-response bias correction',
-    nonResponseBiasCorrectionTip: `To implement this method, add 'design_psu' and 'design_ssu' into the stratum category as extra properties.`,
+    nonResponseBiasCorrectionInfo: `To implement this method, add 'design_psu' and 'design_ssu' into the stratum category as extra properties.`,
     pValue: 'P-value',
     resultsBackFromRStudio: 'Results read back from RStudio',
     samplingDesign: 'Sampling Design',
@@ -744,6 +744,7 @@ It can be simple text or Markdown language (https://www.markdownguide.org).`,
         dimensionsSeparate: 'Dimensions separately',
       },
       reportingArea: 'Total reporting area (ha) (Optional)',
+      reportingAreaInfo: `With stratified sampling, give areas of strata within the stratum attribute's category table (column name 'area')`,
     },
     stratumAttribute: 'Stratum attribute',
     postStratificationAttribute: 'Post stratification attribute',
@@ -795,6 +796,8 @@ $t(common.cantUndoWarning)`,
   chain: {
     quantitative: 'Quantitative',
     categorical: 'Categorical',
+    addQuantitative: 'Add quantitative attribute',
+    addCategorical: 'Add categorical attribute',
     emptyNodeDefs: '$t(validationErrors:analysis.analysisNodeDefsRequired)',
     entityExcludedInRStudioScripts:
       'the entity and all the related result variables will be excluded in the RStudio scripts',

core/i18n/resources/es/common.js

@@ -590,7 +590,7 @@ export default {
       surveyNotPublished: '$t(chainView.cannotStartRStudio.common): primero publique la encuesta',
     },
     nonResponseBiasCorrection: 'Corrección de sesgo por no respuesta',
-    nonResponseBiasCorrectionTip:
+    nonResponseBiasCorrectionInfo:
       "Para implementar este método, agregue 'design_psu' y 'design_ssu' a la categoría de estrato como propiedades adicionales.",
     pValue: 'Valor P',
     resultsBackFromRStudio: 'Resultados leídos de RStudio',
@@ -615,6 +615,7 @@ export default {
         dimensionsSeparate: 'Dimensiones por separado',
       },
       reportingArea: 'Área total de informe (ha) (Opcional)',
+      reportingAreaInfo: `Con muestreo estratificado, proporcione las áreas de los estratos en la tabla de categorías del atributo de estrato (nombre de la columna 'area')`,
     },
     stratumAttribute: 'Atributo de estrato',
     postStratificationAttribute: 'Atributo de postestratificación',
@@ -649,6 +650,8 @@ export default {
   chain: {
     quantitative: 'Cuantitativo',
     categorical: 'Categórico',
+    addQuantitative: 'Agregar atributo cuantitativo',
+    addCategorical: 'Agregar atributo categórico',
     emptyNodeDefs: '$t(validationErrors:analysis.analysisNodeDefsRequired)',
     entityExcludedInRStudioScripts:
       'la entidad y todas las variables de resultado relacionadas se excluirán en los scripts de RStudio',

core/i18n/resources/fr/common.js

@@ -724,7 +724,7 @@ Il peut être du texte simple ou du langage Markdown (https://www.markdownguide.
       surveyNotPublished: "$t(chainView.cannotStartRStudio.common) : publiez d'abord le formulaire",
     },
     nonResponseBiasCorrection: 'Correction du biais de non-réponse',
-    nonResponseBiasCorrectionTip: `Pour implémenter cette méthode, ajoutez 'design_psu' et 'design_ssu' dans la catégorie de strate comme propriétés supplémentaires.`,
+    nonResponseBiasCorrectionInfo: `Pour implémenter cette méthode, ajoutez 'design_psu' et 'design_ssu' dans la catégorie de strate comme propriétés supplémentaires.`,
     pValue: 'Valeur P',
     resultsBackFromRStudio: 'Résultats relus depuis RStudio',
     samplingDesign: "Plan d'échantillonnage",
@@ -748,6 +748,7 @@ Il peut être du texte simple ou du langage Markdown (https://www.markdownguide.
         dimensionsSeparate: 'Dimensions séparément',
       },
       reportingArea: 'Surface totale de rapport (ha) (Optionnel)',
+      reportingAreaInfo: `Avec un échantillonnage stratifié, indiquez les superficies des strates dans la table de catégories de l'attribut de strate (nom de la colonne 'area')`,
     },
     stratumAttribute: 'Attribut de strate',
     postStratificationAttribute: 'Attribut de post-stratification',
@@ -800,6 +801,8 @@ $t(common.cantUndoWarning)`,
   chain: {
     quantitative: 'Quantitatif',
     categorical: 'Catégoriel',
+    addQuantitative: 'Ajouter un attribut quantitatif',
+    addCategorical: 'Ajouter un attribut catégoriel',
     emptyNodeDefs: '$t(validationErrors:analysis.analysisNodeDefsRequired)',
     entityExcludedInRStudioScripts:
       "l'entité et toutes les variables de résultats associées seront exclues des scripts RStudio",

core/i18n/resources/mn/common.js

@@ -702,7 +702,7 @@ $t(common.raiseTicketInSupportForum)
       surveyNotPublished: '$t(chainView.cannotStartRStudio.common): эхлээд судалгааг нийтлэх',
     },
     nonResponseBiasCorrection: 'Хариу өгөхгүй байх хазайлт засварлах',
-    nonResponseBiasCorrectionTip: `Энэ аргыг хэрэгжүүлэхийн тулд "design_psu" болон "design_ssu"-г давхаргын ангилалд нэмэлт шинж чанар болгон нэмнэ үү.`,
+    nonResponseBiasCorrectionInfo: `Энэ аргыг хэрэгжүүлэхийн тулд "design_psu" болон "design_ssu"-г давхаргын ангилалд нэмэлт шинж чанар болгон нэмнэ үү.`,
     pValue: 'P-утга',
     resultsBackFromRStudio: 'RStudio-оос үр дүнг буцааж уншсан',
     samplingDesign: 'Түүвэрлэлтийн загвар',
@@ -726,6 +726,7 @@ $t(common.raiseTicketInSupportForum)
         dimensionsSeparate: 'Хэмжээсүүдийг тусад нь',
       },
       reportingArea: 'Нийт тайлагнах талбай (га) (Заавал биш)',
+      reportingAreaInfo: `Үечилсэн түүвэрлэлтийн хувьд үечилсэн шинж чанарын ангиллын хүснэгтэд давхаргуудын талбайг оруулна уу (баганын нэр 'area')`,
     },
     stratumAttribute: 'Үеийн шинж чанар',
     postStratificationAttribute: 'Дараах үечилсэн шинж чанар',
@@ -769,6 +770,8 @@ $t(common.cantUndoWarning)`,
   chain: {
     quantitative: 'Тоон',
     categorical: 'Ангиллын',
+    addQuantitative: 'Тоон шинж чанар нэмэх',
+    addCategorical: 'Ангиллын шинж чанар нэмэх',
     emptyNodeDefs: '$t(validationErrors:analysis.analysisNodeDefsRequired)',
     entityExcludedInRStudioScripts:
       'объект болон түүнтэй холбоотой бүх үр дүнгийн хувьсагчид RStudio скриптүүдэд хасагдана',

core/i18n/resources/pt/common.js

@@ -721,7 +721,7 @@ Obrigado e aproveite **$t(common.appNameFull)**!`,
       surveyNotPublished: '$t(chainView.cannotStartRStudio.common): publique o inventário primeiro',
     },
     nonResponseBiasCorrection: 'Correção de viés de não resposta',
-    nonResponseBiasCorrectionTip: `Para implementar este método, adicione 'design_psu' e 'design_ssu' na categoria de estrato como propriedades extras.`,
+    nonResponseBiasCorrectionInfo: `Para implementar este método, adicione 'design_psu' e 'design_ssu' na categoria de estrato como propriedades extras.`,
     pValue: 'Valor-p',
     resultsBackFromRStudio: 'Resultados lidos de volta do RStudio',
     samplingDesign: 'Desenho amostral',
@@ -745,6 +745,7 @@ Obrigado e aproveite **$t(common.appNameFull)**!`,
         dimensionsSeparate: 'Dimensões separadamente',
       },
       reportingArea: 'Área total de reporte (ha) (Opcional)',
+      reportingAreaInfo: `Com amostragem estratificada, forneça as áreas dos estratos na tabela de categorias do atributo de estrato (nome da coluna 'area')`,
     },
     stratumAttribute: 'Atributo de estrato',
     postStratificationAttribute: 'Atributo de pós-estratificação',
@@ -796,6 +797,8 @@ $t(common.cantUndoWarning)`,
   chain: {
     quantitative: 'Quantitativo',
     categorical: 'Categórico',
+    addQuantitative: 'Adicionar atributo quantitativo',
+    addCategorical: 'Adicionar atributo categórico',
     emptyNodeDefs: '$t(validationErrors:analysis.analysisNodeDefsRequired)',
     entityExcludedInRStudioScripts:
       'a entidade e todas as variáveis de resultado relacionadas serão excluídas dos scripts do RStudio',

core/i18n/resources/ru/common.js

@@ -701,7 +701,7 @@ $t(common.raiseTicketInSupportForum)
       surveyNotPublished: '$t(chainView.cannotStartRStudio.common): сначала опубликуйте опрос',
     },
     nonResponseBiasCorrection: 'Коррекция смещения из-за неответной реакции',
-    nonResponseBiasCorrectionTip: `Для реализации этого метода добавьте 'design_psu' и 'design_ssu' в категорию страты как дополнительные свойства.`,
+    nonResponseBiasCorrectionInfo: `Для реализации этого метода добавьте 'design_psu' и 'design_ssu' в категорию страты как дополнительные свойства.`,
     pValue: 'P-значение',
     resultsBackFromRStudio: 'Результаты получены из RStudio',
     samplingDesign: 'Дизайн выборки',
@@ -725,6 +725,7 @@ $t(common.raiseTicketInSupportForum)
         dimensionsSeparate: 'Измерения отдельно',
       },
       reportingArea: 'Общая площадь отчетности (га) (Необязательно)',
+      reportingAreaInfo: `При стратифицированной выборке укажите площади страт в таблице категорий атрибута страты (название столбца 'area')`,
     },
     stratumAttribute: 'Атрибут страты',
     postStratificationAttribute: 'Атрибут послестратификации',
@@ -776,6 +777,8 @@ $t(common.cantUndoWarning)`,
   chain: {
     quantitative: 'Количественный',
     categorical: 'Категориальный',
+    addQuantitative: 'Добавить количественный атрибут',
+    addCategorical: 'Добавить категориальный атрибут',
     emptyNodeDefs: '$t(validationErrors:analysis.analysisNodeDefsRequired)',
     entityExcludedInRStudioScripts:
       'сущность и все связанные результирующие переменные будут исключены из скриптов RStudio',

webapp/components/buttons/Button.js

@@ -30,6 +30,30 @@ const getLabel = (props, t) => {
   return label
 }
 
+const Icon = (props) => {
+  const { icon, iconAlt, iconClassName, iconHeight, iconSrc, iconWidth, alignLeft, alignRight } = props
+  return (
+    <>
+      {iconClassName && (
+        <span className={classNames('icon', iconClassName, { 'icon-left': alignLeft, 'icon-right': alignRight })} />
+      )}
+      {iconSrc && <img alt={iconAlt} height={iconHeight} src={iconSrc} width={iconWidth} />}
+      {icon}
+    </>
+  )
+}
+
+Icon.propTypes = {
+  alignLeft: PropTypes.bool,
+  alignRight: PropTypes.bool,
+  icon: PropTypes.node,
+  iconAlt: PropTypes.string,
+  iconClassName: PropTypes.string,
+  iconHeight: PropTypes.number,
+  iconSrc: PropTypes.string,
+  iconWidth: PropTypes.number,
+}
+
 export const Button = forwardRef((props, ref) => {
   const {
     active,
@@ -42,6 +66,9 @@ export const Button = forwardRef((props, ref) => {
     iconClassName,
     iconHeight,
     iconSrc,
+    iconEnd = null,
+    iconEndClassName = null,
+    iconEndSrc = null,
     iconWidth,
     id,
     isTitleMarkdown = false,
@@ -78,17 +105,38 @@ export const Button = forwardRef((props, ref) => {
       color={color}
       data-testid={testId}
       disabled={disabled ? disabled : undefined}
+      endIcon={
+        showIcon &&
+        (iconEnd || iconEndClassName || iconEndSrc) && (
+          <Icon
+            icon={iconEnd}
+            iconAlt={iconAlt}
+            iconClassName={iconEndClassName}
+            iconHeight={iconHeight}
+            iconSrc={iconEndSrc}
+            iconWidth={iconWidth}
+            alignRight={Boolean(label)}
+          />
+        )
+      }
       onClick={onClick}
+      startIcon={
+        showIcon &&
+        (icon || iconClassName || iconSrc) && (
+          <Icon
+            alignLeft={Boolean(label)}
+            icon={icon}
+            iconAlt={iconAlt}
+            iconClassName={iconClassName}
+            iconHeight={iconHeight}
+            iconSrc={iconSrc}
+            iconWidth={iconWidth}
+          />
+        )
+      }
       variant={variant}
       {...otherProps}
     >
-      {showIcon && (
-        <>
-          {iconClassName && <span className={classNames('icon', iconClassName, { 'icon-left': Boolean(label) })} />}
-          {iconSrc && <img alt={iconAlt} height={iconHeight} src={iconSrc} width={iconWidth} />}
-          {icon}
-        </>
-      )}
       {label}
       {children}
     </MuiButton>
@@ -122,6 +170,9 @@ Button.propTypes = {
   iconHeight: PropTypes.number,
   iconSrc: PropTypes.string,
   iconWidth: PropTypes.number,
+  iconEnd: PropTypes.node,
+  iconEndClassName: PropTypes.string,
+  iconEndSrc: PropTypes.string,
   isTitleMarkdown: PropTypes.bool,
   label: PropTypes.string,
   labelIsI18nKey: PropTypes.bool,

webapp/components/survey/SurveyForm/nodeDefs/nodeDefUIProps.js

@@ -38,19 +38,19 @@ const keyIcon = <span className="icon icon-key icon-left" />
 
 const propsUI = {
   [integer]: {
-    icon: <span className="icon-left node_def__icon">123</span>,
+    icon: <span className="icon icon-left node_def__icon">123</span>,
     numberFormat: NumberFormats.integer(),
     defaultValue: '',
   },
 
   [decimal]: {
-    icon: <span className="icon-left node_def__icon">1.23</span>,
+    icon: <span className="icon icon-left node_def__icon">1.23</span>,
     numberFormat: NumberFormats.decimal(),
     defaultValue: '',
   },
 
   [text]: {
-    icon: <span className="icon-left node_def__icon">ABC</span>,
+    icon: <span className="icon icon-left node_def__icon">ABC</span>,
     defaultValue: '',
   },
 

webapp/views/App/views/Analysis/Chain/AnalysisNodeDefs/AnalysisNodeDefsHeader/AnalysisNodeDefsHeader.js

@@ -7,15 +7,14 @@ import * as Chain from '@common/analysis/chain'
 import * as NodeDef from '@core/survey/nodeDef'
 
 import { ChainActions, useChain } from '@webapp/store/ui/chain'
-import { useI18n } from '@webapp/store/system'
 
 import * as NodeDefUIProps from '@webapp/components/survey/SurveyForm/nodeDefs/nodeDefUIProps'
+import { Button } from '@webapp/components'
 import { Checkbox } from '@webapp/components/form'
 
 const AnalysisNodeDefsHeader = ({ toggleShowSamplingNodeDefs, showSamplingNodeDefs }) => {
   const dispatch = useDispatch()
   const navigate = useNavigate()
-  const i18n = useI18n()
   const chain = useChain()
 
   const createNodeDef = (type) => dispatch(ChainActions.createNodeDef({ navigate, type }))
@@ -31,15 +30,18 @@ const AnalysisNodeDefsHeader = ({ toggleShowSamplingNodeDefs, showSamplingNodeDe
           />
         )}
         <div className="analysis-node-defs-header__buttons">
-          <div>
-            {i18n.t('common.add')} <span className="icon icon-plus icon-12px" />
-          </div>
-          <button className="btn btn-s" onClick={() => createNodeDef(NodeDef.nodeDefType.decimal)} type="button">
-            {i18n.t('chain.quantitative')} {NodeDefUIProps.getIconByType(NodeDef.nodeDefType.decimal)}
-          </button>
-          <button className="btn btn-s" onClick={() => createNodeDef(NodeDef.nodeDefType.code)} type="button">
-            {i18n.t('chain.categorical')} {NodeDefUIProps.getIconByType(NodeDef.nodeDefType.code)}
-          </button>
+          <Button
+            iconClassName="icon-plus"
+            iconEnd={NodeDefUIProps.getIconByType(NodeDef.nodeDefType.decimal)}
+            label="common:chain.addQuantitative"
+            onClick={() => createNodeDef(NodeDef.nodeDefType.decimal)}
+          />
+          <Button
+            iconClassName="icon-plus"
+            iconEnd={NodeDefUIProps.getIconByType(NodeDef.nodeDefType.code)}
+            label="common:chain.addCategorical"
+            onClick={() => createNodeDef(NodeDef.nodeDefType.code)}
+          />
         </div>
       </div>
     </div>

webapp/views/App/views/Analysis/Chain/AnalysisNodeDefs/AnalysisNodeDefsHeader/AnalysisNodeDefsHeader.scss

@@ -7,31 +7,11 @@
 }
 
 .analysis-node-defs-header__buttons {
-  background-color: rgba($greyBorder, 0.6);
   display: flex;
   align-items: center;
   padding: 4px 8px;
   height: 3rem;
-
-  div {
-    margin-right: 8px;
-  }
-
-  button {
-    margin-left: 8px;
-    display: flex;
-    justify-content: space-between;
-    font-weight: 600;
-    min-width: 144px;
-
-    .icon {
-      font-size: 0.8rem !important;
-    }
-
-    .icon-left {
-      margin-right: unset;
-    }
-  }
+  gap: 1rem;
 }
 
 .analysis-node-defs-header__buttons_container {
@@ -41,4 +21,4 @@
 
 .analysis-node-defs-header__filter {
   margin-right: 8px;
-}
+}