Initial implementation of the parameter selection vue component.

assets/src/scripts/monitoring-location/components/hydrograph/ParameterSelectionApp.vue

+<template>
+  <ParameterSelection />
+</template>
+
+<script>
+import ParameterSelection from './vue-components/parameter-selection.vue';
+export default {
+  name: 'ParameterSelectionApp',
+  components: {
+    ParameterSelection
+  }
+};
+</script>

assets/src/scripts/monitoring-location/components/hydrograph/index.js

@@ -30,13 +30,14 @@ import {showDataIndicators} from './data-indicator';
 import {drawDataTables} from './data-table';
 import {initializeGraphBrush, drawGraphBrush} from './graph-brush';
 import {drawTimeSeriesLegend} from './legend';
-import {drawSelectionList} from './parameters';
+//import {drawSelectionList} from './parameters';
 import {drawSelectActions} from './select-actions';
 import {drawTimeSpanShortcutButtons} from './time-span-shortcuts';
 import {initializeTimeSeriesGraph, drawTimeSeriesGraphData} from './time-series-graph';
 import {initializeTooltipCursorSlider, drawTooltipCursorSlider} from './tooltip';
 
 import GraphControlsApp from './GraphControlsApp.vue';
+import ParameterSelectionApp from './ParameterSelectionApp.vue';
 
 /*
  * Renders the hydrograph on the node element using the Redux store for state information. The siteno, latitude, and
@@ -139,8 +140,18 @@ export const attachToNode = function(store,
         graphControlsApp.provide('siteno', siteno);
         graphControlsApp.mount('.ts-legend-controls-container');
 
-        nodeElem.select('.select-time-series-container')
-            .call(drawSelectionList, store, siteno, agencyCd);
+        const parameterSelectionApp = createApp(ParameterSelectionApp, {});
+        parameterSelectionApp.use(ReduxConnectVue, {
+            store,
+            mapDispatchToPropsFactory: (actionCreators) => (dispatch) => bindActionCreators(actionCreators, dispatch),
+            mapStateToPropsFactory: createStructuredSelector
+        });
+        parameterSelectionApp.provide('store', store);
+        parameterSelectionApp.provide('siteno', siteno);
+        parameterSelectionApp.provide('agencyCode', agencyCd);
+        parameterSelectionApp.mount('.select-time-series-container');
+        //nodeElem.select('.select-time-series-container')
+        //    .call(drawSelectionList, store, siteno, agencyCd);
     }
 
     // Once hydrograph data has been fetched, render the time series data.

assets/src/scripts/monitoring-location/components/hydrograph/vue-components/method-picker.vue

+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'methodPicker'
+};
+</script>

assets/src/scripts/monitoring-location/components/hydrograph/vue-components/parameter-selection-expansion-control.vue

+<template>
+  <div
+    v-if="hasWaterAlert"
+  >
+    <span
+      :id="`expansion-toggle-${browserType}-${parameterCode}`"
+      class="expansion-toggle"
+      :aria-expanded="isExpanded"
+      @click.stop="toggleRowVisibility"
+    >
+      <svg
+        class="usa-icon"
+        :aria-label="expansionIconLabel"
+        :aria-hidden="!isExpanded"
+        role="img"
+      >
+        <use :xlink:href="expansionIcon"/>
+      </svg>
+    </span>
+  </div>
+</template>
+
+<script>
+import {computed} from 'Vue';
+
+import config from 'ui/config';
+
+export default {
+  name: 'ParameterSelectionExpansionControl',
+  emits: ['toggleExpansionRow'],
+  props: {
+    parameterCode: {
+      type: String,
+      required: true
+    },
+    hasWaterAlert: {
+      type: Boolean,
+      required: true
+    },
+    browserType: {
+      type: String,
+      required: true,
+      validator: function(value) {
+        return ['desktop', 'mobile'].includes(value);
+      }
+    },
+    isExpanded: {
+      type: Boolean,
+      required: false
+    }
+  },
+  setup(props, {emit}) {
+
+    const expansionIcon =
+      computed(() => `${config.STATIC_URL}/img/sprite.svg#${props.isExpanded ? 'expand_less' : 'expand_more'}`);
+    const expansionIconLabel = `click to ${props.isExpanded ? 'expand': 'hide'} details`;
+
+    function toggleRowVisibility() {
+      emit('toggleExpansionRow', props.parameterCode, !props.isExpanded);
+    }
+
+    return {
+      expansionIcon,
+      expansionIconLabel,
+      toggleRowVisibility
+    };
+  }
+};
+</script>

assets/src/scripts/monitoring-location/components/hydrograph/vue-components/parameter-selection.vue

+<template>
+  <div>
+    <p class="usa-prose">
+      Select data to graph
+    </p>
+    <div class="main-parameter-selection-container">
+      <div
+        v-for="parameter in parameters"
+        :key="parameter.parameterCode"
+        :class="`grid-row-container-row ${parameter.isSelected ? 'selected' : ''}`"
+        :aria-selected="parameter.parameterCode === selectedParameterCode"
+        ga-on="click"
+        ga-event-category="selectTimeSeries"
+        :ga-event-action="`time-series-parmcd-${parameter.parameterCode}`"
+        @click.stop="selectParameter(parameter.parameterCode)"
+      >
+        <div class="grid-row-inner grid-row-period-of-record">
+          <div class="grid-row-period-of-record-text">
+            {{ parameter.periodOfRecord.begin_date }} to {{ parameter.periodOfRecord.end_date }}
+            <div class="toggle-for-top-period-of-record">
+              <ParameterSelectionExpansionControl
+                :parameter-code="parameter.parameterCode"
+                :has-water-alert="parameter.waterAlert.hasWaterAlert"
+                browser-type="mobile"
+                :is-expanded="parameter.parameterCode === expandedParameterCode"
+                @expandRow="expandThisRow"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="grid-row grid-row-inner">
+          <div class="radio-button__param-select">
+            <input
+              :id="`radio-${parameter.parameterCode}`"
+              :aria-labelledby="`radio-${parameter.parameterCode-label}`"
+              type="radio"
+              name="parameter-selection"
+              :value="parameter.parameterCode"
+              :checked="parameter.parameterCode === selectedParameterCode"
+            >
+            <label class="usa-radio__label" />
+          </div>
+          <div
+            :id="`radio-${parameter.parameterCode}-label`"
+            class="description__param-select"
+          >
+            {{ parameter.description }}
+          </div>
+          <div class="period-of-record-and-toggle-container">
+            <div class="period-of-record__param-select">
+              {{ parameter.periodOfRecord.begin_date }} to {{ parameter.periodOfRecord.end_date }}
+              <ParameterSelectionExpansionControl
+                :is-expanded="parameter.parameterCode === expandedParameterCode"
+                :has-water-alert="parameter.waterAlert.hasWaterAlert"
+                browser-type="desktop"
+                :parameter-code="parameter.parameterCode"
+              />
+            </div>
+          </div>
+        </div>
+        <div
+        class="expansion-container-row"
+        :hidden="parameter.parameterCode !== expandedParameterCode"
+      >
+        <div
+          v-if="parameter.waterAlert.hasWaterAlert"
+          class="grid-row grid-row-inner"
+        >
+          <div class="water-alert-row">
+            <a
+              :href="getWaterAlertUrl(parameter.parameterCode)"
+              target="_blank"
+              class="water-alert-cell"
+              :title="parameter.waterAlert.tooltipText"
+            >
+              {{ parameter.waterAlert.displayText }}
+            </a>
+          </div>
+        </div>
+      </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {useActions, useState} from 'redux-connect-vue';
+import {inject, ref} from 'vue';
+
+import config from 'ui/config';
+
+import {getInputsForRetrieval, getSelectedParameterCode} from 'ml/selectors/hydrograph-state-selector';
+
+import {setSelectedParameterCode, setSelectedIVMethodID} from 'ml/store/hydrograph-state';
+import {retrieveHydrographData} from 'ml/store/hydrograph-data';
+
+import {getAvailableParameters} from '../selectors/parameter-data';
+import {getSortedIVMethods} from '../selectors/time-series-data';
+
+import {showDataIndicators} from '../data-indicator';
+
+import ParameterSelectionExpansionControl from './parameter-selection-expansion-control.vue';
+
+export default {
+  name: 'ParameterSelection',
+  components: {
+    ParameterSelectionExpansionControl
+  },
+  setup() {
+    const expandedParameterCode = ref('');
+    const state = useState({
+      parameters: getAvailableParameters,
+      selectedParameterCode: getSelectedParameterCode
+    });
+
+    const actions = useActions({
+      setSelectedParameterCode,
+      setSelectedIVMethodID,
+      retrieveHydrographData
+    });
+
+    const reduxStore = inject('store');
+    const siteno = inject('siteno');
+    const agencyCode = inject('agencyCode');
+
+    function selectParameter(parameterCode) {
+      actions.setSelectedParameterCode(parameterCode);
+      showDataIndicators(true, reduxStore);
+      actions.retrieveHydrographData(siteno, agencyCode, getInputsForRetrieval(reduxStore.getState()), true)
+        .then(() => {
+          const sortedMethods = getSortedIVMethods(reduxStore.getState());
+            if (sortedMethods && sortedMethods.methods.length) {
+              actions.setSelectedIVMethodID(sortedMethods.methods[0].methodID);
+            }
+            showDataIndicators(false, reduxStore);
+        });
+    }
+
+    function expandThisRow(parameterCode, expandRow) {
+        expandedParameterCode.value = expandRow ? parameterCode : '';
+    }
+
+    function getWaterAlertUrl(parameterCode) {
+      parameterCode.includes(config.CALCULATED_TEMPERATURE_VARIABLE_CODE) ?
+            `${config.WATERALERT_SUBSCRIPTION}/?site_no=${siteno}&parm=${parameterCode.replace(config.CALCULATED_TEMPERATURE_VARIABLE_CODE, '')}` :
+            `${config.WATERALERT_SUBSCRIPTION}/?site_no=${siteno}&parm=${parameterCode}`;
+    }
+
+
+    return {
+      ...state,
+      expandedParameterCode,
+      selectParameter,
+      expandThisRow,
+      getWaterAlertUrl
+    };
+  }
+};
+</script>

assets/src/styles/partials/_parameter-list.scss

@@ -98,7 +98,7 @@ $row-border-color: 'black';
       }
     }
 
-    #period-of-record-and-toggle-container {
+    period-of-record-and-toggle-container {
       @include uswds.u-display('none');
       @include uswds.at-media('tablet') {
         @include uswds.u-display('flex');