127 Update tooltips

Author: moconnell9

assets/css/ioda/sass/abstracts/_variables.scss

@@ -48,6 +48,8 @@ $color-ucsd-nt: #ED9B40;        // XXX Choose a new color
 
 $color-table-datasource-bottom-border: #aaa;
 
+$color-dark-grey: #595959;
+
 // BOX SHADOW
 $box-shadow: 0 1px 2px #9F9D9D;
 $button-box-shadow: inset 0 0.2rem 0.1rem rgba(255, 255, 255, .2),
@@ -69,4 +71,3 @@ $color-rdrInputRangeInput-borderHover: #b4bfc4;
 $color-rdrDayNumber-span: #d5dce0;
 $color-rdrDayDisabled: #f8f8f8;
 $color-rdrDayDisabled-span: #aeb9bf;
-

assets/css/ioda/sass/components/tooltip/_tooltip.scss

@@ -3,8 +3,21 @@
   z-index: 10000000000;
   .ant-popover-title {
     color: #fff !important;
+    font-size: 12px;
+    font-weight: 500;
   }
   .ant-popover-inner-content {
     color: #fff !important;
+    font-size: 12px;
+    font-weight: 400;
   }
 }
+
+div[role=tooltip] {
+  padding: 16px !important;
+  border-radius: 2px !important;
+}
+
+.question-tooltip-button {
+  color: $color-dark-grey !important;
+}

assets/css/style.css

@@ -1,5 +1,7 @@
 import React, { Component } from "react";
 import clsx from "clsx";
+import Tooltip from "../../components/tooltip/Tooltip";
+import T from "i18n-react";
 
 const MapLegend = ({ lowThreshold, highThreshold, className, ...rest }) => {
   const formatLocaleNumber = (value, precision = 0) => {
@@ -21,11 +23,24 @@ const MapLegend = ({ lowThreshold, highThreshold, className, ...rest }) => {
   const intervals = 4;
   const range = getRangeFromBounds(lowThreshold, highThreshold, intervals);
 
+  const outageSeverityScoreTooltipTitle = T.translate(
+    "tooltip.outageSeverityScore.title"
+  );
+  const outageSeverityScoreTooltipText = T.translate(
+    "tooltip.outageSeverityScore.text"
+  );
+
   return (
     <div className={clsx("card p-4 map-legend", className)} {...rest}>
       <div className="flex items-end gap-4">
-        <div className="text-lg font-bold map-legend__title">
-          Outage Severity Score:
+        <div className="row items-center" style={{ margin: 0 }}>
+          <div className="text-lg font-bold map-legend__title">
+            Outage Severity Score:
+          </div>
+          <Tooltip
+            title={outageSeverityScoreTooltipTitle}
+            text={outageSeverityScoreTooltipText}
+          />
         </div>
         <div className="col">
           <div className="flex items-center map-legend__labels">

assets/css/style.css.map

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import { Button, Popover } from "antd";
-import { QuestionCircleOutlined } from "@ant-design/icons";
+import { QuestionCircleFilled } from "@ant-design/icons";
 
 const Tooltip = ({ title, text, customCode, className }) => {
   return (
@@ -14,13 +14,14 @@ const Tooltip = ({ title, text, customCode, className }) => {
       }}
       overlayClassName="ioda-help-tooltip"
       color="rgba(0, 0, 0, 0.9)"
+      borderRadius="2px"
     >
       <Button
-        className={className}
+        className={`${className} question-tooltip-button`}
         type="link"
-        color="primary"
         shape="circle"
-        icon={<QuestionCircleOutlined />}
+        color="rgba(0, 0, 0, 0.9)"
+        icon={<QuestionCircleFilled />}
         size="small"
       />
     </Popover>

assets/js/Ioda/components/map/MapLegend.js

@@ -258,7 +258,7 @@
   "tooltip": {
     "timeRange": {
       "title": "Time Range",
-      "text": "This dropdown menu allows you to pick the time range for the data you want to inspect. Note that the dashboard limits the data to 60 days."
+      "text": "This graph displays the historical trend of signal strength in your chosen location for the time period selected."
     },
     "searchBar": {
       "title": "Search",
@@ -272,21 +272,29 @@
       "title": "IODA Signals",
       "text": "This panel allows you to inspect the time series of IODA's three signals: active probing, BGP, and Telescope."
     },
+    "xyPlotTimeSeriesTitleCountry": {
+      "title": "IODA Signals",
+      "text": "This graph displays the average signal strength across all regions within your chosen country."
+    },
     "alertFeed": {
       "title": "Alert Feed",
       "text": "This table contains potential outages that IODA discovered. The cause of an outage can be manifold and includes misconfiguration, natural disasters, and shutdowns."
     },
     "entityRegionalSummaryMap": {
       "title": "Outage Severity Levels",
-      "text": "This map shows potential regional outages by their relative severity. The more severe the outage, the more red the respective region overlay."
+      "text": "This graph displays variations in signal strength across different regions within your chosen country. You can select up to 3 regions to compare signal strength simultaneously. Stronger signal strength is typically indicated by green, while weaker signal strength is represented by red."
     },
     "entityAsnSummaryTable": {
       "title": "Outage Severity Levels",
-      "text": "This table shows potential ASN/ISP outages by their relative severity. The more severe the outage, the more red the respective table cell."
+      "text": "This graph displays variations in signal strength across different networks within your chosen country. You can select up to 3 networks to compare signal strength simultaneously. Stronger signal strength is typically indicated by green, while weaker signal strength is represented by red."
     },
     "entityRawSignalsHeading": {
       "title": "Raw IODA Signals",
       "text": "This visualization shows IODA's signals over time. The \"Stacked Horizon Graph\" turns from dark green to white as a signal decreases."
+    },
+    "outageSeverityScore": {
+      "title": "Outage Severity Score",
+      "text": "This indicates the severity of the outage, ranging from \"minimal disruption\" to \"complete internet shutdown\"."
     }
   },
   "timestamp": {

assets/js/Ioda/components/tooltip/Tooltip.js

@@ -2769,6 +2769,14 @@ class Entity extends Component {
     const tooltipXyPlotTimeSeriesText = T.translate(
       "tooltip.xyPlotTimeSeriesTitle.text"
     );
+
+    const tooltipXyPlotTimeSeriesTitleCountry = T.translate(
+      "tooltip.xyPlotTimeSeriesTitleCountry.title"
+    );
+    const tooltipXyPlotTimeSeriesTextCountry = T.translate(
+      "tooltip.xyPlotTimeSeriesTitleCountry.text"
+    );
+
     const timeDurationTooHighErrorMessage = T.translate(
       "dashboard.timeDurationTooHighErrorMessage"
     );
@@ -2820,12 +2828,18 @@ class Entity extends Component {
                     {xyChartTitle}
                     {this.state.entityName}
                   </h3>
-                  <CustomToolip
-                    className="mr-auto"
-                    title={tooltipXyPlotTimeSeriesTitle}
-                    text={tooltipXyPlotTimeSeriesText}
-                  />
-
+                  {this.state.entityType === "country" ?
+                    <CustomToolip
+                      className="mr-auto"
+                      title={tooltipXyPlotTimeSeriesTitleCountry}
+                      text={tooltipXyPlotTimeSeriesTextCountry}
+                    /> :
+                    <CustomToolip
+                      className="mr-auto"
+                      title={tooltipXyPlotTimeSeriesTitle}
+                      text={tooltipXyPlotTimeSeriesText}
+                    />
+                  }
                   {this.state.showResetZoomButton && (
                     <Tooltip title="Reset View">
                       <Button