### Install and Run React Frontend Source: https://github.com/linkdlab/funcnodes_react_flow/blob/main/CONTRIBUTING.md Installs Node.js dependencies and runs common development tasks for the React frontend using Yarn. Navigate to the React source directory first. ```bash cd src/react yarn yarn test yarn typecheck yarn build ``` -------------------------------- ### Install and Run Pre-commit Hooks Source: https://github.com/linkdlab/funcnodes_react_flow/blob/main/CONTRIBUTING.md Installs and runs pre-commit hooks for Python code formatting and linting using uv. Ensure you are in the project root. ```bash cd funcnodes_react_flow UV_CACHE_DIR=.cache/uv uv run pre-commit install UV_CACHE_DIR=.cache/uv uv run pre-commit run -a ``` -------------------------------- ### Run FuncNodes UI with uv Source: https://github.com/linkdlab/funcnodes_react_flow/blob/main/README.md Navigate to the funcnodes_react_flow directory and use uv to synchronize dependencies and run the application. This is the primary way to start the UI server. ```bash cd funcnodes_react_flow uv sync uv run funcnodes_react_flow ``` -------------------------------- ### Install Python Dev Dependencies Source: https://github.com/linkdlab/funcnodes_react_flow/blob/main/CONTRIBUTING.md Installs Python development dependencies using uv. Ensure you are in the project root and have set the UV_CACHE_DIR environment variable. ```bash cd funcnodes_react_flow UV_CACHE_DIR=.cache/uv uv sync --group dev ``` -------------------------------- ### Basic SortableTable Usage Source: https://github.com/linkdlab/funcnodes_react_flow/blob/main/src/react/packages/funcnodes-react-flow/src/shared/components/SortableTable/README.md Demonstrates the basic setup of the SortableTable component with sample data. Ensure the 'SortableTable' is imported from '@/shared-components'. ```tsx import { SortableTable } from "@/shared-components"; const data = { columns: ["Name", "Age", "City"], index: ["row1", "row2", "row3"], data: [ ["Alice", 25, "New York"], ["Bob", 30, "Los Angeles"], ["Charlie", 35, "Chicago"], ], }; ``` -------------------------------- ### Combined Performance Features Source: https://github.com/linkdlab/funcnodes_react_flow/blob/main/src/react/packages/funcnodes-react-flow/src/shared/components/SortableTable/README.md An example showcasing the combined usage of pagination, virtual scrolling, and lazy loading for massive datasets, along with sorting callbacks. ```APIDOC ## Combined Performance Features ```tsx { console.log(`Sorting by ${column} in ${direction} direction`); }} /> ``` ``` -------------------------------- ### Automatic FuncNodes Initialization on Load Source: https://github.com/linkdlab/funcnodes_react_flow/blob/main/src/funcnodes_react_flow/static/index.html This code snippet sets up an onload event handler to automatically initialize FuncNodes. It includes a retry mechanism with a 5-second delay if the initial initialization fails, ensuring the application attempts to start until successful. ```javascript window.onload = async function () { const _init_fn = async () => { const options = await get_fn_options(); FuncNodes("root", options); }; const ini_fn = async () => { while (true) { try { await _init_fn(); break; } catch (e) { console.log(e); await new Promise((r) => setTimeout(r, 5000)); } } }; ini_fn(); }; ``` -------------------------------- ### Run UI via Python Entrypoint Source: https://github.com/linkdlab/funcnodes_react_flow/blob/main/CONTRIBUTING.md Launches the UI using the Python entrypoint with uv. Use the --no-browser flag to prevent automatic browser opening. ```bash cd funcnodes_react_flow FUNCNODES_CONFIG_DIR=.funcnodes UV_CACHE_DIR=.cache/uv uv run funcnodes_react_flow --no-browser ``` -------------------------------- ### Basic Usage Source: https://github.com/linkdlab/funcnodes_react_flow/blob/main/src/react/packages/funcnodes-react-flow/src/shared/components/SortableTable/README.md Demonstrates the basic implementation of the SortableTable component with sample data. ```APIDOC ## Basic Usage ```tsx import { SortableTable } from "@/shared-components"; const data = { columns: ["Name", "Age", "City"], index: ["row1", "row2", "row3"], data: [ ["Alice", 25, "New York"], ["Bob", 30, "Los Angeles"], ["Charlie", 35, "Chicago"], ], }; ``` ``` -------------------------------- ### Run FuncNodes UI with FuncNodes CLI Source: https://github.com/linkdlab/funcnodes_react_flow/blob/main/README.md Alternatively, the UI can be launched using the main FuncNodes CLI command, specifying the 'react_flow' frontend. This command is equivalent to the default behavior. ```bash run funcnodes runserver --frontend react_flow (default) ``` -------------------------------- ### Initialize FuncNodes with Options Source: https://github.com/linkdlab/funcnodes_react_flow/blob/main/src/funcnodes_react_flow/static/index.html This function fetches options for FuncNodes, determining whether to use a worker manager or a direct worker URL based on URL parameters or by fetching from the server. It includes fallback logic to fetch worker details if a worker manager is unavailable. ```javascript window.FN_WORKER_PORT=9380;function getParam(name) { try { const url = new URL(window.location.href); return url.searchParams.get(name); } catch (e) { return null; } } function parseBool(param, defaultValue) { if (param === null) { return defaultValue; } if (param === "") { return true; } const val = String(param).toLowerCase(); return val === "true" || val === "1" || val === "yes"; } async function fetch_wm() { res = await fetch("/worker_manager", { method: "GET", headers: { "Content-Type": "text/plain", }, }); if (!res.ok) { throw new Error(`HTTP error! status: ${res.res.status}`); } return await res.text(); } async function fetch_worker() { res = await fetch("/worker", { method: "GET", headers: { "Content-Type": "application/json", }, }); if (!res.ok) { throw new Error(`HTTP error! status: ${res.res.status}`); } return await res.json(); } async function get_fn_options() { options = {}; const worker_url = getParam("worker_url"); let worker_manager_url = getParam("worker_manager_url"); options.useWorkerManager = worker_url == null; if (options.useWorkerManager) { if (worker_manager_url == null) { try { worker_manager_url = await fetch_wm(); options.workermanager_url = worker_manager_url; } catch (e) { try { const worker = await fetch_worker(); options.worker_url = `ws${worker.ssl ? "s" : ""}://${worker.host}:${ worker.port }`; options.useWorkerManager = false; } catch (e) { throw new Error("Failed to fetch worker or worker manager"); } } } } else { options.worker_url = worker_url; } return options; } ``` -------------------------------- ### Usage with Pagination Source: https://github.com/linkdlab/funcnodes_react_flow/blob/main/src/react/packages/funcnodes-react-flow/src/shared/components/SortableTable/README.md Shows how to enable and configure pagination for handling large datasets. ```APIDOC ## With Pagination ```tsx ``` ``` -------------------------------- ### Usage with Lazy Loading Source: https://github.com/linkdlab/funcnodes_react_flow/blob/main/src/react/packages/funcnodes-react-flow/src/shared/components/SortableTable/README.md Demonstrates how to implement lazy loading for infinite data sets, including the `onLoadMore` callback. ```APIDOC ## With Lazy Loading ```tsx const handleLoadMore = async (page: number) => { const newData = await fetchData(page); // Update your data source }; ``` ``` -------------------------------- ### Usage with Virtual Scrolling Source: https://github.com/linkdlab/funcnodes_react_flow/blob/main/src/react/packages/funcnodes-react-flow/src/shared/components/SortableTable/README.md Illustrates how to enable virtual scrolling for improved performance with thousands of rows. ```APIDOC ## With Virtual Scrolling ```tsx ``` ``` -------------------------------- ### Run Python Tests Source: https://github.com/linkdlab/funcnodes_react_flow/blob/main/CONTRIBUTING.md Executes Python tests using pytest with uv. Requires FUNCNODES_CONFIG_DIR and UV_CACHE_DIR to be set. ```bash cd funcnodes_react_flow FUNCNODES_CONFIG_DIR=.funcnodes UV_CACHE_DIR=.cache/uv uv run pytest ```