index.js

/*
 * Hydrograph charting module.
 */
import {select} from 'd3-selection';

import config from 'ui/config.js';

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

import {createStructuredSelector} from 'reselect';

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 {getStatisticsData, getLatestPrimaryValue} from 'ml/selectors/hydrograph-data-selector';

import {showDataIndicators} from './data-indicator';
import {drawDataTables} from './data-table';
import {initializeGraphBrush, drawGraphBrush} from './graph-brush';
import {drawGraphControls} from './graph-controls';
import {drawTimeSeriesLegend} from './legend';
import {drawSelectionList} from './parameters';
import {drawSelectActions} from './select-actions';
import {drawStatsTable} from './statistics';
import {drawTimeSpanShortcutButtons} from './time-span-shortcuts';
import {initializeTimeSeriesGraph, drawTimeSeriesGraphData} from './time-series-graph';
import {initializeTooltipCursorSlider, drawTooltipCursorSlider} from './tooltip';

/*
 * 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())));
    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) {
        nodeElem.select('.short-cut-time-span-container').call(drawTimeSpanShortcutButtons, store, siteno, agencyCd);
        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) {
        legendControlsContainer.call(drawGraphControls, store, siteno);
        nodeElem.select('.select-time-series-container')
            .call(drawSelectionList, store, siteno, agencyCd);
    }

    // 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) {
            nodeElem.select('#iv-data-table-container')
                .call(drawDataTables, store, siteno, agencyCd);

            renderTimeSeriesUrlParams(store);
            nodeElem.select('#stats-container')
                .call(link(store, drawStatsTable, createStructuredSelector({
                    stats: getStatisticsData,
                    latestValue: getLatestPrimaryValue,
                    parameterName: getTitle
                })));
        }
    })
    .catch(reason => {
        console.error(reason);
        throw reason;
    });
};