@gradio/dataset 0.2.3 → 0.2.5-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,52 @@
1
1
  # @gradio/dataset
2
2
 
3
+ ## 0.2.5-beta.1
4
+
5
+ ### Features
6
+
7
+ - [#9187](https://github.com/gradio-app/gradio/pull/9187) [`5bf00b7`](https://github.com/gradio-app/gradio/commit/5bf00b7524ebf399b48719120a49d15bb21bd65c) - make all component SSR compatible. Thanks @pngwn!
8
+
9
+ ### Dependency updates
10
+
11
+ - @gradio/atoms@0.8.1-beta.1
12
+ - @gradio/utils@0.7.0-beta.1
13
+ - @gradio/client@1.6.0-beta.1
14
+ - @gradio/upload@0.12.4-beta.1
15
+ - @gradio/textbox@0.7.0-beta.1
16
+
17
+ ## 0.2.5-beta.0
18
+
19
+ ### Fixes
20
+
21
+ - [#9163](https://github.com/gradio-app/gradio/pull/9163) [`2b6cbf2`](https://github.com/gradio-app/gradio/commit/2b6cbf25908e42cf027324e54ef2cc0baad11a91) - fix exports and generate types. Thanks @pngwn!
22
+
23
+ ### Dependency updates
24
+
25
+ - @gradio/utils@0.7.0-beta.0
26
+ - @gradio/atoms@0.8.1-beta.0
27
+ - @gradio/client@1.6.0-beta.0
28
+ - @gradio/upload@0.12.4-beta.0
29
+ - @gradio/textbox@0.7.0-beta.0
30
+
31
+ ## 0.2.4
32
+
33
+ ### Features
34
+
35
+ - [#9118](https://github.com/gradio-app/gradio/pull/9118) [`e1c404d`](https://github.com/gradio-app/gradio/commit/e1c404da1143fb52b659d03e028bdba1badf443d) - setup npm-previews of all packages. Thanks @pngwn!
36
+
37
+ ### Fixes
38
+
39
+ - [#9093](https://github.com/gradio-app/gradio/pull/9093) [`60650d8`](https://github.com/gradio-app/gradio/commit/60650d84b2cfe93fd2ebf2d2997d6c0f382d5f1a) - Reset `Dataset` page to 0 when samples change. Thanks @abidlabs!
40
+ - [#8987](https://github.com/gradio-app/gradio/pull/8987) [`7b288cf`](https://github.com/gradio-app/gradio/commit/7b288cf6772ec3dc1fa603db859975e5dab90127) - Fix unexpected rendering of Dataset. Thanks @Col0ring!
41
+
42
+ ### Dependency updates
43
+
44
+ - @gradio/utils@0.6.0
45
+ - @gradio/upload@0.12.3
46
+ - @gradio/atoms@0.8.0
47
+ - @gradio/client@1.5.1
48
+ - @gradio/textbox@0.6.11
49
+
3
50
  ## 0.2.3
4
51
 
5
52
  ### Dependency updates
package/Index.svelte CHANGED
@@ -14,6 +14,7 @@
14
14
  export let label = "Examples";
15
15
  export let headers: string[];
16
16
  export let samples: any[][] | null = null;
17
+ let old_samples: any[][] | null = null;
17
18
  export let sample_labels: string[] | null = null;
18
19
  export let elem_id = "";
19
20
  export let elem_classes: string[] = [];
@@ -35,6 +36,7 @@
35
36
  ? `/proxy=${proxy_url}file=`
36
37
  : `${root}/file=`;
37
38
  let page = 0;
39
+
38
40
  $: gallery = components.length < 2 || sample_labels !== null;
39
41
  let paginate = samples ? samples.length > samples_per_page : false;
40
42
 
@@ -53,7 +55,15 @@
53
55
  }
54
56
 
55
57
  $: {
56
- samples = sample_labels ? sample_labels.map((e) => [e]) : samples || [];
58
+ if (sample_labels) {
59
+ samples = sample_labels.map((e) => [e]);
60
+ } else if (!samples) {
61
+ samples = [];
62
+ }
63
+ if (samples !== old_samples) {
64
+ page = 0;
65
+ old_samples = samples;
66
+ }
57
67
  paginate = samples.length > samples_per_page;
58
68
  if (paginate) {
59
69
  visible_pages = [];
@@ -163,6 +173,7 @@
163
173
  type="gallery"
164
174
  selected={current_hover === i}
165
175
  index={i}
176
+ {root}
166
177
  />
167
178
  {/if}
168
179
  </button>
@@ -209,6 +220,7 @@
209
220
  type="table"
210
221
  selected={current_hover === i}
211
222
  index={i}
223
+ {root}
212
224
  />
213
225
  </td>
214
226
  {/if}
@@ -0,0 +1,339 @@
1
+ <script>import { Block } from "@gradio/atoms";
2
+ import { BaseExample } from "@gradio/textbox";
3
+ export let components;
4
+ export let component_props;
5
+ export let component_map;
6
+ export let label = "Examples";
7
+ export let headers;
8
+ export let samples = null;
9
+ let old_samples = null;
10
+ export let sample_labels = null;
11
+ export let elem_id = "";
12
+ export let elem_classes = [];
13
+ export let visible = true;
14
+ export let value = null;
15
+ export let root;
16
+ export let proxy_url;
17
+ export let samples_per_page = 10;
18
+ export let scale = null;
19
+ export let min_width = void 0;
20
+ export let gradio;
21
+ let samples_dir = proxy_url ? `/proxy=${proxy_url}file=` : `${root}/file=`;
22
+ let page = 0;
23
+ $:
24
+ gallery = components.length < 2 || sample_labels !== null;
25
+ let paginate = samples ? samples.length > samples_per_page : false;
26
+ let selected_samples;
27
+ let page_count;
28
+ let visible_pages = [];
29
+ let current_hover = -1;
30
+ function handle_mouseenter(i) {
31
+ current_hover = i;
32
+ }
33
+ function handle_mouseleave() {
34
+ current_hover = -1;
35
+ }
36
+ $: {
37
+ if (sample_labels) {
38
+ samples = sample_labels.map((e) => [e]);
39
+ } else if (!samples) {
40
+ samples = [];
41
+ }
42
+ if (samples !== old_samples) {
43
+ page = 0;
44
+ old_samples = samples;
45
+ }
46
+ paginate = samples.length > samples_per_page;
47
+ if (paginate) {
48
+ visible_pages = [];
49
+ selected_samples = samples.slice(
50
+ page * samples_per_page,
51
+ (page + 1) * samples_per_page
52
+ );
53
+ page_count = Math.ceil(samples.length / samples_per_page);
54
+ [0, page, page_count - 1].forEach((anchor) => {
55
+ for (let i = anchor - 2; i <= anchor + 2; i++) {
56
+ if (i >= 0 && i < page_count && !visible_pages.includes(i)) {
57
+ if (visible_pages.length > 0 && i - visible_pages[visible_pages.length - 1] > 1) {
58
+ visible_pages.push(-1);
59
+ }
60
+ visible_pages.push(i);
61
+ }
62
+ }
63
+ });
64
+ } else {
65
+ selected_samples = samples.slice();
66
+ }
67
+ }
68
+ let component_meta = [];
69
+ async function get_component_meta(selected_samples2) {
70
+ component_meta = await Promise.all(
71
+ selected_samples2 && selected_samples2.map(
72
+ async (sample_row) => await Promise.all(
73
+ sample_row.map(async (sample_cell, j) => {
74
+ return {
75
+ value: sample_cell,
76
+ component: (await component_map.get(components[j]))?.default
77
+ };
78
+ })
79
+ )
80
+ )
81
+ );
82
+ }
83
+ $:
84
+ component_map, get_component_meta(selected_samples);
85
+ </script>
86
+
87
+ <Block
88
+ {visible}
89
+ padding={false}
90
+ {elem_id}
91
+ {elem_classes}
92
+ {scale}
93
+ {min_width}
94
+ allow_overflow={false}
95
+ container={false}
96
+ >
97
+ <div class="label">
98
+ <svg
99
+ xmlns="http://www.w3.org/2000/svg"
100
+ xmlns:xlink="http://www.w3.org/1999/xlink"
101
+ aria-hidden="true"
102
+ role="img"
103
+ width="1em"
104
+ height="1em"
105
+ preserveAspectRatio="xMidYMid meet"
106
+ viewBox="0 0 32 32"
107
+ >
108
+ <path
109
+ fill="currentColor"
110
+ d="M10 6h18v2H10zm0 18h18v2H10zm0-9h18v2H10zm-6 0h2v2H4zm0-9h2v2H4zm0 18h2v2H4z"
111
+ />
112
+ </svg>
113
+ {label}
114
+ </div>
115
+ {#if gallery}
116
+ <div class="gallery">
117
+ {#each selected_samples as sample_row, i}
118
+ {#if sample_row[0]}
119
+ <button
120
+ class="gallery-item"
121
+ on:click={() => {
122
+ value = i + page * samples_per_page;
123
+ gradio.dispatch("click", value);
124
+ gradio.dispatch("select", { index: value, value: sample_row });
125
+ }}
126
+ on:mouseenter={() => handle_mouseenter(i)}
127
+ on:mouseleave={() => handle_mouseleave()}
128
+ >
129
+ {#if sample_labels}
130
+ <BaseExample
131
+ value={sample_row[0]}
132
+ selected={current_hover === i}
133
+ type="gallery"
134
+ />
135
+ {:else if component_meta.length && component_map.get(components[0])}
136
+ <svelte:component
137
+ this={component_meta[0][0].component}
138
+ {...component_props[0]}
139
+ value={sample_row[0]}
140
+ {samples_dir}
141
+ type="gallery"
142
+ selected={current_hover === i}
143
+ index={i}
144
+ {root}
145
+ />
146
+ {/if}
147
+ </button>
148
+ {/if}
149
+ {/each}
150
+ </div>
151
+ {:else}
152
+ <div class="table-wrap">
153
+ <table tabindex="0" role="grid">
154
+ <thead>
155
+ <tr class="tr-head">
156
+ {#each headers as header}
157
+ <th>
158
+ {header}
159
+ </th>
160
+ {/each}
161
+ </tr>
162
+ </thead>
163
+ <tbody>
164
+ {#each component_meta as sample_row, i}
165
+ <tr
166
+ class="tr-body"
167
+ on:click={() => {
168
+ value = i + page * samples_per_page;
169
+ gradio.dispatch("click", value);
170
+ }}
171
+ on:mouseenter={() => handle_mouseenter(i)}
172
+ on:mouseleave={() => handle_mouseleave()}
173
+ >
174
+ {#each sample_row as { value, component }, j}
175
+ {@const component_name = components[j]}
176
+ {#if component_name !== undefined && component_map.get(component_name) !== undefined}
177
+ <td
178
+ style="max-width: {component_name === 'textbox'
179
+ ? '35ch'
180
+ : 'auto'}"
181
+ class={component_name}
182
+ >
183
+ <svelte:component
184
+ this={component}
185
+ {...component_props[j]}
186
+ {value}
187
+ {samples_dir}
188
+ type="table"
189
+ selected={current_hover === i}
190
+ index={i}
191
+ {root}
192
+ />
193
+ </td>
194
+ {/if}
195
+ {/each}
196
+ </tr>
197
+ {/each}
198
+ </tbody>
199
+ </table>
200
+ </div>
201
+ {/if}
202
+ {#if paginate}
203
+ <div class="paginate">
204
+ Pages:
205
+ {#each visible_pages as visible_page}
206
+ {#if visible_page === -1}
207
+ <div>...</div>
208
+ {:else}
209
+ <button
210
+ class:current-page={page === visible_page}
211
+ on:click={() => (page = visible_page)}
212
+ >
213
+ {visible_page + 1}
214
+ </button>
215
+ {/if}
216
+ {/each}
217
+ </div>
218
+ {/if}
219
+ </Block>
220
+
221
+ <style>
222
+ .wrap {
223
+ display: inline-block;
224
+ width: var(--size-full);
225
+ max-width: var(--size-full);
226
+ color: var(--body-text-color);
227
+ }
228
+
229
+ .hide {
230
+ display: none;
231
+ }
232
+
233
+ .label {
234
+ display: flex;
235
+ align-items: center;
236
+ margin-bottom: var(--size-2);
237
+ color: var(--block-label-text-color);
238
+ font-weight: var(--block-label-text-weight);
239
+ font-size: var(--block-label-text-size);
240
+ line-height: var(--line-sm);
241
+ }
242
+
243
+ svg {
244
+ margin-right: var(--size-1);
245
+ }
246
+
247
+ .gallery {
248
+ display: flex;
249
+ flex-wrap: wrap;
250
+ gap: var(--spacing-lg);
251
+ }
252
+
253
+ .gallery-item {
254
+ border: 1px solid var(--border-color-primary);
255
+ border-radius: var(--button-large-radius);
256
+ overflow: hidden;
257
+ }
258
+
259
+ .gallery-item:hover {
260
+ border-color: var(--border-color-accent);
261
+ background: var(--table-row-focus);
262
+ }
263
+
264
+ .table-wrap {
265
+ border: 1px solid var(--border-color-primary);
266
+ border-radius: var(--table-radius);
267
+ width: var(--size-full);
268
+ table-layout: auto;
269
+ overflow-x: auto;
270
+ line-height: var(--line-sm);
271
+ color: var(--table-text-color);
272
+ }
273
+ table {
274
+ width: var(--size-full);
275
+ }
276
+
277
+ .tr-head {
278
+ box-shadow: var(--shadow-drop-lg);
279
+ border-bottom: 1px solid var(--border-color-primary);
280
+ }
281
+
282
+ .tr-head > * + * {
283
+ border-right-width: 0px;
284
+ border-left-width: 1px;
285
+ border-color: var(--border-color-primary);
286
+ }
287
+
288
+ th {
289
+ padding: var(--size-2);
290
+ white-space: nowrap;
291
+ }
292
+
293
+ .tr-body {
294
+ cursor: pointer;
295
+ border-bottom: 1px solid var(--border-color-primary);
296
+ background: var(--table-even-background-fill);
297
+ }
298
+
299
+ .tr-body:last-child {
300
+ border: none;
301
+ }
302
+
303
+ .tr-body:nth-child(odd) {
304
+ background: var(--table-odd-background-fill);
305
+ }
306
+
307
+ .tr-body:hover {
308
+ background: var(--table-row-focus);
309
+ }
310
+
311
+ .tr-body > * + * {
312
+ border-right-width: 0px;
313
+ border-left-width: 1px;
314
+ border-color: var(--border-color-primary);
315
+ }
316
+
317
+ .tr-body:hover > * + * {
318
+ border-color: var(--border-color-accent);
319
+ }
320
+
321
+ td {
322
+ padding: var(--size-2);
323
+ text-align: center;
324
+ }
325
+
326
+ .paginate {
327
+ display: flex;
328
+ justify-content: center;
329
+ align-items: center;
330
+ gap: var(--spacing-sm);
331
+ margin-top: var(--size-2);
332
+ color: var(--block-label-text-color);
333
+ font-size: var(--text-sm);
334
+ }
335
+
336
+ button.current-page {
337
+ font-weight: var(--weight-bold);
338
+ }
339
+ </style>
@@ -0,0 +1,39 @@
1
+ import { SvelteComponent } from "svelte";
2
+ import type { ComponentType } from "svelte";
3
+ import type { Gradio, SelectData } from "@gradio/utils";
4
+ declare const __propDef: {
5
+ props: {
6
+ components: string[];
7
+ component_props: Record<string, any>[];
8
+ component_map: Map<string, Promise<{
9
+ default: ComponentType<SvelteComponent>;
10
+ }>>;
11
+ label?: string | undefined;
12
+ headers: string[];
13
+ samples?: (any[][] | null) | undefined;
14
+ sample_labels?: (string[] | null) | undefined;
15
+ elem_id?: string | undefined;
16
+ elem_classes?: string[] | undefined;
17
+ visible?: boolean | undefined;
18
+ value?: (number | null) | undefined;
19
+ root: string;
20
+ proxy_url: null | string;
21
+ samples_per_page?: number | undefined;
22
+ scale?: (number | null) | undefined;
23
+ min_width?: number | undefined;
24
+ gradio: Gradio<{
25
+ click: number;
26
+ select: SelectData;
27
+ }>;
28
+ };
29
+ events: {
30
+ [evt: string]: CustomEvent<any>;
31
+ };
32
+ slots: {};
33
+ };
34
+ export type IndexProps = typeof __propDef.props;
35
+ export type IndexEvents = typeof __propDef.events;
36
+ export type IndexSlots = typeof __propDef.slots;
37
+ export default class Index extends SvelteComponent<IndexProps, IndexEvents, IndexSlots> {
38
+ }
39
+ export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gradio/dataset",
3
- "version": "0.2.3",
3
+ "version": "0.2.5-beta.1",
4
4
  "description": "Gradio UI packages",
5
5
  "type": "module",
6
6
  "author": "",
@@ -8,17 +8,29 @@
8
8
  "private": false,
9
9
  "main_changeset": true,
10
10
  "exports": {
11
- ".": "./Index.svelte",
11
+ ".": {
12
+ "gradio": "./Index.svelte",
13
+ "svelte": "./dist/Index.svelte",
14
+ "types": "./dist/Index.svelte.d.ts"
15
+ },
12
16
  "./package.json": "./package.json"
13
17
  },
14
18
  "dependencies": {
15
- "@gradio/atoms": "^0.7.9",
16
- "@gradio/utils": "^0.5.2",
17
- "@gradio/textbox": "^0.6.10",
18
- "@gradio/client": "^1.5.0",
19
- "@gradio/upload": "^0.12.2"
19
+ "@gradio/atoms": "^0.8.1-beta.1",
20
+ "@gradio/client": "^1.6.0-beta.1",
21
+ "@gradio/upload": "^0.12.4-beta.1",
22
+ "@gradio/textbox": "^0.7.0-beta.1",
23
+ "@gradio/utils": "^0.7.0-beta.1"
20
24
  },
21
25
  "devDependencies": {
22
- "@gradio/preview": "^0.10.2"
26
+ "@gradio/preview": "^0.11.1-beta.0"
27
+ },
28
+ "peerDependencies": {
29
+ "svelte": "^4.0.0"
30
+ },
31
+ "repository": {
32
+ "type": "git",
33
+ "url": "git+https://github.com/gradio-app/gradio.git",
34
+ "directory": "js/dataset"
23
35
  }
24
36
  }