basic container structure

assets/src/scripts/monitoring-location/components/hydrograph/TimeSpanShortcutsApp.vue → assets/src/scripts/monitoring-location/components/hydrograph/TimeDownloadGraphControlsApp.vue

 <template>
-  <div class="short-cut-time-span-container">
+  <div id="time-download-graph-controls">
     <TimeSpanShortcuts />
+    <SelectActions />
   </div>
 </template>
 
 <script>
 import TimeSpanShortcuts from './vue-components/time-span-shortcuts.vue';
+import SelectActions from './vue-components/select-actions.vue';
 
 export default {
-  name: 'TimeSpanShortcutsApp',
+  name: 'TimeDownloadGraphControlsApp',
   components: {
+    SelectActions,
     TimeSpanShortcuts
   }
 };

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

@@ -41,8 +41,8 @@ import {initializeTooltipCursorSlider, drawTooltipCursorSlider} from './tooltip'
 
 import DataTablesApp from './DataTablesApp.vue';
 import GraphControlsApp from './GraphControlsApp.vue';
-import TimeSpanShortcutsApp from './TimeSpanShortcutsApp.vue';
 import ParameterSelectionApp from './ParameterSelectionApp.vue';
+import TimeDownloadGraphControlsApp from './TimeDownloadGraphControlsApp.vue';
 
 /* eslint-disable vue/one-component-per-file */
 
@@ -123,16 +123,18 @@ export const attachToNode = function(store,
 
     // Render initial UI elements prior to completion of data fetching
     if (!showOnlyGraph) {
-        const timeSpanShortcutsApp = createApp(TimeSpanShortcutsApp, {});
-        timeSpanShortcutsApp.use(ReduxConnectVue, {
+        const timeDownloadGraphControlsApp = createApp(TimeDownloadGraphControlsApp, {});
+        timeDownloadGraphControlsApp.use(ReduxConnectVue, {
             store,
             mapDispatchToPropsFactory: (actionCreators) => (dispatch) => bindActionCreators(actionCreators, dispatch),
             mapStateToPropsFactory: createStructuredSelector
         });
-        timeSpanShortcutsApp.provide('store', store);
-        timeSpanShortcutsApp.provide('siteno', siteno);
-        timeSpanShortcutsApp.provide('agencyCd', agencyCd);
-        timeSpanShortcutsApp.mount('.short-cut-time-span-container');
+        timeDownloadGraphControlsApp.provide('store', store);
+        timeDownloadGraphControlsApp.provide('siteno', siteno);
+        timeDownloadGraphControlsApp.provide('agencyCd', agencyCd);
+        timeDownloadGraphControlsApp.mount('#time-download-graph-controls-anchor');
+
+
 
         select(node).select('.select-actions-container').call(drawSelectActions, store, siteno, agencyCd);
     }

assets/src/scripts/monitoring-location/components/hydrograph/vue-components/select-actions.vue

+<template>
+  <h2>actions here</h2>
+</template>
+
+<script>
+  export default {
+    name: 'SelectActions'
+  };
+</script>
\ No newline at end of file

assets/src/scripts/monitoring-location/components/hydrograph/vue-components/time-span-shortcuts.vue

 <template>
-  <div class="usa-form">
-    <div
-      v-if="ivData"
-      class="iv-button-container"
-    >
+  <div class="short-cut-time-span-container">
+    <div class="usa-form">
       <div
-        v-for="shortcut in ivShortcuts"
-        :key="shortcut.label"
-        class="usa-radio"
+        v-if="ivData"
+        class="iv-button-container"
       >
-        <input
-          :id="`${shortcut.timeSpan}-input`"
-          class="usa-radio__input"
-          type="radio"
-          name="time-span"
-          :value="shortcut.timeSpan"
-          :checked="selectedTimeSpan === shortcut.timeSpan"
-          @click="setTimeSpan(shortcut.timeSpan)"
+        <div
+          v-for="shortcut in ivShortcuts"
+          :key="shortcut.label"
+          class="usa-radio"
         >
-        <label
-          class="usa-radio__label"
-          :for="`${shortcut.timeSpan}-input`"
-        >
-          {{ shortcut.label }}
-        </label>
+          <input
+            :id="`${shortcut.timeSpan}-input`"
+            class="usa-radio__input"
+            type="radio"
+            name="time-span"
+            :value="shortcut.timeSpan"
+            :checked="selectedTimeSpan === shortcut.timeSpan"
+            @click="setTimeSpan(shortcut.timeSpan)"
+          >
+          <label
+            class="usa-radio__label"
+            :for="`${shortcut.timeSpan}-input`"
+          >
+            {{ shortcut.label }}
+          </label>
+        </div>
       </div>
-    </div>
-    <div
-      v-if="!ivData && gwData"
-      class="gw-button-container"
-    >
       <div
-        v-for="shortcut in gwShortcuts"
-        :key="shortcut.label"
-        class="usa-radio"
+        v-if="!ivData && gwData"
+        class="gw-button-container"
       >
-        <input
-          :id="`${shortcut.timeSpan}-input`"
-          class="usa-radio__input"
-          type="radio"
-          name="time-span"
-          :value="shortcut.timeSpan"
-          :checked="selectedTimeSpan === shortcut.timeSpan"
-          @click="setTimeSpan(shortcut.timeSpan)"
-        >
-        <label
-          class="usa-radio__label"
-          :for="`${shortcut.timeSpan}-input`"
+        <div
+          v-for="shortcut in gwShortcuts"
+          :key="shortcut.label"
+          class="usa-radio"
         >
-          {{ shortcut.label }}
-        </label>
+          <input
+            :id="`${shortcut.timeSpan}-input`"
+            class="usa-radio__input"
+            type="radio"
+            name="time-span"
+            :value="shortcut.timeSpan"
+            :checked="selectedTimeSpan === shortcut.timeSpan"
+            @click="setTimeSpan(shortcut.timeSpan)"
+          >
+          <label
+            class="usa-radio__label"
+            :for="`${shortcut.timeSpan}-input`"
+          >
+            {{ shortcut.label }}
+          </label>
+        </div>
       </div>
     </div>
   </div>

wdfn-server/waterdata/templates/macros/components.html

@@ -2,7 +2,7 @@
     <div class="wdfn-component" data-component="hydrograph" data-siteno="{{ site_data.site_no }}"
          data-agency-cd="{{ site_data.agency_cd }}" data-sitename="{{ site_data.station_nm }}"
          data-parameter-code="{{ default_parameter_code }}">
-        <div id="time-download-graph-controls">
+        <div id="time-download-graph-controls-anchor">
             {% if iv_period_of_record or gw_period_of_record %}
                 <div class="short-cut-time-span-container"></div>
             {% endif %}