Skip to content

Commit 2a43b17

Browse files
gjmooneygjmooney
committed
Add HTML Renderer
Signed-off-by: gjmooney <[email protected]>
1 parent dc50201 commit 2a43b17

File tree

10 files changed

+614
-4
lines changed

10 files changed

+614
-4
lines changed

‎examples/HtmlRenderer.ipynb

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
{
2+
"cells": [
3+
{
4+
"cell_type": "code",
5+
"execution_count": 1,
6+
"id": "f2b527c8-901e-488f-b08e-ae3daa4cf4a1",
7+
"metadata": {},
8+
"outputs": [],
9+
"source": [
10+
"import json\n",
11+
"\n",
12+
"import numpy as np\n",
13+
"import pandas as pd\n",
14+
"from bqplot import ColorScale\n",
15+
"\n",
16+
"from ipydatagrid import Expr, DataGrid, TextRenderer, BarRenderer, HtmlRenderer"
17+
]
18+
},
19+
{
20+
"cell_type": "code",
21+
"execution_count": 10,
22+
"id": "3d2537f5-ae31-4ccb-bc74-700b08f85bcc",
23+
"metadata": {},
24+
"outputs": [],
25+
"source": [
26+
"n = 5\n",
27+
"\n",
28+
"df = pd.DataFrame(\n",
29+
" {\n",
30+
" \"Value 1\": [1, 2, 3, 4, 5],\n",
31+
" \"Value 2\": '<ol><li>Item 1</li><li>Item 2</li><li>Item 3</li></ol>',\n",
32+
" \"Value 3\": '<p><strong style=\"color: olive\">Bold Text</strong></p><p><em style=\"background-color: yellow\">Italic Text</em></p><p><u>Underlined Text</u></p><p><s>Strikethrough Text</s></p>'\n",
33+
" }\n",
34+
")"
35+
]
36+
},
37+
{
38+
"cell_type": "code",
39+
"execution_count": 11,
40+
"id": "e6ec592c-5811-487c-bd8a-b2a3b14e892e",
41+
"metadata": {},
42+
"outputs": [],
43+
"source": [
44+
"text_renderer = TextRenderer(\n",
45+
" text_color=\"black\", background_color=ColorScale(min=-5, max=5)\n",
46+
")\n",
47+
"\n",
48+
"html_renderer = HtmlRenderer(text_color='blue', background_color='aliceblue', horizontal_alignment='right', vertical_alignment='bottom')\n",
49+
"\n",
50+
"renderers = {\n",
51+
" \"Value 1\": text_renderer,\n",
52+
" \"Value 2\": html_renderer,\n",
53+
" \"Value 3\": html_renderer,\n",
54+
" \n",
55+
"}"
56+
]
57+
},
58+
{
59+
"cell_type": "code",
60+
"execution_count": 12,
61+
"id": "9113bdb2-92a4-46ec-bcf0-ad350616fcea",
62+
"metadata": {},
63+
"outputs": [],
64+
"source": [
65+
"grid = DataGrid(df, renderers=renderers,base_row_size=140, base_column_size=100)"
66+
]
67+
},
68+
{
69+
"cell_type": "code",
70+
"execution_count": 13,
71+
"id": "ea4d76ec-9efe-41c3-84cb-399c46b53f02",
72+
"metadata": {},
73+
"outputs": [
74+
{
75+
"data": {
76+
"application/vnd.jupyter.widget-view+json": {
77+
"model_id": "750bcc6f601d4d79876995609422dd1e",
78+
"version_major": 2,
79+
"version_minor": 0
80+
},
81+
"text/plain": [
82+
"DataGrid(auto_fit_params={'area': 'all', 'padding': 30, 'numCols': None}, base_column_size=100, base_row_size=…"
83+
]
84+
},
85+
"execution_count": 13,
86+
"metadata": {},
87+
"output_type": "execute_result"
88+
}
89+
],
90+
"source": [
91+
"grid"
92+
]
93+
},
94+
{
95+
"cell_type": "code",
96+
"execution_count": null,
97+
"id": "dd2dfa48-2624-4258-b2fa-dc759adf20e0",
98+
"metadata": {},
99+
"outputs": [],
100+
"source": []
101+
}
102+
],
103+
"metadata": {
104+
"kernelspec": {
105+
"display_name": "Python 3 (ipykernel)",
106+
"language": "python",
107+
"name": "python3"
108+
},
109+
"language_info": {
110+
"codemirror_mode": {
111+
"name": "ipython",
112+
"version": 3
113+
},
114+
"file_extension": ".py",
115+
"mimetype": "text/x-python",
116+
"name": "python",
117+
"nbconvert_exporter": "python",
118+
"pygments_lexer": "ipython3",
119+
"version": "3.12.2"
120+
}
121+
},
122+
"nbformat": 4,
123+
"nbformat_minor": 5
124+
}

‎ipydatagrid/__init__.py

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
BarRenderer,
77
CellRenderer,
88
Expr,
9+
HtmlRenderer,
910
HyperlinkRenderer,
1011
ImageRenderer,
1112
TextRenderer,
@@ -37,6 +38,7 @@ def _jupyter_labextension_paths():
3738
"HyperlinkRenderer",
3839
"ImageRenderer",
3940
"TextRenderer",
41+
"HtmlRenderer",
4042
"VegaExpr",
4143
"DataGrid",
4244
"SelectionHelper",

‎ipydatagrid/cellrenderer.py

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -193,3 +193,44 @@ class ImageRenderer(CellRenderer):
193193
allow_none=True,
194194
default_value="100%",
195195
).tag(sync=True, **widget_serialization)
196+
197+
198+
class HtmlRenderer(CellRenderer):
199+
_model_name = Unicode("HtmlRendererModel").tag(sync=True)
200+
_view_name = Unicode("HtmlRendererView").tag(sync=True)
201+
202+
font = Union(
203+
(Unicode(), Instance(VegaExpr), Instance(Scale)),
204+
default_value="12px sans-serif",
205+
).tag(sync=True, **widget_serialization)
206+
text_color = Union(
207+
(Color(), Instance(VegaExpr), Instance(ColorScale)),
208+
).tag(sync=True, **widget_serialization)
209+
background_color = Union(
210+
(Color(), Instance(VegaExpr), Instance(ColorScale)),
211+
).tag(sync=True, **widget_serialization)
212+
placeholder = Unicode().tag(sync=True)
213+
vertical_alignment = Union(
214+
(
215+
Enum(values=["top", "center", "bottom"]),
216+
Instance(VegaExpr),
217+
Instance(Scale),
218+
),
219+
default_value="center",
220+
).tag(sync=True, **widget_serialization)
221+
horizontal_alignment = Union(
222+
(
223+
Enum(values=["left", "center", "right"]),
224+
Instance(VegaExpr),
225+
Instance(Scale),
226+
),
227+
default_value="left",
228+
).tag(sync=True, **widget_serialization)
229+
230+
@default("text_color")
231+
def _default_text_color(self):
232+
return Expr("default_value")
233+
234+
@default("background_color")
235+
def _default_background_color(self):
236+
return Expr("default_value")

‎js/cellrenderer.ts

Lines changed: 80 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,21 @@
11
// Copyright (c) Bloomberg
22
// Distributed under the terms of the Modified BSD License.
33

4-
import * as _ from 'underscore';
5-
64
const d3Format: any = require('d3-format');
75
const d3TimeFormat: any = require('d3-time-format');
86

97
import {
108
CellRenderer,
11-
TextRenderer,
129
HyperlinkRenderer,
1310
ImageRenderer,
11+
TextRenderer,
1412
} from '@lumino/datagrid';
1513

1614
import {
1715
Dict,
16+
ISerializers,
1817
WidgetModel,
1918
WidgetView,
20-
ISerializers,
2119
resolvePromisesDict,
2220
unpack_models,
2321
} from '@jupyter-widgets/base';
@@ -28,6 +26,7 @@ import { BarRenderer } from './core/barrenderer';
2826

2927
import { VegaExprView } from './vegaexpr';
3028

29+
import { HtmlRenderer } from './core/htmlRenderer';
3130
import { Scalar, Theme } from './utils';
3231

3332
// Temporary, will be removed when the scales are exported from bqplot
@@ -524,3 +523,80 @@ export class ImageRendererView extends CellRendererView {
524523

525524
model: ImageRendererModel;
526525
}
526+
527+
export class HtmlRendererModel extends CellRendererModel {
528+
defaults() {
529+
return {
530+
...super.defaults(),
531+
_model_name: HtmlRendererModel.model_name,
532+
_view_name: HtmlRendererModel.view_name,
533+
font: '12px sans-serif',
534+
placeholder: '...',
535+
text_color: null,
536+
background_color: null,
537+
vertical_alignment: 'center',
538+
horizontal_alignment: 'left',
539+
};
540+
}
541+
542+
get_attrs(): ICellRendererAttribute[] {
543+
return [
544+
{ name: 'font', phosphorName: 'font', defaultValue: '12px sans-serif' },
545+
{ name: 'placeholder', phosphorName: 'placeholder', defaultValue: '...' },
546+
{
547+
name: 'text_color',
548+
phosphorName: 'textColor',
549+
defaultValue: Theme.getFontColor(),
550+
},
551+
{
552+
name: 'background_color',
553+
phosphorName: 'backgroundColor',
554+
defaultValue: Theme.getBackgroundColor(),
555+
},
556+
{
557+
name: 'vertical_alignment',
558+
phosphorName: 'verticalAlignment',
559+
defaultValue: 'center',
560+
},
561+
{
562+
name: 'horizontal_alignment',
563+
phosphorName: 'horizontalAlignment',
564+
defaultValue: 'left',
565+
},
566+
];
567+
}
568+
569+
static serializers: ISerializers = {
570+
...CellRendererModel.serializers,
571+
font: { deserialize: unpack_models as any },
572+
placeholder: { deserialize: unpack_models as any },
573+
text_color: { deserialize: unpack_models as any },
574+
background_color: { deserialize: unpack_models as any },
575+
vertical_alignment: { deserialize: unpack_models as any },
576+
horizontal_alignment: { deserialize: unpack_models as any },
577+
};
578+
579+
static model_name = 'HtmlRendererModel';
580+
static view_name = 'HtmlRendererView';
581+
}
582+
583+
export class HtmlRendererView extends CellRendererView {
584+
createRenderer(options: HtmlRenderer.IOptions) {
585+
const htmRenderer = new HtmlRenderer({
586+
...options,
587+
// format: this.getFormatter(),
588+
});
589+
590+
htmRenderer.imageLoaded.connect(() => {
591+
setTimeout(() => {
592+
this.trigger('renderer-needs-update');
593+
}, 0);
594+
});
595+
596+
return htmRenderer;
597+
}
598+
599+
renderer: HtmlRenderer;
600+
601+
model: HtmlRendererModel;
602+
}

0 commit comments

Comments
 (0)