diff --git a/src/actions/navigation.js b/src/actions/navigation.js index 856534e18..63e8175f9 100644 --- a/src/actions/navigation.js +++ b/src/actions/navigation.js @@ -51,6 +51,7 @@ export const changePage = ({ } = {}) => (dispatch, getState) => { const oldState = getState(); // console.warn("CHANGE PAGE!", path, query, queryToDisplay, push); + console.warn("CHANGE PAGE!", path, query, queryToDisplay, push); /* set some defaults */ if (!path) path = window.location.pathname; // eslint-disable-line @@ -71,6 +72,7 @@ export const changePage = ({ } else { /* the path (dataset) remains the same... but the state may be modulated by the query */ const newState = createStateFromQueryOrJSONs({oldState, query}); + console.log(`navigation action. Colour by: ${oldState.controls.colorBy} -> ${newState.controls.colorBy}, Geo resolution: ${oldState.controls.geoResolution} -> ${newState.controls.geoResolution}`) dispatch({ type: URL_QUERY_CHANGE_WITH_COMPUTED_STATE, ...newState, diff --git a/src/components/map/map.js b/src/components/map/map.js index 8bfdceb59..83817572d 100644 --- a/src/components/map/map.js +++ b/src/components/map/map.js @@ -107,12 +107,14 @@ class Map extends React.Component { } } componentDidMount() { + console.log("MAP CDM") this.maybeChangeSize(this.props); this.maybeRemoveAllDemesAndTransmissions(this.props); /* geographic resolution just changed (ie., country to division), remove everything. this change is upstream of maybeDraw */ this.maybeUpdateDemesAndTransmissions(this.props); /* every time we change something like colorBy */ this.maybeInvalidateMapSize(this.props); } componentWillReceiveProps(nextProps) { + console.log("MAP CWRP"); this.modulateInterfaceForNarrativeMode(nextProps); this.maybeChangeSize(nextProps); this.maybeRemoveAllDemesAndTransmissions(nextProps); /* geographic resolution just changed (ie., country to division), remove everything. this change is upstream of maybeDraw */ @@ -120,6 +122,7 @@ class Map extends React.Component { this.maybeInvalidateMapSize(nextProps); } componentDidUpdate(prevProps) { + console.log("MAP CDU"); if (this.props.nodes === null) { return; } this.maybeCreateLeafletMap(); /* puts leaflet in the DOM, only done once */ this.maybeSetupD3DOMNode(); /* attaches the D3 SVG DOM node to the Leaflet DOM node, only done once */ @@ -174,6 +177,7 @@ class Map extends React.Component { } maybeDrawDemesAndTransmissions() { + console.log("maybeDrawDemesAndTransmissions()"); const mapIsDrawn = !!this.state.map; const allDataPresent = !!(this.props.metadata.loaded && this.props.treeLoaded && this.state.responsive && this.state.d3DOMNode); const demesTransmissionsNotComputed = !this.state.demeData && !this.state.transmissionData; @@ -261,14 +265,17 @@ class Map extends React.Component { // nextProps.datasetGuid && // this.props.datasetGuid !== nextProps.datasetGuid // and the dataset has changed */ - + console.log("maybeRemoveAllDemesAndTransmissions()"); const mapIsDrawn = !!this.state.map; const geoResolutionChanged = this.props.geoResolution !== nextProps.geoResolution; const dataChanged = (!nextProps.treeLoaded || this.props.treeVersion !== nextProps.treeVersion); + console.log(" mapIsDrawn: " + mapIsDrawn); + console.log(" geoResolutionChanged: " + geoResolutionChanged); + console.log(" dataChanged: " + dataChanged); if (mapIsDrawn && (geoResolutionChanged || dataChanged)) { this.state.d3DOMNode.selectAll("*").remove(); - + console.log("\tRemoving all demes & transmissions") /* clear references to the demes and transmissions d3 added */ this.setState({ boundsSet: false, @@ -331,14 +338,23 @@ class Map extends React.Component { * uses deme & transmission indicies for smart (quick) updating */ maybeUpdateDemesAndTransmissions(nextProps) { + console.log("maybeUpdateDemesAndTransmissions()"); + console.log(" state:"); + console.log(this.state); + if (!this.state.map || !this.props.treeLoaded) { return; } + const colorOrVisibilityChange = nextProps.visibilityVersion !== this.props.visibilityVersion || nextProps.colorScaleVersion !== this.props.colorScaleVersion; const haveData = nextProps.nodes && nextProps.visibility && nextProps.geoResolution && !!nextProps.nodeColors; + console.log({nodes: nextProps.nodes, visibility: nextProps.visibility, geoResolution: nextProps.geoResolution, nodeColors: nextProps.nodeColors}); + console.log("\tcolorOrVisibilityChange: " + colorOrVisibilityChange); + console.log("\thaveData: " + haveData); if (!(colorOrVisibilityChange && haveData)) { return; } timerStart("updateDemesAndTransmissions"); if (this.props.geoResolution !== nextProps.geoResolution) { + console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~"); // TEMPORARY -- LOTS OF COPY + PASTE HERE const { demeData, diff --git a/src/components/map/mapHelpers.js b/src/components/map/mapHelpers.js index 007b97eb4..8afa1f534 100644 --- a/src/components/map/mapHelpers.js +++ b/src/components/map/mapHelpers.js @@ -126,6 +126,8 @@ export const drawDemesAndTransmissions = ( numDateMax ) => { + console.log("drawDemesAndTransmissions()"); + // add transmission lines const transmissions = g.selectAll("transmissions") .data(transmissionData) diff --git a/src/components/map/mapHelpersLatLong.js b/src/components/map/mapHelpersLatLong.js index a7aa107e5..3bc8729ee 100644 --- a/src/components/map/mapHelpersLatLong.js +++ b/src/components/map/mapHelpersLatLong.js @@ -325,7 +325,7 @@ export const createDemeAndTransmissionData = ( metadata, map ) => { - + console.log("createDemeAndTransmissionData()"); /* walk through nodes and collect all data for demeData we have: @@ -437,6 +437,8 @@ export const updateDemeAndTransmissionDataColAndVis = (demeData, transmissionDat color, visible */ + console.log("updateDemeAndTransmissionDataColAndVis running. This can't recalculate transmissions in the event that the geo resolution has changed!!!!") + let newDemes; let newTransmissions; diff --git a/src/components/narrative/index.js b/src/components/narrative/index.js index 5e0771a99..8ac6a4f75 100644 --- a/src/components/narrative/index.js +++ b/src/components/narrative/index.js @@ -32,11 +32,15 @@ class Narrative extends React.Component { this.props.dispatch({type: TOGGLE_NARRATIVE, display: false}); }; this.changeAppStateViaBlock = (reactPageScrollerIdx) => { + console.log("\n****** NARRATIVE PAGE CHANGE **********\n\n") const idx = reactPageScrollerIdx-1; + console.log(idx + ": changeAppStateViaBlock()"); if (idx === this.props.blocks.length) { + console.warn("blowing away state"); this.setState({showingEndOfNarrativePage: true}); } else { if (this.state.showingEndOfNarrativePage) { + console.warn("blowing away state!"); this.setState({showingEndOfNarrativePage: false}); } this.props.dispatch(changePage({