From 9a9c5a229b6ede20f70e4ccbeeac76ae5827a2e7 Mon Sep 17 00:00:00 2001 From: Pritesh Nandgaonkar Date: Fri, 1 Mar 2019 04:45:58 -0800 Subject: [PATCH] Cold start filter Summary: This diff adds filter for cold start in the Images plugin. I also moved the Loading indicator as a sibling of filter bar, because it used to show up when the images to display were zero. Earlier zero images case used to happen only at the start, but now with the options to apply filter, this case may happen often, so user should have access to filter bar to change the filters in order to reset it. Look at the video for more information Reviewed By: danielbuechele Differential Revision: D14269064 fbshipit-source-id: cbab5a62fd62c5a98f8728c33c1a0dbfc6f454cc --- src/plugins/fresco/ImagesCacheOverview.js | 76 +++++++++++++---------- src/plugins/fresco/index.js | 48 +++++++++++--- 2 files changed, 85 insertions(+), 39 deletions(-) diff --git a/src/plugins/fresco/ImagesCacheOverview.js b/src/plugins/fresco/ImagesCacheOverview.js index 1f9d352f5..6ffb30c3d 100644 --- a/src/plugins/fresco/ImagesCacheOverview.js +++ b/src/plugins/fresco/ImagesCacheOverview.js @@ -19,6 +19,7 @@ import { LoadingIndicator, styled, Select, + Checkbox, } from 'flipper'; import type {ImagesMap} from './ImagePool.js'; import {clipboard} from 'electron'; @@ -33,6 +34,8 @@ function formatKB(bytes: number) { } type ImagesCacheOverviewProps = { + onColdStartChange: (checked: boolean) => void, + coldStartFilter: boolean, surfaceOptions: {[key: string]: string}, selectedSurface: string, onChangeSurface: (key: string) => void, @@ -60,6 +63,12 @@ const StyledSelect = styled(Select)(props => ({ height: '100%', })); +const StyledCheckbox = styled(Checkbox)(props => ({ + marginLeft: 6, + marginRight: 6, + height: '100%', +})); + export default class ImagesCacheOverview extends PureComponent< ImagesCacheOverviewProps, ImagesCacheOverviewState, @@ -119,14 +128,6 @@ export default class ImagesCacheOverview extends PureComponent< (c, cacheInfo) => c + cacheInfo.imageIds.length, 0, ) > 0; - if (!hasImages) { - return ( - - - - ); - } - return ( + + Show ColdStart Images - - {this.props.images.map(data => { - const maxSize = data.maxSizeBytes; - const subtitle = maxSize - ? formatMB(data.sizeBytes) + ' / ' + formatMB(maxSize) - : formatMB(data.sizeBytes); - const onClear = data.clearKey - ? () => this.props.onClear(data.clearKey) - : null; - return ( - - ); - })} - + {!hasImages ? ( + + + + ) : ( + + {this.props.images.map(data => { + const maxSize = data.maxSizeBytes; + const subtitle = maxSize + ? formatMB(data.sizeBytes) + ' / ' + formatMB(maxSize) + : formatMB(data.sizeBytes); + const onClear = data.clearKey + ? () => this.props.onClear(data.clearKey) + : null; + return ( + + ); + })} + + )} ); } diff --git a/src/plugins/fresco/index.js b/src/plugins/fresco/index.js index c3734eba8..f41b25319 100644 --- a/src/plugins/fresco/index.js +++ b/src/plugins/fresco/index.js @@ -44,6 +44,7 @@ type PluginState = { isDebugOverlayEnabled: boolean, isAutoRefreshEnabled: boolean, images: ImagesList, + coldStartFilter: boolean, }; const EmptySidebar = styled(FlexRow)({ @@ -75,6 +76,7 @@ export default class extends FlipperPlugin { isDebugOverlayEnabled: false, isAutoRefreshEnabled: false, images: [], + coldStartFilter: false, }; init() { @@ -120,19 +122,27 @@ export default class extends FlipperPlugin { images: ImagesList, events: Array, surface: string, + coldStart: boolean, ): ImagesList => { - if (!surface || surface === surfaceDefaultText) { + if (!surface || (surface === surfaceDefaultText && !coldStart)) { return images; } const imageList = images.map((image: CacheInfo) => { const imageIdList = image.imageIds.filter(imageID => { const filteredEvents = events.filter((event: ImageEventWithId) => { - return ( + const output = event.attribution && event.attribution.length > 0 && - event.attribution[0] == surface && event.imageIds && - event.imageIds.includes(imageID) + event.imageIds.includes(imageID); + + if (surface === surfaceDefaultText) { + return output && coldStart && event.coldStart; + } + return ( + (!coldStart || (coldStart && event.coldStart)) && + output && + event.attribution[0] == surface ); }); return filteredEvents.length > 0; @@ -142,13 +152,22 @@ export default class extends FlipperPlugin { return imageList; }; - updateImagesOnUI = (images: ImagesList, surface: string) => { + updateImagesOnUI = ( + images: ImagesList, + surface: string, + coldStart: boolean, + ) => { const filteredImages = this.filterImages( images, this.props.persistedState.events, surface, + coldStart, ); - this.setState({selectedSurface: surface, images: filteredImages}); + this.setState({ + selectedSurface: surface, + images: filteredImages, + coldStartFilter: coldStart, + }); }; updateCaches = (reason: string) => { if (DEBUG) { @@ -163,6 +182,7 @@ export default class extends FlipperPlugin { this.updateImagesOnUI( this.props.persistedState.images, this.state.selectedSurface, + this.state.coldStartFilter, ); }); }; @@ -233,7 +253,19 @@ export default class extends FlipperPlugin { }; onSurfaceChange = (surface: string) => { - this.updateImagesOnUI(this.props.persistedState.images, surface); + this.updateImagesOnUI( + this.props.persistedState.images, + surface, + this.state.coldStartFilter, + ); + }; + + onColdStartChange = (checked: boolean) => { + this.updateImagesOnUI( + this.props.persistedState.images, + this.state.selectedSurface, + checked, + ); }; render() { @@ -249,6 +281,8 @@ export default class extends FlipperPlugin { surfaceOptions={options} selectedSurface={this.state.selectedSurface} onChangeSurface={this.onSurfaceChange} + coldStartFilter={this.state.coldStartFilter} + onColdStartChange={this.onColdStartChange} images={this.state.images} onClear={this.onClear} onTrimMemory={this.onTrimMemory}