Skip to content
Snippets Groups Projects
Commit 2f0abacd authored by Bucknell, Mary S.'s avatar Bucknell, Mary S.
Browse files

Linting, remove method-picker library and update Changelog.

parent 8549b356
No related branches found
No related tags found
1 merge request!403Wdfn 761 - Use @wma/wdfn-vue-components to implement the USWDSCheckbox and USWDSAlert components
......@@ -25,6 +25,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
- Hydrograph Graph Brush is now implemented with a Vue component.
- Multiple parameter codes can only be selected for parameter codes with IV data available.
- Feature flags for hydrologic pages, state county pages, cameras groundwater levels and SIMS removed.
- The USWDS checkbox and alert components are now implemented in a separate library.
### Fixed
- Parameter codes with multiple methods will now show statistical data for each method available.
......
......@@ -33,7 +33,7 @@
"redux-thunk": "2.4.1",
"reselect": "4.1.6",
"vue": "3.2.37",
"wdfn-viz": "3.2.1"
"wdfn-viz": "3.2.0"
},
"devDependencies": {
"@babel/preset-env": "7.18.6",
......@@ -3322,9 +3322,9 @@
}
},
"node_modules/@uswds/uswds": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/@uswds/uswds/-/uswds-3.0.2.tgz",
"integrity": "sha512-I3as7QlcCN9hOya9P8mB/Z3HKZOOueT45fDmJ2r+LnkmhxCAkTLSsqmiFsXTcHNcbcllQSbGtpYsBf0/nOYlWw==",
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/@uswds/uswds/-/uswds-3.0.1.tgz",
"integrity": "sha512-O2WHvWjKJwy10UJV9srimCBFMHenvnWDtP3LelMpTCV2AxgO1j/zYPn2SWpK116X/SuiIZk9hycbBroJQ6eH4w==",
"dependencies": {
"classlist-polyfill": "1.0.3",
"domready": "1.0.8",
......@@ -3568,21 +3568,6 @@
"node": ">= 16"
}
},
"node_modules/@wma/wdfn-vue-components/node_modules/@uswds/uswds": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/@uswds/uswds/-/uswds-3.0.1.tgz",
"integrity": "sha512-O2WHvWjKJwy10UJV9srimCBFMHenvnWDtP3LelMpTCV2AxgO1j/zYPn2SWpK116X/SuiIZk9hycbBroJQ6eH4w==",
"dependencies": {
"classlist-polyfill": "1.0.3",
"domready": "1.0.8",
"object-assign": "4.1.1",
"receptor": "1.0.0",
"resolve-id-refs": "0.1.0"
},
"engines": {
"node": ">= 4"
}
},
"node_modules/abab": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
......@@ -17100,11 +17085,11 @@
}
},
"node_modules/wdfn-viz": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/wdfn-viz/-/wdfn-viz-3.2.1.tgz",
"integrity": "sha512-pQQHfHsa++sfj9AQVK08xXmm0gTkmOBMBuEO4Nq9HhFw0v08wr6DuD1F275b7rR6Sp7LTEX+UkDBU24bQLh7Ag==",
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/wdfn-viz/-/wdfn-viz-3.2.0.tgz",
"integrity": "sha512-Lwda3jg8efG/K9v8G1+ybvDOyQgwDU92CXFpsE0oau99yr+Rkj6XImybKXea9P4QFMo2Ar0ff7paS5MoQh+zvA==",
"dependencies": {
"@uswds/uswds": "3.0.2"
"@uswds/uswds": "3.0.1"
},
"engines": {
"node": ">= 12"
......@@ -19790,9 +19775,9 @@
}
},
"@uswds/uswds": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/@uswds/uswds/-/uswds-3.0.2.tgz",
"integrity": "sha512-I3as7QlcCN9hOya9P8mB/Z3HKZOOueT45fDmJ2r+LnkmhxCAkTLSsqmiFsXTcHNcbcllQSbGtpYsBf0/nOYlWw==",
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/@uswds/uswds/-/uswds-3.0.1.tgz",
"integrity": "sha512-O2WHvWjKJwy10UJV9srimCBFMHenvnWDtP3LelMpTCV2AxgO1j/zYPn2SWpK116X/SuiIZk9hycbBroJQ6eH4w==",
"requires": {
"classlist-polyfill": "1.0.3",
"domready": "1.0.8",
......@@ -19986,20 +19971,6 @@
"requires": {
"@uswds/uswds": "3.0.1",
"vue": "3.2.37"
},
"dependencies": {
"@uswds/uswds": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/@uswds/uswds/-/uswds-3.0.1.tgz",
"integrity": "sha512-O2WHvWjKJwy10UJV9srimCBFMHenvnWDtP3LelMpTCV2AxgO1j/zYPn2SWpK116X/SuiIZk9hycbBroJQ6eH4w==",
"requires": {
"classlist-polyfill": "1.0.3",
"domready": "1.0.8",
"object-assign": "4.1.1",
"receptor": "1.0.0",
"resolve-id-refs": "0.1.0"
}
}
}
},
"abab": {
......@@ -30354,11 +30325,11 @@
}
},
"wdfn-viz": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/wdfn-viz/-/wdfn-viz-3.2.1.tgz",
"integrity": "sha512-pQQHfHsa++sfj9AQVK08xXmm0gTkmOBMBuEO4Nq9HhFw0v08wr6DuD1F275b7rR6Sp7LTEX+UkDBU24bQLh7Ag==",
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/wdfn-viz/-/wdfn-viz-3.2.0.tgz",
"integrity": "sha512-Lwda3jg8efG/K9v8G1+ybvDOyQgwDU92CXFpsE0oau99yr+Rkj6XImybKXea9P4QFMo2Ar0ff7paS5MoQh+zvA==",
"requires": {
"@uswds/uswds": "3.0.2"
"@uswds/uswds": "3.0.1"
}
},
"webidl-conversions": {
......@@ -104,6 +104,6 @@
"redux-thunk": "2.4.1",
"reselect": "4.1.6",
"vue": "3.2.37",
"wdfn-viz": "3.2.1"
"wdfn-viz": "3.2.0"
}
}
/**
* Pick list for methods module
*/
import {select} from 'd3-selection';
import {appendInfoTooltip} from 'd3render/info-tooltip';
import {setSelectedIVMethodID} from 'ml/store/hydrograph-state';
/**
* Draw the method picker. Remove the previous method picker and determine whether a new method
* picker is needed before rendering the picker within the expanion constainer for the selected
* parameterCode.
* @param {D3 selection} container - An HTML element to serve as the base for attaching other elements.
* @param {Object} sortedIVMethods - An object containing the parameter code and the list of sorted methods to be
* used for rendering.
* @param {Redux store} store - A complex JavaScript object that maps the current state of the application.
*/
export const drawMethodPicker = function(container, sortedIVMethods, store) {
container.select('#primary-sampling-method-row').remove();
if (!sortedIVMethods || sortedIVMethods.methods.length < 2) {
return;
}
const hasMethodsWithNoPointsInTimeRange = sortedIVMethods.methods.filter(method => method.pointCount === 0).length !== 0;
// Find parameter expansion container
const rowContainer = container.select(`#expansion-container-row-${sortedIVMethods.parameterCode}`);
const gridRowSamplingMethodSelection = rowContainer.append('div')
.attr('id', 'primary-sampling-method-row')
.attr('class', 'grid-container grid-row-inner');
const methodSelectionContainer = gridRowSamplingMethodSelection.append('div')
.attr('class', 'grid-row method-selection-row');
const pickerContainer = methodSelectionContainer.append('div')
.attr('id', 'ts-method-select-container');
pickerContainer.append('label')
.attr('class', 'usa-label')
.attr('for', 'method-picker')
.text('Sampling Methods/Sub-locations:')
.call(appendInfoTooltip, 'The names used in dropdown menu are often specific to a particular monitoring ' +
'location and describe sampling details used to distinguish time-series of the same type--examples ' +
'include variations in physical location and sensor type.');
if (hasMethodsWithNoPointsInTimeRange) {
pickerContainer.append('span')
.attr('id', 'no-data-points-note')
.text(' note - some methods/sub-locations are disabled, because there are no data points for these in ' +
'your selected time span');
}
const picker = pickerContainer.append('select')
.attr('class', 'usa-select ')
.attr('id', 'method-picker')
.on('change', function(event) {
event.stopPropagation();
store.dispatch(setSelectedIVMethodID(select(this).property('value')));
});
sortedIVMethods.methods.forEach((method, index) => {
picker.append('option')
.text(`${method.methodDescription}`)
.attr('class', 'method-option')
.attr('selected', index === 0 ? true : null)
.attr('value', method.methodID)
.attr('disabled', method.pointCount === 0 ? true : null);
});
};
import {select} from 'd3-selection';
import * as utils from 'ui/utils';
import {configureStore} from 'ml/store';
import {getSortedIVMethods} from './selectors/time-series-data';
import {drawMethodPicker} from './method-picker';
import {TEST_PRIMARY_IV_DATA} from './mock-hydrograph-state';
describe('monitoring-location/components/hydrograph/method-picker', () => {
utils.mediaQuery = jest.fn().mockReturnValue(true);
describe('drawMethodPicker', () => {
const TEST_STATE = {
hydrographData: {
primaryIVData: TEST_PRIMARY_IV_DATA
}
};
let div;
beforeEach(() => {
div = select('body').append('div');
div.append('div').attr('id', 'expansion-container-row-72019');
});
afterEach(() => {
div.remove();
});
it('Creates a picker and sets the currentMethodID to preferred method id', () => {
let store = configureStore(TEST_STATE);
div.call(drawMethodPicker, getSortedIVMethods('primary')(store.getState()), store);
expect(div.select('select').property('value')).toEqual('90649');
});
it('Expects if the data has only one method then the picker will be not be drawn', () => {
let store = configureStore({
...TEST_STATE,
hydrographData: {
primaryIVData: {
...TEST_STATE.hydrographData.primaryIVData,
values: {
'90649': {
...TEST_PRIMARY_IV_DATA.values['90649']
}
}
}
}
});
div.call(drawMethodPicker, getSortedIVMethods('primary')(store.getState()), store);
expect(div.select('#primary-sampling-method-row').size()).toBe(0);
});
it('Expects the methods will be in order from most to least points', () => {
let store = configureStore({
...TEST_STATE
});
div.call(drawMethodPicker, getSortedIVMethods('primary')(store.getState()), store);
const allOptionElements = div.selectAll('option');
expect(allOptionElements['_groups'][0][0].getAttribute('value')).toBe('90649');
expect(allOptionElements['_groups'][0][1].getAttribute('value')).toBe('252055');
});
it('Expects that there will be a message if some of the methods have no points', () => {
let store = configureStore({
...TEST_STATE
});
div.call(drawMethodPicker, getSortedIVMethods('primary')(store.getState()), store);
expect(div.select('#no-data-points-note')['_groups'][0][0].innerHTML).toContain('some methods/sub-locations are disabled');
});
it('Expects that there will be a tooltip message', () => {
let store = configureStore({
...TEST_STATE
});
div.call(drawMethodPicker, getSortedIVMethods('primary')(store.getState()), store);
expect(div.select('.usa-tooltip__body')['_groups'][0][0].innerHTML).toContain('The names used in ' +
'dropdown menu are often specific to a particular monitoring location and describe sampling ' +
'details used to distinguish time-series of the same type--examples include variations in physical' +
' location and sensor type.');
});
it('Expects that there will NOT be a message all of the methods have points', () => {
let store = configureStore({
...TEST_STATE,
hydrographData: {
primaryIVData: {
...TEST_STATE.hydrographData.primaryIVData,
values: {
'90649': {
...TEST_PRIMARY_IV_DATA.values['90649']
},
'252055': {
points: [
{value: '25.6', qualifiers: ['E'], dateTime: 1600618500000},
{value: '26.5', qualifiers: ['P'], dateTime: 1600619400000},
{value: '25.9', qualifiers: ['P'], dateTime: 1600620300000}
],
method: {
methodDescription: 'From multiparameter sonde',
methodID: '252055'
}
}
}
}
}
});
div.call(drawMethodPicker, getSortedIVMethods('primary')(store.getState()), store);
expect(div.select('#no-data-points-note').size()).toBe(0);
});
});
});
......@@ -25,7 +25,7 @@
:parameter-code="parameter.parameterCode"
:is-expanded="parameter.parameterCode === expandedParameterCode"
:id-for-expansion-row="`expansion-row-${parameter.parameterCode}`"
@toggleExpansionRow="toggleExpansionRow"
@toggle-expansion-row="toggleExpansionRow"
/>
</div>
<div class="usa-radio">
......@@ -65,14 +65,14 @@
<MethodPicker
v-if="sortedIvMethods && parameter.parameterCode === sortedIvMethods.parameterCode && sortedIvMethods.methods.length > 1"
:sorted-iv-methods="sortedIvMethods"
@selectMethod="updateSelectedMethod"
@select-method="updateSelectedMethod"
/>
<SecondaryParameterControls
v-if="enabledForSecondaryParameter(parameter.parameterCode)"
:parameter-list="secondaryParameterButtonList"
:is-second-parameter-options-checked="isSecondParameterOptionsChecked"
@setCheckBoxStatus="setCheckBoxStatus"
@set-check-box-status="setCheckBoxStatus"
/>
</div>
</div>
......
......@@ -53,6 +53,7 @@ export default {
required: true
}
},
emits: ['setCheckBoxStatus'],
setup(props, {emit}) {
const reduxStore = inject('store');
const siteNumber = inject('siteno');
......
......@@ -59,6 +59,7 @@ export default {
default: ''
}
},
emits: ['updateValue'],
setup(props, {emit}) {
const updateValue = function(value) {
emit('updateValue', value);
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment