NCI-Agency · VassilIordanov · Nov 12, 2020 · Nov 12, 2020
diff --git a/client/src/components/Leaflet.js b/client/src/components/Leaflet.js
@@ -1,4 +1,4 @@
-import { Control, CRS, DomUtil, Icon, Map, Marker, TileLayer } from "leaflet"
+import { Control, CRS, Icon, Map, Marker, TileLayer } from "leaflet"
 import "leaflet-defaulticon-compatibility"
 import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css"
 import {
@@ -150,18 +150,6 @@ const Leaflet = ({
         crs: CRS[Settings.imagery.mapOptions.crs]
       }
     )
-    const container = DomUtil.get(mapId)
-    /*
-     * Prevent error "map container is already initialized" when mapId changed
-     * for the current map (which was already initialized).
-     * Note: this happens when the id of a map is not always the same but changes
-     * because of the use of _uniqueId (which we use for map aggregation widgets
-     * to make sure we don't have more maps with the same id on a page - like
-     * on the person show page for statistics of reports authored and attended)
-     */
-    if (container !== null) {
-      container._leaflet_id = null
-    }
     const newMap = new Map(mapId, mapOptions).setView(
       Settings.imagery.mapOptions.homeView.location,
       Settings.imagery.mapOptions.homeView.zoomLevel

diff --git a/client/src/components/ReportCollection.js b/client/src/components/ReportCollection.js
@@ -38,6 +38,7 @@ const ReportCollection = ({
   const [viewFormat, setViewFormat] = useState(viewFormats[0])
   const showHeader = viewFormats.length > 1 || reportsFilter
   const statisticsRecurrence = [RECURRENCE_TYPE.MONTHLY]
+  const idSuffix = mapId || paginationKey || "reports"
   return (
     <div className="report-collection">
       <div>
@@ -118,6 +119,7 @@ const ReportCollection = ({
               {statisticsRecurrence.map(recurrence => (
                 <ReportStatistics
                   key={`report-statistics-${recurrence}`}
+                  idSuffix={idSuffix}
                   pageDispatchers={pageDispatchers}
                   queryParams={queryParams}
                   setTotalCount={setTotalCount}

diff --git a/client/src/components/ReportStatistics.js b/client/src/components/ReportStatistics.js
@@ -10,9 +10,9 @@ import { CUSTOM_FIELD_TYPE } from "components/Model"
 import { PageDispatchersPropType, useBoilerplate } from "components/Page"
 import PeriodsNavigation from "components/PeriodsNavigation"
 import _isEmpty from "lodash/isEmpty"
-import _uniqueId from "lodash/uniqueId"
 import { Report } from "models"
 import {
+  formatPeriodBoundary,
   getPeriodsConfig,
   PeriodsDetailsPropType,
   PeriodsPropType,
@@ -104,6 +104,7 @@ const GQL_GET_REPORT_LIST = gql`
 `
 
 const FieldStatisticsRow = ({
+  idSuffix,
   fieldConfig,
   fieldName,
   periods,
@@ -116,30 +117,36 @@ const FieldStatisticsRow = ({
   }
   return (
     <tr>
-      {periods.map((period, index) => (
-        <td key={index}>
-          {_isEmpty(periodsData[index]) ? (
-            isFirstRow ? (
-              <em>No reports found</em>
-            ) : null
-          ) : (
-            <AggregationWidgetContainer
-              key={`statistics-${fieldName}`}
-              fieldConfig={fieldConfig}
-              fieldName={fieldName}
-              data={periodsData[index]}
-              dataType={CALENDAR_OBJECT_TYPES.REPORT}
-              widget={aggregationWidget}
-              period={period}
-              widgetId={`${fieldName}-${_uniqueId("statistics")}`}
-            />
-          )}
-        </td>
-      ))}
+      {periods.map((period, index) => {
+        const key = `${fieldName}-statistics-${formatPeriodBoundary(
+          period.start
+        )}`
+        return (
+          <td key={key}>
+            {_isEmpty(periodsData[index]) ? (
+              isFirstRow ? (
+                <em>No reports found</em>
+              ) : null
+            ) : (
+              <AggregationWidgetContainer
+                key={key}
+                fieldConfig={fieldConfig}
+                fieldName={fieldName}
+                data={periodsData[index]}
+                dataType={CALENDAR_OBJECT_TYPES.REPORT}
+                widget={aggregationWidget}
+                period={period}
+                widgetId={`${key}-${idSuffix}`}
+              />
+            )}
+          </td>
+        )
+      })}
     </tr>
   )
 }
 FieldStatisticsRow.propTypes = {
+  idSuffix: PropTypes.string.isRequired,
   fieldConfig: PropTypes.object,
   fieldName: PropTypes.string,
   periods: PeriodsPropType.isRequired,
@@ -161,6 +168,7 @@ NoStatisticsRow.propTypes = {
 }
 
 const ReportStatistics = ({
+  idSuffix,
   pageDispatchers,
   periodsDetails,
   setTotalCount,
@@ -248,6 +256,7 @@ const ReportStatistics = ({
               Object.keys(REPORT_FIELDS_FOR_STATISTICS).map((key, index) => (
                 <FieldStatisticsRow
                   key={key}
+                  idSuffix={`${key}-${idSuffix}`}
                   fieldName={key}
                   fieldConfig={REPORT_FIELDS_FOR_STATISTICS[key]}
                   periods={periods}
@@ -259,6 +268,7 @@ const ReportStatistics = ({
               Object.keys(customFieldsConfig || {}).map((key, index) => (
                 <FieldStatisticsRow
                   key={key}
+                  idSuffix={`${key}-${idSuffix}`}
                   fieldName={`${CUSTOM_FIELDS_KEY}.${key}`}
                   fieldConfig={customFieldsConfig[key]}
                   periods={periods}
@@ -276,6 +286,7 @@ const ReportStatistics = ({
 }
 
 ReportStatistics.propTypes = {
+  idSuffix: PropTypes.string.isRequired,
   pageDispatchers: PageDispatchersPropType,
   periodsDetails: PeriodsDetailsPropType.isRequired,
   setTotalCount: PropTypes.func,

diff --git a/client/src/components/aggregations/AggregationWidgetContainer.js b/client/src/components/aggregations/AggregationWidgetContainer.js
@@ -160,7 +160,7 @@ const AggregationWidgetContainer = ({
     (aggregationWidget && AGGREGATION_WIDGET_COMPONENTS[aggregationWidget]) ||
     AGGREGATION_WIDGET_COMPONENTS.default
   if (WidgetComponent === ReportsMapWidget) {
-    otherWidgetProps.mapId = `map-${widgetId}`
+    otherWidgetProps.mapId = widgetId
   }
   const widgetElem = (
     <WidgetComponent

diff --git a/client/src/components/assessments/AssessmentResultsTable.js b/client/src/components/assessments/AssessmentResultsTable.js
@@ -30,6 +30,7 @@ import { Table } from "react-bootstrap"
  */
 
 const EntityAssessmentResults = ({
+  idSuffix,
   entity,
   entityType,
   periodsConfig,
@@ -55,6 +56,7 @@ const EntityAssessmentResults = ({
       {Object.keys(instantAssessmentConfig || {}).map((key, index) => (
         <InstantAssessmentsRow
           key={key}
+          idSuffix={`${key}-${idSuffix}`}
           questionKey={key}
           questionConfig={instantAssessmentConfig[key]}
           periods={periods}
@@ -73,6 +75,7 @@ const EntityAssessmentResults = ({
   )
 }
 EntityAssessmentResults.propTypes = {
+  idSuffix: PropTypes.string.isRequired,
   entity: PropTypes.object.isRequired,
   entityType: PropTypes.func.isRequired,
   periodsConfig: AssessmentPeriodsConfigPropType.isRequired,
@@ -133,6 +136,7 @@ const AssessmentResultsTable = ({
                   {subEntities?.map(subEntity => (
                     <EntityAssessmentResults
                       key={`subassessment-${subEntity.uuid}`}
+                      idSuffix={`subassessment-${subEntity.uuid}`}
                       entity={subEntity}
                       entityType={entityType}
                       periodsConfig={periodsConfig}
@@ -142,6 +146,7 @@ const AssessmentResultsTable = ({
                   ))}
                 </>
                 <EntityAssessmentResults
+                  idSuffix={`assessment-${entity.uuid}`}
                   entity={entity}
                   entityType={entityType}
                   periodsConfig={periodsConfig}

diff --git a/client/src/components/assessments/InstantAssessmentResults.js b/client/src/components/assessments/InstantAssessmentResults.js
@@ -2,8 +2,7 @@ import AggregationWidgetContainer, {
   getAggregationWidget
 } from "components/aggregations/AggregationWidgetContainer"
 import _isEmpty from "lodash/isEmpty"
-import _uniqueId from "lodash/uniqueId"
-import { PeriodsPropType } from "periodUtils"
+import { formatPeriodBoundary, PeriodsPropType } from "periodUtils"
 import PropTypes from "prop-types"
 import React from "react"
 
@@ -17,6 +16,7 @@ import React from "react"
  */
 
 export const InstantAssessmentsRow = ({
+  idSuffix,
   questionKey,
   questionConfig,
   periods,
@@ -29,28 +29,34 @@ export const InstantAssessmentsRow = ({
   }
   return (
     <tr>
-      {periods.map((period, index) => (
-        <td key={index}>
-          {_isEmpty(periodsData[index]) ? (
-            isFirstRow ? (
-              <em>No assessments</em>
-            ) : null
-          ) : (
-            <AggregationWidgetContainer
-              key={`assessment-${questionKey}`}
-              fieldConfig={questionConfig}
-              fieldName={questionKey}
-              data={periodsData[index]}
-              widget={aggregationWidget}
-              widgetId={`${questionKey}-${_uniqueId("assessment")}`}
-            />
-          )}
-        </td>
-      ))}
+      {periods.map((period, index) => {
+        const key = `${questionKey}-assessment-${formatPeriodBoundary(
+          period.start
+        )}`
+        return (
+          <td key={key}>
+            {_isEmpty(periodsData[index]) ? (
+              isFirstRow ? (
+                <em>No assessments</em>
+              ) : null
+            ) : (
+              <AggregationWidgetContainer
+                key={key}
+                fieldConfig={questionConfig}
+                fieldName={questionKey}
+                data={periodsData[index]}
+                widget={aggregationWidget}
+                widgetId={`${key}-${idSuffix}`}
+              />
+            )}
+          </td>
+        )
+      })}
     </tr>
   )
 }
 InstantAssessmentsRow.propTypes = {
+  idSuffix: PropTypes.string.isRequired,
   periods: PeriodsPropType.isRequired,
   periodsData: PropTypes.arrayOf(PropTypes.array).isRequired,
   questionKey: PropTypes.string.isRequired,

diff --git a/client/tests/webdriver/pages/myOrg.page.js b/client/tests/webdriver/pages/myOrg.page.js
@@ -6,7 +6,7 @@ class MyOrg extends Page {
   }
 
   get locationStatistics() {
-    return browser.$("[id^=map-map-location-statistics]")
+    return browser.$("[id^=map-location-statistics]")
   }
 
   get engagementStatus() {