@gradio/dataframe 0.19.1 → 0.19.3

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,36 @@
1
1
  # @gradio/dataframe
2
2
 
3
+ ## 0.19.3
4
+
5
+ ### Features
6
+
7
+ - [#11891](https://github.com/gradio-app/gradio/pull/11891) [`8d06ab7`](https://github.com/gradio-app/gradio/commit/8d06ab7d899cb8b1ab2a9575f19b8960999aba78) - Add select all checkbox for boolean columns in Dataframe. Thanks @abidlabs!
8
+
9
+ ### Fixes
10
+
11
+ - [#11784](https://github.com/gradio-app/gradio/pull/11784) [`d9dd3f5`](https://github.com/gradio-app/gradio/commit/d9dd3f54b7fb34cf7118e549d39fc63937ca3489) - Add "hidden" option to component's `visible` kwarg to render but visually hide the component. Thanks @pngwn!
12
+
13
+ ### Dependency updates
14
+
15
+ - @gradio/statustracker@0.11.1
16
+ - @gradio/atoms@0.18.0
17
+ - @gradio/checkbox@0.4.30
18
+ - @gradio/client@1.19.0
19
+ - @gradio/upload@0.17.0
20
+ - @gradio/button@0.5.13
21
+
22
+ ## 0.19.2
23
+
24
+ ### Dependency updates
25
+
26
+ - @gradio/client@1.18.0
27
+ - @gradio/icons@0.14.0
28
+ - @gradio/atoms@0.17.0
29
+ - @gradio/statustracker@0.11.0
30
+ - @gradio/upload@0.16.17
31
+ - @gradio/button@0.5.12
32
+ - @gradio/checkbox@0.4.29
33
+
3
34
  ## 0.19.1
4
35
 
5
36
  ### Fixes
package/Index.svelte CHANGED
@@ -16,7 +16,7 @@
16
16
 
17
17
  export let elem_id = "";
18
18
  export let elem_classes: string[] = [];
19
- export let visible = true;
19
+ export let visible: boolean | "hidden" = true;
20
20
  export let value: DataframeValue = {
21
21
  data: [["", "", ""]],
22
22
  headers: ["1", "2", "3"],
@@ -8,7 +8,7 @@ declare const __propDef: {
8
8
  props: {
9
9
  elem_id?: string;
10
10
  elem_classes?: string[];
11
- visible?: boolean;
11
+ visible?: boolean | "hidden";
12
12
  value?: DataframeValue;
13
13
  value_is_output?: boolean;
14
14
  col_count: [number, "fixed" | "dynamic"];
@@ -63,9 +63,9 @@ export default class Index extends SvelteComponent<IndexProps, IndexEvents, Inde
63
63
  get elem_classes(): string[] | undefined;
64
64
  /**accessor*/
65
65
  set elem_classes(_: string[] | undefined);
66
- get visible(): boolean | undefined;
66
+ get visible(): boolean | "hidden" | undefined;
67
67
  /**accessor*/
68
- set visible(_: boolean | undefined);
68
+ set visible(_: boolean | "hidden" | undefined);
69
69
  get value(): DataframeValue | undefined;
70
70
  /**accessor*/
71
71
  set value(_: DataframeValue | undefined);
@@ -572,6 +572,18 @@ function add_col_at(index, position) {
572
572
  export function reset_sort_state() {
573
573
  df_actions.reset_sort_state();
574
574
  }
575
+ function handle_select_all(col, checked) {
576
+ data = data.map((row) => {
577
+ const new_row = [...row];
578
+ if (new_row[col]) {
579
+ new_row[col] = {
580
+ ...new_row[col],
581
+ value: checked.toString()
582
+ };
583
+ }
584
+ return new_row;
585
+ });
586
+ }
575
587
  let is_dragging = false;
576
588
  let drag_start = null;
577
589
  let mouse_down_pos = null;
@@ -683,6 +695,9 @@ function get_cell_display_value(row, col) {
683
695
  {i18n}
684
696
  bind:el={els[id].input}
685
697
  {col_count}
698
+ datatype={Array.isArray(datatype) ? datatype[i] : datatype}
699
+ {data}
700
+ on_select_all={handle_select_all}
686
701
  />
687
702
  {/each}
688
703
  </tr>
@@ -786,6 +801,9 @@ function get_cell_display_value(row, col) {
786
801
  {i18n}
787
802
  bind:el={els[id].input}
788
803
  {col_count}
804
+ datatype={Array.isArray(datatype) ? datatype[i] : datatype}
805
+ {data}
806
+ on_select_all={handle_select_all}
789
807
  />
790
808
  {/each}
791
809
  </tr>
@@ -5,8 +5,10 @@ import Padlock from "./icons/Padlock.svelte";
5
5
  import SortArrowUp from "./icons/SortArrowUp.svelte";
6
6
  import SortArrowDown from "./icons/SortArrowDown.svelte";
7
7
  import CellMenuIcons from "./CellMenuIcons.svelte";
8
+ import { BaseCheckbox } from "@gradio/checkbox";
8
9
  export let value;
9
10
  export let i;
11
+ export let datatype = "str";
10
12
  export let actual_pinned_columns;
11
13
  export let header_edit;
12
14
  export let selected_header;
@@ -25,7 +27,19 @@ export let i18n;
25
27
  export let el;
26
28
  export let is_static;
27
29
  export let col_count;
30
+ export let data = [];
31
+ export let on_select_all = void 0;
28
32
  $: can_add_columns = col_count && col_count[1] === "dynamic";
33
+ $: is_bool_column = datatype === "bool";
34
+ $: select_all_state = (() => {
35
+ if (!is_bool_column || data.length === 0) return "unchecked";
36
+ const true_count = data.filter(
37
+ (row) => row[i]?.value === true || row[i]?.value === "true"
38
+ ).length;
39
+ if (true_count === 0) return "unchecked";
40
+ if (true_count === data.length) return "checked";
41
+ return "indeterminate";
42
+ })();
29
43
  $: sort_index = sort_columns.findIndex((item) => item.col === i);
30
44
  $: filter_index = filter_columns.findIndex((item) => item.col === i);
31
45
  $: sort_priority = sort_index !== -1 ? sort_index + 1 : null;
@@ -65,6 +79,33 @@ function get_header_position(col_index) {
65
79
  >
66
80
  <div class="cell-wrap">
67
81
  <div class="header-content">
82
+ {#if is_bool_column && editable && on_select_all}
83
+ <div
84
+ class="select-all-checkbox"
85
+ role="button"
86
+ tabindex="0"
87
+ on:click|stopPropagation
88
+ on:keydown|stopPropagation={(e) => {
89
+ if (e.key === "Enter" || e.key === " ") {
90
+ e.preventDefault();
91
+ }
92
+ }}
93
+ on:mousedown|stopPropagation
94
+ >
95
+ <BaseCheckbox
96
+ value={select_all_state === "checked"}
97
+ indeterminate={select_all_state === "indeterminate"}
98
+ label=""
99
+ interactive={true}
100
+ on:select={() => {
101
+ if (on_select_all) {
102
+ const new_value = select_all_state !== "checked";
103
+ on_select_all(i, new_value);
104
+ }
105
+ }}
106
+ />
107
+ </div>
108
+ {/if}
68
109
  <button
69
110
  class="header-button"
70
111
  on:click={(event) => handle_header_click(event, i)}
@@ -256,4 +297,20 @@ function get_header_position(col_index) {
256
297
  z-index: 5;
257
298
  border-right: none;
258
299
  }
300
+
301
+ .select-all-checkbox {
302
+ display: flex;
303
+ align-items: center;
304
+ justify-content: center;
305
+ margin-right: var(--size-1);
306
+ flex-shrink: 0;
307
+ }
308
+
309
+ .select-all-checkbox :global(label) {
310
+ margin: 0;
311
+ }
312
+
313
+ .select-all-checkbox :global(span) {
314
+ display: none;
315
+ }
259
316
  </style>
@@ -2,10 +2,12 @@ import { SvelteComponent } from "svelte";
2
2
  import type { I18nFormatter } from "js/core/src/gradio_helper";
3
3
  import type { SortDirection } from "./context/dataframe_context";
4
4
  import type { FilterDatatype } from "./context/dataframe_context";
5
+ import type { Datatype } from "./utils/utils";
5
6
  declare const __propDef: {
6
7
  props: {
7
8
  value: string;
8
9
  i: number;
10
+ datatype?: Datatype;
9
11
  actual_pinned_columns: number;
10
12
  header_edit: number | false;
11
13
  selected_header: number | false;
@@ -36,8 +38,13 @@ declare const __propDef: {
36
38
  el: HTMLTextAreaElement | null;
37
39
  is_static: boolean;
38
40
  col_count: [number, "fixed" | "dynamic"];
41
+ data?: any[];
42
+ on_select_all?: ((col: number, checked: boolean) => void) | undefined;
39
43
  };
40
44
  events: {
45
+ click: MouseEvent;
46
+ mousedown: MouseEvent;
47
+ } & {
41
48
  [evt: string]: CustomEvent<any>;
42
49
  };
43
50
  slots: {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gradio/dataframe",
3
- "version": "0.19.1",
3
+ "version": "0.19.3",
4
4
  "description": "Gradio UI packages",
5
5
  "type": "module",
6
6
  "author": "",
@@ -13,14 +13,14 @@
13
13
  "@types/katex": "^0.16.0",
14
14
  "d3-dsv": "^3.0.1",
15
15
  "dequal": "^2.0.2",
16
- "@gradio/atoms": "^0.16.5",
17
- "@gradio/button": "^0.5.11",
18
- "@gradio/checkbox": "^0.4.28",
19
- "@gradio/icons": "^0.13.1",
16
+ "@gradio/atoms": "^0.18.0",
17
+ "@gradio/button": "^0.5.13",
18
+ "@gradio/icons": "^0.14.0",
19
+ "@gradio/statustracker": "^0.11.1",
20
+ "@gradio/checkbox": "^0.4.30",
20
21
  "@gradio/markdown-code": "^0.5.1",
21
- "@gradio/statustracker": "^0.10.18",
22
- "@gradio/upload": "^0.16.16",
23
- "@gradio/client": "^1.17.1",
22
+ "@gradio/upload": "^0.17.0",
23
+ "@gradio/client": "^1.19.0",
24
24
  "@gradio/utils": "^0.10.2"
25
25
  },
26
26
  "exports": {
@@ -755,6 +755,19 @@
755
755
  df_actions.reset_sort_state();
756
756
  }
757
757
 
758
+ function handle_select_all(col: number, checked: boolean): void {
759
+ data = data.map((row) => {
760
+ const new_row = [...row];
761
+ if (new_row[col]) {
762
+ new_row[col] = {
763
+ ...new_row[col],
764
+ value: checked.toString()
765
+ };
766
+ }
767
+ return new_row;
768
+ });
769
+ }
770
+
758
771
  let is_dragging = false;
759
772
  let drag_start: [number, number] | null = null;
760
773
  let mouse_down_pos: { x: number; y: number } | null = null;
@@ -877,6 +890,9 @@
877
890
  {i18n}
878
891
  bind:el={els[id].input}
879
892
  {col_count}
893
+ datatype={Array.isArray(datatype) ? datatype[i] : datatype}
894
+ {data}
895
+ on_select_all={handle_select_all}
880
896
  />
881
897
  {/each}
882
898
  </tr>
@@ -980,6 +996,9 @@
980
996
  {i18n}
981
997
  bind:el={els[id].input}
982
998
  {col_count}
999
+ datatype={Array.isArray(datatype) ? datatype[i] : datatype}
1000
+ {data}
1001
+ on_select_all={handle_select_all}
983
1002
  />
984
1003
  {/each}
985
1004
  </tr>
@@ -9,8 +9,11 @@
9
9
  import type { SortDirection } from "./context/dataframe_context";
10
10
  import CellMenuIcons from "./CellMenuIcons.svelte";
11
11
  import type { FilterDatatype } from "./context/dataframe_context";
12
+ import type { Datatype } from "./utils/utils";
13
+ import { BaseCheckbox } from "@gradio/checkbox";
12
14
  export let value: string;
13
15
  export let i: number;
16
+ export let datatype: Datatype = "str";
14
17
  export let actual_pinned_columns: number;
15
18
  export let header_edit: number | false;
16
19
  export let selected_header: number | false;
@@ -39,8 +42,24 @@
39
42
  export let el: HTMLTextAreaElement | null;
40
43
  export let is_static: boolean;
41
44
  export let col_count: [number, "fixed" | "dynamic"];
45
+ export let data: any[] = [];
46
+ export let on_select_all:
47
+ | ((col: number, checked: boolean) => void)
48
+ | undefined = undefined;
42
49
 
43
50
  $: can_add_columns = col_count && col_count[1] === "dynamic";
51
+ $: is_bool_column = datatype === "bool";
52
+
53
+ $: select_all_state = (() => {
54
+ if (!is_bool_column || data.length === 0) return "unchecked";
55
+ const true_count = data.filter(
56
+ (row) => row[i]?.value === true || row[i]?.value === "true"
57
+ ).length;
58
+ if (true_count === 0) return "unchecked";
59
+ if (true_count === data.length) return "checked";
60
+ return "indeterminate";
61
+ })();
62
+
44
63
  $: sort_index = sort_columns.findIndex((item) => item.col === i);
45
64
  $: filter_index = filter_columns.findIndex((item) => item.col === i);
46
65
  $: sort_priority = sort_index !== -1 ? sort_index + 1 : null;
@@ -88,6 +107,33 @@
88
107
  >
89
108
  <div class="cell-wrap">
90
109
  <div class="header-content">
110
+ {#if is_bool_column && editable && on_select_all}
111
+ <div
112
+ class="select-all-checkbox"
113
+ role="button"
114
+ tabindex="0"
115
+ on:click|stopPropagation
116
+ on:keydown|stopPropagation={(e) => {
117
+ if (e.key === "Enter" || e.key === " ") {
118
+ e.preventDefault();
119
+ }
120
+ }}
121
+ on:mousedown|stopPropagation
122
+ >
123
+ <BaseCheckbox
124
+ value={select_all_state === "checked"}
125
+ indeterminate={select_all_state === "indeterminate"}
126
+ label=""
127
+ interactive={true}
128
+ on:select={() => {
129
+ if (on_select_all) {
130
+ const new_value = select_all_state !== "checked";
131
+ on_select_all(i, new_value);
132
+ }
133
+ }}
134
+ />
135
+ </div>
136
+ {/if}
91
137
  <button
92
138
  class="header-button"
93
139
  on:click={(event) => handle_header_click(event, i)}
@@ -279,4 +325,20 @@
279
325
  z-index: 5;
280
326
  border-right: none;
281
327
  }
328
+
329
+ .select-all-checkbox {
330
+ display: flex;
331
+ align-items: center;
332
+ justify-content: center;
333
+ margin-right: var(--size-1);
334
+ flex-shrink: 0;
335
+ }
336
+
337
+ .select-all-checkbox :global(label) {
338
+ margin: 0;
339
+ }
340
+
341
+ .select-all-checkbox :global(span) {
342
+ display: none;
343
+ }
282
344
  </style>