draft: ui prototype

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2026-03-11T11:54:22.309Z\n"
-"PO-Revision-Date: 2026-03-11T11:54:22.310Z\n"
+"POT-Creation-Date: 2026-04-10T09:19:34.910Z\n"
+"PO-Revision-Date: 2026-04-10T09:19:34.910Z\n"
 
 msgid "All items"
 msgstr "All items"
@@ -217,6 +217,15 @@ msgstr "Select a period"
 msgid "Select years"
 msgstr "Select years"
 
+msgid "New"
+msgstr "New"
+
+msgid "Open"
+msgstr "Open"
+
+msgid "Save"
+msgstr "Save"
+
 msgid ""
 "This visualization can't be deleted because it is used on one or more "
 "dashboards"

src/assets/ArrowDown.jsx

@@ -1,19 +1,17 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
 const ArrowDown = ({ style = { width: 16, height: 16 } }) => (
     <svg
-        xmlns="http://www.w3.org/2000/svg"
+        height="16"
         viewBox="0 0 16 16"
-        version="1.1"
-        style={style}
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
     >
-        <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
-            <path
-                d="M7.29289,11.7071 C7.68342,12.0976 8.31658,12.0976 8.70711,11.7071 L13.7071,6.70711 C14.0976,6.31658 14.0976,5.68342 13.7071,5.29289 C13.3166,4.90237 12.6834,4.90237 12.2929,5.29289 L8,9.58579 L3.70711,5.29289 C3.31658,4.90237 2.68342,4.90237 2.29289,5.29289 C1.90237,5.68342 1.90237,6.31658 2.29289,6.70711 L7.29289,11.7071 Z"
-                fill="#4A5768"
-            ></path>
-        </g>
+        <path
+            d="M4.146 6.146a.5.5 0 01.638-.057l.07.057L8 9.293l3.146-3.147a.5.5 0 01.638-.057l.07.057a.5.5 0 01.057.638l-.057.07-3.5 3.5a.5.5 0 01-.638.057l-.07-.057-3.5-3.5a.5.5 0 010-.708z"
+            fill="currentColor"
+        ></path>
     </svg>
 )
 

src/assets/OptionsIcon.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+export const OptionsIcon = () => (
+    <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M10.5 8.00006C11.0763 8.00018 11.635 7.80117 12.0815 7.43672C12.5279 7.07226 12.8347 6.56475 12.95 6.00006H15V5.00006H12.95C12.8352 4.43492 12.5286 3.92683 12.0821 3.56188C11.6356 3.19692 11.0767 2.99756 10.5 2.99756C9.92332 2.99756 9.36438 3.19692 8.91787 3.56188C8.47136 3.92683 8.16476 4.43492 8.05 5.00006H1V6.00006H8.05C8.16527 6.56475 8.47209 7.07226 8.91855 7.43672C9.36501 7.80117 9.92367 8.00018 10.5 8.00006ZM10.5 7.00006C10.697 7.00006 10.892 6.96127 11.074 6.88588C11.256 6.8105 11.4214 6.70001 11.5607 6.56073C11.6999 6.42144 11.8104 6.25608 11.8858 6.07409C11.9612 5.8921 12 5.69705 12 5.50006C12 5.30308 11.9612 5.10803 11.8858 4.92604C11.8104 4.74405 11.6999 4.57869 11.5607 4.4394C11.4214 4.30012 11.256 4.18963 11.074 4.11425C10.892 4.03886 10.697 4.00006 10.5 4.00006C10.1022 4.00006 9.72064 4.1581 9.43934 4.4394C9.15804 4.72071 9 5.10224 9 5.50006C9 5.89789 9.15804 6.27942 9.43934 6.56073C9.72064 6.84203 10.1022 7.00006 10.5 7.00006ZM7.95 11.0001H15V10.0001H7.95C7.83524 9.43492 7.52864 8.92683 7.08213 8.56188C6.63562 8.19692 6.07668 7.99756 5.5 7.99756C4.92332 7.99756 4.36438 8.19692 3.91787 8.56188C3.47136 8.92683 3.16476 9.43492 3.05 10.0001H1V11.0001H3.05C3.16476 11.5652 3.47136 12.0733 3.91787 12.4383C4.36438 12.8032 4.92332 13.0026 5.5 13.0026C6.07668 13.0026 6.63562 12.8032 7.08213 12.4383C7.52864 12.0733 7.83524 11.5652 7.95 11.0001ZM7 10.5001C7 10.697 6.9612 10.8921 6.88582 11.0741C6.81044 11.2561 6.69995 11.4214 6.56066 11.5607C6.42137 11.7 6.25601 11.8105 6.07403 11.8859C5.89204 11.9613 5.69698 12.0001 5.5 12.0001C5.30302 12.0001 5.10796 11.9613 4.92597 11.8859C4.74399 11.8105 4.57863 11.7 4.43934 11.5607C4.30005 11.4214 4.18956 11.2561 4.11418 11.0741C4.0388 10.8921 4 10.697 4 10.5001C4 10.1022 4.15804 9.72071 4.43934 9.4394C4.72064 9.1581 5.10218 9.00006 5.5 9.00006C5.89782 9.00006 6.27936 9.1581 6.56066 9.4394C6.84196 9.72071 7 10.1022 7 10.5001Z"
+            fill="currentColor"
+        />
+    </svg>
+)

src/components/App.css

@@ -65,7 +65,3 @@ body {
     overflow: hidden;
     position: relative;
 }
-
-.main-center-layout {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
-}

src/components/App.jsx

@@ -26,11 +26,8 @@ import DndContext from './DndContext.jsx'
 import { InterpretationModal } from './InterpretationModal/index.js'
 import Layout from './Layout/Layout.jsx'
 import { MenuBar } from './MenuBar/MenuBar.jsx'
-import { TitleBar } from './TitleBar/TitleBar.jsx'
 import { Visualization } from './Visualization/Visualization.jsx'
-import { VisualizationTypeSelector } from './VisualizationTypeSelector/VisualizationTypeSelector.jsx'
 import './App.css'
-import './scrollbar.css'
 
 // Used to avoid repeating `history` listener calls -- see below
 let lastLocation
@@ -229,10 +226,8 @@ class UnconnectedApp extends Component {
             <>
                 <div className="data-visualizer-app flex-ct flex-dir-col">
                     <Toolbar>
-                        <VisualizationTypeSelector />
                         <MenuBar
                             apiObjectName={this.apiObjectName}
-                            dataTest={'app-menubar'}
                             onFileMenuAction={() => {
                                 if (this.props.ui.rightSidebarOpen) {
                                     this.setState((prevState) => ({
@@ -252,9 +247,6 @@ class UnconnectedApp extends Component {
                                 <div className="main-center-layout">
                                     <Layout />
                                 </div>
-                                <div className="main-center-titlebar">
-                                    <TitleBar />
-                                </div>
                                 <div className="main-center-canvas flex-grow-1">
                                     {this.state.initialLoadIsComplete && (
                                         <Visualization />

src/components/DimensionsPanel/DndDimensionsPanel.jsx

@@ -1,5 +1,6 @@
-import { DimensionFilter } from '@dhis2/analytics'
 import i18n from '@dhis2/d2-i18n'
+import { InputField } from '@dhis2/ui'
+import { IconSearch16 } from '@dhis2/ui-icons'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import { default as DndDimensionList } from './DndDimensionList.jsx'
@@ -20,13 +21,17 @@ export class DndDimensionsPanel extends Component {
         return (
             <div className={styles.container} data-test="dimensions-panel">
                 <div className={styles.filter}>
-                    <DimensionFilter
+                    <InputField
                         placeholder={i18n.t('Filter dimensions')}
-                        text={this.state.filterText}
-                        onChange={this.onFilterTextChange}
-                        onClear={this.onClearFilter}
-                        disableUnderline={true}
+                        value={this.state.filterText}
+                        onChange={({ value }) =>
+                            value.length
+                                ? this.onFilterTextChange(value)
+                                : this.onClearFilter()
+                        }
+                        dense
                         type="search"
+                        prefixIcon={<IconSearch16 />}
                         dataTest="dimensions-panel-filter"
                     />
                 </div>

src/components/DimensionsPanel/styles/DimensionsPanel.style.js

@@ -1,7 +1,11 @@
 export const styles = {
     divContainer: {
-        height: '100%',
+        height: '99%',
         display: 'flex',
         flexDirection: 'column',
+        margin: '4px',
+        borderRadius: '5px',
+        overflow: 'hidden',
+        border: '1px solid var(--colors-grey400)',
     },
 }

src/components/DimensionsPanel/styles/DndDimensionList.module.css

@@ -9,11 +9,11 @@
     inline-size: 100%;
     block-size: 100%;
     overflow: auto;
+    scrollbar-width: thin;
+    scrollbar-color: #c7cfd6 transparent;
     margin-block-start: 0px;
-    padding: var(--spacers-dp8);
+    padding: 0 var(--spacers-dp8);
     background: var(--colors-white);
-    border-block-start: 1px solid var(--colors-grey300);
-    border-block-end: 1px solid var(--colors-grey300);
 }
 
 .list {
@@ -28,8 +28,8 @@
     text-transform: uppercase;
     font-size: 11px;
     color: var(--colors-grey600);
-    margin-block-start: 0;
-    margin-block-end: var(--spacers-dp8);
+    margin-block-start: var(--spacers-dp4);
+    margin-block-end: var(--spacers-dp4);
     margin-inline-start: 0;
     margin-inline-end: 0;
     letter-spacing: 0.3px;

src/components/DimensionsPanel/styles/DndDimensionsPanel.module.css

@@ -2,17 +2,26 @@
     block-size: 100%;
     display: flex;
     flex-direction: column;
-    background-color: var(--colors-grey100);
-    border-inline-end: 1px solid var(--colors-grey400);
-    box-shadow: 1px 0 2px 0 rgba(0, 0, 0, 0.03);
     padding: 0;
     overflow: hidden;
 }
 
 .filter {
-    padding-block-start: var(--spacers-dp8);
-    padding-block-end: 0;
-    padding-inline-start: var(--spacers-dp8);
-    padding-inline-end: var(--spacers-dp8);
+    padding-block-start: 6px;
+    padding-block-end: 8px;
+    padding-inline-start: 6px;
+    padding-inline-end: 6px;
     background: var(--colors-white);
 }
+
+.filter input {
+    font-size: 13px;
+    line-height: 16px;
+    font-weight: 400;
+    border-color: var(--colors-grey300);
+    height: 30px;
+}
+
+.filter input::placeholder {
+    color: var(--colors-grey600);
+}

src/components/Layout/DefaultLayout/DefaultLayout.jsx

@@ -5,36 +5,13 @@ import {
 } from '@dhis2/analytics'
 import React from 'react'
 import DefaultAxis from './DefaultAxis.jsx'
-import defaultAxisStyles from './styles/DefaultAxis.style.js'
 import styles from './styles/DefaultLayout.style.js'
 
 const Layout = () => (
     <div id="layout-ct" style={styles.ct}>
-        <div
-            id="axis-group-1"
-            style={{ ...styles.axisGroup, ...styles.axisGroupLeft }}
-        >
-            <DefaultAxis
-                axisId={AXIS_ID_COLUMNS}
-                style={{
-                    ...styles.columns,
-                    ...defaultAxisStyles.axisContainerLeft,
-                }}
-            />
-            <DefaultAxis
-                axisId={AXIS_ID_ROWS}
-                style={{
-                    ...styles.rows,
-                    ...defaultAxisStyles.axisContainerLeft,
-                }}
-            />
-        </div>
-        <div
-            id="axis-group-2"
-            style={{ ...styles.axisGroup, ...styles.axisGroupRight }}
-        >
-            <DefaultAxis axisId={AXIS_ID_FILTERS} style={styles.filters} />
-        </div>
+        <DefaultAxis axisId={AXIS_ID_COLUMNS} style={styles.firstAxis} />
+        <DefaultAxis axisId={AXIS_ID_ROWS} style={styles.axis} />
+        <DefaultAxis axisId={AXIS_ID_FILTERS} style={styles.axis} />
     </div>
 )
 

src/components/Layout/DefaultLayout/styles/DefaultAxis.module.css

@@ -1,6 +1,8 @@
 .content {
     inline-size: 100%;
     display: flex;
+    gap: 4px;
+    padding-block-start: 2px;
     align-items: flex-start;
     align-content: flex-start;
     flex-wrap: wrap;

src/components/Layout/DefaultLayout/styles/DefaultAxis.style.js

@@ -4,23 +4,22 @@ import * as layoutStyle from '../../styles/style.js'
 export default {
     axisContainer: {
         display: 'flex',
+        flexDirection: 'column',
         backgroundColor: layoutStyle.AXIS_BACKGROUND_COLOR,
         borderColor: layoutStyle.AXIS_BORDER_COLOR,
         borderStyle: layoutStyle.AXIS_BORDER_STYLE,
         borderWidth: layoutStyle.AXIS_BORDER_WIDTH,
         padding: layoutStyle.AXIS_PADDING,
     },
-    axisContainerLeft: {
-        borderInlineStartWidth: 0,
-    },
     label: {
         minWidth: 55,
         maxWidth: 55,
         padding: '2px 0px 0px 0px',
-        fontSize: 11,
-        color: colors.grey700,
+        fontSize: 10,
+        color: colors.grey600,
         userSelect: 'none',
-        letterSpacing: '0.2px',
+        fontFamily: `'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace`,
+        textTransform: 'uppercase',
     },
 }
 // TODO: Refactor this file and all other affected files (DefaultLayout + everything in ../../styles/) to css modules

src/components/Layout/DefaultLayout/styles/DefaultLayout.style.js

@@ -1,34 +1,17 @@
 import { LAYOUT_HEIGHT } from '../../styles/style.js'
 
-// Axis
-export const FILTER_AXIS_WIDTH = '50%'
 export const DIMENSION_AXIS_CONTENT_HEIGHT = '36px'
 
-// Axis (generated)
-export const DIMENSION_AXIS_WIDTH = `${100 - parseInt(FILTER_AXIS_WIDTH, 10)}%`
-
 export default {
     ct: {
         display: 'flex',
         minHeight: LAYOUT_HEIGHT,
     },
-    axisGroup: {
-        display: 'flex',
-        flexDirection: 'column',
-    },
-    axisGroupLeft: {
-        flexBasis: DIMENSION_AXIS_WIDTH,
-    },
-    axisGroupRight: {
-        flexBasis: FILTER_AXIS_WIDTH,
-    },
-    columns: {
-        flexBasis: '50%',
-    },
-    rows: {
-        flexBasis: '50%',
+    axis: {
+        flex: 1,
     },
-    filters: {
-        flexBasis: '100%',
+    firstAxis: {
+        flex: 1,
+        borderInlineStartWidth: 0,
     },
 }

src/components/Layout/Layout.jsx

@@ -6,12 +6,17 @@
     LAYOUT_TYPE_SCATTER,
     LAYOUT_TYPE_OUTLIER_TABLE,
     getLayoutTypeByVisType,
+    UpdateButton,
 } from '@dhis2/analytics'
 import PropTypes from 'prop-types'
 import React from 'react'
 import { connect } from 'react-redux'
 import { sGetUiType } from '../../reducers/ui.js'
+import UpdateVisualizationContainer from '../UpdateButton/UpdateVisualizationContainer.js'
+import VisualizationOptionsManager from '../VisualizationOptions/VisualizationOptionsManager.jsx'
+import { VisualizationTypeSelector } from '../VisualizationTypeSelector/VisualizationTypeSelector.jsx'
+import styles from './Layout.module.css'
 import DefaultLayout from './DefaultLayout/DefaultLayout.jsx'
 import OutlierTableLayout from './OutlierTable/OutlierTableLayout.jsx'
 import PieLayout from './PieLayout/PieLayout.jsx'
 import PivotTableLayout from './PivotTableLayout/PivotTableLayout.jsx'
@@ -31,7 +36,24 @@
     const layoutType = getLayoutTypeByVisType(visType)
     const LayoutComponent = componentMap[layoutType]
 
-    return <LayoutComponent visType={visType} />
+    return (
+        <div className={styles.layout}>
+            <div className={styles.topBar}>
+                <div className={styles.updateButtonWrapper}>
+                    <UpdateVisualizationContainer
+                        renderComponent={(handler) => (
+                            <UpdateButton onClick={handler} />
+                        )}
+                    />
+                </div>
+                <VisualizationTypeSelector />
+                <VisualizationOptionsManager />
+            </div>
+            <div className={styles.content}>
+                <LayoutComponent visType={visType} />
+            </div>
+        </div>
+    )
 }
 
 Layout.propTypes = {