diff --git a/package.json b/package.json index 30108d2..2882ca2 100644 --- a/package.json +++ b/package.json @@ -47,7 +47,6 @@ "raven-js": "^3.16.0", "react": "~16.14", "react-dom": "~16.14", - "react-emotion": "^8.0.12", "react-infinite": "^0.11.0", "react-list": "^0.8.6", "react-measure": "^2.0.2", diff --git a/src/CanExplorer.js b/src/CanExplorer.js index bf03440..e602dfb 100644 --- a/src/CanExplorer.js +++ b/src/CanExplorer.js @@ -23,7 +23,6 @@ import SaveDbcModal from './components/SaveDbcModal'; import LoadDbcModal from './components/LoadDbcModal'; import debounce from './utils/debounce'; import EditMessageModal from './components/EditMessageModal'; -import LoadingBar from './components/LoadingBar'; import { persistDbc, fetchPersistedDbc, @@ -75,7 +74,6 @@ export default class CanExplorer extends Component { seekTime: props.seekTime || 0, seekIndex: 0, maxByteStateChangeCount: 0, - isLoading: true, partsLoaded: 0, spawnWorkerHash: null, attemptingPandaConnection: false, @@ -400,9 +398,6 @@ export default class CanExplorer extends Component { spawnWorker(options) { let { currentParts, currentWorkers, loadingParts } = this.state; console.log('Checking worker for', currentParts); - if (!this.state.isLoading) { - this.setState({ isLoading: true }); - } if (loadingParts.length > 1) { // only 2 workers at a time pls return; @@ -427,11 +422,6 @@ export default class CanExplorer extends Component { break; } } - if (part === -1) { - console.log('Loading complete'); - this.setState({ isLoading: false }); - return; - } console.log('Starting worker for part', part); // options is object of {part, prevMsgEntries, spawnWorkerHash, prepend} options = options || {}; @@ -1294,9 +1284,6 @@ export default class CanExplorer extends Component { id="cabana" className={cx({ 'is-showing-modal': this.showingModal() })} > - {this.state.isLoading ? ( - - ) : null}
Comma Cabana diff --git a/src/__tests__/components/LoadingBar.test.js b/src/__tests__/components/LoadingBar.test.js deleted file mode 100644 index 12eb8bb..0000000 --- a/src/__tests__/components/LoadingBar.test.js +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react'; -import { shallow, mount, render } from 'enzyme'; -import LoadingBar from '../../components/LoadingBar'; - -test('LoadingBar successfully mounts with minimal default props', () => { - const component = shallow(); - expect(component.exists()).toBe(true); -}); diff --git a/src/components/AddSignals.js b/src/components/AddSignals.js index bdfaabc..50de3b9 100644 --- a/src/components/AddSignals.js +++ b/src/components/AddSignals.js @@ -131,15 +131,13 @@ export default class AddSignals extends Component { return signalStyles; } - componentWillReceiveProps(newProps) { - if (newProps.message.address !== this.props.message.address - || newProps.selectedMessageKey !== this.props.selectedMessageKey) { - const signals = newProps.message.frame ? newProps.message.frame.signals : {}; + componentDidUpdate(prevProps) { + if (prevProps.message.address !== this.props.message.address || + prevProps.selectedMessageKey !== this.props.selectedMessageKey) + { + const signals = this.props.message.frame ? this.props.message.frame.signals : {}; - this.setState( - { signals: this.copySignals(signals) }, - this.updateSignalStyles - ); + this.setState({ signals: this.copySignals(signals) }, this.updateSignalStyles); } } diff --git a/src/components/CanGraph.js b/src/components/CanGraph.js index 8261d19..f5ee33b 100644 --- a/src/components/CanGraph.js +++ b/src/components/CanGraph.js @@ -160,35 +160,31 @@ export default class CanGraph extends Component { this.view.run(); }, 250); - componentWillReceiveProps(nextProps) { - if ( - nextProps.dragPos - && JSON.stringify(nextProps.dragPos) !== JSON.stringify(this.props.dragPos) - ) { - this.updateStyleFromDragPos(nextProps.dragPos); - } else if (!nextProps.dragPos && this.state.plotInnerStyle !== null) { + componentDidUpdate(prevProps) { + if (this.props.dragPos && JSON.stringify(prevProps.dragPos) !== JSON.stringify(this.props.dragPos)) { + this.updateStyleFromDragPos(this.props.dragPos); + } else if (!this.props.dragPos && this.state.plotInnerStyle !== null) { this.setState({ plotInnerStyle: null }); } - if ( - this.props.messages !== nextProps.messages - || this.props.plottedSignal !== nextProps.plottedSignal - ) { - console.log('Calculating new data!'); - const data = this.getGraphData(nextProps); - // if ( - // data.series.length === this.state.data.series.length - // && data.firstRelTime === this.state.data.firstRelTime - // && data.lastRelTime === this.state.data.lastRelTime - // && JSON.stringify(nextProps.signalSpec) === JSON.stringify(this.props.signalSpec) - // ) { - // // do nothing, the data didn't *actually* change - // } else { - console.log('Inserting new data!'); + + if (prevProps.messages !== this.props.messages || prevProps.plottedSignal !== this.props.plottedSignal) { + const data = this.getGraphData(this.props); this.setState({ data }); - // } } - if (this.segmentIsNew(nextProps.segment)) { - this.setState({ spec: this.getGraphSpec(nextProps) }); + if (this.segmentIsNew(this.props.segment)) { + this.setState({ spec: this.getGraphSpec(this.props) }); + } + + if (this.view) { + if (this.props.segment.length > 0) { + // Set segmented domain + this.view.signal('segment', this.props.segment); + } else { + // Reset segment to full domain + this.view.signal('segment', 0); + } + this.view.signal('videoTime', this.props.currentTime); + this.view.runAsync(); } } @@ -218,20 +214,6 @@ export default class CanGraph extends Component { return false; } - componentDidUpdate(oldProps, oldState) { - if (this.view) { - if (this.props.segment.length > 0) { - // Set segmented domain - this.view.signal('segment', this.props.segment); - } else { - // Reset segment to full domain - this.view.signal('segment', 0); - } - this.view.signal('videoTime', this.props.currentTime); - this.view.runAsync(); - } - } - updateStyleFromDragPos({ left, top }) { const plotInnerStyle = { ...this.state.plotInnerStyle }; plotInnerStyle.left = left; diff --git a/src/components/CanGraphList.js b/src/components/CanGraphList.js index d9e7f4d..2222bf8 100644 --- a/src/components/CanGraphList.js +++ b/src/components/CanGraphList.js @@ -116,14 +116,14 @@ export default class CanGraphList extends Component { const { draggingSignal, graphToReceiveDrop } = this.state; const { messageId, signalUid } = plottedSignals[0]; const msg = this.props.messages[messageId]; + if (!this.plotListRef || !msg) { + return []; + } + const signal = Object.values(msg.frame.signals).find( (s) => s.uid === signalUid ); - if (!this.plotListRef) { - return []; - } - const isDragging = draggingSignal.signalUid === signalUid && draggingSignal.messageId === messageId; const canReceiveGraphDrop = graphToReceiveDrop diff --git a/src/components/CanLog.js b/src/components/CanLog.js index 6fb6b0f..0c65715 100644 --- a/src/components/CanLog.js +++ b/src/components/CanLog.js @@ -38,8 +38,8 @@ export default class CanLog extends Component { this.toggleSignalPlot = this.toggleSignalPlot.bind(this); } - componentWillReceiveProps(nextProps) { - if (nextProps.message && !this.props.message) { + componentDidUpdate(prevProps) { + if (!prevProps.message && this.props.message) { this.addDisplayedMessages(); } } diff --git a/src/components/Explorer.js b/src/components/Explorer.js index 496ce66..0649bf8 100644 --- a/src/components/Explorer.js +++ b/src/components/Explorer.js @@ -118,73 +118,60 @@ export default class Explorer extends Component { } } - componentWillReceiveProps(nextProps) { - const nextMessage = nextProps.messages[nextProps.selectedMessage]; + componentDidUpdate(prevProps) { + const prevMessage = prevProps.messages[prevProps.selectedMessage]; const curMessage = this.props.messages[this.props.selectedMessage]; - let { plottedSignals } = this.state; - if (Object.keys(nextProps.messages).length === 0 && Object.keys(this.props.messages).length !== 0) { + if (Object.keys(prevProps.messages).length === 0 && Object.keys(this.props.messages).length !== 0) { this.resetSegment(); } - if (nextMessage && nextMessage.frame && nextMessage !== curMessage) { - const nextSignalNames = Object.keys(nextMessage.frame.signals); - if (nextSignalNames.length === 0) { + if (curMessage && curMessage.frame && prevMessage !== curMessage) { + if (Object.keys(curMessage.frame.signals).length === 0) { this.setState({ shouldShowAddSignal: true }); } } // remove plottedSignals that no longer exist - plottedSignals = plottedSignals - .map((plot) => plot.filter(({ messageId, signalUid }, index) => { - const messageExists = !!nextProps.messages[messageId]; + const newPlottedSignals = this.state.plottedSignals + .map((plot) => plot.filter(({ messageId, signalUid }) => { + const messageExists = Boolean(this.props.messages[messageId]); let signalExists = true; if (messageExists) { - signalExists = Object.values( - nextProps.messages[messageId].frame.signals - ).some((signal) => signal.uid === signalUid); + signalExists = Object.values(this.props.messages[messageId].frame.signals) + .some((signal) => signal.uid === signalUid); } return messageExists && signalExists; })) .filter((plot) => plot.length > 0); - this.setState({ plottedSignals }); + if (this.state.plottedSignals.length !== newPlottedSignals.length) { + this.setState({ plottedSignals: newPlottedSignals }); + } - if ( - nextProps.selectedMessage - && nextProps.selectedMessage !== this.props.selectedMessage - ) { - // Update segment and seek state - // by finding a entry indices - // corresponding to old message segment/seek times. + if (this.props.selectedMessage && prevProps.selectedMessage !== this.props.selectedMessage) { + // Update segment and seek state by finding a entry indices corresponding to old message segment/seek times. const { segment, segmentIndices } = clipSegment( this.state.segment, this.state.segmentIndices, - nextMessage + curMessage ); - // console.log('componentWillReceiveProps', this.state.userSeekTime, '->', nextSeekTime); this.setState({ segment, segmentIndices, - userSeekIndex: nextProps.seekIndex, - // userSeekTime: nextSeekTime + userSeekIndex: this.props.seekIndex, }); } - if ( - nextMessage - && curMessage - && nextMessage.entries.length !== curMessage.entries.length - ) { + if (prevMessage && curMessage && prevMessage.entries.length !== curMessage.entries.length) { const { segment, segmentIndices } = clipSegment( this.state.segment, this.state.segmentIndices, - nextMessage + curMessage ); - // console.log(this.state.segment, '->', segment, segmentIndices); this.setState({ segment, segmentIndices }); } } diff --git a/src/components/GithubDbcList.js b/src/components/GithubDbcList.js index 4d14087..17e89ca 100644 --- a/src/components/GithubDbcList.js +++ b/src/components/GithubDbcList.js @@ -23,14 +23,6 @@ export default class GithubDbcList extends Component { this.updatePathQuery = this.updatePathQuery.bind(this); } - componentWillReceiveProps(nextProps) { - if (nextProps.repo !== this.props.repo) { - this.props.openDbcClient.list(nextProps.repo).then((paths) => { - this.setState({ paths, selectedPath: null }); - }); - } - } - componentDidMount() { this.props.openDbcClient.list(this.props.repo).then((paths) => { paths = paths.filter((path) => path.indexOf('.dbc') !== -1); @@ -38,6 +30,14 @@ export default class GithubDbcList extends Component { }); } + componentDidUpdate(prevProps) { + if (prevProps.repo !== this.props.repo) { + this.props.openDbcClient.list(this.props.repo).then((paths) => { + this.setState({ paths, selectedPath: null }); + }); + } + } + updatePathQuery(e) { this.setState({ pathQuery: e.target.value diff --git a/src/components/HLS.js b/src/components/HLS.js index 0e41ac1..15275d5 100644 --- a/src/components/HLS.js +++ b/src/components/HLS.js @@ -16,17 +16,14 @@ export default class HLS extends Component { onRestart: PropTypes.func }; - componentWillReceiveProps(nextProps) { - this.videoElement.playbackRate = nextProps.playbackSpeed; + componentDidUpdate(prevProps) { + this.videoElement.playbackRate = this.props.playbackSpeed; - if (nextProps.source !== this.props.source) { - this.loadSource(nextProps.source); + if (prevProps.source !== this.props.source) { + this.loadSource(this.props.source); } - if (nextProps.playing) { - if ( - this.videoElement - && (this.videoElement.paused || this.videoElement.currentTime < 0.01) - ) { + if (this.props.playing) { + if (this.videoElement && (this.videoElement.paused || this.videoElement.currentTime < 0.01)) { this.videoElement.play(); } } else { diff --git a/src/components/LoadDbcModal.js b/src/components/LoadDbcModal.js index d332a29..221f9ad 100644 --- a/src/components/LoadDbcModal.js +++ b/src/components/LoadDbcModal.js @@ -33,7 +33,7 @@ export default class LoadDbcModal extends Component { this.renderActions = this.renderActions.bind(this); } - componentWillMount() { + componentDidMount() { this.props.openDbcClient.getUserOpenDbcFork().then((userOpenDbcRepo) => { this.setState({ userOpenDbcRepo }); }); diff --git a/src/components/LoadingBar.js b/src/components/LoadingBar.js deleted file mode 100644 index f8477e5..0000000 --- a/src/components/LoadingBar.js +++ /dev/null @@ -1,35 +0,0 @@ -import styled, { keyframes } from 'react-emotion'; - -const frames = keyframes` - 0% { - transform: translateX(0) - } - to { - transform: translateX(-400px) - } -`; -const animationColor1 = 'rgba(74, 242, 161, 1.00)'; -const animationColor2 = 'rgba(140, 169, 197, 1.00)'; - -export default styled('div')` - display: block; - animation-name: ${frames}; - animation-duration: 2s; - animation-timing-function: linear; - animation-iteration-count: infinite; - background-color: ${animationColor1}; - background-image: linear-gradient( - to right, - ${animationColor2} 0, - ${animationColor2} 50%, - ${animationColor1} 50%, - ${animationColor1} 100% - ); - background-repeat: repeat-x; - background-size: 25pc 25pc; - width: 200%; - position: fixed; - top: 0; - left: 0; - height: 2; -`; diff --git a/src/components/MessageBytes.js b/src/components/MessageBytes.js index 2b73c63..99131b2 100644 --- a/src/components/MessageBytes.js +++ b/src/components/MessageBytes.js @@ -19,6 +19,7 @@ export default class MessageBytes extends Component { this.onVisibilityChange = this.onVisibilityChange.bind(this); this.onCanvasRefAvailable = this.onCanvasRefAvailable.bind(this); + this.updateCanvas = this.updateCanvas.bind(this); } shouldComponentUpdate(nextProps, nextState) { @@ -33,16 +34,11 @@ export default class MessageBytes extends Component { return nextProps.seekTime !== this.props.seekTime; } - componentWillReceiveProps(nextProps) { - if ( - this.props.seekIndex !== nextProps.seekIndex - || frameForTime(this.props.seekTime) !== frameForTime(nextProps.seekTime) - ) { - this.updateCanvas(nextProps); - } - - function frameForTime(t) { - return ~~(t * 60); + componentDidUpdate(prevProps) { + if (prevProps.seekIndex !== this.props.seekIndex || + Math.floor(prevProps.seekTime * 60) !== Math.floor(this.props.seekTime * 60)) + { + this.updateCanvas(); } } @@ -77,8 +73,8 @@ export default class MessageBytes extends Component { } } - updateCanvas(props) { - const { message, live, seekTime } = props; + updateCanvas() { + const { message, live, seekTime } = this.props; if (!this.canvas || message.entries.length === 0) return; let mostRecentMsg = message.entries[message.entries.length - 1]; diff --git a/src/components/Meta.js b/src/components/Meta.js index 44d557e..3a8d7e4 100644 --- a/src/components/Meta.js +++ b/src/components/Meta.js @@ -66,30 +66,21 @@ export default class Meta extends Component { window.clearInterval(this.lastSavedTimer); } - componentWillReceiveProps(nextProps) { - if ( - nextProps.lastSaved !== this.props.lastSaved - && typeof nextProps === 'object' - ) { - this.setState({ lastSaved: nextProps.dbcLastSaved.fromNow() }); + componentDidUpdate(prevProps) { + if (prevProps.lastSaved !== this.props.lastSaved) { + this.setState({ lastSaved: this.props.dbcLastSaved.fromNow() }); } - const nextMsgKeys = Object.keys(nextProps.messages); - if ( - JSON.stringify(nextMsgKeys) - !== JSON.stringify(Object.keys(this.props.messages)) - ) { - const orderedMessageKeys = this.sortMessages(nextProps.messages); + if (JSON.stringify(Object.keys(prevProps.messages)) !== JSON.stringify(Object.keys(this.props.messages))) { + const orderedMessageKeys = this.sortMessages(this.props.messages); this.setState({ hoveredMessages: [], orderedMessageKeys }); - } else if ( - this.state.orderedMessageKeys.length === 0 - || (!this.props.live - && this.props.messages - && nextProps.messages - && this.byteCountsDidUpdate(this.props.messages, nextProps.messages)) - ) { - const orderedMessageKeys = this.sortMessages(nextProps.messages); - this.setState({ orderedMessageKeys }); + } else if (this.state.orderedMessageKeys.length === 0 || (!this.props.live && prevProps.messages && + this.props.messages && this.byteCountsDidUpdate(prevProps.messages, this.props.messages))) + { + const orderedMessageKeys = this.sortMessages(this.props.messages); + if (orderedMessageKeys.length > 0) { + this.setState({ orderedMessageKeys }); + } } } diff --git a/src/components/RouteSeeker/RouteSeeker.js b/src/components/RouteSeeker/RouteSeeker.js index 52d2108..27b52b5 100644 --- a/src/components/RouteSeeker/RouteSeeker.js +++ b/src/components/RouteSeeker/RouteSeeker.js @@ -51,34 +51,31 @@ export default class RouteSeeker extends Component { this.executePlayTimer = this.executePlayTimer.bind(this); } - componentWillReceiveProps(nextProps) { - const { ratio } = this.state; - - if ( - JSON.stringify(this.props.segmentIndices) - !== JSON.stringify(nextProps.segmentIndices) - ) { + componentDidUpdate(prevProps) { + if (JSON.stringify(prevProps.segmentIndices) !== JSON.stringify(this.props.segmentIndices)) { this.setState({ seekedBarStyle: RouteSeeker.zeroSeekedBarStyle, markerStyle: RouteSeeker.hiddenMarkerStyle, ratio: 0 }); - } else if (nextProps.videoLength !== this.props.videoLength) { + } else if (this.props.videoLength && prevProps.videoLength !== this.props.videoLength) { // adjust ratio in line with new videoLength - const secondsSeeked = ratio * this.props.videoLength; - const newRatio = secondsSeeked / nextProps.videoLength; + const secondsSeeked = this.state.ratio * prevProps.videoLength; + const newRatio = secondsSeeked / this.props.videoLength; this.updateSeekedBar(newRatio); } - if (this.props.nearestFrameTime !== nextProps.nearestFrameTime) { - const newRatio = this.props.segmentProgress(nextProps.nearestFrameTime); + if (prevProps.nearestFrameTime !== this.props.nearestFrameTime) { + const newRatio = this.props.segmentProgress(this.props.nearestFrameTime); this.updateSeekedBar(newRatio); } - if (nextProps.playing && !this.state.isPlaying) { - this.onPlay(); - } else if (!nextProps.playing && this.state.isPlaying) { - this.onPause(); + if (prevProps.playing !== this.props.isPlaying) { + if (this.props.playing && !this.state.isPlaying) { + this.onPlay(); + } else if (!this.props.playing && this.state.isPlaying) { + this.onPause(); + } } } diff --git a/src/components/RouteVideoSync.js b/src/components/RouteVideoSync.js index 5473658..4508411 100644 --- a/src/components/RouteVideoSync.js +++ b/src/components/RouteVideoSync.js @@ -62,7 +62,7 @@ export default class RouteVideoSync extends Component { this.ratioTime = this.ratioTime.bind(this); } - componentWillMount() { + componentDidMount() { let videoApi = VideoApi(this.props.url, process.env.REACT_APP_VIDEO_CDN); videoApi.getQcameraStreamIndex().then(() => { this.setState({source: videoApi.getQcameraStreamIndexUrl()}); diff --git a/src/components/SaveDbcModal.js b/src/components/SaveDbcModal.js index 9be63fa..af7c221 100644 --- a/src/components/SaveDbcModal.js +++ b/src/components/SaveDbcModal.js @@ -37,7 +37,7 @@ export default class SaveDbcModal extends Component { this.renderActions = this.renderActions.bind(this); } - async componentWillMount() { + async componentDidMount() { const openDbcFork = await this.props.openDbcClient.getUserOpenDbcFork(); this.setState({ openDbcFork }); } diff --git a/src/components/SignalLegend/signalLegend.scss b/src/components/SignalLegend/signalLegend.scss index cedbfed..850041b 100644 --- a/src/components/SignalLegend/signalLegend.scss +++ b/src/components/SignalLegend/signalLegend.scss @@ -42,6 +42,13 @@ display: block; } } + &-colorbar { + display: block; + height: 100%; + left: 0; + position: absolute; + width: 1.5%; + } &-header { border-bottom: 1px solid transparent; cursor: pointer; diff --git a/src/components/SignalLegendEntry/ColorBar.js b/src/components/SignalLegendEntry/ColorBar.js deleted file mode 100644 index a1b5447..0000000 --- a/src/components/SignalLegendEntry/ColorBar.js +++ /dev/null @@ -1,12 +0,0 @@ -import styled from 'react-emotion'; - -// color bar on the left side of the signals legend -export default styled('div')` - display: block; - height: 100%; - left: 0; - position: absolute; - width: 1.5%; - opacity: ${({ isHighlighted }) => (isHighlighted ? 0.5 : 0.3)}; - background-color: rgb(${({ rgb }) => rgb.join(',')}); -`; diff --git a/src/components/SignalLegendEntry/index.js b/src/components/SignalLegendEntry/index.js index 0c9e71f..1e0511c 100644 --- a/src/components/SignalLegendEntry/index.js +++ b/src/components/SignalLegendEntry/index.js @@ -6,7 +6,6 @@ import cx from 'classnames'; import Signal from '../../models/can/signal'; import SignalForm from './SignalForm'; -import ColorBar from './ColorBar'; import FIELDS from './FIELDS'; export default class SignalLegendEntry extends Component { @@ -34,12 +33,12 @@ export default class SignalLegendEntry extends Component { }; } - componentWillReceiveProps(nextProps) { - if (!nextProps.signal.equals(this.props.signal)) { + componentDidUpdate(prevProps) { + if (!this.props.signal.equals(prevProps.signal)) { this.setState({ signalEdited: Object.assign( - Object.create(nextProps.signal), - nextProps.signal + Object.create(this.props.signal), + this.props.signal ) }); } @@ -115,13 +114,17 @@ export default class SignalLegendEntry extends Component { } = this.props; const expandedEntryClass = isExpanded ? 'is-expanded' : null; const plottedButtonClass = isPlotted ? 'button' : 'button--alpha'; + const colorBarStyle = { + opacity: isHighlighted ? 0.5 : 0.3, + backgroundColor: `rgb(${color.join(',')})`, + }; return (
this.props.onSignalHover(signal)} onMouseLeave={() => this.props.onSignalHoverEnd(signal)} > - +