update layout with annotation control panel

assets/css/ioda/sass/components/modal/_modal.scss

@@ -32,6 +32,10 @@
 
   &__row {
     @include panel;
+
+    &--annotation {
+      padding: 0 0 2rem;
+    }
   }
 
   &__content {
@@ -181,7 +185,7 @@
 
   &__control-panel-row {
     display: flex;
-    justify-content: flex-start;
+    justify-content: center;
     margin-bottom: 1rem;
   }
 
@@ -236,10 +240,15 @@
   }
 
   & .annotation {
+    position: relative;
+    padding: 2rem;
+
+    &__canvas {
     position: absolute;
 
-    &__drawingLocked {
-      pointer-events: none;
+      &--drawingLocked {
+        pointer-events: none;
+      }
     }
   }
 
@@ -377,7 +386,7 @@
     min-width: 26rem;
     max-width:52rem;
     height: 5rem;
-    margin: 3rem auto;
+    margin: 3rem auto 0;
     border-radius: 0.5rem;
     background: linear-gradient(2deg, #1A5DAE, #598DCC, #1A5DAE, #598DCC);
     color: $color-white;

assets/css/style.comp.css

@@ -2072,6 +2072,8 @@ body {
   box-shadow: 0 1px 2px #9F9D9D;
   padding: 2rem;
   margin-bottom: 2rem; }
+  .modal__row--annotation {
+    padding: 0 0 2rem; }
 
 .modal__content .col-2-of-3 {
   background-color: #fff;
@@ -2297,7 +2299,7 @@ body {
 
 .chartShare__modal__control-panel-row {
   display: flex;
-  justify-content: flex-start;
+  justify-content: center;
   margin-bottom: 1rem; }
 
 .chartShare__modal__control-panel-col {
@@ -2333,9 +2335,12 @@ body {
   z-index: 15; }
 
 .chartShare__modal .annotation {
-  position: absolute; }
-  .chartShare__modal .annotation__drawingLocked {
-    pointer-events: none; }
+  position: relative;
+  padding: 2rem; }
+  .chartShare__modal .annotation__canvas {
+    position: absolute; }
+    .chartShare__modal .annotation__canvas--drawingLocked {
+      pointer-events: none; }
 
 .chartShare__modal .related__modal-button-img {
   height: 2.4rem;
@@ -2487,7 +2492,7 @@ body {
   min-width: 26rem;
   max-width: 52rem;
   height: 5rem;
-  margin: 3rem auto;
+  margin: 3rem auto 0;
   border-radius: 0.5rem;
   background: linear-gradient(2deg, #1A5DAE, #598DCC, #1A5DAE, #598DCC);
   color: #fff;

assets/js/Ioda/data/DataReducer.js

@@ -58,7 +58,6 @@ import {
     GET_ADDITIONAL_RAW_SIGNAL
 } from './ActionCommons';
 
-// TODO: make sure the state won't overwrite each other when multiple calls are executed
 const initialState = {
     entities: null,
     relatedToMapSummary: null,

assets/js/Ioda/data/README.md

@@ -10,8 +10,8 @@
 - `datasources`: available data sources used in IODA
 - `signals`: for timeseries graphs
 - `alerts`: for building alerts tables
-- `events`: not sure where it fits
-- `summary`: for building events tables on the right of the map
+- `events`: for building events tables
+- `summary`: for building event scores on the right of the map
 
 ### Actions
 
@@ -62,7 +62,7 @@ const mapDispatchToProps = (dispatch) => {
 
 Then in the rest of the PHP code, you can use the defined field
 `suggestedSearchResults` and `searchEntitiesActions` in props to access the data
-and function calls according.
+and function calls accordingly.
 
 Accessing data:
 ``` javascript

assets/js/Ioda/pages/dashboard/Dashboard.js

@@ -465,7 +465,7 @@ class Dashboard extends Component {
         this.setState({
             searchTerm: query
         });
-    }
+    };
     // Function that returns search bar passed into control panel
     populateSearchBar() {
         return <Searchbar placeholder={T.translate("controlPanel.searchBarPlaceholder")}

package.json

@@ -91,7 +91,8 @@
         "react-twitter-embed": "^3.0.3",
         "redux": "^4.0.5",
         "redux-thunk": "^2.3.0",
-        "topojson": "1.6.18"
+        "topojson": "1.6.18",
+        "watermarkjs": "^2.1.1"
     },
     "browserslist": {
         "production": [