add pages

app.py

@@ -35,6 +35,9 @@ css = """
 .cell-menu-button {
     z-index: -1;
 }
+.centered {
+    text-align: center;
+}
 """
 
 def to_json_df(con: Connection, tbl: Table) -> pd.DataFrame:
@@ -70,7 +73,7 @@ with gr.Blocks(css=css) as demo:
     loading_codes_json = gr.JSON([], visible=False)
     with gr.Row():
         with gr.Column():
-            gr.Markdown("# <p style='text-align:center;'>🤗 (WIP) Hugging Face Dataset Spreadsheets 📝</p>\n\n<p style='text-align:center;'>Edit any dataset on Hugging Face (full list <a href='https://huggingface.co/datasets' target='_blank'>here</a>)")
+            gr.Markdown("# 🤗 (WIP) Hugging Face Dataset Spreadsheets 📝\n\nEdit any dataset on Hugging Face (full list <a href='https://huggingface.co/datasets' target='_blank'>here</a>)", elem_classes="centered")
     with gr.Group():
         with gr.Tab("Select Dataset"):
             with gr.Row():
@@ -82,6 +85,11 @@ with gr.Blocks(css=css) as demo:
         with gr.Tab("Use Locally"):
             use_locally_markdown = gr.Markdown()
         dataframe = gr.DataFrame(to_json_df(memory_con, empty_tbl), interactive=True, wrap=True)
+        with gr.Row():
+            prev_button = gr.Button("< Previous", min_width=140, interactive=False)
+            with gr.Column(scale=9, min_width=0):
+                page_html = gr.HTML("Page 1", elem_classes="centered")
+            next_button = gr.Button("Next >", min_width=140)
 
     def show_subset_dropdown(dataset: str):
         if dataset and "/" not in dataset.strip().strip("/"):
@@ -97,7 +105,7 @@ with gr.Blocks(css=css) as demo:
         split = (splits or [""])[0]
         return dict(choices=splits, value=split, visible=len(splits) > 1, key=hash(str(loading_codes) + subset))
 
-    def show_input_dataframe(dataset: str, subset: str, split: str, loading_codes: list[dict], session: str):
+    def show_input_dataframe(dataset: str, subset: str, split: str, loading_codes: list[dict], session: str, page: int):
         pattern = ([loading_code["arguments"]["splits"][split] for loading_code in loading_codes if loading_code["config_name"] == subset] or [None])[0]
         if session and dataset and subset and split and pattern:
             duckdb_file = session + ".duckdb"
@@ -105,13 +113,13 @@ with gr.Blocks(css=css) as demo:
             setup_edits(con, dataset, pattern)
             # Uncomment to have one edit for testing
             # con.sql("INSERT OR REPLACE INTO edits SELECT 2 AS rowid, * FROM dataset LIMIT 1")
-            tbl = con.sql(f"SELECT * FROM edited_dataset LIMIT {PAGE_SIZE}")
+            tbl = con.sql(f"SELECT * FROM edited_dataset LIMIT {PAGE_SIZE} OFFSET {(page - 1) * PAGE_SIZE}")
             return dict(value=to_json_df(con, tbl))
         else:
             return dict(value=to_json_df(memory_con, empty_tbl))
         
 
-    @demo.load(inputs=session_state, outputs=[dataset_dropdown, loading_codes_json, subset_dropdown, split_dropdown, dataframe, session_state, share_link_textbox, use_locally_markdown])
+    @demo.load(inputs=session_state, outputs=[dataset_dropdown, loading_codes_json, subset_dropdown, split_dropdown, dataframe, session_state, share_link_textbox, use_locally_markdown, prev_button, next_button, page_html])
     def _fetch_datasets(session: str | None, request: gr.Request):
         datasets = list(HfApi().list_datasets(limit=NUM_TRENDING_DATASETS, sort="trendingScore", direction=-1, filter=["format:parquet"]))
         session = request.query_params.get(SESSIONS_DIR) or session
@@ -128,7 +136,8 @@ with gr.Blocks(css=css) as demo:
         splits = show_split_dropdown(subsets["value"], loading_codes)
         splits["value"] = split if session else splits["value"]
         session = session if isinstance(session, str) else f"{dataset.replace('/', '--')}--{subsets['value']}--{splits['value']}--{uuid4()}"
-        input_dataframe = show_input_dataframe(dataset, subsets["value"], splits["value"], loading_codes, session)
+        page = 1
+        input_dataframe = show_input_dataframe(dataset, subsets["value"], splits["value"], loading_codes, session, page)
         return {
             dataset_dropdown: gr.Dropdown(choices=[dataset.id for dataset in datasets], value=dataset),
             loading_codes_json: loading_codes,
@@ -140,45 +149,80 @@ with gr.Blocks(css=css) as demo:
             use_locally_markdown: (
                 f"""In DuckDB:\n\n```sql\nATTACH '{HOST_URL}/gradio_api/file={SESSIONS_DIR}/{session}.duckdb AS db';\nUSE db;\nSELECT * FROM edited_dataset LIMIT 5;\n```\n\n"""
                 f"""In Python:\n\n```python\nimport duckdb\n\nduckdb.sql("ATTACH '{HOST_URL}/gradio_api/file={SESSIONS_DIR}/{session}.duckdb' AS db")\nduckdb.sql("USE db")\ndf = duckdb.sql("SELECT * FROM edited_dataset LIMIT 5").df()\n```"""
-            )
+            ),
+            prev_button: gr.Button(interactive=False),
+            next_button: gr.Button(elem_classes="", interactive=True) if len(input_dataframe["value"]) >= PAGE_SIZE else gr.Button(interactive=False),
+            page_html: f"Page {page}",
         }
     
-    @dataset_dropdown.select(inputs=[session_state, dataset_dropdown], outputs=[session_state, loading_codes_json, subset_dropdown, split_dropdown, dataframe])
+    @dataset_dropdown.select(inputs=[session_state, dataset_dropdown], outputs=[session_state, loading_codes_json, subset_dropdown, split_dropdown, dataframe, prev_button, next_button, page_html])
     def _show_subset_dropdown(session: str | None, dataset: str):
         subsets, loading_codes = show_subset_dropdown(dataset)
         splits = show_split_dropdown(subsets["value"], loading_codes)
         session = f"{dataset.replace('/', '--')}--{subsets['value']}--{splits['value']}--{uuid4()}"
-        input_dataframe = show_input_dataframe(dataset, subsets["value"], splits["value"], loading_codes, session)
+        page = 1
+        input_dataframe = show_input_dataframe(dataset, subsets["value"], splits["value"], loading_codes, session, page)
         return {
             loading_codes_json: loading_codes,
             subset_dropdown: gr.Dropdown(**subsets),
             split_dropdown: gr.Dropdown(**splits),
             session_state: session,
             dataframe: gr.DataFrame(**input_dataframe),
+            prev_button: gr.Button(interactive=False),
+            next_button: gr.Button(elem_classes="", interactive=True) if len(input_dataframe["value"]) >= PAGE_SIZE else gr.Button(interactive=False),
+            page_html: f"Page {page}",
         }
     
-    @subset_dropdown.select(inputs=[dataset_dropdown, subset_dropdown, loading_codes_json], outputs=[session_state, split_dropdown, dataframe])
+    @subset_dropdown.select(inputs=[dataset_dropdown, subset_dropdown, loading_codes_json], outputs=[session_state, split_dropdown, dataframe, prev_button, next_button, page_html])
     def _show_split_dropdown(dataset: str, subset: str, loading_codes: list[dict]):
         splits = show_split_dropdown(subset, loading_codes)
         session = f"{dataset.replace('/', '--')}--{subset}--{splits['value']}--{uuid4()}"
-        input_dataframe = show_input_dataframe(dataset, subset, splits["value"], loading_codes, session)
+        page = 1
+        input_dataframe = show_input_dataframe(dataset, subset, splits["value"], loading_codes, session, page)
         return {
             split_dropdown: gr.Dropdown(**splits),
             session_state: session,
             dataframe: gr.DataFrame(**input_dataframe),
+            prev_button: gr.Button(interactive=False),
+            next_button: gr.Button(elem_classes="", interactive=True) if len(input_dataframe["value"]) >= PAGE_SIZE else gr.Button(interactive=False),
+            page_html: f"Page {page}",
         }
     
-    @split_dropdown.select(inputs=[dataset_dropdown, subset_dropdown, split_dropdown, loading_codes_json], outputs=[session_state, dataframe])
+    @split_dropdown.select(inputs=[dataset_dropdown, subset_dropdown, split_dropdown, loading_codes_json], outputs=[session_state, dataframe, prev_button, next_button, page_html])
     def _show_input_dataframe(dataset: str, subset: str, split: str, loading_codes: list[dict]) -> pd.DataFrame:
         session = f"{dataset.replace('/', '--')}--{subset}--{split}--{uuid4()}"
-        input_dataframe = show_input_dataframe(dataset, subset, split, loading_codes, session)
+        page = 1
+        input_dataframe = show_input_dataframe(dataset, subset, split, loading_codes, session, page)
         return {
             session_state: session,
             dataframe: gr.DataFrame(**input_dataframe),
+            prev_button: gr.Button(interactive=False),
+            next_button: gr.Button(elem_classes="", interactive=True) if len(input_dataframe["value"]) >= PAGE_SIZE else gr.Button(interactive=False),
+            page_html: f"Page {page}",
+        }
+    
+    @next_button.click(inputs=[dataset_dropdown, subset_dropdown, split_dropdown, loading_codes_json, session_state, page_html], outputs=[dataframe, prev_button, next_button, page_html])
+    def _show_next_page(dataset: str, subset: str, split: str, loading_codes: list[dict], session: str, page_str: str) -> pd.DataFrame:
+        page = int(page_str.split(" ")[-1]) + 1
+        input_dataframe = show_input_dataframe(dataset, subset, split, loading_codes, session, page)
+        return {
+            dataframe: gr.DataFrame(**input_dataframe),
+            prev_button: gr.Button(elem_classes="", interactive=True),
+            page_html: f"Page {page}",
+        }
+
+    @prev_button.click(inputs=[dataset_dropdown, subset_dropdown, split_dropdown, loading_codes_json, session_state, page_html], outputs=[dataframe, prev_button, next_button, page_html])
+    def _show_prev_page(dataset: str, subset: str, split: str, loading_codes: list[dict], session: str, page_str: str) -> pd.DataFrame:
+        page = int(page_str.split(" ")[-1]) - 1
+        input_dataframe = show_input_dataframe(dataset, subset, split, loading_codes, session, page)
+        return {
+            dataframe: gr.DataFrame(**input_dataframe),
+            prev_button: gr.Button(interactive=False) if page == 1 else gr.Button(elem_classes="", interactive=True),
+            page_html: f"Page {page}",
         }
     
-    @dataframe.input(inputs=[dataframe, session_state, dataset_dropdown, subset_dropdown, split_dropdown, loading_codes_json])
-    def _dataframe_input(df: pd.DataFrame, session: str | None, dataset: str, subset: str, split: str, loading_codes: list[dict]):
+    @dataframe.input(inputs=[dataframe, session_state, dataset_dropdown, subset_dropdown, split_dropdown, loading_codes_json, page_html])
+    def _dataframe_input(df: pd.DataFrame, session: str | None, dataset: str, subset: str, split: str, loading_codes: list[dict], page_str: str):
         pattern = ([loading_code["arguments"]["splits"][split] for loading_code in loading_codes if loading_code["config_name"] == subset] or [None])[0]
         if session and dataset and subset and split and pattern:
             duckdb_file = session + ".duckdb"
@@ -188,11 +232,12 @@ with gr.Blocks(css=css) as demo:
             columns = empty_dataset_tbl.columns
             dtypes = empty_dataset_tbl.dtypes
             tbl = from_json_df(con, df, columns=columns, dtypes=dtypes)
+            page = int(page_str.split(" ")[-1])
             # TODO add edits for page > 1
             # Note: Here we don't use INSERT OR REPLACE because of Not implemented Error: List Update is not supported.
-            con.sql(f"DELETE FROM edits WHERE rowid IN range({len(df)})")
+            con.sql(f"DELETE FROM edits WHERE rowid IN range({(page - 1) * PAGE_SIZE}, {page * PAGE_SIZE})")
             try:
-                con.sql(f"INSERT INTO edits SELECT * FROM (SELECT unnest(range({len(df)})) AS rowid) POSITIONAL JOIN tbl")
+                con.sql(f"INSERT INTO edits SELECT * FROM (SELECT unnest(range({(page - 1) * PAGE_SIZE}, {page * PAGE_SIZE})) AS rowid) POSITIONAL JOIN tbl")
             except duckdb.ConversionException as e:
                 raise gr.Error(str(e).split('\n')[0], title="duckdb.ConversionException")
             print(f"Saved {dataset} edits")