add observation tooltip and improve observations map interactions

components/map/popup/component.js

@@ -10,16 +10,19 @@ import Icon from 'components/ui/icon';
 // import LayerTemplate from './templates/layer';
 import FmuTemplate from './templates/fmu';
 import FmuTemplateAAC from './templates/fmu-aac';
+import ObservationTemplate from './templates/observation';
 
 const TEMPLATES = {
   fmus: FmuTemplate,
-  'fmus-detail': FmuTemplateAAC
+  'fmus-detail': FmuTemplateAAC,
+  observation: ObservationTemplate
 };
 
 class PopupComponent extends PureComponent {
   static propTypes = {
     popup: PropTypes.shape({}).isRequired,
     template: PropTypes.string.isRequired,
+    templateProps: PropTypes.shape({}),
     onClose: PropTypes.func
   };
 
@@ -52,7 +55,7 @@ class PopupComponent extends PureComponent {
   }
 
   render() {
-    const { popup, template, onClose } = this.props;
+    const { popup, template, templateProps, onClose } = this.props;
 
     if (isEmpty(popup)) return null;
 
@@ -72,7 +75,7 @@ class PopupComponent extends PureComponent {
 
           {!!TEMPLATES[template] &&
             React.createElement(TEMPLATES[template], {
-              ...this.props
+              ...templateProps
             })
           }
         </div>

components/map/popup/templates/observation/component.js

@@ -0,0 +1,133 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+// Intl
+import { useIntl } from 'react-intl';
+
+import Icon from 'components/ui/icon';
+
+const SEVERITY_LEVELS = ['unknown', 'low', 'medium', 'high'];
+
+function parseValue(value) {
+  try {
+    return JSON.parse(value);
+  } catch (e) {
+    return value;
+  }
+}
+
+export default function ObservationPopup({ data }) {
+  const intl = useIntl();
+  const evidence = parseValue(data.evidence);
+  console.log('data', data);
+  const fields = [
+    {
+      label: 'Category',
+      value: data.category
+    },
+    data.subcategory && {
+      label: 'Subcategory',
+      value: data.subcategory
+    },
+    data.operator && {
+      label: 'Producer',
+      value: data.operator,
+    },
+    data['relevant-operators'] && {
+      label: 'Relevant producers',
+      value: data['relevant-operators'],
+    },
+    {
+      label: 'Country',
+      value: data.country
+    },
+    data.fmu && {
+      label: 'FMU',
+      value: data.fmu
+    },
+    {
+      label: 'Severity',
+      value: (
+        <div className="severity">
+          <div className={`severity__icon -severity-${data.level || 0}`} />
+          <div className="severity__name">
+            {intl.formatMessage({ id: SEVERITY_LEVELS[data.level || 0] })}
+          </div>
+        </div>
+      )
+    },
+    data['litigation-status'] && {
+      label: 'Litigation Status',
+      value: data['litigation-status']
+    },
+    {
+      label: 'Monitors',
+      value: data['observer-organizations']
+    },
+    evidence && {
+      label: 'Evidence',
+      value: (
+        <div className="evidences">
+          {Array.isArray(evidence) &&
+            evidence.map((v) => (
+              <a
+                href={v.attachment.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="evidence-item"
+              >
+                <Icon className="" name="icon-file-empty" />
+              </a>
+            ))}
+
+          {!Array.isArray(evidence) && (
+            <span>{evidence}</span>
+          )}
+        </div>
+      )
+    },
+    data.report && {
+      label: 'Report',
+      value: (
+        <a
+          href={data.report}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="report-item"
+        >
+          <Icon className="" name="icon-file-empty" />
+        </a>
+      )
+    }
+  ].filter(x => x);
+
+  return (
+    <div className="c-layer-popup">
+      <h2 className="layer-popup--title">
+        Observation Details
+      </h2>
+
+      <p>
+        {data.observation}
+      </p>
+
+      <table className="layer-popup--table">
+        <tbody>
+          {fields.map(o => (
+            <tr
+              key={o.column}
+              className="layer-popup--table-item"
+            >
+              <td className="layer-popup--list-dt">{o.label}:</td>
+              <td className="layer-popup--list-dd">{o.value}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+ObservationPopup.propTypes = {
+  data: PropTypes.object
+};

components/map/popup/templates/observation/index.js

@@ -0,0 +1,3 @@
+import ObservationPopupComponent from './component';
+
+export default ObservationPopupComponent;

components/operators-detail/fmus.js

@@ -300,7 +300,9 @@ class OperatorsDetailFMUs extends React.Component {
                 <Popup
                   popup={hoverPopup}
                   template="fmus-detail"
-                  layers={hoverActiveInteractiveLayers}
+                  templateProps={{
+                    layers: hoverActiveInteractiveLayers
+                  }}
                 />
               </Fragment>
             )}

css/components/map/_popup.scss

@@ -45,6 +45,10 @@
     max-width: 300px;
   }
 
+  @include breakpoint(large) {
+    max-width: 400px;
+  }
+
   .layer-popup--title {
     position: relative;
     margin: 0 0 $space-1 * 2;
@@ -67,7 +71,8 @@
       padding: 0 0 $space-1 * 1.5;
       font-weight: $font-weight-bold;
       vertical-align: baseline;
-      // text-align: right;
+      width: 1%;
+      white-space: nowrap;
     }
 
     .layer-popup--list-dd {
@@ -81,4 +86,36 @@
     margin: 0;
     padding-left: $space-1 * 2;
   }
+
+  .severity {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    margin-top: -5px;
+
+    &__icon {
+      width: 12px;
+      height: 12px;
+      border-radius: 2px;
+
+      &.-severity-0 { background: $color-gray-3; }
+      &.-severity-1 { background: $color-primary; }
+      &.-severity-2 { background: $color-gray-1; }
+      &.-severity-3 { background: $color-secondary; }
+    }
+
+    &__name {
+      text-transform: uppercase;
+      font-family: $font-family-proximanova;
+      font-weight: $font-weight-bold;
+      font-size: $font-size-extrasmall;
+      margin-top: 5px;
+      letter-spacing: 1px;
+    }
+  }
+
+  .evidences {
+    display: flex;
+    gap: 2px;
+  }
 }

modules/observations.js

@@ -101,7 +101,6 @@ export default function reducer(state = initialState, action) {
     case SET_OBSERVATIONS_MAP_CLUSTER: {
       return Object.assign({}, state, { cluster: action.payload });
     }
-
     default:
       return state;
   }