jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Type improvements

Browse Source 
Summary: some type simplifications, that makes it easier to reuse data sources and helps type inference

Reviewed By: passy

Differential Revision: D28413380

fbshipit-source-id: 261a8b981bf18a00edc3075926bd668322e1c37d
This commit is contained in:
Michel Weststrate
2021-06-07 08:08:53 -07:00
committed by Facebook GitHub Bot
parent 9a2677fc24
commit bc647972e1
12 changed files with 80 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
desktop/flipper-plugin/src/data-source/DataSource.tsx
View File

@@ -20,12 +20,6 @@ const defaultLimit = 100 * 1000;
// rather than search and remove the affected individual items
const shiftRebuildTreshold = 0.05;
export type ExtractKeyType<T, KEY extends keyof T> = T[KEY] extends string
? string
: T[KEY] extends number
? number
: never;
type AppendEvent<T> = {
type: 'append';
entry: Entry<T>;
@@ -83,19 +77,45 @@ type OutputChange =
newCount: number;
};
export class DataSource<
T = any,
KEY extends keyof T = any,
KEY_TYPE extends string | number | never = ExtractKeyType<T, KEY>,
> {
export type DataSourceOptions<T, K extends keyof T> = {
/**
* If a key is set, the given field of the records is assumed to be unique,
* and it's value can be used to perform lookups and upserts.
*/
key?: K;
/**
* The maximum amount of records that this DataSource will store.
* If the limit is exceeded, the oldest records will automatically be dropped to make place for the new ones
*/
limit?: number;
};
export function createDataSource<T, KEY extends keyof T = any>(
initialSet: readonly T[],
options?: DataSourceOptions<T, KEY>,
): DataSource<T>;
export function createDataSource<T>(initialSet?: readonly T[]): DataSource<T>;
export function createDataSource<T, KEY extends keyof T>(
initialSet: readonly T[] = [],
options?: DataSourceOptions<T, KEY>,
): DataSource<T> {
const ds = new DataSource<T>(options?.key);
if (options?.limit !== undefined) {
ds.limit = options.limit;
}
initialSet.forEach((value) => ds.append(value));
return ds as any;
}
export class DataSource<T> {
private nextId = 0;
private _records: Entry<T>[] = [];
private _recordsById: Map<KEY_TYPE, T> = new Map();
private _recordsById: Map<string, T> = new Map();
/**
* @readonly
*/
public keyAttribute: undefined | keyof T;
private idToIndex: Map<KEY_TYPE, number> = new Map();
public keyAttribute: keyof T | undefined;
private idToIndex: Map<string, number> = new Map();
// if we shift the window, we increase shiftOffset to correct idToIndex results, rather than remapping all values
private shiftOffset = 0;
@@ -113,7 +133,7 @@ export class DataSource<
*/
public readonly view: DataSourceView<T>;
constructor(keyAttribute: KEY | undefined) {
constructor(keyAttribute: keyof T | undefined) {
this.keyAttribute = keyAttribute;
this.view = new DataSourceView<T>(this);
}
@@ -134,22 +154,22 @@ export class DataSource<
return unwrap(this._records[index]);
}
public has(key: KEY_TYPE) {
public has(key: string) {
this.assertKeySet();
return this._recordsById.has(key);
}
public getById(key: KEY_TYPE) {
public getById(key: string): T | undefined {
this.assertKeySet();
return this._recordsById.get(key);
}
public keys(): IterableIterator<KEY_TYPE> {
public keys(): IterableIterator<string> {
this.assertKeySet();
return this._recordsById.keys();
}
public entries(): IterableIterator<[KEY_TYPE, T]> {
public entries(): IterableIterator<[string, T]> {
this.assertKeySet();
return this._recordsById.entries();
}
@@ -178,7 +198,7 @@ export class DataSource<
* Returns the index of a specific key in the *records* set.
* Returns -1 if the record wansn't found
*/
public getIndexOfKey(key: KEY_TYPE): number {
public getIndexOfKey(key: string): number {
this.assertKeySet();
const stored = this.idToIndex.get(key);
return stored === undefined ? -1 : stored + this.shiftOffset;
@@ -302,7 +322,7 @@ export class DataSource<
*
* Warning: this operation can be O(n) if a key is set
*/
public deleteByKey(keyValue: KEY_TYPE): boolean {
public deleteByKey(keyValue: string): boolean {
this.assertKeySet();
const index = this.getIndexOfKey(keyValue);
if (index === -1) {
@@ -382,7 +402,7 @@ export class DataSource<
}
}
private getKey(value: T): KEY_TYPE;
private getKey(value: T): string;
private getKey(value: any): any {
this.assertKeySet();
const key = value[this.keyAttribute!];
@@ -392,7 +412,7 @@ export class DataSource<
throw new Error(`Invalid key value: '${key}'`);
}
private storeIndexOfKey(key: KEY_TYPE, index: number) {
private storeIndexOfKey(key: string, index: number) {
// de-normalize the index, so that on later look ups its corrected again
this.idToIndex.set(key, index - this.shiftOffset);
}
@@ -448,7 +468,7 @@ class DataSourceView<T> {
*/
private _output: Entry<T>[] = [];
constructor(datasource: DataSource<T, any, any>) {
constructor(datasource: DataSource<T>) {
this.datasource = datasource;
}

2
desktop/flipper-plugin/src/data-source/DataSourceRendererStatic.tsx
View File

@@ -16,7 +16,7 @@ type DataSourceProps<T extends object, C> = {
/**
* The data source to render
*/
dataSource: DataSource<T, any, any>;
dataSource: DataSource<T>;
/**
* additional context that will be passed verbatim to the itemRenderer, so that it can be easily memoized
*/

2
desktop/flipper-plugin/src/data-source/DataSourceRendererVirtual.tsx
View File

@@ -39,7 +39,7 @@ type DataSourceProps<T extends object, C> = {
/**
* The data source to render
*/
dataSource: DataSource<T, any, any>;
dataSource: DataSource<T>;
/**
* Automatically scroll if the user is near the end?
*/

7
desktop/flipper-plugin/src/data-source/__tests__/datasource-basics.node.tsx
View File

@@ -7,10 +7,7 @@
* @format
*/
// ok for now, should be factored if this becomes a stand-alone lib
// eslint-disable-next-line
import {createDataSource} from '../../state/createDataSource';
import {DataSource} from '../DataSource';
import {DataSource, createDataSource} from '../DataSource';
type Todo = {
id: string;
@@ -487,7 +484,7 @@ test('clear', () => {
function testEvents<T>(
initial: T[],
op: (ds: DataSource<T, any, any>) => void,
op: (ds: DataSource<T>) => void,
key?: keyof T,
): any[] {
const ds = createDataSource<T>(initial, {key});

5
desktop/flipper-plugin/src/data-source/__tests__/datasource-perf.node.tsx
View File

@@ -7,10 +7,7 @@
* @format
*/
// ok for now, should be factored if this becomes a stand-alone lib
// eslint-disable-next-line
import {createDataSource} from '../../state/createDataSource';
import {DataSource} from '../DataSource';
import {DataSource, createDataSource} from '../DataSource';
type Todo = {
id: string;

2
desktop/flipper-plugin/src/data-source/index.tsx
View File

@@ -7,7 +7,7 @@
* @format
*/
export {DataSource, ExtractKeyType} from './DataSource';
export {DataSource, createDataSource, DataSourceOptions} from './DataSource';
export {
DataSourceRendererVirtual,
DataSourceVirtualizer,

2
desktop/flipper-plugin/src/data-source/package.json
View File

@@ -1,6 +1,6 @@
{
"name": "flipper-data-source",
"version": "0.0.1",
"version": "0.0.2",
"description": "Library to power streamig data visualisations",
"repository": "https://github.com/facebook/flipper",
"homepage": "https://github.com/facebook/flipper/blob/master/desktop/flipper-plugin/src/data-source/README.md",

39
desktop/flipper-plugin/src/state/createDataSource.tsx
View File

@@ -7,20 +7,17 @@
* @format
*/
import {DataSource, ExtractKeyType} from '../data-source/index';
import {
DataSource,
createDataSource as baseCreateDataSource,
DataSourceOptions as BaseDataSourceOptions,
} from '../data-source/index';
import {registerStorageAtom} from '../plugin/PluginBase';
type CreateDataSourceOptions<T, K extends keyof T> = {
/**
* If a key is set, the given field of the records is assumed to be unique,
* and it's value can be used to perform lookups and upserts.
*/
key?: K;
/**
* The maximum amount of records that this DataSource will store.
* If the limit is exceeded, the oldest records will automatically be dropped to make place for the new ones
*/
limit?: number;
type CreateDataSourceOptions<T, K extends keyof T> = BaseDataSourceOptions<
T,
K
> & {
/**
* Should this state persist when exporting a plugin?
* If set, the dataSource will be saved / loaded under the key provided
@@ -29,21 +26,15 @@ type CreateDataSourceOptions<T, K extends keyof T> = {
};
export function createDataSource<T, KEY extends keyof T = any>(
initialSet: T[],
initialSet: readonly T[],
options: CreateDataSourceOptions<T, KEY>,
): DataSource<T, KEY, ExtractKeyType<T, KEY>>;
export function createDataSource<T>(
initialSet?: T[],
): DataSource<T, never, never>;
): DataSource<T>;
export function createDataSource<T>(initialSet?: readonly T[]): DataSource<T>;
export function createDataSource<T, KEY extends keyof T>(
initialSet: T[] = [],
initialSet: readonly T[] = [],
options?: CreateDataSourceOptions<T, KEY>,
): DataSource<T, any, any> {
const ds = new DataSource<T, KEY>(options?.key);
if (options?.limit !== undefined) {
ds.limit = options.limit;
}
): DataSource<T> {
const ds = baseCreateDataSource(initialSet, options);
registerStorageAtom(options?.persist, ds);
initialSet.forEach((value) => ds.append(value));
return ds;
}

6
desktop/flipper-plugin/src/ui/DataList.tsx
View File

@@ -30,6 +30,7 @@ import styled from '@emotion/styled';
import {DataTableManager} from './data-table/DataTableManager';
import {Atom, createState} from '../state/atom';
import {useAssertStableRef} from '../utils/useAssertStableRef';
import {DataSource} from '../data-source';
const {Text} = Typography;
@@ -62,7 +63,7 @@ interface DataListBaseProps<T extends Item> {
/**
* Items to display. Per item at least a title and unique id should be provided
*/
items: readonly Item[];
items: DataSource<Item> | readonly Item[];
/**
* Custom render function. By default the component will render the `title` in bold and description (if any) below it
*/
@@ -152,7 +153,8 @@ export const DataList: React.FC<DataListProps<any>> = function DataList<
<DataTable<any>
{...tableProps}
tableManagerRef={tableManagerRef}
records={items}
records={Array.isArray(items) ? items : undefined}
dataSource={Array.isArray(items) ? undefined : (items as any)}
recordsKey="id"
columns={dataListColumns}
onSelect={handleSelect}

15
desktop/flipper-plugin/src/ui/data-table/DataTable.tsx
View File

@@ -51,6 +51,7 @@ import {Formatter} from '../DataFormatter';
import {usePluginInstance} from '../../plugin/PluginContext';
import {debounce} from 'lodash';
import {useInUnitTest} from '../../utils/useInUnitTest';
import {createDataSource} from 'flipper-plugin/src/state/createDataSource';
interface DataTableBaseProps<T = any> {
columns: DataTableColumn<T>[];
@@ -66,9 +67,7 @@ interface DataTableBaseProps<T = any> {
tableManagerRef?: RefObject<DataTableManager<T> | undefined>; // Actually we want a MutableRefObject, but that is not what React.createRef() returns, and we don't want to put the burden on the plugin dev to cast it...
onCopyRows?(records: T[]): string;
onContextMenu?: (selection: undefined | T) => React.ReactElement;
onRenderEmpty?:
| null
| ((dataSource?: DataSource<T, any, any>) => React.ReactElement);
onRenderEmpty?: null | ((dataSource?: DataSource<T>) => React.ReactElement);
}
export type ItemRenderer<T> = (
@@ -79,7 +78,7 @@ export type ItemRenderer<T> = (
type DataTableInput<T = any> =
| {
dataSource: DataSource<T, any, any>;
dataSource: DataSource<T>;
records?: undefined;
recordsKey?: undefined;
}
@@ -525,11 +524,9 @@ function normalizeDataSourceInput<T>(props: DataTableInput<T>): DataSource<T> {
return props.dataSource;
}
if (props.records) {
const [dataSource] = useState(() => {
const ds = new DataSource<T>(props.recordsKey);
syncRecordsToDataSource(ds, props.records);
return ds;
});
const [dataSource] = useState(() =>
createDataSource(props.records, {key: props.recordsKey}),
);
useEffect(() => {
syncRecordsToDataSource(dataSource, props.records);
}, [dataSource, props.records]);

6
desktop/flipper-plugin/src/ui/data-table/DataTableManager.tsx
View File

@@ -64,7 +64,7 @@ type DataManagerActions<T> =
| Action<
'selectItemById',
{
id: string | number;
id: string;
addToSelection?: boolean;
}
>
@@ -213,7 +213,7 @@ export const dataTableManagerReducer = produce<
}
case 'setColumnFilterFromSelection': {
const items = getSelectedItems(
config.dataSource as DataSource,
config.dataSource as DataSource<any>,
draft.selection,
);
items.forEach((item, index) => {
@@ -258,7 +258,7 @@ export type DataTableManager<T> = {
end: number,
allowUnselect?: boolean,
): void;
selectItemById(id: string | number, addToSelection?: boolean): void;
selectItemById(id: string, addToSelection?: boolean): void;
clearSelection(): void;
getSelectedItem(): T | undefined;
getSelectedItems(): readonly T[];

2
desktop/plugins/public/network/types.tsx
View File

@@ -33,7 +33,7 @@ export interface Request {
insights?: Insights;
}
export type Requests = DataSource<Request, 'id', string>;
export type Requests = DataSource<Request>;
export type SerializedRequest = Omit<
Request,