@gradio/dataframe 0.16.5 → 0.17.1

package/dist/shared/context/table_context.js

@@ -0,0 +1,375 @@
+import { getContext, setContext } from "svelte";
+import { writable, get } from "svelte/store";
+import { sort_table_data } from "../utils/table_utils";
+import { dequal } from "dequal/lite";
+export const DATAFRAME_KEY = Symbol("dataframe");
+export function create_actions(state) {
+    const add_row = (data, make_id, index) => {
+        if (!data || data.length === 0) {
+            return [[{ value: "", id: make_id() }]];
+        }
+        const new_row = Array(data[0].length)
+            .fill(null)
+            .map(() => ({
+            value: "",
+            id: make_id()
+        }));
+        const new_data = [...data];
+        if (typeof index === "number" && index >= 0 && index <= data.length) {
+            new_data.splice(index, 0, new_row);
+        }
+        else {
+            new_data.push(new_row);
+        }
+        return new_data;
+    };
+    const add_col = (data, headers, make_id, index) => {
+        if (!data || data.length === 0) {
+            return {
+                data: [[{ value: "", id: make_id() }]],
+                headers: ["Header 1"]
+            };
+        }
+        const new_headers = [...headers];
+        const new_data = data.map((row) => [...row]);
+        if (typeof index === "number" &&
+            index >= 0 &&
+            index <= (data[0]?.length || 0)) {
+            new_headers.splice(index, 0, `Header ${headers.length + 1}`);
+            new_data.forEach((row) => {
+                const id = make_id();
+                row.splice(index, 0, { value: "", id });
+            });
+        }
+        else {
+            new_headers.push(`Header ${headers.length + 1}`);
+            new_data.forEach((row) => {
+                const id = make_id();
+                row.push({ value: "", id });
+            });
+        }
+        return { data: new_data, headers: new_headers };
+    };
+    const reset_sort_state = () => {
+        state.update((s) => ({
+            ...s,
+            sort_state: {
+                sort_columns: [],
+                row_order: []
+            }
+        }));
+    };
+    return {
+        handle_search: (search_query) => {
+            state.update((s) => ({ ...s, current_search_query: search_query }));
+        },
+        handle_sort: (col, direction) => {
+            state.update((s) => {
+                const sort_columns = [...s.sort_state.sort_columns];
+                const existing_index = sort_columns.findIndex((item) => item.col === col);
+                if (existing_index !== -1) {
+                    const existing_item = sort_columns[existing_index];
+                    if (existing_item.direction === direction) {
+                        sort_columns.splice(existing_index, 1);
+                    }
+                    else {
+                        sort_columns[existing_index] = { col, direction };
+                    }
+                }
+                else {
+                    if (sort_columns.length >= 3) {
+                        sort_columns.shift();
+                    }
+                    sort_columns.push({ col, direction });
+                }
+                return {
+                    ...s,
+                    sort_state: {
+                        ...s.sort_state,
+                        sort_columns
+                    }
+                };
+            });
+        },
+        get_sort_status: (name, headers) => {
+            const current_state = get(state);
+            const sort_item = current_state.sort_state.sort_columns.find((item) => headers[item.col] === name);
+            if (!sort_item)
+                return "none";
+            return sort_item.direction;
+        },
+        sort_data: (data, display_value, styling) => {
+            const current_state = get(state);
+            if (current_state.sort_state.sort_columns.length > 0) {
+                sort_table_data(data, display_value, styling, current_state.sort_state.sort_columns);
+            }
+        },
+        update_row_order: (data) => {
+            state.update((s) => {
+                const current_sort_state = { ...s.sort_state };
+                if (current_sort_state.sort_columns.length > 0 && data[0]) {
+                    const indices = [...Array(data.length)].map((_, i) => i);
+                    indices.sort((a, b) => {
+                        const row_a = data[a];
+                        const row_b = data[b];
+                        for (const { col: sort_index, direction } of current_sort_state.sort_columns) {
+                            if (!row_a ||
+                                !row_b ||
+                                sort_index < 0 ||
+                                sort_index >= row_a.length ||
+                                sort_index >= row_b.length) {
+                                continue;
+                            }
+                            const val_a = row_a[sort_index].value;
+                            const val_b = row_b[sort_index].value;
+                            const comp = val_a < val_b ? -1 : val_a > val_b ? 1 : 0;
+                            if (comp !== 0) {
+                                return direction === "asc" ? comp : -comp;
+                            }
+                        }
+                        return 0;
+                    });
+                    current_sort_state.row_order = indices;
+                }
+                else {
+                    current_sort_state.row_order = [...Array(data.length)].map((_, i) => i);
+                }
+                return { ...s, sort_state: current_sort_state };
+            });
+        },
+        filter_data: (data) => {
+            const current_state = get(state);
+            if (!current_state.current_search_query) {
+                return data;
+            }
+            const search_query = current_state.current_search_query.toLowerCase();
+            const filtered = data.filter((row) => {
+                return row.some((cell) => {
+                    if (!cell) {
+                        return false;
+                    }
+                    const cell_value = cell.value;
+                    if (cell_value === null || cell_value === undefined) {
+                        return false;
+                    }
+                    const string_value = String(cell_value).toLowerCase();
+                    return string_value.includes(search_query);
+                });
+            });
+            return filtered;
+        },
+        add_row,
+        add_col,
+        add_row_at: (data, index, position, make_id) => {
+            const row_index = position === "above" ? index : index + 1;
+            return add_row(data, make_id, row_index);
+        },
+        add_col_at: (data, headers, index, position, make_id) => {
+            const col_index = position === "left" ? index : index + 1;
+            return add_col(data, headers, make_id, col_index);
+        },
+        delete_row: (data, index) => {
+            if (data.length <= 1) {
+                return data;
+            }
+            const new_data = [...data];
+            new_data.splice(index, 1);
+            return new_data;
+        },
+        delete_col: (data, headers, index) => {
+            if (headers.length <= 1) {
+                return { data, headers };
+            }
+            const new_headers = [...headers];
+            new_headers.splice(index, 1);
+            const new_data = data.map((row) => {
+                const new_row = [...row];
+                new_row.splice(index, 1);
+                return new_row;
+            });
+            return { data: new_data, headers: new_headers };
+        },
+        delete_row_at: (data, index) => {
+            if (data.length <= 1)
+                return data;
+            data.splice(index, 1);
+            return data;
+        },
+        delete_col_at: (data, headers, index) => {
+            if (headers.length <= 1) {
+                return { data, headers };
+            }
+            const new_headers = [...headers];
+            new_headers.splice(index, 1);
+            const new_data = data.map((row) => {
+                const new_row = [...row];
+                new_row.splice(index, 1);
+                return new_row;
+            });
+            return { data: new_data, headers: new_headers };
+        },
+        set_active_cell_menu: (menu) => {
+            state.update((s) => ({
+                ...s,
+                ui_state: { ...s.ui_state, active_cell_menu: menu }
+            }));
+        },
+        set_active_header_menu: (menu) => {
+            state.update((s) => ({
+                ...s,
+                ui_state: { ...s.ui_state, active_header_menu: menu }
+            }));
+        },
+        set_selected_cells: (cells) => {
+            state.update((s) => ({
+                ...s,
+                ui_state: { ...s.ui_state, selected_cells: cells }
+            }));
+        },
+        set_selected: (selected) => {
+            state.update((s) => ({
+                ...s,
+                ui_state: { ...s.ui_state, selected: selected }
+            }));
+        },
+        set_editing: (editing) => {
+            state.update((s) => ({
+                ...s,
+                ui_state: { ...s.ui_state, editing: editing }
+            }));
+        },
+        clear_ui_state: () => {
+            state.update((s) => ({
+                ...s,
+                ui_state: {
+                    active_cell_menu: null,
+                    active_header_menu: null,
+                    selected_cells: [],
+                    selected: false,
+                    editing: false,
+                    header_edit: false,
+                    selected_header: false,
+                    active_button: null
+                }
+            }));
+        },
+        set_header_edit: (header_index) => {
+            state.update((s) => ({
+                ...s,
+                ui_state: {
+                    ...s.ui_state,
+                    selected_cells: [],
+                    selected_header: header_index,
+                    header_edit: header_index
+                }
+            }));
+        },
+        set_selected_header: (header_index) => {
+            state.update((s) => ({
+                ...s,
+                ui_state: {
+                    ...s.ui_state,
+                    selected_header: header_index,
+                    selected: false,
+                    selected_cells: []
+                }
+            }));
+        },
+        handle_header_click: (col, editable) => {
+            state.update((s) => ({
+                ...s,
+                ui_state: {
+                    ...s.ui_state,
+                    active_cell_menu: null,
+                    active_header_menu: null,
+                    selected: false,
+                    selected_cells: [],
+                    selected_header: col,
+                    header_edit: editable ? col : false
+                }
+            }));
+        },
+        end_header_edit: (key) => {
+            if (key === "Escape" || key === "Enter" || key === "Tab") {
+                state.update((s) => ({
+                    ...s,
+                    ui_state: {
+                        ...s.ui_state,
+                        selected: false,
+                        header_edit: false
+                    }
+                }));
+            }
+        },
+        trigger_change: async (data, headers, previous_data, previous_headers, value_is_output, dispatch) => {
+            const current_state = get(state);
+            if (current_state.current_search_query)
+                return;
+            const current_headers = headers.map((h) => h.value);
+            const current_data = data.map((row) => row.map((cell) => String(cell.value)));
+            if (!dequal(current_data, previous_data) ||
+                !dequal(current_headers, previous_headers)) {
+                if (!dequal(current_headers, previous_headers)) {
+                    reset_sort_state();
+                }
+                dispatch("change", {
+                    data: data.map((row) => row.map((cell) => cell.value)),
+                    headers: headers.map((h) => h.value),
+                    metadata: null
+                });
+                if (!value_is_output) {
+                    dispatch("input");
+                }
+            }
+        },
+        get_selected_cells: () => {
+            const current_state = get(state);
+            return current_state.ui_state.selected_cells;
+        },
+        get_active_cell_menu: () => {
+            const current_state = get(state);
+            return current_state.ui_state.active_cell_menu;
+        },
+        get_active_button: () => {
+            const current_state = get(state);
+            return current_state.ui_state.active_button;
+        },
+        set_active_button: (button) => {
+            state.update((s) => ({
+                ...s,
+                ui_state: { ...s.ui_state, active_button: button }
+            }));
+        },
+        reset_sort_state
+    };
+}
+export function create_dataframe_context(config) {
+    const instance_id = Symbol(`dataframe_${Math.random().toString(36).substring(2)}`);
+    const state = writable({
+        config,
+        current_search_query: null,
+        sort_state: {
+            sort_columns: [],
+            row_order: []
+        },
+        ui_state: {
+            active_cell_menu: null,
+            active_header_menu: null,
+            selected_cells: [],
+            selected: false,
+            editing: false,
+            header_edit: false,
+            selected_header: false,
+            active_button: null
+        }
+    });
+    const actions = create_actions(state);
+    const context = { state, actions };
+    setContext(instance_id, context);
+    setContext(DATAFRAME_KEY, { instance_id, context });
+    return context;
+}
+export function get_dataframe_context() {
+    const ctx = getContext(DATAFRAME_KEY);
+    return ctx ? ctx.context : getContext(DATAFRAME_KEY);
+}

package/dist/shared/icons/Padlock.svelte

@@ -0,0 +1,24 @@
+<div class="wrapper" aria-label="Static column">
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="13"
+		height="13"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	>
+		<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
+		<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
+	</svg>
+</div>
+
+<style>
+	.wrapper {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+</style>

package/dist/shared/icons/Padlock.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  PadlockProps */
+/** @typedef {typeof __propDef.events}  PadlockEvents */
+/** @typedef {typeof __propDef.slots}  PadlockSlots */
+export default class Padlock extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type PadlockProps = typeof __propDef.props;
+export type PadlockEvents = typeof __propDef.events;
+export type PadlockSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/shared/icons/SelectionButtons.svelte

@@ -0,0 +1,85 @@
+<script>export let position;
+export let coords;
+export let on_click = null;
+$:
+  is_first_position = position === "column" ? coords[0] === 0 : coords[1] === 0;
+$:
+  direction = position === "column" ? is_first_position ? "down" : "up" : is_first_position ? "right" : "left";
+</script>
+
+<button
+	class="selection-button selection-button-{position} {is_first_position
+		? `move-${direction}`
+		: ''}"
+	on:click|stopPropagation={() => on_click && on_click()}
+	aria-label={`Select ${position}`}
+>
+	<span class={direction}>
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+			<path
+				d="m16.707 13.293-4-4a1 1 0 0 0-1.414 0l-4 4A1 1 0 0 0 8 15h8a1 1 0 0 0 .707-1.707z"
+				data-name={direction}
+			/>
+		</svg>
+	</span>
+</button>
+
+<style>
+	.selection-button {
+		position: absolute;
+		background: var(--color-accent);
+		width: var(--size-3);
+		height: var(--size-5);
+		color: var(--background-fill-primary);
+	}
+
+	.selection-button-column {
+		top: -15px;
+		left: 50%;
+		transform: translateX(-50%) rotate(90deg);
+		border-radius: var(--radius-sm) 0 0 var(--radius-sm);
+	}
+
+	.selection-button-row {
+		left: calc(var(--size-2-5) * -1);
+		border-radius: var(--radius-sm) 0 0 var(--radius-sm);
+	}
+
+	.move-down {
+		bottom: -14px;
+		top: auto;
+		border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+	}
+
+	.move-right {
+		left: auto;
+		right: calc(var(--size-2-5) * -1);
+		border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+	}
+
+	svg {
+		fill: currentColor;
+	}
+
+	span {
+		display: flex;
+		width: 100%;
+		height: 100%;
+	}
+
+	.up {
+		transform: rotate(-90deg);
+	}
+
+	.down {
+		transform: rotate(90deg);
+	}
+
+	.left {
+		transform: rotate(-90deg);
+	}
+
+	.right {
+		transform: rotate(90deg);
+	}
+</style>

package/dist/shared/icons/SelectionButtons.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        position: "column" | "row";
+        coords: [number, number];
+        on_click?: ((() => void) | null) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SelectionButtonsProps = typeof __propDef.props;
+export type SelectionButtonsEvents = typeof __propDef.events;
+export type SelectionButtonsSlots = typeof __propDef.slots;
+export default class SelectionButtons extends SvelteComponent<SelectionButtonsProps, SelectionButtonsEvents, SelectionButtonsSlots> {
+}
+export {};

package/dist/shared/icons/SortArrowDown.svelte

@@ -0,0 +1,24 @@
+<script>export let size = 16;
+</script>
+
+<svg
+	width={size}
+	height={size}
+	viewBox="0 0 16 16"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M4 8L8 12L12 8"
+		stroke="currentColor"
+		stroke-width="1.5"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M8 12V4"
+		stroke="currentColor"
+		stroke-width="1.5"
+		stroke-linecap="round"
+	/>
+</svg>

package/dist/shared/icons/SortArrowDown.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        size?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SortArrowDownProps = typeof __propDef.props;
+export type SortArrowDownEvents = typeof __propDef.events;
+export type SortArrowDownSlots = typeof __propDef.slots;
+export default class SortArrowDown extends SvelteComponent<SortArrowDownProps, SortArrowDownEvents, SortArrowDownSlots> {
+}
+export {};

package/dist/shared/icons/SortArrowUp.svelte

@@ -0,0 +1,24 @@
+<script>export let size = 16;
+</script>
+
+<svg
+	width={size}
+	height={size}
+	viewBox="0 0 16 16"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M4 8L8 4L12 8"
+		stroke="currentColor"
+		stroke-width="1.5"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M8 4V12"
+		stroke="currentColor"
+		stroke-width="1.5"
+		stroke-linecap="round"
+	/>
+</svg>

package/dist/shared/icons/SortArrowUp.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        size?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SortArrowUpProps = typeof __propDef.props;
+export type SortArrowUpEvents = typeof __propDef.events;
+export type SortArrowUpSlots = typeof __propDef.slots;
+export default class SortArrowUp extends SvelteComponent<SortArrowUpProps, SortArrowUpEvents, SortArrowUpSlots> {
+}
+export {};

package/dist/shared/icons/SortButtonDown.svelte

@@ -0,0 +1,14 @@
+<svg
+	viewBox="0 0 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	focusable="false"
+>
+	<path
+		d="M7 10l5 5 5-5"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>

package/dist/shared/icons/SortButtonDown.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  SortButtonDownProps */
+/** @typedef {typeof __propDef.events}  SortButtonDownEvents */
+/** @typedef {typeof __propDef.slots}  SortButtonDownSlots */
+export default class SortButtonDown extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type SortButtonDownProps = typeof __propDef.props;
+export type SortButtonDownEvents = typeof __propDef.events;
+export type SortButtonDownSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/shared/icons/SortButtonUp.svelte

@@ -0,0 +1,15 @@
+<svg
+	viewBox="0 0 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	aria-hidden="true"
+	focusable="false"
+>
+	<path
+		d="M7 14l5-5 5 5"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>

package/dist/shared/icons/SortButtonUp.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  SortButtonUpProps */
+/** @typedef {typeof __propDef.events}  SortButtonUpEvents */
+/** @typedef {typeof __propDef.slots}  SortButtonUpSlots */
+export default class SortButtonUp extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type SortButtonUpProps = typeof __propDef.props;
+export type SortButtonUpEvents = typeof __propDef.events;
+export type SortButtonUpSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};