feat: split view maps (#154)

* Period display radio * Period display redux * Split view layout * feat: synchronized maps * Multiple thematic layers * Values by period * Split view data * Period names * Display period in feature popup * Period label component * Basemap code cleaning * GIS API upgrade * Don't allow last 52 weeks for split view maps * Period handling * Period handling * Refacotring map instance logic * Layer bounds handling * Map sync refactoring * Attribution * Zoom control * Use layer id to sync maps * Map controls styling for split view * Style fix * Map controls refactoring * Refactor Leaflet styles * Rename periodDisplay to renderingStrategy * Split view support for favorites * Support id from URL in plugin.html * Folder refactoring * Refactoring * New shared MapView component * Plugin map name * Initial map view * Default bounds for plugin maps * Code cleaning * Only allow one split view layer * Styling * Disalbe split view if other layers * Legend fixes * Revert period component testing * Fix rendering strategy bug * GIS API dependency upgrade * Disabled failing test for facility layer * chore: re-add the flaky facilitylayer test assertions * Don't print webpack progress when building for Netlify * Run prebuild on netlify * Review fixes * Display period fix * Fit to layer bounds on each update * Add missing prop type check * Remove obsolete MapProvider * Always fit to layer bounds if map is not zoomed * GIS API upgrade * Version bump
dhis2 · Jul 16, 2019 · 2a81b0d · 2a81b0d
1 parent f3f88ce
commit 2a81b0d
Show file tree

Hide file tree

Showing 52 changed files with 1,466 additions and 871 deletions.
diff --git a/cypress/fixtures/boundarylayer.json b/cypress/fixtures/boundarylayer.json
diff --git a/cypress/fixtures/eventlayer.json b/cypress/fixtures/eventlayer.json
diff --git a/cypress/fixtures/facilitylayer.json b/cypress/fixtures/facilitylayer.json
diff --git a/cypress/fixtures/smoke.json b/cypress/fixtures/smoke.json
diff --git a/cypress/fixtures/thematiclayer.json b/cypress/fixtures/thematiclayer.json
diff --git a/cypress/integration/layers/facilitylayer.spec.js b/cypress/integration/layers/facilitylayer.spec.js
@@ -85,7 +85,9 @@ context('Facility Layers', () => {
             .should('have.length', 1)
             .click();
         cy.get('body').click(); // Close the modal menu
+
         cy.get('[data-test="layeredit-addbtn"]').click();
+
         cy.get('[data-test="facilitydialog"]')
             .should('have.length', 0)
             .should('not.be.visible');

diff --git a/i18n/en.pot b/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: 2019-05-29T09:55:15.600Z\n"
-"PO-Revision-Date: 2019-05-29T09:55:15.600Z\n"
+"POT-Creation-Date: 2019-07-10T01:37:46.780Z\n"
+"PO-Revision-Date: 2019-07-10T01:37:46.780Z\n"
 
 msgid "Maps"
 msgstr ""
@@ -415,6 +415,9 @@ msgstr ""
 msgid "deleted"
 msgstr ""
 
+msgid "Split view can not be combined with other layer types."
+msgstr ""
+
 msgid "Filters"
 msgstr ""
 
@@ -541,9 +544,15 @@ msgstr ""
 msgid "Next year"
 msgstr ""
 
+msgid "Relative"
+msgstr ""
+
 msgid "Period type"
 msgstr ""
 
+msgid "Remove other layers to enable split map view."
+msgstr ""
+
 msgid "Program indicator"
 msgstr ""
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "maps-app",
-    "version": "33.0.2",
+    "version": "33.0.3",
     "description": "DHIS2 Maps",
     "main": "src/app.js",
     "repository": {
@@ -34,7 +34,7 @@
         "cy:e2e:open:update": "CYPRESS_GEN_FIXTURES=true cypress open",
         "prebuild": "yarn test && yarn localize && yarn manifest && rm -rf build && mkdir build && cp -r public/* ./build/",
         "build": "NODE_ENV=production webpack --progress",
-        "build:netlify": "yarn build && d2-manifest package.json build/manifest.webapp --manifest.activities.dhis.href=\"https://play.dhis2.org/dev\"",
+        "build:netlify": "yarn prebuild && NODE_ENV=production webpack && d2-manifest package.json build/manifest.webapp --manifest.activities.dhis.href=\"https://play.dhis2.org/dev\"",
         "manifest": "d2-manifest package.json public/manifest.webapp",
         "lint": "eslint ./src",
         "validate": "npm ls --depth 0 || yarn list",
@@ -52,7 +52,7 @@
         "@dhis2/d2-ui-interpretations": "6.1.0",
         "@dhis2/d2-ui-org-unit-dialog": "5.2.10",
         "@dhis2/d2-ui-org-unit-tree": "5.2.10",
-        "@dhis2/gis-api": "^32.0.22",
+        "@dhis2/gis-api": "^33.0.3",
         "@dhis2/ui": "^1.0.0-beta.15",
         "@material-ui/core": "^3.9.3",
         "@material-ui/icons": "^3.0.2",

diff --git a/public/plugin.html b/public/plugin.html
@@ -53,19 +53,33 @@
         mapPlugin.username = 'admin';
         mapPlugin.password = 'district';
 
+        const mapId = new URL(window.location.href).searchParams.get('id');
+
+        if (mapId) {
+            mapPlugin.load({
+                id: mapId,
+                el: 'map'
+            });
+            picker.style.display = 'none';
+            mapContainer.style.display = 'block';
+        }
+
         function onReloadBtnPress(e) {
             let config = {}
             try {
-                config = JSON.parse(document.getElementById('inputMapConfig').value);
+                const configJson = document.getElementById('inputMapConfig').value;
+
+                if (configJson) {
+                    config = JSON.parse(configJson);
+                }
             } catch (e) {
                 console.error(e)
             }
 
             const id = document.getElementById('inputMapID').value;
+
             if (id && id.length) {
-                config.id = {
-                    id
-                }
+                config.id = id;
             }
 
             config = Object.assign({

diff --git a/src/actions/layerEdit.js b/src/actions/layerEdit.js
@@ -163,9 +163,10 @@ export const setPeriodName = periodName => ({
 });
 
 // Set period type (thematic)
-export const setPeriodType = periodType => ({
+export const setPeriodType = (periodType, clearPeriod = true) => ({
     type: types.LAYER_EDIT_PERIOD_TYPE_SET,
     periodType,
+    clearPeriod,
 });
 
 // Set period (event & thematic)
@@ -339,3 +340,9 @@ export const setFollowUpStatus = checked => ({
     type: types.LAYER_EDIT_FOLLOW_UP_SET,
     payload: checked,
 });
+
+// Set display mode for periods
+export const setRenderingStrategy = display => ({
+    type: types.LAYER_EDIT_RENDERING_STRATEGY_SET,
+    payload: display,
+});
diff --git a/src/app.js b/src/app.js
@@ -32,7 +32,7 @@ getManifest('manifest.webapp')
                 : DHIS_CONFIG.baseUrl;
 
         config.appUrl = baseUrl; // Base url for switching between apps
-        config.baseUrl = `${baseUrl}/api/32`; // Base url for Web API requests
+        config.baseUrl = `${baseUrl}/api/33`; // Base url for Web API requests
 
         config.context = manifest.activities.dhis; // Added temporarily for util/api.js
 

diff --git a/src/components/app/App.js b/src/components/app/App.js
@@ -4,11 +4,10 @@ import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
 import i18n from '@dhis2/d2-i18n';
 import HeaderBar from '@dhis2/ui/widgets/HeaderBar';
 import mui3theme from '@dhis2/d2-ui-core/theme/mui3.theme';
-import MapProvider from '../map/MapProvider';
 import AppMenu from './AppMenu';
 import LayersPanel from '../layers/LayersPanel';
 import LayersToggle from '../layers/LayersToggle';
-import Map from '../map/Map';
+import MapContainer from '../map/MapContainer';
 import BottomPanel from '../datatable/BottomPanel';
 import LayerEdit from '../edit/LayerEdit';
 import ContextMenu from '../map/ContextMenu';
@@ -44,20 +43,18 @@ export class App extends Component {
             <FatalErrorBoundary>
                 <HeaderBar appName={i18n.t('Maps')} />
                 <MuiThemeProvider theme={theme}>
-                    <MapProvider>
-                        <AppMenu />
-                        <InterpretationsPanel />
-                        <LayersPanel />
-                        <LayersToggle />
-                        <Map />
-                        <BottomPanel />
-                        <LayerEdit />
-                        <ContextMenu />
-                        <AlertSnackbar />
-                        <Message />
-                        <DataDownloadDialog />
-                        <OpenAsMapDialog />
-                    </MapProvider>
+                    <AppMenu />
+                    <InterpretationsPanel />
+                    <LayersPanel />
+                    <LayersToggle />
+                    <MapContainer />
+                    <BottomPanel />
+                    <LayerEdit />
+                    <ContextMenu />
+                    <AlertSnackbar />
+                    <Message />
+                    <DataDownloadDialog />
+                    <OpenAsMapDialog />
                 </MuiThemeProvider>
             </FatalErrorBoundary>
         );

diff --git a/src/components/edit/thematic/ThematicDialog.js b/src/components/edit/thematic/ThematicDialog.js
@@ -23,6 +23,7 @@ import OrgUnitLevelSelect from '../../orgunits/OrgUnitLevelSelect';
 import OrgUnitTree from '../../orgunits/OrgUnitTree';
 import PeriodSelect from '../../periods/PeriodSelect';
 import PeriodTypeSelect from '../../periods/PeriodTypeSelect';
+import RenderingStrategy from '../../periods/RenderingStrategy';
 import ProgramSelect from '../../program/ProgramSelect';
 import ProgramIndicatorSelect from '../../program/ProgramIndicatorSelect';
 import RelativePeriodSelect from '../../periods/RelativePeriodSelect';
@@ -51,6 +52,7 @@ import {
     setOrgUnitGroups,
     setPeriod,
     setPeriodType,
+    setRenderingStrategy,
     setStartDate,
     setEndDate,
     setProgram,
@@ -115,6 +117,7 @@ export class ThematicDialog extends Component {
         startDate: PropTypes.string,
         endDate: PropTypes.string,
         periodType: PropTypes.string,
+        renderingStrategy: PropTypes.string,
         radiusHigh: PropTypes.number,
         radiusLow: PropTypes.number,
         valueType: PropTypes.string,
@@ -136,6 +139,7 @@ export class ThematicDialog extends Component {
         toggleOrgUnit: PropTypes.func.isRequired,
         setUserOrgUnits: PropTypes.func.isRequired,
         setPeriodType: PropTypes.func.isRequired,
+        setRenderingStrategy: PropTypes.func.isRequired,
         setProgram: PropTypes.func.isRequired,
         setRadiusLow: PropTypes.func.isRequired,
         setRadiusHigh: PropTypes.func.isRequired,
@@ -226,6 +230,7 @@ export class ThematicDialog extends Component {
             labelFontWeight,
             operand,
             periodType,
+            renderingStrategy,
             startDate,
             endDate,
             program,
@@ -252,6 +257,7 @@ export class ThematicDialog extends Component {
             setStartDate,
             setEndDate,
             setPeriodType,
+            setRenderingStrategy,
             setProgram,
             setRadiusLow,
             setRadiusHigh,
@@ -440,7 +446,8 @@ export class ThematicDialog extends Component {
                         >
                             <PeriodTypeSelect
                                 value={periodType}
-                                onChange={type => setPeriodType(type.id)}
+                                period={period}
+                                onChange={setPeriodType}
                                 style={styles.select}
                                 errorText={periodTypeError}
                             />
@@ -485,6 +492,14 @@ export class ThematicDialog extends Component {
                                     </div>
                                 ) : null,
                             ]}
+                            {periodType === 'relativePeriods' && (
+                                <RenderingStrategy
+                                    value={renderingStrategy}
+                                    period={period}
+                                    layerId={id}
+                                    onChange={setRenderingStrategy}
+                                />
+                            )}
                         </div>
                     )}
                     {tab === 'orgunits' && (
@@ -768,6 +783,7 @@ export default connect(
         setOrgUnitGroups,
         setPeriod,
         setPeriodType,
+        setRenderingStrategy,
         setStartDate,
         setEndDate,
         setProgram,

diff --git a/src/components/layers/basemaps/BasemapList.js b/src/components/layers/basemaps/BasemapList.js
@@ -11,13 +11,10 @@ const styles = {
     },
 };
 
-const BasemapList = (
-    { classes, selectedID, basemaps, selectBasemap },
-    { map }
-) => (
+const BasemapList = ({ classes, selectedID, basemaps, selectBasemap }) => (
     <div className={classes.container} data-test="basemaplist">
         {basemaps
-            .filter(basemap => map.hasLayerSupport(basemap.config.type))
+            // .filter(basemap => map.hasLayerSupport(basemap.config.type))
             .map((basemap, index) => (
                 <Basemap
                     key={`basemap-${index}`}
@@ -29,10 +26,6 @@ const BasemapList = (
     </div>
 );
 
-BasemapList.contextTypes = {
-    map: PropTypes.object,
-};
-
 BasemapList.propTypes = {
     classes: PropTypes.object.isRequired,
     selectedID: PropTypes.string.isRequired,