@bundle-stats/ui 3.1.4-alpha.0 → 3.2.1-alpha.0

package/lib-esm/components/bundle-assets/bundle-assets.js

@@ -1,16 +1,8 @@
 import _map from "lodash/map";
 import _get from "lodash/get";
 
-var _PropTypes$shape;
-
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
@@ -33,42 +25,36 @@ import { MetricsTableSearch } from '../metrics-table-search';
 import { MetricsTableOptions } from '../metrics-table-options';
 import { MetricsTableTitle } from '../metrics-table-title';
 import css from './bundle-assets.module.css';
-var RUN_TITLE_CURRENT = 'Current';
-var RUN_TITLE_BASELINE = 'Baseline';
-var RUNS_LABELS = [RUN_TITLE_CURRENT, RUN_TITLE_BASELINE];
-
-var getFileTypeFilters = function getFileTypeFilters(filters) {
-  return Object.entries(FILE_TYPE_LABELS).map(function (_ref) {
-    var _ref2;
+const RUN_TITLE_CURRENT = 'Current';
+const RUN_TITLE_BASELINE = 'Baseline';
+const RUNS_LABELS = [RUN_TITLE_CURRENT, RUN_TITLE_BASELINE];
 
-    var id = _ref[0],
-        label = _ref[1];
-    return _ref2 = {}, _ref2[id] = {
-      label: label,
-      defaultValue: _get(filters, ASSET_FILE_TYPE + "." + id, true)
-    }, _ref2;
-  }).reduce(function (agg, current) {
-    return _objectSpread(_objectSpread({}, agg), current);
-  }, {});
-};
+const getFileTypeFilters = filters => Object.entries(FILE_TYPE_LABELS).map(([id, label]) => ({
+  [id]: {
+    label,
+    defaultValue: _get(filters, `${ASSET_FILE_TYPE}.${id}`, true)
+  }
+})).reduce((agg, current) => ({ ...agg,
+  ...current
+}), {});
 
-var TooltipNotPredictive = function TooltipNotPredictive(_ref3) {
-  var runs = _ref3.runs;
-  return /*#__PURE__*/React.createElement("div", {
-    className: css.tooltipNotPredictive
-  }, /*#__PURE__*/React.createElement("p", {
-    className: css.tooltipNotPredictiveText
-  }, "File name is the same, but the size has changed:"), /*#__PURE__*/React.createElement("table", {
-    className: css.tooltipTable
-  }, /*#__PURE__*/React.createElement("tr", null, runs.map(function (_ref4, index) {
-    var name = _ref4.name,
-        value = _ref4.value;
-    var key = index;
-    return /*#__PURE__*/React.createElement("tr", {
-      key: key
-    }, /*#__PURE__*/React.createElement("th", null, RUNS_LABELS[index]), /*#__PURE__*/React.createElement("td", null, name), /*#__PURE__*/React.createElement("td", null, value));
-  }))));
-};
+const TooltipNotPredictive = ({
+  runs
+}) => /*#__PURE__*/React.createElement("div", {
+  className: css.tooltipNotPredictive
+}, /*#__PURE__*/React.createElement("p", {
+  className: css.tooltipNotPredictiveText
+}, "File name is the same, but the size has changed:"), /*#__PURE__*/React.createElement("table", {
+  className: css.tooltipTable
+}, /*#__PURE__*/React.createElement("tr", null, runs.map(({
+  name,
+  value
+}, index) => {
+  const key = index;
+  return /*#__PURE__*/React.createElement("tr", {
+    key: key
+  }, /*#__PURE__*/React.createElement("th", null, RUNS_LABELS[index]), /*#__PURE__*/React.createElement("td", null, name), /*#__PURE__*/React.createElement("td", null, value));
+}))));
 
 TooltipNotPredictive.defaultProps = {
   runs: []
@@ -78,101 +64,101 @@ TooltipNotPredictive.propTypes = {
 
 };
 
-var getRenderRowHeader = function getRenderRowHeader(_ref5) {
-  var labels = _ref5.labels,
-      CustomComponentLink = _ref5.CustomComponentLink,
-      chunks = _ref5.chunks;
-  return function (item) {
-    var label = item.label,
-        isNotPredictive = item.isNotPredictive,
-        runs = item.runs,
-        isChunk = item.isChunk,
-        isEntry = item.isEntry,
-        isInitial = item.isInitial;
-    return /*#__PURE__*/React.createElement(Popover, {
-      label: /*#__PURE__*/React.createElement(FileName, {
-        name: label
-      }),
-      icon: /*#__PURE__*/React.createElement("div", {
-        className: css.assetInfoFlags
-      }, isNotPredictive && /*#__PURE__*/React.createElement(Tooltip, {
-        className: css.notPredictive,
-        title: /*#__PURE__*/React.createElement(TooltipNotPredictive, {
-          runs: runs
-        })
-      }, /*#__PURE__*/React.createElement(Icon, {
-        className: css.notPredictiveIcon,
-        glyph: "warning"
-      })), isChunk && /*#__PURE__*/React.createElement("span", {
-        title: "Chunk",
-        className: css.flagChunk
-      }, "c"), isEntry && /*#__PURE__*/React.createElement("span", {
-        title: "Entrypoint",
-        className: css.flagEntry
-      }, "e"), isInitial && /*#__PURE__*/React.createElement("span", {
-        title: "Initial",
-        className: css.flagInitial
-      }, "i"))
-    }, /*#__PURE__*/React.createElement(AssetInfo, {
-      className: css.assetInfo,
-      item: item,
-      labels: labels,
-      chunks: chunks,
-      CustomComponentLink: CustomComponentLink
-    }));
-  };
+const getRenderRowHeader = ({
+  labels,
+  CustomComponentLink,
+  chunks
+}) => item => {
+  const {
+    label,
+    isNotPredictive,
+    runs,
+    isChunk,
+    isEntry,
+    isInitial
+  } = item;
+  return /*#__PURE__*/React.createElement(Popover, {
+    label: /*#__PURE__*/React.createElement(FileName, {
+      name: label
+    }),
+    icon: /*#__PURE__*/React.createElement("div", {
+      className: css.assetInfoFlags
+    }, isNotPredictive && /*#__PURE__*/React.createElement(Tooltip, {
+      className: css.notPredictive,
+      title: /*#__PURE__*/React.createElement(TooltipNotPredictive, {
+        runs: runs
+      })
+    }, /*#__PURE__*/React.createElement(Icon, {
+      className: css.notPredictiveIcon,
+      glyph: "warning"
+    })), isChunk && /*#__PURE__*/React.createElement("span", {
+      title: "Chunk",
+      className: css.flagChunk
+    }, "c"), isEntry && /*#__PURE__*/React.createElement("span", {
+      title: "Entrypoint",
+      className: css.flagEntry
+    }, "e"), isInitial && /*#__PURE__*/React.createElement("span", {
+      title: "Initial",
+      className: css.flagInitial
+    }, "i"))
+  }, /*#__PURE__*/React.createElement(AssetInfo, {
+    className: css.assetInfo,
+    item: item,
+    labels: labels,
+    chunks: chunks,
+    CustomComponentLink: CustomComponentLink
+  }));
 };
 
-export var BundleAssets = function BundleAssets(props) {
-  var _jobs$, _jobs$$meta, _jobs$$meta$webpack, _ASSET_ENTRY_TYPE, _ref7;
+export const BundleAssets = props => {
+  var _jobs$, _jobs$$meta, _jobs$$meta$webpack;
 
-  var className = props.className,
-      jobs = props.jobs,
-      items = props.items,
-      updateFilters = props.updateFilters,
-      resetFilters = props.resetFilters,
-      resetAllFilters = props.resetAllFilters,
-      totalRowCount = props.totalRowCount,
-      filters = props.filters,
-      hasActiveFilters = props.hasActiveFilters,
-      sortItems = props.sortItems,
-      sort = props.sort,
-      updateSort = props.updateSort,
-      search = props.search,
-      updateSearch = props.updateSearch,
-      CustomComponentLink = props.customComponentLink;
-  var emptyMessage = /*#__PURE__*/React.createElement(EmptySet, {
+  const {
+    className,
+    jobs,
+    items,
+    updateFilters,
+    resetFilters,
+    resetAllFilters,
+    totalRowCount,
+    filters,
+    hasActiveFilters,
+    sortFields,
+    sort,
+    updateSort,
+    search,
+    updateSearch,
+    customComponentLink: CustomComponentLink
+  } = props;
+  const emptyMessage = /*#__PURE__*/React.createElement(EmptySet, {
     resources: "assets",
     filtered: totalRowCount !== 0,
     handleResetFilters: resetFilters,
     handleViewAll: resetAllFilters
   });
-  var chunks = ((_jobs$ = jobs[0]) == null ? void 0 : (_jobs$$meta = _jobs$.meta) == null ? void 0 : (_jobs$$meta$webpack = _jobs$$meta.webpack) == null ? void 0 : _jobs$$meta$webpack.chunks) || [];
-  var renderRowHeader = useMemo(function () {
-    return getRenderRowHeader({
-      labels: _map(jobs, 'label'),
-      CustomComponentLink: CustomComponentLink,
-      chunks: chunks
-    });
-  }, [jobs, chunks]);
+  const chunks = ((_jobs$ = jobs[0]) == null ? void 0 : (_jobs$$meta = _jobs$.meta) == null ? void 0 : (_jobs$$meta$webpack = _jobs$$meta.webpack) == null ? void 0 : _jobs$$meta$webpack.chunks) || [];
+  const renderRowHeader = useMemo(() => getRenderRowHeader({
+    labels: _map(jobs, 'label'),
+    CustomComponentLink,
+    chunks
+  }), [jobs, chunks]);
   return /*#__PURE__*/React.createElement("section", {
     className: cx(css.root, className)
   }, /*#__PURE__*/React.createElement(Toolbar, {
     className: css.toolbar,
-    renderActions: function renderActions(_ref6) {
-      var actionClassName = _ref6.actionClassName;
-      return /*#__PURE__*/React.createElement(FlexStack, {
-        space: "xsmall",
-        className: cx(css.dropdown, actionClassName)
-      }, /*#__PURE__*/React.createElement(SortDropdown, _extends({
-        items: sortItems
-      }, sort, {
-        onChange: updateSort
-      })), /*#__PURE__*/React.createElement(MetricsTableOptions, {
-        handleViewAll: resetAllFilters,
-        handleResetFilters: resetFilters
-      }));
-    }
+    renderActions: ({
+      actionClassName
+    }) => /*#__PURE__*/React.createElement(FlexStack, {
+      space: "xsmall",
+      className: cx(css.dropdown, actionClassName)
+    }, /*#__PURE__*/React.createElement(SortDropdown, _extends({
+      fields: sortFields
+    }, sort, {
+      onChange: updateSort
+    })), /*#__PURE__*/React.createElement(MetricsTableOptions, {
+      handleViewAll: resetAllFilters,
+      handleResetFilters: resetFilters
+    }))
   }, /*#__PURE__*/React.createElement(FlexStack, null, /*#__PURE__*/React.createElement(MetricsTableSearch, {
     className: css.toolbarSearch,
     placeholder: "Search by name",
@@ -180,27 +166,36 @@ export var BundleAssets = function BundleAssets(props) {
     updateSearch: updateSearch
   }), /*#__PURE__*/React.createElement(Filters, {
     className: css.toolbarFilters,
-    filters: (_ref7 = {}, _ref7[ASSET_FILTERS.CHANGED] = {
-      label: 'Changed',
-      defaultValue: filters[ASSET_FILTERS.CHANGED],
-      disabled: jobs.length <= 1
-    }, _ref7[ASSET_ENTRY_TYPE] = (_ASSET_ENTRY_TYPE = {
-      label: 'Entry type'
-    }, _ASSET_ENTRY_TYPE[ASSET_FILTERS.ENTRY] = {
-      label: 'Entry',
-      defaultValue: _get(filters, ASSET_ENTRY_TYPE + "." + ASSET_FILTERS.ENTRY, true)
-    }, _ASSET_ENTRY_TYPE[ASSET_FILTERS.INITIAL] = {
-      label: 'Initial',
-      defaultValue: _get(filters, ASSET_ENTRY_TYPE + "." + ASSET_FILTERS.INITIAL, true)
-    }, _ASSET_ENTRY_TYPE[ASSET_FILTERS.CHUNK] = {
-      label: 'Chunk',
-      defaultValue: _get(filters, ASSET_ENTRY_TYPE + "." + ASSET_FILTERS.CHUNK, true)
-    }, _ASSET_ENTRY_TYPE[ASSET_FILTERS.ASSET] = {
-      label: 'Asset',
-      defaultValue: _get(filters, ASSET_ENTRY_TYPE + "." + ASSET_FILTERS.ASSET, true)
-    }, _ASSET_ENTRY_TYPE), _ref7[ASSET_FILE_TYPE] = _objectSpread({
-      label: 'File type'
-    }, getFileTypeFilters(filters)), _ref7),
+    filters: {
+      [ASSET_FILTERS.CHANGED]: {
+        label: 'Changed',
+        defaultValue: filters[ASSET_FILTERS.CHANGED],
+        disabled: jobs.length <= 1
+      },
+      [ASSET_ENTRY_TYPE]: {
+        label: 'Entry type',
+        [ASSET_FILTERS.ENTRY]: {
+          label: 'Entry',
+          defaultValue: _get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.ENTRY}`, true)
+        },
+        [ASSET_FILTERS.INITIAL]: {
+          label: 'Initial',
+          defaultValue: _get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.INITIAL}`, true)
+        },
+        [ASSET_FILTERS.CHUNK]: {
+          label: 'Chunk',
+          defaultValue: _get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.CHUNK}`, true)
+        },
+        [ASSET_FILTERS.ASSET]: {
+          label: 'Asset',
+          defaultValue: _get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.ASSET}`, true)
+        }
+      },
+      [ASSET_FILE_TYPE]: {
+        label: 'File type',
+        ...getFileTypeFilters(filters)
+      }
+    },
     hasActiveFilters: hasActiveFilters,
     onChange: updateFilters
   }))), /*#__PURE__*/React.createElement("main", null, /*#__PURE__*/React.createElement(MetricsTable, {
@@ -211,7 +206,7 @@ export var BundleAssets = function BundleAssets(props) {
     showHeaderSum: true,
     title: /*#__PURE__*/React.createElement(MetricsTableTitle, {
       title: I18N.ASSETS,
-      info: "(" + items.length + "/" + totalRowCount + ")",
+      info: `(${items.length}/${totalRowCount})`,
       popoverInfo: I18N.ASSETS_INFO,
       popoverHref: config.documentation.assets
     })
@@ -251,10 +246,12 @@ BundleAssets.propTypes = {
     changed: PropTypes.bool
   }).isRequired,
   hasActiveFilters: PropTypes.bool,
-  sortItems: PropTypes.shape((_PropTypes$shape = {}, _PropTypes$shape[PropTypes.string] = PropTypes.shape({
-    label: PropTypes.string,
-    defaultDirection: PropTypes.bool
-  }), _PropTypes$shape)).isRequired,
+  sortFields: PropTypes.shape({
+    [PropTypes.string]: PropTypes.shape({
+      label: PropTypes.string,
+      defaultDirection: PropTypes.bool
+    })
+  }).isRequired,
   search: PropTypes.string.isRequired,
   updateSearch: PropTypes.func.isRequired,
   sort: PropTypes.shape({

package/lib-esm/components/bundle-assets/bundle-assets.stories.js

@@ -7,73 +7,68 @@ import baselineStats from '../../../__mocks__/webpack-stats.baseline.json';
 import currentStats from '../../../__mocks__/webpack-stats.current.json';
 import { getWrapperDecorator } from '../../stories';
 import { BundleAssets } from '.';
-var JOBS = createJobs([{
+const JOBS = createJobs([{
   webpack: currentStats
 }, {
   webpack: baselineStats
 }]);
-var currentJob = JOBS[0],
-    baselineJob = JOBS[1];
-var stories = storiesOf('Components/BundleAssets', module);
-stories.addDecorator(getWrapperDecorator());
-stories.add('default', function () {
-  return /*#__PURE__*/React.createElement(BundleAssets, {
-    jobs: [baselineJob]
-  });
-});
-stories.add('multiple jobs', function () {
-  return /*#__PURE__*/React.createElement(BundleAssets, {
-    jobs: JOBS
-  });
-});
-stories.add('custom filters', function () {
-  var _ref;
+const [currentJob, baselineJob] = JOBS;
+
+const setState = params => console.info(params);
 
-  return /*#__PURE__*/React.createElement(BundleAssets, {
-    jobs: JOBS,
-    filters: (_ref = {}, _ref[ASSET_ENTRY_TYPE + "." + ASSET_FILTERS.ENTRY] = true, _ref[ASSET_FILE_TYPE + "." + FILE_TYPE_JS] = true, _ref)
-  });
-});
-var JOBS_EMPTY_BASELINE = createJobs([{
+const stories = storiesOf('Components/BundleAssets', module);
+stories.addDecorator(getWrapperDecorator());
+stories.add('default', () => /*#__PURE__*/React.createElement(BundleAssets, {
+  jobs: [baselineJob],
+  setState: setState
+}));
+stories.add('multiple jobs', () => /*#__PURE__*/React.createElement(BundleAssets, {
+  jobs: JOBS,
+  setState: setState
+}));
+stories.add('custom filters', () => /*#__PURE__*/React.createElement(BundleAssets, {
+  jobs: JOBS,
+  filters: {
+    [`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.ENTRY}`]: true,
+    [`${ASSET_FILE_TYPE}.${FILE_TYPE_JS}`]: true
+  },
+  setState: setState
+}));
+const JOBS_EMPTY_BASELINE = createJobs([{
   webpack: currentStats
 }, null]);
-stories.add('empty baseline', function () {
-  return /*#__PURE__*/React.createElement(BundleAssets, {
-    jobs: JOBS_EMPTY_BASELINE
-  });
-});
-stories.add('no assets', function () {
-  return /*#__PURE__*/React.createElement(BundleAssets, {
-    jobs: JOBS.map(function (job) {
-      return _set(_merge({}, job), 'metrics.webpack.assets', {});
-    })
-  });
-});
-stories.add('empty filtered data', function () {
-  return /*#__PURE__*/React.createElement(BundleAssets, {
-    jobs: [_set(_merge({}, currentJob), 'metrics.webpack.assets', {
-      'main.js': {
-        value: 100
-      }
-    }), _set(_merge({}, baselineJob), 'metrics.webpack.assets', {
-      'main.js': {
-        value: 100
-      }
-    })]
-  });
-});
-stories.add('not predictive', function () {
-  return /*#__PURE__*/React.createElement(BundleAssets, {
-    jobs: [_set(_merge({}, currentJob), 'metrics.webpack.assets', {
-      'static/js/not-predictive.js': {
-        name: 'static/js/not-predictive.93191a1.js',
-        value: 2989
-      }
-    }), _set(_merge({}, baselineJob), 'metrics.webpack.assets', {
-      'static/js/not-predictive.js': {
-        name: 'static/js/not-predictive.93191a1.js',
-        value: 2988
-      }
-    })]
-  });
-});
+stories.add('empty baseline', () => /*#__PURE__*/React.createElement(BundleAssets, {
+  jobs: JOBS_EMPTY_BASELINE,
+  setState: setState
+}));
+stories.add('no assets', () => /*#__PURE__*/React.createElement(BundleAssets, {
+  jobs: JOBS.map(job => _set(_merge({}, job), 'metrics.webpack.assets', {})),
+  setState: setState
+}));
+stories.add('empty filtered data', () => /*#__PURE__*/React.createElement(BundleAssets, {
+  jobs: [_set(_merge({}, currentJob), 'metrics.webpack.assets', {
+    'main.js': {
+      value: 100
+    }
+  }), _set(_merge({}, baselineJob), 'metrics.webpack.assets', {
+    'main.js': {
+      value: 100
+    }
+  })],
+  search: "vendors",
+  setState: setState
+}));
+stories.add('not predictive', () => /*#__PURE__*/React.createElement(BundleAssets, {
+  jobs: [_set(_merge({}, currentJob), 'metrics.webpack.assets', {
+    'static/js/not-predictive.js': {
+      name: 'static/js/not-predictive.93191a1.js',
+      value: 2989
+    }
+  }), _set(_merge({}, baselineJob), 'metrics.webpack.assets', {
+    'static/js/not-predictive.js': {
+      name: 'static/js/not-predictive.93191a1.js',
+      value: 2988
+    }
+  })],
+  setState: setState
+}));

package/lib-esm/components/bundle-assets/bundle-assets.utils.js

@@ -1,22 +1,66 @@
-/**
- * Get a list of all chunkIds across assets and runs
- *
- * @param {Array<Object>} items
- * @return {Array<string|number>}
- */
-export var getAllChunkIds = function getAllChunkIds(items) {
-  return items.reduce(function (agg, item) {
-    var itemChunkIds = item.runs.map(function (run) {
-      return run == null ? void 0 : run.chunkId;
-    }).filter(function (chunkId) {
-      return typeof chunkId !== 'undefined';
-    });
-    return itemChunkIds.reduce(function (itemAgg, chunkId) {
-      if (itemAgg.includes(chunkId)) {
-        return itemAgg;
-      }
-
-      return [].concat(itemAgg, [chunkId]);
-    }, agg);
-  }, []);
+import _get from "lodash/get";
+import { ASSET_ENTRY_TYPE, ASSET_FILE_TYPE, ASSET_FILTERS, getFileType } from '@bundle-stats/utils';
+import { SORT_BY_NAME, SORT_BY_DELTA, SORT_BY_SIZE } from './bundle-assets.constants';
+export const addRowAssetFlags = row => {
+  const {
+    runs
+  } = row;
+  const isEntry = runs.map(run => run == null ? void 0 : run.isEntry).includes(true);
+  const isInitial = runs.map(run => run == null ? void 0 : run.isInitial).includes(true);
+  const isChunk = runs.map(run => run == null ? void 0 : run.isChunk).includes(true);
+  const isAsset = !(isEntry || isInitial || isChunk);
+  return { ...row,
+    isEntry,
+    isInitial,
+    isChunk,
+    isAsset
+  };
+};
+export const getIsNotPredictive = (key, runs) => runs.reduce((agg, current, index) => {
+  if (agg) {
+    return agg;
+  }
+
+  if (index + 1 === runs.length) {
+    return agg;
+  }
+
+  if (current && runs[index + 1] && current.delta !== 0 && key !== current.name && current.name === runs[index + 1].name) {
+    return true;
+  }
+
+  return agg;
+}, false);
+export const addRowIsNotPredictive = row => ({ ...row,
+  isNotPredictive: getIsNotPredictive(row.key, row.runs)
+});
+export const getRowFilter = filters => item => {
+  if (filters[ASSET_FILTERS.CHANGED] && !item.changed) {
+    return false;
+  }
+
+  if (!(filters[`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.ENTRY}`] && item.isEntry || filters[`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.INITIAL}`] && item.isInitial || filters[`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.CHUNK}`] && item.isChunk || filters[`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.ASSET}`] && item.isAsset)) {
+    return false;
+  }
+
+  if (!filters[`${ASSET_FILE_TYPE}.${getFileType(item.key)}`]) {
+    return false;
+  }
+
+  return true;
+};
+export const getCustomSort = sortId => item => {
+  if (sortId === SORT_BY_NAME) {
+    return item.key;
+  }
+
+  if (sortId === SORT_BY_DELTA) {
+    return _get(item, 'runs[0].deltaPercentage', 0);
+  }
+
+  if (sortId === SORT_BY_SIZE) {
+    return _get(item, 'runs[0].value', 0);
+  }
+
+  return [!item.isNotPredictive, !item.changed, !item.isInitial, !item.isEntry, !item.isChunk, item.key];
 };