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

@@ -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 (
-        <ImagesCacheOverview.Empty>
-          <LoadingIndicator />
-        </ImagesCacheOverview.Empty>
-      );
-    }
-
     return (
       <ImagesCacheOverview.Container
         grow={true}
@@ -148,6 +149,11 @@ export default class ImagesCacheOverview extends PureComponent<
             selected={this.props.selectedSurface}
             onChange={this.props.onChangeSurface}
           />
+          <StyledCheckbox
+            checked={this.props.coldStartFilter}
+            onChange={this.props.onColdStartChange}
+          />
+          Show ColdStart Images
           <Spacer />
           <input
             type="range"
@@ -157,30 +163,36 @@ export default class ImagesCacheOverview extends PureComponent<
             value={this.state.size}
           />
         </Toolbar>
-        <ImagesCacheOverview.Content>
-          {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 (
-              <ImageGrid
-                title={data.cacheType}
-                subtitle={subtitle}
-                images={data.imageIds}
-                onImageSelected={this.onImageSelected}
-                selectedImage={this.state.selectedImage}
-                imagesMap={this.props.imagesMap}
-                size={this.state.size}
-                events={this.props.events}
-                onClear={onClear}
-              />
-            );
-          })}
-        </ImagesCacheOverview.Content>
+        {!hasImages ? (
+          <ImagesCacheOverview.Empty>
+            <LoadingIndicator />
+          </ImagesCacheOverview.Empty>
+        ) : (
+          <ImagesCacheOverview.Content>
+            {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 (
+                <ImageGrid
+                  title={data.cacheType}
+                  subtitle={subtitle}
+                  images={data.imageIds}
+                  onImageSelected={this.onImageSelected}
+                  selectedImage={this.state.selectedImage}
+                  imagesMap={this.props.imagesMap}
+                  size={this.state.size}
+                  events={this.props.events}
+                  onClear={onClear}
+                />
+              );
+            })}
+          </ImagesCacheOverview.Content>
+        )}
       </ImagesCacheOverview.Container>
     );
   }

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<PluginState, *, PersistedState> {
     isDebugOverlayEnabled: false,
     isAutoRefreshEnabled: false,
     images: [],
+    coldStartFilter: false,
   };
 
   init() {
@@ -120,19 +122,27 @@ export default class extends FlipperPlugin<PluginState, *, PersistedState> {
     images: ImagesList,
     events: Array<ImageEventWithId>,
     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<PluginState, *, PersistedState> {
     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<PluginState, *, PersistedState> {
       this.updateImagesOnUI(
         this.props.persistedState.images,
         this.state.selectedSurface,
+        this.state.coldStartFilter,
       );
     });
   };
@@ -233,7 +253,19 @@ export default class extends FlipperPlugin<PluginState, *, PersistedState> {
   };
 
   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<PluginState, *, PersistedState> {
           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}