Keep confidence warning only on methods and data

frontend/scripts/react-components/dashboard-element/dashboard-modal-footer/dashboard-modal-footer.component.jsx

@@ -5,7 +5,6 @@ import Button from 'react-components/shared/button/button.component';
 import Text from 'react-components/shared/text/text.component';
 import { DASHBOARD_STEPS } from 'constants';
 import './dashboard-modal-footer.scss';
-import ConfidenceWarning from 'react-components/shared/confidence-warning';
 
 function DashboardModalFooter(props) {
   const {
@@ -18,8 +17,7 @@ function DashboardModalFooter(props) {
     onBack,
     backText,
     isDisabled,
-    step,
-    hasConfidenceWarning
+    step
   } = props;
 
   return (
@@ -32,7 +30,6 @@ function DashboardModalFooter(props) {
         placement="top-end"
         readOnly={step === DASHBOARD_STEPS.welcome}
       />
-      {hasConfidenceWarning && <ConfidenceWarning variant="dashboard" />}
       <div className="dashboard-modal-actions">
         {onBack && (
           <Button
@@ -84,8 +81,7 @@ DashboardModalFooter.propTypes = {
   draftDynamicSentenceParts: PropTypes.array,
   onContinue: PropTypes.func.isRequired,
   step: PropTypes.number,
-  backText: PropTypes.string,
-  hasConfidenceWarning: PropTypes.bool
+  backText: PropTypes.string
 };
 
 export default DashboardModalFooter;

frontend/scripts/react-components/dashboard-element/dashboard-panel/dashboard-panel.component.jsx

@@ -124,8 +124,7 @@ class DashboardPanel extends Component {
       step,
       isDisabled,
       setSelectedItems,
-      canProceed,
-      hasConfidenceWarning
+      canProceed
     } = this.props;
 
     return (
@@ -163,7 +162,6 @@ class DashboardPanel extends Component {
           step={step}
           isDisabled={isDisabled}
           removeSentenceItem={setSelectedItems}
-          hasConfidenceWarning={hasConfidenceWarning}
         />
       </div>
     );
@@ -181,8 +179,7 @@ DashboardPanel.propTypes = {
   cancelPanelsDraft: PropTypes.func.isRequired,
   setSelectedItems: PropTypes.func.isRequired,
   canProceed: PropTypes.bool.isRequired,
-  countryNames: PropTypes.object.isRequired,
-  hasConfidenceWarning: PropTypes.bool
+  countryNames: PropTypes.object.isRequired
 };
 
 export default DashboardPanel;

frontend/scripts/react-components/dashboard-element/dashboard-panel/dashboard-panel.jsx

@@ -5,7 +5,7 @@ import {
   getDraftDynamicSentence
 } from 'react-components/dashboard-element/dashboard-element.selectors';
 
-import { getCountryNamesByCountryId, hasConfidenceWarning } from 'app/app.selectors';
+import { getCountryNamesByCountryId } from 'app/app.selectors';
 
 import { nodesPanelActions } from 'react-components/nodes-panel/nodes-panel.register';
 import { getCanProceed } from 'react-components/nodes-panel/nodes-panel.selectors';
@@ -18,8 +18,7 @@ const mapStateToProps = (state, ownProps) => {
     canProceed: getCanProceed(state),
     isDisabled: getIsDisabled(state, ownProps),
     draftDynamicSentenceParts: getDraftDynamicSentence(state),
-    countryNames: getCountryNamesByCountryId(state),
-    hasConfidenceWarning: hasConfidenceWarning(state)
+    countryNames: getCountryNamesByCountryId(state)
   };
 };
 

frontend/scripts/react-components/profile/profile-components/summary/actor-summary.component.jsx

@@ -10,8 +10,6 @@ import Text from 'react-components/shared/text';
 import Icon from 'react-components/shared/icon';
 import formatValue from 'utils/formatValue';
 import 'react-components/profile/profile-components/summary/summary.scss';
-import ConfidenceWarning from 'react-components/shared/confidence-warning';
-import { hasConfidenceWarningFunction } from 'app/app.selectors';
 
 class ActorSummary extends React.PureComponent {
   render() {
@@ -25,10 +23,6 @@ class ActorSummary extends React.PureComponent {
       data: { nodeName, columnName, summary, headerAttributes } = {}
     } = this.props;
     const { commodityName, countryName } = context;
-    // Warning is only applicable to exporter activity. If is importer it has many exporting contexts
-    const hasConfidenceWarning =
-      (columnName === 'EXPORTER' || columnName === 'EXPORTER GROUP') &&
-      hasConfidenceWarningFunction(context);
     const titles = [
       { name: columnName, label: 'Activity' },
       { name: commodityName, label: 'Commodity' },
@@ -154,9 +148,6 @@ class ActorSummary extends React.PureComponent {
                     titles={titles}
                     on={onChange}
                   />
-                  {status !== Sticky.STATUS_FIXED && hasConfidenceWarning && (
-                    <ConfidenceWarning variant="profile" />
-                  )}
                   {status !== Sticky.STATUS_FIXED &&
                     headerAttributes &&
                     Object.keys(headerAttributes).length > 0 &&

frontend/scripts/react-components/profile/profile-components/summary/country-summary.component.jsx

@@ -11,8 +11,6 @@ import SummaryTitle from 'react-components/profile/profile-components/summary/su
 import Map from 'react-components/profile/profile-components/map.component';
 import Text from 'react-components/shared/text';
 import formatValue from 'utils/formatValue';
-import ConfidenceWarning from 'react-components/shared/confidence-warning';
-import { hasConfidenceWarningFunction } from 'app/app.selectors';
 
 function CountrySummary(props) {
   const {
@@ -45,11 +43,8 @@ function CountrySummary(props) {
     </div>
   );
   const selectedCommodity = commodities.find(c => c.id === commodityId);
-  const selectedContext = { commodityName: selectedCommodity.name, countryName };
   const selectedActivity = activities.find(a => a.name === activity);
-  // Warning is only applicable to exporter activity. If is importer it has many exporting contexts
-  const hasConfidenceWarning =
-    selectedActivity?.name === 'exporter' && hasConfidenceWarningFunction(selectedContext);
+
   const titles = [
     {
       dropdown: true,
@@ -138,7 +133,6 @@ function CountrySummary(props) {
                   titles={titles}
                   on={newYear => onChange('year', newYear)}
                 />
-                {hasConfidenceWarning && <ConfidenceWarning variant="profile" />}
                 {status !== Sticky.STATUS_FIXED &&
                   headerAttributes &&
                   Object.keys(headerAttributes).length > 0 &&

frontend/scripts/react-components/profile/profile-components/summary/place-summary.component.jsx

@@ -11,8 +11,6 @@ import SummaryTitle from 'react-components/profile/profile-components/summary/su
 import Map from 'react-components/profile/profile-components/map.component';
 import Text from 'react-components/shared/text';
 import formatValue from 'utils/formatValue';
-import ConfidenceWarning from 'react-components/shared/confidence-warning';
-import { hasConfidenceWarningFunction } from 'app/app.selectors';
 
 function PlaceSummary(props) {
   const {
@@ -36,7 +34,6 @@ function PlaceSummary(props) {
   } = props;
 
   const { commodityName } = context;
-  const hasConfidenceWarning = hasConfidenceWarningFunction(context);
   const titles = [
     { name: commodityName, label: 'Commodity' },
     {
@@ -125,7 +122,6 @@ function PlaceSummary(props) {
               </div>
             )}
           </Sticky>
-          {hasConfidenceWarning && <ConfidenceWarning variant="profile" />}
           {renderStats()}
         </div>
 

frontend/scripts/react-components/shared/confidence-warning/confidence-warning.component.jsx

@@ -1,36 +1,20 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import Text from 'react-components/shared/text';
 import './confidence-warning.scss';
 
-const ConfidenceWarning = ({ variant, noIcon }) => (
-  <Text
-    size={variant === 'selector' ? 'xs' : 'sm'}
-    className={`warning warning-${variant}`}
-    color="grey"
-  >
-    {!noIcon && (
-      <svg className="icon warning-bell-icon">
-        <use xlinkHref="#icon-warning-bell" />
-      </svg>
-    )}
+const ConfidenceWarning = () => (
+  <Text className="warning" color="grey">
+    <svg className="icon warning-bell-icon">
+      <use xlinkHref="#icon-warning-bell" />
+    </svg>
     <div className="warning-text">
       <Text weight="bold" className="warning-bold" as="span">
         Note:{' '}
       </Text>
-      This data is based on new methodological approaches and we welcome feedback.
+      This dataset is experimental and we welcome feedback. Please refer to the methods to
+      understand the modelling work and its limitations.
     </div>
   </Text>
 );
 
-ConfidenceWarning.defaultProps = {
-  variant: 'sankey',
-  noIcon: false
-};
-
-ConfidenceWarning.propTypes = {
-  variant: PropTypes.oneOf(['sankey', 'dashboard', 'profile']),
-  noIcon: PropTypes.bool
-};
-
 export default ConfidenceWarning;

frontend/scripts/react-components/shared/confidence-warning/confidence-warning.scss

@@ -1,42 +1,14 @@
 .warning {
-  margin: 5px 0 0;
+  margin-top: 10px;
   display: flex;
+  align-items: flex-start;
 }
 
 .warning-bell-icon {
   overflow: visible;
-  margin-left: 0;
+  margin: 2px 5px 0 0;
 }
 
 .warning-text {
   display: inline;
 }
-
-.warning-sankey,
-.warning-profile {
-  .warning-bell-icon {
-    margin-right: 5px;
-  }
-}
-
-.warning-sankey {
-  .warning-bell-icon {
-    margin-top: 2px;
-  }
-}
-
-.warning-dashboard {
-  &.warning {
-    margin: 5px 0 30px 0;
-  }
-
-  .warning-bell-icon {
-    margin-right: 5px;
-    overflow: visible;
-    transform: translate(0px, -1px);
-  }
-}
-
-.warning-profile {
-  margin-top: 10px;
-}

frontend/scripts/react-components/shared/tool-bar/edit-filter/edit-filter.component.jsx

@@ -3,33 +3,10 @@ import PropTypes from 'prop-types';
 import Heading from 'react-components/shared/heading';
 import Text from 'react-components/shared/text';
 import cx from 'classnames';
-import Tippy from '@tippy.js/react';
-import ConfidenceWarning from 'react-components/shared/confidence-warning';
 import 'react-components/shared/tool-bar/edit-filter/edit-filter.scss';
 
-const ConfidenceWarningButton = () => (
-  <Tippy
-    content={
-      <div className="warning-tooltip">
-        <ConfidenceWarning variant="sankey" />
-      </div>
-    }
-    placement="bottom-start"
-    arrow={false}
-    animation="none"
-    theme="green"
-    duration={0}
-    zIndex={202}
-    distance={0}
-  >
-    <svg className="icon warning-bell-icon">
-      <use xlinkHref="#icon-warning-bell" />
-    </svg>
-  </Tippy>
-);
-
 function EditFilter(props) {
-  const { id, title, subtitle, onClick, className, label, hasConfidenceWarning } = props;
+  const { id, title, subtitle, onClick, className, label } = props;
   return (
     <button onClick={() => onClick(id)} className={cx('c-edit-filter', className)}>
       <Text as="span" size="rg" variant="sans" transform="uppercase" className="options-menu-label">
@@ -42,7 +19,6 @@ function EditFilter(props) {
             {subtitle}
           </Heading>
         )}
-        {hasConfidenceWarning && <ConfidenceWarningButton />}
       </Heading>
     </button>
   );
@@ -54,8 +30,7 @@ EditFilter.propTypes = {
   label: PropTypes.string,
   className: PropTypes.string,
   title: PropTypes.string.isRequired,
-  onClick: PropTypes.func.isRequired,
-  hasConfidenceWarning: PropTypes.bool
+  onClick: PropTypes.func.isRequired
 };
 
 export default EditFilter;

frontend/scripts/react-components/shared/tool-bar/tool-bar.component.jsx

@@ -33,7 +33,7 @@ const types = {
 };
 
 function ToolBar(props) {
-  const { leftSlot, rightSlot, className, hasConfidenceWarning } = props;
+  const { leftSlot, rightSlot, className } = props;
   const [activeId, setId] = useState(null);
   function getListItem(item, ref) {
     const {
@@ -58,7 +58,6 @@ function ToolBar(props) {
       >
         {React.createElement(types[type], {
           ...updatedItem,
-          hasConfidenceWarning,
           onClick: props[`${updatedItem.id}_onClick`],
           className: cx(itemClassName, updatedItem.id === activeId ? '-hovered' : undefined)
         })}
@@ -102,8 +101,7 @@ function ToolBar(props) {
 
 ToolBar.defaultProps = {
   leftSlot: [],
-  rightSlot: [],
-  hasConfidenceWarning: false
+  rightSlot: []
 };
 
 ToolBar.propTypes = {
@@ -113,8 +111,7 @@ ToolBar.propTypes = {
   ),
   rightSlot: PropTypes.arrayOf(
     PropTypes.shape({ id: PropTypes.string.isRequired, content: PropTypes.any })
-  ),
-  hasConfidenceWarning: PropTypes.bool
+  )
 };
 
 export default ToolBar;

frontend/scripts/react-components/shared/tool-bar/tool-bar.js

@@ -1,6 +1,5 @@
 /* eslint-disable camelcase */
 import { connect } from 'react-redux';
-import { hasConfidenceWarning } from 'app/app.selectors';
 import ToolBar from './tool-bar.component';
 import { getToolBar } from './tool-bar.selectors';
 
@@ -28,8 +27,7 @@ const mapStateToProps = state => {
   const { left, right } = getToolBar(state);
   return {
     leftSlot: left,
-    rightSlot: right,
-    hasConfidenceWarning: hasConfidenceWarning(state),
+    rightSlot: right
   };
 };
 

frontend/scripts/react-components/tool/tool-modal/versioning-modal/versioning-modal.component.jsx

@@ -5,10 +5,13 @@ import Text from 'react-components/shared/text';
 import MethodsDisclaimer from 'react-components/shared/methods-disclaimer';
 import 'react-components/tool/tool-modal/versioning-modal/versioning-modal.scss';
 import capitalize from 'lodash/capitalize';
+import { hasConfidenceWarningFunction } from 'app/app.selectors';
+import ConfidenceWarning from 'react-components/shared/confidence-warning';
 
 function VersioningModal({ data, context }) {
   const { url, version } = data || {};
   const { countryName, commodityName } = context || {};
+  const hasConfidenceWarning = hasConfidenceWarningFunction(context);
 
   return (
     <div className="c-versioning-modal">
@@ -72,6 +75,7 @@ function VersioningModal({ data, context }) {
               </Text>
             </a>
           </Text>
+          {hasConfidenceWarning && <ConfidenceWarning variant="profile" />}
           {countryName === 'BRAZIL' && commodityName === 'SOY' && <MethodsDisclaimer />}
         </div>
       </div>