@gradio/dataframe 0.20.0 → 0.20.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 +11 -0
- package/Standalone.stories.svelte +168 -0
- package/dist/shared/Toolbar.svelte +19 -11
- package/dist/standalone/Index.svelte +30 -0
- package/package.json +7 -7
- package/shared/Toolbar.svelte +19 -11
- package/standalone/Index.svelte +30 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,16 @@
|
|
|
1
1
|
# @gradio/dataframe
|
|
2
2
|
|
|
3
|
+
## 0.20.1
|
|
4
|
+
|
|
5
|
+
### Fixes
|
|
6
|
+
|
|
7
|
+
- [#11964](https://github.com/gradio-app/gradio/pull/11964) [`86e6176`](https://github.com/gradio-app/gradio/commit/86e61763a14c745f7eb0ce35b861ea2be2336a15) - Add dark mode to storybook. Thanks @hannahblair!
|
|
8
|
+
|
|
9
|
+
### Dependency updates
|
|
10
|
+
|
|
11
|
+
- @gradio/upload@0.17.1
|
|
12
|
+
- @gradio/atoms@0.18.1
|
|
13
|
+
|
|
3
14
|
## 0.20.0
|
|
4
15
|
|
|
5
16
|
### Features
|
|
@@ -0,0 +1,168 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
|
|
3
|
+
import StandaloneDataframe from "./standalone/Index.svelte";
|
|
4
|
+
</script>
|
|
5
|
+
|
|
6
|
+
<Meta
|
|
7
|
+
title="Components/Standalone Dataframe"
|
|
8
|
+
component={StandaloneDataframe}
|
|
9
|
+
parameters={{
|
|
10
|
+
test: {
|
|
11
|
+
dangerouslyIgnoreUnhandledErrors: true
|
|
12
|
+
},
|
|
13
|
+
docs: {
|
|
14
|
+
description: {
|
|
15
|
+
component:
|
|
16
|
+
"Standalone DataFrame component that can be used independently outside of Gradio apps. Includes comprehensive CSS variables for theming and dark mode support. Use the dark mode toggle in the toolbar to test dark mode variables."
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
}}
|
|
20
|
+
argTypes={{
|
|
21
|
+
interactive: {
|
|
22
|
+
control: "boolean",
|
|
23
|
+
description: "Whether the DataFrame is editable",
|
|
24
|
+
defaultValue: true
|
|
25
|
+
},
|
|
26
|
+
show_label: {
|
|
27
|
+
control: "boolean",
|
|
28
|
+
description: "Whether to show the label",
|
|
29
|
+
defaultValue: true
|
|
30
|
+
},
|
|
31
|
+
label: {
|
|
32
|
+
control: "text",
|
|
33
|
+
description: "Label for the DataFrame",
|
|
34
|
+
defaultValue: "DataFrame"
|
|
35
|
+
},
|
|
36
|
+
max_height: {
|
|
37
|
+
control: "number",
|
|
38
|
+
description: "Maximum height in pixels",
|
|
39
|
+
defaultValue: 500
|
|
40
|
+
},
|
|
41
|
+
show_search: {
|
|
42
|
+
control: "select",
|
|
43
|
+
options: ["none", "search", "filter"],
|
|
44
|
+
description: "Type of search/filter to show",
|
|
45
|
+
defaultValue: "none"
|
|
46
|
+
},
|
|
47
|
+
show_copy_button: {
|
|
48
|
+
control: "boolean",
|
|
49
|
+
description: "Whether to show the copy button",
|
|
50
|
+
defaultValue: false
|
|
51
|
+
},
|
|
52
|
+
show_fullscreen_button: {
|
|
53
|
+
control: "boolean",
|
|
54
|
+
description: "Whether to show the fullscreen button",
|
|
55
|
+
defaultValue: false
|
|
56
|
+
},
|
|
57
|
+
show_row_numbers: {
|
|
58
|
+
control: "boolean",
|
|
59
|
+
description: "Whether to show row numbers",
|
|
60
|
+
defaultValue: false
|
|
61
|
+
},
|
|
62
|
+
wrap: {
|
|
63
|
+
control: "boolean",
|
|
64
|
+
description: "Whether text should wrap or truncate with ellipsis",
|
|
65
|
+
defaultValue: false
|
|
66
|
+
}
|
|
67
|
+
}}
|
|
68
|
+
/>
|
|
69
|
+
|
|
70
|
+
<Template let:args>
|
|
71
|
+
<div class="standalone-container">
|
|
72
|
+
<StandaloneDataframe {...args} />
|
|
73
|
+
</div>
|
|
74
|
+
</Template>
|
|
75
|
+
|
|
76
|
+
<Story
|
|
77
|
+
name="Basic Standalone"
|
|
78
|
+
args={{
|
|
79
|
+
value: {
|
|
80
|
+
data: [
|
|
81
|
+
["Alice Johnson", 28, "Engineer", 75000, true],
|
|
82
|
+
["Bob Smith", 35, "Designer", 65000, false],
|
|
83
|
+
["Carol Wilson", 42, "Manager", 85000, true],
|
|
84
|
+
["David Brown", 31, "Developer", 70000, true],
|
|
85
|
+
["Eva Davis", 29, "Analyst", 60000, false]
|
|
86
|
+
],
|
|
87
|
+
headers: ["Name", "Age", "Role", "Salary", "Remote"],
|
|
88
|
+
metadata: null
|
|
89
|
+
},
|
|
90
|
+
datatype: ["str", "number", "str", "number", "bool"],
|
|
91
|
+
interactive: true,
|
|
92
|
+
show_label: true,
|
|
93
|
+
label: "Employee Data",
|
|
94
|
+
max_height: 400,
|
|
95
|
+
show_search: "search",
|
|
96
|
+
show_copy_button: true,
|
|
97
|
+
show_fullscreen_button: true
|
|
98
|
+
}}
|
|
99
|
+
/>
|
|
100
|
+
|
|
101
|
+
<Story
|
|
102
|
+
name="Large Dataset Performance"
|
|
103
|
+
args={{
|
|
104
|
+
value: {
|
|
105
|
+
data: Array.from({ length: 100 }, (_, i) => [
|
|
106
|
+
`User ${i + 1}`,
|
|
107
|
+
Math.floor(Math.random() * 50) + 20,
|
|
108
|
+
["Engineer", "Designer", "Manager", "Developer", "Analyst"][
|
|
109
|
+
Math.floor(Math.random() * 5)
|
|
110
|
+
],
|
|
111
|
+
Math.floor(Math.random() * 50000) + 50000,
|
|
112
|
+
Math.random() > 0.5,
|
|
113
|
+
`City ${Math.floor(Math.random() * 20) + 1}`,
|
|
114
|
+
Math.floor(Math.random() * 100)
|
|
115
|
+
]),
|
|
116
|
+
headers: ["Name", "Age", "Role", "Salary", "Remote", "Location", "Score"],
|
|
117
|
+
metadata: null
|
|
118
|
+
},
|
|
119
|
+
datatype: ["str", "number", "str", "number", "bool", "str", "number"],
|
|
120
|
+
interactive: false,
|
|
121
|
+
show_label: true,
|
|
122
|
+
label: "Large Dataset (100 rows)",
|
|
123
|
+
max_height: 400,
|
|
124
|
+
show_row_numbers: true,
|
|
125
|
+
column_widths: ["120px", "60px", "100px", "80px", "70px", "100px", "70px"]
|
|
126
|
+
}}
|
|
127
|
+
/>
|
|
128
|
+
|
|
129
|
+
<Story
|
|
130
|
+
name="Styled with Custom Colors"
|
|
131
|
+
args={{
|
|
132
|
+
value: {
|
|
133
|
+
data: [
|
|
134
|
+
[95, 87, 92],
|
|
135
|
+
[78, 94, 89],
|
|
136
|
+
[88, 91, 85],
|
|
137
|
+
[92, 76, 94]
|
|
138
|
+
],
|
|
139
|
+
headers: ["Math", "Science", "English"],
|
|
140
|
+
metadata: {
|
|
141
|
+
styling: [
|
|
142
|
+
[
|
|
143
|
+
"background-color: #dcfce7; color: #166534;",
|
|
144
|
+
"",
|
|
145
|
+
"background-color: #dbeafe; color: #1e40af;"
|
|
146
|
+
],
|
|
147
|
+
["", "background-color: #dcfce7; color: #166534;", ""],
|
|
148
|
+
[
|
|
149
|
+
"background-color: #fef3c7; color: #92400e;",
|
|
150
|
+
"",
|
|
151
|
+
"background-color: #fef3c7; color: #92400e;"
|
|
152
|
+
],
|
|
153
|
+
[
|
|
154
|
+
"background-color: #dcfce7; color: #166534;",
|
|
155
|
+
"",
|
|
156
|
+
"background-color: #dcfce7; color: #166534;"
|
|
157
|
+
]
|
|
158
|
+
]
|
|
159
|
+
}
|
|
160
|
+
},
|
|
161
|
+
datatype: ["number", "number", "number"],
|
|
162
|
+
interactive: false,
|
|
163
|
+
show_label: true,
|
|
164
|
+
label: "Test Scores with Custom Styling",
|
|
165
|
+
max_height: 250,
|
|
166
|
+
show_row_numbers: true
|
|
167
|
+
}}
|
|
168
|
+
/>
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { FullscreenButton } from "@gradio/atoms";
|
|
3
3
|
import { onDestroy } from "svelte";
|
|
4
4
|
import { createEventDispatcher } from "svelte";
|
|
5
|
+
import { IconButton } from "@gradio/atoms";
|
|
5
6
|
export let show_fullscreen_button = false;
|
|
6
7
|
export let show_copy_button = false;
|
|
7
8
|
export let show_search = "none";
|
|
@@ -64,18 +65,11 @@ onDestroy(() => {
|
|
|
64
65
|
</div>
|
|
65
66
|
{/if}
|
|
66
67
|
{#if show_copy_button}
|
|
67
|
-
<
|
|
68
|
-
|
|
68
|
+
<IconButton
|
|
69
|
+
Icon={copied ? Check : Copy}
|
|
70
|
+
label={copied ? "Copied to clipboard" : "Copy table data"}
|
|
69
71
|
on:click={handle_copy}
|
|
70
|
-
|
|
71
|
-
title={copied ? "Copied to clipboard" : "Copy table data"}
|
|
72
|
-
>
|
|
73
|
-
{#if copied}
|
|
74
|
-
<Check />
|
|
75
|
-
{:else}
|
|
76
|
-
<Copy />
|
|
77
|
-
{/if}
|
|
78
|
-
</button>
|
|
72
|
+
/>
|
|
79
73
|
{/if}
|
|
80
74
|
{#if show_fullscreen_button}
|
|
81
75
|
<FullscreenButton {fullscreen} on:fullscreen />
|
|
@@ -96,6 +90,7 @@ onDestroy(() => {
|
|
|
96
90
|
display: flex;
|
|
97
91
|
gap: var(--size-1);
|
|
98
92
|
flex-wrap: nowrap;
|
|
93
|
+
align-items: center;
|
|
99
94
|
}
|
|
100
95
|
|
|
101
96
|
.toolbar-button {
|
|
@@ -177,4 +172,17 @@ onDestroy(() => {
|
|
|
177
172
|
.check-button:hover {
|
|
178
173
|
background: var(--color-accent-soft);
|
|
179
174
|
}
|
|
175
|
+
|
|
176
|
+
.toolbar-buttons :global(.icon-button) {
|
|
177
|
+
background: transparent !important;
|
|
178
|
+
height: var(--size-6);
|
|
179
|
+
width: var(--size-6);
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.toolbar-buttons :global(.icon-button:hover) {
|
|
183
|
+
background: var(--background-fill-secondary) !important;
|
|
184
|
+
color: var(--body-text-color) !important;
|
|
185
|
+
border: 1px solid var(--border-color-primary);
|
|
186
|
+
border-radius: var(--radius-sm) !important;
|
|
187
|
+
}
|
|
180
188
|
</style>
|
|
@@ -158,6 +158,16 @@ onMount(() => {
|
|
|
158
158
|
--df-block-radius: var(--df-radius-sm, 4px);
|
|
159
159
|
--df-table-even-background-fill: #ffffff;
|
|
160
160
|
--df-table-odd-background-fill: #f9fafb;
|
|
161
|
+
|
|
162
|
+
--df-background-fill-primary-dark: var(--df-neutral-950, #0f0f11);
|
|
163
|
+
--df-background-fill-secondary-dark: var(--df-neutral-900, #18181b);
|
|
164
|
+
--df-body-text-color-dark: var(--df-neutral-100, #f4f4f5);
|
|
165
|
+
--df-block-background-fill-dark: var(--df-neutral-800, #27272a);
|
|
166
|
+
--df-table-even-background-fill-dark: var(--df-neutral-950, #0f0f11);
|
|
167
|
+
--df-table-odd-background-fill-dark: var(--df-neutral-900, #18181b);
|
|
168
|
+
--df-border-color-primary-dark: var(--df-neutral-700, #3f3f46);
|
|
169
|
+
--df-color-accent-dark: var(--df-primary-600, #ea580c);
|
|
170
|
+
--df-color-accent-soft-dark: var(--df-neutral-700, #3f3f46);
|
|
161
171
|
--df-radius-sm: 4px;
|
|
162
172
|
--df-size-1: 4px;
|
|
163
173
|
--df-size-2: 8px;
|
|
@@ -327,7 +337,15 @@ onMount(() => {
|
|
|
327
337
|
--cell-padding: var(--gr-df-cell-padding, var(--size-2));
|
|
328
338
|
--df-font-size: var(--gr-df-font-size, var(--text-md));
|
|
329
339
|
--background-fill-primary: var(--df-background-fill-primary, #ffffff);
|
|
340
|
+
--background-fill-primary-dark: var(
|
|
341
|
+
--df-background-fill-primary-dark,
|
|
342
|
+
var(--neutral-950, #0f0f11)
|
|
343
|
+
);
|
|
330
344
|
--background-fill-secondary: var(--df-background-fill-secondary, #f8fafc);
|
|
345
|
+
--background-fill-secondary-dark: var(
|
|
346
|
+
--df-background-fill-secondary-dark,
|
|
347
|
+
var(--neutral-900, #18181b)
|
|
348
|
+
);
|
|
331
349
|
--color-accent: var(--gr-df-accent, var(--df-color-accent, #7c3aed));
|
|
332
350
|
--color-accent-soft: var(
|
|
333
351
|
--gr-df-accent-soft,
|
|
@@ -523,6 +541,18 @@ onMount(() => {
|
|
|
523
541
|
background-color: var(--block-background-fill);
|
|
524
542
|
}
|
|
525
543
|
|
|
544
|
+
:global(.dark) .gradio-dataframe-standalone {
|
|
545
|
+
--df-background-fill-primary: var(--df-background-fill-primary-dark);
|
|
546
|
+
--df-background-fill-secondary: var(--df-background-fill-secondary-dark);
|
|
547
|
+
--df-body-text-color: var(--df-body-text-color-dark);
|
|
548
|
+
--df-block-background-fill: var(--df-block-background-fill-dark);
|
|
549
|
+
--df-table-even-background-fill: var(--df-table-even-background-fill-dark);
|
|
550
|
+
--df-table-odd-background-fill: var(--df-table-odd-background-fill-dark);
|
|
551
|
+
--df-border-color-primary: var(--df-border-color-primary-dark);
|
|
552
|
+
--df-color-accent: var(--df-color-accent-dark);
|
|
553
|
+
--df-color-accent-soft: var(--df-color-accent-soft-dark);
|
|
554
|
+
}
|
|
555
|
+
|
|
526
556
|
:global(.gradio-container),
|
|
527
557
|
:global(*),
|
|
528
558
|
:global(::before),
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gradio/dataframe",
|
|
3
|
-
"version": "0.20.
|
|
3
|
+
"version": "0.20.1",
|
|
4
4
|
"description": "Gradio UI packages",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": "",
|
|
@@ -13,15 +13,15 @@
|
|
|
13
13
|
"@types/katex": "^0.16.0",
|
|
14
14
|
"d3-dsv": "^3.0.1",
|
|
15
15
|
"dequal": "^2.0.2",
|
|
16
|
-
"@gradio/atoms": "^0.18.
|
|
16
|
+
"@gradio/atoms": "^0.18.1",
|
|
17
17
|
"@gradio/button": "^0.5.13",
|
|
18
|
-
"@gradio/icons": "^0.14.0",
|
|
19
|
-
"@gradio/markdown-code": "^0.5.2",
|
|
20
18
|
"@gradio/checkbox": "^0.4.30",
|
|
19
|
+
"@gradio/markdown-code": "^0.5.2",
|
|
20
|
+
"@gradio/icons": "^0.14.0",
|
|
21
|
+
"@gradio/client": "^1.19.0",
|
|
21
22
|
"@gradio/statustracker": "^0.11.1",
|
|
22
|
-
"@gradio/upload": "^0.17.
|
|
23
|
-
"@gradio/utils": "^0.10.2"
|
|
24
|
-
"@gradio/client": "^1.19.0"
|
|
23
|
+
"@gradio/upload": "^0.17.1",
|
|
24
|
+
"@gradio/utils": "^0.10.2"
|
|
25
25
|
},
|
|
26
26
|
"exports": {
|
|
27
27
|
".": {
|
package/shared/Toolbar.svelte
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
import { FullscreenButton } from "@gradio/atoms";
|
|
4
4
|
import { onDestroy } from "svelte";
|
|
5
5
|
import { createEventDispatcher } from "svelte";
|
|
6
|
+
import { IconButton } from "@gradio/atoms";
|
|
6
7
|
|
|
7
8
|
export let show_fullscreen_button = false;
|
|
8
9
|
export let show_copy_button = false;
|
|
@@ -74,18 +75,11 @@
|
|
|
74
75
|
</div>
|
|
75
76
|
{/if}
|
|
76
77
|
{#if show_copy_button}
|
|
77
|
-
<
|
|
78
|
-
|
|
78
|
+
<IconButton
|
|
79
|
+
Icon={copied ? Check : Copy}
|
|
80
|
+
label={copied ? "Copied to clipboard" : "Copy table data"}
|
|
79
81
|
on:click={handle_copy}
|
|
80
|
-
|
|
81
|
-
title={copied ? "Copied to clipboard" : "Copy table data"}
|
|
82
|
-
>
|
|
83
|
-
{#if copied}
|
|
84
|
-
<Check />
|
|
85
|
-
{:else}
|
|
86
|
-
<Copy />
|
|
87
|
-
{/if}
|
|
88
|
-
</button>
|
|
82
|
+
/>
|
|
89
83
|
{/if}
|
|
90
84
|
{#if show_fullscreen_button}
|
|
91
85
|
<FullscreenButton {fullscreen} on:fullscreen />
|
|
@@ -106,6 +100,7 @@
|
|
|
106
100
|
display: flex;
|
|
107
101
|
gap: var(--size-1);
|
|
108
102
|
flex-wrap: nowrap;
|
|
103
|
+
align-items: center;
|
|
109
104
|
}
|
|
110
105
|
|
|
111
106
|
.toolbar-button {
|
|
@@ -187,4 +182,17 @@
|
|
|
187
182
|
.check-button:hover {
|
|
188
183
|
background: var(--color-accent-soft);
|
|
189
184
|
}
|
|
185
|
+
|
|
186
|
+
.toolbar-buttons :global(.icon-button) {
|
|
187
|
+
background: transparent !important;
|
|
188
|
+
height: var(--size-6);
|
|
189
|
+
width: var(--size-6);
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.toolbar-buttons :global(.icon-button:hover) {
|
|
193
|
+
background: var(--background-fill-secondary) !important;
|
|
194
|
+
color: var(--body-text-color) !important;
|
|
195
|
+
border: 1px solid var(--border-color-primary);
|
|
196
|
+
border-radius: var(--radius-sm) !important;
|
|
197
|
+
}
|
|
190
198
|
</style>
|
package/standalone/Index.svelte
CHANGED
|
@@ -186,6 +186,16 @@
|
|
|
186
186
|
--df-block-radius: var(--df-radius-sm, 4px);
|
|
187
187
|
--df-table-even-background-fill: #ffffff;
|
|
188
188
|
--df-table-odd-background-fill: #f9fafb;
|
|
189
|
+
|
|
190
|
+
--df-background-fill-primary-dark: var(--df-neutral-950, #0f0f11);
|
|
191
|
+
--df-background-fill-secondary-dark: var(--df-neutral-900, #18181b);
|
|
192
|
+
--df-body-text-color-dark: var(--df-neutral-100, #f4f4f5);
|
|
193
|
+
--df-block-background-fill-dark: var(--df-neutral-800, #27272a);
|
|
194
|
+
--df-table-even-background-fill-dark: var(--df-neutral-950, #0f0f11);
|
|
195
|
+
--df-table-odd-background-fill-dark: var(--df-neutral-900, #18181b);
|
|
196
|
+
--df-border-color-primary-dark: var(--df-neutral-700, #3f3f46);
|
|
197
|
+
--df-color-accent-dark: var(--df-primary-600, #ea580c);
|
|
198
|
+
--df-color-accent-soft-dark: var(--df-neutral-700, #3f3f46);
|
|
189
199
|
--df-radius-sm: 4px;
|
|
190
200
|
--df-size-1: 4px;
|
|
191
201
|
--df-size-2: 8px;
|
|
@@ -355,7 +365,15 @@
|
|
|
355
365
|
--cell-padding: var(--gr-df-cell-padding, var(--size-2));
|
|
356
366
|
--df-font-size: var(--gr-df-font-size, var(--text-md));
|
|
357
367
|
--background-fill-primary: var(--df-background-fill-primary, #ffffff);
|
|
368
|
+
--background-fill-primary-dark: var(
|
|
369
|
+
--df-background-fill-primary-dark,
|
|
370
|
+
var(--neutral-950, #0f0f11)
|
|
371
|
+
);
|
|
358
372
|
--background-fill-secondary: var(--df-background-fill-secondary, #f8fafc);
|
|
373
|
+
--background-fill-secondary-dark: var(
|
|
374
|
+
--df-background-fill-secondary-dark,
|
|
375
|
+
var(--neutral-900, #18181b)
|
|
376
|
+
);
|
|
359
377
|
--color-accent: var(--gr-df-accent, var(--df-color-accent, #7c3aed));
|
|
360
378
|
--color-accent-soft: var(
|
|
361
379
|
--gr-df-accent-soft,
|
|
@@ -551,6 +569,18 @@
|
|
|
551
569
|
background-color: var(--block-background-fill);
|
|
552
570
|
}
|
|
553
571
|
|
|
572
|
+
:global(.dark) .gradio-dataframe-standalone {
|
|
573
|
+
--df-background-fill-primary: var(--df-background-fill-primary-dark);
|
|
574
|
+
--df-background-fill-secondary: var(--df-background-fill-secondary-dark);
|
|
575
|
+
--df-body-text-color: var(--df-body-text-color-dark);
|
|
576
|
+
--df-block-background-fill: var(--df-block-background-fill-dark);
|
|
577
|
+
--df-table-even-background-fill: var(--df-table-even-background-fill-dark);
|
|
578
|
+
--df-table-odd-background-fill: var(--df-table-odd-background-fill-dark);
|
|
579
|
+
--df-border-color-primary: var(--df-border-color-primary-dark);
|
|
580
|
+
--df-color-accent: var(--df-color-accent-dark);
|
|
581
|
+
--df-color-accent-soft: var(--df-color-accent-soft-dark);
|
|
582
|
+
}
|
|
583
|
+
|
|
554
584
|
:global(.gradio-container),
|
|
555
585
|
:global(*),
|
|
556
586
|
:global(::before),
|