@gradio/dataframe 0.11.4 → 0.12.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.
Files changed (9) hide show
  1. package/CHANGELOG.md +33 -0
  2. package/dist/shared/CellMenu.svelte +17 -9
  3. package/dist/shared/CellMenu.svelte.d.ts +2 -0
  4. package/dist/shared/EditableCell.svelte +1 -1
  5. package/dist/shared/Table.svelte +35 -27
  6. package/package.json +8 -8
  7. package/shared/CellMenu.svelte +15 -9
  8. package/shared/EditableCell.svelte +1 -1
  9. package/shared/Table.svelte +38 -27
package/CHANGELOG.md CHANGED
@@ -1,5 +1,38 @@
1
1
  # @gradio/dataframe
2
2
 
3
+ ## 0.12.1
4
+
5
+ ### Features
6
+
7
+ - [#9649](https://github.com/gradio-app/gradio/pull/9649) [`b1b81c9`](https://github.com/gradio-app/gradio/commit/b1b81c9e1c10c2c14a5cb0661d2503259ece1a1b) - Hide option to add row/col when count is fixed in dataframe. Thanks @hannahblair!
8
+
9
+ ### Dependency updates
10
+
11
+ - @gradio/markdown-code@0.2.1
12
+ - @gradio/statustracker@0.9.3
13
+ - @gradio/atoms@0.10.1
14
+ - @gradio/client@1.7.1
15
+ - @gradio/upload@0.13.5
16
+ - @gradio/button@0.3.5
17
+
18
+ ## 0.12.0
19
+
20
+ ### Features
21
+
22
+ - [#9756](https://github.com/gradio-app/gradio/pull/9756) [`92f337c`](https://github.com/gradio-app/gradio/commit/92f337cc85d545060ea343f1cee85c22b85f6444) - Fix website build issue. Thanks @aliabd!
23
+
24
+ ### Fixes
25
+
26
+ - [#9654](https://github.com/gradio-app/gradio/pull/9654) [`cd7dab7`](https://github.com/gradio-app/gradio/commit/cd7dab7ba5c81983f133dfa9e90ac6f92ac4fa1f) - Improve select event behaviour in gr.Dataframe. Thanks @hannahblair!
27
+
28
+ ### Dependency updates
29
+
30
+ - @gradio/button@0.3.4
31
+ - @gradio/statustracker@0.9.2
32
+ - @gradio/atoms@0.10.0
33
+ - @gradio/markdown-code@0.2.0
34
+ - @gradio/upload@0.13.4
35
+
3
36
  ## 0.11.4
4
37
 
5
38
  ### Dependency updates
package/dist/shared/CellMenu.svelte CHANGED
@@ -7,10 +7,16 @@ export let on_add_row_below;
7
7
  export let on_add_column_left;
8
8
  export let on_add_column_right;
9
9
  export let row;
10
+ export let col_count;
11
+ export let row_count;
10
12
  export let i18n;
11
13
  let menu_element;
12
14
  $:
13
15
  is_header = row === -1;
16
+ $:
17
+ can_add_rows = row_count[1] === "dynamic";
18
+ $:
19
+ can_add_columns = col_count[1] === "dynamic";
14
20
  onMount(() => {
15
21
  position_menu();
16
22
  });
@@ -34,7 +40,7 @@ function position_menu() {
34
40
  </script>
35
41
 
36
42
  <div bind:this={menu_element} class="cell-menu">
37
- {#if !is_header}
43
+ {#if !is_header && can_add_rows}
38
44
  <button on:click={() => on_add_row_above()}>
39
45
  <Arrow transform="rotate(-90 12 12)" />
40
46
  {i18n("dataframe.add_row_above")}
@@ -44,14 +50,16 @@ function position_menu() {
44
50
  {i18n("dataframe.add_row_below")}
45
51
  </button>
46
52
  {/if}
47
- <button on:click={() => on_add_column_left()}>
48
- <Arrow transform="rotate(180 12 12)" />
49
- {i18n("dataframe.add_column_left")}
50
- </button>
51
- <button on:click={() => on_add_column_right()}>
52
- <Arrow transform="rotate(0 12 12)" />
53
- {i18n("dataframe.add_column_right")}
54
- </button>
53
+ {#if can_add_columns}
54
+ <button on:click={() => on_add_column_left()}>
55
+ <Arrow transform="rotate(180 12 12)" />
56
+ {i18n("dataframe.add_column_left")}
57
+ </button>
58
+ <button on:click={() => on_add_column_right()}>
59
+ <Arrow transform="rotate(0 12 12)" />
60
+ {i18n("dataframe.add_column_right")}
61
+ </button>
62
+ {/if}
55
63
  </div>
56
64
 
57
65
  <style>
package/dist/shared/CellMenu.svelte.d.ts CHANGED
@@ -9,6 +9,8 @@ declare const __propDef: {
9
9
  on_add_column_left: () => void;
10
10
  on_add_column_right: () => void;
11
11
  row: number;
12
+ col_count: [number, "fixed" | "dynamic"];
13
+ row_count: [number, "fixed" | "dynamic"];
12
14
  i18n: I18nFormatter;
13
15
  };
14
16
  events: {
package/dist/shared/EditableCell.svelte CHANGED
@@ -1,5 +1,5 @@
1
1
  <script>import { createEventDispatcher } from "svelte";
2
- import { MarkdownCode } from "@gradio/markdown";
2
+ import { MarkdownCode } from "@gradio/markdown-code";
3
3
  export let edit;
4
4
  export let value = "";
5
5
  export let display_value = null;
package/dist/shared/Table.svelte CHANGED
@@ -31,8 +31,9 @@ let t_rect;
31
31
  const dispatch = createEventDispatcher();
32
32
  let editing = false;
33
33
  const get_data_at = (row, col) => data?.[row]?.[col]?.value;
34
+ let last_selected = null;
34
35
  $: {
35
- if (selected !== false) {
36
+ if (selected !== false && !dequal(selected, last_selected)) {
36
37
  const [row, col] = selected;
37
38
  if (!isNaN(row) && !isNaN(col) && data[row]) {
38
39
  dispatch("select", {
@@ -40,6 +41,7 @@ $: {
40
41
  value: get_data_at(row, col),
41
42
  row_value: data[row].map((d) => d.value)
42
43
  });
44
+ last_selected = selected;
43
45
  }
44
46
  }
45
47
  }
@@ -262,9 +264,11 @@ async function handle_cell_click(i, j) {
262
264
  header_edit = false;
263
265
  selected_header = false;
264
266
  editing = false;
265
- selected = [i, j];
266
- await tick();
267
- parent.focus();
267
+ if (!dequal(selected, [i, j])) {
268
+ selected = [i, j];
269
+ await tick();
270
+ parent.focus();
271
+ }
268
272
  }
269
273
  let sort_direction;
270
274
  let sort_by;
@@ -362,7 +366,7 @@ function handle_click_outside(event) {
362
366
  editing = false;
363
367
  header_edit = false;
364
368
  selected_header = false;
365
- selected = false;
369
+ reset_selection();
366
370
  active_cell = null;
367
371
  active_cell_menu = null;
368
372
  active_header_menu = null;
@@ -531,10 +535,17 @@ function add_col_at(index, position) {
531
535
  active_cell_menu = null;
532
536
  active_header_menu = null;
533
537
  }
538
+ function handle_resize() {
539
+ active_cell_menu = null;
540
+ active_header_menu = null;
541
+ set_cell_widths();
542
+ }
534
543
  onMount(() => {
535
544
  document.addEventListener("click", handle_click_outside);
545
+ window.addEventListener("resize", handle_resize);
536
546
  return () => {
537
547
  document.removeEventListener("click", handle_click_outside);
548
+ window.removeEventListener("resize", handle_resize);
538
549
  };
539
550
  });
540
551
  let active_button = null;
@@ -569,6 +580,10 @@ function toggle_header_menu(event, col) {
569
580
  }
570
581
  }
571
582
  }
583
+ function reset_selection() {
584
+ selected = false;
585
+ last_selected = null;
586
+ }
572
587
  </script>
573
588
 
574
589
  <svelte:window
@@ -732,8 +747,6 @@ function toggle_header_menu(event, col) {
732
747
  {#if editable}
733
748
  <button
734
749
  class="cell-menu-button"
735
- class:visible={active_button?.type === "header" &&
736
- active_button.col === i}
737
750
  on:click={(event) => toggle_header_menu(event, i)}
738
751
  >
739
752
  ⋮
@@ -778,9 +791,6 @@ function toggle_header_menu(event, col) {
778
791
  {#if editable}
779
792
  <button
780
793
  class="cell-menu-button"
781
- class:visible={active_button?.type === "cell" &&
782
- active_button.row === index &&
783
- active_button.col === j}
784
794
  on:click={(event) => toggle_cell_menu(event, index, j)}
785
795
  >
786
796
  ⋮
@@ -801,6 +811,8 @@ function toggle_header_menu(event, col) {
801
811
  x={active_cell_menu.x}
802
812
  y={active_cell_menu.y}
803
813
  row={active_cell_menu?.row ?? -1}
814
+ {col_count}
815
+ {row_count}
804
816
  on_add_row_above={() => add_row_at(active_cell_menu?.row ?? -1, "above")}
805
817
  on_add_row_below={() => add_row_at(active_cell_menu?.row ?? -1, "below")}
806
818
  on_add_column_left={() => add_col_at(active_cell_menu?.col ?? -1, "left")}
@@ -814,6 +826,8 @@ function toggle_header_menu(event, col) {
814
826
  x={active_header_menu.x}
815
827
  y={active_header_menu.y}
816
828
  row={-1}
829
+ {col_count}
830
+ {row_count}
817
831
  on_add_row_above={() => add_row_at(active_cell_menu?.row ?? -1, "above")}
818
832
  on_add_row_below={() => add_row_at(active_cell_menu?.row ?? -1, "below")}
819
833
  on_add_column_left={() => add_col_at(active_header_menu?.col ?? -1, "left")}
@@ -891,6 +905,7 @@ function toggle_header_menu(event, col) {
891
905
  top: 0;
892
906
  left: 0;
893
907
  z-index: var(--layer-1);
908
+ box-shadow: var(--shadow-drop);
894
909
  }
895
910
 
896
911
  tr {
@@ -910,6 +925,7 @@ function toggle_header_menu(event, col) {
910
925
  --ring-color: transparent;
911
926
  position: relative;
912
927
  outline: none;
928
+ box-shadow: inset 0 0 0 1px var(--ring-color);
913
929
  padding: 0;
914
930
  }
915
931
 
@@ -922,9 +938,8 @@ function toggle_header_menu(event, col) {
922
938
  }
923
939
 
924
940
  th.focus,
925
- td.focus,
926
- td.menu-active {
927
- z-index: 1;
941
+ td.focus {
942
+ --ring-color: var(--color-accent);
928
943
  }
929
944
 
930
945
  tr:last-child td:first-child {
@@ -973,10 +988,8 @@ function toggle_header_menu(event, col) {
973
988
  }
974
989
 
975
990
  .cell-wrap {
976
- position: relative;
977
991
  display: flex;
978
992
  align-items: center;
979
- justify-content: space-between;
980
993
  outline: none;
981
994
  height: var(--size-full);
982
995
  min-height: var(--size-9);
@@ -991,6 +1004,12 @@ function toggle_header_menu(event, col) {
991
1004
  min-width: 0;
992
1005
  }
993
1006
 
1007
+ .controls-wrap {
1008
+ display: flex;
1009
+ justify-content: flex-end;
1010
+ padding-top: var(--size-2);
1011
+ }
1012
+
994
1013
  .row_odd {
995
1014
  background: var(--table-odd-background-fill);
996
1015
  }
@@ -1003,13 +1022,6 @@ function toggle_header_menu(event, col) {
1003
1022
  border-collapse: separate;
1004
1023
  }
1005
1024
 
1006
- .select-column {
1007
- width: var(--size-3);
1008
- text-align: center;
1009
- padding: var(--size-1);
1010
- border-right: none;
1011
- }
1012
-
1013
1025
  .cell-menu-button {
1014
1026
  flex-shrink: 0;
1015
1027
  display: none;
@@ -1028,16 +1040,12 @@ function toggle_header_menu(event, col) {
1028
1040
  background-color: var(--color-bg-hover);
1029
1041
  }
1030
1042
 
1031
- .cell-menu-button.visible {
1043
+ td.focus .cell-menu-button {
1032
1044
  display: flex;
1033
1045
  align-items: center;
1034
1046
  justify-content: center;
1035
1047
  }
1036
1048
 
1037
- th .cell-wrap {
1038
- padding-right: var(--spacing-sm);
1039
- }
1040
-
1041
1049
  th .header-content {
1042
1050
  white-space: nowrap;
1043
1051
  overflow: hidden;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gradio/dataframe",
3
- "version": "0.11.4",
3
+ "version": "0.12.1",
4
4
  "description": "Gradio UI packages",
5
5
  "type": "module",
6
6
  "author": "",
@@ -17,12 +17,12 @@
17
17
  "dompurify": "^3.0.3",
18
18
  "katex": "^0.16.7",
19
19
  "marked": "^12.0.0",
20
- "@gradio/atoms": "^0.9.2",
21
- "@gradio/client": "^1.7.0",
22
- "@gradio/button": "^0.3.3",
23
- "@gradio/statustracker": "^0.9.1",
24
- "@gradio/markdown": "^0.10.3",
25
- "@gradio/upload": "^0.13.3",
20
+ "@gradio/atoms": "^0.10.1",
21
+ "@gradio/button": "^0.3.5",
22
+ "@gradio/markdown-code": "^0.2.1",
23
+ "@gradio/statustracker": "^0.9.3",
24
+ "@gradio/upload": "^0.13.5",
25
+ "@gradio/client": "^1.7.1",
26
26
  "@gradio/utils": "^0.7.0"
27
27
  },
28
28
  "exports": {
@@ -42,7 +42,7 @@
42
42
  "svelte": "^4.0.0"
43
43
  },
44
44
  "devDependencies": {
45
- "@gradio/preview": "^0.12.0"
45
+ "@gradio/preview": "^0.13.0"
46
46
  },
47
47
  "repository": {
48
48
  "type": "git",
package/shared/CellMenu.svelte CHANGED
@@ -10,11 +10,15 @@
10
10
  export let on_add_column_left: () => void;
11
11
  export let on_add_column_right: () => void;
12
12
  export let row: number;
13
+ export let col_count: [number, "fixed" | "dynamic"];
14
+ export let row_count: [number, "fixed" | "dynamic"];
13
15
 
14
16
  export let i18n: I18nFormatter;
15
17
  let menu_element: HTMLDivElement;
16
18
 
17
19
  $: is_header = row === -1;
20
+ $: can_add_rows = row_count[1] === "dynamic";
21
+ $: can_add_columns = col_count[1] === "dynamic";
18
22
 
19
23
  onMount(() => {
20
24
  position_menu();
@@ -44,7 +48,7 @@
44
48
  </script>
45
49
 
46
50
  <div bind:this={menu_element} class="cell-menu">
47
- {#if !is_header}
51
+ {#if !is_header && can_add_rows}
48
52
  <button on:click={() => on_add_row_above()}>
49
53
  <Arrow transform="rotate(-90 12 12)" />
50
54
  {i18n("dataframe.add_row_above")}
@@ -54,14 +58,16 @@
54
58
  {i18n("dataframe.add_row_below")}
55
59
  </button>
56
60
  {/if}
57
- <button on:click={() => on_add_column_left()}>
58
- <Arrow transform="rotate(180 12 12)" />
59
- {i18n("dataframe.add_column_left")}
60
- </button>
61
- <button on:click={() => on_add_column_right()}>
62
- <Arrow transform="rotate(0 12 12)" />
63
- {i18n("dataframe.add_column_right")}
64
- </button>
61
+ {#if can_add_columns}
62
+ <button on:click={() => on_add_column_left()}>
63
+ <Arrow transform="rotate(180 12 12)" />
64
+ {i18n("dataframe.add_column_left")}
65
+ </button>
66
+ <button on:click={() => on_add_column_right()}>
67
+ <Arrow transform="rotate(0 12 12)" />
68
+ {i18n("dataframe.add_column_right")}
69
+ </button>
70
+ {/if}
65
71
  </div>
66
72
 
67
73
  <style>
package/shared/EditableCell.svelte CHANGED
@@ -1,6 +1,6 @@
1
1
  <script lang="ts">
2
2
  import { createEventDispatcher } from "svelte";
3
- import { MarkdownCode } from "@gradio/markdown";
3
+ import { MarkdownCode } from "@gradio/markdown-code";
4
4
 
5
5
  export let edit: boolean;
6
6
  export let value: string | number = "";
package/shared/Table.svelte CHANGED
@@ -56,8 +56,10 @@
56
56
  const get_data_at = (row: number, col: number): string | number =>
57
57
  data?.[row]?.[col]?.value;
58
58
 
59
+ let last_selected: [number, number] | null = null;
60
+
59
61
  $: {
60
- if (selected !== false) {
62
+ if (selected !== false && !dequal(selected, last_selected)) {
61
63
  const [row, col] = selected;
62
64
  if (!isNaN(row) && !isNaN(col) && data[row]) {
63
65
  dispatch("select", {
@@ -65,6 +67,7 @@
65
67
  value: get_data_at(row, col),
66
68
  row_value: data[row].map((d) => d.value)
67
69
  });
70
+ last_selected = selected;
68
71
  }
69
72
  }
70
73
  }
@@ -353,9 +356,11 @@
353
356
  header_edit = false;
354
357
  selected_header = false;
355
358
  editing = false;
356
- selected = [i, j];
357
- await tick();
358
- parent.focus();
359
+ if (!dequal(selected, [i, j])) {
360
+ selected = [i, j];
361
+ await tick();
362
+ parent.focus();
363
+ }
359
364
  }
360
365
 
361
366
  type SortDirection = "asc" | "des";
@@ -478,7 +483,7 @@
478
483
  editing = false;
479
484
  header_edit = false;
480
485
  selected_header = false;
481
- selected = false;
486
+ reset_selection();
482
487
  active_cell = null;
483
488
  active_cell_menu = null;
484
489
  active_header_menu = null;
@@ -705,10 +710,18 @@
705
710
  active_header_menu = null;
706
711
  }
707
712
 
713
+ function handle_resize(): void {
714
+ active_cell_menu = null;
715
+ active_header_menu = null;
716
+ set_cell_widths();
717
+ }
718
+
708
719
  onMount(() => {
709
720
  document.addEventListener("click", handle_click_outside);
721
+ window.addEventListener("resize", handle_resize);
710
722
  return () => {
711
723
  document.removeEventListener("click", handle_click_outside);
724
+ window.removeEventListener("resize", handle_resize);
712
725
  };
713
726
  });
714
727
 
@@ -760,6 +773,11 @@
760
773
  }
761
774
  }
762
775
  }
776
+
777
+ function reset_selection(): void {
778
+ selected = false;
779
+ last_selected = null;
780
+ }
763
781
  </script>
764
782
 
765
783
  <svelte:window
@@ -923,8 +941,6 @@
923
941
  {#if editable}
924
942
  <button
925
943
  class="cell-menu-button"
926
- class:visible={active_button?.type === "header" &&
927
- active_button.col === i}
928
944
  on:click={(event) => toggle_header_menu(event, i)}
929
945
  >
930
946
  ⋮
@@ -969,9 +985,6 @@
969
985
  {#if editable}
970
986
  <button
971
987
  class="cell-menu-button"
972
- class:visible={active_button?.type === "cell" &&
973
- active_button.row === index &&
974
- active_button.col === j}
975
988
  on:click={(event) => toggle_cell_menu(event, index, j)}
976
989
  >
977
990
  ⋮
@@ -992,6 +1005,8 @@
992
1005
  x={active_cell_menu.x}
993
1006
  y={active_cell_menu.y}
994
1007
  row={active_cell_menu?.row ?? -1}
1008
+ {col_count}
1009
+ {row_count}
995
1010
  on_add_row_above={() => add_row_at(active_cell_menu?.row ?? -1, "above")}
996
1011
  on_add_row_below={() => add_row_at(active_cell_menu?.row ?? -1, "below")}
997
1012
  on_add_column_left={() => add_col_at(active_cell_menu?.col ?? -1, "left")}
@@ -1005,6 +1020,8 @@
1005
1020
  x={active_header_menu.x}
1006
1021
  y={active_header_menu.y}
1007
1022
  row={-1}
1023
+ {col_count}
1024
+ {row_count}
1008
1025
  on_add_row_above={() => add_row_at(active_cell_menu?.row ?? -1, "above")}
1009
1026
  on_add_row_below={() => add_row_at(active_cell_menu?.row ?? -1, "below")}
1010
1027
  on_add_column_left={() => add_col_at(active_header_menu?.col ?? -1, "left")}
@@ -1082,6 +1099,7 @@
1082
1099
  top: 0;
1083
1100
  left: 0;
1084
1101
  z-index: var(--layer-1);
1102
+ box-shadow: var(--shadow-drop);
1085
1103
  }
1086
1104
 
1087
1105
  tr {
@@ -1101,6 +1119,7 @@
1101
1119
  --ring-color: transparent;
1102
1120
  position: relative;
1103
1121
  outline: none;
1122
+ box-shadow: inset 0 0 0 1px var(--ring-color);
1104
1123
  padding: 0;
1105
1124
  }
1106
1125
 
@@ -1113,9 +1132,8 @@
1113
1132
  }
1114
1133
 
1115
1134
  th.focus,
1116
- td.focus,
1117
- td.menu-active {
1118
- z-index: 1;
1135
+ td.focus {
1136
+ --ring-color: var(--color-accent);
1119
1137
  }
1120
1138
 
1121
1139
  tr:last-child td:first-child {
@@ -1164,10 +1182,8 @@
1164
1182
  }
1165
1183
 
1166
1184
  .cell-wrap {
1167
- position: relative;
1168
1185
  display: flex;
1169
1186
  align-items: center;
1170
- justify-content: space-between;
1171
1187
  outline: none;
1172
1188
  height: var(--size-full);
1173
1189
  min-height: var(--size-9);
@@ -1182,6 +1198,12 @@
1182
1198
  min-width: 0;
1183
1199
  }
1184
1200
 
1201
+ .controls-wrap {
1202
+ display: flex;
1203
+ justify-content: flex-end;
1204
+ padding-top: var(--size-2);
1205
+ }
1206
+
1185
1207
  .row_odd {
1186
1208
  background: var(--table-odd-background-fill);
1187
1209
  }
@@ -1194,13 +1216,6 @@
1194
1216
  border-collapse: separate;
1195
1217
  }
1196
1218
 
1197
- .select-column {
1198
- width: var(--size-3);
1199
- text-align: center;
1200
- padding: var(--size-1);
1201
- border-right: none;
1202
- }
1203
-
1204
1219
  .cell-menu-button {
1205
1220
  flex-shrink: 0;
1206
1221
  display: none;
@@ -1219,16 +1234,12 @@
1219
1234
  background-color: var(--color-bg-hover);
1220
1235
  }
1221
1236
 
1222
- .cell-menu-button.visible {
1237
+ td.focus .cell-menu-button {
1223
1238
  display: flex;
1224
1239
  align-items: center;
1225
1240
  justify-content: center;
1226
1241
  }
1227
1242
 
1228
- th .cell-wrap {
1229
- padding-right: var(--spacing-sm);
1230
- }
1231
-
1232
1243
  th .header-content {
1233
1244
  white-space: nowrap;
1234
1245
  overflow: hidden;