Adds tool tips on hover of interactable elements

concord-consortium · Feb 7, 2024 · 77a4f35 · 77a4f35
1 parent 7581402
commit 77a4f35
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 27 deletions.
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -266,9 +266,11 @@ export const App = () => {
 
   return (
     <div className="App">
-      <div className="header">
+      <div className="header" title="About this plugin">
         <span>Retrieve weather data from observing stations.</span>
-        <InfoIcon className="info-icon" title="Get further information about this CODAP plugin" onClick={handleOpenInfo}/>
+        <span title="Get further information about this CODAP plugin">
+          <InfoIcon className="info-icon" onClick={handleOpenInfo}/>
+        </span>
       </div>
       <div className="header-divider" />
       <LocationPicker />
@@ -284,8 +286,14 @@ export const App = () => {
           <div className={`status-message ${status?.status}`}>{status ? status.message : ""}</div>
         </div>
         <div>
-          <button className="clear-data-button" disabled={isFetching || disableGetData} onClick={handleClearData}>Clear Data</button>
-          <button className="get-data-button" disabled={isFetching || disableGetData} onClick={handleGetData}>Get Data</button>
+          <button className="clear-data-button" disabled={isFetching || disableGetData} onClick={handleClearData}
+            title="Clear weather data in CODAP.">
+              Clear Data
+          </button>
+          <button className="get-data-button" disabled={isFetching || disableGetData} onClick={handleGetData}
+            title="Fetch weather data from NOAA and send to CODAP">
+              Get Data
+          </button>
         </div>
       </div>
       {showModal === "info" && <InfoModal />}

diff --git a/src/components/attribute-filter.tsx b/src/components/attribute-filter.tsx
@@ -80,7 +80,7 @@ export const AttributeFilter = () => {
             <tr>
               <th scope="col" className={classnames("table-header attribute-header", {"narrow": hasFilter})}>Attributes</th>
               <th scope="col" className="table-header abbr-header">abbr</th>
-              <th scope="col" className="table-header units-header"  onClick={handleUnitsToggle}>units</th>
+              <th scope="col" className="table-header units-header" onClick={handleUnitsToggle} title="Switch units from standard to metric">units</th>
               <th scope="col" className={classnames("table-header filter-header", {"wide": hasFilter})}>filter</th>
             </tr>
           </thead>
@@ -111,7 +111,7 @@ export const AttributeFilter = () => {
                   <td className={classnames("filter-filter", {"filtering": idx === filteringIndex && showFilterModal,
                                               "has-filter": attrFilter && attrFilter.operator !== "all"})}
                       onClick={(e)=>handleFilterClick(e,idx)}>
-                    <div className="filter-value-container">
+                    <div className="filter-value-container" title="Specify how to filter the fetched data">
                       <span>{filterValue}</span>
                       <EditIcon className="edit-icon" />
                     </div>
@@ -300,26 +300,26 @@ const FilterModal = ({attr, position, targetFilterBottom, setShowFilterModal, se
     // key attribute forces inputs to rerender when operator changes
     if (operator === "between") {
       return (
-        <div className="between-inputs-wrapper" key={`${operator}-${units}`}>
+        <div className="between-inputs-wrapper" title="Enter a value" key={`${operator}-${units}`}>
           <input ref={filterLowerValueInputElRef} className="filter-value between-low-value"
             defaultValue={`${lowerVal} ${currentAttr?.unit[units]}`}>
           </input>
           <span>and</span>
-          <input ref={filterUpperValueInputElRef} className="filter-value between-upper-value"
+          <input ref={filterUpperValueInputElRef} title="Enter a value" className="filter-value between-upper-value"
             defaultValue={`${upperVal} ${currentAttr?.unit[units]}`}>
           </input>
         </div>
       );
     } else if (operator === "aboveMean" || operator === "belowMean" || operator === "all") {
       return null;
     } else if (operator === "top" || operator === "bottom") {
-      return  <input ref={filterValueTopBottomInputElRef} key={`${operator}-${units}`} className="filter-value"
+      return  <input ref={filterValueTopBottomInputElRef} key={`${operator}-${units}`} className="filter-value" title="Enter a value"
                     defaultValue={`${Array.isArray(currentFilterValue)
                                       ? currentFilterValue[0]
                                       : currentFilterValue ? currentFilterValue : "100"}`}>
               </input>;
     } else {
-      return  <input ref={filterValueInputElRef} key={`${operator}-${units}`} className="filter-value"
+      return  <input ref={filterValueInputElRef} key={`${operator}-${units}`} className="filter-value" title="Enter a value"
                 defaultValue={`${Array.isArray(currentFilterValue)
                                   ? currentFilterValue[0]
                                   : currentFilterValue ? currentFilterValue : "0"} ${currentAttr?.unit[units]}`}>
@@ -344,7 +344,7 @@ const FilterModal = ({attr, position, targetFilterBottom, setShowFilterModal, se
   return (
     <div className={classnames("filter-modal", {"wide": wideModal})} style={position}>
       <div className="filter-wrapper">
-        <div className="filter-operator-wrapper" onClick={handleChangeFilterOperator}>
+        <div className="filter-operator-wrapper" title="Select an operator" onClick={handleChangeFilterOperator}>
           <div className="filter-operator">
             {operatorTextMap[operator] || "equals"}
           </div>
@@ -354,8 +354,8 @@ const FilterModal = ({attr, position, targetFilterBottom, setShowFilterModal, se
         {(operator === "top" || operator === "bottom") && <span>{` results`}</span>}
       </div>
       <div className="filter-modal-footer">
-        <button className="filter-button reset" onClick={handleReset}>Reset</button>
-        <button className="filter-button done" onClick={handleSubmitFilter}>Done</button>
+        <button className="filter-button reset" title="Revert to no filter" onClick={handleReset}>Reset</button>
+        <button className="filter-button done" title="Submit selected filter specifications" onClick={handleSubmitFilter}>Done</button>
       </div>
       {showOperatorSelectionModal &&
         <div ref={operatorSelectionModalRef} className="filter-operator-selection-container" style={operatorSelectionListHeight}>

diff --git a/src/components/attribute-selector.tsx b/src/components/attribute-selector.tsx
@@ -101,15 +101,15 @@ export const AttributesSelector = () => {
   return (
     <div className="attribute-selection-container">
       <div className="attribute-selection-header">
-        <span className="attributes-title">Attributes</span>
-        <div className="units-selection">
+        <span className="attributes-title" title="Choose attributes of weather data to fetch">Attributes</span>
+        <div className="units-selection" title="Select unit system for fetched data: standard or metric">
           <label className="units-label">Units</label>
           <button className={classnames("units-switch left", {"selected-unit": units === "standard"})} onClick={handleUnitsClicked}>standard</button>
           <button className={classnames("units-switch right",{"selected-unit": units === "metric"} )} onClick={handleUnitsClicked}>metric</button>
         </div>
       </div>
       <div className="attribute-selection">
-        <div className={`attribute-button all ${allSelected ? "selected" : ""}`} onClick={toggleSelectAllAttrs}>
+        <div className={`attribute-button all ${allSelected ? "selected" : ""}`} onClick={toggleSelectAllAttrs} title="Select all attributes">
           All
         </div>
         { attributeNamesList.map(attr => {

diff --git a/src/components/date-range/calendars.tsx b/src/components/date-range/calendars.tsx
@@ -49,7 +49,7 @@ export const Calendars = ({selectedCalendar, handleSelectCalendar, closeCalendar
               </>
             }
           </div>
-        <button className="close-calendar" onClick={closeCalendars}>Done</button>
+        <button className="close-calendar" onClick={closeCalendars} title="Submit date range selection">Done</button>
       </div>
     </div>
   );

diff --git a/src/components/date-range/date-range.tsx b/src/components/date-range/date-range.tsx
@@ -84,8 +84,8 @@ export const DateRange = () => {
   return (
     <div className="date-range-container">
       <div className="date-range-header">
-        <div className="title">Date Range {showWarningIcon && <WarningIcon/>}</div>
-        <div className="data-frequency-selection">
+        <div className="title" title="Select a range of dates">Date Range {showWarningIcon && <WarningIcon/>}</div>
+        <div className="data-frequency-selection" title="Select hourly, daily, or monthly weather summaries">
           {frequencies.map(freq => {
             return (
               <button

diff --git a/src/components/date-range/date-selector.tsx b/src/components/date-range/date-selector.tsx
@@ -17,7 +17,9 @@ export const DateSelector = ({onOpen, isSelected, placeholder, value}: IDatePick
   const selectedClass = isSelected ? "selected" : "";
   return (
     <div className={`date-selector ${placeHolderClass} ${selectedClass}`} onClick={onOpen}>
-      <CalendarMonthIcon/>
+      <span title="Select a date">
+        <CalendarMonthIcon/>
+      </span>
       {value ? dayjs(value).format("MM/DD/YYYY") : placeholder}
     </div>
   );

diff --git a/src/components/info-modal.tsx b/src/components/info-modal.tsx
@@ -19,7 +19,7 @@ export const InfoModal = () => {
       </div>
       <div className="modal-body">
         <div className="info-title">About</div>
-        <div className="info-container">
+        <div className="info-container" title="About this plugin">
           <p>These weather data come from the National Centers for Environmental Information (NCEI), part of the National Oceanic and Atmospheric Administration. Documentation is available at
             <a href="https://www.ncei.noaa.gov" target="_blank" rel="noreferrer"> https://www.ncei.noaa.gov</a>.
           </p>
@@ -30,7 +30,7 @@ export const InfoModal = () => {
         </div>
       </div>
       <div className="modal-footer">
-        <button className="modal-button" onClick={handleCloseModal}>Close</button>
+        <button className="modal-button" onClick={handleCloseModal} title="Hide this section">Close</button>
       </div>
     </div>
   );

diff --git a/src/components/location-picker.tsx b/src/components/location-picker.tsx
@@ -342,8 +342,10 @@ export const LocationPicker = () => {
               { weatherStation &&
                 <>
                   <span className="station-distance">({stationDistance?.toFixed(1)} {unitDistanceText}) </span>
-                  <span className="station-name"> {weatherStation?.name}</span>
-                  <EditIcon />
+                  <span className="station-name" title="Which weather station from which to fetch data"> {weatherStation?.name}</span>
+                  <span title="Select a different station">
+                    <EditIcon />
+                  </span>
                 </>
               }
             </div>
@@ -369,7 +371,7 @@ export const LocationPicker = () => {
         }
       </div>
       <div className="location-input-container">
-        <div className="location-input-selection" onKeyDown={handleListKeyDown}>
+        <div className="location-input-selection" onKeyDown={handleListKeyDown} title="Enter a location">
           <div ref={locationDivRef} className={classnames("location-input-wrapper", {"short" : showMapButton, "editing": isEditing})}
                 onClick={handleLocationInputClick}>
             <LocationIcon />
@@ -389,7 +391,6 @@ export const LocationPicker = () => {
               onFocus={() => setHoveredIndex(null)}>
               <li className={classnames("current-location-wrapper", {"geoname-candidate": hoveredIndex === -1})}
                   tabIndex={1} onClick={handleFindCurrentLocation} onMouseOver={() => handleLocationHover(null)}>
-                  {/* onKeyDown={(e)=>handlePlaceNameSelectionKeyDown(e, 0)}> */}
                 <CurrentLocationIcon className="current-location-icon"/>
                 <span className="current-location">Use current location</span>
               </li>
@@ -409,7 +410,7 @@ export const LocationPicker = () => {
           }
         </div>
         { showMapButton &&
-          <button className="map-button" onClick={handleOpenMap}>
+          <button className="map-button" onClick={handleOpenMap} title="Pick a weather station from a map">
             <OpenMapIcon />
           </button>
         }