pacificclimate · Nospamas · Jan 17, 2024 · Jan 15, 2024
diff --git a/src/components/main/Body/Body.js b/src/components/main/Body/Body.js
@@ -139,121 +139,110 @@ function Body() {
   const rowClasses = { className: "mt-3" };
 
   return (
-    <div className={css.portal}>
-      <Row>
-        <AdjustableColumns
-          defaultLgs={config.adjustableColumnWidthsDefault}
-          contents={[
-            // "map" ||  // Uncomment to suppress map
-            <StationMap
-              {...baseMaps[config.baseMap]}
-              stations={filteredStations}
-              metadata={metadata}
-              onSetArea={setArea}
-              externalIsPending={
-                metadata.stations === null || filteringIsPending
-              }
-            />,
-
-            <Card style={{ marginLeft: "-15px", marginRight: "-10px" }}>
-              <Card.Body>
-                {config.showReloadStationsButton && (
-                  <Button onClick={reloadStations}>Reload stations</Button>
-                )}
-                <Tabs
-                  id="non-map-controls"
-                  defaultActiveKey={config.defaultTab}
-                  className={css.mainTabs}
-                >
-                  <Tab eventKey={"Filters"} title={"Station Filters"}>
-                    {config.stationDebugFetchOptions && (
-                      <Row>
-                        <Col lg={6}>Fetch limit</Col>
-                        <Col lg={6}>
-                          <Select
-                            options={config.stationDebugFetchLimitsOptions}
-                            value={stnsLimit}
-                            onChange={setStnsLimit}
-                          />
-                        </Col>
-                      </Row>
-                    )}
-                    <Row {...rowClasses}>
-                      <Col lg={12} md={12} sm={12}>
-                        <SelectionCounts
-                          allStations={metadata.stations}
-                          selectedStations={selectedStations}
-                        />
-                        <p className={"mb-0"}>
-                          (See Station Metadata and Station Data tabs for
-                          details)
-                        </p>
-                      </Col>
-                    </Row>
-                    <StationFilters
-                      state={filterValuesNormal}
-                      setState={filterValuesSetState}
-                      metadata={metadata}
-                      rowClasses={rowClasses}
-                    />
-                  </Tab>
-
-                  <Tab eventKey={"Metadata"} title={"Station Metadata"}>
-                    <Row {...rowClasses}>
-                      <SelectionCounts
-                        allStations={metadata.stations}
-                        selectedStations={selectedStations}
-                      />
-                    </Row>
-                    <StationMetadata
-                      stations={selectedStations}
-                      metadata={metadata}
-                    />
-                  </Tab>
-
-                  <Tab eventKey={"Data"} title={"Station Data"}>
-                    <Row {...rowClasses}>
-                      <SelectionCounts
-                        allStations={metadata.stations}
-                        selectedStations={selectedStations}
-                      />
-                      <SelectionCriteria />
-                    </Row>
-                    <UnselectedThings
-                      selectedNetworksOptions={
-                        filterValuesNormal.selectedNetworksOptions
-                      }
-                      selectedVariablesOptions={
-                        filterValuesNormal.selectedVariablesOptions
-                      }
-                      selectedFrequenciesOptions={
-                        filterValuesNormal.selectedFrequenciesOptions
-                      }
-                    />
-
-                    <StationData
-                      filterValues={filterValuesNormal}
-                      selectedStations={selectedStations}
-                      dataDownloadUrl={dataDownloadUrl({
-                        config,
-                        filterValues: filterValuesNormal,
-                        polygon: area,
-                      })}
-                      dataDownloadFilename={dataDownloadFilename}
-                      rowClasses={rowClasses}
+    <Row className={css.portal}>
+      <AdjustableColumns
+        defaultLgs={config.adjustableColumnWidthsDefault}
+        contents={[
+          // "map" ||  // Uncomment to suppress map
+          <StationMap
+            {...baseMaps[config.baseMap]}
+            stations={filteredStations}
+            metadata={metadata}
+            onSetArea={setArea}
+            externalIsPending={metadata.stations === null || filteringIsPending}
+            onReloadStations={reloadStations}
+            className={css.mainColumns}
+          />,
+          <Tabs
+            id="non-map-controls"
+            defaultActiveKey={config.defaultTab}
+            className={css.mainTabs}
+          >
+            <Tab eventKey={"Filters"} title={"Station Filters"}>
+              {config.stationDebugFetchOptions && (
+                <Row>
+                  <Col lg={6}>Fetch limit</Col>
+                  <Col lg={6}>
+                    <Select
+                      options={config.stationDebugFetchLimitsOptions}
+                      value={stnsLimit}
+                      onChange={setStnsLimit}
                     />
-                  </Tab>
-
-                  <Tab eventKey={"Networks"} title={"Networks"}>
-                    <NetworksMetadata networks={metadata.networks} />
-                  </Tab>
-                </Tabs>
-              </Card.Body>
-            </Card>,
-          ]}
-        />
-      </Row>
-    </div>
+                  </Col>
+                </Row>
+              )}
+              <Row {...rowClasses}>
+                <Col lg={12} md={12} sm={12}>
+                  <SelectionCounts
+                    allStations={metadata.stations}
+                    selectedStations={selectedStations}
+                  />
+                  <p className={"mb-0"}>
+                    (See Station Metadata and Station Data tabs for details)
+                  </p>
+                </Col>
+              </Row>
+              <StationFilters
+                state={filterValuesNormal}
+                setState={filterValuesSetState}
+                metadata={metadata}
+                rowClasses={rowClasses}
+              />
+            </Tab>
+
+            <Tab eventKey={"Metadata"} title={"Station Metadata"}>
+              <Row {...rowClasses}>
+                <SelectionCounts
+                  allStations={metadata.stations}
+                  selectedStations={selectedStations}
+                />
+              </Row>
+              <StationMetadata
+                stations={selectedStations}
+                metadata={metadata}
+              />
+            </Tab>
+
+            <Tab eventKey={"Data"} title={"Station Data"}>
+              <Row {...rowClasses}>
+                <SelectionCounts
+                  allStations={metadata.stations}
+                  selectedStations={selectedStations}
+                />
+                <SelectionCriteria />
+              </Row>
+              <UnselectedThings
+                selectedNetworksOptions={
+                  filterValuesNormal.selectedNetworksOptions
+                }
+                selectedVariablesOptions={
+                  filterValuesNormal.selectedVariablesOptions
+                }
+                selectedFrequenciesOptions={
+                  filterValuesNormal.selectedFrequenciesOptions
+                }
+              />
+
+              <StationData
+                filterValues={filterValuesNormal}
+                selectedStations={selectedStations}
+                dataDownloadUrl={dataDownloadUrl({
+                  config,
+                  filterValues: filterValuesNormal,
+                  polygon: area,
+                })}
+                dataDownloadFilename={dataDownloadFilename}
+                rowClasses={rowClasses}
+              />
+            </Tab>
+
+            <Tab eventKey={"Networks"} title={"Networks"}>
+              <NetworksMetadata networks={metadata.networks} />
+            </Tab>
+          </Tabs>,
+        ]}
+      />
+    </Row>
   );
 }
 

diff --git a/src/components/maps/StationMap/StationMap.js b/src/components/maps/StationMap/StationMap.js
@@ -53,6 +53,7 @@ import { getTimer } from "../../../utils/timing";
 import { MapSpinner } from "pcic-react-leaflet-components";
 import { useImmer } from "use-immer";
 import { useConfigContext } from "../../main/ConfigContext";
+import { StationRefresh } from "../StationRefresh/StationRefresh";
 
 logger.configure({ active: true });
 const smtimer = getTimer("StationMarker timing");
@@ -68,6 +69,7 @@ function StationMap({
     color: "#f49853",
     weight: 1,
   },
+  onReloadStations = () => {},
 
   externalIsPending,
   // This is a transition-pending value passed in from the parent, and
@@ -168,6 +170,12 @@ function StationMap({
           onEdited={handleChangedGeometryLayers}
           onDeleted={handleChangedGeometryLayers}
         />
+        {config.showReloadStationsButton && (
+          <StationRefresh
+            position={"topleft"}
+            onReloadStations={onReloadStations}
+          />
+        )}
       </FeatureGroup>
       {markerLayerGroup}
       {isPending && <MapSpinner {...config.mapSpinner} />}

diff --git a/src/components/maps/StationRefresh/StationFrefresh.css b/src/components/maps/StationRefresh/StationFrefresh.css
diff --git a/src/components/maps/StationRefresh/StationRefresh.js b/src/components/maps/StationRefresh/StationRefresh.js
@@ -0,0 +1,121 @@
+import L, { Control } from "leaflet";
+import { createControlComponent } from "@react-leaflet/core";
+
+/*
+ * @class StationRefresh
+ * @inherits Control
+ * This control was part of a mini project to add a refresh button to the map to reload station data. It is based off of the zoom control in leaflet.
+ * The control additionally uses react-leaflets createControlComponent to create a react component that can be used in the context of react-leaflet by wrapping the leaflet control.
+ */
+
+const repeatIcon =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-repeat" viewBox="0 0 16 16">' +
+  ' <path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41m-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9"/>' +
+  ' <path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5 5 0 0 0 8 3M3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9z"/>' +
+  " </svg>";
+
+export const LStationRefresh = Control.extend({
+  // @section
+  // @aka StationRefresh options
+  options: {
+    // @option position: String = 'topleft'
+    // The position of the control (one of the map corners). Possible values are `'topleft'`,
+    // `'topright'`, `'bottomleft'` or `'bottomright'`
+    position: "topleft",
+
+    // @option refreshText: String = '<span aria-hidden="true"><FontAwesomeIcon icon="fa-brands fa-bootstrap" /></span>'
+    // The text set on the 'zoom in' button.
+    refreshText: `<span aria-hidden="true">${repeatIcon}</span>`,
+
+    // @option refreshTitle: String = 'Zoom in'
+    // The title set on the 'zoom in' button.
+    refreshTitle: "Refresh Station Data",
+
+    onReloadStations: () => {
+      console.log("onReloadStations not set");
+    },
+  },
+
+  onAdd() {
+    const refreshName = "leaflet-control-refresh-stations",
+      container = L.DomUtil.create("div", `${refreshName} leaflet-bar`),
+      options = this.options;
+
+    this._refreshButton = this._createButton(
+      options.refreshText,
+      options.refreshTitle,
+      `${refreshName}-in`,
+      container,
+      this._refreshStations,
+    );
+
+    return container;
+  },
+
+  onRemove() {
+    // Nothing to do here as we don't listen to anything
+  },
+
+  disable() {
+    this._disabled = true;
+    this._updateDisabled();
+    return this;
+  },
+
+  enable() {
+    this._disabled = false;
+    this._updateDisabled();
+    return this;
+  },
+
+  _createButton(html, title, className, container, fn) {
+    const link = L.DomUtil.create("a", className, container);
+    link.innerHTML = html;
+    link.href = "#";
+    link.title = title;
+
+    /*
+     * Will force screen readers like VoiceOver to read this as "Refresh Stations - button"
+     */
+    link.setAttribute("role", "button");
+    link.setAttribute("aria-label", title);
+
+    L.DomEvent.disableClickPropagation(link);
+    L.DomEvent.on(link, "click", L.DomEvent.stop);
+    L.DomEvent.on(link, "click", fn, this);
+    L.DomEvent.on(link, "click", this._refocusOnMap, this);
+
+    return link;
+  },
+
+  _updateDisabled() {
+    const map = this._map,
+      className = "leaflet-disabled";
+
+    this._refreshButton.classList.remove(className);
+    this._refreshButton.setAttribute("aria-disabled", "false");
+
+    if (this._disabled) {
+      this._refreshButton.classList.add(className);
+      this._refreshButton.setAttribute("aria-disabled", "true");
+    }
+  },
+
+  _refreshStations() {
+    if (!this._disabled) {
+      this.options.onReloadStations();
+    }
+  },
+});
+
+// @factory stationRefresh(options: StationRefresh options)
+// Creates a zoom control
+export const stationRefresh = function (options) {
+  return new LStationRefresh(options);
+};
+
+export const StationRefresh = createControlComponent(
+  function createStationRefresh(props) {
+    return new LStationRefresh(props);
+  },
+);
diff --git a/src/components/util/AdjustableColumns/AdjustableColumns.js b/src/components/util/AdjustableColumns/AdjustableColumns.js
@@ -81,7 +81,8 @@ export default class AdjustableColumns extends Component {
             lg={12}
             className={"text-center"}
             style={{
-              marginBottom: "-0.5em",
+              marginTop: "0.25em",
+              marginBottom: "0.25em",
               marginLeft: "-2px",
               borderRight: "1px solid #777",
               borderLeft: "1px solid #777",