|
| 1 | +### DataGridViewer |
| 2 | + |
| 3 | +The `DataGridViewer` panel is used to visualize Comet `DataGrids` which |
| 4 | +can contain Images, text, and numeric data. |
| 5 | + |
| 6 | +The UX is a sophisticated approach to grouping data to see (and select) |
| 7 | +images and other data in a tabular format, with a search feature that |
| 8 | +allows fast querying of the data (including metadata) using Python syntax. |
| 9 | + |
| 10 | +#### Snapshots |
| 11 | + |
| 12 | +<table> |
| 13 | +<tr> |
| 14 | +<td> |
| 15 | +<img src="https://raw.githubusercontent.com/comet-ml/comet-examples/refs/heads/master/panels/DataGridViewer/tabular-view.png" |
| 16 | + style="max-width: 300px; max-height: 300px;"> |
| 17 | +</img> |
| 18 | +</td> |
| 19 | +<td> |
| 20 | +<img src="https://raw.githubusercontent.com/comet-ml/comet-examples/refs/heads/master/panels/DataGridViewer/group-by.png" |
| 21 | + style="max-width: 300px; max-height: 300px;"> |
| 22 | +</img> |
| 23 | +</td> |
| 24 | +<td> |
| 25 | +<img src="https://raw.githubusercontent.com/comet-ml/comet-examples/refs/heads/master/panels/DataGridViewer/image-dialog.png" |
| 26 | + style="max-width: 300px; max-height: 300px;"> |
| 27 | +</img> |
| 28 | +</td> |
| 29 | +</tr> |
| 30 | +</table> |
| 31 | + |
| 32 | +#### Example Code |
| 33 | + |
| 34 | +``` |
| 35 | +%pip install comet_ml datagrid |
| 36 | +
|
| 37 | +import comet_ml |
| 38 | +from datagrid import DataGrid, Image |
| 39 | +import requests |
| 40 | +
|
| 41 | +experiment = comet_ml.start( |
| 42 | + project_name="demo-datagrids" |
| 43 | +) |
| 44 | +dg = DataGrid( |
| 45 | + columns=["Image", "Score", "Category"], |
| 46 | + name="Demo" |
| 47 | +) |
| 48 | +url = f"https://picsum.photos/300/200" |
| 49 | +for i in range(50): |
| 50 | + im = PImage.open(requests.get(url, stream=True).raw) |
| 51 | + category = random.choice(categories) |
| 52 | + score = random.random() |
| 53 | + label = random.choice(items) |
| 54 | + image = Image( |
| 55 | + im, |
| 56 | + metadata={"category": category, "score": score}, |
| 57 | + ) |
| 58 | + dg.append([image, score, category]) |
| 59 | +
|
| 60 | +dg.log(experiment) |
| 61 | +experiment.end() |
| 62 | +``` |
| 63 | + |
| 64 | +#### Resources |
| 65 | + |
| 66 | +* Copy panel to workspace: |
| 67 | + * `cometx log YOUR-WORKSPACE DataGridViewer --type panel` |
| 68 | + * Via code (see notebook below) |
| 69 | +* Example notebook: [DataGridViewer.ipynb](https://github.com/comet-ml/comet-examples/blob/master/panels/DataGridViewer/DataGridViewer.ipynb) |
| 70 | + * [Run in colab](https://colab.research.google.com/github/comet-ml/comet-examples/blob/master/panels/DataGridViewer/DataGridViewer.ipynb) |
| 71 | + * [Open in NBViewer](https://nbviewer.org/github/comet-ml/comet-examples/blob/master/panels/DataGridViewer/DataGridViewer.ipynb) |
| 72 | +* Example Comet Project: [www.comet.com/examples/comet-example-datagrid](https://www.comet.com/examples/comet-example-datagrid/view/dVz9h6RFURYwHVQcgXvJ3RWqU/panels) |
| 73 | +* Documentation: |
| 74 | + * [DataGrid](https://github.com/dsblank/datagrid) |
| 75 | + * [Search syntax](https://github.com/dsblank/datagrid/blob/main/Search.md) |
0 commit comments