diff --git a/frontend/app/components/Session_/Network/Network.js b/frontend/app/components/Session_/Network/Network.js index 31b17e477..897e77752 100644 --- a/frontend/app/components/Session_/Network/Network.js +++ b/frontend/app/components/Session_/Network/Network.js @@ -1,5 +1,5 @@ import cn from 'classnames'; -import { connectPlayer, jump } from 'Player'; +import { connectPlayer, jump, pause } from 'Player'; import { QuestionMarkHint, Popup, Tabs, Input } from 'UI'; import { getRE } from 'App/utils'; import { TYPES } from 'Types/session/resource'; @@ -131,6 +131,7 @@ export function renderDuration(r) { domContentLoadedTime: state.domContentLoadedTime, loadTime: state.loadTime, time: state.time, + playing: state.playing, domBuildingTime: state.domBuildingTime, fetchPresented: state.fetchList.length > 0, })) @@ -138,6 +139,13 @@ export default class Network extends React.PureComponent { state = { filter: '', activeTab: ALL, + currentIndex: 0 + } + + onRowClick = (e, index) => { + pause(); + jump(e.time); + this.setState({ currentIndex: index }) } onTabClick = activeTab => this.setState({ activeTab }) @@ -151,9 +159,10 @@ export default class Network extends React.PureComponent { loadTime, domBuildingTime, fetchPresented, - time + time, + playing } = this.props; - const { filter, activeTab } = this.state; + const { filter, activeTab, currentIndex } = this.state; const filterRE = getRE(filter, 'i'); let filtered = resources.filter(({ type, name }) => filterRE.test(name) && (activeTab === ALL || type === TAB_TO_TYPE_MAP[ activeTab ])); @@ -200,7 +209,8 @@ export default class Network extends React.PureComponent { fetchPresented = { fetchPresented } resourcesSize={resourcesSize} transferredSize={transferredSize} - onRowClick={ (e, index) => { jump(e.time); } } + onRowClick={ this.onRowClick } + currentIndex={playing ? null : currentIndex} /> {/* diff --git a/frontend/app/components/Session_/Network/NetworkContent.js b/frontend/app/components/Session_/Network/NetworkContent.js index 7eeebf538..e4988d3e4 100644 --- a/frontend/app/components/Session_/Network/NetworkContent.js +++ b/frontend/app/components/Session_/Network/NetworkContent.js @@ -157,13 +157,14 @@ export default class NetworkContent extends React.PureComponent { additionalHeight = 0, resourcesSize, transferredSize, - time + time, + currentIndex } = this.props; const { filter, activeTab } = this.state; const filterRE = getRE(filter, 'i'); let filtered = resources.filter(({ type, name }) => filterRE.test(name) && (activeTab === ALL || type === TAB_TO_TYPE_MAP[ activeTab ])); - const lastIndex = filtered.filter(item => item.time <= time).length - 1; + const lastIndex = currentIndex || filtered.filter(item => item.time <= time).length - 1; const referenceLines = []; if (domContentLoadedTime != null) { diff --git a/frontend/app/components/shared/Results/NetworkTab/NetworkTab.js b/frontend/app/components/shared/Results/NetworkTab/NetworkTab.js index fe2ea0ac3..8a85007fb 100644 --- a/frontend/app/components/shared/Results/NetworkTab/NetworkTab.js +++ b/frontend/app/components/shared/Results/NetworkTab/NetworkTab.js @@ -80,12 +80,12 @@ function NetworkTab(props) { onRowClick={ (e, index) => { setCurrent(e); setCurrentIndex(index)} } additionalHeight={vh} fetchPresented = { run.fetchPresented } - loadTime = { run.loadTime } domBuildingTime = { run.domBuildingTime } resourcesSize = { run.resourcesSize } transferredSize = { run.transferredSize } domContentLoadedTime = { run.domContentLoadedTime } + currentIndex={currentIndex} /> )