Skip to content

Commit

Permalink
Datagrid: Introduce AsyncCellRenderer and ImageRenderer (#630)
Browse files Browse the repository at this point in the history 
* Introducing async renderers

* Iterate + add an example

* Working solution

* Add sizing modes

* Improve example

* Introduce AsyncCellRenderer class

* Fix column/row repaint after asynchronous work

* Linter

* Generate API file

* More sizing modes

* Add more options for the placeholder

* Repaint logic for merged cells

* Review

* Add tests

* Linter
  • Loading branch information
@martinRenou
martinRenou authored Sep 9, 2023
1 parent b5a534c commit a9bc1b7
Show file tree
Hide file tree
Showing 8 changed files with 664 additions and 4 deletions.
82 changes: 80 additions & 2 deletions examples/example-datagrid/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@ import {
ICellEditor,
JSONModel,
MutableDataModel,
TextRenderer
TextRenderer,
ImageRenderer
} from '@lumino/datagrid';

import { DockPanel, StackedPanel, Widget } from '@lumino/widgets';
Expand Down Expand Up @@ -576,7 +577,7 @@ function main(): void {
let grid5 = new DataGrid({
style: greenStripeStyle,
defaultSizes: {
rowHeight: 32,
rowHeight: 75,
columnWidth: 128,
rowHeaderWidth: 64,
columnHeaderHeight: 32
Expand All @@ -590,6 +591,29 @@ function main(): void {
selectionMode: 'row'
});

const imageRenderer = new ImageRenderer({
width: '100%',
height: '' // Will be computed automatically
// Other options:
// width: '50px',
// height: '50px',
//
// width: '100%',
// height: '50px',
//
// For keeping the original size:
// width: '',
// height: '',
});
grid5.cellRenderers.update({
body: (config: CellRenderer.CellConfig) => {
if (config.metadata.name === 'Image') {
return imageRenderer;
}
return undefined;
}
});

let grid6 = new DataGrid({
defaultSizes: {
rowHeight: 32,
Expand Down Expand Up @@ -962,6 +986,8 @@ namespace Data {
Origin: 'USA',
Miles_per_Gallon: 18.0,
Name: 'chevrolet chevelle malibu',
Image:
'https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/1966_Chevrolet_Chevelle_SS_%2832985111206%29.jpg/420px-1966_Chevrolet_Chevelle_SS_%2832985111206%29.jpg',
index: 0,
Acceleration: 12.0,
Year: '1970-01-01',
Expand All @@ -974,6 +1000,8 @@ namespace Data {
Origin: 'USA',
Miles_per_Gallon: 15.0,
Name: 'buick skylark 320',
Image:
'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1d/1972_Buick_Skylark_Front.jpg/420px-1972_Buick_Skylark_Front.jpg',
index: 1,
Acceleration: 11.5,
Year: '1970-01-01',
Expand All @@ -986,6 +1014,8 @@ namespace Data {
Origin: 'USA',
Miles_per_Gallon: 18.0,
Name: 'plymouth satellite',
Image:
'https://upload.wikimedia.org/wikipedia/commons/thumb/f/f0/66Sat.jpg/420px-66Sat.jpg',
index: 2,
Acceleration: 11.0,
Year: '1970-01-01',
Expand All @@ -998,6 +1028,8 @@ namespace Data {
Origin: 'USA',
Miles_per_Gallon: 16.0,
Name: 'amc rebel sst',
Image:
'https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/1968_AMC_Rebel_Station_Wagon-GoldWhite.jpg/420px-1968_AMC_Rebel_Station_Wagon-GoldWhite.jpg',
index: 3,
Acceleration: 12.0,
Year: '1970-01-01',
Expand All @@ -1010,6 +1042,8 @@ namespace Data {
Origin: 'USA',
Miles_per_Gallon: 17.0,
Name: 'ford torino',
Image:
'https://upload.wikimedia.org/wikipedia/commons/thumb/0/03/1970_ford_torino_cobra_sportsroof_chiolero.jpg/420px-1970_ford_torino_cobra_sportsroof_chiolero.jpg',
index: 4,
Acceleration: 10.5,
Year: '1970-01-01',
Expand All @@ -1022,6 +1056,8 @@ namespace Data {
Origin: 'USA',
Miles_per_Gallon: 15.0,
Name: 'ford galaxie 500',
Image:
'https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/1963_Ford_Galaxie_sedan_2_--_06-05-2010.jpg/420px-1963_Ford_Galaxie_sedan_2_--_06-05-2010.jpg',
index: 5,
Acceleration: 10.0,
Year: '1970-01-01',
Expand All @@ -1034,6 +1070,8 @@ namespace Data {
Origin: 'USA',
Miles_per_Gallon: 14.0,
Name: 'chevrolet impala',
Image:
'https://upload.wikimedia.org/wikipedia/commons/thumb/2/28/1965_Chevrolet_Impala_300_hp_V8_big_Block_Engine.JPG/420px-1965_Chevrolet_Impala_300_hp_V8_big_Block_Engine.JPG',
index: 6,
Acceleration: 9.0,
Year: '1970-01-01',
Expand All @@ -1046,6 +1084,8 @@ namespace Data {
Origin: 'USA',
Miles_per_Gallon: 14.0,
Name: 'plymouth fury iii',
Image:
'https://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/1959_Plymouth_Sport_Fury_photo-13.JPG/420px-1959_Plymouth_Sport_Fury_photo-13.JPG',
index: 7,
Acceleration: 8.5,
Year: '1970-01-01',
Expand All @@ -1058,6 +1098,8 @@ namespace Data {
Origin: 'USA',
Miles_per_Gallon: 14.0,
Name: 'pontiac catalina',
Image:
'https://upload.wikimedia.org/wikipedia/commons/thumb/4/4d/Pontiac_Catalina_front.jpg/420px-Pontiac_Catalina_front.jpg',
index: 8,
Acceleration: 10.0,
Year: '1970-01-01',
Expand All @@ -1070,6 +1112,8 @@ namespace Data {
Origin: 'USA',
Miles_per_Gallon: 15.0,
Name: 'amc ambassador dpl',
Image:
'https://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/1964_Rambler_Ambassador_990_H_in_black_and_white_with_red_interior_at_2017_AMO_meet_01of16.jpg/420px-1964_Rambler_Ambassador_990_H_in_black_and_white_with_red_interior_at_2017_AMO_meet_01of16.jpg',
index: 9,
Acceleration: 8.5,
Year: '1970-01-01',
Expand All @@ -1082,6 +1126,8 @@ namespace Data {
Origin: 'Europe',
Miles_per_Gallon: null,
Name: 'citroen ds-21 pallas',
Image:
'https://upload.wikimedia.org/wikipedia/commons/thumb/5/58/Festival_automobile_international_2018_-_Citro%C3%ABn_DS_21_-_1965_-_002.jpg/300px-Festival_automobile_international_2018_-_Citro%C3%ABn_DS_21_-_1965_-_002.jpg',
index: 10,
Acceleration: 17.5,
Year: '1970-01-01',
Expand All @@ -1094,6 +1140,8 @@ namespace Data {
Origin: 'USA',
Miles_per_Gallon: null,
Name: 'chevrolet chevelle concours (sw)',
Image:
'https://upload.wikimedia.org/wikipedia/commons/thumb/8/8f/1969_Chevrolet_Chevelle_SS396_2_door_Hardtop_%2825260012813%29.jpg/270px-1969_Chevrolet_Chevelle_SS396_2_door_Hardtop_%2825260012813%29.jpg',
index: 11,
Acceleration: 11.5,
Year: '1970-01-01',
Expand All @@ -1106,6 +1154,8 @@ namespace Data {
Origin: 'USA',
Miles_per_Gallon: null,
Name: 'ford torino (sw)',
Image:
'https://upload.wikimedia.org/wikipedia/commons/thumb/0/03/1970_ford_torino_cobra_sportsroof_chiolero.jpg/420px-1970_ford_torino_cobra_sportsroof_chiolero.jpg',
index: 12,
Acceleration: 11.0,
Year: '1970-01-01',
Expand All @@ -1118,6 +1168,8 @@ namespace Data {
Origin: 'USA',
Miles_per_Gallon: null,
Name: 'plymouth satellite (sw)',
Image:
'https://upload.wikimedia.org/wikipedia/commons/thumb/f/f0/66Sat.jpg/420px-66Sat.jpg',
index: 13,
Acceleration: 10.5,
Year: '1970-01-01',
Expand All @@ -1130,6 +1182,8 @@ namespace Data {
Origin: 'USA',
Miles_per_Gallon: null,
Name: 'amc rebel sst (sw)',
Image:
'https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/1968_AMC_Rebel_Station_Wagon-GoldWhite.jpg/420px-1968_AMC_Rebel_Station_Wagon-GoldWhite.jpg',
index: 14,
Acceleration: 11.0,
Year: '1970-01-01',
Expand All @@ -1142,6 +1196,8 @@ namespace Data {
Origin: 'USA',
Miles_per_Gallon: 15.0,
Name: 'dodge challenger se',
Image:
'https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/1970_Dodge_Challenger_RT_440_Magnum_%2813440447413%29.jpg/420px-1970_Dodge_Challenger_RT_440_Magnum_%2813440447413%29.jpg',
index: 15,
Acceleration: 10.0,
Year: '1970-01-01',
Expand All @@ -1154,6 +1210,8 @@ namespace Data {
Origin: 'USA',
Miles_per_Gallon: 14.0,
Name: "plymouth 'cuda 340",
Image:
'https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/%2770_Plymouth_Barracuda_%28%2711_Auto_classique_VAQ_Mont_St-Hilaire%29.JPG/420px-%2770_Plymouth_Barracuda_%28%2711_Auto_classique_VAQ_Mont_St-Hilaire%29.JPG',
index: 16,
Acceleration: 8.0,
Year: '1970-01-01',
Expand All @@ -1166,6 +1224,8 @@ namespace Data {
Origin: 'USA',
Miles_per_Gallon: null,
Name: 'ford mustang boss 302',
Image:
'https://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/1970_Ford_Mustang_Boss_302_%2815863840731%29.jpg/420px-1970_Ford_Mustang_Boss_302_%2815863840731%29.jpg',
index: 17,
Acceleration: 8.0,
Year: '1970-01-01',
Expand All @@ -1178,6 +1238,8 @@ namespace Data {
Origin: 'USA',
Miles_per_Gallon: 15.0,
Name: 'chevrolet monte carlo',
Image:
'https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Chevrolet_Monte_Carlo_1970_P6170033.jpg/420px-Chevrolet_Monte_Carlo_1970_P6170033.jpg',
index: 18,
Acceleration: 9.5,
Year: '1970-01-01',
Expand All @@ -1190,6 +1252,8 @@ namespace Data {
Origin: 'USA',
Miles_per_Gallon: 14.0,
Name: 'buick estate wagon (sw)',
Image:
'https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/1987_Buick_Electra_Estate_a_station_wagon_at_2019_AACA_Hershey_meet_1of3.jpg/420px-1987_Buick_Electra_Estate_a_station_wagon_at_2019_AACA_Hershey_meet_1of3.jpg',
index: 19,
Acceleration: 10.0,
Year: '1970-01-01',
Expand All @@ -1202,6 +1266,7 @@ namespace Data {
Origin: 'Japan',
Miles_per_Gallon: 24.0,
Name: 'toyota corona mark ii',
Image: '',
index: 20,
Acceleration: 15.0,
Year: '1970-01-01',
Expand All @@ -1214,6 +1279,7 @@ namespace Data {
Origin: 'USA',
Miles_per_Gallon: 22.0,
Name: 'plymouth duster',
Image: '',
index: 21,
Acceleration: 15.5,
Year: '1970-01-01',
Expand All @@ -1226,6 +1292,7 @@ namespace Data {
Origin: 'USA',
Miles_per_Gallon: 18.0,
Name: 'amc hornet',
Image: '',
index: 22,
Acceleration: 15.5,
Year: '1970-01-01',
Expand All @@ -1238,6 +1305,7 @@ namespace Data {
Origin: 'USA',
Miles_per_Gallon: 21.0,
Name: 'ford maverick',
Image: '',
index: 23,
Acceleration: 16.0,
Year: '1970-01-01',
Expand All @@ -1250,6 +1318,7 @@ namespace Data {
Origin: 'Japan',
Miles_per_Gallon: 27.0,
Name: 'datsun pl510',
Image: '',
index: 24,
Acceleration: 14.5,
Year: '1970-01-01',
Expand All @@ -1262,6 +1331,7 @@ namespace Data {
Origin: 'Europe',
Miles_per_Gallon: 26.0,
Name: 'volkswagen 1131 deluxe sedan',
Image: '',
index: 25,
Acceleration: 20.5,
Year: '1970-01-01',
Expand All @@ -1274,6 +1344,7 @@ namespace Data {
Origin: 'Europe',
Miles_per_Gallon: 25.0,
Name: 'peugeot 504',
Image: '',
index: 26,
Acceleration: 17.5,
Year: '1970-01-01',
Expand All @@ -1286,6 +1357,7 @@ namespace Data {
Origin: 'Europe',
Miles_per_Gallon: 24.0,
Name: 'audi 100 ls',
Image: '',
index: 27,
Acceleration: 14.5,
Year: '1970-01-01',
Expand All @@ -1298,6 +1370,7 @@ namespace Data {
Origin: 'Europe',
Miles_per_Gallon: 25.0,
Name: 'saab 99e',
Image: '',
index: 28,
Acceleration: 17.5,
Year: '1970-01-01',
Expand All @@ -1310,6 +1383,7 @@ namespace Data {
Origin: 'Europe',
Miles_per_Gallon: 26.0,
Name: 'bmw 2002',
Image: '',
index: 29,
Acceleration: 12.5,
Year: '1970-01-01',
Expand Down Expand Up @@ -1349,6 +1423,10 @@ namespace Data {
name: 'Name',
type: 'string'
},
{
name: 'Image',
type: 'string'
},
{
name: 'Origin',
type: 'string'
Expand Down
53 changes: 53 additions & 0 deletions packages/datagrid/src/asynccellrenderer.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
// Copyright (c) Jupyter Development Team.
// Distributed under the terms of the Modified BSD License.
/*-----------------------------------------------------------------------------
| Copyright (c) 2014-2023, Lumino Contributors
|
| Distributed under the terms of the BSD 3-Clause License.
|
| The full license is in the file LICENSE, distributed with this software.
|----------------------------------------------------------------------------*/

import { CellRenderer } from './cellrenderer';
import { GraphicsContext } from './graphicscontext';

/**
* An object which renders the cells of a data grid asynchronously.
*
* #### Notes
* For performance reason, the datagrid only paints cells synchronously,
* though if your cell renderer inherits from AsyncCellRenderer, you will
* be able to do some asynchronous work prior to painting the cell.
* See `ImageRenderer` for an example of an asynchronous renderer.
*/
export abstract class AsyncCellRenderer extends CellRenderer {
/**
* Whether the renderer is ready or not for that specific config.
* If it's not ready, the datagrid will paint the placeholder using `paintPlaceholder`.
* If it's ready, the datagrid will paint the cell synchronously using `paint`.
*
* @param config - The configuration data for the cell.
*
* @returns Whether the renderer is ready for this config or not.
*/
abstract isReady(config: CellRenderer.CellConfig): boolean;

/**
* Do any asynchronous work prior to painting this cell config.
*
* @param config - The configuration data for the cell.
*/
abstract load(config: CellRenderer.CellConfig): Promise<void>;

/**
* Paint the placeholder for a cell, waiting for the renderer to be ready.
*
* @param gc - The graphics context to use for drawing.
*
* @param config - The configuration data for the cell.
*/
abstract paintPlaceholder(
gc: GraphicsContext,
config: CellRenderer.CellConfig
): void;
}
Loading

0 comments on commit a9bc1b7

Please sign in to comment.