Moved the graph-controls Vue

to replace the graph-controls javascript

assets/.babelrc

-{
-  "presets": [
-    [
-      "@babel/preset-env"
-    ]
-  ]
-}

assets/babel.config.js

+module.exports = {
+  "presets": [
+    "@babel/preset-env"
+  ]
+};

assets/jest.config.js

 module.exports = {
     verbose: true,
     transform: {
-        '^.+\\.js$': 'buble-jest',
+        '^.+\\.js$': 'babel-jest',
         '^.+\\.(vue)$': '@vue/vue3-jest'
     },
     collectCoverageFrom: [
@@ -28,7 +28,8 @@ module.exports = {
         '^network/(.*)$': '<rootDir>src/scripts/network/$1'
     },
     transformIgnorePatterns: [
-        'node_modules/(?!(d3-format|d3-array|d3-scale|d3-shape|d3-time|d3-time-format|d3-path|d3-selection|d3-brush|d3-axis|d3-transition|bisect|internmap)/)'
+        'node_modules/(?!(d3|d3-format|d3-array|d3-scale|d3-shape|d3-time|d3-time-format|d3-path|d3-selection|d3-brush|d3-axis|d3-transition|internmap)/)'
     ],
-    testEnvironment: 'jsdom'
+    testEnvironment: 'jsdom',
+    setupFilesAfterEnv: [require.resolve('regenerator-runtime/runtime')]
 };

assets/package.json

@@ -15,7 +15,7 @@
     "build:css:network": "sass --load-path node_modules/leaflet/dist --load-path node_modules/leaflet-gesture-handling/dist --load-path node_modules/wdfn-viz/dist/sass --load-path node_modules/@uswds/uswds/src/stylesheets --load-path node_modules/@uswds/uswds/packages src/styles/network.scss dist/network.css && postcss dist/network.css --map -o dist/network.css",
     "build:fonts": "mkdir -p dist/fonts && cp -r node_modules/wdfn-viz/dist/fonts/* dist/fonts",
     "build:images": "mkdir -p dist/img && mkdir -p dist/images && cp -r node_modules/wdfn-viz/dist/img/* dist/img && cp -r node_modules/leaflet/dist/images/* dist/images && cp -r src/img/* dist/img",
-    "build:js": "rollup -c --environment NODE_ENV:production && mkdir -p dist/scripts",
+    "build:js": "vite build --mode production",
     "build:wdfnviz": "mkdir -p dist/scripts && cp node_modules/wdfn-viz/dist/wdfnviz.js dist/scripts && cp node_modules/wdfn-viz/dist/wdfnviz.css dist",
     "build:uswdsjs": "mkdir -p dist/scripts && cp node_modules/@uswds/uswds/dist/js/uswds.min.js dist/scripts && cp node_modules/@uswds/uswds/dist/js/uswds-init.min.* dist/scripts",
     "build:autotrack": "terser --output dist/autotrack.js node_modules/autotrack/autotrack.js",
@@ -29,8 +29,8 @@
     "watch:css": "nodemon -w src/styles -e scss -x \"npm run build:css\"",
     "watch:fonts": "nodemon -w node_modules/uswds/src/fonts -x \"npm run build:fonts\"",
     "watch:images": "nodemon -w src/img -x \"npm run build:images\"",
-    "watch:js": "mkdir -p dist/scripts && npm run build:wdfnviz && npm run build:uswdsjs && rollup -c --watch",
-    "buildvite": "vite build --mode development"
+    "watch:uswds": "npm run build:wdfnviz && npm run build:uswdsjs",
+    "watch:js": "mkdir -p dist/scripts && vite build --watch --mode development"
   },
   "engines": {
     "node": "16.15.0"
@@ -48,16 +48,11 @@
   "devDependencies": {
     "@babel/preset-env": "7.18.2",
     "@rollup/plugin-alias": "3.1.9",
-    "@rollup/plugin-buble": "0.21.3",
-    "@rollup/plugin-commonjs": "22.0.0",
-    "@rollup/plugin-json": "4.1.0",
-    "@rollup/plugin-node-resolve": "13.3.0",
     "@rollup/plugin-replace": "4.0.0",
     "@vitejs/plugin-vue": "2.3.3",
     "@vue/test-utils": "2.0.0",
     "@vue/vue3-jest": "27.0.0",
     "autoprefixer": "10.4.7",
-    "buble": "0.20.0",
     "buble-jest": "1.0.1",
     "concat": "1.0.3",
     "eslint": "8.16.0",
@@ -74,8 +69,8 @@
     "postcss-cli": "9.1.0",
     "postcss-csso": "6.0.0",
     "postcss-flexbugs-fixes": "5.0.2",
+    "regenerator-runtime": "0.13.9",
     "rollup": "2.74.1",
-    "rollup-plugin-terser": "7.0.2",
     "sass": "1.52.1",
     "sinon": "14.0.0",
     "stylelint": "14.8.5",

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

 <template>
-  <div>My Test GraphControls</div>
-  <GraphControls/>
+  <div class="graph-controls-container">
+    <GraphControls/>
+  </div>
 </template>
 
 <script>

assets/src/scripts/monitoring-location/components/hydrograph/components/graph-controls.test.js

@@ -3,7 +3,7 @@ import mockConsole from 'jest-mock-console';
 import {bindActionCreators} from 'redux';
 import ReduxConnectVue from 'redux-connect-vue';
 import {createStructuredSelector} from 'reselect';
-import {mount, flushPromises} from '@vue/test-utils';
+import {mount} from '@vue/test-utils';
 
 import * as utils from 'ui/utils';
 
@@ -14,7 +14,6 @@ import {TEST_CURRENT_TIME_RANGE} from '../mock-hydrograph-state';
 import * as dataIndicator from '../data-indicator';
 
 import GraphControls from './graph-controls.vue';
-import {show} from "list.js";
 
 describe('monitoring-location/components/hydrograph/components/graph-controls', () => {
     utils.mediaQuery = jest.fn().mockReturnValue(true);

assets/src/scripts/monitoring-location/components/hydrograph/components/graph-controls.vue

@@ -13,7 +13,7 @@
       class="usa-checkbox__label"
       for="vue-compare-timeseries"
     >
-      Vue compare
+      Compare to last year
     </label>
   </div>
   <div class="usa-checkbox">
@@ -30,7 +30,7 @@
       class="usa-checkbox__label"
       for="vue-median-timeseries"
     >
-      Vue median
+      Display median
     </label>
   </div>
 </template>
@@ -105,7 +105,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-
-</style>
\ No newline at end of file

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

@@ -118,15 +118,6 @@ export const attachToNode = function(store,
     if (!showOnlyGraph) {
         nodeElem.select('.short-cut-time-span-container').call(drawTimeSpanShortcutButtons, store, siteno, agencyCd);
         select(node).select('.select-actions-container').call(drawSelectActions, store, siteno, agencyCd);
-        const app = createApp(GraphControlsApp, {});
-        app.use(ReduxConnectVue, {
-            store,
-            mapDispatchToPropsFactory: (actionCreators) => (dispatch) => bindActionCreators(actionCreators, dispatch),
-            mapStateToPropsFactory: createStructuredSelector
-        });
-        app.provide('store', store);
-        app.provide('siteno', siteno);
-        app.mount('#vue-graph-controls');
     }
 
     const graphContainer = nodeElem.select('.graph-container');
@@ -139,7 +130,16 @@ export const attachToNode = function(store,
     const legendControlsContainer = graphContainer.append('div')
         .classed('ts-legend-controls-container', true);
     if (!showOnlyGraph) {
-        legendControlsContainer.call(drawGraphControls, store, siteno);
+        const graphControlsApp = createApp(GraphControlsApp, {});
+        graphControlsApp.use(ReduxConnectVue, {
+            store,
+            mapDispatchToPropsFactory: (actionCreators) => (dispatch) => bindActionCreators(actionCreators, dispatch),
+            mapStateToPropsFactory: createStructuredSelector
+        });
+        graphControlsApp.provide('store', store);
+        graphControlsApp.provide('siteno', siteno);
+        graphControlsApp.mount('.ts-legend-controls-container');
+
         nodeElem.select('.select-time-series-container')
             .call(drawSelectionList, store, siteno, agencyCd);
     }

assets/src/styles/components/hydrograph/_app.scss

@@ -281,10 +281,6 @@
     .graph-controls-container {
       display: inline-block;
 
-      li {
-        margin-bottom: 10px;
-      }
-
       @include uswds.at-media('tablet') {
         position: absolute;
         top: 0;

assets/vite.config.js

@@ -2,7 +2,6 @@ const path = require('path');
 
 const alias = require('@rollup/plugin-alias');
 const replace = require('@rollup/plugin-replace');
-const resolve = require('@rollup/plugin-node-resolve');
 const vue = require('@vitejs/plugin-vue');
 const {defineConfig} = require('vite');
 
@@ -42,14 +41,11 @@ export default defineConfig(({command, mode}) => {
             sourcemap: mode === 'development',
             rollupOptions: {
                 input: {
-                    monitoringLocation: 'src/scripts/monitoring-location/index.js',
+                    monitoringLocation: 'src/scripts/monitoring-location/index.js'
                 },
                 plugins: [
                     alias({
-                        entries: entries,
-                        customResolver: resolve.nodeResolve({
-                            extensions: ['.js', '.json']
-                        })
+                        entries: entries
                     }),
                     replace({
                         preventAssignment: true,