index.js

/*
 * Hydrograph charting module.
 */
import {select} from 'd3-selection';
import {bindActionCreators} from 'redux';
import ReduxConnectVue from 'redux-connect-vue';
import {createStructuredSelector} from 'reselect';
import {createApp} from 'vue';

import config from 'ui/config.js';

import {link} from 'ui/lib/d3-redux';

import {drawInfoAlert} from 'd3render/alerts';

import {renderTimeSeriesUrlParams} from 'ml/url-params';

import {getInputsForRetrieval} from 'ml/selectors/hydrograph-state-selector';

import {retrieveGroundwaterLevelData} from 'ml/store/groundwater-level-field-visits';
import {retrieveHydrographData} from 'ml/store/hydrograph-data';
import {retrieveHydrographParameters} from 'ml/store/hydrograph-parameters';
import {setSelectedParameterCode, setCompareDataVisibility, setSelectedTimeSpan,
    setSelectedIVMethodID
} from 'ml/store/hydrograph-state';

import {Actions as floodDataActions} from 'ml/store/flood-data';

import {getPreferredIVMethodID, getTitle} from './selectors/time-series-data';
import {latestSelectedParameterValue} from 'ml/selectors/hydrograph-parameters-selector';
import {getDailyStatistics} from 'ml/components/hydrograph/selectors/statistics';

import {showDataIndicators} from './data-indicator';
import {initializeGraphBrush, drawGraphBrush} from './graph-brush';
import {drawTimeSeriesLegend} from './legend';
import {drawSelectActions} from './select-actions';
import {drawStatsTable} from './statistics-table';

import {initializeTimeSeriesGraph, drawTimeSeriesGraphData} from './time-series-graph';
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';

/* eslint-disable vue/one-component-per-file */

/*
 * Renders the hydrograph on the node element using the Redux store for state information. The siteno, latitude, and
 * longitude are required parameters. All others are optional and are used to set the initial state of the hydrograph.
 * @param {Redux store} store
 * @param {DOM node} node
 * @param {Object} - string properties to set initial state information. The property siteno is required
 * @param {Promise} loadPromise - will resolve when any data needed by this module
 *                                that is fetched by the caller has been fetched
 * */
export const attachToNode = function(store,
                                     node,
                                     {
                                         siteno,
                                         agencyCd,
                                         sitename,
                                         parameterCode,
                                         compare,
                                         period,
                                         startDT,
                                         endDT,
                                         timeSeriesId,
                                         showOnlyGraph = false,
                                         showMLName = false
                                     } = {}) {
    const nodeElem = select(node);

    if (!config.ivPeriodOfRecord && !config.gwPeriodOfRecord) {
        select(node).select('.select-actions-container').call(drawSelectActions, store, siteno, agencyCd);
        select(node).select('.graph-container').call(drawInfoAlert, {title: 'Hydrograph Alert', body: 'No IV or field visit data is available.'});
        return;
    }

    const initialLoadCompare = compare === 'true' || compare === true ? true : false;
    const thisShowOnlyGraph = showOnlyGraph === 'true' || showOnlyGraph === true ? true : false;
    const thisShowMLName = showMLName === 'true' || showMLName === true ? true : false;

    // Initialize all hydrograph state variables
    store.dispatch(setSelectedParameterCode(parameterCode));
    store.dispatch(setCompareDataVisibility(initialLoadCompare));
    if (period) {
        store.dispatch(setSelectedTimeSpan(period));
    } else if (startDT && endDT) {
        store.dispatch(setSelectedTimeSpan({
            start: startDT,
            end: endDT
        }));
    } else {
        store.dispatch(setSelectedTimeSpan(config.ivPeriodOfRecord && config.ivPeriodOfRecord[parameterCode] ?
            'P7D' : 'P1Y'));
    }

    // Fetch all data needed to render the hydrograph
    const fetchHydrographDataPromise = store.dispatch(retrieveHydrographData(siteno, agencyCd,
        getInputsForRetrieval(store.getState()), true));
    let fetchDataPromises = [fetchHydrographDataPromise];

    // if showing only graph make a call to retrieve all of the groundwater level data. Otherwise
    // this is done when retrieving all hydrograph parameter meta data.
    if (thisShowOnlyGraph) {
        if (config.gwPeriodOfRecord) {
            fetchDataPromises.push(store.dispatch(retrieveGroundwaterLevelData(siteno, agencyCd)));
        }
    } else {
        fetchDataPromises.push(store.dispatch(retrieveHydrographParameters(siteno, agencyCd)));
    }

    // Fetch flood levels
    if (config.ivPeriodOfRecord && config.GAGE_HEIGHT_PARAMETER_CODE in config.ivPeriodOfRecord) {
        const fetchFloodLevelsPromise =  store.dispatch(floodDataActions.retrieveFloodLevels(siteno));
        // If flood levels are to be shown then wait to render the hydrograph until those have been fetched.
        if (parameterCode === config.GAGE_HEIGHT_PARAMETER_CODE) {
            fetchDataPromises.push(fetchFloodLevelsPromise);
        }
    }

    // Render initial UI elements prior to completion of data fetching
    if (!showOnlyGraph) {
        const timeSpanShortcutsApp = createApp(TimeSpanShortcutsApp, {});
        timeSpanShortcutsApp.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');

        select(node).select('.select-actions-container').call(drawSelectActions, store, siteno, agencyCd);
    }

    const graphContainer = nodeElem.select('.graph-container');
    graphContainer.call(initializeTimeSeriesGraph, store, siteno, agencyCd, sitename, thisShowMLName, !thisShowOnlyGraph);
    showDataIndicators(true, store);
    if (!showOnlyGraph) {
        initializeTooltipCursorSlider(graphContainer, store);
        initializeGraphBrush(graphContainer, store);
    }
    const legendControlsContainer = graphContainer.append('div')
        .classed('ts-legend-controls-container', true);
    if (!showOnlyGraph) {
        // eslint-disable-next-line vue/one-component-per-file
        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');

        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');
    }

    // Once hydrograph data has been fetched, render the time series data.
    Promise.all(fetchDataPromises).then(() => {
        // selectedIVMethodID should be set regardless of whether we are showing only the graph but the preferred method ID
        // can not be determined until the data is fetched so that is done here.
        const initialIVMethodID = timeSeriesId || getPreferredIVMethodID(store.getState());
        store.dispatch(setSelectedIVMethodID(initialIVMethodID));

        showDataIndicators(false, store);
        graphContainer.call(drawTimeSeriesGraphData, store, !thisShowOnlyGraph);

        if (!thisShowOnlyGraph) {
            graphContainer
                .call(drawTooltipCursorSlider, store)
                .call(drawGraphBrush, store);
        }
        legendControlsContainer.call(drawTimeSeriesLegend, store);

        if (!thisShowOnlyGraph) {
            // eslint-disable-next-line vue/one-component-per-file
            const dataTablesApp = createApp(DataTablesApp, {});
            dataTablesApp.use(ReduxConnectVue, {
                store,
                mapDispatchToPropsFactory: (actionCreators) => (dispatch) => bindActionCreators(actionCreators, dispatch),
                mapStateToPropsFactory: createStructuredSelector
            });
            dataTablesApp.provide('store', store);
            // data for DownLoadData component
            dataTablesApp.provide('siteno', siteno);
            dataTablesApp.provide('agencyCd', agencyCd);
            dataTablesApp.provide('buttonSetName', 'data-tables-set');

            dataTablesApp.mount('#iv-data-table-container');


            renderTimeSeriesUrlParams(store);
            nodeElem.select('.daily-statistical-data')
                .call(link(store, drawStatsTable, createStructuredSelector({
                    statsData: getDailyStatistics(new Date),
                    latestValue: latestSelectedParameterValue,
                    parameterName: getTitle
                })));
        }
    })
    .catch(reason => {
        console.error(reason);
        throw reason;
    });
};