[ { "path": ".dockerignore", "content": ".git\n.env\n.github\n.vscode\nscripts/demo\ne2e\nelectron\nreleases\n**/node_modules\n**/dist\n**/prostgles_backups\n**/prostgles_media\n**/prostgles_storage\n**/prostgles_mcp" }, { "path": ".eslintrc.common.js", "content": "/**\n * @type {import('eslint').Linter.Config}\n */\nmodule.exports = {\n // \"root\": true,\n parserOptions: {\n ecmaVersion: \"latest\",\n sourceType: \"module\",\n allowImportExportEverywhere: true,\n project: [\"./tsconfig.json\"],\n // \"tsconfigRootDir\": __dirname,\n },\n // \"ingorePatterns\": \"**/*.d.ts, **/*.js\",\n\n ignores: [\n \"node_modules\",\n \"dist\",\n \"examples\",\n \"**/*.d.ts\",\n \"**/*.js\",\n \"tests\",\n \".eslintrc.js\",\n \".eslint.config.js\",\n \"*.json\",\n \"**/*.json\",\n ],\n parser: \"@typescript-eslint/parser\",\n plugins: [\"@typescript-eslint\"],\n extends: [\"eslint:recommended\", \"plugin:@typescript-eslint/recommended\"],\n rules: {\n \"@typescript-eslint/no-misused-spread\": [\n \"error\",\n {\n allow: [\n \"CSSStyleDeclaration\",\n \"Partial\",\n \"DOMStringMap\",\n ],\n },\n ],\n \"no-cond-assign\": \"error\",\n \"@typescript-eslint/no-namespace\": \"off\",\n \"@typescript-eslint/no-explicit-any\": \"off\",\n \"@typescript-eslint/no-non-null-assertion\": \"off\",\n \"@typescript-eslint/ban-types\": \"off\",\n \"@typescript-eslint/ban-ts-comment\": \"off\",\n \"no-async-promise-executor\": \"off\",\n \"@typescript-eslint/no-var-requires\": \"off\",\n \"@typescript-eslint/no-unused-vars\": \"off\",\n \"@typescript-eslint/no-empty-function\": \"off\",\n \"@typescript-eslint/prefer-promise-reject-errors\": \"off\",\n \"no-unused-vars\": \"off\",\n \"no-empty\": \"off\",\n \"no-constant-condition\": \"error\",\n \"@typescript-eslint/no-unnecessary-condition\": \"error\",\n \"@typescript-eslint/consistent-type-imports\": [\n \"error\",\n {\n disallowTypeAnnotations: false,\n },\n ],\n quotes: [\n \"error\",\n \"double\",\n {\n avoidEscape: true,\n allowTemplateLiterals: true,\n },\n ],\n },\n};\n" }, { "path": ".gitattributes", "content": "# Never modify line endings of bash scripts\n*.sh -crlf" }, { "path": ".github/ISSUE_TEMPLATE/BUG.yml", "content": "name: Bug Report\ndescription: File a bug report\ntitle: \"[Bug]: \"\nlabels: [\"bug\", \"triage\"]\nassignees:\n - octocat\nbody:\n - type: markdown\n attributes:\n value: |\n Thanks for taking the time to fill out this bug report!\n - type: textarea\n id: what-happened\n attributes:\n label: What happened?\n description: Also tell us, what did you expect to happen?\n placeholder: Tell us what you see!\n value: \"A bug happened!\"\n validations:\n required: true\n - type: dropdown\n id: product\n attributes:\n label: Which product are you seeing the problem on?\n multiple: true\n options:\n - UI\n - Prostgles-Desktop\n - type: dropdown\n id: os\n attributes:\n label: What OS are you seeing the problem on?\n multiple: true\n options:\n - Android\n - iOS\n - Windows\n - Linux\n - type: dropdown\n id: browsers\n attributes:\n label: What browsers are you seeing the problem on?\n multiple: true\n options:\n - Firefox\n - Chrome\n - Safari\n - Microsoft Edge\n - type: textarea\n id: logs\n attributes:\n label: Relevant log output\n description: Please copy and paste any relevant log output. This will be automatically formatted into code, so no need for backticks.\n render: shell\n" }, { "path": ".github/ISSUE_TEMPLATE/CUSTOM.yml", "content": "name: Custom issue\ndescription: File a feature request\ntitle: \"[Title]\"\nassignees:\n - prostgles\nbody:\n - type: textarea\n id: details\n attributes:\n label: Issue details\n value: \"Description ...\"\n validations:\n required: true\n" }, { "path": ".github/ISSUE_TEMPLATE/FEATURE.yml", "content": "name: Feature request\ndescription: File a feature request\ntitle: \"[Feature]: \"\nlabels: [\"feature\"]\nassignees:\n - prostgles\nbody:\n - type: markdown\n attributes:\n value: |\n Thanks for taking the time to fill out this feature request!\n - type: textarea\n id: details\n attributes:\n label: Requested Behavior\n description: What do you want to be able to do\n value: \"I need to \"\n validations:\n required: true\n - type: textarea\n id: current-approach\n attributes:\n label: How to achieve this now\n description: Current work arounds to accomplish requested behavior\n value: \"You have to \"\n validations:\n required: false\n" }, { "path": ".github/ISSUE_TEMPLATE/bug_report.md", "content": "### Actual Behavior\n\n### Expected Behavior\n\n### Steps to reproduce the issue\n\n#### Data used\n\n#### Config\n" }, { "path": ".github/ISSUE_TEMPLATE/config.yml", "content": "blank_issues_enabled: false\n" }, { "path": ".github/ISSUE_TEMPLATE/custom.md", "content": "## Issue title\n\n## Details\n" }, { "path": ".github/ISSUE_TEMPLATE/feature_request.md", "content": "## Requested Behavior\n\n## Use Cases\n\n## Current work arounds to accomplish requested behavior\n" }, { "path": ".github/workflows/docker_test.yml", "content": "name: Test docker scripts\non:\n pull_request:\n branches: [main, master]\n merge_group:\nconcurrency:\n group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}\n cancel-in-progress: true\njobs:\n test_docker:\n name: Test docker scripts\n runs-on: ubuntu-latest\n\n steps:\n - name: Checkout code\n uses: actions/checkout@v3\n\n - name: Docker run\n run: |\n docker run -d -p 127.0.0.1:5432:5432 -e POSTGRES_PASSWORD=postgres postgres\n TEST_SCRIPT=$(awk '/```docker-run.sh/{f=1;next} /```/{f=0} f' README.md)\n echo $TEST_SCRIPT\n eval \"$TEST_SCRIPT\"\n - name: Test Docker run\n run: |\n sleep 15\n docker ps \n pg_container_name=$(docker ps --format '{{.Names}}\\t{{.Image}}' | grep 'prostgles' | head -1 | awk '{print $1}')\n echo $pg_container_name\n eval \"docker logs $pg_container_name\"\n result=$(curl -b -i -L -v localhost:3004)\n echo $result\n echo $result | grep -q \"Prostgles UI\"; echo $?\n docker stop $(docker ps -a -q)\n\n - name: Docker compose\n run: |\n TEST_SCRIPT=$(awk '/```docker-compose.sh/{f=1;next} /```/{f=0} f' README.md)\n echo $TEST_SCRIPT\n eval \"$TEST_SCRIPT\"\n - name: Test Docker compose\n run: |\n sleep 10\n docker ps\n result=$(curl -b -i -L -v localhost:3004)\n echo $result | grep -q \"Prostgles UI\"; echo $?\n" }, { "path": ".github/workflows/electron_build_linux.yml", "content": "name: Electron build & test linux\non: workflow_dispatch\njobs:\n electron_build:\n timeout-minutes: 20\n runs-on: ubuntu-latest\n\n steps:\n - uses: actions/checkout@v3\n - uses: actions/setup-node@v3\n with:\n node-version: 20\n\n - name: Install dependencies, build and test\n run: |\n sudo apt-get update && \\\n cd electron && npm run build-linux\n\n - name: Install dependencies for testing\n run: |\n sudo apt-get update\n cd electron && sudo apt-get install -y x11-xserver-utils scrot libnotify4 libnss3-dev libatk1.0-0 libatk-bridge2.0-0 libgdk-pixbuf2.0-0 libgtk-3-0 gconf-service gconf2\n DEBIAN_FRONTEND=noninteractive sudo apt install -y x11-apps xvfb gdebi-core\n - name: Install the app\n run: |\n cd electron\n sha256sum ./dist/*.deb > ./dist/checksum.txt\n cat ./dist/checksum.txt\n sudo dpkg -i ./dist/*.deb\n - name: Test installation file\n run: |\n cd electron\n xvfb-run --server-num=98 --server-args=\"-screen 0 1920x1080x24\" -- bash -c \"QTWEBENGINE_CHROMIUM_FLAGS=--disable-gpu prostgles-desktop & sleep 5 && scrot ./dist/screenshot.png && exit\" && exit\n - uses: actions/upload-artifact@v4\n if: always()\n with:\n name: installers\n path: electron/dist\n compression-level: 0\n retention-days: 10\n" }, { "path": ".github/workflows/electron_build_macos.yml", "content": "name: Electron build & test macOs\non: workflow_dispatch\nconcurrency:\n group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}\n cancel-in-progress: true\njobs:\n electron_build_macos:\n timeout-minutes: 25\n runs-on: macos-12-large\n steps:\n - uses: actions/checkout@v3\n - uses: actions/setup-node@v3\n with:\n node-version: 22 # node 20 is too slow\n - name: Install dependencies\n run: |\n cd electron \n npm run build-macos\n rm -rf ./dist/mac-universal\n - name: Test DMG file installations and run\n run: |\n shasum -a 256 electron/dist/*.dmg > electron/dist/checksum.txt\n cat electron/dist/checksum.txt\n hdiutil attach electron/dist/*.dmg\n ls -la /Volumes\n sudo cp -r /Volumes/Prostgles*/*.app /Applications\n open /Applications/Prostgles*.app\n sleep 10\n screencapture electron/dist/picture.png\n - uses: actions/upload-artifact@v4\n if: always()\n with:\n name: installers\n path: electron/dist\n compression-level: 0\n retention-days: 10\n" }, { "path": ".github/workflows/electron_build_windows.yml", "content": "name: Electron build & test windows\non: workflow_dispatch\njobs:\n electron_build_windows:\n timeout-minutes: 12\n runs-on: windows-latest\n steps:\n - uses: actions/checkout@v3\n - uses: actions/setup-node@v3\n with:\n node-version: 20\n\n - name: Build\n run: |\n cd electron && npm run build-win\n\n - name: Test build\n shell: cmd\n run: |\n cd electron\\dist\n for /r %%f in (*.exe) DO certutil -hashfile \"%%f\" SHA256 > windows.checksums\n type windows.checksums\n for /r %%f in (*.exe) DO \"%%f\" /S --force-run\n cd ..\n waitfor SomethingThatIsNeverHappening /t 3 2>NUL\n call screenCapture.bat .\\dist\\screen1.png\n\n - uses: actions/upload-artifact@v3\n if: always()\n with:\n name: installers\n path: electron/dist\n compression-level: 0\n retention-days: 10\n" }, { "path": ".github/workflows/electron_linux_test.yml", "content": "name: Electron test linux (deprecated)\non: workflow_dispatch\njobs:\n electron_build:\n timeout-minutes: 20\n runs-on: ubuntu-latest\n\n steps:\n - uses: actions/checkout@v3\n - uses: actions/setup-node@v3\n with:\n node-version: 20\n\n - name: Install dependencies, build and test\n run: |\n sudo apt-get install xvfb -y &&\n cd electron && npm run test-linux\n\n - uses: actions/upload-artifact@v3\n if: always()\n with:\n name: installers\n path: electron/dist\n retention-days: 10\n" }, { "path": ".github/workflows/electron_macos_test.yml", "content": "name: Electron test macos (deprecated)\non: workflow_dispatch\njobs:\n electron_build:\n timeout-minutes: 20\n runs-on: macos-12-large\n\n steps:\n - uses: actions/checkout@v3\n - uses: actions/setup-node@v3\n with:\n node-version: 20\n\n - name: Install dependencies, build and test\n run: |\n sleep 60 && \\\n screencapture -v electron/dist/vid.mov & \\\n cd electron && npm run test-macos\n\n - uses: actions/upload-artifact@v3\n if: always()\n with:\n name: test-results\n path: electron/dist\n retention-days: 10\n" }, { "path": ".github/workflows/linux_test.yml", "content": "name: Linux & Electron test\non:\n pull_request:\n branches: [main, master]\n merge_group:\nconcurrency:\n group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}\n cancel-in-progress: true\njobs:\n test_linux:\n runs-on: ubuntu-latest\n timeout-minutes: 45\n services:\n postgres:\n image: postgis/postgis:15-3.3\n env:\n POSTGRES_DB: db\n POSTGRES_PASSWORD: psw\n POSTGRES_USER: usr\n ports:\n - 5432:5432\n options: >-\n --health-cmd pg_isready\n --health-interval 10s\n --health-timeout 5s\n --health-retries 10\n steps:\n - uses: actions/checkout@v3\n - uses: actions/setup-node@v3\n with:\n node-version: 20\n fetch-depth: 2 # Fetch at least 2 commits to ensure doc checks work\n\n - name: Install curl inside postgres container for video needed for demo\n run: |\n pg_container_name=$(docker ps --format '{{.Names}}\\t{{.Image}}' | grep 'postgis' | head -1 | awk '{print $1}') && \\\n echo $pg_container_name && \\\n docker ps -a && \\\n docker exec $pg_container_name /bin/sh -c \"apt-get update && apt install curl -y\"\n\n - name: Wait for PostgreSQL to be ready and create prostgles_desktop_db\n run: |\n until pg_isready -h localhost -U usr -d db; do\n sleep 1\n done\n PGPASSWORD=psw psql -h localhost -U usr -d db -c \"CREATE DATABASE prostgles_desktop_db;\"\n\n - name: Install dependencies (psql with pg_dump)\n pg_dump version must be >= pg servers version to ensure backup/restore works\n run: |\n cd client && npm ci && \\\n cd ../server && npm ci && \\\n cd ../e2e && npm ci && npx playwright install && \\\n sudo sh -c 'echo \"deb http://apt.postgresql.org/pub/repos/apt $(lsb_release -cs)-pgdg main\" > /etc/apt/sources.list.d/pgdg.list' && \\\n sudo apt-get -y install wget ca-certificates && \\\n wget --quiet -O - https://www.postgresql.org/media/keys/ACCC4CF8.asc | sudo apt-key add - && \\\n sudo apt-get update && \\\n sudo apt-get -y install postgresql-client-16\n # Install uv tool for MCP tools\n curl -LsSf https://astral.sh/uv/install.sh | sh\n npm cache clean --force\n\n - name: Run test\n run: |\n npm test\n\n - uses: actions/upload-artifact@v4\n if: always()\n with:\n name: playwright-report\n path: |\n e2e/electron-report/\n e2e/playwright-report/\n retention-days: 10\n test_desktop_on_macos:\n runs-on: macos-latest\n timeout-minutes: 15\n if: success()\n steps:\n - uses: actions/checkout@v3\n - uses: actions/setup-node@v3\n with:\n node-version: 20\n - name: Install curl inside postgres container for video needed for demo\n run: |\n ls -la /Applications/\n\n - name: Install dependencies (psql with pg_dump) pg_dump version must be >= pg servers version to ensure backup/restore works\n run: |\n /bin/bash -c \"$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)\" && \\\n brew install postgresql@14\n brew services restart postgresql@14\n export PATH=\"/opt/homebrew/opt/postgresql@14/bin:$PATH\"\n /opt/homebrew/opt/postgresql@14/bin/psql --version\n /opt/homebrew/opt/postgresql@14/bin/pg_dump --version\n until pg_isready\n do\n echo \"Waiting for postgres to start...\"\n sleep 1\n done\n /opt/homebrew/opt/postgresql@14/bin/createuser -s postgres\n sudo psql -U postgres -c \"CREATE USER usr WITH LOGIN SUPERUSER ENCRYPTED PASSWORD 'psw'\"\n sudo psql -U postgres -c \"CREATE DATABASE prostgles_desktop_db OWNER usr\"\n brew install postgis\n brew services restart postgresql \n\n psql --version\n cd electron\n npm run test-macos\n\n - uses: actions/upload-artifact@v4\n if: always()\n with:\n name: playwright-report-electron\n path: e2e/electron-report/\n retention-days: 10\n" }, { "path": ".github/workflows/macos_test.yml", "content": "name: MacOS test\non: workflow_dispatch\nconcurrency:\n group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}\n cancel-in-progress: true\njobs:\n test_macos:\n runs-on: macos-latest\n timeout-minutes: 30\n steps:\n - uses: actions/checkout@v3\n - uses: actions/setup-node@v3\n with:\n node-version: 20\n - name: Install curl inside postgres container for video needed for demo\n run: |\n ls -la /Applications/\n\n - name: Install dependencies (psql with pg_dump) pg_dump version must be >= pg servers version to ensure backup/restore works\n run: |\n /bin/bash -c \"$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)\" && \\\n brew install postgresql@14\n brew services restart postgresql@14\n export PATH=\"/opt/homebrew/opt/postgresql@14/bin:$PATH\"\n /opt/homebrew/opt/postgresql@14/bin/psql --version\n /opt/homebrew/opt/postgresql@14/bin/pg_dump --version\n until pg_isready\n do\n echo \"Waiting for postgres to start...\"\n sleep 1\n done\n /opt/homebrew/opt/postgresql@14/bin/createuser -s postgres\n sudo psql -U postgres -c \"CREATE USER usr WITH LOGIN SUPERUSER ENCRYPTED PASSWORD 'psw'\"\n sudo psql -U postgres -c \"CREATE DATABASE db OWNER usr\"\n brew install postgis\n brew services restart postgresql \n\n psql --version\n cd client && npm ci && \\\n cd ../server && npm ci && \\\n cd ../e2e && npm ci && npx playwright install\n - name: Run test\n run: |\n npm test\n\n - uses: actions/upload-artifact@v4\n if: always()\n with:\n name: playwright-report\n path: e2e/playwright-report/\n retention-days: 10\n\n # brew install pcre\n # sudo ln -s /opt/homebrew/Cellar/postgresql@16/16.0/bin/postgres /usr/local/bin/postgres\n # wget https://download.osgeo.org/postgis/source/postgis-3.4.0.tar.gz\n # tar -xvzf postgis-3.4.0.tar.gz\n # rm postgis-3.4.0.tar.gz\n # cd postgis-3.4.0\n # ./configure --with-projdir=/opt/homebrew/opt/proj --with-protobufdir=/opt/homebrew/opt/protobuf-c --with-pgconfig=/opt/homebrew/opt/postgresql@16/bin/pg_config --with-jsondir=/opt/homebrew/opt/json-c --with-sfcgal=/opt/homebrew/opt/sfcgal/bin/sfcgal-config --with-pcredir=/opt/homebrew/opt/pcre \"LDFLAGS=$LDFLAGS -L/opt/homebrew/Cellar/gettext/0.22.2/lib\" \"CFLAGS=-I/opt/homebrew/Cellar/gettext/0.22.2/include\"\n # make\n # make install\n\n # export PATH=\"/opt/homebrew/opt/postgresql@16/bin:$PATH\" && \\\n" }, { "path": ".github/workflows/on_release.yml", "content": "name: On Release\non:\n push:\n tags:\n - \"v*\"\nconcurrency:\n group: ${{ github.workflow }}-${{ github.ref }}\n cancel-in-progress: true\njobs:\n build_docker_images:\n timeout-minutes: 20\n runs-on: ubuntu-latest\n strategy:\n fail-fast: false # Optional: Prevent other matrix jobs from being cancelled if one fails\n matrix:\n include: # Define the specific combinations you need\n - image_name: ui\n dockerfile: Dockerfile\n - image_name: ui-db\n dockerfile: DB-Dockerfile\n # Add more entries here if you have more images to build\n steps:\n - name: Checkout\n uses: actions/checkout@v4\n\n - name: Extract version\n id: extract_version\n run: |\n VERSION=$(./scripts/get_version.sh)\n echo \"version=v$VERSION\" >> $GITHUB_OUTPUT\n echo \"Extracted version: v$VERSION\"\n\n - name: Ensure release file exists\n run: |\n pr_version=$(./scripts/get_version.sh) \n base_ref=\"${{ github.base_ref }}\"\n release_file_path=\"./releases/v${pr_version}.md\"\n\n echo \"Checking for release file: ${release_file_path}\"\n\n if [ -f \"$release_file_path\" ]; then\n echo \"Release file found: ${release_file_path}\"\n else\n\n echo \"Release file not found for v${pr_version}\"\n echo \"Ensure this file exists: ${release_file_path}\"\n\n exit 1\n fi\n\n - name: Ensure docker-compose.yml image tags are updated\n run: |\n pr_version=$(./scripts/get_version.sh) \n expected_tag=\"v${pr_version}\"\n docker_compose_file=\"./docker-compose.yml\"\n\n echo \"Checking docker-compose.yml for correct image tags...\"\n\n if grep -q \"image: prostgles/ui:${expected_tag}\" \"$docker_compose_file\" && \\\n grep -q \"image: prostgles/ui-db:${expected_tag}\" \"$docker_compose_file\"; then\n echo \"docker-compose.yml uses the correct image tags: ${expected_tag}\"\n else\n echo \"docker-compose.yml does not use the correct image tags.\"\n echo \"Expected tags: prostgles/ui:${expected_tag} and prostgles/ui-db:${expected_tag}\"\n exit 1\n fi\n\n - name: Create Release with Notes\n uses: softprops/action-gh-release@v2\n with:\n body_path: ./releases/${{ steps.extract_version.outputs.version }}.md\n draft: false\n\n - name: Login to Docker Hub\n uses: docker/login-action@v3\n with:\n username: ${{ secrets.DOCKERHUB_USERNAME }}\n password: ${{ secrets.DOCKERHUB_TOKEN }}\n\n - name: Set up QEMU\n uses: docker/setup-qemu-action@v3\n\n - name: Set up Docker Buildx\n uses: docker/setup-buildx-action@v3\n\n - name: Build and push ui\n uses: docker/build-push-action@v6\n with:\n context: .\n file: ${{ matrix.dockerfile }}\n platforms: linux/amd64\n push: true\n tags: |\n prostgles/${{ matrix.image_name }}:latest\n prostgles/${{ matrix.image_name }}:${{ steps.extract_version.outputs.version }}\n\n build_linux:\n timeout-minutes: 20\n runs-on: ubuntu-latest\n needs: build_docker_images\n if: success()\n steps:\n - uses: actions/checkout@v3\n - uses: actions/setup-node@v3\n with:\n node-version: 20\n - name: Build Linux\n run: |\n sudo apt-get install rpm -y && \\\n cd electron && npm run build-linux\n cd dist\n sha256sum *.* > linux.checksums\n echo linux.checksums\n - name: Release Linux\n uses: softprops/action-gh-release@v2\n with:\n files: |\n electron/dist/**/*.deb\n electron/dist/**/*.rpm\n electron/dist/**/*.AppImage\n electron/dist/**/*.checksums\n build_windows:\n timeout-minutes: 20\n needs: build_docker_images\n runs-on: windows-latest\n if: success()\n steps:\n - uses: actions/checkout@v3\n - uses: actions/setup-node@v3\n with:\n node-version: 20\n - name: Build Windows\n shell: cmd\n run: |\n cd electron \n npm run build-win\n cd dist\n for /r %%f in (*.exe) DO certutil -hashfile \"%%f\" SHA256 > windows.checksums\n type windows.checksums\n - name: Release Windows\n uses: softprops/action-gh-release@v2\n with:\n files: |\n electron/dist/**/*.exe\n electron/dist/**/*.checksums\n build_macos:\n timeout-minutes: 20\n needs: build_docker_images\n runs-on: macos-latest\n if: success()\n steps:\n - uses: actions/checkout@v3\n - uses: actions/setup-node@v3\n with:\n node-version: 18\n - name: Build MacOS\n run: |\n cd electron \n npm run build-macos\n rm -rf ./dist/mac-universal\n cd dist\n shasum -a 256 *.* > macos.checksums\n cat macos.checksums\n - name: Release MacOS\n uses: softprops/action-gh-release@v2\n with:\n files: |\n electron/dist/**/*.dmg\n electron/dist/**/*.checksums\n" }, { "path": ".github/workflows/package_version_increased.yml", "content": "name: Ensure package version is higher\non:\n pull_request:\n branches: [main, master]\n merge_group:\nconcurrency:\n group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}\n cancel-in-progress: true\njobs:\n test_docker:\n name: Run test suite\n runs-on: ubuntu-latest\n\n steps:\n - name: Checkout code\n uses: actions/checkout@v3\n\n - name: Get versions\n id: pr-version\n run: |\n sudo apt install jq\n ./scripts/get_version.sh > pr_version.txt\n git fetch origin ${{ github.base_ref }} --depth=1\n git checkout origin/${{ github.base_ref }} -- package.json ./electron/package.json\n ./scripts/get_version.sh > current_version.txt\n\n - name: Compare versions\n run: |\n current_version=$(cat current_version.txt)\n pr_version=$(cat pr_version.txt) \n if [ \"$(printf '%s\\n' \"$current_version\" \"$pr_version\" | sort -V | head -n1)\" = \"$pr_version\" ]; then\n echo \"Version in package.json is not greater than the version in the base branch: $current_version <= $pr_version\"\n exit 1\n else\n echo \"Version check passed: $current_version <= $pr_version\"\n fi\n\n - name: Ensure Changelog exists\n if: success() # Ensure version comparison passed\n run: |\n pr_version=$(cat pr_version.txt) \n base_ref=\"${{ github.base_ref }}\"\n release_file_path=\"./changelog/v${pr_version}.md\"\n\n echo \"Checking for changelog file: ${release_file_path}\"\n\n if [ -f \"$release_file_path\" ]; then\n echo \"Changelog file found: ${release_file_path}\"\n else\n\n echo \"Changelog file not found for v${pr_version}.\"\n echo \"Ensure this file exists: ${release_file_path}\"\n\n exit 1\n fi\n" }, { "path": ".github/workflows/windows_test.yml", "content": "name: Windows test\non: workflow_dispatch\nconcurrency:\n group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}\n cancel-in-progress: true\njobs:\n test_windows:\n runs-on: windows-latest\n timeout-minutes: 30\n steps:\n - uses: actions/checkout@v3\n - uses: actions/setup-node@v3\n with:\n node-version: 20\n - uses: nyurik/action-setup-postgis@v2\n with:\n username: postgres\n password: postgres\n database: postgres\n port: 5432\n id: postgres\n - name: Install postgres\n run: |\n cd \"C:\\Program Files\\PostgreSQL\\14\\bin\"\n .\\psql.exe -c \"CREATE EXTENSION postgis;\" \"postgresql://postgres:postgres@127.0.0.1:5432/postgres\"\n .\\psql.exe -c \"CREATE USER usr WITH LOGIN SUPERUSER ENCRYPTED PASSWORD 'psw'\" \"postgresql://postgres:postgres@127.0.0.1:5432/postgres\"\n .\\psql.exe -c \"CREATE DATABASE db OWNER usr\" \"postgresql://postgres:postgres@127.0.0.1:5432/postgres\"\n\n - name: Install test dependencies\n run: |\n npm config set script-shell \"C:\\\\Program Files\\\\Git\\\\bin\\\\bash.exe\"\n cd client\n npm ci\n cd ../server \n npm ci\n cd ../e2e \n npm ci \n npx playwright install\n - name: Run test\n run: |\n npm test\n\n - uses: actions/upload-artifact@v4\n if: always()\n with:\n name: playwright-report\n path: e2e/playwright-report/\n retention-days: 10\n" }, { "path": ".gitignore", "content": "node_modules\nprostgles_media\nprostgles_storage\nprostgles_backups\nprostgles_certificates\nprostgles_mcp\n.electron-auth.json\n**/.electron-auth.json\n.prostgles-desktop-config.json\n**/.prostgles-desktop-config.json\n\nscripts/demo/dist\nclient/build\nclient/static/icons\nserver/dist\nserver/media\n\nBACKUP\n.Trash-1000/\n.npmrc\n.npmignore\nmedia\nlog.txt\nui\n.aider*\n.env\nconfigs\ndebug\ndocs/screenshots/svgif-scenes" }, { "path": ".prettierignore", "content": "e2e/playwright-report/trace/\nserver/*.json\nclient/*.json\n.vscode/\n*.d.ts\n" }, { "path": ".prettierrc", "content": "{\n \"experimentalTernaries\": true\n}\n" }, { "path": ".vscode/settings.json", "content": "{\n \"git.terminalAuthentication\": false,\n \"git.autofetch\": false,\n \"git.ignoreLimitWarning\": true,\n \"typescript.tsdk\": \"./node_modules/typescript/lib\",\n \"editor.formatOnSave\": true,\n \"prettier.experimentalTernaries\": true,\n \"[javascript]\": {\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n },\n \"[typescript]\": {\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n },\n \"[typescriptreact]\": {\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n },\n \"prettier.printWidth\": 100\n}\n" }, { "path": "DB-Dockerfile", "content": "FROM postgis/postgis:17-3.4\n\n# Switch to root user to install packages\nUSER root\n\n# procps needed for stat monitoring\nRUN apt-get update && apt-get install -y procps && \\\n rm -rf /var/lib/apt/lists/*\n\n# Switch back to the default postgres user\nUSER postgres " }, { "path": "Dockerfile", "content": "FROM node:20-slim AS base\n\nWORKDIR /usr/src/app\n\nCOPY . .\n\n# Install latest pg_dump (psql v17) to ensure backup/restore works\nRUN apt-get update && \\\n apt-get install -y --no-install-recommends gnupg wget ca-certificates lsb-release && \\ \n apt-get upgrade -y && \\\n sh -c 'echo \"deb http://apt.postgresql.org/pub/repos/apt $(lsb_release -cs)-pgdg main\" > /etc/apt/sources.list.d/pgdg.list' && \\\n wget --quiet -O - https://www.postgresql.org/media/keys/ACCC4CF8.asc | apt-key add - && \\\n apt-get update && \\\n apt-get install -y --no-install-recommends postgresql-client-17 && \\\n pg_dump --version && \\\n psql --version && \\\n # Clean up\n apt-get clean && \\\n apt-get purge -y --auto-remove gnupg wget lsb-release && \\\n rm -rf /var/lib/apt/lists/*\n\nFROM base AS deps \n\nWORKDIR /usr/src/app/client\n\nRUN npm run build && cd ../server && npm run build\n\nENV NODE_ENV=production\nENV IS_DOCKER=yes\n\nCMD [\"node\", \"/usr/src/app/server/dist/server/src/index.js\"]" }, { "path": "LICENSE", "content": " GNU AFFERO GENERAL PUBLIC LICENSE\n Version 3, 19 November 2007\n\n Copyright (C) 2007 Free Software Foundation, Inc. \n Everyone is permitted to copy and distribute verbatim copies\n of this license document, but changing it is not allowed.\n\n Preamble\n\n The GNU Affero General Public License is a free, copyleft license for\nsoftware and other kinds of works, specifically designed to ensure\ncooperation with the community in the case of network server software.\n\n The licenses for most software and other practical works are designed\nto take away your freedom to share and change the works. By contrast,\nour General Public Licenses are intended to guarantee your freedom to\nshare and change all versions of a program--to make sure it remains free\nsoftware for all its users.\n\n When we speak of free software, we are referring to freedom, not\nprice. Our General Public Licenses are designed to make sure that you\nhave the freedom to distribute copies of free software (and charge for\nthem if you wish), that you receive source code or can get it if you\nwant it, that you can change the software or use pieces of it in new\nfree programs, and that you know you can do these things.\n\n Developers that use our General Public Licenses protect your rights\nwith two steps: (1) assert copyright on the software, and (2) offer\nyou this License which gives you legal permission to copy, distribute\nand/or modify the software.\n\n A secondary benefit of defending all users' freedom is that\nimprovements made in alternate versions of the program, if they\nreceive widespread use, become available for other developers to\nincorporate. Many developers of free software are heartened and\nencouraged by the resulting cooperation. However, in the case of\nsoftware used on network servers, this result may fail to come about.\nThe GNU General Public License permits making a modified version and\nletting the public access it on a server without ever releasing its\nsource code to the public.\n\n The GNU Affero General Public License is designed specifically to\nensure that, in such cases, the modified source code becomes available\nto the community. It requires the operator of a network server to\nprovide the source code of the modified version running there to the\nusers of that server. Therefore, public use of a modified version, on\na publicly accessible server, gives the public access to the source\ncode of the modified version.\n\n An older license, called the Affero General Public License and\npublished by Affero, was designed to accomplish similar goals. This is\na different license, not a version of the Affero GPL, but Affero has\nreleased a new version of the Affero GPL which permits relicensing under\nthis license.\n\n The precise terms and conditions for copying, distribution and\nmodification follow.\n\n TERMS AND CONDITIONS\n\n 0. Definitions.\n\n \"This License\" refers to version 3 of the GNU Affero General Public License.\n\n \"Copyright\" also means copyright-like laws that apply to other kinds of\nworks, such as semiconductor masks.\n\n \"The Program\" refers to any copyrightable work licensed under this\nLicense. Each licensee is addressed as \"you\". \"Licensees\" and\n\"recipients\" may be individuals or organizations.\n\n To \"modify\" a work means to copy from or adapt all or part of the work\nin a fashion requiring copyright permission, other than the making of an\nexact copy. The resulting work is called a \"modified version\" of the\nearlier work or a work \"based on\" the earlier work.\n\n A \"covered work\" means either the unmodified Program or a work based\non the Program.\n\n To \"propagate\" a work means to do anything with it that, without\npermission, would make you directly or secondarily liable for\ninfringement under applicable copyright law, except executing it on a\ncomputer or modifying a private copy. Propagation includes copying,\ndistribution (with or without modification), making available to the\npublic, and in some countries other activities as well.\n\n To \"convey\" a work means any kind of propagation that enables other\nparties to make or receive copies. Mere interaction with a user through\na computer network, with no transfer of a copy, is not conveying.\n\n An interactive user interface displays \"Appropriate Legal Notices\"\nto the extent that it includes a convenient and prominently visible\nfeature that (1) displays an appropriate copyright notice, and (2)\ntells the user that there is no warranty for the work (except to the\nextent that warranties are provided), that licensees may convey the\nwork under this License, and how to view a copy of this License. If\nthe interface presents a list of user commands or options, such as a\nmenu, a prominent item in the list meets this criterion.\n\n 1. Source Code.\n\n The \"source code\" for a work means the preferred form of the work\nfor making modifications to it. \"Object code\" means any non-source\nform of a work.\n\n A \"Standard Interface\" means an interface that either is an official\nstandard defined by a recognized standards body, or, in the case of\ninterfaces specified for a particular programming language, one that\nis widely used among developers working in that language.\n\n The \"System Libraries\" of an executable work include anything, other\nthan the work as a whole, that (a) is included in the normal form of\npackaging a Major Component, but which is not part of that Major\nComponent, and (b) serves only to enable use of the work with that\nMajor Component, or to implement a Standard Interface for which an\nimplementation is available to the public in source code form. A\n\"Major Component\", in this context, means a major essential component\n(kernel, window system, and so on) of the specific operating system\n(if any) on which the executable work runs, or a compiler used to\nproduce the work, or an object code interpreter used to run it.\n\n The \"Corresponding Source\" for a work in object code form means all\nthe source code needed to generate, install, and (for an executable\nwork) run the object code and to modify the work, including scripts to\ncontrol those activities. However, it does not include the work's\nSystem Libraries, or general-purpose tools or generally available free\nprograms which are used unmodified in performing those activities but\nwhich are not part of the work. For example, Corresponding Source\nincludes interface definition files associated with source files for\nthe work, and the source code for shared libraries and dynamically\nlinked subprograms that the work is specifically designed to require,\nsuch as by intimate data communication or control flow between those\nsubprograms and other parts of the work.\n\n The Corresponding Source need not include anything that users\ncan regenerate automatically from other parts of the Corresponding\nSource.\n\n The Corresponding Source for a work in source code form is that\nsame work.\n\n 2. Basic Permissions.\n\n All rights granted under this License are granted for the term of\ncopyright on the Program, and are irrevocable provided the stated\nconditions are met. This License explicitly affirms your unlimited\npermission to run the unmodified Program. The output from running a\ncovered work is covered by this License only if the output, given its\ncontent, constitutes a covered work. This License acknowledges your\nrights of fair use or other equivalent, as provided by copyright law.\n\n You may make, run and propagate covered works that you do not\nconvey, without conditions so long as your license otherwise remains\nin force. You may convey covered works to others for the sole purpose\nof having them make modifications exclusively for you, or provide you\nwith facilities for running those works, provided that you comply with\nthe terms of this License in conveying all material for which you do\nnot control copyright. Those thus making or running the covered works\nfor you must do so exclusively on your behalf, under your direction\nand control, on terms that prohibit them from making any copies of\nyour copyrighted material outside their relationship with you.\n\n Conveying under any other circumstances is permitted solely under\nthe conditions stated below. Sublicensing is not allowed; section 10\nmakes it unnecessary.\n\n 3. Protecting Users' Legal Rights From Anti-Circumvention Law.\n\n No covered work shall be deemed part of an effective technological\nmeasure under any applicable law fulfilling obligations under article\n11 of the WIPO copyright treaty adopted on 20 December 1996, or\nsimilar laws prohibiting or restricting circumvention of such\nmeasures.\n\n When you convey a covered work, you waive any legal power to forbid\ncircumvention of technological measures to the extent such circumvention\nis effected by exercising rights under this License with respect to\nthe covered work, and you disclaim any intention to limit operation or\nmodification of the work as a means of enforcing, against the work's\nusers, your or third parties' legal rights to forbid circumvention of\ntechnological measures.\n\n 4. Conveying Verbatim Copies.\n\n You may convey verbatim copies of the Program's source code as you\nreceive it, in any medium, provided that you conspicuously and\nappropriately publish on each copy an appropriate copyright notice;\nkeep intact all notices stating that this License and any\nnon-permissive terms added in accord with section 7 apply to the code;\nkeep intact all notices of the absence of any warranty; and give all\nrecipients a copy of this License along with the Program.\n\n You may charge any price or no price for each copy that you convey,\nand you may offer support or warranty protection for a fee.\n\n 5. Conveying Modified Source Versions.\n\n You may convey a work based on the Program, or the modifications to\nproduce it from the Program, in the form of source code under the\nterms of section 4, provided that you also meet all of these conditions:\n\n a) The work must carry prominent notices stating that you modified\n it, and giving a relevant date.\n\n b) The work must carry prominent notices stating that it is\n released under this License and any conditions added under section\n 7. This requirement modifies the requirement in section 4 to\n \"keep intact all notices\".\n\n c) You must license the entire work, as a whole, under this\n License to anyone who comes into possession of a copy. This\n License will therefore apply, along with any applicable section 7\n additional terms, to the whole of the work, and all its parts,\n regardless of how they are packaged. This License gives no\n permission to license the work in any other way, but it does not\n invalidate such permission if you have separately received it.\n\n d) If the work has interactive user interfaces, each must display\n Appropriate Legal Notices; however, if the Program has interactive\n interfaces that do not display Appropriate Legal Notices, your\n work need not make them do so.\n\n A compilation of a covered work with other separate and independent\nworks, which are not by their nature extensions of the covered work,\nand which are not combined with it such as to form a larger program,\nin or on a volume of a storage or distribution medium, is called an\n\"aggregate\" if the compilation and its resulting copyright are not\nused to limit the access or legal rights of the compilation's users\nbeyond what the individual works permit. Inclusion of a covered work\nin an aggregate does not cause this License to apply to the other\nparts of the aggregate.\n\n 6. Conveying Non-Source Forms.\n\n You may convey a covered work in object code form under the terms\nof sections 4 and 5, provided that you also convey the\nmachine-readable Corresponding Source under the terms of this License,\nin one of these ways:\n\n a) Convey the object code in, or embodied in, a physical product\n (including a physical distribution medium), accompanied by the\n Corresponding Source fixed on a durable physical medium\n customarily used for software interchange.\n\n b) Convey the object code in, or embodied in, a physical product\n (including a physical distribution medium), accompanied by a\n written offer, valid for at least three years and valid for as\n long as you offer spare parts or customer support for that product\n model, to give anyone who possesses the object code either (1) a\n copy of the Corresponding Source for all the software in the\n product that is covered by this License, on a durable physical\n medium customarily used for software interchange, for a price no\n more than your reasonable cost of physically performing this\n conveying of source, or (2) access to copy the\n Corresponding Source from a network server at no charge.\n\n c) Convey individual copies of the object code with a copy of the\n written offer to provide the Corresponding Source. This\n alternative is allowed only occasionally and noncommercially, and\n only if you received the object code with such an offer, in accord\n with subsection 6b.\n\n d) Convey the object code by offering access from a designated\n place (gratis or for a charge), and offer equivalent access to the\n Corresponding Source in the same way through the same place at no\n further charge. You need not require recipients to copy the\n Corresponding Source along with the object code. If the place to\n copy the object code is a network server, the Corresponding Source\n may be on a different server (operated by you or a third party)\n that supports equivalent copying facilities, provided you maintain\n clear directions next to the object code saying where to find the\n Corresponding Source. Regardless of what server hosts the\n Corresponding Source, you remain obligated to ensure that it is\n available for as long as needed to satisfy these requirements.\n\n e) Convey the object code using peer-to-peer transmission, provided\n you inform other peers where the object code and Corresponding\n Source of the work are being offered to the general public at no\n charge under subsection 6d.\n\n A separable portion of the object code, whose source code is excluded\nfrom the Corresponding Source as a System Library, need not be\nincluded in conveying the object code work.\n\n A \"User Product\" is either (1) a \"consumer product\", which means any\ntangible personal property which is normally used for personal, family,\nor household purposes, or (2) anything designed or sold for incorporation\ninto a dwelling. In determining whether a product is a consumer product,\ndoubtful cases shall be resolved in favor of coverage. For a particular\nproduct received by a particular user, \"normally used\" refers to a\ntypical or common use of that class of product, regardless of the status\nof the particular user or of the way in which the particular user\nactually uses, or expects or is expected to use, the product. A product\nis a consumer product regardless of whether the product has substantial\ncommercial, industrial or non-consumer uses, unless such uses represent\nthe only significant mode of use of the product.\n\n \"Installation Information\" for a User Product means any methods,\nprocedures, authorization keys, or other information required to install\nand execute modified versions of a covered work in that User Product from\na modified version of its Corresponding Source. The information must\nsuffice to ensure that the continued functioning of the modified object\ncode is in no case prevented or interfered with solely because\nmodification has been made.\n\n If you convey an object code work under this section in, or with, or\nspecifically for use in, a User Product, and the conveying occurs as\npart of a transaction in which the right of possession and use of the\nUser Product is transferred to the recipient in perpetuity or for a\nfixed term (regardless of how the transaction is characterized), the\nCorresponding Source conveyed under this section must be accompanied\nby the Installation Information. But this requirement does not apply\nif neither you nor any third party retains the ability to install\nmodified object code on the User Product (for example, the work has\nbeen installed in ROM).\n\n The requirement to provide Installation Information does not include a\nrequirement to continue to provide support service, warranty, or updates\nfor a work that has been modified or installed by the recipient, or for\nthe User Product in which it has been modified or installed. Access to a\nnetwork may be denied when the modification itself materially and\nadversely affects the operation of the network or violates the rules and\nprotocols for communication across the network.\n\n Corresponding Source conveyed, and Installation Information provided,\nin accord with this section must be in a format that is publicly\ndocumented (and with an implementation available to the public in\nsource code form), and must require no special password or key for\nunpacking, reading or copying.\n\n 7. Additional Terms.\n\n \"Additional permissions\" are terms that supplement the terms of this\nLicense by making exceptions from one or more of its conditions.\nAdditional permissions that are applicable to the entire Program shall\nbe treated as though they were included in this License, to the extent\nthat they are valid under applicable law. If additional permissions\napply only to part of the Program, that part may be used separately\nunder those permissions, but the entire Program remains governed by\nthis License without regard to the additional permissions.\n\n When you convey a copy of a covered work, you may at your option\nremove any additional permissions from that copy, or from any part of\nit. (Additional permissions may be written to require their own\nremoval in certain cases when you modify the work.) You may place\nadditional permissions on material, added by you to a covered work,\nfor which you have or can give appropriate copyright permission.\n\n Notwithstanding any other provision of this License, for material you\nadd to a covered work, you may (if authorized by the copyright holders of\nthat material) supplement the terms of this License with terms:\n\n a) Disclaiming warranty or limiting liability differently from the\n terms of sections 15 and 16 of this License; or\n\n b) Requiring preservation of specified reasonable legal notices or\n author attributions in that material or in the Appropriate Legal\n Notices displayed by works containing it; or\n\n c) Prohibiting misrepresentation of the origin of that material, or\n requiring that modified versions of such material be marked in\n reasonable ways as different from the original version; or\n\n d) Limiting the use for publicity purposes of names of licensors or\n authors of the material; or\n\n e) Declining to grant rights under trademark law for use of some\n trade names, trademarks, or service marks; or\n\n f) Requiring indemnification of licensors and authors of that\n material by anyone who conveys the material (or modified versions of\n it) with contractual assumptions of liability to the recipient, for\n any liability that these contractual assumptions directly impose on\n those licensors and authors.\n\n All other non-permissive additional terms are considered \"further\nrestrictions\" within the meaning of section 10. If the Program as you\nreceived it, or any part of it, contains a notice stating that it is\ngoverned by this License along with a term that is a further\nrestriction, you may remove that term. If a license document contains\na further restriction but permits relicensing or conveying under this\nLicense, you may add to a covered work material governed by the terms\nof that license document, provided that the further restriction does\nnot survive such relicensing or conveying.\n\n If you add terms to a covered work in accord with this section, you\nmust place, in the relevant source files, a statement of the\nadditional terms that apply to those files, or a notice indicating\nwhere to find the applicable terms.\n\n Additional terms, permissive or non-permissive, may be stated in the\nform of a separately written license, or stated as exceptions;\nthe above requirements apply either way.\n\n 8. Termination.\n\n You may not propagate or modify a covered work except as expressly\nprovided under this License. Any attempt otherwise to propagate or\nmodify it is void, and will automatically terminate your rights under\nthis License (including any patent licenses granted under the third\nparagraph of section 11).\n\n However, if you cease all violation of this License, then your\nlicense from a particular copyright holder is reinstated (a)\nprovisionally, unless and until the copyright holder explicitly and\nfinally terminates your license, and (b) permanently, if the copyright\nholder fails to notify you of the violation by some reasonable means\nprior to 60 days after the cessation.\n\n Moreover, your license from a particular copyright holder is\nreinstated permanently if the copyright holder notifies you of the\nviolation by some reasonable means, this is the first time you have\nreceived notice of violation of this License (for any work) from that\ncopyright holder, and you cure the violation prior to 30 days after\nyour receipt of the notice.\n\n Termination of your rights under this section does not terminate the\nlicenses of parties who have received copies or rights from you under\nthis License. If your rights have been terminated and not permanently\nreinstated, you do not qualify to receive new licenses for the same\nmaterial under section 10.\n\n 9. Acceptance Not Required for Having Copies.\n\n You are not required to accept this License in order to receive or\nrun a copy of the Program. Ancillary propagation of a covered work\noccurring solely as a consequence of using peer-to-peer transmission\nto receive a copy likewise does not require acceptance. However,\nnothing other than this License grants you permission to propagate or\nmodify any covered work. These actions infringe copyright if you do\nnot accept this License. Therefore, by modifying or propagating a\ncovered work, you indicate your acceptance of this License to do so.\n\n 10. Automatic Licensing of Downstream Recipients.\n\n Each time you convey a covered work, the recipient automatically\nreceives a license from the original licensors, to run, modify and\npropagate that work, subject to this License. You are not responsible\nfor enforcing compliance by third parties with this License.\n\n An \"entity transaction\" is a transaction transferring control of an\norganization, or substantially all assets of one, or subdividing an\norganization, or merging organizations. If propagation of a covered\nwork results from an entity transaction, each party to that\ntransaction who receives a copy of the work also receives whatever\nlicenses to the work the party's predecessor in interest had or could\ngive under the previous paragraph, plus a right to possession of the\nCorresponding Source of the work from the predecessor in interest, if\nthe predecessor has it or can get it with reasonable efforts.\n\n You may not impose any further restrictions on the exercise of the\nrights granted or affirmed under this License. For example, you may\nnot impose a license fee, royalty, or other charge for exercise of\nrights granted under this License, and you may not initiate litigation\n(including a cross-claim or counterclaim in a lawsuit) alleging that\nany patent claim is infringed by making, using, selling, offering for\nsale, or importing the Program or any portion of it.\n\n 11. Patents.\n\n A \"contributor\" is a copyright holder who authorizes use under this\nLicense of the Program or a work on which the Program is based. The\nwork thus licensed is called the contributor's \"contributor version\".\n\n A contributor's \"essential patent claims\" are all patent claims\nowned or controlled by the contributor, whether already acquired or\nhereafter acquired, that would be infringed by some manner, permitted\nby this License, of making, using, or selling its contributor version,\nbut do not include claims that would be infringed only as a\nconsequence of further modification of the contributor version. For\npurposes of this definition, \"control\" includes the right to grant\npatent sublicenses in a manner consistent with the requirements of\nthis License.\n\n Each contributor grants you a non-exclusive, worldwide, royalty-free\npatent license under the contributor's essential patent claims, to\nmake, use, sell, offer for sale, import and otherwise run, modify and\npropagate the contents of its contributor version.\n\n In the following three paragraphs, a \"patent license\" is any express\nagreement or commitment, however denominated, not to enforce a patent\n(such as an express permission to practice a patent or covenant not to\nsue for patent infringement). To \"grant\" such a patent license to a\nparty means to make such an agreement or commitment not to enforce a\npatent against the party.\n\n If you convey a covered work, knowingly relying on a patent license,\nand the Corresponding Source of the work is not available for anyone\nto copy, free of charge and under the terms of this License, through a\npublicly available network server or other readily accessible means,\nthen you must either (1) cause the Corresponding Source to be so\navailable, or (2) arrange to deprive yourself of the benefit of the\npatent license for this particular work, or (3) arrange, in a manner\nconsistent with the requirements of this License, to extend the patent\nlicense to downstream recipients. \"Knowingly relying\" means you have\nactual knowledge that, but for the patent license, your conveying the\ncovered work in a country, or your recipient's use of the covered work\nin a country, would infringe one or more identifiable patents in that\ncountry that you have reason to believe are valid.\n\n If, pursuant to or in connection with a single transaction or\narrangement, you convey, or propagate by procuring conveyance of, a\ncovered work, and grant a patent license to some of the parties\nreceiving the covered work authorizing them to use, propagate, modify\nor convey a specific copy of the covered work, then the patent license\nyou grant is automatically extended to all recipients of the covered\nwork and works based on it.\n\n A patent license is \"discriminatory\" if it does not include within\nthe scope of its coverage, prohibits the exercise of, or is\nconditioned on the non-exercise of one or more of the rights that are\nspecifically granted under this License. You may not convey a covered\nwork if you are a party to an arrangement with a third party that is\nin the business of distributing software, under which you make payment\nto the third party based on the extent of your activity of conveying\nthe work, and under which the third party grants, to any of the\nparties who would receive the covered work from you, a discriminatory\npatent license (a) in connection with copies of the covered work\nconveyed by you (or copies made from those copies), or (b) primarily\nfor and in connection with specific products or compilations that\ncontain the covered work, unless you entered into that arrangement,\nor that patent license was granted, prior to 28 March 2007.\n\n Nothing in this License shall be construed as excluding or limiting\nany implied license or other defenses to infringement that may\notherwise be available to you under applicable patent law.\n\n 12. No Surrender of Others' Freedom.\n\n If conditions are imposed on you (whether by court order, agreement or\notherwise) that contradict the conditions of this License, they do not\nexcuse you from the conditions of this License. If you cannot convey a\ncovered work so as to satisfy simultaneously your obligations under this\nLicense and any other pertinent obligations, then as a consequence you may\nnot convey it at all. For example, if you agree to terms that obligate you\nto collect a royalty for further conveying from those to whom you convey\nthe Program, the only way you could satisfy both those terms and this\nLicense would be to refrain entirely from conveying the Program.\n\n 13. Remote Network Interaction; Use with the GNU General Public License.\n\n Notwithstanding any other provision of this License, if you modify the\nProgram, your modified version must prominently offer all users\ninteracting with it remotely through a computer network (if your version\nsupports such interaction) an opportunity to receive the Corresponding\nSource of your version by providing access to the Corresponding Source\nfrom a network server at no charge, through some standard or customary\nmeans of facilitating copying of software. This Corresponding Source\nshall include the Corresponding Source for any work covered by version 3\nof the GNU General Public License that is incorporated pursuant to the\nfollowing paragraph.\n\n Notwithstanding any other provision of this License, you have\npermission to link or combine any covered work with a work licensed\nunder version 3 of the GNU General Public License into a single\ncombined work, and to convey the resulting work. The terms of this\nLicense will continue to apply to the part which is the covered work,\nbut the work with which it is combined will remain governed by version\n3 of the GNU General Public License.\n\n 14. Revised Versions of this License.\n\n The Free Software Foundation may publish revised and/or new versions of\nthe GNU Affero General Public License from time to time. Such new versions\nwill be similar in spirit to the present version, but may differ in detail to\naddress new problems or concerns.\n\n Each version is given a distinguishing version number. If the\nProgram specifies that a certain numbered version of the GNU Affero General\nPublic License \"or any later version\" applies to it, you have the\noption of following the terms and conditions either of that numbered\nversion or of any later version published by the Free Software\nFoundation. If the Program does not specify a version number of the\nGNU Affero General Public License, you may choose any version ever published\nby the Free Software Foundation.\n\n If the Program specifies that a proxy can decide which future\nversions of the GNU Affero General Public License can be used, that proxy's\npublic statement of acceptance of a version permanently authorizes you\nto choose that version for the Program.\n\n Later license versions may give you additional or different\npermissions. However, no additional obligations are imposed on any\nauthor or copyright holder as a result of your choosing to follow a\nlater version.\n\n 15. Disclaimer of Warranty.\n\n THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY\nAPPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT\nHOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM \"AS IS\" WITHOUT WARRANTY\nOF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,\nTHE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR\nPURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM\nIS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF\nALL NECESSARY SERVICING, REPAIR OR CORRECTION.\n\n 16. Limitation of Liability.\n\n IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING\nWILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS\nTHE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY\nGENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE\nUSE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF\nDATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD\nPARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),\nEVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF\nSUCH DAMAGES.\n\n 17. Interpretation of Sections 15 and 16.\n\n If the disclaimer of warranty and limitation of liability provided\nabove cannot be given local legal effect according to their terms,\nreviewing courts shall apply local law that most closely approximates\nan absolute waiver of all civil liability in connection with the\nProgram, unless a warranty or assumption of liability accompanies a\ncopy of the Program in return for a fee.\n\n END OF TERMS AND CONDITIONS\n\n How to Apply These Terms to Your New Programs\n\n If you develop a new program, and you want it to be of the greatest\npossible use to the public, the best way to achieve this is to make it\nfree software which everyone can redistribute and change under these terms.\n\n To do so, attach the following notices to the program. It is safest\nto attach them to the start of each source file to most effectively\nstate the exclusion of warranty; and each file should have at least\nthe \"copyright\" line and a pointer to where the full notice is found.\n\n Prostgles Desktop\n Copyright (C) 2024 Stefan L\n\n This program is free software: you can redistribute it and/or modify\n it under the terms of the GNU Affero General Public License as published\n by the Free Software Foundation, either version 3 of the License, or\n (at your option) any later version.\n\n This program is distributed in the hope that it will be useful,\n but WITHOUT ANY WARRANTY; without even the implied warranty of\n MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n GNU Affero General Public License for more details.\n\n You should have received a copy of the GNU Affero General Public License\n along with this program. If not, see .\n\nAlso add information on how to contact you by electronic and paper mail.\n\n If your software can interact with users remotely through a computer\nnetwork, you should also make sure that it provides a way for users to\nget its source. For example, if your program is a web application, its\ninterface could display a \"Source\" link that leads users to an archive\nof the code. There are many ways you could offer source, and different\nsolutions will be better for different programs; see section 13 for the\nspecific requirements.\n\n You should also get your employer (if you work as a programmer) or school,\nif any, to sign a \"copyright disclaimer\" for the program, if necessary.\nFor more information on this, and how to apply and follow the GNU AGPL, see\n.\n" }, { "path": "PRIVACY", "content": "

\nWith the exception of information you voluntarily submit via the \"Send feedback\" feature, Prostgles does not collect, transmit, or store any of your data on our servers.\n

\n\n

All your data is stored only in the following locations, depending on how you use the software:

\n
    \n
  1. \n Your connected database: Metadata such as database connections, dashboard settings, SQL queries, etc., are stored within the database you provide and connect to. Depending on the variant:\n
      \n
    • Electron/Desktop app: Data is in the connection titled Prostgles Desktop state.
      • \n
    • Source/Docker/Node.js app: Data is in the connection titled Prostgles UI state.
      • \n
    \n
    2. \n
  2. \n Your local machine: \n
      \n
    • Electron/Desktop app: Stores files, backups and encrypted state database connection details in your user data directory (Windows: %APPDATA%/prostgles-desktop, macOS: ~/Library/Application Support/prostgles-desktop, Linux: ~/.config/prostgles-desktop).
      • \n
    • Source/Docker/Node.js app: Stores files, backups and state state database configuration in the directory where the software is run (current working directory) unless otherwise configured.
      • \n
    \n
    3. \n
  3. \n Optional cloud storage providers: If you configure file storage or backups, these providers store your data according to your setup.\n
    4. \n
\n\n

\nTo the best of our knowledge, all third-party libraries used in Prostgles do not collect, transmit, or store your data on their servers.\n

\n" }, { "path": "README.md", "content": "# Prostgles UI\n\nSQL Editor and internal tool builder for Postgres\n\n[Live demo](https://playground.prostgles.com/)\n\n### Screenshots\n\n[More](https://prostgles.com/ui)\n\n

\n \n

\n\n### Features\n\n- SQL Editor with context-aware schema auto-completion and documentation extracts and hints\n- Realtime data exploration dashboard with versatile layout system (tab and side-by-side view)\n- Table view with controls to view related data, sort, filter and cross-filter\n- Map and Time charts with aggregations\n- Data insert/update forms with autocomplete\n- Role based access control rules\n- Isomorphic TypeScript API with schema types, end to end type safety and React hooks\n- File upload (locally or to cloud)\n- Search all tables from public schema\n- Media file display (audio/video/image/html/svg)\n- Data import (CSV, JSON and GeoJSON)\n- Backup/Restore (locally or to cloud)\n- TypeScript server-side functions (experimental)\n- Mobile friendly\n- LISTEN NOTIFY support\n\n### Installation - Docker compose (recommended)\n\nDownload the source code:\n\n```bash\ngit clone https://github.com/prostgles/ui.git\ncd ui\n```\n\nDocker setup. By default the app will be accessible at [localhost:3004](http://localhost:3004).\nOmit \"--build\" to use our published images.\n\n```docker-compose.sh\ndocker compose up -d --build\n```\n\nTo use a custom port (3099 for example) and/or a custom binding address (0.0.0.0 for example):\n\n```bash\nPRGL_DOCKER_IP=0.0.0.0 PRGL_DOCKER_PORT=3099 docker compose up --build\n```\n\nTo use with docker mcp experimental feature:\n\n```bash\ndocker compose --profile=docker-mcp up --build\n```\n\n### Installation - use existing PostgreSQL instance\n\nUse this method if you want to use your existing database to store Prostgles metadata\n\nDownload the source code:\n\n```bash\ngit clone https://github.com/prostgles/ui.git prostgles\ncd prostgles\n```\n\nBuild and run our docker image:\n\n```docker-run.sh\ndocker build -t prostgles .\ndocker run --network=host -d -p 127.0.0.1:3004:3004 \\\n -e POSTGRES_HOST=127.0.0.1 \\\n -e POSTGRES_PORT=5432 \\\n -e POSTGRES_DB=postgres \\\n -e POSTGRES_USER=postgres \\\n -e POSTGRES_PASSWORD=postgres \\\n -e PROSTGLES_UI_HOST=0.0.0.0 \\\n -e IS_DOCKER=yes \\\n -e NODE_ENV=production \\\n prostgles\n\n```\n\nYour server will be running on [localhost:3004](http://localhost:3004).\n\n### Development\n\n#### 1. Install dependencies:\n\n- [NodeJS](https://nodejs.org/en/download)\n- [Postgres](https://www.postgresql.org/download/): For full features **postgresql-17-postgis-3.4** is recommended\n\n#### 2. Create a database and user update `.env`. All prostgles state and metadata will be stored in this database\n\n sudo su - postgres\n createuser --superuser usr\n psql -c \"alter user usr with encrypted password 'psw'\"\n createdb db -O usr\n\n#### 3. Start app in dev mode (will install npm packages)\n\n npm run dev\n\n### Testing\n\nEnsure the app is running in development mode and:\n\n cd e2e && npm test-local\n" }, { "path": "SECURITY.md", "content": "# Security Policy\n\n### Reporting a Vulnerability\n\nPlease report (suspected) security vulnerabilities to security@prostgles.com\n\n- You will receive a response from us within 7 working days.\n- If the issue is confirmed, we will release a patch as soon as possible depending on complexity but historically within a few days.\n" }, { "path": "changelog/v1.0.0.md", "content": "Prostgles UI v1.0.0\n\nWorkspaces\nEach database connection now allows multiple workspaces. You can create and switch between different dashboards\n\n" }, { "path": "changelog/v2.0.0.md", "content": "Prostgles UI v2\n\nImproved UI\n- Referenced tables tab\n- SQL code blocks\n- SQL snippets\n\nAccess control\n- Role-based access rules\n- API\n\nFile storage\n- Saved locally or to S3\n- File type and size rules\n\nBackup and Restore\n- Automatic or manual\n- Saved locally or to S3\n\nSecurity\n- App based 2 factor-authentication\n- IP subnet rules\n- CORS\n\n\n" }, { "path": "changelog/v2.2.0.md", "content": "- Schema Diagram\n - Link colouring modes to better understand related tables and foreign key properties\n - Filtering by relationship type, schema\n- Command and settings quick search (Ctrl+K). Access any command, setting, or action through our new command palette\n- AI Assistant:\n - Data access controls. Allow the assistant to execute sql with rollback, commit or specify allowed tables and commands for each chat\n - Dashboard Generation: Create dashboards from your database schema and requirements\n - Create task mode: Get suggested tools and data access permissions for the chat\n - MCP Server Tools support: Install and allow the assistant to access Model Context Protocol server tools.\n - File upload support\n - Execute sql snippets directly in chat\n - Real-time cost tracking per chat and configurable spending limits\n- Improved setup for Prostgles Desktop: \"Quick setup\" mode handles the creation of a state database and user.\n" }, { "path": "changelog/v2.2.1.md", "content": "- Maintenance and fixes:\n - Fixed docker release pipeline\n - Updated electron packages\n - Remove dead code\n" }, { "path": "changelog/v2.2.2.md", "content": "- Improve documentation\n- Maintenance and fixes:\n - Tidy release workflows\n" }, { "path": "changelog/v2.2.3.md", "content": "- Improve documentation\n- Improve Docker MCP server\n" }, { "path": "changelog/v2.2.4.md", "content": "- Improve documentation\n- Improve Tool use message UI\n- Fix parallel MCP requests bug\n" }, { "path": "client/.babelrc", "content": "{\n \"presets\": [\n [\n \"@babel/env\",\n {\n \"targets\": {\n \"esmodules\": true\n },\n \"modules\": false,\n \"bugfixes\": true\n }\n ],\n \"@babel/preset-react\",\n \"@babel/preset-typescript\"\n ],\n \"plugins\": [\"dynamic-import-node\"],\n \"env\": {\n \"production\": {\n \"presets\": [\n [\n \"minify\",\n {\n \"builtIns\": false,\n \"evaluate\": false,\n \"mangle\": false\n }\n ]\n ]\n }\n }\n}\n" }, { "path": "client/.gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# production\n/build\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n\nBACKUP\ndist\n/configs/last_compiled.txt" }, { "path": "client/build.sh", "content": "npm i && export NODE_ENV=production && export BABEL_ENV=production && export NODE_OPTIONS=--max-old-space-size=2048 && npm run build-start\n" }, { "path": "client/eslint.config.mjs", "content": "// @ts-check\nimport commonConfig from \"../.eslintrc.common.js\";\nimport eslint from \"@eslint/js\";\nimport tseslint from \"typescript-eslint\";\nimport { defineConfig } from \"eslint/config\";\nimport eslintPluginReact from \"eslint-plugin-react\";\nimport eslintPluginReactHooks from \"eslint-plugin-react-hooks\";\n// import typescriptEslint from \"@typescript-eslint/eslint-plugin\";\n\nexport default defineConfig(\n eslint.configs.recommended,\n tseslint.configs.recommended,\n tseslint.configs.recommendedTypeChecked,\n {\n ignores: [\n \"node_modules\",\n \"dist\",\n \"examples\",\n \"**/*.d.ts\",\n \"tests\",\n \"docs\",\n \"*.mjs\",\n \"sample_schemas\",\n \"**/*.d.ts\",\n \"**/*.js\",\n ],\n },\n {\n files: [\"**/*.{ts,tsx}\"],\n languageOptions: {\n parser: tseslint.parser,\n parserOptions: {\n ecmaVersion: \"latest\",\n sourceType: \"module\",\n // projectService: {\n // allowDefaultProject: [\"*.js\", \"*.mjs\"],\n // },\n project: [\"./tsconfig.eslint.json\"],\n tsconfigRootDir: import.meta.dirname,\n },\n },\n plugins: {\n \"@typescript-eslint\": tseslint.plugin,\n react: eslintPluginReact,\n \"react-hooks\": eslintPluginReactHooks,\n },\n settings: {\n react: {\n version: \"detect\",\n },\n },\n rules: {\n ...commonConfig.rules,\n \"react/no-unescaped-entities\": \"off\",\n \"react/display-name\": \"off\",\n \"react/no-children-prop\": \"off\",\n \"react/prop-types\": \"off\",\n \"react/no-unused-prop-types\": \"off\",\n \"react-hooks/exhaustive-deps\": [\n \"warn\",\n {\n additionalHooks:\n \"(usePromise|useEffectAsync|useProstglesClient|useAsyncEffectQueue|useEffectDeep)\",\n },\n ],\n \"no-cond-assign\": \"error\",\n \"@typescript-eslint/no-namespace\": \"off\",\n \"@typescript-eslint/no-explicit-any\": \"off\",\n \"@typescript-eslint/no-non-null-assertion\": \"off\",\n \"@typescript-eslint/ban-types\": \"off\",\n \"@typescript-eslint/ban-ts-comment\": \"off\",\n \"@typescript-eslint/no-unused-expressions\": \"off\",\n \"@typescript-eslint/no-require-imports\": \"off\",\n \"@typescript-eslint/no-empty-object-type\": \"off\",\n \"no-async-promise-executor\": \"off\",\n \"@typescript-eslint/no-var-requires\": \"off\",\n \"@typescript-eslint/no-unnecessary-condition\": \"error\",\n \"@typescript-eslint/no-floating-promises\": \"warn\",\n \"no-unused-vars\": \"off\",\n \"no-empty\": \"off\",\n \"@typescript-eslint/only-throw-error\": \"off\",\n \"@typescript-eslint/prefer-promise-reject-errors\": \"off\",\n \"@typescript-eslint/restrict-template-expressions\": [\n \"warn\",\n {\n allowNumber: true,\n allowBoolean: true,\n allowNullish: true,\n allowArray: true,\n },\n ],\n \"@typescript-eslint/no-misused-promises\": [\n \"warn\",\n { checksVoidReturn: false },\n ],\n \"@typescript-eslint/no-unsafe-assignment\": \"warn\",\n \"@typescript-eslint/no-unsafe-argument\": \"warn\",\n \"@typescript-eslint/no-unsafe-return\": \"warn\",\n \"@typescript-eslint/await-thenable\": \"warn\",\n \"@typescript-eslint/no-unsafe-member-access\": \"warn\",\n \"@typescript-eslint/no-unsafe-call\": \"warn\",\n \"@typescript-eslint/no-unused-vars\": [\n \"warn\",\n {\n argsIgnorePattern: \"^_\",\n varsIgnorePattern: \"^_\",\n caughtErrorsIgnorePattern: \"^_\",\n },\n ],\n },\n },\n);\n" }, { "path": "client/package.json", "content": "{\n \"name\": \"prostgles-ui-client\",\n \"dependencies\": {\n \"@mdi/js\": \"^7.4.47\",\n \"@types/dom-speech-recognition\": \"^0.0.6\",\n \"d3\": \"^7.9.0\",\n \"deck.gl\": \"^9.1.14\",\n \"loaders.gl\": \"^0.3.5\",\n \"monaco-editor\": \"^0.53.0\",\n \"papaparse\": \"^5.4.1\",\n \"prostgles-client\": \"^4.0.270\",\n \"qrcode\": \"^1.5.1\",\n \"react\": \"^18.3.1\",\n \"react-dom\": \"^18.3.1\",\n \"react-flip-move\": \"^3.0.5\",\n \"react-markdown\": \"^10.1.0\",\n \"react-router-dom\": \"^7.5.2\",\n \"rehype-raw\": \"^7.0.0\",\n \"remark-gfm\": \"^4.0.1\",\n \"sanitize-html\": \"^2.13.0\",\n \"socket.io-client\": \"^4.8.1\",\n \"sql-formatter\": \"^15.3.2\",\n \"strip-ansi\": \"^7.1.2\",\n \"tsconfig-paths-webpack-plugin\": \"^4.2.0\"\n },\n \"scripts\": {\n \"prod\": \"NODE_ENV=production BABEL_ENV=production webpack\",\n \"start\": \"node scripts/start.js --no-cache\",\n \"build-start\": \"rm -rf ./build && webpack --config=configs/prod.js && rm -rf ./node_modules\",\n \"build\": \"bash ./build.sh\",\n \"dev\": \"npm i --no-audit --quiet && NODE_OPTIONS='--max-old-space-size=4048' && webpack --watch --config=configs/dev.js\",\n \"lib\": \"rm -rf ./dist && tsc --project tsconfig_lib.json && npm run copyf\",\n \"copyf\": \"cd ./src && find . -name '*.css' -type f -exec cp --parents {} ../dist/ \\\\; \",\n \"copyf2\": \"find ./src/. -name '*.css' | cpio -pdm ./dist/\",\n \"lint\": \"eslint . --quiet --fix\",\n \"tsc\": \"tsc --noEmit\"\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n },\n \"devDependencies\": {\n \"@babel/core\": \"^7.28.5\",\n \"@babel/plugin-transform-runtime\": \"^7.28.5\",\n \"@babel/plugin-transform-typescript\": \"^7.28.5\",\n \"@babel/preset-env\": \"^7.28.5\",\n \"@babel/preset-react\": \"^7.28.5\",\n \"@babel/preset-typescript\": \"^7.28.5\",\n \"@babel/runtime\": \"^7.28.4\",\n \"@eslint/js\": \"^9.39.1\",\n \"@types/d3\": \"^7.4.3\",\n \"@types/dom-mediacapture-record\": \"^1.0.10\",\n \"@types/papaparse\": \"^5.3.1\",\n \"@types/qrcode\": \"^1.4.2\",\n \"@types/react\": \"^18.3.7\",\n \"@types/react-dom\": \"^18.3.0\",\n \"@types/react-router-dom\": \"^5.1.5\",\n \"@types/resize-observer-browser\": \"^0.1.6\",\n \"@types/sanitize-html\": \"^2.6.2\",\n \"@types/webpack\": \"^4.41.25\",\n \"@typescript-eslint/eslint-plugin\": \"^8.48.0\",\n \"@typescript-eslint/parser\": \"^8.48.0\",\n \"babel-loader\": \"^9.1.3\",\n \"babel-plugin-dynamic-import-node\": \"^2.3.3\",\n \"babel-plugin-named-asset-import\": \"^0.3.8\",\n \"babel-preset-minify\": \"^0.5.1\",\n \"circular-dependency-plugin\": \"^5.2.2\",\n \"copy-webpack-plugin\": \"^12.0.2\",\n \"css-loader\": \"^6.8.1\",\n \"eslint\": \"^9.39.1\",\n \"eslint-plugin-react\": \"^7.37.5\",\n \"eslint-plugin-react-hooks\": \"^7.0.1\",\n \"file-loader\": \"^6.2.0\",\n \"html-webpack-plugin\": \"^5.6.3\",\n \"interpolate-html-plugin\": \"^4.0.0\",\n \"mini-css-extract-plugin\": \"^2.7.1\",\n \"monaco-editor-webpack-plugin\": \"^7.1.0\",\n \"postcss\": \"^8.5.3\",\n \"postcss-flexbugs-fixes\": \"^5.0.2\",\n \"postcss-loader\": \"^7.3.4\",\n \"postcss-normalize\": \"^10.0.1\",\n \"postcss-preset-env\": \"^7.8.3\",\n \"postcss-safe-parser\": \"^6.0.0\",\n \"prettier\": \"^3.4.2\",\n \"sass-loader\": \"^16.0.4\",\n \"style-loader\": \"^4.0.0\",\n \"ts-loader\": \"^9.5.1\",\n \"typescript\": \"^5.9.3\",\n \"typescript-eslint\": \"^8.48.0\",\n \"url-loader\": \"^4.1.1\",\n \"webpack\": \"^5.99.7\",\n \"webpack-bundle-analyzer\": \"^4.10.2\",\n \"webpack-cli\": \"^6.0.1\",\n \"webpack-manifest-plugin\": \"^5.0.0\",\n \"webpack-merge\": \"^6.0.1\",\n \"webpack-shell-plugin-next\": \"^2.3.2\"\n }\n}\n" }, { "path": "client/public/manifest.json", "content": "{\n \"name\": \"Prostgles UI\",\n \"short_name\": \"Prostgles UI\",\n \"description\": \"Dashboard and SQL editor for PostgreSQL.\",\n \"display\": \"standalone\",\n \"icons\": [\n {\n \"src\": \"/prostgles-logo.svg\",\n \"sizes\": \"any\"\n }\n ]\n}\n" }, { "path": "client/public/robots.txt", "content": "# https://www.robotstxt.org/robotstxt.html\nUser-agent: *\nDisallow:\n" }, { "path": "client/setup-icons.js", "content": "/** Save all mdi icons as xml */\nconst fs = require(\"fs\");\nconst path = require(\"path\");\nconst icons = require(\"@mdi/js\");\n\nconst saveMdiIcons = () => {\n const iconEntries = Object.entries(icons);\n const iconsDestinationFolder = path.join(__dirname, \"/static/icons\");\n if (fs.existsSync(iconsDestinationFolder)) {\n const contents = fs.readdirSync(iconsDestinationFolder);\n if (contents.length >= iconEntries.length) {\n return;\n }\n fs.rm(iconsDestinationFolder, { recursive: true }, console.log);\n }\n fs.mkdirSync(iconsDestinationFolder, { recursive: true });\n if (!iconEntries.length) {\n console.error(\"No icons found. Did you run npm i ?!\");\n process.exit(1);\n }\n\n const iconNames = [];\n iconEntries.forEach(([name, iconPathD]) => {\n const nameWithoutMdi = name.slice(3);\n iconNames.push(nameWithoutMdi);\n const iconSvg = `\n \n `;\n fs.writeFileSync(\n path.join(iconsDestinationFolder, `${name.slice(3)}.svg`),\n iconSvg,\n { encoding: \"utf8\" },\n );\n });\n console.log(` Saved ${iconEntries.length} icons`);\n fs.writeFileSync(\n path.join(iconsDestinationFolder, \"_meta.json\"),\n JSON.stringify(iconNames, null, 2),\n { encoding: \"utf8\" },\n );\n};\n\nsetTimeout(saveMdiIcons, 1000);\n\nclass SaveMdiIcons {\n apply(compiler) {\n compiler.hooks.afterEmit.tap(\n \"Save Mdi icons plugin afterEmit\",\n (_stats) => {\n setTimeout(saveMdiIcons, 1000);\n },\n );\n compiler.hooks.done.tap(\"Save Mdi icons plugin done\", (_stats) => {\n setTimeout(saveMdiIcons, 1000);\n });\n }\n}\n\nmodule.exports = { SaveMdiIcons };\n" }, { "path": "client/src/App.css", "content": "*,\nbody,\nhtml {\n box-sizing: border-box;\n}\n\nbody {\n overflow: hidden;\n}\n\n.page-content {\n padding-top: 1em;\n}\n\n.active-code-block-decoration {\n background: lightblue;\n width: 5px !important;\n margin-left: 3px;\n}\n\n.active-code-block-play {\n margin-left: 4px;\n}\n\n.dark-theme .active-code-block-decoration {\n background: #14708f;\n}\n\n.dark-theme * {\n color-scheme: dark;\n}\n" }, { "path": "client/src/App.tsx", "content": "import type { ReactChild } from \"react\";\nimport React, { useMemo, useState } from \"react\";\nimport { Navigate, Route, Routes as Switch } from \"react-router-dom\";\nimport \"./App.css\";\nimport Loading from \"./components/Loader/Loading\";\nimport type { CommonWindowProps } from \"./dashboard/Dashboard/Dashboard\";\nimport { t } from \"./i18n/i18nUtils\";\nimport { Connections } from \"./pages/Connections/Connections\";\nimport NewConnnection from \"./pages/NewConnection/NewConnnectionForm\";\nimport { NotFound } from \"./pages/NotFound\";\nimport { ProjectConnection } from \"./pages/ProjectConnection/ProjectConnection\";\n\nimport ErrorComponent from \"./components/ErrorComponent\";\nimport UserManager from \"./dashboard/UserManager\";\nimport { Account } from \"./pages/Account/Account\";\nimport { ServerSettings } from \"./pages/ServerSettings/ServerSettings\";\n\nimport type { ProstglesState } from \"@common/electronInitTypes\";\nimport type { DBSSchema } from \"@common/publishUtils\";\nimport { fixIndent, ROUTES } from \"@common/utils\";\nimport type { AuthHandler } from \"prostgles-client/dist/getAuthHandler\";\nimport {\n type DBHandlerClient,\n type MethodHandler,\n} from \"prostgles-client/dist/prostgles\";\nimport { type Socket } from \"socket.io-client\";\nimport { CommandPalette } from \"./app/CommandPalette/CommandPalette\";\nimport { Documentation } from \"./app/CommandPalette/Documentation\";\nimport { XRealIpSpoofableAlert } from \"./app/XRealIpSpoofableAlert\";\nimport { createReactiveState, useReactiveState } from \"./appUtils\";\nimport { AlertProvider } from \"./components/AlertProvider\";\nimport { FlexCol, FlexRow } from \"./components/Flex\";\nimport { InfoRow } from \"./components/InfoRow\";\nimport { NavBarWrapper } from \"./components/NavBar/NavBarWrapper\";\nimport { PostgresInstallationInstructions } from \"./components/PostgresInstallationInstructions\";\nimport type { DBS, DBSMethods } from \"./dashboard/Dashboard/DBS\";\nimport { MousePointer } from \"./demo/MousePointer\";\nimport { ComponentList } from \"./pages/ComponentList\";\nimport { ElectronSetup } from \"./pages/ElectronSetup/ElectronSetup\";\nimport { Login } from \"./pages/Login/Login\";\nimport { NonHTTPSWarning } from \"./pages/NonHTTPSWarning\";\nimport { useAppTheme } from \"./theme/useAppTheme\";\nimport { useAppState } from \"./useAppState/useAppState\";\n\nexport type ClientUser = {\n sid: string;\n uid: string;\n type: string;\n has_2fa: boolean;\n} & DBSSchema[\"users\"];\n\nexport type ClientAuth = {\n user?: ClientUser;\n};\nexport type Theme = \"dark\" | \"light\";\nexport type PrglReadyState = {\n /**\n * Used to re-render dashboard on dbs reconnect\n */\n dbsKey: string;\n dbs: DBS;\n dbsTables: CommonWindowProps[\"tables\"];\n dbsMethods: DBSMethods;\n dbsSocket: Socket;\n auth: AuthHandler;\n isAdminOrSupport: boolean;\n sid: string | undefined;\n};\nexport type ExtraProps = PrglReadyState & {\n setTitle: (content: string | ReactChild) => void;\n user: DBSSchema[\"users\"] | undefined;\n dbsSocket: Socket;\n theme: Theme;\n} & Pick, \"serverState\">;\n\nexport type PrglStateCore = Pick<\n ExtraProps,\n \"dbs\" | \"dbsMethods\" | \"dbsTables\"\n>;\nexport type PrglState = ExtraProps;\n\nexport type PrglCore = {\n db: DBHandlerClient;\n methods: MethodHandler;\n tables: CommonWindowProps[\"tables\"];\n};\nexport type PrglProject = PrglCore & {\n dbKey: string;\n connectionId: string;\n databaseId: number;\n projectPath: string;\n connection: DBSSchema[\"connections\"];\n};\nexport type Prgl = PrglState & PrglProject;\n\nexport type AppState = {\n prglState?: PrglReadyState;\n user: DBSSchema[\"users\"] | undefined;\n serverState?: ProstglesState;\n title: React.ReactNode;\n isConnected: boolean;\n};\n\nexport const r_useAppVideoDemo = createReactiveState({ demoStarted: false });\n\nexport const App = () => {\n const [isDisconnected, setIsDisconnected] = useState(false);\n const state = useAppState(setIsDisconnected);\n const [title, setTitle] = useState(\"\");\n const {\n state: { demoStarted },\n } = useReactiveState(r_useAppVideoDemo);\n\n const { theme, userThemeOption } = useAppTheme(state);\n const extraProps: PrglState | undefined = useMemo(\n () =>\n state.prglState &&\n state.serverState && {\n ...state.prglState,\n setTitle: (content: ReactChild) => {\n if (title !== content) setTitle(content);\n },\n user: state.user,\n theme,\n serverState: state.serverState,\n },\n [state, theme, title],\n );\n\n const { initState } = state.serverState ?? {};\n const initStateError = initState?.state === \"error\" ? initState : undefined;\n if (\n state.serverState?.isElectron &&\n ((state.state !== \"loading\" && state.state !== \"ok\") ||\n !state.serverState.electronCredsProvided ||\n initStateError)\n ) {\n return ;\n }\n\n const unknownErrorMessage =\n \"Something went wrong with initialising the server. Check console for more details\";\n const error =\n state.dbsClientError ||\n (initState?.state === \"error\" ?\n initState.error || unknownErrorMessage\n : undefined);\n\n const { prglState, serverState, state: _state } = state;\n if (!error && (!prglState || !serverState || _state === \"loading\")) {\n return (\n
\n \n
\n );\n }\n\n if (error || !prglState || !serverState || !extraProps) {\n const hint =\n state.dbsClientError ?\n errorHints.dbsClientError\n : initStateError?.errorType && errorHints[initStateError.errorType];\n return (\n \n \n \n {initStateError?.errorType === \"connection\" && (\n \n )}\n \n {hint && (\n \n {hint}\n \n )}\n \n );\n }\n const isElectron = !!serverState.isElectron;\n return (\n \n \n \n \n {demoStarted && }\n {isDisconnected && (\n \n )}\n \n \n }\n />\n \n \n \n }\n />\n \n \n \n }\n />\n \n \n \n }\n />\n }\n />\n \n }\n />\n \n }\n />\n \n }\n />\n \n \n \n }\n />\n \n \n \n }\n />\n }\n />\n \n \n \n }\n />\n } />\n \n \n \n );\n};\n\nconst errorHints = {\n connection: fixIndent(`\n Could not connect to state database. Ensure /server/.env file (or\n environment variables) point to a running and accessible postgres\n server database`),\n init: \"Failed to start Prostgles\",\n dbsClientError:\n \"Failed to connect to state database. Try refreshing the page or restarting the app.\",\n};\n\nexport * from \"./appUtils\";\n" }, { "path": "client/src/Testing.ts", "content": "export const COMMANDS = {\n \"NewConnectionForm.connectionName\": \"Connection name input field\",\n \"NewConnectionForm.connectionType\": \"Connection type select field\",\n \"NewConnectionForm.db_conn\": \"Database connection input field\",\n \"NewConnectionForm.db_host\": \"Database host input field\",\n \"NewConnectionForm.db_port\": \"Database port input field\",\n \"NewConnectionForm.db_user\": \"Database user input field\",\n \"NewConnectionForm.db_pass\": \"Database password input field\",\n \"NewConnectionForm.db_name\": \"Database name input field\",\n \"NewConnectionForm.MoreOptionsToggle\": \"\",\n \"NewConnectionForm.schemaFilter\": \"\",\n \"NewConnectionForm.connectionTimeout\": \"Connection timeout input field\",\n \"NewConnectionForm.sslMode\": \"SSL mode select field\",\n \"NewConnectionForm.watchSchema\": \"Watch schema toggle\",\n \"NewConnectionForm.realtime\": \"Realtime toggle\",\n \"NewConnectionForm.testConnection\": \"Test connection button\",\n\n \"config.goToConnDashboard\": \"Go to connection workspace \",\n \"config.details\": \"\",\n \"config.bkp\": \"\",\n \"config.tableConfig\": \"\",\n \"config.bkp.create\": \"\",\n \"config.bkp.create.name\": \"Backup name input field\",\n \"config.bkp.create.start\": \"\",\n \"config.bkp.AutomaticBackups\": \"\",\n \"config.bkp.AutomaticBackups.toggle\": \"\",\n \"config.ac\": { desc: \"\", uiOnly: true },\n \"config.status\": \"\",\n \"config.ac.create\": \"\",\n \"config.ac.save\": \"\",\n \"config.ac.removeRule\": \"\",\n \"config.ac.cancel\": \"\",\n \"config.ac.createDefault\": \"\",\n \"config.ac.edit.user\": \"Opens select/edit access rule user types\",\n \"config.ac.edit.user.select\": \"User type select search box\",\n \"config.ac.edit.user.select.create\":\n \"Creates a user type when the search did not yield any results\",\n \"config.ac.edit.user.select.done\": \"Closes create user popup\",\n\n \"config.ac.edit.type\":\n \"Rule type button group. Each button.value will contain the type\",\n\n \"config.ac.edit.dataAccess\": \"Data access section with tables/runsql\",\n\n \"config.ac.edit.createWorkspaces\": \"\",\n \"config.ac.edit.publishedWorkspaces\": \"\",\n\n \"config.ac.edit.typeCustom.tables\": \"\",\n \"config.ac.edit.typeAll\": \"\",\n \"config.ac.edit.typeSQL\": \"\",\n \"config.files\": \"\",\n \"config.files.toggle\": \"\",\n \"config.files.toggle.confirm\": \"\",\n \"config.api\": { desc: \"\", uiOnly: true },\n \"config.methods\": \"\",\n\n \"dashboard.window.rowInsert\": \"Open row insert panel\",\n \"dashboard.window.rowInsertTop\": \"Open row insert panel from top filter bar\",\n\n \"W_SQLMenu.name\": \"\",\n \"W_SQLMenu.renderDisplayMode\": \"\",\n \"W_SQLMenu.saveQuery\": \"\",\n \"W_SQLMenu.openSQLFile\": \"\",\n \"W_SQLMenu.deleteQuery\": \"\",\n\n \"W_SQLEditor.executeStatement\": \"Executes the current SQL statement\",\n W_SQLEditor: \"\",\n W_SQLBottomBar: \"\",\n \"W_SQLBottomBar.runQuery\":\n \"Executes the current query (selected, block or full)\",\n \"W_SQLBottomBar.limit\": \"\",\n \"W_SQLBottomBar.queryDuration\": \"\",\n \"W_SQLBottomBar.cancelQuery\": \"Cancels the current query\",\n \"W_SQLBottomBar.terminateQuery\": \"Terminates the current query\",\n \"W_SQLBottomBar.stopListen\": \"Terminates the current LISTEN query\",\n \"W_SQLBottomBar.toggleTable\": \"\",\n \"W_SQLBottomBar.toggleCodeEditor\": \"\",\n \"W_SQLBottomBar.toggleNotices\": \"\",\n \"W_SQLBottomBar.stopLoopQuery\": \"Stop loop query\",\n \"W_SQLBottomBar.copyResults\": \"Copy results\",\n \"W_SQLBottomBar.rowCount\": \"Row count\",\n \"W_SQLBottomBar.sqlError\": \"SQL error\",\n\n W_SQLResults: \"\",\n \"Window.W_QuickMenu\": \"Quick menu for the current window\",\n \"Window.ChildChart\": \"\",\n \"Window.ChildChart.toolbar\": \"\",\n\n \"dashboard.window.fullscreen\": \"fullscreen\",\n \"dashboard.window.close\": \"close\",\n \"dashboard.window.collapse\": \"collapse\",\n \"dashboard.window.viewEditRow\": \"\",\n \"dashboard.window.toggleFilterBar\": \"\",\n \"dashboard.window.menu\": \"\",\n\n \"dashboard.window.detachChart\": \"\",\n \"dashboard.window.collapseChart\": \"\",\n \"dashboard.window.closeChart\": \"\",\n \"dashboard.window.chartMenu\": \"\",\n \"dashboard.window.restoreMinimisedCharts\": \"\",\n\n \"dashboard.goToConnConfig\": \"Go to connection config\",\n \"dashboard.menu.settingsToggle\": \"\",\n \"dashboard.menu.settings.defaultLayoutType\": \"\",\n \"dashboard.menu.settings\": \"\",\n \"dashboard.menu\": \"\",\n \"dashboard.menu.sqlEditor\": \"\",\n \"dashboard.menu.quickSearch\": \"\",\n \"dashboard.menu.resize\": \"\",\n \"dashboard.centered-layout.resize\": \"\",\n \"dashboard.menu.fileTable\": \"\",\n \"dashboard.menu.savedQueriesList\": \"\",\n \"dashboard.menu.tablesSearchList\": \"\",\n \"dashboard.menu.tablesSearchListInput\": \"\",\n \"dashboard.menu.serverSideFunctionsList\": \"\",\n \"dashboard.menu.create\": \"\",\n \"dashboard.menu.createTable\": \"\",\n \"dashboard.menu.createTable.tableName\": \"\",\n \"dashboard.menu.createTable.addColumn\": \"\",\n \"dashboard.menu.createTable.addColumn.confirm\": \"\",\n \"dashboard.menu.createTable.confirm\": \"\",\n\n \"W_TableMenu_TableInfo.name\": \"\",\n \"W_TableMenu_TableInfo.comment\": \"\",\n \"W_TableMenu_TableInfo.oid\": \"\",\n \"W_TableMenu_TableInfo.type\": \"\",\n \"W_TableMenu_TableInfo.owner\": \"\",\n \"W_TableMenu_TableInfo.sizeInfo\": \"\",\n \"W_TableMenu_TableInfo.viewDefinition\": \"\",\n \"W_TableMenu_TableInfo.vacuum\": \"\",\n \"W_TableMenu_TableInfo.vacuumFull\": \"\",\n \"W_TableMenu_TableInfo.drop\": \"\",\n\n \"W_TableMenu_ColumnList.alter\": \"\",\n \"W_TableMenu_ColumnList.linkedColumnOptions\": \"\",\n \"W_TableMenu_ColumnList.removeComputedColumn\": \"\",\n\n TableHeader: \"\",\n \"TableHeader.resizeHandle\": \"\",\n\n \"FormField.clear\": \"Clear a FormField\",\n\n SmartForm: \"\",\n \"SmartForm.header.tableIconAndName\": \"\",\n \"SmartForm.header.previousRow\": \"\",\n \"SmartForm.header.nextRow\": \"\",\n\n \"SmartForm.close\": \"Close dialog\",\n \"SmartForm.delete\": \"Deletes row\",\n \"SmartForm.delete.confirm\": \"Confirms Deleting a row\",\n \"SmartForm.update\": \"update row\",\n \"SmartForm.update.confirm\": \"Confirms update a row\",\n \"SmartForm.insert\": \"Confirms Deleting a row\",\n \"SmartForm.clone\": \"Confirms Deleting a row\",\n\n \"SQLSmartEditor.Run\": \"Run the sql statement\",\n\n \"SearchList.toggleAll\": \"\",\n \"SearchList.List\": \"\",\n \"SearchList.Input\": \"\",\n ViewMoreSmartCardList: \"\",\n \"Section.toggleFullscreen\": \"\",\n FieldFilterControl: \"\",\n \"FieldFilterControl.type\": \"\",\n \"FieldFilterControl.type.custom\": \"\",\n \"FieldFilterControl.type.except\": \"\",\n \"FieldFilterControl.select\": \"\",\n \"RenderFilter.edit\": \"\",\n \"RenderFilter.done\": \"\",\n\n ForcedFilterControl: \"\",\n \"ForcedFilterControl.type\": \"\",\n \"ForcedFilterControl.type.disabled\": \"\",\n \"ForcedFilterControl.type.enabled\": \"\",\n\n CheckFilterControl: \"\",\n \"CheckFilterControl.type\": \"\",\n \"CheckFilterControl.type.disabled\": \"\",\n \"CheckFilterControl.type.enabled\": \"\",\n\n selectRule: \"\",\n selectRuleAdvanced: \"\",\n updateRule: \"\",\n updateRuleAdvanced: \"\",\n deleteRule: \"\",\n deleteRuleAdvanced: \"\",\n insertRule: \"\",\n insertRuleAdvanced: \"\",\n syncRule: \"\",\n syncRuleAdvanced: \"\",\n\n SearchAll: \"\",\n SmartAddFilter: \"\",\n FilterWrapper: \"\",\n \"FilterWrapper.typeSelect\": \"\",\n FileBtn: \"\",\n\n \"ForcedDataControl.toggle\": \"\",\n \"ForcedDataControl.addColumn\": \"\",\n \"TablePermissionControls.close\": \"\",\n \"TablePermissionControls.done\": \"\",\n\n Connections: \"\",\n \"Connections.add\": \"add\",\n \"Connections.new\": \" \",\n \"Connection.openConnection\": \"Open connection\",\n \"Connection.workspaceList\": \"Connection workspace list\",\n\n \"Connection.closeAllWindows\": \"\",\n \"Connection.statusMonitor\": \"\",\n \"Connection.configure\": \"\",\n \"Connection.edit\": \"\",\n \"Connection.edit.updateOrCreateConfirm\": \"\",\n \"Connection.edit.delete\": \"\",\n \"Connection.edit.delete.dropDatabase\": \"\",\n \"Connection.edit.delete.confirm\": \"\",\n\n \"Connection.disconnect\": \"\",\n\n \"ConnectionServer.add\": \"\",\n \"ConnectionServer.add.newDatabase\": \"\",\n \"ConnectionServer.add.existingDatabase\": \"\",\n \"ConnectionServer.NewDbName\": \"\",\n \"ConnectionServer.add.confirm\": \"\",\n\n \"SmartFilterBar.toggle\": \"\",\n \"SmartFilterBar.rightOptions.show\": \"\",\n \"SmartFilterBar.rightOptions.update\": \"\",\n \"SmartFilterBar.rightOptions.delete\": \"\",\n\n \"ColumnEditor.name\": \"\",\n \"ColumnEditor.dataType\": \"\",\n\n AddColumnMenu: \"\",\n\n WorkspaceAddBtn: \"\",\n WorkspaceMenuDropDown: \"\",\n \"WorkspaceMenuDropDown.WorkspaceAddBtn\": \"\",\n \"WorkspaceMenu.SearchList\": \"\",\n \"WorkspaceMenu.CloneWorkspace\": \"\",\n \"WorkspaceMenu.toggleWorkspaceLayoutMode\": \"\",\n WorkspaceDeleteBtn: \"\",\n \"WorkspaceDeleteBtn.Confirm\": \"\",\n\n JoinPathSelectorV2: \"\",\n \"LinkedColumn.Add\": \"\",\n \"LinkedColumn.ColumnList.toggle\": \"\",\n\n \"SummariseColumn.toggle\": \"\",\n FunctionSelector: \"\",\n \"SummariseColumn.apply\": \"\",\n \"Popup.header\": \"\",\n \"Popup.close\": \"\",\n \"Popup.content\": \"\",\n \"Popup.footer\": \"\",\n \"Popup.toggleFullscreen\": \"\",\n \"PopupSection.fullscreen\": \"\",\n \"PopupSection.content\": \"\",\n \"LinkedColumn.ColumnListMenu\": \"\",\n \"AddChartMenu.Map\": \"\",\n \"AddChartMenu.Timechart\": \"\",\n W_TimeChart: \"\",\n \"W_TimeChart.ActiveRow\": \"\",\n \"W_TimeChart.AddTimeChartFilter\": \"\",\n SmartFormField: \"\",\n\n \"CloseSaveSQLPopup.delete\": \"\",\n\n SchemaGraph: \"\",\n \"SchemaGraph.TopControls\": \"\",\n \"SchemaGraph.TopControls.tableRelationsFilter\": \"\",\n \"SchemaGraph.TopControls.columnRelationsFilter\": \"\",\n \"SchemaGraph.TopControls.linkColorMode\": \"\",\n \"SchemaGraph.TopControls.resetLayout\": \"\",\n AddColumnReference: \"\",\n \"SmartFormFieldOptions.AttachFile\": \"\",\n RuleToggle: \"\",\n \"table.options.displayMode\": \"\",\n \"table.options.cardView.groupBy\": \"\",\n \"table.options.cardView.orderBy\": \"\",\n \"CardView.row\": \"\",\n \"CardView.group\": \"\",\n \"CardView.DragHeader\": \"\",\n\n \"CreateFileColumn.confirm\": \"\",\n \"AppDemo.start\": \"\",\n MenuList: \"\",\n ComparablePGPolicies: \"\",\n \"ConnectionServer.SampleSchemas\": \"\",\n \"dashboard.goToConnections\": \"\",\n QuickAddComputedColumn: \"\",\n \"SmartSelect.Done\": \"\",\n \"SmartAddFilter.JoinTo\": \"\",\n \"SmartAddFilter.toggleIncludeLinkedColumns\": \"\",\n ContextDataSelector: \"\",\n ClickCatchOverlay: \"\",\n \"BackupControls.Restore\": \"\",\n ChartLayerManager: \"\",\n \"App.colorScheme\": \"\",\n \"ElectronSetup.Next\": \"\",\n \"ElectronSetup.Back\": \"\",\n PostgresInstallationInstructions: \"\",\n \"PostgresInstallationInstructions.Close\": \"\",\n \"ElectronSetup.Done\": \"\",\n SmartCardList: \"\",\n \"AutomaticBackups.destination\": \"\",\n \"AutomaticBackups.frequency\": \"\",\n \"AutomaticBackups.hourOfDay\": \"\",\n \"WorkspaceAddBtn.Create\": \"\",\n MapOpacityMenu: \"\",\n MapBasemapOptions: \"\",\n \"InMapControls.goToDataBounds\": \"\",\n \"InMapControls.showCursorCoords\": \"\",\n LayerColorPicker: \"\",\n \"W_TimeChart.resetExtent\": \"\",\n TimeChartFilter: \"\",\n \"ChartLayerManager.toggleLayer\": \"\",\n \"ChartLayerManager.removeLayer\": \"\",\n \"ChartLayerManager.AddChartLayer.addLayer\": \"\",\n \"ChartLayerManager.AddChartLayer.addOSMLayer\": \"\",\n ConnectionSelector: \"\",\n \"Setup2FA.Enable\": \"\",\n \"Setup2FA.Enable.GenerateQR\": \"\",\n \"Setup2FA.Enable.CantScanQR\": \"\",\n \"Setup2FA.Enable.Base64Secret\": \"\",\n \"Setup2FA.Enable.ConfirmCode\": \"\",\n \"Setup2FA.Enable.Confirm\": \"\",\n \"Setup2FA.Disable\": \"\",\n \"Setup2FA.error\": \"\",\n \"DashboardMenuHeader.togglePinned\": \"\",\n \"BackupControls.DeleteAll\": \"\",\n \"BackupControls.DeleteAll.Confirm\": \"\",\n \"ProjectConnection.error\": \"\",\n NotFound: \"\",\n \"NotFound.goHome\": \"\",\n \"ConnectionServer.NewUserName\": \"\",\n \"ConnectionServer.NewUserPassword\": \"\",\n \"ConnectionServer.NewUserPermissionType\": \"\",\n \"ConnectionServer.withNewOwnerToggle\": \"\",\n \"W_Table.TableNotFound\": \"\",\n JoinedRecords: \"\",\n \"JoinedRecords.AddRow\": \"\",\n \"JoinedRecords.SectionToggle\": \"\",\n \"JoinedRecords.Section\": \"\",\n \"SmartCard.viewEditRow\": \"\",\n \"TimeChartLayerOptions.yAxis\": \"\",\n \"TimeChartLayerOptions.aggFunc\": \"\",\n \"TimeChartLayerOptions.aggFunc.select\": \"\",\n \"TimeChartLayerOptions.groupBy\": \"\",\n \"TimeChartLayerOptions.numericColumn\": \"\",\n \"AgeFilter.comparator\": \"\",\n \"AgeFilter.argsLeftToRight\": \"\",\n \"Login.error\": \"\",\n AskLLMAccessControl: \"\",\n \"AskLLMAccessControl.AllowAll\": \"\",\n \"Chat.messageList\": \"\",\n \"Chat.sendWrapper\": \"\",\n \"Chat.send\": \"\",\n \"Chat.sendStop\": \"\",\n \"Chat.addFiles\": \"\",\n \"Chat.textarea\": \"\",\n \"Chat.speech\": \"\",\n AskLLM: \"\",\n \"AskLLM.popup\": \"\",\n SetupLLMCredentials: \"\",\n \"SetupLLMCredentials.free\": \"\",\n \"SetupLLMCredentials.api\": \"\",\n \"AskLLMAccessControl.llm_daily_limit\": \"\",\n\n DeckGLFeatureEditor: \"\",\n \"MapBasemapOptions.Projection\": \"\",\n\n SmartFilterBar: \"\",\n SearchList: \"\",\n \"SearchList.MatchCase\": \"\",\n AddJoinFilter: \"\",\n Pagination: \"\",\n \"Pagination.page\": \"\",\n \"Pagination.lastPage\": \"\",\n \"Pagination.nextPage\": \"\",\n \"Pagination.prevPage\": \"\",\n \"Pagination.firstPage\": \"\",\n \"Pagination.pageCountInfo\": \"\",\n \"Pagination.pageSize\": \"\",\n MapExtentBehavior: \"\",\n AddLLMCredentialForm: \"\",\n \"AddLLMCredentialForm.Save\": \"\",\n \"AddLLMCredentialForm.Provider\": \"\",\n \"App.LanguageSelector\": \"\",\n \"EmailAuthSetup.SignupType\": \"\",\n EmailAuthSetup: \"\",\n \"EmailAuthSetup.error\": \"\",\n \"EmailAuthSetup.toggle\": \"\",\n EmailSMTPAndTemplateSetup: \"\",\n \"EmailSMTPAndTemplateSetup.save\": \"\",\n \"Login.toggle\": \"\",\n AuthNotifPopup: \"\",\n \"ProstglesSignup.continue\": \"\",\n \"PublishedMethods.deleteFunction\": \"\",\n \"SmartFormFieldOptions.NestedInsert\": \"\",\n\n \"Btn.ClickConfirmation\": \"\",\n \"Btn.ClickConfirmation.Confirm\": \"\",\n AddMCPServer: \"\",\n \"AddMCPServer.Open\": \"\",\n \"AddMCPServer.Add\": \"\",\n \"LLMChatOptions.MCPTools\": \"\",\n \"LLMChatOptions.DatabaseAccess\": \"\",\n \"MCPServersToolbar.stopAllToggle\": \"\",\n \"MCPServersToolbar.searchTools\": \"\",\n ConnectionsOptions: \"\",\n \"ConnectionsOptions.showStateDatabase\": \"\",\n \"ConnectionsOptions.showDatabaseNames\": \"\",\n \"AuthProviderSetup.websiteURL\": \"\",\n \"AuthProviderSetup.defaultUserType\": \"\",\n \"AuthProviders.list\": \"\",\n EmailSMTPSetup: \"\",\n EmailTemplateSetup: \"\",\n \"WorkspaceMenu.list\": \"\",\n WorkspaceSettings: \"\",\n \"LLMChatOptions.toggle\": \"\",\n \"LLMChat.select\": \"\",\n \"LLMChatOptions.Prompt\": \"\",\n \"LLMChatOptions.Model\": \"\",\n \"AskLLMChat.NewChat\": \"\",\n \"AskLLMChat.LoadSuggestedToolsAndPrompt\": \"\",\n \"AskLLMChat.LoadSuggestedDashboards\": \"\",\n \"AskLLMChat.UnloadSuggestedDashboards\": \"\",\n \"AskLLMToolApprover.AllowAlways\": \"\",\n \"AskLLMToolApprover.AllowOnce\": \"\",\n \"AskLLMToolApprover.Deny\": \"\",\n MonacoEditor: \"\",\n MCPServerTools: \"\",\n \"MCPServerFooterActions.logs\": \"\",\n \"MCPServerFooterActions.config\": \"\",\n \"MCPServerFooterActions.enableToggle\": \"\",\n \"MCPServerFooterActions.refreshTools\": \"\",\n MCPServerConfigButton: \"\",\n MCPServerConfig: \"\",\n \"MCPServerConfig.save\": \"\",\n \"MCPServers.toggleAutoApprove\": \"\",\n Feedback: \"\",\n \"FileImporterFooter.import\": \"\",\n\n Sessions: \"Active sessions list\",\n \"Account.ChangePassword\": \"Change password\",\n NavBar: \"\",\n \"NavBar.mobileMenuToggle\": \"\",\n \"NavBar.logout\": \"\",\n CommandPalette: \"\",\n \"Chat.attachedFiles\": \"\",\n \"Window.W_QuickMenu.addCrossFilteredTable\": \"Add cross-filtered table\",\n Alert: \"Alert popup\",\n ErrorComponent: \"\",\n ToolUseMessage: \"\",\n \"ToolUseMessage.toggle\": \"\",\n \"ToolUseMessage.Popup\": \"\",\n MarkdownMonacoCode: \"\",\n \"MCPServersInstall.install\": \"\",\n NewConnectionForm: \"\",\n \"BackupsControls.Completed\": \"Completed backups list\",\n \"AllowedOriginCheck.FormField\": \"\",\n \"APIDetailsWs.Examples\": \"\",\n \"APIDetailsHttp.Examples\": \"\",\n AllowedOriginCheck: \"\",\n \"APIDetailsTokens.CreateToken\": \"\",\n \"APIDetailsTokens.CreateToken.daysUntilExpiration\": \"\",\n \"APIDetailsTokens.CreateToken.generate\": \"\",\n APIDetailsTokens: \"\",\n \"AskLLM.DeleteMessage\": \"\",\n \"DockerSandboxCreateContainer.Logs\": \"\",\n TableBody: \"\",\n \"ServerSideFunctions.onMountEnabled\": \"\",\n DashboardMenu: \"\",\n \"SearchAll.Popup\": \"\",\n\n AddComputedColMenu: \"\",\n \"AddComputedColMenu.countOfAllRows\": \"\",\n \"AddComputedColMenu.addBtn\": \"\",\n \"AddComputedColMenu.name\": \"\",\n \"AddComputedColMenu.addTo\": \"\",\n \"LinkedColumn.joinType\": \"\",\n \"LinkedColumn.layoutType\": \"\",\n \"CreateColumn.next\": \"\",\n FileColumnConfigEditor: \"\",\n \"FileColumnConfigEditor.maxFileSizeMB\": \"\",\n \"FileColumnConfigEditor.contentMode\": \"\",\n CreateFileColumn: \"\",\n ColumnQuickStats: \"\",\n \"ColumnQuickStats.addFilter\": \"\",\n \"QuickAddComputedColumn.Add\": \"\",\n \"QuickAddComputedColumn.name\": \"\",\n \"LLMChatOptions.Prompt.Preview\": \"\",\n \"FunctionColumnList.SearchInput\": \"\",\n \"LLMChatOptions.Model.AddCredentials\": \"\",\n QuickFilterGroupsControl: \"\",\n LinkedColumn: \"\",\n CreateColumn: \"\",\n \"ToolUseMessage.toggleGroup\": \"\",\n \"PGDumpOptions.format\": \"\",\n \"PGDumpOptions.destination\": \"\",\n \"PGDumpOptions.numberOfJobs\": \"\",\n \"PGDumpOptions.compressionLevel\": \"\",\n \"PGDumpOptions.excludeSchema\": \"\",\n \"PGDumpOptions.noOwner\": \"\",\n \"PGDumpOptions.create\": \"\",\n \"PGDumpOptions.globalsOnly\": \"\",\n \"PGDumpOptions.rolesOnly\": \"\",\n \"PGDumpOptions.schemaOnly\": \"\",\n \"PGDumpOptions.encoding\": \"\",\n \"PGDumpOptions.clean\": \"\",\n \"PGDumpOptions.dataOnly\": \"\",\n \"PGDumpOptions.ifExists\": \"\",\n \"PGDumpOptions.keepLogs\": \"\",\n \"BackupControls.backupsInProgress\": \"\",\n \"BackupsControls.Completed.delete\": \"\",\n \"BackupsControls.Completed.download\": \"\",\n \"BackupsControls.Completed.restore\": \"\",\n \"BackupsControls.Completed.deleteAll\": \"\",\n \"BackupsControls.restoreFromFile\": \"\",\n BackupLogs: \"\",\n FilterWrapper_FieldName: \"\",\n FilterWrapper_Field: \"\",\n \"CloudStorageCredentialSelector.selectCredential\": \"\",\n DashboardMenuContent: \"\",\n} as const satisfies Record<\n string,\n | string\n | {\n desc: string;\n uiOnly?: true;\n }\n>;\nexport type Command = keyof typeof COMMANDS;\n\nexport type TestSelectors = {\n \"data-command\"?: Command;\n \"data-key\"?: string;\n id?: string;\n};\n\nexport const dataCommand = (cmd: Command): { \"data-command\": Command } => ({\n \"data-command\": cmd,\n});\nexport const getCommandElemSelector = (cmd: Command) => {\n return `[data-command=${JSON.stringify(cmd)}]`;\n};\nexport const getDataKeyElemSelector = (key: string) => {\n return `[data-key=${JSON.stringify(key)}]`;\n};\nexport const getDataLabelElemSelector = (key: string) => {\n return `[data-label=${JSON.stringify(key)}]`;\n};\n\nexport const COMMAND_SEARCH_ATTRIBUTE_NAME = \"data-command-search-ended\";\n\nexport const MOCK_ELECTRON_WINDOW_ATTR = \"MOCK_ELECTRON_WINDOW_ATTR\" as const;\n\ndeclare module \"react\" {\n interface HTMLAttributes {\n \"data-command\"?: Command;\n }\n}\n\nexport declare namespace SVGif {\n export type CursorAnimation =\n | {\n elementSelector: string;\n offset?: { x: number; y: number };\n duration: number;\n type: \"click\" | \"clickAppearOnHover\";\n\n /**\n * Time to wait before clicking after reaching the final position\n * */\n waitBeforeClick?: number;\n /**\n * Time to stay on the final position after clicking\n */\n lingerMs?: number;\n }\n | {\n type: \"moveTo\";\n xy: [number, number];\n duration: number;\n };\n export type Animation =\n | CursorAnimation\n | {\n elementSelector: string;\n duration: number;\n type: \"type\";\n extraAnimation?:\n | { type: \"zoomToElement\" }\n | { type: \"bringToFront\"; elementSelector: string };\n /**\n * Maximum scale to zoom in while typing\n */\n maxScale?: number;\n }\n | {\n elementSelector: string;\n duration: number;\n type: \"zoomToElement\" | \"bringToFront\";\n bringToFrontSelector?: string;\n /**\n * Maximum scale to zoom in\n */\n maxScale?: number;\n }\n | {\n elementSelector: string;\n duration: number;\n type: \"fadeIn\" | \"growIn\";\n }\n | {\n type: \"wait\";\n duration: number;\n };\n export type Scene = {\n svgFileName: string;\n caption?: string;\n animations: Animation[];\n };\n}\n\n/**\n * TODO: Forbid imports to ensure this file is portable\n */\n" }, { "path": "client/src/WithPrgl.tsx", "content": "import React from \"react\";\nimport type { Prgl } from \"./App\";\nimport { createReactiveState, useReactiveState } from \"./appUtils\";\nexport const prgl_R = createReactiveState(undefined);\n\nexport const WithPrgl = ({\n onRender,\n}: {\n onRender: (prgl: Prgl) => React.ReactNode;\n}): JSX.Element => {\n const { state: prgl } = useReactiveState(prgl_R);\n\n if (!prgl) return <>;\n const res = onRender(prgl);\n return <>{res};\n};\n" }, { "path": "client/src/app/CommandPalette/CommandPalette.css", "content": ".flicker {\n animation: flicker .5s infinite ;\n}\n.flicker-slow {\n animation: flicker 1.5s infinite ;\n}\n@keyframes flicker {\n 0% { opacity: .75; }\n 50% { opacity: 0.1; }\n 100% { opacity: .75; }\n}" }, { "path": "client/src/app/CommandPalette/CommandPalette.tsx", "content": "import { FlashMessage } from \"@components/FlashMessage\";\nimport { Icon } from \"@components/Icon/Icon\";\nimport Popup from \"@components/Popup/Popup\";\nimport { SearchList } from \"@components/SearchList/SearchList\";\nimport {\n mdiArrowSplitVertical,\n mdiButtonPointer,\n mdiCardTextOutline,\n mdiChartLine,\n mdiCheckboxOutline,\n mdiFileUploadOutline,\n mdiFormatListBulleted,\n mdiFormSelect,\n mdiFormTextbox,\n mdiKeyboard,\n mdiLink,\n mdiListBoxOutline,\n mdiMenu,\n mdiNumeric,\n mdiTextLong,\n} from \"@mdi/js\";\nimport React, { useEffect, useState } from \"react\";\nimport { NavLink } from \"react-router-dom\";\nimport { flatUIDocs, type UIDoc, type UIDocInputElement } from \"../UIDocs\";\nimport \"./CommandPalette.css\";\nimport { Documentation } from \"./Documentation\";\nimport { useGoToUI } from \"./useGoToUI\";\nimport { getItemSearchRank } from \"@components/SearchList/searchMatchUtils/getItemSearchRank\";\nimport { isPlaywrightTest } from \"src/i18n/i18nUtils\";\nimport { getProperty } from \"@common/utils\";\n\n/**\n * By pressing Ctrl+K, the user to search and go to functionality in the UI.\n */\nexport const CommandPalette = ({ isElectron }: { isElectron: boolean }) => {\n const { showSection, setShowSection } = useOnKeyDown();\n const [highlights, setHighlights] = useState([]);\n const { message, setMessage, goToUIDocItem } = useGoToUI(setHighlights);\n\n return (\n <>\n {highlights.map((h, i) => (\n \n ))}\n {message ?\n setMessage(undefined)} />\n : showSection && (\n Documentation\n )\n }\n data-command=\"CommandPalette\"\n clickCatchStyle={{ opacity: 1 }}\n positioning={showSection === \"commands\" ? \"top-center\" : \"center\"}\n onClose={() => setShowSection(undefined)}\n contentClassName={\n \"flex-col gap-2 \" + (showSection === \"docs\" ? \" p-2\" : \"p-1\")\n }\n contentStyle={\n showSection === \"docs\" ?\n {\n textAlign: \"left\",\n }\n : {\n width: \"min(100vw, 700px)\",\n maxHeight: \"min(100vh, 500px)\",\n }\n }\n >\n {showSection === \"commands\" ?\n {\n const iconKey =\n data.type === \"input\" ?\n `${data.type}-${data.inputType}`\n : data.type;\n const iconPath =\n data.iconPath ?? getProperty(UIDocTypeToIcon, iconKey);\n if (!iconPath) {\n console.warn(\"No icon for UIDoc type\", iconKey, data);\n }\n return {\n key: data.title,\n parentLabels: data.parentTitles,\n label: data.title,\n subLabel: data.description,\n contentLeft:\n iconPath ?\n \n : undefined,\n onPress: async () => {\n setShowSection(undefined);\n await goToUIDocItem(data);\n },\n ranking: (searchTerm) =>\n getItemSearchRank(\n {\n title: data.title,\n subTitle: data.description,\n level: data.parentTitles.length,\n },\n searchTerm,\n ),\n data,\n };\n })}\n />\n : }\n \n )\n }\n \n );\n};\n\nexport type CommandSearchHighlight = {\n left: number;\n top: number;\n width: number;\n height: number;\n borderRadius: string;\n flickerSlow?: boolean;\n};\n\nconst useOnKeyDown = () => {\n const [showSection, setShowSection] = useState<\"commands\" | \"docs\">();\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === \"F1\") {\n event.preventDefault();\n setShowSection(\"docs\");\n }\n if (event.ctrlKey && event.key === \"k\") {\n event.preventDefault();\n setShowSection(\"commands\");\n }\n if (event.key === \"Escape\") {\n setShowSection(undefined);\n }\n };\n\n window.addEventListener(\"keydown\", handleKeyDown);\n return () => {\n window.removeEventListener(\"keydown\", handleKeyDown);\n };\n }, [showSection]);\n return { showSection, setShowSection };\n};\n\nconst UIDocTypeToIcon: Partial<\n Record<\n `${UIDocInputElement[\"type\"]}-${UIDocInputElement[\"inputType\"]}`,\n string\n > &\n Record, string>\n> = {\n link: mdiLink,\n button: mdiButtonPointer,\n popup: mdiButtonPointer,\n select: mdiButtonPointer,\n \"input-text\": mdiFormTextbox,\n \"input-checkbox\": mdiCheckboxOutline,\n \"input-file\": mdiFileUploadOutline,\n \"input-number\": mdiNumeric,\n \"input-select\": mdiFormSelect,\n smartform: mdiListBoxOutline,\n \"smartform-popup\": mdiListBoxOutline,\n list: mdiFormatListBulleted,\n section: mdiCardTextOutline,\n tab: mdiCardTextOutline,\n \"accordion-item\": mdiCardTextOutline,\n \"drag-handle\": mdiArrowSplitVertical,\n \"hotkey-popup\": mdiKeyboard,\n navbar: mdiMenu,\n text: mdiTextLong,\n canvas: mdiChartLine,\n // page: mdiGrid,\n};\n\nif (isPlaywrightTest) {\n flatUIDocs.forEach(({ title: searchTerm }) => {\n let lowestRank = { value: Infinity, title: \"\" };\n flatUIDocs.forEach(({ title, description, parentTitles }) => {\n const rank = getItemSearchRank(\n {\n title,\n subTitle: description,\n level: parentTitles.length,\n },\n searchTerm,\n );\n\n if (rank < lowestRank.value) {\n lowestRank = { value: rank, title };\n }\n });\n\n if (searchTerm !== lowestRank.title) {\n throw new Error(\n `Search rank test failed for term \"${searchTerm}\". Expected \"${searchTerm}\" to rank highest, but got \"${lowestRank.title}\"`,\n );\n }\n });\n}\n" }, { "path": "client/src/app/CommandPalette/Documentation.css", "content": ".Documentation img {\n max-width: 100%;\n}\n" }, { "path": "client/src/app/CommandPalette/Documentation.tsx", "content": "import React, { useMemo } from \"react\";\nimport Markdown from \"react-markdown\";\nimport rehypeRaw from \"rehype-raw\";\nimport \"./Documentation.css\";\n\nimport Btn from \"@components/Btn\";\nimport { FlexCol, FlexRow } from \"@components/Flex\";\nimport { ScrollFade } from \"@components/ScrollFade/ScrollFade\";\nimport { useTypedSearchParams } from \"src/hooks/useTypedSearchParams\";\nimport { getDocumentationFiles } from \"./getDocumentation\";\nimport remarkGfm from \"remark-gfm\";\n\ntype P = {\n isElectron: boolean;\n};\nexport const Documentation = ({ isElectron }: P) => {\n const { docFiles, docFilesMap } = useMemo(() => {\n const docFiles = getDocumentationFiles(isElectron).map((d) => ({\n ...d,\n text: d.text.replaceAll(`=\"./screenshots/`, `=\"/screenshots/`),\n }));\n const docFilesMap = new Map(docFiles.map((d) => [d.id, d]));\n return {\n docFiles,\n docFilesMap,\n };\n }, [isElectron]);\n\n const [{ documentation_section: section = docFiles[0]?.id }, setParams] =\n useTypedSearchParams({\n documentation_section: { type: \"string\", optional: true },\n });\n\n const currentDocFile = section ? docFilesMap.get(section) : undefined;\n\n const WrappingElement = window.isLowWidthScreen ? FlexCol : FlexRow;\n\n return (\n \n \n \n {docFiles.map((docFile) => (\n setParams({ documentation_section: docFile.id })}\n >\n {docFile.title}\n \n ))}\n \n \n {!currentDocFile ? null : (\n \n {currentDocFile.text}\n \n )}\n \n \n \n );\n};\n" }, { "path": "client/src/app/CommandPalette/getDocumentation.ts", "content": "import { isObject } from \"@common/publishUtils\";\nimport { fixIndent } from \"../../demo/scripts/sqlVideoDemo\";\nimport { COMMANDS } from \"../../Testing\";\nimport { UIDocs, type UIDoc, type UIDocElement } from \"../UIDocs\";\n\ntype SeparatePage = { doc: UIDoc; parentDocs: UIDoc[]; depth: number };\n\nconst asList = (\n children: UIDocElement[],\n parentDocs: UIDoc[],\n separatePageDepth: number | undefined,\n isElectron: boolean,\n) => {\n const depth = parentDocs.length;\n const listItemDepth = depth - (separatePageDepth ?? 1);\n\n const separatePages: SeparatePage[] = [];\n\n const listContent: string = children\n .map((child) => {\n const moveToNewPage = Boolean(child.docs);\n if (moveToNewPage) {\n separatePages.push({ doc: child, depth, parentDocs });\n }\n\n const listTitle =\n moveToNewPage ?\n `${child.title}`\n : `**${child.title}**`;\n const listItem = `${\" \".repeat(listItemDepth)}- ${listTitle}: ${child.description} `;\n if (moveToNewPage) {\n return listItem;\n }\n const items = getChildren(child, isElectron);\n if (items.length) {\n const nestedList = asList(\n items,\n [...parentDocs, child],\n separatePageDepth,\n isElectron,\n );\n nestedList.separatePages.forEach((sp) => separatePages.push(sp));\n return listItem + \"\\n\" + nestedList.listContent;\n }\n return listItem;\n })\n .join(\"\\n\");\n\n return {\n listContent,\n separatePages,\n };\n};\n\nconst getUIDocAsMarkdown = (\n doc: UIDoc,\n parentDocs: UIDoc[],\n separatePageDepth: number | undefined,\n isElectron: boolean,\n): {\n title: string;\n content: string;\n doc: UIDoc;\n}[] => {\n const { docOptions } = doc;\n const depth = docOptions ? 0 : Math.min(3, parentDocs.length);\n if (isElectron && doc.uiVersionOnly) {\n return [];\n }\n const { listContent: childrenContent, separatePages } = asList(\n getChildren(doc, isElectron),\n [...parentDocs, doc],\n separatePageDepth,\n isElectron,\n );\n\n const separatePagesWithContent = separatePages.flatMap((sp) =>\n getUIDocAsMarkdown(sp.doc, sp.parentDocs, sp.depth, isElectron),\n );\n\n if (doc.uiVersionOnly) {\n const sel = \"selectorCommand\" in doc ? doc.selectorCommand : undefined;\n const cmdInfo = sel && COMMANDS[sel];\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n if (!cmdInfo || !isObject(cmdInfo) || !cmdInfo.uiOnly) {\n throw new Error(\n `UI Version Only documentation for \"${doc.title}\" does not have a valid selectorCommand.`,\n );\n }\n }\n\n const hDepth = depth + 1;\n const childrenTitle =\n doc.childrenTitle ?? (doc.type === \"navbar\" ? \"Navbar items\" : undefined);\n\n const displayTitle = isObject(docOptions) ? docOptions.title : doc.title;\n const content = [\n ` ${displayTitle} \\n`,\n doc.uiVersionOnly ? `> Not available on Desktop version\\n ` : \"\",\n `${doc.docs ? fixIndent(doc.docs) : doc.description}\\n`,\n childrenTitle ? `### ${childrenTitle}` : \"\",\n childrenContent,\n ]\n .filter(Boolean)\n .join(\"\\n\");\n\n return [\n {\n title: doc.title,\n doc,\n content,\n },\n ].concat(separatePagesWithContent);\n};\n\nexport type DocumentationFile = {\n id: string;\n fileName: string;\n title: string;\n text: string;\n};\nexport const getDocumentationFiles = (isElectron: boolean) => {\n const documentationPages: DocumentationFile[] = [];\n UIDocs.forEach((doc) => {\n const docItems = getUIDocAsMarkdown(doc, [], undefined, isElectron);\n\n const pushFile = (title: string, text: string) => {\n const index = documentationPages.length + 1;\n documentationPages.push({\n fileName: `${index.toString().padStart(2, \"0\")}_${title.replaceAll(\" \", \"_\")}.md`,\n title,\n id: toSnakeCase(title),\n text,\n });\n };\n if (documentationPages.length) {\n pushFile(doc.title, \"\");\n }\n do {\n const lastFile = documentationPages.at(-1);\n const currDocItem = docItems.shift();\n if (!currDocItem) {\n continue;\n }\n const asSeparateFile = currDocItem.doc.docOptions === \"asSeparateFile\";\n if (!lastFile || asSeparateFile) {\n const title = asSeparateFile ? currDocItem.doc.title : doc.title;\n pushFile(title, currDocItem.content + \"\\n\\n\");\n } else {\n lastFile.text += currDocItem.content + \"\\n\\n\";\n }\n } while (docItems.length);\n });\n\n return documentationPages;\n};\n\nconst toSnakeCase = (str: string) =>\n str.toLowerCase().trim().replaceAll(/ /g, \"_\");\n\nconst getChildren = (doc: UIDoc, isElectron: boolean) => {\n if (doc.docOptions === \"hideChildren\") return [];\n const items =\n \"children\" in doc ? doc.children\n : \"itemContent\" in doc ? doc.itemContent\n : \"pageContent\" in doc ? (doc.pageContent ?? [])\n : [];\n\n if (isElectron) {\n return items.filter((item) => !item.uiVersionOnly);\n }\n return items;\n};\n\nwindow.documentation = getDocumentationFiles(false);\n" }, { "path": "client/src/app/CommandPalette/getUIDocShortestPath.ts", "content": "import { filterArr } from \"@common/llmUtils\";\nimport type { UIDoc, UIDocPage } from \"../UIDocs\";\nimport { getCommandElemSelector } from \"src/Testing\";\nimport { isDefined } from \"prostgles-types\";\n\nexport const getUIDocShortestPath = (\n currentPage: UIDocPage,\n prevParents: UIDoc[],\n): undefined | UIDoc[] => {\n const currentPageLinks = filterArr(currentPage.children, {\n type: \"link\",\n } as const);\n const shortcut = prevParents.slice().map((doc, index) => {\n if (doc.type === \"popup\") {\n if (\n doc.contentSelectorCommand &&\n document.querySelectorAll(\n getCommandElemSelector(doc.contentSelectorCommand),\n ).length === 1\n ) {\n return { index };\n }\n const selector =\n doc.selector ?? getCommandElemSelector(doc.selectorCommand);\n if (index > 0 && document.querySelectorAll(selector).length === 1) {\n return { index: index - 1 };\n }\n } else if (doc.type === \"page\" || doc.type === \"link\") {\n const matchingLink = currentPageLinks.find((link) => {\n return (\n link.path === doc.path &&\n link.pathItem?.tableName === doc.pathItem?.tableName\n );\n });\n if (!matchingLink) {\n const isAlreadyOnPage =\n currentPage.path === doc.path &&\n currentPage.pathItem?.tableName === doc.pathItem?.tableName;\n if (!isAlreadyOnPage) {\n return undefined;\n }\n return { index };\n }\n return { matchingLink, index };\n } else if (doc.type !== \"info\") {\n if (\n (doc.selector &&\n document.querySelectorAll(doc.selector).length === 1) ||\n (doc.selectorCommand &&\n document.querySelectorAll(getCommandElemSelector(doc.selectorCommand))\n .length === 1)\n ) {\n return { index };\n }\n }\n });\n const bestShortcut = shortcut.findLast(isDefined);\n if (bestShortcut) {\n const { matchingLink, index } = bestShortcut;\n return [matchingLink, ...prevParents.slice(index + 1)].filter(isDefined);\n }\n};\n" }, { "path": "client/src/app/CommandPalette/useGoToUI.tsx", "content": "import { useCallback, useMemo } from \"react\";\nimport { useLocation, useNavigate } from \"react-router-dom\";\nimport { COMMAND_SEARCH_ATTRIBUTE_NAME } from \"../../Testing\";\nimport { useAlert } from \"@components/AlertProvider\";\nimport { click } from \"../../demo/demoUtils\";\nimport { isPlaywrightTest } from \"../../i18n/i18nUtils\";\nimport { tout } from \"../../utils/utils\";\nimport {\n flatUIDocs,\n type UIDoc,\n type UIDocFlat,\n type UIDocPage,\n} from \"../UIDocs\";\nimport type { CommandSearchHighlight } from \"./CommandPalette\";\nimport { useHighlightDocItem } from \"./useHighlightDocItem\";\nimport {\n getDocPagePath,\n getUIDocElements,\n getUIDocElementsAndAlertIfEmpty,\n} from \"./utils\";\nimport { includes } from \"../../dashboard/W_SQL/W_SQLBottomBar/W_SQLBottomBar\";\nimport { getUIDocShortestPath } from \"./getUIDocShortestPath\";\n\nexport type DocItemHighlightItemPosition = \"mid\" | \"last\";\n\nexport const useGoToUI = (\n setHighlights: (h: CommandSearchHighlight[]) => void,\n) => {\n const navigate = useNavigate();\n\n const { addAlert } = useAlert();\n const { highlight, message, setMessage, showMultiHighlight } =\n useHighlightDocItem(setHighlights);\n\n const location = useLocation();\n const currentPage = useMemo(() => {\n return flatUIDocs.find((doc) => {\n if (doc.type === \"page\") {\n const matchInfo = getDocPagePath(doc, location.pathname);\n return matchInfo.isExactMatch;\n }\n }) as UIDocPage | undefined;\n }, [location.pathname]);\n\n const clickOneOrHighlight = useCallback(\n async (doc: UIDoc, duration: DocItemHighlightItemPosition) => {\n if (doc.type === \"info\") return;\n\n const { items, fullSelector } = getUIDocElements(doc);\n if (items.length === 1) {\n await highlight(doc, duration);\n await click(\"\", fullSelector);\n } else if (items.length > 1) {\n await showMultiHighlight(doc, duration);\n }\n },\n [highlight, showMultiHighlight],\n );\n\n const goToUI = useCallback(\n async (doc: UIDoc): Promise => {\n const nonIteractableContainers: UIDoc[\"type\"][] = [\n \"info\",\n \"list\",\n \"page\",\n \"navbar\",\n \"section\",\n ];\n if (doc.type === \"info\") return;\n\n if (doc.type === \"hotkey-popup\") {\n const [maybeCtrl, charKey] = doc.hotkey;\n const ctrlKEvent = new KeyboardEvent(\"keydown\", {\n key: charKey.toLowerCase(),\n code: \"Key\" + charKey,\n ctrlKey: maybeCtrl === \"Ctrl\",\n altKey: maybeCtrl === \"Alt\",\n shiftKey: maybeCtrl === \"Shift\",\n bubbles: true,\n });\n\n // Dispatch it on the document\n document.dispatchEvent(ctrlKEvent);\n } else if (doc.type === \"page\" || doc.type === \"navbar\") {\n const { isExactMatch, paths } = getDocPagePath(doc, location.pathname);\n if (!isExactMatch) {\n navigate(paths[0]!);\n await tout(400);\n if (doc.type === \"page\" && doc.pathItem) {\n await highlight(doc, \"mid\");\n }\n await tout(400);\n }\n } else if (nonIteractableContainers.includes(doc.type)) {\n // Do not highlight non-interactable container types\n const { items } = getUIDocElementsAndAlertIfEmpty(doc, addAlert);\n return !items.length;\n } else if (\n doc.type === \"popup\" ||\n doc.type === \"tab\" ||\n doc.type === \"accordion-item\" ||\n doc.type === \"link\" ||\n doc.type === \"smartform-popup\"\n ) {\n await clickOneOrHighlight(doc, \"mid\");\n } else {\n await highlight(doc, \"mid\");\n }\n },\n [location.pathname, navigate, clickOneOrHighlight, highlight, addAlert],\n );\n\n const goToUIDocItem = useCallback(\n async (data: UIDocFlat) => {\n const prevParents = data.parentDocs;\n const shortcut =\n currentPage ?\n getUIDocShortestPath(currentPage, prevParents)\n : undefined;\n const pathItems = shortcut ?? prevParents;\n const shouldBeOpened = includes(data.type, [\n \"link\",\n \"page\",\n \"tab\",\n \"popup\",\n \"smartform-popup\",\n ]);\n const finalPathItems =\n data.type === \"hotkey-popup\" ? [data]\n : shouldBeOpened ? [...pathItems, data]\n : pathItems;\n for (const parent of finalPathItems) {\n const shouldStop = await goToUI(parent);\n if (!isPlaywrightTest && shouldStop) {\n return;\n }\n await tout(200);\n }\n if (!shouldBeOpened) {\n await highlight(data, \"last\");\n }\n window.document.body.setAttribute(\n COMMAND_SEARCH_ATTRIBUTE_NAME,\n data.title,\n );\n },\n [currentPage, highlight, goToUI],\n );\n\n return {\n message,\n setMessage,\n goToUIDocItem,\n };\n};\n" }, { "path": "client/src/app/CommandPalette/useHighlightDocItem.ts", "content": "import { useCallback, useState } from \"react\";\nimport { useAlert } from \"@components/AlertProvider\";\nimport { isDefined } from \"prostgles-types\";\nimport { getUIDocElementsAndAlertIfEmpty } from \"./utils\";\nimport type { UIDocNonInfo } from \"../UIDocs\";\nimport { scrollIntoViewIfNeeded, tout } from \"../../utils/utils\";\nimport type { CommandSearchHighlight } from \"./CommandPalette\";\nimport { isInParentViewport } from \"../domToSVG/utils/isElementVisible\";\nimport { isPlaywrightTest } from \"../../i18n/i18nUtils\";\nimport type { DocItemHighlightItemPosition } from \"./useGoToUI\";\n\nexport const useHighlightDocItem = (\n setHighlights: (h: CommandSearchHighlight[]) => void,\n) => {\n const { addAlert } = useAlert();\n const [message, setMessage] = useState<{\n text: string;\n left: number;\n top: number;\n }>();\n const highlight = useCallback(\n async (doc: UIDocNonInfo, itemPosition: DocItemHighlightItemPosition) => {\n const { items } = getUIDocElementsAndAlertIfEmpty(doc, addAlert);\n const firstElem = items[0];\n firstElem && scrollIntoViewIfNeeded(firstElem);\n await tout(500);\n const mustChooseOne = items.length > 1 && itemPosition !== \"last\";\n const highlights = Array.from(items)\n .map((el) => {\n const rect = el.getBoundingClientRect();\n const isVisible = isInParentViewport(el, rect);\n if (!isVisible) {\n return;\n }\n return {\n left: rect.left,\n top: rect.top,\n width: rect.width,\n height: rect.height,\n borderRadius: getComputedStyle(el).borderRadius,\n flickerSlow: itemPosition === \"last\" || mustChooseOne,\n };\n })\n .filter(isDefined);\n\n const firstItem = highlights[0];\n setHighlights(highlights);\n let waitedForClick = false;\n if (firstItem && mustChooseOne) {\n const { left, top } = firstItem;\n setMessage({ text: \"Chose one\", left, top: top - 70 });\n if (isPlaywrightTest) {\n items[0]?.scrollIntoView();\n items[0]?.click();\n } else {\n await new Promise((resolve) => {\n window.addEventListener(\"click\", resolve, { once: true });\n window.addEventListener(\"keydown\", resolve, { once: true });\n });\n }\n waitedForClick = true;\n }\n if (!waitedForClick) {\n await tout(\n isPlaywrightTest ? 0\n : itemPosition === \"mid\" ? 500\n : 2000,\n );\n }\n setHighlights([]);\n setMessage(undefined);\n return Array.from(items);\n },\n [addAlert, setHighlights],\n );\n const showMultiHighlight = useCallback(\n async (doc: UIDocNonInfo, duration: DocItemHighlightItemPosition) => {\n const [firstItem] = await highlight(doc, duration);\n if (!firstItem) {\n addAlert({\n children: `No items found in the ${JSON.stringify(doc.title)} list.`,\n });\n return;\n }\n },\n [highlight, addAlert],\n );\n return { highlight, message, setMessage, showMultiHighlight };\n};\n" }, { "path": "client/src/app/CommandPalette/utils.ts", "content": "import { isObject } from \"@common/publishUtils\";\nimport type { AlertContext } from \"@components/AlertProvider\";\nimport { includes } from \"../../dashboard/W_SQL/W_SQLBottomBar/W_SQLBottomBar\";\nimport { waitForElement } from \"../../demo/demoUtils\";\nimport { isPlaywrightTest } from \"../../i18n/i18nUtils\";\nimport { getCommandElemSelector, type Command } from \"../../Testing\";\nimport { isDefined } from \"../../utils/utils\";\nimport type { UIDoc, UIDocNonInfo } from \"../UIDocs\";\n\nexport const focusElement = async (\n testId: Command | \"\",\n endSelector?: string,\n) => {\n const elem = await waitForElement(testId, endSelector);\n elem.scrollIntoView({ behavior: \"smooth\", block: \"center\" });\n elem.focus();\n return elem;\n};\n\nexport const getUIDocElements = (doc: Exclude) => {\n const selectors = doc.type === \"page\" ? doc.pathItem : doc;\n const { selectorCommand, selector = \"\" } = selectors ?? {};\n\n const childSelector = doc.type === \"list\" ? doc.itemSelector : \"\";\n let fullSelector =\n (selectorCommand ? getCommandElemSelector(selectorCommand) : \"\") +\n \" \" +\n selector +\n \" \" +\n childSelector;\n if (!fullSelector.trim() && doc.type === \"page\") {\n fullSelector = \"body\";\n }\n const items = document.querySelectorAll(fullSelector);\n return {\n items,\n fullSelector,\n };\n};\n\nexport const highlightItems = (doc: Exclude) => {\n const listItems = getUIDocElements(doc).items;\n listItems.forEach((el) => {\n el.style.border = \"2px solid var(--text-warning)\";\n });\n return Array.from(listItems);\n};\n\nconst PATH_JOIN_CHARS = [\"/\", \"#\", \"?\"] as const;\nexport const getDocPagePath = (\n doc: Extract,\n pathname: string,\n) => {\n const paths =\n doc.type === \"page\" ?\n [doc.pathItem?.selectorPath, doc.path].filter(isDefined)\n : doc.paths;\n const matchedPage = paths.find((pathWopts) => {\n const path = isObject(pathWopts) ? pathWopts.route : pathWopts;\n const exact = isObject(pathWopts) && pathWopts.exact;\n if (exact) {\n return pathname === path;\n }\n const endChar = pathname[path.length];\n return (\n pathname.startsWith(path) &&\n (!endChar || includes(endChar, PATH_JOIN_CHARS))\n );\n });\n let isOnPage = !!matchedPage;\n let currentPathItem: string | undefined;\n if (matchedPage && doc.type === \"page\" && doc.pathItem) {\n const matchedPagePath =\n isObject(matchedPage) ? matchedPage.route : matchedPage;\n currentPathItem = pathname\n .slice(matchedPagePath.length + 1)\n .split(`/[${PATH_JOIN_CHARS.join(\"\")}]/`)\n .pop();\n isOnPage = isOnPage && !!currentPathItem;\n }\n\n const isExactMatch =\n !isOnPage ? false\n : doc.type === \"navbar\" ? true\n : doc.pathItem ? Boolean(currentPathItem)\n : doc.path === pathname;\n return {\n isOnPage,\n isExactMatch,\n matchedPage,\n paths: paths.map((pathWopts) =>\n isObject(pathWopts) ? pathWopts.route : pathWopts,\n ),\n };\n};\n\nexport const getUIDocElementsAndAlertIfEmpty = (\n doc: UIDocNonInfo,\n addAlert: AlertContext[\"addAlert\"],\n) => {\n const result = getUIDocElements(doc);\n if (!result.items.length && !isPlaywrightTest) {\n addAlert({\n children: [\n `Could not find a ${JSON.stringify(doc.title)} item.`,\n `Selector used: ${JSON.stringify(result.fullSelector)}`,\n ].join(\"\\n\"),\n });\n }\n return result;\n};\n" }, { "path": "client/src/app/UIDocs/UIInstallationUIDoc.ts", "content": "import type { UIDoc } from \"../UIDocs\";\n\nexport const UIInstallation = {\n title: \"Installation\",\n type: \"info\",\n description: \"A guide to help you get started with the application.\",\n docs: `\n The quickest way to start is with Docker. \n If you don't have Docker installed, please follow the official \n Docker installation guide\n \n Download the source code:\n\n \\`\\`\\`bash\n git clone https://github.com/prostgles/ui.git\n cd ui\n \\`\\`\\`\n\n Start the application:\n\n \\`\\`\\`docker-compose.sh\n docker compose up -d --build\n \\`\\`\\` \n \n Once running, Prostgles UI will be available at [localhost:3004](http://localhost:3004)\n\n ### Initial Setup & Authentication\n\n When first launching Prostgles UI, an admin user will be created automatically:\n - If \\`PRGL_USERNAME\\` and \\`PRGL_PASSWORD\\` environment variables are provided, an admin user is created with these credentials. \n - Otherwise, a passwordless admin user is created. \n It gets assigned to the first client that accesses the app. \n Subsequent clients accessing the app will be rejected with an appropriate error message detailing that the passwordless admin user has already been assigned.\n\n To setup multiple users, the passwordless admin user must be converted to a normal admin account by setting up a password.\n This will allow accessing /users page where you can manage users.\n\n Users login using their username and password. Two-factor authentication is provided through TOTP (Time-based One-Time Password) and can be enabled in the account section.\n\n Email and third-party (OAuth) authentication can be configured in Server Settings section. It allows users to register and log in using their email address or third-party accounts like Google, GitHub, etc.\n \n `,\n} satisfies UIDoc;\n" }, { "path": "client/src/app/UIDocs/accountUIDoc.ts", "content": "import { mdiAccountOutline, mdiApplicationBracesOutline } from \"@mdi/js\";\nimport { ROUTES } from \"@common/utils\";\nimport { getDataKeyElemSelector } from \"../../Testing\";\nimport type { UIDocContainers } from \"../UIDocs\";\n\nexport const accountUIDoc = {\n type: \"page\",\n path: ROUTES.ACCOUNT,\n title: \"Account\",\n iconPath: mdiAccountOutline,\n description:\n \"Manage your account settings, security preferences, and API access.\",\n docs: `\n Manage your account settings, security preferences, and API access.\n \n \"Account\n `,\n children: [\n {\n type: \"tab\",\n title: \"Account details\",\n selector: getDataKeyElemSelector(\"details\"),\n description: \"View and update your account information.\",\n children: [\n {\n type: \"smartform\",\n title: \"Account information\",\n description:\n \"View all account details and associated data (workspaces, dashboards, views, etc.)\",\n tableName: \"users\",\n selectorCommand: \"SmartForm\",\n },\n ],\n },\n {\n type: \"tab\",\n title: \"Security\",\n selector: getDataKeyElemSelector(\"security\"),\n description: \"Manage your account security settings.\",\n children: [\n {\n type: \"popup\",\n title: \"Two-factor authentication\",\n description:\n \"Set up and manage two-factor authentication for enhanced security.\",\n selectorCommand: \"Setup2FA.Enable\",\n children: [\n {\n type: \"button\",\n title: \"Generate QR Code\",\n description:\n \"Generate a QR code to set up 2FA with your authenticator app.\",\n selectorCommand: \"Setup2FA.Enable.GenerateQR\",\n },\n {\n type: \"button\",\n title: \"Can't scan QR code\",\n description:\n \"View manual setup instructions if you can't scan the QR code.\",\n selectorCommand: \"Setup2FA.Enable.CantScanQR\",\n },\n {\n type: \"input\",\n inputType: \"text\",\n title: \"Confirm code\",\n description:\n \"Enter the code from your authenticator app to enable 2FA.\",\n selectorCommand: \"Setup2FA.Enable.ConfirmCode\",\n },\n {\n type: \"button\",\n title: \"Enable 2FA\",\n description:\n \"Complete the 2FA setup process by confirming the code.\",\n selectorCommand: \"Setup2FA.Enable.Confirm\",\n },\n {\n type: \"text\",\n title: \"Base64 secret\",\n description:\n \"Manual setup secret key for your authenticator app.\",\n selectorCommand: \"Setup2FA.Enable.Base64Secret\",\n },\n ],\n },\n {\n type: \"button\",\n title: \"Disable 2FA\",\n description: \"Turn off two-factor authentication for your account.\",\n selectorCommand: \"Setup2FA.Disable\",\n },\n {\n type: \"popup\",\n title: \"Change password\",\n description: \"Change your account password.\",\n selectorCommand: \"Account.ChangePassword\",\n children: [],\n },\n {\n type: \"list\",\n title: \"Active sessions\",\n description: \"View and manage your active web sessions.\",\n selectorCommand: \"Sessions\",\n itemContent: [],\n itemSelector: ``,\n },\n ],\n },\n {\n type: \"tab\",\n title: \"API\",\n selector: getDataKeyElemSelector(\"api\"),\n iconPath: mdiApplicationBracesOutline,\n description: \"View and manage your API access settings.\",\n children: [\n {\n type: \"section\",\n title: \"API Details\",\n description: \"View your API credentials and configuration.\",\n selectorCommand: \"config.api\",\n uiVersionOnly: true,\n children: [],\n },\n ],\n },\n ],\n} satisfies UIDocContainers;\n" }, { "path": "client/src/app/UIDocs/commandPaletteUIDoc.ts", "content": "import { getCommandElemSelector } from \"src/Testing\";\nimport type { UIDocContainers } from \"../UIDocs\";\n\nexport const commandPaletteUIDoc = {\n type: \"hotkey-popup\",\n hotkey: [\"Ctrl\", \"K\"],\n title: \"Command Palette\",\n description: \"Go to command/action quickly\",\n docs: `\n Keyboard-driven navigation to different parts of the application without having to browse through menus or panels. \n\n Press Ctrl+K to open the command palette popup. Type to search through the documentation for functionality, settings, and other sections.\n \"Command\n `,\n selectorCommand: \"CommandPalette\",\n children: [\n {\n type: \"input\",\n inputType: \"text\",\n title: \"Search commands input\",\n description: \"Type to search for commands and actions\",\n selector:\n getCommandElemSelector(\"CommandPalette\") +\n \" \" +\n getCommandElemSelector(\"SearchList.Input\"),\n },\n {\n type: \"list\",\n title: \"Search results\",\n description:\n \"List of matching commands and actions. Press Enter to execute/go to the selected command.\",\n selector:\n getCommandElemSelector(\"CommandPalette\") +\n \" \" +\n getCommandElemSelector(\"SearchList.List\"),\n itemSelector: \"[data-key]\",\n itemContent: [],\n },\n ],\n} satisfies UIDocContainers;\n" }, { "path": "client/src/app/UIDocs/connection/AIAssistantUIDoc.ts", "content": "import { mdiMagnify, mdiPlus, mdiStop, mdiTools } from \"@mdi/js\";\nimport { fixIndent } from \"../../../demo/scripts/sqlVideoDemo\";\nimport { getCommandElemSelector } from \"../../../Testing\";\nimport type { UIDocElement } from \"../../UIDocs\";\nimport { DEFAULT_MCP_SERVER_NAMES } from \"@common/mcp\";\n\nexport const AIAssistantUIDoc = {\n type: \"popup\",\n selectorCommand: \"AskLLM\",\n title: \"AI Assistant\",\n description:\n \"Opens an AI assistant to help generate SQL queries, understand database schema, or perform other tasks.\",\n docs: fixIndent(`\n The AI assistant is an intelligent companion that helps you work more efficiently with your PostgreSQL databases. \n It can generate SQL queries, explain database schemas, analyze data patterns, and assist with various database-related tasks through a conversational interface.\n MCP Servers can be used to extend the AI capabilities with custom tools and integrations.\n\n \"AI\n \n Supported AI Providers: OpenAI, Anthropic, Google Gemini, OpenRouter, and Local Models. \n\n *Note: AI providers are configured by administrators in Server Settings > LLM Providers*\n `),\n docOptions: \"asSeparateFile\",\n children: [\n {\n type: \"section\",\n title: \"Header actions\",\n description: \"Actions available in the header of the AI assistant popup.\",\n selector: getCommandElemSelector(\"Popup.header\"),\n children: [\n {\n type: \"smartform-popup\",\n selector: getCommandElemSelector(\"LLMChatOptions.toggle\"),\n title: \"Chat settings\",\n tableName: \"llm_chats\",\n description:\n \"Allows editing all chat settings and data as well deleting or cloning the current chat.\",\n },\n {\n type: \"input\",\n inputType: \"select\",\n selector: getCommandElemSelector(\"LLMChat.select\"),\n title: \"Select chat\",\n description:\n \"Selects a chat from the list of available chats. Each chat represents a separate conversation with the AI assistant.\",\n },\n {\n type: \"button\",\n selector: getCommandElemSelector(\"AskLLMChat.NewChat\"),\n title: \"New chat\",\n description: \"Creates a new chat with the AI assistant.\",\n },\n {\n type: \"button\",\n selector: getCommandElemSelector(\"Popup.toggleFullscreen\"),\n title: \"Toggle fullscreen\",\n description:\n \"Toggles the fullscreen mode for the AI assistant popup.\",\n },\n {\n type: \"button\",\n selector: getCommandElemSelector(\"Popup.close\"),\n title: \"Close popup\",\n description: \"Closes the AI assistant popup.\",\n },\n ],\n },\n {\n type: \"list\",\n title: \"Chat messages\",\n description: \"List of messages in the current chat.\",\n selector: getCommandElemSelector(\"Chat.messageList\"),\n itemContent: [],\n itemSelector: getCommandElemSelector(\"Chat.messageList\") + \" > .message\",\n },\n {\n type: \"section\",\n title: \"Message input\",\n description:\n \"Input field for entering messages to the AI assistant and quick actions.\",\n docs: fixIndent(`\n The message input area allows you to write text, attach files and control other aspects of the AI assistant (change model, add/remove tools, speech to text). \n\n `),\n selector: getCommandElemSelector(\"Chat.sendWrapper\"),\n children: [\n {\n type: \"input\",\n inputType: \"text\",\n title: \"Message input\",\n description:\n \"Input field for entering messages to the AI assistant. Pressing Shift+Enter creates a new line.\",\n selector: getCommandElemSelector(\"Chat.textarea\"),\n },\n {\n type: \"popup\",\n title: \"MCP tools allowed\",\n iconPath: mdiTools,\n description: `Opens the MCP tools menu for the current chat. Default tools: ${DEFAULT_MCP_SERVER_NAMES.join(\", \")}`,\n docs: `\n MCP Servers extend the capabilities of the AI assistant by providing custom tools and integrations.\n `,\n selector: getCommandElemSelector(\"LLMChatOptions.MCPTools\"),\n children: [\n {\n type: \"popup\",\n selector: getCommandElemSelector(\"AddMCPServer.Open\"),\n title: \"Add MCP server\",\n iconPath: mdiPlus,\n description:\n \"Opens the form to add a new MCP server for the current chat.\",\n children: [\n {\n type: \"input\",\n inputType: \"text\",\n title: \"MCP tool json config\",\n description:\n \"JSON configuration for the MCP tool to be added.\",\n selector:\n getCommandElemSelector(\"AddMCPServer\") +\n \" \" +\n getCommandElemSelector(\"MonacoEditor\"),\n },\n {\n type: \"popup\",\n title: \"Add MCP server\",\n description:\n \"Adds the specified MCP server to the current chat.\",\n selector: getCommandElemSelector(\"AddMCPServer.Add\"),\n children: [],\n },\n ],\n },\n {\n type: \"button\",\n title: \"Stop/Start all MCP Servers\",\n description: \"Quick way to stop/restart all MCP servers.\",\n selector: getCommandElemSelector(\n \"MCPServersToolbar.stopAllToggle\",\n ),\n iconPath: mdiStop,\n },\n {\n type: \"button\",\n title: \"Search tools\",\n description:\n \"Searches for specific MCP tools in the list of available tools.\",\n selector: getCommandElemSelector(\"MCPServersToolbar.searchTools\"),\n iconPath: mdiMagnify,\n },\n {\n type: \"list\",\n title: \"MCP tools\",\n iconPath: mdiTools,\n description:\n \"List of available MCP tools. To allow a tool to be used in the current chat it must be ticked. Each tool represents a specific functionality or integration.\",\n selector:\n getCommandElemSelector(\"LLMChatOptions.MCPTools\") +\n \" \" +\n getCommandElemSelector(\"SmartCardList\"),\n itemSelector: \".SmartCard\",\n itemContent: [\n {\n type: \"text\",\n title: \"MCP server name\",\n description:\n \"Name of the parent MCP server associated with the tool.\",\n selector: \"div\",\n },\n {\n type: \"list\",\n title: \"MCP server tools\",\n description:\n \"List of available tools for the selected MCP server. Click to enable or disable a specific tool for the current chat.\",\n selector: getCommandElemSelector(\"MCPServerTools\"),\n itemSelector: \".SmartCard\",\n itemContent: [],\n },\n {\n type: \"popup\",\n title: \"MCP Server Logs\",\n description:\n \"Opens the logs for the selected MCP server, allowing you to view its activity and status.\",\n selector: getCommandElemSelector(\n \"MCPServerFooterActions.logs\",\n ),\n children: [],\n },\n {\n type: \"popup\",\n title: \"MCP Server Config\",\n description:\n \"Opens the configuration for the selected MCP server, allowing you to manage its settings.\",\n selector: getCommandElemSelector(\"MCPServerConfigButton\"),\n children: [\n {\n type: \"button\",\n title: \"Save config\",\n description:\n \"Saves the configuration for the selected MCP server.\",\n selector: getCommandElemSelector(\"MCPServerConfig.save\"),\n },\n ],\n },\n {\n type: \"button\",\n title: \"Reload MCP tools\",\n description:\n \"Reloads the MCP tools for the selected MCP server, updating the list of available tools.\",\n selectorCommand: \"MCPServerFooterActions.refreshTools\",\n },\n {\n type: \"button\",\n title: \"Enable/Disable MCP server\",\n description:\n \"Enables or disables the selected MCP server for all chats. If configuration is required a popup will be shown.\",\n selector: getCommandElemSelector(\n \"MCPServerFooterActions.enableToggle\",\n ),\n },\n ],\n },\n ],\n },\n {\n type: \"smartform-popup\",\n selector: getCommandElemSelector(\"LLMChatOptions.DatabaseAccess\"),\n title: \"Database access\",\n description:\n \"Opens the database access settings for the current chat. This controls how the AI assistant can interact with the current database.\",\n tableName: \"llm_chats\",\n fieldNames: [\"db_data_permissions\", \"db_schema_permissions\"],\n },\n {\n type: \"popup\",\n title: \"Prompt Selector\",\n description:\n \"Opens the prompt details for the current chat, allowing you to manage the prompt template and other related settings.\",\n selector: getCommandElemSelector(\"LLMChatOptions.Prompt\"),\n children: [\n {\n type: \"popup\",\n selectorCommand: \"LLMChatOptions.Prompt.Preview\",\n title: \"Prompt preview\",\n description:\n \"Preview of the prompt with context variables filled in.\",\n children: [],\n },\n ],\n },\n {\n type: \"popup\",\n title: \"LLM Model\",\n description:\n \"Selects the LLM model to be used for the current chat. Different models may have different capabilities and performance. \",\n selector: getCommandElemSelector(\"LLMChatOptions.Model\"),\n children: [\n {\n type: \"button\",\n selector: `${getCommandElemSelector(\"LLMChatOptions.Model\")} .LABELWRAPPER`,\n title: \"Select model\",\n description: \"Selects this LLM model for the current chat.\",\n },\n {\n type: \"smartform-popup\",\n title: \"Add model credentials\",\n description:\n \"Opens the form to add llm provider credentials for the selected LLM model.\",\n selectorCommand: \"LLMChatOptions.Model.AddCredentials\",\n tableName: \"llm_credentials\",\n },\n ],\n },\n {\n type: \"input\",\n inputType: \"file\",\n selectorCommand: \"Chat.addFiles\",\n title: \"Attach files\",\n description:\n \"Attaches files to be sent to the AI assistant along with the message. Supported file types may vary depending on the AI model and configuration.\",\n },\n {\n type: \"popup\",\n title: \"Speech to Text\",\n selectorCommand: \"Chat.speech\",\n description:\n \"Opens the speech-to-text input options, allowing you to send audio recordings or transcribe audio messages to send to the AI assistant. Right click to open speech-to-text settings.\",\n children: [],\n },\n {\n type: \"button\",\n title: \"Send message\",\n description: \"Sends the entered message to the AI assistant.\",\n selector: getCommandElemSelector(\"Chat.send\"),\n },\n ],\n },\n ],\n} satisfies UIDocElement;\n" }, { "path": "client/src/app/UIDocs/connection/config/accessControlUIDoc.ts", "content": "import { mdiAccountMultiple } from \"@mdi/js\";\nimport { fixIndent } from \"../../../../demo/scripts/sqlVideoDemo\";\nimport type { UIDoc } from \"../../../UIDocs\";\n\nexport const accessControlUIDoc = {\n type: \"tab\",\n selectorCommand: \"config.ac\",\n uiVersionOnly: true,\n title: \"Access control\",\n iconPath: mdiAccountMultiple,\n description:\n \"Manage user permissions and access rules for this database connection.\",\n docs: fixIndent(`\n Manage user permissions and access rules for this database connection.\n \"Access\n `),\n docOptions: \"asSeparateFile\",\n children: [\n {\n type: \"button\",\n selectorCommand: \"config.ac.create\",\n title: \"Create Access Rule\",\n description: \"Add a new access control rule to define user permissions.\",\n },\n {\n type: \"button\",\n selectorCommand: \"config.ac.save\",\n title: \"Save Access Rule\",\n description: \"Save changes to the current access control rule.\",\n },\n {\n type: \"button\",\n selectorCommand: \"config.ac.cancel\",\n title: \"Cancel Changes\",\n description: \"Cancel editing the current access control rule.\",\n },\n {\n type: \"button\",\n selectorCommand: \"config.ac.removeRule\",\n title: \"Remove Rule\",\n description: \"Delete the selected access control rule.\",\n },\n ],\n} satisfies UIDoc;\n" }, { "path": "client/src/app/UIDocs/connection/config/apiUIDoc.ts", "content": "import { mdiApplicationBracesOutline } from \"@mdi/js\";\nimport type { UIDocElement } from \"../../../UIDocs\";\n\nexport const apiUIDoc = {\n type: \"tab\",\n selectorCommand: \"config.api\",\n iconPath: mdiApplicationBracesOutline,\n title: \"API\",\n description: \"Configure API access settings and view API documentation.\",\n docs: `\n The API section allows you to configure the API access settings for your application.\n This enables programmatic access to your application's data and functionality via HTTP or WebSocket protocols.\n Generated database types can be used to interact with the API in a type-safe manner through our TypeScript client library.\n Code snippets are provided to help you get started with using the API in your applications.\n You can also manage API tokens for authentication and access control.\n \n You can set the URL path for the API, manage allowed origins for CORS requests, and create or view API tokens for accessing the API. The API supports both WebSocket and HTTP protocols.`,\n docOptions: \"asSeparateFile\",\n children: [\n {\n type: \"input\",\n inputType: \"text\",\n selector: \"input#url_path\",\n title: \"API URL Path\",\n description:\n \"Set the URL path for the API. This is the base path for all API endpoints.\",\n },\n {\n type: \"popup\",\n title: \"Allowed Origin Alert\",\n selectorCommand: \"AllowedOriginCheck\",\n description: \"Will only appear if the allowed origin is not set.\",\n children: [\n {\n type: \"input\",\n inputType: \"text\",\n selectorCommand: \"AllowedOriginCheck.FormField\",\n title: \"Allowed Origin\",\n description:\n \"Set the allowed origin for CORS requests. This controls which domains can make cross-origin requests to this app by setting the Access-Control-Allow-Origin header.\",\n },\n ],\n },\n {\n type: \"popup\",\n selectorCommand: \"APIDetailsWs.Examples\",\n title: \"Websocket API usage examples\",\n description:\n \"View examples of how to use the API using typescript and javascript\",\n children: [],\n },\n {\n type: \"popup\",\n selectorCommand: \"APIDetailsHttp.Examples\",\n title: \"HTTP API usage examples\",\n description:\n \"View examples of how to use the API using typescript and javascript\",\n children: [],\n },\n {\n type: \"section\",\n selectorCommand: \"APIDetailsTokens\",\n title: \"API Tokens\",\n description:\n \"Shows existing API tokens and allows you to create new ones.\",\n children: [\n {\n type: \"popup\",\n selectorCommand: \"APIDetailsTokens.CreateToken\",\n title: \"Create API Token\",\n description:\n \"Create a new API token for accessing the API. Tokens can be used for both WebSocket and HTTP API access.\",\n children: [\n {\n type: \"input\",\n inputType: \"number\",\n selectorCommand:\n \"APIDetailsTokens.CreateToken.daysUntilExpiration\",\n title: \"Expires in (days)\",\n description:\n \"Set the number of days until the token expires. After expiration, the token will no longer be valid.\",\n },\n {\n type: \"button\",\n selectorCommand: \"APIDetailsTokens.CreateToken.generate\",\n title: \"Generate Token\",\n description:\n \"Click to generate a new API token. The token will be displayed once generated. After generation, the code examples will be updated to include the new token.\",\n },\n ],\n },\n ],\n },\n ],\n} satisfies UIDocElement;\n" }, { "path": "client/src/app/UIDocs/connection/config/backupAndRestoreUIDoc.ts", "content": "import { mdiDatabaseSync } from \"@mdi/js\";\nimport type { UIDoc } from \"../../../UIDocs\";\n\nexport const backupAndRestoreUIDoc = {\n type: \"tab\",\n selectorCommand: \"config.bkp\",\n title: \"Backup and Restore\",\n description: \"Manage database backups and restore operations.\",\n docOptions: \"asSeparateFile\",\n iconPath: mdiDatabaseSync,\n docs: `\n Manage database backups and restore operations for this PostgreSQL connection. \n Create reliable backups using PostgreSQL's native tools and restore \n your data when needed.\n\n Backups can be saved to a local file system or to cloud storage to AWS S3.\n Similarly, you can restore backups from local files or from AWS S3.\n\n \"Backup\n `,\n children: [\n {\n type: \"popup\",\n selectorCommand: \"config.bkp.create\",\n title: \"Create Backup\",\n description: \"Start a new database backup operation.\",\n children: [\n {\n type: \"input\",\n inputType: \"text\",\n selectorCommand: \"config.bkp.create.name\",\n title: \"Backup Name\",\n description:\n \"Optional name for the backup to help identify it later.\",\n },\n {\n type: \"select\",\n selectorCommand: \"PGDumpOptions.format\",\n title: \"Backup Format\",\n description:\n \"Choose the backup format: Custom, Plain SQL, Tar, or Directory.\",\n },\n {\n type: \"input\",\n inputType: \"checkbox\",\n selectorCommand: \"PGDumpOptions.schemaOnly\",\n title: \"Schema Only\",\n description: \"Backup only the database schema without data.\",\n },\n {\n type: \"input\",\n inputType: \"checkbox\",\n selectorCommand: \"PGDumpOptions.dataOnly\",\n title: \"Data Only\",\n description: \"Backup only the data without schema.\",\n },\n {\n type: \"select\",\n selectorCommand: \"PGDumpOptions.destination\",\n title: \"Backup Destination\",\n description:\n \"Choose where to save the backup: Local filesystem or AWS S3.\",\n },\n {\n selectorCommand: \"PGDumpOptions.numberOfJobs\",\n type: \"input\",\n inputType: \"number\",\n title: \"Number of Jobs\",\n description:\n \"Specify the number of parallel jobs to use for the backup process.\",\n },\n {\n selectorCommand: \"PGDumpOptions.compressionLevel\",\n type: \"input\",\n inputType: \"number\",\n title: \"Compression Level\",\n description:\n \"Set the compression level for the backup (0-9). Higher values mean better compression but slower performance.\",\n },\n {\n selectorCommand: \"PGDumpOptions.excludeSchema\",\n type: \"input\",\n inputType: \"text\",\n title: \"Exclude Schema\",\n description: \"Specify a schema to exclude from the backup.\",\n },\n {\n selectorCommand: \"PGDumpOptions.noOwner\",\n type: \"input\",\n inputType: \"checkbox\",\n title: \"No Owner\",\n description:\n \"Do not output commands to set ownership of objects to match the original database. Useful when restoring to a different database user.\",\n },\n {\n selectorCommand: \"PGDumpOptions.create\",\n type: \"input\",\n inputType: \"checkbox\",\n title: \"Create\",\n description: \"Include commands to create the database in the backup.\",\n },\n {\n selectorCommand: \"PGDumpOptions.globalsOnly\",\n type: \"input\",\n inputType: \"checkbox\",\n title: \"Globals Only\",\n description:\n \"Backup only global objects such as roles and tablespaces.\",\n },\n {\n selectorCommand: \"PGDumpOptions.rolesOnly\",\n type: \"input\",\n inputType: \"checkbox\",\n title: \"Roles Only\",\n description: \"Backup only roles (users) from the database.\",\n },\n {\n selectorCommand: \"PGDumpOptions.schemaOnly\",\n type: \"input\",\n inputType: \"checkbox\",\n title: \"Schema Only\",\n description: \"Backup only the database schema without data.\",\n },\n {\n selectorCommand: \"PGDumpOptions.encoding\",\n type: \"input\",\n inputType: \"text\",\n title: \"Encoding\",\n description: \"Specify the character encoding to use in the backup.\",\n },\n {\n selectorCommand: \"PGDumpOptions.clean\",\n type: \"input\",\n inputType: \"checkbox\",\n title: \"Clean\",\n description:\n \"Include commands to drop database objects before recreating them.\",\n },\n {\n selectorCommand: \"PGDumpOptions.dataOnly\",\n type: \"input\",\n inputType: \"checkbox\",\n title: \"Data Only\",\n description: \"Backup only the data without schema.\",\n },\n {\n selectorCommand: \"PGDumpOptions.ifExists\",\n type: \"input\",\n inputType: \"checkbox\",\n title: \"If Exists\",\n description:\n \"Use IF EXISTS clauses in the backup to avoid errors when dropping objects that do not exist.\",\n },\n {\n selectorCommand: \"PGDumpOptions.keepLogs\",\n type: \"input\",\n inputType: \"checkbox\",\n title: \"Keep Logs\",\n description: \"Retain log files generated during the backup process.\",\n },\n\n {\n type: \"button\",\n selectorCommand: \"config.bkp.create.start\",\n title: \"Start Backup\",\n description: \"Begin the backup process with the selected options.\",\n },\n ],\n },\n {\n type: \"popup\",\n selectorCommand: \"config.bkp.AutomaticBackups\",\n title: \"Automatic Backups\",\n description: \"Configure scheduled automatic backups for this database.\",\n children: [\n {\n type: \"input\",\n inputType: \"checkbox\",\n selectorCommand: \"config.bkp.AutomaticBackups.toggle\",\n title: \"Enable Automatic Backups\",\n description: \"Enable or disable automatic backup scheduling.\",\n },\n ],\n },\n {\n type: \"section\",\n selectorCommand: \"BackupControls.backupsInProgress\",\n title: \"Backups in Progress\",\n description: \"Monitor and manage ongoing backup operations.\",\n children: [\n {\n selectorCommand: \"BackupLogs\",\n type: \"button\",\n title: \"View Logs\",\n description: \"View real-time logs of the ongoing backup operation.\",\n },\n ],\n },\n {\n selectorCommand: \"BackupsControls.restoreFromFile\",\n type: \"button\",\n title: \"Restore from File\",\n description:\n \"Initiate a database restore operation from a local backup file.\",\n },\n {\n type: \"list\",\n selectorCommand: \"BackupsControls.Completed\",\n title: \"Completed Backups\",\n description: \"View and manage completed backup operations.\",\n itemSelector: `[data-key]`,\n itemContent: [\n {\n type: \"button\",\n selectorCommand: \"BackupsControls.Completed.delete\",\n title: \"Delete Backup\",\n description:\n \"Delete the selected backup file from storage. Will ask for confirmation.\",\n },\n {\n type: \"button\",\n selectorCommand: \"BackupsControls.Completed.download\",\n title: \"Download Backup\",\n description:\n \"Download the selected backup file to your local system.\",\n },\n {\n type: \"button\",\n selectorCommand: \"BackupsControls.Completed.restore\",\n title: \"Restore Backup\",\n description:\n \"Restore a database from a selected backup file. Will ask for confirmation.\",\n },\n ],\n },\n ],\n} satisfies UIDoc;\n" }, { "path": "client/src/app/UIDocs/connection/config/fileStorageUIDoc.ts", "content": "import { mdiImage } from \"@mdi/js\";\nimport type { UIDoc } from \"../../../UIDocs\";\n\nexport const fileStorageUIDoc = {\n type: \"tab\",\n selectorCommand: \"config.files\",\n title: \"File storage\",\n description:\n \"Configure file upload and storage settings for this connection.\",\n docOptions: \"asSeparateFile\",\n iconPath: mdiImage,\n docs: `\n Configure file upload and storage settings for this connection.\n\n \"File\n `,\n children: [\n {\n type: \"input\",\n inputType: \"checkbox\",\n selectorCommand: \"config.files.toggle\",\n title: \"Enable File Storage\",\n description:\n \"Enable file upload and storage capabilities for this connection.\",\n },\n ],\n} satisfies UIDoc;\n" }, { "path": "client/src/app/UIDocs/connection/connectionConfigUIDoc.ts", "content": "import { mdiChartLine, mdiDatabaseCogOutline } from \"@mdi/js\";\nimport { fixIndent, ROUTES } from \"@common/utils\";\nimport type { UIDocContainers } from \"../../UIDocs\";\nimport { editConnectionUIDoc } from \"../editConnectionUIDoc\";\nimport { accessControlUIDoc } from \"./config/accessControlUIDoc\";\nimport { apiUIDoc } from \"./config/apiUIDoc\";\nimport { backupAndRestoreUIDoc } from \"./config/backupAndRestoreUIDoc\";\nimport { fileStorageUIDoc } from \"./config/fileStorageUIDoc\";\n\nexport const connectionConfigUIDoc = {\n type: \"page\",\n path: ROUTES.CONFIG,\n iconPath: mdiDatabaseCogOutline,\n pathItem: {\n tableName: \"connections\",\n selectorCommand: \"Connection.configure\",\n selectorPath: ROUTES.CONNECTIONS,\n },\n title: \"Connection configuration\",\n description:\n \"Configure the selected database connection. Set connection details, manage users, and customize settings.\",\n docs: fixIndent(`\n Configure the selected database connection. Set connection details, manage users, and customize settings.\n \"Connection\n `),\n children: [\n {\n type: \"tab\",\n selectorCommand: \"config.details\",\n title: \"Connection details\",\n description:\n \"Edit connection parameters such as host, port, database name, and other connection settings.\",\n docs: editConnectionUIDoc.docs,\n iconPath: mdiDatabaseCogOutline,\n children: [],\n },\n {\n type: \"tab\",\n selectorCommand: \"config.status\",\n title: \"Status monitor\",\n iconPath: mdiChartLine,\n description:\n \"View real-time connection status, running queries, and system resource usage.\",\n children: [],\n },\n accessControlUIDoc,\n fileStorageUIDoc,\n backupAndRestoreUIDoc,\n apiUIDoc,\n {\n type: \"tab\",\n selectorCommand: \"config.tableConfig\",\n title: \"Table config\",\n description:\n \"Advanced table configuration using TypeScript (experimental feature).\",\n children: [],\n },\n {\n type: \"tab\",\n selectorCommand: \"config.methods\",\n title: \"Server-side functions\",\n description:\n \"Configure and manage server-side functions (experimental feature).\",\n children: [],\n },\n ],\n} satisfies UIDocContainers;\n" }, { "path": "client/src/app/UIDocs/connection/dashboard/dashboardContentUIDoc.ts", "content": "import type { UIDocElement } from \"../../../UIDocs\";\nimport { mapUIDoc } from \"./mapUIDoc\";\nimport { sqlEditorUIDoc } from \"./sqlEditorUIDoc\";\nimport { tableUIDoc } from \"./table/tableUIDoc\";\nimport { timechartUIDoc } from \"./timechartUIDoc\";\n\nexport const dashboardContentUIDoc = {\n type: \"section\",\n selector: \".Dashboard_MainContentWrapper\",\n title: \"Workspace area\",\n description:\n \"Main content area of the dashboard, where the tables, views, SQL editors and other visualisations are displayed.\",\n docs: `\n The workspace area is the main place for interacting with your data. \n It includes the SQL editor, data tables, maps, and timecharts, allowing you to execute queries, visualize data, and manage database objects.`,\n children: [sqlEditorUIDoc, tableUIDoc, mapUIDoc, timechartUIDoc],\n} satisfies UIDocElement;\n" }, { "path": "client/src/app/UIDocs/connection/dashboard/dashboardMenuUIDoc.ts", "content": "import {\n getDataKeyElemSelector,\n getDataLabelElemSelector,\n} from \"../../../../Testing\";\nimport type { UIDocElement } from \"../../../UIDocs\";\n\nexport const dashboardMenuUIDoc = {\n type: \"popup\",\n selectorCommand: \"dashboard.menu\",\n title: \"Dashboard menu\",\n description:\n \"Allows opening tables and views, schema diagram, importing files, managing saved queries, and accessing dashboard settings.\",\n docs: `\n The dashboard menu is the entry point in exploring your database.\n The layout adapts to the screen size by pinning the menu to keep it open when there is enough space. \n For wider screens the centered layout mode can be enabled through the settings. \n\n `,\n contentSelectorCommand: \"DashboardMenuContent\",\n children: [\n {\n type: \"button\",\n selectorCommand: \"dashboard.menu.sqlEditor\",\n title: \"Open an SQL editor\",\n description: \"Opens an SQL editor view in the workspace area.\",\n },\n {\n type: \"popup\",\n selectorCommand: \"dashboard.menu.quickSearch\",\n title: \"Quick search\",\n description:\n \"Opens the quick search menu for searching across all available tables and views from the current database.\",\n children: [],\n },\n {\n type: \"smartform-popup\",\n tableName: \"workspaces\",\n fieldNames: [\"options\"],\n selectorCommand: \"dashboard.menu.settings\",\n title: \"Settings\",\n description:\n \"Opens the settings menu for configuring dashboard layout preferences.\",\n },\n {\n type: \"button\",\n selectorCommand: \"DashboardMenuHeader.togglePinned\",\n title: \"Pin/Unpin menu\",\n description:\n \"Toggles the pinning of the dashboard menu. Pinned menus remain open until unpinned or accessing from a low width screen.\",\n },\n {\n type: \"drag-handle\",\n direction: \"x\",\n title: \"Resize menu\",\n description:\n \"Allows resizing the dashboard menu. Drag to adjust the width of the menu.\",\n selectorCommand: \"dashboard.menu.resize\",\n },\n {\n type: \"drag-handle\",\n direction: \"x\",\n selectorCommand: \"dashboard.centered-layout.resize\",\n title: \"Resize centered layout\",\n description:\n \"Allows resizing the workspace area when centered layout is enabled. Drag to adjust the width of the centered layout.\",\n },\n\n {\n type: \"list\",\n selectorCommand: \"dashboard.menu.savedQueriesList\",\n title: \"Saved queries\",\n description:\n \"List of saved queries of the current user from the current workspace. Click to open a saved query.\",\n itemContent: [],\n itemSelector: \"li\",\n },\n {\n type: \"list\",\n selectorCommand: \"dashboard.menu.tablesSearchList\",\n title: \"Tables and views\",\n description:\n \"List of tables and views from the current database. Click to open a table or view. By default only the tables from the public schema are shown. Schema list from the connection settings controls which schemas are shown.\",\n itemSelector: \"li\",\n itemContent: [],\n },\n {\n type: \"list\",\n selectorCommand: \"dashboard.menu.serverSideFunctionsList\",\n title: \"Server-side functions\",\n description:\n \"List of server-side functions for the current database. Click to open a function.\",\n itemSelector: \"li\",\n itemContent: [],\n },\n {\n type: \"popup\",\n selectorCommand: \"dashboard.menu.create\",\n title: \"Create/Import\",\n description:\n \"Opens the menu for creating new tables, server-side functions or importing csv/json files.\",\n docs: `\n Create new tables, server-side functions or import files into the current database.`,\n children: [\n {\n type: \"popup\",\n selector: getDataKeyElemSelector(\"new table\"),\n title: \"Create new table\",\n description:\n \"Opens the form to create a new table in the current database.\",\n children: [],\n },\n {\n type: \"popup\",\n selector: getDataKeyElemSelector(\"import file\"),\n title: \"Import file\",\n description:\n \"Opens the form to import a file into the current database.\",\n docs: `\n Import files into the current database. Supported file types include CSV, GeoJSON, and JSON.\n The import process allows you to specify the table name, infer column data types, and choose how to insert JSON/GeoJSON data into the table. \n \n \"File\n `,\n docOptions: \"asSeparateFile\",\n childrenTitle: \"Import file options\",\n children: [\n {\n type: \"input\",\n inputType: \"file\",\n selectorCommand: \"FileBtn\",\n title: \"Import file\",\n description:\n \"Input field for selecting a file to import. Supported types: csv/geojson/json.\",\n },\n {\n type: \"input\",\n inputType: \"text\",\n selector: getDataLabelElemSelector(\"Table name\"),\n title: \"Table name\",\n description:\n \"New/existing table name into which data is to be imported.\",\n },\n {\n type: \"input\",\n inputType: \"checkbox\",\n selector: getDataLabelElemSelector(\n \"Try to infer and apply column data types\",\n ),\n title: \"Try to infer and apply column data types\",\n description:\n \"Checkbox for inferring and applying column data types during import. If checked, the system will attempt to determine the appropriate data types for each column based on the imported file. If unchecked, TEXT data type will be used for all columns.\",\n },\n {\n type: \"input\",\n inputType: \"checkbox\",\n selector: getDataLabelElemSelector(\"Drop table if exists\"),\n title: \"Drop table if exists\",\n description:\n \"Checkbox for dropping the table if it already exists in the database. If checked, the existing table will be deleted before importing the new file.\",\n },\n {\n type: \"select\",\n selector: getDataLabelElemSelector(\"Insert as\"),\n title: \"Insert as\",\n description:\n \"Select list for choosing the method of inserting JSON/GeoJSON data into the table. Options include: Single text value, JSONB rows, and Properties with geometry.\",\n },\n {\n type: \"button\",\n selectorCommand: \"FileImporterFooter.import\",\n title: \"Import\",\n description:\n \"Button to initiate the import process. Click to start importing the selected file into the specified table.\",\n },\n ],\n },\n {\n type: \"popup\",\n selector: getDataKeyElemSelector(\"new function\"),\n title: \"Create TS Function\",\n description:\n \"Opens the form to create a new server-side TypeScript function for the current database.\",\n children: [],\n },\n ],\n },\n {\n type: \"popup\",\n selectorCommand: \"SchemaGraph\",\n title: \"Schema diagram\",\n description:\n \"Opens the schema diagram for visualizing the relationships between tables in the current database.\",\n docs: `\n Explore your database structure visually through the schema diagram. This tool lets you:\n - **Select schemas** — Choose one or multiple schemas to display\n - **Navigate freely** — Pan and zoom to focus on specific areas\n - **View table relationships** — See how tables connect through foreign keys\n - **Filter your view** — Show or hide tables and columns by relationship type\n - **Color links by root table** — Trace relationships back to their source at a glance. Links inherit the color of the table that defines the relationship (e.g., all user_id foreign keys match the users table color)\n - **Reset the layout** — Return to the default view which auto-arranges tables ensuring the most linked tables are central\n\n It allows you to explore the schema structure, view table relationships, and manage the layout of the schema diagram.\n You can pan and zoom the diagram, select schemas, filter tables and columns based on their relationship types, reset the layout.\n Link color modes allow you to better understand related tables and foreign key properties.\n \n \"Schema\n\n ## Controls\n `,\n docOptions: \"asSeparateFile\",\n childrenTitle: \"Top controls\",\n children: [\n {\n type: \"select\",\n selectorCommand: \"SchemaGraph.TopControls.tableRelationsFilter\",\n title: \"Table relationship filter\",\n description:\n \"Display tables based on their relationship type. Options include: all, linked (with relationships), orphaned (without relationships).\",\n },\n {\n type: \"select\",\n selectorCommand: \"SchemaGraph.TopControls.columnRelationsFilter\",\n title: \"Column relationship filter\",\n description:\n \"Display columns based on their relationship type. Options include: all, references (with relationships), none (no columns/only table names will be shown).\",\n },\n {\n type: \"select\",\n title: \"Link colour mode\",\n selectorCommand: \"SchemaGraph.TopControls.linkColorMode\",\n description:\n \"Colour links by: default (fixed colour), root table (the colour of the table the relationship tree originates from), on-delete/on-update (colour based on constraint referential action).\",\n },\n {\n type: \"button\",\n selectorCommand: \"SchemaGraph.TopControls.resetLayout\",\n title: \"Reset layout\",\n description:\n \"Moving tables is persisted the state database. Clicking this resets the schema diagram layout to its initial state.\",\n },\n {\n type: \"button\",\n selectorCommand: \"Popup.close\",\n title: \"Close schema diagram\",\n description:\n \"Closes the schema diagram and returns to the dashboard menu.\",\n },\n ],\n },\n ],\n} satisfies UIDocElement;\n" }, { "path": "client/src/app/UIDocs/connection/dashboard/mapUIDoc.ts", "content": "import { fixIndent } from \"../../../../demo/scripts/sqlVideoDemo\";\nimport {\n getCommandElemSelector,\n getDataKeyElemSelector,\n} from \"../../../../Testing\";\nimport type { UIDocElement } from \"../../../UIDocs\";\nimport { getCommonViewHeaderUIDoc } from \"../getCommonViewHeaderUIDoc\";\n\nexport const mapUIDoc = {\n type: \"section\",\n selector: `.SilverGridChild[data-view-type=\"map\"]`,\n title: \"Map view\",\n description:\n \"Displays a map visualization based on the Table/SQL query results.\",\n docOptions: \"asSeparateFile\",\n docs: fixIndent(`\n The map view allows you to visualize geographical data from your database.\n It requires the [PostGIS](https://postgis.net/) extension to be installed on your PostgreSQL database.\n It can display points, lines, and polygons based on geometry or geography columns in your tables or views.\n It supports multiple layers, custom basemaps, and various map controls for interaction.\n\n \"Map\n \n `),\n children: [\n getCommonViewHeaderUIDoc(\n \"Shows the table/view name together with the geometry/geography column name used for the map visualization.\",\n {\n title: \"Map view menu\",\n docs: fixIndent(`\n The map view menu provides options for configuring the map visualization, including data refresh, basemap settings, and layer management.\n \n `),\n description: \"Data refresh and display options.\",\n children: [\n {\n type: \"tab\",\n selector:\n getCommandElemSelector(\"MenuList\") +\n \" \" +\n getDataKeyElemSelector(\"Data refresh\"),\n title: \"Data refresh\",\n description:\n \"Allows setting subscriptions or data refresh rates. By default every table subscribes to data changes.\",\n children: [],\n },\n {\n type: \"tab\",\n selector:\n getCommandElemSelector(\"MenuList\") +\n \" \" +\n getDataKeyElemSelector(\"Basemap\"),\n title: \"Basemap\",\n description: \"Allows setting the map tiles and projection.\",\n children: [\n {\n type: \"select\",\n selectorCommand: \"MapBasemapOptions.Projection\",\n title: \"Projection\",\n description:\n \"Allows setting the map projection: Mercator (default) or Orthographic (allows a setting custom tile image for plan drawings).\",\n },\n ],\n },\n {\n type: \"tab\",\n selector:\n getCommandElemSelector(\"MenuList\") +\n \" \" +\n getDataKeyElemSelector(\"Layers\"),\n title: \"Layers\",\n description:\n \"Allows setting the map layers data source and style. The map supports multiple layers.\",\n children: [],\n },\n {\n type: \"tab\",\n selector:\n getCommandElemSelector(\"MenuList\") +\n \" \" +\n getDataKeyElemSelector(\"Settings\"),\n title: \"Settings\",\n description:\n \"Allows setting the map layout options: aggregation limit, click behavior, etc.\",\n children: [],\n },\n ],\n },\n \"chart\",\n ),\n {\n type: \"section\",\n selector: \".Window\",\n title: \"Map window with controls\",\n description:\n \"Map visualization and controls for interacting with the map.\",\n docs: fixIndent(`\n The map window contains the map visualization and controls for interacting with the map.\n It allows you to add layers, set the map extent behavior, and toggle cursor coordinates display.\n \n `),\n children: [\n {\n type: \"popup\",\n selectorCommand: \"ChartLayerManager\",\n title: \"Map layer manager\",\n description:\n \"Allows adding/removing layers to the map. Each layer can be configured with its own data source and style.\",\n children: [\n {\n type: \"select\",\n selectorCommand: \"ChartLayerManager.AddChartLayer.addLayer\",\n title: \"Add layer\",\n description:\n \"Allows adding a new layer to the map. The available options are all the tables that have geometry or geography columns.\",\n },\n {\n type: \"popup\",\n selectorCommand: \"ChartLayerManager.AddChartLayer.addOSMLayer\",\n title: \"Add OSM layer\",\n description:\n \"Allows adding a new layer based on OpenStreetMap data. This is useful for displaying additional map data like roads, restaurants, etc.\",\n children: [],\n },\n {\n type: \"popup\",\n selectorCommand: \"MapBasemapOptions\",\n title: \"Map basemap options\",\n description: \"Allows setting the map tiles and projection.\",\n children: [],\n },\n {\n selectorCommand: \"MapOpacityMenu\",\n type: \"section\",\n title: \"Map opacity options\",\n description: \"Allows setting the opacity of the map layers.\",\n children: [],\n },\n ],\n },\n {\n type: \"button\",\n selectorCommand: \"InMapControls.showCursorCoords\",\n title: \"Show cursor coordinates\",\n description:\n \"Toggle displays the current cursor coordinates on the map. \",\n },\n {\n type: \"select\",\n selectorCommand: \"MapExtentBehavior\",\n title: \"Map extent behavior\",\n description:\n \"Allows setting the map extent and auto-zoom behavior: Follow data, Follow map or Free roam.\",\n },\n {\n type: \"button\",\n selectorCommand: \"InMapControls.goToDataBounds\",\n title: \"Zoom to data\",\n description:\n \"Zooms the map to fit the bounds of the data currently displayed.\",\n },\n {\n type: \"select\",\n selectorCommand: \"DeckGLFeatureEditor\",\n title: \"Add new feature\",\n description:\n \"Allows drawing and inserting a new feature: Point, Line or Polygon.\",\n },\n ],\n },\n ],\n} satisfies UIDocElement;\n" }, { "path": "client/src/app/UIDocs/connection/dashboard/serverSideFunctionUIDoc.ts", "content": "import { fixIndent } from \"../../../../demo/scripts/sqlVideoDemo\";\nimport type { UIDocElement } from \"../../../UIDocs\";\nimport { getCommonViewHeaderUIDoc } from \"../getCommonViewHeaderUIDoc\";\n\nexport const serverSideFunctionUIDoc = {\n type: \"section\",\n selector: `.SilverGridChild[data-view-type=\"method\"]`,\n title: \"Server-side function view\",\n description: \"Allows executing server-side functions and viewing results.\",\n docs: fixIndent(`\n The server-side functions is an experimental feature that allows you to specify and execute server-side Typescript functions directly from the dashboard.`),\n children: [\n getCommonViewHeaderUIDoc(\n \"Function name.\",\n {\n children: [],\n title: \"Server-side function view menu\",\n description: \"Server-side function menu\",\n docs: fixIndent(`\n The server-side function view menu provides options for executing the function, viewing results, and managing function parameters.\n \n `),\n },\n \"method\",\n ),\n ],\n} satisfies UIDocElement;\n" }, { "path": "client/src/app/UIDocs/connection/dashboard/sqlEditorUIDoc.ts", "content": "import { fixIndent } from \"../../../../demo/scripts/sqlVideoDemo\";\nimport {\n getCommandElemSelector,\n getDataKeyElemSelector,\n} from \"../../../../Testing\";\nimport type { UIDocElement } from \"../../../UIDocs\";\nimport { getCommonViewHeaderUIDoc } from \"../getCommonViewHeaderUIDoc\";\n\nexport const sqlEditorUIDoc = {\n type: \"section\",\n selector: `.SilverGridChild[data-view-type=\"sql\"]`,\n title: \"SQL editor\",\n description:\n \"The SQL editor allows users to write and execute SQL queries against the selected database. It provides a user-friendly interface for interacting with the database.\",\n docs: `\n The SQL editor is a powerful tool for executing SQL queries against your PostgreSQL database. \n\n ### Core Features\n - **Intelligent auto-completion** with context-aware suggestions based on your schema and data with JSONB property access support\n - **Rich suggestion details** with related objects, usage examples and documentation extracts, reducing the need to switch context\n - **Execute current statement** functionality to run only the SQL statement where the cursor is located\n - **Charting options** to visualize query results as timecharts or maps directly from the editor\n - **Multiple result display modes** including table, JSON, and CSV formats\n \n To make it easier working with multiple queries, the default query execution behaviour is to execute the current statement.\n It is highlighted by the blue vertical line to the left of the code. Press Alt+E or Ctrl+Enter or F5 to execute it.\n \n The editor is based on [Monaco Editor](https://microsoft.github.io/monaco-editor/), which powers VS Code. \n It supports multi-cursor editing, find and replace, and many other advanced editing features.\n\n Realtime query resource usage can be enabled in the settings to monitor CPU and memory consumption.\n \n \"SQL\n\n ## Components:\n `,\n docOptions: \"asSeparateFile\",\n children: [\n getCommonViewHeaderUIDoc(\n \"SQL editor query name, editable in the menu.\",\n {\n title: \"SQL editor menu\",\n description:\n \"The SQL editor menu provides access to various options and settings for the SQL editor.\",\n docs: fixIndent(`\n The SQL editor menu provides access to various options and settings for the SQL editor.`),\n children: [\n {\n type: \"tab\",\n selector:\n getCommandElemSelector(\"MenuList\") +\n \" \" +\n getDataKeyElemSelector(\"General\"),\n title: \"General\",\n description: \"General settings for the SQL editor.\",\n children: [\n {\n type: \"input\",\n inputType: \"text\",\n selectorCommand: \"W_SQLMenu.name\",\n title: \"Query name\",\n description:\n \"The name of the current SQL query. This is used for saving and managing queries.\",\n },\n {\n type: \"select\",\n selectorCommand: \"W_SQLMenu.renderDisplayMode\",\n title: \"Result display mode\",\n description:\n \"The mode in which the results of the SQL query will be displayed. Options include table, JSON, and CSV.\",\n },\n {\n type: \"button\",\n selectorCommand: \"W_SQLMenu.saveQuery\",\n title: \"Save query as file\",\n description:\n \"Saves the current SQL query to a file. This can also be accomplished by pressing Ctrl+S.\",\n },\n {\n type: \"button\",\n selectorCommand: \"W_SQLMenu.openSQLFile\",\n title: \"Open SQL file\",\n description:\n \"This allows loading the contents of an SQL file into the current query.\",\n },\n {\n selectorCommand: \"W_SQLMenu.deleteQuery\",\n type: \"button\",\n title: \"Delete query\",\n description:\n \"Deletes the current SQL query. If it has contents a confirmation dialog will appear.\",\n },\n ],\n },\n {\n type: \"tab\",\n selector:\n getCommandElemSelector(\"MenuList\") +\n \" \" +\n getDataKeyElemSelector(\"Editor options\"),\n title: \"Editor options\",\n description:\n \"Settings for the SQL editor's appearance and behavior.\",\n children: [\n {\n type: \"smartform\",\n tableName: \"windows\",\n fieldNames: [\"sql_options\"],\n title: \"Editor settings\",\n selector:\n getCommandElemSelector(\"Popup.content\") + \" .MonacoEditor\",\n description:\n \"Settings for the SQL editor's appearance and behavior. This includes font size, theme, and other preferences.\",\n },\n ],\n },\n {\n type: \"tab\",\n selector:\n getCommandElemSelector(\"MenuList\") +\n \" \" +\n getDataKeyElemSelector(\"Hotkeys\"),\n title: \"Hotkeys\",\n description:\n \"Keyboard shortcuts for common actions in the SQL editor. This includes executing queries, saving files, and more.\",\n children: [],\n },\n ],\n },\n \"sql\",\n ),\n {\n type: \"section\",\n selectorCommand: \"W_SQLEditor\",\n title: \"SQL editor component\",\n description:\n \"The main component for the SQL editor. It contains the SQL editor and statement action buttons. Being bsed on Monaco editor, it supports syntax highlighting, auto-completion and other editing functionality like multi-cursor editing.\",\n children: [\n {\n type: \"input\",\n inputType: \"text\",\n selectorCommand: \"MonacoEditor\",\n title: \"SQL editor input\",\n description:\n \"The input field for writing SQL queries. It supports syntax highlighting and auto-completion.\",\n },\n {\n type: \"button\",\n selectorCommand: \"W_SQLEditor.executeStatement\",\n title: \"Execute current statement\",\n description:\n \"Executes the current SQL statement highlighted by the blue vertical line to the left of the code. This button is only visible when the cursor is within a statement.\",\n },\n {\n type: \"button\",\n selectorCommand: \"AddChartMenu.Timechart\",\n title: \"Add timechart\",\n description:\n \"Adds a timechart visualization based on the current SQL statement. This button is only visible when the cursor is within a statement that returns at least one timestamp column.\",\n },\n {\n type: \"button\",\n selectorCommand: \"AddChartMenu.Map\",\n title: \"Add map\",\n description:\n \"Adds a map visualization based on the current SQL statement. This button is only visible when the cursor is within a statement that returns at least one geometry/geography column (postgis extension must be enabled).\",\n },\n ],\n },\n {\n type: \"section\",\n title: \"SQL editor toolbar\",\n description:\n \"The toolbar provides various options for executing and managing SQL queries.\",\n selectorCommand: \"W_SQLBottomBar\",\n children: [\n {\n type: \"button\",\n selectorCommand: \"W_SQLBottomBar.runQuery\",\n title: \"Run query\",\n description:\n \"Executes the current SQL query. The result will be displayed in the query results section.\",\n },\n {\n selectorCommand: \"W_SQLBottomBar.limit\",\n title: \"Limit\",\n type: \"input\",\n inputType: \"number\",\n description:\n \"Sets the maximum number of rows to return in the query results. This is useful for limiting the amount of data returned, especially for large datasets.\",\n },\n {\n type: \"button\",\n selectorCommand: \"W_SQLBottomBar.cancelQuery\",\n title: \"Cancel query\",\n description:\n \"Cancels the currently running query. This button is only visible when a query is running.\",\n },\n {\n type: \"button\",\n selectorCommand: \"W_SQLBottomBar.terminateQuery\",\n title: \"Terminate query\",\n description:\n \"Forcefully terminates the currently running query. This is more aggressive than cancel and is only visible when a query is running.\",\n },\n {\n type: \"button\",\n selectorCommand: \"W_SQLBottomBar.stopListen\",\n title: \"Stop LISTEN\",\n description:\n \"Stops the active LISTEN operation. This button is only visible when a LISTEN query is active.\",\n },\n {\n type: \"text\",\n selectorCommand: \"W_SQLBottomBar.rowCount\",\n title: \"Row count\",\n description:\n \"Displays the number of rows fetched by the query and the total number of rows if available.\",\n },\n {\n type: \"button\",\n selectorCommand: \"W_SQLBottomBar.toggleTable\",\n title: \"Toggle table visibility\",\n description:\n \"Shows or hides the results table for the executed query.\",\n },\n {\n type: \"button\",\n selectorCommand: \"W_SQLBottomBar.toggleCodeEditor\",\n title: \"Toggle code editor\",\n description:\n \"Shows or hides the SQL code editor, allowing users to focus on query results when needed.\",\n },\n {\n type: \"button\",\n selectorCommand: \"W_SQLBottomBar.toggleNotices\",\n title: \"Toggle notices\",\n description:\n \"Shows or hides database notices. When enabled, it displays notifications from the database system.\",\n },\n {\n type: \"section\",\n selectorCommand: \"W_SQLBottomBar.queryDuration\",\n title: \"Query duration\",\n children: [],\n description:\n \"Displays the execution time of the last completed query or the current running time for an active query.\",\n },\n {\n type: \"select\",\n selectorCommand: \"W_SQLBottomBar.copyResults\",\n title: \"Copy results\",\n description:\n \"Copy/download query results as: CSV, TSV, JSON, Typescript definition, SQL SELECT INTO\",\n },\n {\n type: \"text\",\n selectorCommand: \"W_SQLBottomBar.sqlError\",\n title: \"SQL error\",\n description:\n \"Displays any errors that occurred during the execution of the SQL query. This is useful for debugging and correcting SQL syntax.\",\n },\n ],\n },\n {\n type: \"section\",\n selectorCommand: \"W_SQLResults\",\n title: \"Query results\",\n description:\n \"Displays the results of the executed SQL query. Results can be displayed as a table (default), JSON or CSV. Users can interact with the results, such as sorting and filtering.\",\n children: [\n {\n type: \"section\",\n selector: \".table-component\",\n title: \"Results table\",\n description:\n \"The results table displays the data returned by the executed SQL query. It supports sorting, filtering, and pagination.\",\n children: [],\n },\n {\n type: \"section\",\n selectorCommand: \"Window.ChildChart\",\n title: \"Chart\",\n description: \"Timechart/Map visualization of the SQL query results.\",\n children: [],\n },\n ],\n },\n ],\n} satisfies UIDocElement;\n" }, { "path": "client/src/app/UIDocs/connection/dashboard/table/addColumnMenuUIDoc.ts", "content": "import type { UIDoc } from \"src/app/UIDocs\";\nimport { getCommandElemSelector } from \"src/Testing\";\n\nexport const addColumnMenuUIDoc = {\n type: \"popup\",\n selectorCommand: \"AddColumnMenu\",\n title: \"Add column menu\",\n description:\n \"Opens the add column menu, allowing users to add computed columns, create new columns, add linked fields.\",\n children: [\n {\n type: \"popup\",\n selector: `${getCommandElemSelector(\"AddColumnMenu\")} [data-key=\"Computed\"]`,\n contentSelectorCommand: \"QuickAddComputedColumn\",\n title: \"Add Computed Field\",\n description:\n \"Opens a popup to create a computed column - calculations or transformations based on existing data using functions like aggregations, date formatting, string operations, etc.\",\n children: [\n {\n type: \"list\",\n selectorCommand: \"FunctionSelector\",\n title: \"Function selector\",\n description:\n \"Choose a function to apply to the selected column (e.g., aggregates (min/max/avg/count), date formatting, string operations).\",\n itemContent: [],\n itemSelector: `li[role=\"option\"]`,\n },\n {\n type: \"list\",\n selectorCommand: \"SearchList.List\",\n title: \"Column selection\",\n description:\n \"List of applicable columns to apply functions to. Columns from foreign tables are also shown with the join path in the header.\",\n itemSelector: \"li\",\n itemContent: [],\n },\n {\n type: \"input\",\n inputType: \"text\",\n selectorCommand: \"AddComputedColMenu.name\",\n title: \"Column name\",\n description:\n \"Name for the new computed column. Auto-generated based on the function and column.\",\n },\n {\n type: \"select\",\n selectorCommand: \"AddComputedColMenu.addTo\",\n title: \"Add to position\",\n description:\n \"Choose whether to add the computed column at the start or end of the column list.\",\n },\n {\n type: \"button\",\n selectorCommand: \"AddComputedColMenu.addBtn\",\n title: \"Add computed column\",\n description:\n \"Confirms and adds the new computed column to the table based on the selected function and parameters.\",\n },\n ],\n },\n {\n type: \"popup\",\n selector: `${getCommandElemSelector(\"AddColumnMenu\")} [data-key=\"Referenced\"]`,\n contentSelectorCommand: \"LinkedColumn\",\n title: \"Add Linked Data\",\n description:\n \"Opens a popup to display data from related tables via foreign key relationships. Disabled if no foreign keys exist or when using aggregates with nested columns.\",\n\n children: [\n {\n type: \"select\",\n selectorCommand: \"JoinPathSelectorV2\",\n title: \"Join path selector\",\n description:\n \"Select which related table to join to via foreign key relationships. Shows available join paths from the current table.\",\n },\n {\n type: \"input\",\n inputType: \"text\",\n selector: \"#nested-col-name\",\n title: \"Column label\",\n description:\n \"Custom name/label for this linked column field in the table. Defaults to the related table name.\",\n },\n {\n type: \"select\",\n selectorCommand: \"LinkedColumn.ColumnList.toggle\",\n title: \"Linked column selection\",\n description:\n \"Choose which columns from the related table to display in this linked field.\",\n },\n {\n type: \"select\",\n selectorCommand: \"QuickAddComputedColumn\",\n title: \"Quick add computed column\",\n description:\n \"Add a single computed column from the linked table. E.g., count, sum, avg.\",\n },\n {\n type: \"section\",\n selector: \".ExpandSection\",\n title: \"More options\",\n description:\n \"Additional configuration for linked columns including layout, join type, filters, and limits.\",\n children: [\n {\n type: \"select\",\n selector: \"LinkedColumn.layoutType\",\n title: \"Layout mode\",\n description:\n \"Choose how to display the linked data: as rows, columns, or without headers.\",\n },\n {\n type: \"select\",\n selectorCommand: \"LinkedColumn.joinType\",\n title: \"Join type\",\n description:\n \"Select between inner join (discards parent rows without matches) or left join (keeps all parent rows).\",\n },\n {\n type: \"input\",\n inputType: \"number\",\n selector: \"#nested-col-limit\",\n title: \"Limit\",\n description:\n \"Maximum number of linked records to display (0-30). Optional.\",\n },\n {\n type: \"section\",\n selectorCommand: \"SmartFilterBar\",\n title: \"Filters and sorting\",\n description:\n \"Apply filters and sorting to the linked table data.\",\n children: [],\n },\n ],\n },\n ],\n },\n {\n type: \"popup\",\n selector: `${getCommandElemSelector(\"AddColumnMenu\")} [data-key=\"Create\"]`,\n title: \"Create New Column\",\n description:\n \"Opens a popup to create a new physical column in the database table. Disabled for views or users without SQL privileges.\",\n children: [\n {\n type: \"section\",\n selectorCommand: \"ColumnEditor.name\",\n title: \"Column editor\",\n description:\n \"Configure column properties including name, data type, constraints, default values, and foreign key references.\",\n children: [],\n },\n {\n type: \"select\",\n selectorCommand: \"AddColumnReference\",\n title: \"Foreign key reference\",\n description:\n \"Optionally set up a foreign key relationship to another table/column in the database.\",\n },\n {\n type: \"select\",\n selectorCommand: \"ColumnEditor.dataType\",\n title: \"Data type selection\",\n description:\n \"Appears after typing the column name. Choose the data type for the new column (e.g., integer, text, date, boolean, etc.).\",\n },\n {\n type: \"tab\",\n selectorCommand: \"CreateColumn.next\",\n title: \"Show create column SQL\",\n description:\n \"Generates and displays the SQL query that will be executed to create the new column in the database.\",\n children: [\n {\n type: \"input\",\n inputType: \"text\",\n selectorCommand: \"MonacoEditor\",\n title: \"Generated SQL query\",\n description:\n \"The generated ALTER TABLE SQL query to create the new column based on the specified properties.\",\n },\n {\n type: \"button\",\n selectorCommand: \"SQLSmartEditor.Run\",\n title: \"Execute create column\",\n description:\n \"Runs the generated ALTER TABLE query to create the new column in the database.\",\n },\n ],\n },\n ],\n },\n {\n type: \"popup\",\n selector: `${getCommandElemSelector(\"AddColumnMenu\")} [data-key=\"CreateFileColumn\"]`,\n title: \"Create New File Column\",\n description:\n \"Opens a popup to create a new column for handling file uploads and attachments. Requires file storage to be enabled.\",\n children: [\n {\n type: \"input\",\n inputType: \"text\",\n selector: `[data-label=\"New column name\"] input`,\n title: \"New column name\",\n description: \"Name for the new file column.\",\n },\n {\n type: \"input\",\n inputType: \"checkbox\",\n selector: \".SwitchToggle\",\n title: \"Optional\",\n description:\n \"Whether the file column should allow NULL values (optional) or require a file (NOT NULL).\",\n },\n {\n type: \"section\",\n selectorCommand: \"FileColumnConfigEditor\",\n title: \"File column configuration\",\n description:\n \"Configure accepted file types and other file handling options. Appears after entering the column name.\",\n children: [\n {\n type: \"input\",\n title: \"Maximum file size in megabytes\",\n inputType: \"number\",\n selectorCommand: \"FileColumnConfigEditor.maxFileSizeMB\",\n description:\n \"Set the maximum allowed file size for uploads in megabytes. Default is 1 MB. 0 means no limit.\",\n },\n {\n type: \"select\",\n selectorCommand: \"FileColumnConfigEditor.contentMode\",\n title: \"Content filter mode\",\n description:\n \"Choose how to filter accepted files: by file extension, basic content type (e.g., image, audio, vide), by specific content type (e.g., image/png), by specific extension (jpg, png, pdf).\",\n },\n ],\n },\n {\n type: \"button\",\n selectorCommand: \"CreateFileColumn.confirm\",\n title: \"Create file column\",\n description: \"Confirms and creates the new file column.\",\n },\n ],\n },\n ],\n} satisfies UIDoc;\n" }, { "path": "client/src/app/UIDocs/connection/dashboard/table/columnMenuUIDoc.ts", "content": "import type { UIDoc } from \"src/app/UIDocs\";\nimport { getDataKeyElemSelector } from \"src/Testing\";\n\nexport const columnMenuUIDoc = {\n type: \"popup\",\n title: \"Column menu\",\n triggerMode: \"contextmenu\",\n selector: `[role=\"columnheader\"]`,\n description:\n \"Opens the column menu, allowing users to change styling, render mode, view quick stats and other column related options.\",\n children: [\n {\n type: \"tab\",\n title: \"Sort\",\n description:\n \"Sort the table data based on the values in this column, either in ascending or descending order. Table can also be sorted by multiple columns by holding shift while clicking column headers.\",\n selector: getDataKeyElemSelector(\"Sort\"),\n children: [],\n },\n {\n type: \"tab\",\n title: \"Style\",\n description:\n \"Customize the appearance of this column, including text color and cell background. You can also set conditional formatting rules to highlight specific data patterns.\",\n selector: getDataKeyElemSelector(\"Style\"),\n children: [],\n },\n {\n type: \"tab\",\n title: \"Display format\",\n description:\n \"Choose how the data in this column is displayed, such as date formats, number formats, or custom render modes.\",\n selector: getDataKeyElemSelector(\"Display format\"),\n children: [],\n },\n {\n type: \"button\",\n title: \"Filter\",\n description:\n \"Open the filter panel to set up filters based on this column's values, helping you to quickly narrow down the data displayed in the table.\",\n selector: getDataKeyElemSelector(\"Filter\"),\n },\n {\n type: \"tab\",\n title: \"Quick stats\",\n description:\n \"View quick statistics about the data in this column, such as count, unique values, and distribution.\",\n selector: getDataKeyElemSelector(\"Quick stats\"),\n children: [\n {\n type: \"section\",\n title: \"Column Quick Stats\",\n description:\n \"The Column Quick Stats panel provides a summary of key statistics for the selected column, including distinct count, min/max values, and value distribution. You can also sort the distribution and add filters directly from this panel.\",\n selectorCommand: \"ColumnQuickStats\",\n children: [\n {\n type: \"button\",\n title: \"Add filter\",\n description:\n \"Add a filter based on the selected value from top values list.\",\n selectorCommand: \"ColumnQuickStats.addFilter\",\n },\n ],\n },\n ],\n },\n {\n type: \"tab\",\n title: \"Columns\",\n description:\n \"Shortcut to the column management panel to add, remove, or rearrange columns in the table.\",\n selector: getDataKeyElemSelector(\"Columns\"),\n children: [],\n },\n {\n type: \"tab\",\n title: \"Add Computed Column\",\n description:\n \"Add a computed field based on calculations or transformations of existing data in this column.\",\n selector: getDataKeyElemSelector(\"Add Computed Column\"),\n children: [],\n },\n {\n type: \"tab\",\n title: \"Apply function\",\n description:\n \"Apply a function to the data in this column, such as aggregations, string manipulations, or date transformations.\",\n selector: getDataKeyElemSelector(\"Apply function\"),\n children: [],\n },\n {\n type: \"tab\",\n title: \"Add Linked Columns\",\n description:\n \"Add linked data from related tables based on foreign key relationships.\",\n selector: getDataKeyElemSelector(\"Add Linked Columns\"),\n children: [],\n },\n {\n type: \"tab\",\n title: \"Alter\",\n description:\n \"Alter the column's properties, such as data type, default value, or constraints.\",\n selector: getDataKeyElemSelector(\"Alter\"),\n children: [],\n },\n {\n type: \"button\",\n title: \"Hide\",\n description:\n \"Hide this column from the table view without deleting it, allowing you to focus on the most relevant data.\",\n selector: getDataKeyElemSelector(\"Hide\"),\n },\n {\n type: \"button\",\n title: \"Hide Others\",\n description:\n \"Hide all other columns except this one, providing a focused view of the data in this column.\",\n selector: getDataKeyElemSelector(\"Hide Others\"),\n },\n ],\n} satisfies UIDoc;\n" }, { "path": "client/src/app/UIDocs/connection/dashboard/table/paginationUIDoc.ts", "content": "import type { UIDocElement } from \"../../../../UIDocs\";\n\nexport const paginationUIDoc: UIDocElement = {\n selectorCommand: \"Pagination\",\n type: \"section\",\n title: \"Pagination Controls\",\n description: \"Navigation controls for paginated data.\",\n children: [\n {\n selectorCommand: \"Pagination.firstPage\",\n type: \"button\",\n title: \"First Page\",\n description: \"Navigate to the first page of results.\",\n },\n {\n selectorCommand: \"Pagination.prevPage\",\n type: \"button\",\n title: \"Previous Page\",\n description: \"Navigate to the previous page of results.\",\n },\n {\n selectorCommand: \"Pagination.page\",\n type: \"input\",\n inputType: \"number\",\n title: \"Page Number\",\n description:\n \"Current page number. You can type a specific page number to jump directly to that page.\",\n },\n {\n selectorCommand: \"Pagination.nextPage\",\n type: \"button\",\n title: \"Next Page\",\n description: \"Navigate to the next page of results.\",\n },\n {\n selectorCommand: \"Pagination.lastPage\",\n type: \"button\",\n title: \"Last Page\",\n description: \"Navigate to the last page of results.\",\n },\n {\n selectorCommand: \"Pagination.pageSize\",\n type: \"select\",\n title: \"Page Size\",\n description:\n \"Select how many rows to display per page. Changing this may adjust the current page if it would exceed the total number of pages.\",\n },\n {\n selectorCommand: \"Pagination.pageCountInfo\",\n type: \"text\",\n title: \"Page Count Information\",\n description:\n \"Displays the total number of pages and rows in the current dataset.\",\n },\n ],\n};\n" }, { "path": "client/src/app/UIDocs/connection/dashboard/table/smartFilterBarUIDoc.ts", "content": "import { fixIndent } from \"../../../../../demo/scripts/sqlVideoDemo\";\nimport { getDataKeyElemSelector } from \"../../../../../Testing\";\nimport type { UIDocElement } from \"../../../../UIDocs\";\n\nexport const smartFilterBarUIDoc = {\n type: \"section\",\n selectorCommand: \"SmartFilterBar\",\n title: \"Table Toolbar\",\n description:\n \"Filtering and data add/edit interface for database tables and views.\",\n docs: fixIndent(`\n Table toolbar can be toggled through the show/hide filtering button (top left corner). \n It provides a user-friendly interface to add filters, search for data, and perform various actions on the table data.\n \n \"Smart\n `),\n children: [\n {\n type: \"popup\",\n selectorCommand: \"SmartAddFilter\",\n title: \"Add Filter\",\n description:\n \"Allows adding a filter by chosing a column from the current table or from linked tables.\",\n children: [\n {\n type: \"button\",\n selectorCommand: \"SmartAddFilter.toggleIncludeLinkedColumns\",\n title: \"Include Linked Columns\",\n description:\n \"Toggle to include columns from linked tables in the column list.\",\n },\n {\n type: \"button\",\n selectorCommand: \"SmartAddFilter.JoinTo\",\n title: \"Join To\",\n description:\n \"Toggles join view to specify which tables a join path to a specific table from which to select a column to filter by.\",\n },\n {\n type: \"list\",\n selector: \".SearchList\",\n title: \"Filterable Columns\",\n description:\n \"List of columns available for filtering. Click to add a filter.\",\n itemSelector: \"li\",\n itemContent: [],\n },\n ],\n },\n {\n type: \"section\",\n selectorCommand: \"SearchList\",\n title: \"Search Bar\",\n description: \"Quick search functionality across the table data.\",\n children: [\n {\n type: \"input\",\n inputType: \"text\",\n selector: \".SmartSearch input\",\n title: \"Search\",\n description:\n \"Type to search across all searchable fields in the table. The search is a simple contains search. Selecting a result will add a filter to the table.\",\n },\n {\n type: \"button\",\n selectorCommand: \"SearchList.MatchCase\",\n title: \"Match Case\",\n description:\n \"Toggle to match the case of the search term with the data.\",\n },\n ],\n },\n {\n type: \"section\",\n selector: \".SmartFilterBarRightActions\",\n title: \"Table actions\",\n description: \"Additional table data actions.\",\n children: [\n {\n type: \"button\",\n selectorCommand: \"SmartFilterBar.rightOptions.show\",\n title: \"Show additional actions\",\n description:\n \"Opens a menu with additional actions for the table data.\",\n },\n {\n selectorCommand: \"SmartFilterBar.rightOptions.delete\",\n type: \"popup\",\n title: \"Delete action\",\n description:\n \"Opens a menu to delete the selected rows from the table.\",\n children: [],\n },\n {\n selectorCommand: \"SmartFilterBar.rightOptions.update\",\n type: \"popup\",\n title: \"Update action\",\n description: \"Opens a menu to update the selected rows in the table.\",\n children: [],\n },\n {\n selectorCommand: \"dashboard.window.rowInsertTop\",\n type: \"popup\",\n title: \"Insert row\",\n description:\n \"Opens the row insert menu, allowing users to add new rows to the table.\",\n children: [],\n },\n ],\n },\n {\n type: \"section\",\n title: \"Filters\",\n description: \"Filters applied to the data\",\n selector: getDataKeyElemSelector(\"where\"),\n children: [],\n },\n {\n type: \"section\",\n title: \"Having Filters\",\n description: \"Filters applied after aggregation (HAVING clause in SQL).\",\n selector: getDataKeyElemSelector(\"having\"),\n children: [],\n },\n ],\n} satisfies UIDocElement;\n" }, { "path": "client/src/app/UIDocs/connection/dashboard/table/smartFormUIDoc.ts", "content": "import type { UIDocElement } from \"src/app/UIDocs\";\nimport { getCommandElemSelector } from \"src/Testing\";\n\nexport const smartFormUIDoc: UIDocElement = {\n type: \"popup\",\n selectorCommand: \"dashboard.window.viewEditRow\",\n title: \"View/edit data\",\n description:\n \"Opens the row card, allowing users to view/edit/delete the selected row.\",\n docOptions: { title: \"Row card\" },\n docs: `\n Smart form is an intelligent, auto-generated form system that adapts to your database schema.\n It provides a user-friendly interface for inserting and updating data with automatic validation,\n foreign key handling, and support for complex data types.\n\n \"SmartForm\n\n ## Features\n - **Auto-generated fields** based on table schema\n - **Data type validation** (text, numbers, dates, JSON, etc.)\n - **Foreign key support** with searchable dropdowns\n - **File upload** for media and document columns\n - **Linked data management** - insert related records inline\n - **JSON/JSONB editor** with syntax highlighting\n - **Geometry/Geography** support for spatial data\n - **Array types** with dynamic add/remove\n - **Default values** and constraints enforcement\n - **Required field** indicators\n - **Custom field rendering** based on column configuration\n\n ## Field Types\n - Text inputs (single/multi-line)\n - Number inputs (integer, decimal)\n - Date/Time/Timestamp pickers\n - Boolean checkboxes\n - Select dropdowns (enums, foreign keys)\n - File upload fields\n - JSON/JSONB editors\n - Geometry/Geography mappers\n - Array editors\n \n `,\n children: [\n {\n type: \"section\",\n selector: \".W_SmartForm\",\n title: \"Smart Form\",\n description:\n \"The smart form displays the details of a single row from the table, allowing users to view and edit the data in a structured format.\",\n children: [\n {\n selectorCommand: \"SmartForm.header.tableIconAndName\",\n type: \"section\",\n title: \"Table icon in header\",\n children: [],\n description:\n \"Table icon and table name. Table icon is configurable through the table menu settings.\",\n },\n {\n selectorCommand: \"SmartForm.header.previousRow\",\n type: \"button\",\n title: \"Previous row button\",\n description:\n \"Navigate to the previous row in the dataset. Only shown for tables with primary key. Disabled when there is no previous row available.\",\n },\n {\n selectorCommand: \"SmartForm.header.nextRow\",\n type: \"button\",\n title: \"Next row button\",\n description:\n \"Navigate to the next row in the dataset. Only shown for tables with primary key. Disabled when there is no next row available.\",\n },\n {\n selectorCommand: \"Popup.toggleFullscreen\",\n type: \"button\",\n title: \"Fullscreen toggle button\",\n description:\n \"Toggles the fullscreen mode of the SmartForm popup for an expanded view.\",\n },\n {\n selectorCommand: \"Popup.close\",\n type: \"button\",\n title: \"Close button\",\n description: \"Closes the SmartForm popup without saving any data.\",\n },\n {\n type: \"section\",\n selector: \".form-field\",\n title: \"Form field\",\n description:\n \"Each form field represents a column from the table, displaying the column name and the corresponding value for the selected row. Users can edit the value if the field is editable.\",\n children: [\n {\n type: \"section\",\n selector: \"label\",\n children: [],\n title: \"Field label\",\n description: \"Displays the name of the column.\",\n },\n {\n type: \"section\",\n selector: \".form-field__right-content-wrapper\",\n title: \"Field input area\",\n description:\n \"The input area where users can view and edit the value of the column. The input type varies based on the column's data type.\",\n children: [],\n },\n {\n type: \"section\",\n selector: \".FormFieldHint\",\n title: \"Field hint\",\n description:\n \"Additional information or guidance about the field, displayed below the input area.\",\n children: [],\n },\n {\n selectorCommand: \"ViewMoreSmartCardList\",\n type: \"popup\",\n title: \"View more linked records\",\n description:\n \"For foreign key fields a 'View more' button appears to open a detailed list of all linked records in a separate popup. This is useful to browse and search all columns from the referenced table.\",\n children: [],\n },\n {\n type: \"popup\",\n selectorCommand: \"SmartFormFieldOptions.NestedInsert\",\n title: \"Insert linked record\",\n description:\n \"If the column is a foreign key a 'Insert new record' button will appear on hover which allows inserting data into the referenced table. Useful when the desired value does not exist yet (foreign key columns only show existing values).\",\n children: [],\n },\n {\n selectorCommand: \"FormField.clear\",\n type: \"button\",\n title: \"Clear field value button\",\n description:\n \"Clear the current value of the field, resetting it to null. Only shown if the field is nullable and the user is allowed to update it.\",\n },\n ],\n },\n {\n selectorCommand: \"JoinedRecords\",\n type: \"list\",\n title: \"Joined records section\",\n description:\n \"If the current table has other tables referencing it via foreign keys, a section will appear at the bottom of the form showing lists of those related records. This allows users to view and manage data that is linked to the current row.\",\n itemSelector: getCommandElemSelector(\"JoinedRecords.Section\"),\n itemContent: [\n {\n selectorCommand: \"JoinedRecords.SectionToggle\",\n type: \"button\",\n title: \"Toggle joined records section\",\n description:\n \"Expand or collapse the joined records section to show or hide the list of related records.\",\n },\n {\n selectorCommand: \"ViewMoreSmartCardList\",\n type: \"popup\",\n title: \"View more joined records\",\n description:\n \"Open a detailed list of all joined records in a separate popup. Useful to browse and search all columns from the joined table.\",\n children: [],\n },\n {\n selectorCommand: \"JoinedRecords.AddRow\",\n type: \"popup\",\n title: \"Add joined record\",\n description:\n \"Open the SmartForm to insert a new joined record into the related table, automatically linking it to the current row.\",\n children: [],\n },\n {\n selectorCommand: \"Section.toggleFullscreen\",\n type: \"button\",\n title: \"Toggle fullscreen mode\",\n description:\n \"Expand the section to fullscreen for better visibility and interaction with the joined records.\",\n },\n ],\n },\n ],\n },\n ],\n};\n" }, { "path": "client/src/app/UIDocs/connection/dashboard/table/tableMenuUIDoc.ts", "content": "import { fixIndent } from \"../../../../../demo/scripts/sqlVideoDemo\";\nimport {\n getCommandElemSelector,\n getDataKeyElemSelector,\n} from \"../../../../../Testing\";\nimport type { UIDocElement } from \"../../../../UIDocs\";\n\nexport const tableMenuUIDoc = {\n selectorCommand: \"dashboard.window.menu\",\n type: \"popup\",\n title: \"Table menu\",\n description: \"Opens the table menu, allowing users to manage the table view.\",\n docs: fixIndent(`\n The table menu provides options for managing the table view, including viewing table info, editing columns, and managing data refresh rates.\n `),\n children: [\n {\n type: \"tab\",\n selector: getDataKeyElemSelector(\"Table info\"),\n title: \"Table info\",\n description: \"Postgres specific table/view details.\",\n children: [\n {\n type: \"section\",\n selectorCommand: \"W_TableMenu_TableInfo.name\",\n title: \"Table name\",\n description:\n \"Displays the name of the table with option to rename it.\",\n children: [\n {\n type: \"button\",\n selector: `${getCommandElemSelector(\"W_TableMenu_TableInfo.name\")} button`,\n title: \"Edit name\",\n description: \"Opens SQL editor to rename the table.\",\n },\n ],\n },\n {\n type: \"section\",\n selectorCommand: \"W_TableMenu_TableInfo.comment\",\n title: \"Comment\",\n description: \"Displays and allows editing of the table comment.\",\n children: [\n {\n type: \"button\",\n selector: `${getCommandElemSelector(\"W_TableMenu_TableInfo.comment\")} button`,\n title: \"Edit comment\",\n description: \"Opens SQL editor to modify the table comment.\",\n },\n ],\n },\n {\n type: \"text\",\n selectorCommand: \"W_TableMenu_TableInfo.oid\",\n title: \"OID\",\n description:\n \"Displays the object identifier of the table in the database.\",\n },\n {\n type: \"text\",\n selectorCommand: \"W_TableMenu_TableInfo.type\",\n title: \"Type\",\n description: \"Shows whether this is a table or view.\",\n },\n {\n type: \"text\",\n selectorCommand: \"W_TableMenu_TableInfo.owner\",\n title: \"Owner\",\n description: \"Displays the database user who owns this table/view.\",\n },\n {\n type: \"section\",\n selectorCommand: \"W_TableMenu_TableInfo.sizeInfo\",\n title: \"Size information\",\n description: \"Provides details about the table's size and row count.\",\n children: [\n {\n type: \"text\",\n selector: `${getCommandElemSelector(\"W_TableMenu_TableInfo.sizeInfo\")} [label=\"Actual Size\"]`,\n title: \"Actual Size\",\n description: \"The physical size of the table data on disk.\",\n },\n {\n type: \"text\",\n selector: `${getCommandElemSelector(\"W_TableMenu_TableInfo.sizeInfo\")} [label=\"Index Size\"]`,\n title: \"Index Size\",\n description:\n \"The size of all indexes associated with this table.\",\n },\n {\n type: \"text\",\n selector: `${getCommandElemSelector(\"W_TableMenu_TableInfo.sizeInfo\")} [label=\"Total Size\"]`,\n title: \"Total Size\",\n description: \"The combined size of table data and indexes.\",\n },\n {\n type: \"text\",\n selector: `${getCommandElemSelector(\"W_TableMenu_TableInfo.sizeInfo\")} [label=\"Row count\"]`,\n title: \"Row count\",\n description: \"The total number of rows in the table.\",\n },\n ],\n },\n {\n type: \"text\",\n selectorCommand: \"W_TableMenu_TableInfo.viewDefinition\",\n title: \"View definition\",\n description:\n \"Shows the SQL definition for views. Only visible for views, not tables.\",\n },\n {\n type: \"button\",\n selectorCommand: \"W_TableMenu_TableInfo.vacuum\",\n title: \"Vacuum\",\n description:\n \"Performs garbage collection and optionally analyzes the database. Only available for tables.\",\n },\n {\n type: \"button\",\n selectorCommand: \"W_TableMenu_TableInfo.vacuumFull\",\n title: \"Vacuum Full\",\n description:\n \"Performs a more thorough vacuum that can reclaim more space but takes longer and locks the table. Only available for tables.\",\n },\n {\n type: \"button\",\n selectorCommand: \"W_TableMenu_TableInfo.drop\",\n title: \"Drop\",\n description:\n \"Deletes the table or view from the database after confirmation.\",\n },\n ],\n },\n {\n type: \"tab\",\n selector: getDataKeyElemSelector(\"Columns\"),\n title: \"Columns\",\n description: \"Allows editing, reordering and toggling table columns.\",\n children: [\n {\n type: \"list\",\n selector: getCommandElemSelector(\"SearchList.List\"),\n title: \"Columns list\",\n description: \"Allows editing, reordering and toggling table columns.\",\n itemSelector: \"li\",\n itemContent: [\n {\n type: \"popup\",\n selectorCommand: \"W_TableMenu_ColumnList.alter\",\n title: \"Alter column\",\n description: \"Opens a popup to edit the column properties.\",\n children: [],\n },\n {\n type: \"popup\",\n selectorCommand: \"W_TableMenu_ColumnList.linkedColumnOptions\",\n title: \"Edit linked field\",\n description: \"Opens a popup to edit the linked field properties.\",\n children: [],\n },\n {\n type: \"button\",\n selectorCommand: \"W_TableMenu_ColumnList.removeComputedColumn\",\n title: \"Remove computed column\",\n description:\n \"Removes a computed column from the table. Only visible for computed columns.\",\n },\n ],\n },\n ],\n },\n {\n type: \"tab\",\n selector: getDataKeyElemSelector(\"Data refresh\"),\n title: \"Data refresh\",\n description:\n \"Allows setting subscriptions or data refresh rates. By default every table subscribes to data changes.\",\n children: [],\n },\n {\n type: \"tab\",\n selector: getDataKeyElemSelector(\"Triggers\"),\n title: \"Triggers\",\n description: \"Allows managing triggers. \",\n children: [],\n },\n {\n type: \"tab\",\n selector: getDataKeyElemSelector(\"Constraints\"),\n title: \"Constraints\",\n description: \"Allows managing constraints.\",\n children: [],\n },\n {\n type: \"tab\",\n selector: getDataKeyElemSelector(\"Indexes\"),\n title: \"Indexes\",\n description: \"Allows managing indexes.\",\n children: [],\n },\n {\n type: \"tab\",\n selector: getDataKeyElemSelector(\"Policies\"),\n title: \"Policies\",\n description: \"Allows managing policies.\",\n children: [],\n },\n {\n type: \"tab\",\n selector: getDataKeyElemSelector(\"Access rules\"),\n title: \"Access rules\",\n description: \"Allows managing prostgles access rules.\",\n children: [],\n },\n {\n type: \"tab\",\n selector: getDataKeyElemSelector(\"Current query\"),\n title: \"Current query\",\n description:\n \"Allows viewing the SQL and data/layout info for the current table view.\",\n children: [],\n },\n {\n type: \"tab\",\n selector: getDataKeyElemSelector(\"Display options\"),\n title: \"Display options\",\n description: \"Layout preferences.\",\n children: [],\n },\n ],\n} satisfies UIDocElement;\n" }, { "path": "client/src/app/UIDocs/connection/dashboard/table/tableUIDoc.ts", "content": "import { fixIndent } from \"src/demo/scripts/sqlVideoDemo\";\nimport type { UIDocElement } from \"../../../../UIDocs\";\nimport { getCommonViewHeaderUIDoc } from \"../../getCommonViewHeaderUIDoc\";\nimport { paginationUIDoc } from \"./paginationUIDoc\";\nimport { smartFilterBarUIDoc } from \"./smartFilterBarUIDoc\";\nimport { tableMenuUIDoc } from \"./tableMenuUIDoc\";\nimport { addColumnMenuUIDoc } from \"./addColumnMenuUIDoc\";\nimport { columnMenuUIDoc } from \"./columnMenuUIDoc\";\nimport { smartFormUIDoc } from \"./smartFormUIDoc\";\n\nexport const tableUIDoc = {\n type: \"section\",\n selector: `.SilverGridChild[data-view-type=\"table\"]`,\n title: \"Table view\",\n description: \"Allows interacting with a table/view from the database.\",\n docs: fixIndent(`\n The table view allows you to explore, filter, and edit your Postgres data with ease.\n Instantly sort and search, build computed columns, pull in linked data through automatic joins, and create charts, maps, and cross-filtered views in a couple of clicks.\n With smart forms for row editing, rich column controls, and deep schema-aware features, the table view turns your database into an interactive workspace for analysis, tooling, and rapid iteration.\n\n \n ## Features\n\n - **Smart filtering**: Use the smart filter bar to quickly filter your data based on column types and values.\n - **Computed columns**: Add calculations or transformations of existing data.\n - **Automatic joins**: Show related data from linked tables with automatic joins and summarise if needed.\n - **Charts and maps**: Timechart and map visualisations with multi-layer support.\n - **Cross-filtered views**: Create additional table or chart views that are cross-filtered by the current table.\n - **Smart forms**: Edit rows using smart forms that adapt to your schema and data types.\n - **Conditional styling**: Style your columns based on row data.\n\n \"Table\n \n ## Components\n `),\n docOptions: \"asSeparateFile\",\n children: [\n getCommonViewHeaderUIDoc(\n \"The name of the table/view together with the number of records matching the current filters. \",\n tableMenuUIDoc,\n \"table\",\n ),\n smartFilterBarUIDoc,\n {\n type: \"section\",\n selector: \".W_Table\",\n title: \"Table\",\n description:\n \"The main table view displaying the data from the database. It allows users to interact with the data, including sorting, filtering, and editing.\",\n children: [\n {\n type: \"section\",\n selectorCommand: \"TableHeader\",\n title: \"Table header\",\n description:\n \"The header of the table, which contains the column names and allows users to sort the data by clicking on the column headers.\",\n children: [\n addColumnMenuUIDoc,\n columnMenuUIDoc,\n {\n type: \"button\",\n selector: `[role=\"columnheader\"]`,\n title: \"Column header\",\n description:\n \"Pressing the header will toggle sorting state (if the column is sortable). Right clicking (or long press on mobile) will open column menu. Dragging the header will allow reordering the columns.\",\n },\n {\n type: \"drag-handle\",\n direction: \"x\",\n selectorCommand: \"TableHeader.resizeHandle\",\n title: \"Resize column\",\n description:\n \"Allows users to resize the column width by dragging the handle.\",\n },\n smartFormUIDoc,\n {\n selectorCommand: \"dashboard.window.rowInsert\",\n type: \"popup\",\n title: \"Insert row\",\n description:\n \"Opens the row insert menu, allowing users to add new rows to the table.\",\n children: [],\n },\n ],\n },\n ],\n },\n paginationUIDoc,\n ],\n} satisfies UIDocElement;\n" }, { "path": "client/src/app/UIDocs/connection/dashboard/timechartUIDoc.ts", "content": "import { fixIndent } from \"../../../../demo/scripts/sqlVideoDemo\";\nimport { getCommandElemSelector } from \"../../../../Testing\";\nimport type { UIDocElement } from \"../../../UIDocs\";\nimport { getCommonViewHeaderUIDoc } from \"../getCommonViewHeaderUIDoc\";\n\nexport const timechartUIDoc = {\n type: \"section\",\n selector: `.SilverGridChild[data-view-type=\"timechart\"]`,\n title: \"Timechart view\",\n description: \"Displays a timechart based on the Table/SQL query results.\",\n docs: `\n The timechart view allows you to visualize time-series data from your database.\n It supports multiple layers, each with its own data source and style.\n You can add filters to the timechart to narrow down the data displayed.\n\n \"Timechart\n \n ## Components\n `,\n docOptions: \"asSeparateFile\",\n children: [\n getCommonViewHeaderUIDoc(\n \"Shows the table/view name together with the number of records matching the current filters.\",\n {\n description: \"Timechart view menu\",\n children: [],\n title: \"Timechart view menu\",\n docs: fixIndent(`\n The timechart view menu provides options for configuring the timechart.\n `),\n },\n \"chart\",\n ),\n {\n type: \"section\",\n selector: \".Window\",\n title: \"Chart area with controls\",\n description: \"Timechart visualization.\",\n children: [\n {\n type: \"popup\",\n selectorCommand: \"ChartLayerManager\",\n title: \"Layer manager\",\n description:\n \"Allows adding/removing layers from the chart. Each layer can be configured with its own data source and style.\",\n children: [\n {\n type: \"list\",\n selector: \".ChartLayerManager_LayerList\",\n title: \"Layer list\",\n itemSelector: \".ChartLayerManager_LayerList > .LayerQuery\",\n itemContent: [\n {\n type: \"popup\",\n title: \"Layer color picker\",\n selectorCommand: \"LayerColorPicker\",\n description:\n \"Allows setting the color for the layer. The color can be set for each column in the layer.\",\n children: [],\n },\n {\n selector: `[title=\"Table name\"]`,\n type: \"text\",\n title: \"Table name\",\n description:\n \"The name of the table used for the layer. This is the table that contains the data for the layer.\",\n },\n {\n type: \"popup\",\n selectorCommand: \"TimeChartLayerOptions.aggFunc\",\n title: \"Aggregation options\",\n description:\n \"Allows setting the y-axis options for the layer.\",\n children: [\n {\n type: \"select\",\n selectorCommand: \"TimeChartLayerOptions.aggFunc.select\",\n title: \"Aggregation function\",\n description:\n \"Selects the aggregation function to be used for the layer. The available options are: Sum, Average, Min, Max, Count.\",\n },\n {\n type: \"select\",\n selectorCommand: \"TimeChartLayerOptions.numericColumn\",\n title: \"Aggregation column\",\n description:\n \"Selects the numeric column to be used for the aggregation function. \",\n },\n {\n type: \"select\",\n selectorCommand: \"TimeChartLayerOptions.groupBy\",\n title: \"Group by\",\n description:\n \"Selects the column to group the data by. This is will create a line for each group by value.\",\n },\n {\n selectorCommand: \"Popup.close\",\n type: \"button\",\n title: \"Close\",\n description: \"Closes the aggregation function popup.\",\n },\n ],\n },\n {\n selectorCommand: \"ChartLayerManager.toggleLayer\",\n type: \"button\",\n title: \"Toggle layer on/off\",\n description:\n \"Toggles the visibility of the layer on the chart. This allows you to hide or show the layer without removing it.\",\n },\n {\n selectorCommand: \"ChartLayerManager.removeLayer\",\n type: \"button\",\n title: \"Remove layer\",\n description:\n \"Removes the layer from the chart. This will delete the layer and its configuration.\",\n },\n ],\n description:\n \"Displays the list of layers currently added to the chart. \",\n },\n {\n type: \"select\",\n selectorCommand: \"ChartLayerManager.AddChartLayer.addLayer\",\n title: \"Add layer\",\n description:\n \"Allows adding a new layer to the chart. The available options are all the tables that have date or timestamp columns.\",\n },\n ],\n },\n {\n type: \"button\",\n selectorCommand: \"W_TimeChart.resetExtent\",\n title: \"Reset extent\",\n description:\n \"Resets the chart to the default extent, showing all data points. Visible when the chart was paned or zoomed.\",\n },\n {\n type: \"list\",\n selector: \".W_TimeChartLayerLegend\",\n title: \"Layer legend\",\n itemSelector: \".W_TimeChartLayerLegend_Item\",\n itemContent: [],\n description:\n \"Displays the layers currently added to the chart. Quick access to changing the layer color, aggregation type and group by.\",\n },\n {\n type: \"button\",\n selectorCommand: \"W_TimeChart.AddTimeChartFilter\",\n title: \"Add/Edit time filter\",\n description:\n \"Allows adding a time filter to the timechart. This will filter the data points based on the selected time range.\",\n },\n {\n type: \"canvas\",\n selector: getCommandElemSelector(\"W_TimeChart\") + \" > .Canvas\",\n title: \"Timechart canvas\",\n description:\n \"Zoomable and pannable canvas that displays the timechart. It shows the data points based on the selected layers and filters. Clicking on a point will add a filter with that time bucket.\",\n },\n ],\n },\n ],\n} satisfies UIDocElement;\n" }, { "path": "client/src/app/UIDocs/connection/dashboardUIDoc.ts", "content": "import { mdiMonitorDashboard } from \"@mdi/js\";\nimport { ROUTES } from \"@common/utils\";\nimport { getCommandElemSelector } from \"../../../Testing\";\nimport type { UIDocContainers } from \"../../UIDocs\";\nimport { AIAssistantUIDoc } from \"./AIAssistantUIDoc\";\nimport { dashboardContentUIDoc } from \"./dashboard/dashboardContentUIDoc\";\nimport { dashboardMenuUIDoc } from \"./dashboard/dashboardMenuUIDoc\";\n\nexport const dashboardUIDoc = {\n type: \"page\",\n path: ROUTES.CONNECTIONS,\n pathItem: {\n tableName: \"connections\",\n selectorCommand: \"Connection.openConnection\",\n },\n title: \"Connection dashboard\",\n description: \"Database exploration and management interface\",\n iconPath: mdiMonitorDashboard,\n docs: `\n The connection dashboard is your command center for exploring and managing your Postgres database. \n Open tables, run SQL, visualize schema relationships, switch workspaces, and launch tools—all in one flexible, customizable workspace.\n With quick search, saved queries, AI-powered assistance, and instant access to every database object, the dashboard gives you a fast, intuitive way to navigate your data and build the tools you need.\n \n ## Features\n \n - **Unified workspace**: View tables, SQL editors, charts, and tools together in a flexible layout. Save and switch between different layouts and sets of opened views for different tasks or projects.\n - **AI Assistant**: Generate SQL, explore data, and get help directly within the dashboard.\n - **Flexible layout**: Drag, resize, and arrange views in a tiled layout to create a workspace that fits your needs.\n - **Global search**: Search across all tables, views, and functions in a single, fast search bar.\n - **Schema diagram**: Visualize relationships between tables and schemas to better understand your database structure.\n - **Import data**: Easily import data from CSV/JSON files into your database tables.\n\n \"Connection\n\n ## Components\n `,\n childrenTitle: \"Dashboard elements\",\n children: [\n dashboardMenuUIDoc,\n {\n type: \"button\",\n title: \"Dashboard menu toggle\",\n description:\n \"Opens or closes the dashboard menu unless the menu is pinned.\",\n selectorCommand: \"dashboard.menu\",\n },\n {\n type: \"link\",\n title: \"Go to configuration\",\n description: \"Opens the configuration page for the selected connection.\",\n selectorCommand: \"dashboard.goToConnConfig\",\n path: ROUTES.CONFIG,\n pathItem: {\n tableName: \"connections\",\n },\n },\n {\n type: \"input\",\n inputType: \"select\",\n title: \"Change connection\",\n description: \"Switch to a different database connection.\",\n selectorCommand: \"ConnectionSelector\",\n },\n {\n type: \"select\",\n title: \"Workspaces\",\n description:\n \"List of available workspaces for the selected connection. Each workspace stores opened views and their layout.\",\n selectorCommand: \"WorkspaceMenu.list\",\n },\n {\n type: \"popup\",\n selectorCommand: \"WorkspaceMenuDropDown\",\n title: \"Workspaces menu\",\n description:\n \"Opens the workspaces menu, allowing you to create, manage, and switch between workspaces.\",\n docs: `\n Workspaces are a powerful feature that allows you to organize your work within a connection.\n The opened views and their layout is saved to the workspace, so you can switch between different sets of data and configurations without losing your progress.\n\n The workspaces menu provides access to all available workspaces for the selected connection. You can create new workspaces, switch between existing ones, and manage workspace settings.\n Each workspace allows you to work with a separate set of data and configurations, making it easier to organize your work and collaborate with others.\n The menu also includes options to clone existing workspaces and delete them if they are no longer needed.\n `,\n children: [\n {\n type: \"list\",\n title: \"Workspaces\",\n description:\n \"List of available workspaces. Click to switch to a different workspace.\",\n selector: getCommandElemSelector(\"WorkspaceMenu.SearchList\") + \" ul\",\n itemSelector: \"li\",\n itemContent: [\n {\n type: \"popup\",\n selectorCommand: \"WorkspaceDeleteBtn\",\n title: \"Delete workspace\",\n description: \"Opens the delete workspace confirmation dialog\",\n children: [\n {\n type: \"button\",\n title: \"Delete workspace\",\n description:\n \"Confirms the deletion of the selected workspace.\",\n selectorCommand: \"WorkspaceDeleteBtn.Confirm\",\n },\n ],\n },\n {\n type: \"button\",\n selectorCommand: \"WorkspaceMenu.CloneWorkspace\",\n title: \"Clone workspace\",\n description:\n \"Creates a copy of the selected workspace with a new name.\",\n },\n {\n selectorCommand: \"WorkspaceSettings\",\n type: \"smartform-popup\",\n tableName: \"workspaces\",\n title: \"Workspace settings\",\n description:\n \"Opens the settings for the selected workspace, allowing you to manage its properties.\",\n },\n ],\n },\n {\n type: \"popup\",\n title: \"Create new workspace\",\n description:\n \"Opens the form to create a new workspace for the selected connection.\",\n selectorCommand: \"WorkspaceMenuDropDown.WorkspaceAddBtn\",\n children: [\n {\n type: \"input\",\n title: \"Workspace name\",\n description: \"Name of the new workspace.\",\n selector: getCommandElemSelector(\"WorkspaceAddBtn\") + \" input\",\n inputType: \"text\",\n },\n {\n type: \"button\",\n title: \"Create workspace\",\n description:\n \"Create and switch to the new workspace with the specified name.\",\n selectorCommand: \"WorkspaceAddBtn.Create\",\n },\n ],\n },\n {\n type: \"button\",\n selectorCommand: \"WorkspaceMenu.toggleWorkspaceLayoutMode\",\n title: \"Toggle layout mode\",\n description:\n \"Switches between fixed and editable layout modes for the current workspace. Fixed mode locks the layout, preventing it from being changed by the user.\",\n },\n ],\n },\n dashboardContentUIDoc,\n AIAssistantUIDoc,\n {\n type: \"popup\",\n selectorCommand: \"Feedback\",\n title: \"Feedback\",\n description:\n \"Opens the feedback form, allowing you to provide feedback about the application.\",\n children: [],\n },\n {\n type: \"link\",\n selectorCommand: \"dashboard.goToConnections\",\n title: \"Go to Connections\",\n description: \"Opens the connections list page.\",\n path: ROUTES.CONNECTIONS,\n },\n ],\n} satisfies UIDocContainers;\n" }, { "path": "client/src/app/UIDocs/connection/getCommonViewHeaderUIDoc.ts", "content": "import { isDefined } from \"../../../utils/utils\";\nimport type { UIDocElement } from \"../../UIDocs\";\n\nexport const getCommonViewHeaderUIDoc = (\n titleContentDescription: string,\n menu: {\n description: string;\n children: UIDocElement[];\n docs: string;\n title: string;\n },\n viewType: \"table\" | \"sql\" | \"chart\" | \"method\",\n): UIDocElement => ({\n type: \"section\",\n selector: \".silver-grid-item-header\",\n title: \"Header section\",\n description:\n \"Contains menu button, title and window minimise/fullscreen controls.\",\n children: (\n [\n viewType === \"chart\" ? undefined : (\n {\n type: \"section\",\n selectorCommand: \"Window.W_QuickMenu\",\n title: \"Quick actions\",\n description:\n \"Quick actions for the view, providing easy access to charting and joins.\",\n children: (\n [\n viewType === \"sql\" ? undefined : (\n {\n selectorCommand: \"dashboard.window.toggleFilterBar\",\n type: \"button\",\n title: \"Toggle filter bar\",\n description:\n \"Shows or hides the filter bar, allowing users to filter the data displayed in the table.\",\n }\n ),\n viewType === \"sql\" ? undefined : (\n {\n selectorCommand: \"Window.W_QuickMenu.addCrossFilteredTable\",\n type: \"button\",\n title: \"Add cross-filtered table\",\n description:\n \"Adds a new table view that is cross-filtered by the current table. This allows you to explore related data in a new table view.\",\n }\n ),\n\n {\n type: \"button\",\n selectorCommand: \"AddChartMenu.Timechart\",\n title: \"Add timechart\",\n description:\n viewType === \"sql\" ?\n \"Adds a timechart visualization based on the current SQL statement. Visible only when the last executed statement returned at least one timestamp column.\"\n : \"Adds a timechart visualization based on the current table. Visible only when the current table (or any linked table) has a timestamp/date column.\",\n },\n {\n type: \"button\",\n selectorCommand: \"AddChartMenu.Map\",\n title: \"Add map\",\n description:\n viewType === \"sql\" ?\n \"Adds a map visualization based on the current SQL statement. Visible only when the last executed statement returned at least one geometry/geography column (postgis extension must be enabled).\"\n : \"Adds a map visualization based on the current data. Visible only when the current table (or any linked table) has a geometry/geography column (postgis extension must be enabled).\",\n },\n ] satisfies (UIDocElement | undefined)[]\n ).filter(isDefined),\n }\n ),\n {\n type: \"drag-handle\",\n direction: \"x\",\n selector: \".silver-grid-item-header--title\",\n title: \"View title. Drag to re-arrange layout\",\n description: titleContentDescription,\n },\n {\n selectorCommand: \"dashboard.window.collapse\",\n type: \"button\",\n title: \"Collapse the view\",\n description:\n \"Collapses the view, minimizing it to temporarily save space on the dashboard. \",\n },\n {\n selectorCommand: \"dashboard.window.fullscreen\",\n type: \"button\",\n title: \"Fullscreen\",\n description: \"Expands the view to fill the entire screen.\",\n },\n {\n selectorCommand: \"dashboard.window.close\",\n type: \"button\",\n title: \"Remove view\",\n description:\n viewType === \"sql\" ?\n \"Removes the SQL editor from the dashboard. If there are unsaved changes, a confirmation dialog will appear.\"\n : \"Removes the view from the dashboard.\",\n },\n viewType !== \"chart\" ? undefined : (\n {\n type: \"section\",\n selectorCommand: \"Window.ChildChart.toolbar\",\n title: \"Chart toolbar\",\n description:\n \"Toolbar for the chart view if not detached. By default, newly charts added will appear over the originating table/sql editor view. They can be detached to a separate window.\",\n children: [\n {\n type: \"popup\",\n selectorCommand: \"dashboard.window.chartMenu\",\n title: \"Chart menu\",\n description: \"Menu for the chart view.\",\n children: [],\n },\n {\n selectorCommand: \"dashboard.window.collapseChart\",\n title: \"Collapse chart\",\n type: \"button\",\n description:\n \"Collapses the chart window, minimizing it to save space on the dashboard. It can then be restored by clicking the chart icon in the SQL editor top left quick actions section.\",\n },\n {\n selectorCommand: \"dashboard.window.detachChart\",\n title: \"Detach chart\",\n type: \"button\",\n description:\n \"Detaches the chart from the parent view, allowing it to be moved and resized independently. It keeps the connection the originating table view to cross filter it.\",\n },\n {\n selectorCommand: \"dashboard.window.closeChart\",\n title: \"Close chart\",\n type: \"button\",\n description:\n \"Closes the chart view, returning to the originatine table/sql editor view.\",\n },\n ],\n }\n ),\n {\n selectorCommand: \"dashboard.window.menu\",\n type: \"popup\",\n ...menu,\n },\n ] satisfies (UIDocElement | undefined)[]\n ).filter(isDefined),\n});\n" }, { "path": "client/src/app/UIDocs/connectionsUIDoc.ts", "content": "import { ROUTES } from \"@common/utils\";\nimport { mdiDatabasePlusOutline, mdiFilter, mdiServerNetwork } from \"@mdi/js\";\nimport { getCommandElemSelector, getDataKeyElemSelector } from \"../../Testing\";\nimport type { UIDocContainers, UIDocElement } from \"../UIDocs\";\nimport { editConnectionUIDoc } from \"./editConnectionUIDoc\";\n\nconst newOwnerOrUserOptions = [\n {\n type: \"input\",\n inputType: \"checkbox\",\n title: \"Create database owner\",\n description:\n \"If checked, a new owner will be created for the database. Useful for ensuring the database is owned by a non-superuser account.\",\n selectorCommand: \"ConnectionServer.withNewOwnerToggle\",\n },\n {\n title: \"New Owner Name\",\n description: \"The name of the new owner.\",\n selectorCommand: \"ConnectionServer.NewUserName\",\n type: \"input\",\n inputType: \"text\",\n },\n {\n selectorCommand: \"ConnectionServer.NewUserPassword\",\n title: \"New Owner Password\",\n description: \"The password of the new owner.\",\n inputType: \"text\",\n type: \"input\",\n },\n {\n type: \"section\",\n selectorCommand: \"ConnectionServer.NewUserPermissionType\",\n title: \"New Owner Permission Type\",\n description:\n \"Apart from Owner it is possible to create a user with reduced permission types (SELECT/UPDATE/DELETE/INSERT).\",\n children: [],\n },\n] satisfies UIDocElement[];\n\nexport const connectionsUIDoc = {\n type: \"page\",\n path: ROUTES.CONNECTIONS,\n title: \"Connections\",\n iconPath: mdiServerNetwork,\n description:\n \"Manage your database connections. View, add, or edit connections to your databases.\",\n docs: `\n The Connections page serves as the central hub within Prostgles UI for managing all your PostgreSQL database connections. \n From here, you can add and open connections, modify existing ones, and gain an immediate overview of their status and associated workspaces. \n\n \"Connections \n \n`,\n childrenTitle: \"Connection controls\",\n children: [\n {\n type: \"link\",\n title: \"New connection\",\n iconPath: mdiDatabasePlusOutline,\n description: \"Opens the form to add a new database connection.\",\n selectorCommand: \"Connections.new\",\n path: ROUTES.NEW_CONNECTION,\n docs: `\n Use the **New Connection** button to add a new database connection.\n \n This will open a form where you can enter the connection details such as host, port, database name, user, and password.\n \n \"New\n `,\n childrenTitle: \"New connection form fields\",\n docOptions: { title: \"Adding a connection\" },\n pageContent: editConnectionUIDoc.children,\n },\n {\n type: \"popup\",\n title: \"Display options\",\n description:\n \"Customize how the list of connections is displayed (e.g., show/hide state database, show database names).\",\n selectorCommand: \"ConnectionsOptions\",\n iconPath: mdiFilter,\n docOptions: \"hideChildren\",\n children: [\n {\n type: \"input\",\n title: \"Show state connection\",\n description:\n \"If checked, displays the internal 'Prostgles UI state' connection which stores application metadata and dashboard data.\",\n selectorCommand: \"ConnectionsOptions.showStateDatabase\",\n inputType: \"checkbox\",\n },\n {\n type: \"input\",\n title: \"Show database names\",\n description:\n \"If checked, displays the specific database name along with the connection name.\",\n selectorCommand: \"ConnectionsOptions.showDatabaseNames\",\n inputType: \"checkbox\",\n },\n ],\n },\n {\n type: \"list\",\n title: \"Connection list\",\n description: \"Controls to open and manage your database connections.\",\n docs: `\n The connection list displays all your database connections grouped by database host, port and user.\n \n \"Connections\n `,\n selector: getCommandElemSelector(\"Connections\") + \" .Connections_list\",\n itemSelector: \".Connection\",\n childrenTitle: \"Connection actions\",\n itemContent: [\n {\n type: \"link\",\n selectorCommand: \"Connection.openConnection\",\n path: ROUTES.CONNECTIONS,\n title: \"Open connection\",\n description:\n \"Opens the selected connection dashboard on the default workspace.\",\n pathItem: {\n tableName: \"connections\",\n },\n },\n {\n type: \"popup\",\n selectorCommand: \"ConnectionServer.add\",\n title: \"Add new database\",\n description: \"Adds a new connection to the selected server. \",\n children: [\n {\n type: \"popup\",\n selectorCommand: \"ConnectionServer.add.newDatabase\",\n title: \"Create new database\",\n description: \"Create a new database within the server.\",\n docs: `\n Allows you to create a new database in the selected server.\n It will use the first connection details from the group connection.\n If no adequate account is found (no superuser or rolcreatedb), it will be greyed out with with an appropriate explanation tooltip text.\n\n `,\n childrenTitle: \"New database options\",\n children: [\n {\n type: \"input\",\n title: \"Database Name\",\n description: \"The name of the new database.\",\n inputType: \"text\",\n selectorCommand: \"ConnectionServer.NewDbName\",\n },\n {\n type: \"select\",\n title: \"Sample Schemas\",\n description:\n \"Select a sample schema to create the database with.\",\n selectorCommand: \"ConnectionServer.SampleSchemas\",\n },\n ...newOwnerOrUserOptions,\n {\n selectorCommand: \"ConnectionServer.add.confirm\",\n type: \"button\",\n title: \"Create and connect\",\n description: \"Creates and connects to the new database.\",\n },\n ],\n },\n {\n type: \"popup\",\n selector: getDataKeyElemSelector(\"Select existing database\"),\n title: \"Connect to an existing database\",\n description: \"Selects a database from the server to connect to. \",\n docs: `\n Allows you to connect to an existing database in the selected server.\n It will use the first connection details from the group connection. \n\n \"Connect\n\n After selecting the database, you can choose to create a new owner or user for the connection should you need to.\n `,\n children: [\n {\n type: \"select\",\n title: \"Select Database\",\n description: \"Choose a database from the server.\",\n selectorCommand: \"ConnectionServer.add.existingDatabase\",\n },\n ...newOwnerOrUserOptions,\n {\n selectorCommand: \"ConnectionServer.add.confirm\",\n type: \"button\",\n title: \"Save and connect\",\n description:\n \"Connects to the selected database with the new owner.\",\n },\n ],\n },\n ],\n },\n {\n type: \"button\",\n title: \"Debug: Close All Windows\",\n selectorCommand: \"Connection.closeAllWindows\",\n description:\n \"Force-closes all windows/tabs for this connection. Use if the workspace becomes unresponsive or encounters a bug.\",\n },\n {\n type: \"popup\",\n title: \"Status monitor\",\n selectorCommand: \"Connection.statusMonitor\",\n description:\n \"View real-time statistics, running queries, and system resource usage (CPU, RAM, Disk) for this connection.\",\n children: [],\n },\n {\n type: \"link\",\n title: \"Connection configuration\",\n selectorCommand: \"Connection.configure\",\n description:\n \"Access and modify settings for this connection, such as access control, file storage, backup/restore options, and server-side functions.\",\n path: ROUTES.CONFIG,\n pathItem: {\n tableName: \"connections\",\n },\n // TODO: we need to move shared pages to the end\n // docs: connectionConfigUIDoc.docs,\n // pageContent: connectionConfigUIDoc.children,\n },\n {\n type: \"link\",\n title: \"Edit connection details\",\n selectorCommand: \"Connection.edit\",\n description:\n \"Modify the connection parameters (e.g., display name, database details like host and port). Also allows deleting or cloning the connection.\",\n docs: editConnectionUIDoc.docs,\n path: ROUTES.EDIT_CONNECTION,\n pathItem: {\n tableName: \"connections\",\n },\n pageContent: editConnectionUIDoc.children,\n },\n {\n type: \"button\",\n title: \"Status indicator/Disconnect\",\n selectorCommand: \"Connection.disconnect\",\n description:\n \"Shows the current connection status (green indicates connected). Click to disconnect from the database.\",\n },\n {\n type: \"list\",\n selectorCommand: \"Connection.workspaceList\",\n title: \"Workspaces\",\n description:\n \"List of workspaces associated with this connection. Click to switch to a specific workspace.\",\n itemSelector: \" [data-key]\",\n itemContent: [],\n },\n ],\n },\n ],\n} satisfies UIDocContainers;\n" }, { "path": "client/src/app/UIDocs/desktopInstallation.ts", "content": "import { fixIndent } from \"../../demo/scripts/sqlVideoDemo\";\nimport type { UIDoc } from \"../UIDocs\";\n\nexport const desktopInstallationUIDoc = {\n type: \"info\",\n title: \"Installation (Desktop Version)\",\n description: \"Instructions for installing Prostgles UI on your desktop.\",\n docs: fixIndent(`\n To get started with Prostgles Desktop, download and install the binary file that's appropriate for your operating system (Windows, macOS, or Linux) from [our website](/download).\n\n - **Linux**: We provide **.deb**, **.rpm** or **.AppImage** files to suit your distribution,\n - **macOS**: Open the downloaded **.dmg** file, drag the Prostgles Desktop icon into your Applications folder, and launch the application.\n - **Windows** - Run the downloaded **.exe** file and follow the on-screen instructions to complete the installation.\n\n Alternatively, you can visit the [releases page](https://github.com/prostgles/ui/releases) for checksums, release notes or older versions.\n\n ## Setting up\n\n When you open Prostgles Desktop, you see the Welcome screen while it loads.\n You'll need to complete two initial setup steps:\n\n 1. Accept the privacy policy\n 2. Connect to a state database\n\n #### State database\n\n Prostgles Desktop stores its state and configuration data in a PostgreSQL database.\n To maintain a secure and responsive environment, we highly recommend [installing Postgres](https://www.postgresql.org/download/) on your local machine.\n You will need to create a dedicated database and superuser account with a strong password for Prostgles Desktop.\n\n \"Electron \n`),\n} satisfies UIDoc;\n" }, { "path": "client/src/app/UIDocs/editConnectionUIDoc.ts", "content": "import { ROUTES } from \"@common/utils\";\nimport type { UIDocContainers } from \"../UIDocs\";\n\nexport const editConnectionUIDoc = {\n type: \"page\",\n // path: ROUTES.EDIT_CONNECTION,\n title: \"Add or Edit Connection\",\n description:\n \"Create a new connection or modify the details of an existing database connection. Update connection settings, credentials, and more.\",\n docs: `\n Connection settings, credentials, and other parameters to ensure your connection is configured correctly.\n `,\n children: [\n {\n type: \"popup\",\n selectorCommand: \"PostgresInstallationInstructions\",\n title: \"PostgreSQL Installation Instructions\",\n description: \"Instructions for installing PostgreSQL on your system.\",\n children: [],\n },\n {\n type: \"input\",\n inputType: \"text\",\n selectorCommand: \"NewConnectionForm.connectionName\",\n title: \"Connection Name\",\n description: \"The name of the connection.\",\n },\n {\n type: \"input\",\n inputType: \"text\",\n selectorCommand: \"NewConnectionForm.connectionType\",\n title: \"Connection Type\",\n description:\n \"Allows you change the connection details format: standard or connection string.\",\n },\n {\n type: \"input\",\n inputType: \"text\",\n selectorCommand: \"NewConnectionForm.db_conn\",\n title: \"Connection String\",\n description: \"The connection string for the database. \",\n },\n {\n type: \"input\",\n inputType: \"text\",\n selectorCommand: \"NewConnectionForm.db_host\",\n title: \"Database Host\",\n description: \"The hostname or IP address of the database server.\",\n },\n {\n type: \"input\",\n inputType: \"text\",\n selectorCommand: \"NewConnectionForm.db_port\",\n title: \"Database Port\",\n description: \"The port number on which the database server is listening.\",\n },\n {\n type: \"input\",\n inputType: \"text\",\n selectorCommand: \"NewConnectionForm.db_user\",\n title: \"Database User\",\n description: \"The username used to connect to the database.\",\n },\n {\n type: \"input\",\n inputType: \"text\",\n selectorCommand: \"NewConnectionForm.db_pass\",\n title: \"Database Password\",\n description: \"The password for the database user.\",\n },\n {\n type: \"input\",\n inputType: \"text\",\n selectorCommand: \"NewConnectionForm.db_name\",\n title: \"Database Name\",\n description: \"The name of the database to connect to.\",\n },\n {\n type: \"section\",\n selectorCommand: \"NewConnectionForm.MoreOptionsToggle\",\n title: \"More Options\",\n description: \"Additional connection options.\",\n children: [\n {\n type: \"select\",\n selectorCommand: \"NewConnectionForm.schemaFilter\",\n title: \"Schema Filter\",\n description:\n \"Controls which schemas are visible in the dashboard (public by default).\",\n },\n {\n type: \"input\",\n inputType: \"text\",\n selectorCommand: \"NewConnectionForm.connectionTimeout\",\n title: \"Connection Timeout\",\n description:\n \"The maximum time to wait for a connection to the database before timing out.\",\n },\n {\n type: \"section\",\n selectorCommand: \"NewConnectionForm.sslMode\",\n title: \"SSL Mode\",\n description: \"Configure SSL settings for the connection.\",\n children: [],\n },\n {\n type: \"input\",\n inputType: \"checkbox\",\n selectorCommand: \"NewConnectionForm.watchSchema\",\n title: \"Watch Schema\",\n description:\n \"Enabled by default. Enables schema change tracking. Any changes made to the database schema are reflected in the API and UI.\",\n },\n {\n type: \"input\",\n inputType: \"checkbox\",\n selectorCommand: \"NewConnectionForm.realtime\",\n title: \"Enable Realtime\",\n description:\n \"Enabled by default. Enables realtime data change tracking for tables and views. Requires trigger permissions to the underlying tables.\",\n },\n ],\n },\n {\n type: \"button\",\n selectorCommand: \"Connection.edit.updateOrCreateConfirm\",\n title: \"Update Connection\",\n description: \"Save the changes made to the connection.\",\n },\n ],\n} satisfies Omit;\n" }, { "path": "client/src/app/UIDocs/navbarUIDoc.ts", "content": "import { mdiThemeLightDark, mdiTranslate } from \"@mdi/js\";\nimport { ROUTES } from \"@common/utils\";\nimport type { UIDocNavbar } from \"../UIDocs\";\n\nexport const navbarUIDoc = {\n type: \"navbar\",\n selectorCommand: \"NavBar\",\n title: \"Navigation bar\",\n description:\n \"The top navigation bar provides quick access to all major sections of Prostgles UI.\",\n docs: `\n The top navigation bar provides quick access to all major sections of Prostgles UI. \n Located at the top of the interface, it allows you to switch between database connections, manage users and server settings, and access your account preferences. \n The navigation adapts to your user role, showing admin-only sections like Users and Server Settings only to authorized users.\n\n ## Key sections of the app\n\n ### Connections\n\n A connection represents a unique postgres database instance (unique host, port, user and database name).\n The connection list page shows all available connections you can access based on your user permissions.\n \n ### Connection dashboard\n\n Clicking a connection from the connection list will take you to the dashboard page where you can explore and interact with the database.\n Available views and tools include SQL Editor, Table, Map, Schema Diagram, AI Assistant, and more.\n\n ### Dashboard workspaces\n \n The views you open in the dashboard are saved automatically to the current workspace.\n This allows you to return to the same views later, even after closing the application.\n You can create multiple workspaces to organize your views by project, team, task, or any other criteria.\n\n\n \"Navigation\"\n`,\n children: [\n // {\n // type: \"link\",\n // path: ROUTES.CONNECTIONS,\n // selector: \".prgl-brand-icon\",\n // title: \"Go to Homepage\",\n // description: \"Navigate to the home page (connection list). \",\n // },\n {\n type: \"link\",\n path: ROUTES.CONNECTIONS,\n selector: '[href=\"/connections\"]',\n title: \"Connections\",\n description: \"Manage database connections\",\n },\n {\n type: \"link\",\n path: ROUTES.USERS,\n selector: '[href=\"/users\"]',\n title: \"Users\",\n description: \"Manage user accounts (admin only)\",\n docOptions: \"hideChildren\",\n pageContent: [\n {\n type: \"input\",\n inputType: \"text\",\n selectorCommand: \"SearchList\",\n title: \"Search Users\",\n description: \"Search for users by name or email.\",\n },\n {\n type: \"smartform-popup\",\n selectorCommand: \"dashboard.window.rowInsertTop\",\n title: \"Create User\",\n description: \"Create a new user account.\",\n tableName: \"users\",\n },\n {\n type: \"list\",\n selector: \".table-component\",\n title: \"User List\",\n description: \"List of all users in the system.\",\n itemSelector: \".TableBody div[role='row']\",\n itemContent: [\n {\n type: \"smartform-popup\",\n selectorCommand: \"dashboard.window.viewEditRow\",\n title: \"Edit User\",\n description: \"Edit user details.\",\n tableName: \"users\",\n },\n ],\n },\n {\n type: \"button\",\n selectorCommand: \"Pagination.lastPage\",\n title: \"Go to Last Page\",\n description: \"Navigate to the last page of the user list.\",\n },\n ],\n },\n {\n type: \"link\",\n path: ROUTES.SERVER_SETTINGS,\n selector: '[href=\"/server-settings\"]',\n title: \"Server Settings\",\n description: \"Configure server settings (admin only)\",\n },\n {\n type: \"link\",\n path: ROUTES.ACCOUNT,\n title: \"Account\",\n selector: '[href=\"/account\"]',\n description: \"Manage your account\",\n },\n {\n type: \"button\",\n title: \"Logout\",\n selectorCommand: \"NavBar.logout\",\n description: \"Logout of your account\",\n },\n {\n type: \"select\",\n selectorCommand: \"App.colorScheme\",\n title: \"Theme Selector\",\n description: \"Switch between light and dark themes\",\n iconPath: mdiThemeLightDark,\n },\n {\n type: \"select\",\n selectorCommand: \"App.LanguageSelector\",\n title: \"Language Selector\",\n description: \"Change the interface language\",\n iconPath: mdiTranslate,\n },\n {\n type: \"button\",\n selector: \".hamburger\",\n title: \"Toggle Menu (visible on small screens)\",\n description: \"Toggle the mobile navigation menu on smaller screens\",\n },\n ],\n paths: [\n { route: ROUTES.CONNECTIONS, exact: true },\n ROUTES.USERS,\n ROUTES.SERVER_SETTINGS,\n ROUTES.ACCOUNT,\n ],\n} satisfies UIDocNavbar;\n" }, { "path": "client/src/app/UIDocs/overviewUIDoc.ts", "content": "import type { UIDoc } from \"../UIDocs\";\n\nexport const overviewUIDoc = {\n type: \"info\",\n title: \"Overview\",\n description: \"Overview\",\n docs: `\n Prostgles UI is a user-friendly way for interacting with PostgreSQL, creating dashboards and internal tools.\n\n \"Prostgles\n\n ## Features\n - SQL Editor with syntax highlighting and auto-completion\n - Real-time dashboards with charts\n - AI assistant with MCP support\n - User authentication (email, third-party OAuth and two-factor authentication)\n - Role-based access control\n - Database management\n - File storage and backups (locally or to AWS S3 compatible storage)\n - TypeScript API with database schema types and end to end type safety\n - LISTEN NOTIFY support\n - Mobile friendly\n\n It comes in two versions: \n - **Prostgles UI** - a web-based application with the complete feature set accessible through any modern browser.\n - **Prostgles Desktop** - a native desktop application based on Electron available for Linux, MacOS and Windows. \n It has a subset of the core features from Prostgles UI for data exploration and database management. \n User Management and other multi-user focused features are not available in the desktop version.\n `,\n docOptions: \"asSeparateFile\",\n} as const satisfies UIDoc;\n" }, { "path": "client/src/app/UIDocs/serverSettingsUIDoc.ts", "content": "import { mdiServerSecurity, mdiTools } from \"@mdi/js\";\nimport { ROUTES } from \"@common/utils\";\nimport { getCommandElemSelector, getDataKeyElemSelector } from \"../../Testing\";\nimport type { UIDocContainers } from \"../UIDocs\";\n\nexport const serverSettingsUIDoc = {\n type: \"page\",\n path: ROUTES.SERVER_SETTINGS,\n iconPath: mdiServerSecurity,\n title: \"Server Settings\",\n description:\n \"Server Settings. Configure security, authentication, and LLM settings.\",\n docs: `\n Manage server settings to enhance security, configure authentication methods, and set up LLM providers.\n \"Server\n `,\n children: [\n {\n type: \"tab\",\n selector: getDataKeyElemSelector(\"security\"),\n title: \"Security\",\n description:\n \"Security. Configure domain access, IP restrictions, session duration, and login rate limits to enhance security.\",\n children: [\n {\n type: \"smartform\",\n title: \"Settings form\",\n description: \"Configure server settings.\",\n selectorCommand: \"SmartForm\",\n tableName: \"server_settings\",\n },\n ],\n },\n {\n type: \"tab\",\n title: \"Authentication\",\n selector: getDataKeyElemSelector(\"auth\"),\n description:\n \"Manage user authentication methods, default user roles, and third-party login providers to control access.\",\n children: [\n {\n type: \"input\",\n title: \"Website URL\",\n inputType: \"text\",\n selector: getCommandElemSelector(\"AuthProviderSetup.websiteURL\"),\n description:\n \"Website URL. Used for email and third-party login redirect URL. When first visiting the app as an admin user, it is automatically set to the current URL which will trigger a page refresh.\",\n },\n {\n type: \"input\",\n title: \"Default user type\",\n inputType: \"select\",\n selector: getCommandElemSelector(\"AuthProviderSetup.defaultUserType\"),\n description:\n \"The default user type assigned to new users. Defaults to 'default'.\",\n },\n {\n type: \"accordion-item\",\n title: \"Email signup\",\n description: \"Email signup/magic-link authentication setup.\",\n selector: getCommandElemSelector(\"EmailAuthSetup\"),\n docs: `\n Provide SMTP or AWS SES credentials to enable email signup and magic-link authentication. \n By default users authenticate using a password.`,\n children: [\n {\n type: \"input\",\n title: \"Enable/Disable email signup toggle\",\n inputType: \"checkbox\",\n selector: getCommandElemSelector(\"EmailAuthSetup.toggle\"),\n description:\n \"Enable email signup. This will allow users to sign up and log in using their email address.\",\n },\n {\n type: \"input\",\n title: \"Signup type\",\n inputType: \"select\",\n selector: getCommandElemSelector(\"EmailAuthSetup.SignupType\"),\n description:\n \"Signup type. Choose between 'withPassword' or 'withMagicLink'.\",\n },\n {\n type: \"popup\",\n title: \"Email verification\",\n selector: getCommandElemSelector(\"EmailSMTPAndTemplateSetup\"),\n description: \"SMTP and email template setup.\",\n children: [\n {\n type: \"accordion-item\",\n title: \"Email provider setup\",\n selector: getCommandElemSelector(\"EmailSMTPSetup\"),\n description:\n \"SMTP settings for sending registration/magic-link emails. Allowed providers: SMTP (host, port, username, password) or AWS SES (region, accessKeyId, secretAccessKey).\",\n children: [],\n },\n {\n type: \"accordion-item\",\n title: \"Email Template setup\",\n selector: getCommandElemSelector(\"EmailTemplateSetup\"),\n description:\n \"Email template for registration/magic-link emails\",\n children: [],\n },\n {\n type: \"button\",\n title: \"Test and save\",\n selector: getCommandElemSelector(\n \"EmailSMTPAndTemplateSetup.save\",\n ),\n description:\n \"Test and Save SMTP and email template settings.\",\n },\n ],\n },\n ],\n },\n {\n type: \"list\",\n title: \"Third-party login providers\",\n description: \"Third-party login providers (OAuth2)\",\n selectorCommand: \"AuthProviders.list\",\n itemSelector:\n getCommandElemSelector(\"AuthProviders.list\") + \" > .Section\",\n itemContent: [],\n },\n ],\n },\n {\n type: \"tab\",\n iconPath: mdiTools,\n title: \"MCP Servers\",\n selector: getDataKeyElemSelector(\"mcpServers\"),\n description:\n \"Manage MCP servers and tools that can then be used in the Ask AI chat\",\n children: [],\n },\n {\n type: \"tab\",\n title: \"LLM Providers\",\n selector: getDataKeyElemSelector(\"llmProviders\"),\n description:\n \"Manage LLM providers, credentials and models to be used in the Ask AI chat\",\n children: [],\n },\n {\n type: \"tab\",\n title: \"Services\",\n selector: getDataKeyElemSelector(\"services\"),\n description: \"Manage services\",\n children: [],\n },\n ],\n} satisfies UIDocContainers;\n" }, { "path": "client/src/app/UIDocs.ts", "content": "import { filterArrInverse } from \"@common/llmUtils\";\nimport type { DBSSchema } from \"@common/publishUtils\";\nimport type { ROUTES } from \"@common/utils\";\nimport type { Route } from \"react-router-dom\";\nimport { isPlaywrightTest } from \"../i18n/i18nUtils\";\nimport type { Command } from \"../Testing\";\nimport { isDefined } from \"../utils/utils\";\nimport { domToThemeAwareSVG } from \"./domToSVG/domToThemeAwareSVG\";\nimport { accountUIDoc } from \"./UIDocs/accountUIDoc\";\nimport { commandPaletteUIDoc } from \"./UIDocs/commandPaletteUIDoc\";\nimport { connectionConfigUIDoc } from \"./UIDocs/connection/connectionConfigUIDoc\";\nimport { dashboardUIDoc } from \"./UIDocs/connection/dashboardUIDoc\";\nimport { connectionsUIDoc } from \"./UIDocs/connectionsUIDoc\";\nimport { desktopInstallationUIDoc } from \"./UIDocs/desktopInstallation\";\nimport { navbarUIDoc } from \"./UIDocs/navbarUIDoc\";\nimport { overviewUIDoc } from \"./UIDocs/overviewUIDoc\";\nimport { serverSettingsUIDoc } from \"./UIDocs/serverSettingsUIDoc\";\nimport { UIInstallation } from \"./UIDocs/UIInstallationUIDoc\";\nimport { getSVGif } from \"./domToSVG/SVGif/getSVGif\";\n\n/**\n * The purpose of UIDocs is to provide structured metadata about the UI elements.\n * This metadata is used for:\n * 1. Command Palette. It requires a list of all UI elements and their relationships to enable quick navigation.\n * 2. Documentation. Generating user guides and documentation with screenshots and descriptions.\n * 3. Automated testing to ensure UI elements are present and functional.\n *\n * Each UIDoc describes a UI element or a group of elements, including their type, selector, description, and hierarchical relationships.\n * This structured approach allows for easy maintenance and scalability of the documentation system.\n */\n\ntype UIDocCommon = {\n title: string;\n\n /**\n * Optional mdi icon path representing the element, enhancing visual identification in the Command Palette.\n */\n iconPath?: string;\n\n /**\n * Short description of the element's purpose or functionality used in Command Palette.\n */\n description: string;\n\n /**\n * If defined, this will be used to generate a separate section in the documentation.\n */\n docs?: string;\n\n /**\n * If defined, this will be used as the title for the children list in the documentation.\n */\n childrenTitle?: string;\n\n docOptions?: /**\n * If docs is defined, then it will be rendered as a separate header in the documentation with this title.\n */\n | { title: string }\n /**\n * If \"asSeparateFile\" AND docs is defined, this will be saved as a separate file in the documentation.\n * By default, a single file is generated for each root UIDoc with child items with docs appended to the bottom.\n */\n | \"asSeparateFile\"\n /**\n * Hides children from documentation. Meant to be used when the children content is obvious/documented on the parent.\n */\n | \"hideChildren\";\n\n /** If true then this is not available for Prostgles Desktop */\n uiVersionOnly?: true;\n};\n\n/**\n * UI Documentation system for generating interactive element guides and documentation.\n * Defines structured metadata for UI elements including selectors, types, and hierarchical relationships.\n * Used for automated testing, user guidance, and generating SVG documentation from DOM elements.\n */\ntype UIDocBase = (\n | {\n selector: string;\n selectorCommand?: undefined;\n }\n | {\n selector?: undefined;\n /**\n * data-command attribute of the element to be selected.\n */\n selectorCommand: Command;\n }\n) &\n UIDocCommon &\n T;\n\ntype Route = (typeof ROUTES)[keyof typeof ROUTES];\n\nexport type UIDocInputElement = UIDocBase<{\n type: \"input\";\n inputType: \"text\" | \"number\" | \"checkbox\" | \"select\" | \"file\";\n}>;\n\nexport type UIDocElement =\n | UIDocBase<{\n type: \"button\";\n }>\n | UIDocBase<{\n type: \"drag-handle\";\n direction: \"x\" | \"y\";\n }>\n | UIDocBase<{\n type: \"canvas\";\n }>\n | UIDocInputElement\n | UIDocBase<{\n type: \"text\";\n }>\n | UIDocBase<{\n type: \"list\";\n itemSelector: string;\n itemContent: UIDocElement[];\n }>\n | UIDocBase<{\n type: \"select\";\n }>\n | UIDocBase<{\n type: \"link\";\n path: Route;\n /**\n * If defined this means that the final url is `${pagePath}/pathItemRow.id`\n */\n pathItem?: {\n tableName: keyof DBSSchema;\n };\n pageContent?: UIDocElement[];\n }>\n | UIDocBase<{\n type: \"popup\";\n triggerMode?: \"click\" | \"contextmenu\";\n /**\n * Used in detecting if popup is shown\n */\n contentSelectorCommand?: Command;\n children: UIDocElement[];\n }>\n | UIDocBase<{\n type: \"tab\" | \"accordion-item\";\n children: UIDocElement[];\n }>\n | UIDocBase<{\n type: \"section\";\n children: UIDocElement[];\n }>\n | UIDocBase<{\n type: \"smartform\" | \"smartform-popup\";\n tableName: string;\n fieldNames?: string[];\n }>\n | (UIDocCommon & {\n /**\n * Documentation-only. Does not appear in Command Palette.\n */\n type: \"info\";\n });\n\nexport type UIDocPage = UIDocCommon & {\n type: \"page\";\n path: Route;\n pathItem?: {\n tableName: keyof DBSSchema;\n selectorCommand?: Command;\n selector?: string;\n selectorPath?: Route;\n };\n children: UIDocElement[];\n};\nexport type UIDocContainers =\n | UIDocPage\n | UIDocBase<{\n type: \"hotkey-popup\";\n hotkey: [\"Ctrl\" | \"Alt\" | \"Shift\", \"A\" | \"K\"];\n children: UIDocElement[];\n }>;\n\nexport type UIDocNavbar = UIDocBase<{\n type: \"navbar\";\n docs?: string;\n children: UIDocElement[];\n /**\n * List of paths the navbar appears on.\n */\n paths: (Route | { route: Route; exact: true })[];\n}>;\n\nexport type UIDoc = UIDocContainers | UIDocElement | UIDocNavbar;\n\nexport const UIDocs = [\n overviewUIDoc,\n UIInstallation,\n desktopInstallationUIDoc,\n navbarUIDoc,\n connectionsUIDoc,\n dashboardUIDoc,\n connectionConfigUIDoc,\n serverSettingsUIDoc,\n accountUIDoc,\n commandPaletteUIDoc,\n] satisfies UIDoc[];\n\nconst getFlatDocs = (\n doc: UIDoc | undefined,\n parentDocs: UIDoc[] = [],\n):\n | ({\n parentTitles: string[];\n parentDocs: UIDoc[];\n } & UIDoc)[]\n | undefined => {\n if (!doc) return [];\n const parentTitles = parentDocs.map((d) => d.title);\n const children =\n \"children\" in doc ? doc.children\n : \"itemContent\" in doc ? doc.itemContent\n : \"pageContent\" in doc ? doc.pageContent\n : undefined;\n\n if (!children?.length) {\n return [\n {\n parentTitles,\n ...doc,\n parentDocs,\n },\n ];\n }\n\n const nextParentDocs = [...parentDocs, doc];\n const flatChildren = children.flatMap(\n (childDoc: UIDocContainers | UIDocElement) => {\n const flatChildren = getFlatDocs(childDoc, nextParentDocs) ?? [];\n return flatChildren;\n },\n );\n return [\n {\n parentTitles,\n ...doc,\n parentDocs,\n },\n ...flatChildren,\n ];\n};\nexport type UIDocNonInfo = Exclude;\nexport type UIDocFlat = UIDocNonInfo & {\n parentTitles: string[];\n parentDocs: UIDoc[];\n};\nexport const flatUIDocs = filterArrInverse(UIDocs, { type: \"info\" } as const)\n .map((doc) => getFlatDocs(doc))\n .filter(isDefined)\n .flat() as UIDocFlat[];\nwindow.flatUIDocs = flatUIDocs;\n\nif (isPlaywrightTest) {\n window.toSVG = domToThemeAwareSVG;\n window.getSVGif = getSVGif;\n}\n" }, { "path": "client/src/app/XRealIpSpoofableAlert.tsx", "content": "import { mdiAlertOutline } from \"@mdi/js\";\nimport React from \"react\";\nimport { NavLink } from \"react-router-dom\";\nimport { ROUTES } from \"@common/utils\";\nimport Btn from \"@components/Btn\";\nimport { InfoRow } from \"@components/InfoRow\";\nimport PopupMenu from \"@components/PopupMenu\";\nimport { t } from \"../i18n/i18nUtils\";\nimport type { useAppState } from \"../useAppState/useAppState\";\n\ntype P = Pick, \"serverState\" | \"user\">;\nexport const XRealIpSpoofableAlert = ({ serverState, user }: P) => {\n return (\n <>\n {serverState?.xRealIpSpoofable && user?.type === \"admin\" && (\n \n {t[\"App\"][\"Security issue\"]}\n \n }\n style={{ position: \"fixed\", right: 0, top: 0, zIndex: 999999 }}\n positioning=\"beneath-left-minfill\"\n clickCatchStyle={{ opacity: 0.5 }}\n content={\n \n Failed login rate limiting is based on x-real-ip header which can\n be spoofed based on your current connection.{\" \"}\n \n {t[\"App\"][\"Settings\"]}\n \n \n }\n />\n )}\n \n );\n};\n" }, { "path": "client/src/app/domToSVG/SVGif/addSVGifCaption.ts", "content": "import { SVG_NAMESPACE } from \"../domToSVG\";\n\nexport const addSVGifCaption = ({\n svgDom,\n appendStyle,\n height,\n caption,\n fromPerc,\n toPerc,\n sceneId,\n totalDuration,\n}: {\n svgDom: SVGElement;\n appendStyle: (style: string) => void;\n width: number;\n height: number;\n caption: string;\n fromPerc: number;\n toPerc: number;\n sceneId: string;\n totalDuration: number;\n}) => {\n appendStyle(`\n :root {\n color-scheme: light dark;\n }\n .caption-background {\n fill: light-dark(#ffffff, #1a1a1a);\n stroke: light-dark(#e0e0e0, #404040);\n stroke-width: 2;\n }\n .caption-text {\n fill: light-dark(#333333, #e0e0e0);\n font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;\n font-size: 28px;\n user-select: none;\n }\n .caption-progress-bar {\n fill: light-dark(#00000066, #ffffff66);\n }\n `);\n\n // Create caption group\n const captionGroup = document.createElementNS(SVG_NAMESPACE, \"g\");\n svgDom.appendChild(captionGroup);\n captionGroup.setAttribute(\"class\", \"caption\");\n\n // Create text element\n const text = document.createElementNS(SVG_NAMESPACE, \"text\");\n text.setAttribute(\"text-anchor\", \"start\");\n text.setAttribute(\"class\", \"caption-text\");\n text.textContent = caption;\n\n captionGroup.appendChild(text);\n\n const bbox = text.getBBox();\n const textWidth = bbox.width;\n const textHeight = bbox.height;\n if (!textWidth || !textHeight) {\n throw new Error(\"Failed to measure caption text dimensions\");\n }\n\n // Background dimensions with padding\n const padding = { x: 22, y: 22 };\n const bgWidth = textWidth + padding.x * 2;\n const bgHeight = textHeight + padding.y * 2;\n const bgX = 40;\n const bgY = height - bgHeight - 10;\n const borderRadius = 4;\n\n text.setAttribute(\"x\", bgX + padding.x);\n text.setAttribute(\"y\", bgY + bgHeight / 2 + textHeight / 3);\n\n const addProgressBar = () => {\n const progressBar = document.createElementNS(SVG_NAMESPACE, \"rect\");\n const progressBarHeight = 4;\n const barId = \"caption-progress-bar-\" + sceneId;\n progressBar.setAttribute(\"id\", barId);\n progressBar.setAttribute(\"class\", \"caption-progress-bar\");\n progressBar.setAttribute(\"x\", bgX);\n progressBar.setAttribute(\"y\", bgY + bgHeight - progressBarHeight);\n progressBar.setAttribute(\"width\", bgWidth);\n progressBar.setAttribute(\"height\", progressBarHeight);\n progressBar.setAttribute(\"rx\", \"2\");\n progressBar.setAttribute(\"ry\", \"2\");\n captionGroup.prepend(progressBar);\n\n appendStyle(`\n @keyframes ${barId}-anim {\n 0% { width: 0; }\n ${fromPerc + 0.1}% { width: 0; }\n ${toPerc - 0.1}% { width: ${bgWidth}px; }\n ${toPerc}% { width: 0; }\n 100% { width: 0; }\n }\n #${barId} {\n animation: ${barId}-anim ${totalDuration}ms ease-in-out infinite; \n }\n `);\n };\n // addProgressBar();\n\n const bgRect = document.createElementNS(SVG_NAMESPACE, \"rect\");\n bgRect.setAttribute(\"x\", bgX);\n bgRect.setAttribute(\"y\", bgY);\n bgRect.setAttribute(\"width\", bgWidth);\n bgRect.setAttribute(\"height\", bgHeight);\n bgRect.setAttribute(\"rx\", borderRadius);\n bgRect.setAttribute(\"ry\", borderRadius);\n bgRect.setAttribute(\"class\", \"caption-background\");\n captionGroup.prepend(bgRect);\n};\n" }, { "path": "client/src/app/domToSVG/SVGif/addSVGifPointer.ts", "content": "import { SVG_NAMESPACE } from \"../domToSVG\";\nimport { getAnimationProperty } from \"./getSVGif\";\n\nexport const addSVGifPointer = ({\n g,\n appendStyle,\n cursorKeyframes,\n totalDuration,\n}: {\n g: SVGGElement;\n appendStyle: (style: string) => void;\n totalDuration: number;\n cursorKeyframes: string[];\n}) => {\n const pointerId = \"pointer\";\n const pointerCircle = document.createElementNS(SVG_NAMESPACE, \"circle\");\n pointerCircle.setAttribute(\"r\", \"10\");\n pointerCircle.setAttribute(\"opacity\", \"0\");\n pointerCircle.setAttribute(\"id\", pointerId);\n\n const cursorAnimationName = `cursor-move`;\n appendStyle(`\n #${pointerId} { \n transform-origin: center;\n fill: #00000036;\n filter: drop-shadow(0 0 2px #000000aa);\n }\n\n @media (prefers-color-scheme: dark) {\n #${pointerId} {\n fill: #ffffff36;\n filter: drop-shadow(0 0 2px #ffffffaa);\n }\n }\n\n @keyframes ${cursorAnimationName} {\n ${cursorKeyframes.map((v) => ` ${v}`).join(\"\\n\")}\n } \n ${getAnimationProperty({\n totalDuration,\n elemSelector: `#${pointerId}`,\n animName: cursorAnimationName,\n easeFunction: \"ease-out\",\n })}\n `);\n g.appendChild(pointerCircle);\n};\n" }, { "path": "client/src/app/domToSVG/SVGif/addSVGifTimelineControls.ts", "content": "import { SVG_NAMESPACE } from \"../domToSVG\";\nimport { getAnimationProperty } from \"./getSVGif\";\nimport type { getSVGifAnimations } from \"./getSVGifAnimations\";\n\nexport const addSVGifTimelineControls = ({\n g,\n appendStyle,\n width,\n height,\n totalDuration,\n sceneAnimations,\n}: {\n g: SVGGElement;\n appendStyle: (style: string) => void;\n width: number;\n height: number;\n totalDuration: number;\n sceneAnimations: ReturnType[\"sceneAnimations\"];\n}) => {\n const progressBarId = \"progress-bar\";\n const animationProgressBar = document.createElementNS(SVG_NAMESPACE, \"rect\");\n const animationProgressBarHeight = 2;\n animationProgressBar.setAttribute(\"id\", progressBarId);\n animationProgressBar.setAttribute(\"x\", \"0\");\n animationProgressBar.setAttribute(\"y\", height - animationProgressBarHeight);\n animationProgressBar.setAttribute(\"height\", animationProgressBarHeight);\n animationProgressBar.setAttribute(\"width\", `${width}px`);\n animationProgressBar.setAttribute(\"rx\", \"2.5\");\n animationProgressBar.setAttribute(\"ry\", \"2.5\");\n\n const progressBarAnimationName = \"animation-progress-bar\";\n appendStyle(` \n @keyframes ${progressBarAnimationName} {\n 0% { transform: translateX(-100%); }\n 100% { transform: translateX(0%); }\n } \n\n #${progressBarId} {\n fill: red;\n opacity: 0.3;\n ${getAnimationProperty({ totalDuration, animName: progressBarAnimationName, elemSelector: `#${progressBarId}` }, true)} \n }\n\n @media (prefers-color-scheme: dark) {\n #${progressBarId} {\n opacity: 0.5;\n }\n }\n\n /* Pause only while SVG is pressed */\n g.paused * {\n animation-play-state: paused;\n }\n `);\n\n const setPause = document.createElementNS(SVG_NAMESPACE, \"set\");\n setPause.setAttribute(\"attributeName\", \"class\");\n setPause.setAttribute(\"to\", \"paused\");\n setPause.setAttribute(\"begin\", \"mousedown\");\n setPause.setAttribute(\"end\", \"mouseup\");\n\n const sceneSkipWrapper = document.createElementNS(SVG_NAMESPACE, \"g\");\n sceneAnimations.forEach((scene, index) => {\n const sceneSkipRect = document.createElementNS(SVG_NAMESPACE, \"rect\");\n const sceneStartTime = scene.startMs;\n sceneSkipRect.setAttribute(\n \"x\",\n `${(sceneStartTime / totalDuration) * width}`,\n );\n sceneSkipRect.setAttribute(\"y\", \"0\");\n sceneSkipRect.setAttribute(\n \"width\",\n `${(scene.duration / totalDuration) * width}`,\n );\n sceneSkipRect.setAttribute(\"height\", `${height}`);\n sceneSkipRect.setAttribute(\"fill\", \"none\");\n sceneSkipRect.setAttribute(\"cursor\", \"pointer\");\n\n const seekTime = sceneStartTime / 1000; // in seconds\n sceneSkipRect.addEventListener(\"click\", () => {\n const svgElem = g.ownerSVGElement;\n if (!svgElem) return;\n const currentTime = svgElem.getCurrentTime();\n const timeDiff = seekTime - currentTime;\n svgElem.setCurrentTime(currentTime + timeDiff + 0.01); // add small offset to trigger time update\n });\n\n sceneSkipWrapper.appendChild(sceneSkipRect);\n });\n\n g.appendChild(animationProgressBar);\n // g.appendChild(sceneSkipWrapper);\n g.appendChild(setPause);\n};\n" }, { "path": "client/src/app/domToSVG/SVGif/animations/getSVGifCursorAnimationHandler.ts", "content": "import type { SVGif } from \"src/Testing\";\nimport type { SVGifParsedScene } from \"../getSVGifParsedScenes\";\nimport { getSVGifRevealKeyframes } from \"../getSVGifRevealKeyframes\";\nimport { toFixed } from \"../../utils/toFixed\";\nimport type { SceneNodeAnimation } from \"../getSVGifAnimations\";\nimport { fixIndent } from \"@common/utils\";\n\nexport const getSVGifCursorAnimationHandler = ({\n parsedScenes,\n getPercent,\n totalSvgifDuration,\n width,\n height,\n}: {\n parsedScenes: SVGifParsedScene[];\n getPercent: (ms: number, offset?: 0 | 0.1 | -0.1) => number;\n totalSvgifDuration: number;\n width: number;\n height: number;\n}) => {\n const cursorMovements: {\n fromPerc: number;\n toPerc: number;\n lingerPerc: number | undefined;\n target: [number, number];\n }[] = [];\n const [x0, y0] = [width / 2, height];\n\n const addAnimation = ({\n currentPrevDuration,\n animationIndex,\n animations,\n sceneIndex,\n animation,\n bbox,\n svgFileName,\n sceneNodeAnimations,\n sceneId,\n }: {\n currentPrevDuration: number;\n animations: SVGif.Animation[];\n animationIndex: number;\n sceneIndex: number;\n animation: SVGif.CursorAnimation;\n bbox: DOMRect | undefined;\n svgFileName: string;\n sceneNodeAnimations: SceneNodeAnimation[];\n sceneId: string;\n }) => {\n if (animation.type === \"moveTo\") {\n cursorMovements.push({\n fromPerc: Number(getPercent(currentPrevDuration)),\n toPerc: Number(getPercent(currentPrevDuration + animation.duration)),\n lingerPerc: undefined,\n target: animation.xy,\n });\n return;\n }\n\n if (!bbox) {\n throw new Error(`Unexpected. BBox missing`);\n }\n\n const {\n type,\n lingerMs = 500,\n waitBeforeClick = 500,\n duration,\n elementSelector,\n offset,\n } = animation;\n\n const xOffset = offset?.x ?? Math.min(60, bbox.width / 2);\n const yOffset = offset?.y ?? Math.min(30, bbox.height / 2);\n const cx = bbox.x + xOffset;\n const cy = bbox.y + yOffset;\n\n if (duration < waitBeforeClick) {\n throw new Error(\n fixIndent(`\n Duration ${duration}ms for \"${type}\" animation on element ${elementSelector} in SVG file ${svgFileName} is too short. \n It must be greater than the waitBeforeClick time of ${waitBeforeClick}ms.\n `),\n );\n }\n const clickEndTime = currentPrevDuration + duration - waitBeforeClick;\n const nextAnimation =\n animations[animationIndex + 1] ||\n parsedScenes[sceneIndex + 1]?.animations[0];\n const anotherClickFollowing = nextAnimation?.type === \"click\";\n cursorMovements.push({\n fromPerc: getPercent(currentPrevDuration),\n toPerc: getPercent(clickEndTime),\n lingerPerc:\n !lingerMs || anotherClickFollowing ? undefined : (\n Number(\n getPercent(Math.min(totalSvgifDuration, clickEndTime + lingerMs)),\n )\n ),\n target: [cx, cy],\n });\n\n if (type === \"clickAppearOnHover\") {\n const toPerc = getPercent(clickEndTime);\n /** Ensure it appears as the cursor enters the bbox */\n const xDistance = Math.abs(\n cx - (cursorMovements.at(-2)?.target[0] ?? x0),\n );\n const yDistance = Math.abs(\n cy - (cursorMovements.at(-2)?.target[1] ?? y0),\n );\n const distance = Math.sqrt(xDistance ** 2 + yDistance ** 2);\n const approxMsToEnter = Math.max(300, distance * 4);\n const appearTime = Math.max(\n currentPrevDuration,\n clickEndTime - approxMsToEnter,\n );\n const appearPerc = getPercent(appearTime);\n\n sceneNodeAnimations.push({\n sceneId,\n elemSelector: elementSelector,\n keyframes: getSVGifRevealKeyframes({\n fromPerc: appearPerc,\n toPerc,\n mode: \"opacity\",\n }),\n });\n }\n };\n\n const getCursorKeyframes = () => {\n const firstTranslate = `transform: translate(${toFixed(x0)}px, ${toFixed(y0)}px)`;\n const cursorKeyframes = [`0% { opacity: 0; ${firstTranslate}; }`];\n const cursorMovementsFixed = cursorMovements.map((e) => ({\n ...e,\n target: e.target.map((v) => toFixed(v)),\n }));\n cursorMovementsFixed.forEach(\n ({ fromPerc, toPerc, lingerPerc, target: [x, y] }, i, arr) => {\n const translate = `transform: translate(${x}px, ${y}px)`;\n const prevTarget =\n arr[i - 1]?.target ?? [x0, y0].map((v) => toFixed(v));\n const prevTranslate = `transform: translate(${prevTarget[0]}px, ${prevTarget[1]}px)`;\n cursorKeyframes.push(\n ...[\n `${toFixed(fromPerc, 4)}% { opacity: 0; ${prevTranslate}; }`,\n `${toFixed(fromPerc + 0.0001, 4)}% { opacity: 1; ${prevTranslate}; }`,\n `${toFixed(toPerc - 0.0001, 4)}% { opacity: 1; ${translate}; }`,\n `${toFixed(lingerPerc ?? toPerc, 4)}% { opacity: 0; ${translate}; }`,\n ].filter(Boolean),\n );\n },\n );\n\n return { cursorKeyframes };\n };\n\n return { addAnimation, cursorMovements, getCursorKeyframes };\n};\n" }, { "path": "client/src/app/domToSVG/SVGif/animations/getSVGifTypeAnimation.ts", "content": "import type { SVGif } from \"src/Testing\";\nimport type { SceneNodeAnimation } from \"../getSVGifAnimations\";\nimport type { SVGifParsedScene } from \"../getSVGifParsedScenes\";\nimport { getSVGifRevealKeyframes } from \"../getSVGifRevealKeyframes\";\nimport type { getSVGifTargetBBox } from \"../getSVGifTargetBBox\";\nimport { getSVGifZoomToAnimation } from \"./getSVGifZoomToAnimation\";\n\n/**\n * Given an SVGifScenes, return the animations\n */\nexport const getSVGifTypeAnimation = (\n viewport: { width: number; height: number },\n { element, bbox: rawBBox }: ReturnType,\n { svgDom, svgFileName }: SVGifParsedScene,\n animation: Extract,\n {\n sceneId,\n sceneIndex,\n totalDuration,\n getPercent,\n fromTime,\n }: {\n sceneIndex: number;\n sceneId: string;\n totalDuration: number;\n getPercent: (time: number, increment?: 0.1 | -0.1) => number;\n fromTime: number;\n },\n) => {\n const { elementSelector, duration } = animation;\n\n const sceneNodeAnimations: SceneNodeAnimation[] = [];\n const tSpansOrText = Array.from(\n element.querySelectorAll(\"tspan, text\"),\n );\n if (!tSpansOrText.length) {\n throw `No tspan elements found in element: ${elementSelector} in SVG file ${svgFileName}. \"type\" animations require the target element to contain one or more elements.`;\n }\n\n const rootGId = svgDom.querySelector(\":scope > g\")?.id;\n if (!rootGId) {\n throw `No root element with id found in SVG file ${svgFileName}. \"type\" animations require the SVG to have a root element with an id.`;\n }\n\n const totalWidth = tSpansOrText.reduce(\n (acc, tspan) => acc + tspan.getComputedTextLength(),\n 0,\n );\n\n const { extraAnimation } = animation;\n const zoomInDuration = extraAnimation ? 500 : 0;\n const zoomOutDuration = extraAnimation ? 500 : 0;\n const waitBeforeZoomOut = extraAnimation ? 300 : 0;\n const typingDuration =\n duration - zoomInDuration - zoomOutDuration - waitBeforeZoomOut;\n if (typingDuration < 500) {\n throw [\n `Duration ${duration}ms for \"type\" animation on element ${elementSelector} in SVG file ${svgFileName} is too short.`,\n `Must be at least ${zoomInDuration + zoomOutDuration + waitBeforeZoomOut + 500}ms`,\n ].join(\"\\n\");\n }\n const zoomInEndTime = fromTime + zoomInDuration;\n const typingStartTime = zoomInEndTime;\n\n const msPerPx = typingDuration / totalWidth;\n let fromTimeLocal = typingStartTime;\n tSpansOrText.forEach((tspanOrText, i) => {\n const tspanWidth = tspanOrText.getComputedTextLength();\n const tspanDuration = tspanWidth * msPerPx;\n sceneNodeAnimations.push({\n sceneId,\n elemSelector: `${elementSelector} ${tspanOrText.nodeName}:nth-of-type(${i + 1})`,\n keyframes: getSVGifRevealKeyframes({\n fromPerc: getPercent(fromTimeLocal),\n toPerc: getPercent(fromTimeLocal + tspanDuration),\n mode: \"left to right\",\n }),\n });\n fromTimeLocal += tspanDuration;\n });\n const zoomToStyle =\n !animation.extraAnimation ? \"\" : (\n getSVGifZoomToAnimation(\n viewport,\n { bbox: rawBBox },\n { svgDom, svgFileName },\n animation.extraAnimation.type === \"zoomToElement\" ?\n { ...animation, type: \"zoomToElement\" }\n : {\n ...animation,\n type: \"bringToFront\",\n bringToFrontSelector: animation.extraAnimation.elementSelector,\n },\n {\n sceneId,\n sceneIndex,\n totalDuration,\n getPercent,\n fromTime,\n },\n false,\n ).style\n );\n return { sceneNodeAnimations, style: zoomToStyle };\n};\n" }, { "path": "client/src/app/domToSVG/SVGif/animations/getSVGifZoomToAnimation.ts", "content": "import { fixIndent } from \"@common/utils\";\nimport type { SVGif } from \"src/Testing\";\nimport { toFixed } from \"../../utils/toFixed\";\nimport { getAnimationProperty } from \"../getSVGif\";\nimport type { SVGifParsedScene } from \"../getSVGifParsedScenes\";\nimport type { getSVGifTargetBBox } from \"../getSVGifTargetBBox\";\n\nexport const getSVGifZoomToAnimation = (\n viewport: { width: number; height: number },\n { bbox: rawBBox }: Pick, \"bbox\">,\n { svgDom, svgFileName }: Pick,\n animation: Extract<\n SVGif.Animation,\n { type: \"zoomToElement\" | \"bringToFront\" }\n >,\n {\n sceneId,\n sceneIndex,\n totalDuration,\n getPercent,\n fromTime,\n }: {\n sceneIndex: number;\n sceneId: string;\n totalDuration: number;\n getPercent: (time: number, increment?: 0.1 | -0.1) => number;\n fromTime: number;\n },\n addToRootSvg: boolean,\n) => {\n const {\n elementSelector,\n duration,\n maxScale = 3,\n type,\n bringToFrontSelector,\n } = animation;\n\n const rootGId = svgDom.querySelector(\":scope > g\")?.id;\n if (!rootGId) {\n throw `No root element with id found in SVG file ${svgFileName}. \"type\" animations require the SVG to have a root element with an id.`;\n }\n\n const zoomInDuration = 500;\n const zoomOutDuration = 500;\n const waitBeforeZoomOut = 300;\n const dwellDuration =\n duration - zoomInDuration - zoomOutDuration - waitBeforeZoomOut;\n if (dwellDuration < 500) {\n throw [\n `Duration ${duration}ms for \"type\" animation on element ${elementSelector} in SVG file ${svgFileName} is too short.`,\n `Must be at least ${zoomInDuration + zoomOutDuration + waitBeforeZoomOut + 500}ms`,\n ].join(\"\\n\");\n }\n const zoomInStartTime = fromTime;\n const zoomInEndTime = fromTime + zoomInDuration;\n const dwellEndTime = zoomInEndTime + dwellDuration;\n const zoomOutStartTime = dwellEndTime + waitBeforeZoomOut;\n const zoomOutEndTime = zoomOutStartTime + zoomOutDuration;\n\n const adjustedBBox = {\n x: rawBBox.x,\n y: rawBBox.y,\n height: rawBBox.height,\n width: rawBBox.width,\n };\n\n const xPadding = 50;\n const requiredScale = (svgDom.clientWidth - xPadding) / adjustedBBox.width;\n const effectiveScale = toFixed(Math.min(requiredScale, maxScale));\n const toPerc = getPercent(fromTime + duration);\n\n // Calculate center of the element\n const elementCenterX = toFixed(adjustedBBox.x + adjustedBBox.width / 2);\n const elementCenterY = toFixed(adjustedBBox.y + adjustedBBox.height / 2);\n\n // Calculate viewport center\n const viewportCenterX = toFixed(viewport.width / 2);\n const viewportCenterY = toFixed(viewport.height / 2);\n\n // Calculate translation needed to center the element\n const translateX = toFixed(viewportCenterX - elementCenterX);\n const translateY = toFixed(viewportCenterY - elementCenterY);\n\n const transformOrigin = `${elementCenterX}px ${elementCenterY}px`;\n\n const rootGSelector = `svg#${sceneId} g#${rootGId}`;\n const animatedElementSelector =\n type === \"bringToFront\" ? `${rootGSelector} ${bringToFrontSelector}`\n : addToRootSvg ? \":scope\"\n : rootGSelector;\n\n /** Add root svg zoom in-out animation to the typed */\n const animProp = getAnimationProperty({\n animName: `scene-${sceneIndex}-type-zoom`,\n elemSelector: animatedElementSelector,\n totalDuration,\n otherProps: `transform-origin: ${transformOrigin};`,\n });\n const style = fixIndent(`\n @keyframes scene-${sceneIndex}-type-zoom {\n ${getPercent(zoomInStartTime)}% { transform: translate(0px, 0px) scale(1);}\n ${getPercent(zoomInEndTime)}% { transform: translate(${translateX}px, ${translateY}px) scale(${effectiveScale}); }\n ${getPercent(zoomOutStartTime)}% { transform: translate(${translateX}px, ${translateY}px) scale(${effectiveScale}); }\n ${getPercent(zoomOutEndTime)}% { transform: translate(0px, 0px) scale(1); }\n ${toFixed(\n Math.min(100, toPerc + 0.1),\n 4,\n )}% { transform: translate(0px, 0px) scale(1); }\n }\n ${animProp}\n `);\n return { style };\n};\n" }, { "path": "client/src/app/domToSVG/SVGif/compressSVGif.ts", "content": "/**\n * Given an SVG with multiple SVG scenes inside ,\n * identify which g elements have the same data-selector attribute and outerHTML across scenes and\n * compress them by only keeping one instance and replacing the others with elements referencing the first.\n */\n\nimport { isDefined } from \"src/utils/utils\";\nimport { SVG_NAMESPACE } from \"../domToSVG\";\nimport type { SVGifParsedScene } from \"./getSVGifParsedScenes\";\n\nexport const compressSVGif = (\n svg: SVGSVGElement,\n parsedScenes: SVGifParsedScene[],\n) => {\n const defs = document.createElementNS(SVG_NAMESPACE, \"defs\");\n svg.appendChild(defs); // to ensure the SVG namespace is defined\n\n const allSelectorNodes = Array.from(\n svg.querySelectorAll(`[data-selector]`),\n );\n const nodesMap = new Map();\n allSelectorNodes.forEach((n) => {\n const { selector } = n.dataset;\n if (selector && n.outerHTML.length > 150) {\n nodesMap.set(selector, n);\n }\n });\n const nodesToReuse = new Map();\n const pushNodeToReuse = (selector: string, node: SVGGElement) => {\n const id = `c-${selector.replaceAll(\" \", \"_\").replaceAll(\".\", \"_\")}`;\n if (!nodesToReuse.has(selector)) {\n nodesToReuse.set(selector, node);\n const clonedNode = node.cloneNode(true) as SVGGElement;\n clonedNode.setAttribute(\"id\", id);\n clonedNode.removeAttribute(\"data-selector\");\n defs.appendChild(clonedNode);\n }\n const useElem = document.createElementNS(SVG_NAMESPACE, \"use\");\n useElem.setAttribute(\"href\", `#${id}`);\n node.replaceWith(useElem);\n };\n const scenes = Array.from(svg.querySelectorAll(`#all-scenes > svg`));\n\n nodesMap.forEach((originalNode, selector) => {\n const matchingScenes = scenes\n .map((scene) => {\n const [matchingNode, ...others] = scene.querySelectorAll(\n `[data-selector=${JSON.stringify(selector)}]`,\n );\n /** Do not compress nodes that are selected in animations to ensure css selectors still work */\n const parsedScene = parsedScenes.find((ps) => ps.svgDom === scene);\n if (!parsedScene) {\n throw \"Could not find parsedScene\";\n }\n if (\n matchingNode &&\n !others.length &&\n matchingNode.outerHTML === originalNode.outerHTML &&\n !parsedScene.animations.some((anim) => {\n const node =\n anim.type !== \"wait\" && anim.type !== \"moveTo\" ?\n matchingNode.querySelector(anim.elementSelector)\n : null;\n return node;\n })\n ) {\n return { scene, matchingNode };\n }\n })\n .filter(isDefined);\n\n if (matchingScenes.length > 1) {\n matchingScenes.forEach(({ matchingNode }) => {\n pushNodeToReuse(selector, matchingNode);\n });\n }\n });\n\n return svg;\n};\n" }, { "path": "client/src/app/domToSVG/SVGif/getSVGif.ts", "content": "import { fixIndent } from \"@common/utils\";\nimport type { SVGif } from \"src/Testing\";\nimport { SVG_NAMESPACE } from \"../domToSVG\";\nimport { addSVGifPointer } from \"./addSVGifPointer\";\nimport { addSVGifTimelineControls } from \"./addSVGifTimelineControls\";\nimport { getSVGifAnimations } from \"./getSVGifAnimations\";\nimport { getSVGifParsedScenes } from \"./getSVGifParsedScenes\";\nimport { compressSVGif } from \"./compressSVGif\";\n\nexport const getSVGif = (\n scenes: SVGif.Scene[],\n svgFiles: Map,\n) => {\n const { parsedScenes, firstScene } = getSVGifParsedScenes(scenes, svgFiles);\n const { viewBox, width, height } = firstScene;\n const svg = document.createElementNS(SVG_NAMESPACE, \"svg\");\n svg.setAttribute(\"xmlns\", SVG_NAMESPACE);\n svg.setAttribute(\"viewBox\", viewBox);\n const style = document.createElementNS(SVG_NAMESPACE, \"style\");\n svg.appendChild(style);\n const appendStyle = (s: string) => {\n style.textContent += \"\\n\\n\" + fixIndent(s);\n };\n const g = document.createElementNS(SVG_NAMESPACE, \"g\");\n g.setAttribute(\"id\", \"all-scenes\");\n svg.appendChild(g);\n\n const { cursorKeyframes, sceneAnimations, totalDuration } =\n getSVGifAnimations({ width, height }, g, parsedScenes, appendStyle);\n\n const getThisAnimationProperty = (\n args: Omit<\n Parameters[0],\n \"totalDuration\" | \"loop\"\n >,\n onlyValue?: boolean,\n ) => getAnimationProperty({ ...args, totalDuration }, onlyValue);\n\n sceneAnimations.forEach(({ sceneId, keyframes }) => {\n const animationName = `scene-${sceneId}-anim`;\n appendStyle(`\n @keyframes ${animationName} {\n ${keyframes.map((v) => ` ${v}`).join(\"\\n\")}\n }\n ${getThisAnimationProperty({ elemSelector: `#${sceneId}`, animName: animationName })}\n `);\n });\n\n addSVGifTimelineControls({\n width,\n height,\n appendStyle,\n g,\n totalDuration,\n sceneAnimations,\n });\n addSVGifPointer({ cursorKeyframes, g, appendStyle, totalDuration });\n\n /** This appears to break/appear narrower on ios ?!! */\n compressSVGif(svg, parsedScenes);\n\n svg\n .querySelectorAll(\"[data-selector]\")\n .forEach((el) => el.removeAttribute(\"data-selector\"));\n // document.body.appendChild(svg); // debugging\n\n /** Remove defs with empty styles */\n svg.querySelectorAll(\"defs\").forEach((defs) => {\n if (!defs.innerHTML || !defs.innerHTML.trim()) {\n defs.remove();\n }\n });\n svg.setAttribute(\"data-duration\", totalDuration);\n const xmlSerializer = new XMLSerializer();\n const svgString = xmlSerializer.serializeToString(svg);\n return svgString;\n};\n\nexport const getAnimationProperty = (\n {\n elemSelector,\n animName,\n totalDuration,\n otherProps = \"\",\n easeFunction = \"ease-in-out\",\n }: {\n elemSelector: string;\n animName: string;\n totalDuration: number;\n otherProps?: string;\n easeFunction?: \"ease-in-out\" | \"ease-out\";\n },\n onlyValue = false,\n) => {\n const loop = true as boolean;\n const value = `animation: ${animName} ${totalDuration}ms ${easeFunction} ${\n loop ? \"infinite\" : \"forwards\"\n };`;\n if (onlyValue) return value;\n return fixIndent(`\n ${elemSelector} {\n ${value}\n ${otherProps}\n }\n `);\n};\n" }, { "path": "client/src/app/domToSVG/SVGif/getSVGifAnimations.ts", "content": "import { fixIndent } from \"@common/utils\";\nimport { SVG_NAMESPACE } from \"../domToSVG\";\nimport { renderSvg } from \"../text/textToSVG\";\nimport { toFixed } from \"../utils/toFixed\";\nimport { addSVGifCaption } from \"./addSVGifCaption\";\nimport { getSVGifCursorAnimationHandler } from \"./animations/getSVGifCursorAnimationHandler\";\nimport { getSVGifTypeAnimation } from \"./animations/getSVGifTypeAnimation\";\nimport { getSVGifZoomToAnimation } from \"./animations/getSVGifZoomToAnimation\";\nimport { getAnimationProperty } from \"./getSVGif\";\nimport type { SVGifParsedScene } from \"./getSVGifParsedScenes\";\nimport { getSVGifRevealKeyframes } from \"./getSVGifRevealKeyframes\";\nimport { getSVGifTargetBBox } from \"./getSVGifTargetBBox\";\n\n/**\n * Given an SVGifScenes, return the animations\n */\nexport const getSVGifAnimations = (\n { height, width }: { width: number; height: number },\n g: SVGGElement,\n parsedScenes: SVGifParsedScene[],\n appendRootStyle: (s: string) => void,\n) => {\n const totalSvgifDuration = parsedScenes.reduce(\n (acc, { animations }) =>\n acc + animations.reduce((a, { duration }) => a + duration, 0),\n 0,\n );\n\n const getPercent = (ms: number, offset: 0 | 0.1 | -0.1 = 0) => {\n const perc = (ms / totalSvgifDuration) * 100;\n const result = Math.max(0, Math.min(100, perc));\n const resultWithOffset = result + offset;\n\n return toFixed(resultWithOffset, 4);\n };\n const cursorHandler = getSVGifCursorAnimationHandler({\n getPercent,\n parsedScenes,\n totalSvgifDuration,\n width,\n height,\n });\n\n const sceneAnimations: {\n sceneId: string;\n svgName: string;\n startMs: number;\n duration: number;\n keyframes: string[];\n }[] = [];\n let currentPrevDuration = 0;\n const prevSceneAnim = sceneAnimations.at(-1);\n\n for (const [sceneIndex, parsedScene] of parsedScenes.entries()) {\n const { svgFileName, animations, svgDom, caption } = parsedScene;\n if (!animations.length) {\n throw new Error(\n `No animations provided for scene ${sceneIndex} (${svgFileName}). Each scene must have at least one animation.`,\n );\n }\n const sceneId = `scene-${sceneIndex}`;\n const sceneStartMs = currentPrevDuration;\n const sceneFromPercent = getPercent(currentPrevDuration);\n\n const renderedSceneSVG = renderSvg(svgDom);\n\n const sceneKeyframes: string[] = [];\n if (prevSceneAnim) {\n if (prevSceneAnim.svgName === svgFileName) {\n throw new Error(\"SVG file must change between scenes\");\n }\n }\n if (currentPrevDuration) {\n sceneKeyframes.push(`0% ${hidden}`);\n sceneKeyframes.push(\n `${getPercent(currentPrevDuration, -0.1)}% ${hidden}`,\n );\n }\n\n sceneKeyframes.push(`${getPercent(currentPrevDuration)}% ${visible}`);\n\n const sceneNodeAnimations: SceneNodeAnimation[] = [];\n let sceneNodeAnimationsStyle = \"\";\n const getDefs = () => {\n let defs = svgDom.querySelector(\"defs\");\n if (!defs) {\n defs = document.createElementNS(SVG_NAMESPACE, \"defs\");\n svgDom.insertBefore(defs, svgDom.firstChild);\n }\n return defs;\n };\n let styleElem = svgDom.querySelector(\"style\");\n const appendStyle = (style: string) => {\n if (!styleElem) {\n styleElem = document.createElementNS(SVG_NAMESPACE, \"style\");\n const defs = getDefs();\n defs.appendChild(styleElem);\n }\n console.log(\"Appending style:\", style);\n styleElem.textContent += style;\n };\n for (const [animationIndex, animation] of animations.entries()) {\n const bboxInfo =\n animation.type !== \"moveTo\" && animation.type !== \"wait\" ?\n getSVGifTargetBBox({\n elementSelector: animation.elementSelector,\n svgDom,\n svgFileName,\n width,\n height,\n })\n : undefined;\n if (animation.type === \"wait\") {\n } else if (\n animation.type === \"click\" ||\n animation.type === \"clickAppearOnHover\" ||\n animation.type === \"moveTo\"\n ) {\n cursorHandler.addAnimation({\n currentPrevDuration,\n animation,\n animationIndex,\n animations,\n bbox: bboxInfo?.bbox,\n sceneIndex,\n svgFileName,\n sceneNodeAnimations,\n sceneId,\n });\n } else {\n const { duration, elementSelector } = animation;\n if (!bboxInfo) throw new Error(\"Missing bboxInfo\");\n const { bbox, element } = bboxInfo;\n const fromTime = currentPrevDuration;\n const fromPerc = getPercent(fromTime);\n if (animation.type === \"fadeIn\" || animation.type === \"growIn\") {\n const toTime = fromTime + duration;\n const toPerc = getPercent(toTime);\n sceneNodeAnimations.push({\n sceneId,\n elemSelector: elementSelector,\n keyframes: getSVGifRevealKeyframes({\n fromPerc,\n toPerc,\n mode: animation.type === \"fadeIn\" ? \"opacity\" : \"growIn\",\n // mode: \"top to bottom\",\n }),\n });\n } else if (animation.type === \"type\") {\n const parsedAnimations = getSVGifTypeAnimation(\n { height, width },\n { element, bbox },\n parsedScene,\n animation,\n {\n sceneId,\n sceneIndex,\n totalDuration: totalSvgifDuration,\n getPercent,\n fromTime,\n },\n );\n sceneNodeAnimations.push(...parsedAnimations.sceneNodeAnimations);\n appendStyle(parsedAnimations.style);\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n } else if (animation.type === \"zoomToElement\") {\n const parsedAnimations = getSVGifZoomToAnimation(\n { height, width },\n { bbox },\n parsedScene,\n animation,\n {\n sceneId,\n sceneIndex,\n totalDuration: totalSvgifDuration,\n getPercent,\n fromTime,\n },\n true,\n );\n appendRootStyle(parsedAnimations.style);\n }\n }\n const isParallelAnimation = animation.type === \"zoomToElement\";\n currentPrevDuration += isParallelAnimation ? 0 : animation.duration;\n }\n\n if (sceneNodeAnimations.length) {\n sceneNodeAnimationsStyle += \"\\n\";\n let nodeAnimIndex = 0;\n sceneNodeAnimations.forEach(({ sceneId, elemSelector, keyframes }) => {\n nodeAnimIndex++;\n const animationName = `node-${sceneId}-anim-${nodeAnimIndex}`;\n sceneNodeAnimationsStyle += \"\\n\";\n sceneNodeAnimationsStyle += fixIndent(`\n @keyframes ${animationName} {\n ${keyframes.map((v) => ` ${v}`).join(\"\\n\")}\n }\n ${getAnimationProperty({ elemSelector: `#${sceneId} ${elemSelector}`, animName: animationName, totalDuration: totalSvgifDuration })}\n `);\n });\n\n appendStyle(sceneNodeAnimationsStyle);\n }\n\n if (caption) {\n addSVGifCaption({\n svgDom,\n appendStyle,\n width,\n height,\n caption,\n fromPerc: sceneFromPercent,\n toPerc: getPercent(currentPrevDuration),\n totalDuration: totalSvgifDuration,\n sceneId,\n });\n }\n const serializer = new XMLSerializer();\n const svgString = serializer.serializeToString(svgDom);\n appendSvgToSvg({ id: sceneId, svgFile: svgString, svgDom }, g);\n\n const isLastScene = sceneIndex === parsedScenes.length - 1;\n sceneKeyframes.push(`${getPercent(currentPrevDuration)}% ${visible}`);\n if (!isLastScene) {\n const toPerc = getPercent(currentPrevDuration, 0.1);\n sceneKeyframes.push(`${getPercent(currentPrevDuration, 0.1)}% ${hidden}`);\n if (toPerc < 100) {\n sceneKeyframes.push(`100% ${hidden}`);\n }\n }\n\n sceneAnimations.push({\n sceneId,\n startMs: sceneStartMs,\n duration: currentPrevDuration - sceneStartMs,\n svgName: svgFileName,\n keyframes: sceneKeyframes,\n });\n renderedSceneSVG.remove();\n }\n const { cursorKeyframes } = cursorHandler.getCursorKeyframes();\n return {\n cursorKeyframes,\n sceneAnimations,\n totalDuration: totalSvgifDuration,\n };\n};\n\nexport type SceneNodeAnimation = {\n sceneId: string;\n elemSelector: string;\n keyframes: string[];\n};\n\nconst appendSvgToSvg = (\n { svgFile, id, svgDom }: { svgFile: string; id: string; svgDom: SVGElement },\n g: SVGGElement,\n) => {\n svgDom.setAttribute(\"id\", id);\n g.appendChild(svgDom);\n\n return {\n remove: () => {\n svgDom.remove();\n },\n };\n};\n\nconst visible = \"{ visibility: visible; }\";\nconst hidden = \"{ visibility: hidden; }\";\n" }, { "path": "client/src/app/domToSVG/SVGif/getSVGifParsedScenes.ts", "content": "import type { SVGif } from \"src/Testing\";\n\nconst parseSVGWithViewBox = (\n svgFileName: string,\n svgFiles: Map,\n) => {\n if (!svgFileName) {\n throw \"SVG file name is empty\";\n }\n const svgFile = svgFiles.get(svgFileName + \".svg\");\n if (!svgFile) {\n throw `SVG file not found: ${svgFileName} \\nExpecting one of: ${svgFiles.keys().toArray()}`;\n }\n const parsedSVG = new DOMParser().parseFromString(svgFile, \"image/svg+xml\");\n const viewBox = parsedSVG.documentElement.getAttribute(\"viewBox\");\n if (!viewBox) {\n throw `SVG file ${svgFileName} does not have a viewBox attribute`;\n }\n\n const width = Number(viewBox.split(\" \")[2]);\n const height = Number(viewBox.split(\" \")[3]);\n if (!width || !height) {\n throw `Invalid viewBox dimensions in SVG file ${svgFileName}`;\n }\n\n return {\n svgDom: parsedSVG.documentElement as unknown as SVGElement,\n width,\n height,\n viewBox,\n svgFile,\n };\n};\n\nexport type SVGifParsedScene = ReturnType &\n SVGif.Scene;\n\nexport const getSVGifParsedScenes = (\n scenes: SVGif.Scene[],\n svgFiles: Map,\n) => {\n const parsedScenes = scenes.map((scene) => ({\n ...scene,\n ...parseSVGWithViewBox(scene.svgFileName, svgFiles),\n }));\n const firstScene = parsedScenes[0];\n if (!firstScene) {\n throw \"No scenes provided\";\n }\n\n return { parsedScenes, firstScene };\n};\n" }, { "path": "client/src/app/domToSVG/SVGif/getSVGifRevealKeyframes.ts", "content": "import { toFixed } from \"../utils/toFixed\";\n\nexport const getSVGifRevealKeyframes = ({\n fromPerc,\n toPerc,\n mode,\n}: {\n fromPerc: number;\n toPerc: number;\n mode: \"top to bottom\" | \"left to right\" | \"opacity\" | \"growIn\";\n}) => {\n if (mode === \"growIn\") {\n return [\n !fromPerc ? \"\" : (\n `0% { opacity: 0; transform: scale(0.2); transform-origin: center; }`\n ),\n `${toFixed(fromPerc, 4)}% { opacity: 0; transform: scale(0.2); transform-origin: center; }`,\n `${toFixed(fromPerc + 0.1, 4)}% { opacity: 0; transform: scale(0.2); transform-origin: center; }`,\n `${toFixed(toPerc, 4)}% { opacity: 1; transform: scale(1); transform-origin: center; }`,\n toPerc === 100 ? \"\" : (\n `100% { opacity: 1; transform: scale(1); transform-origin: center; }`\n ),\n ].filter(Boolean);\n }\n if (mode === \"opacity\") {\n return [\n !fromPerc ? \"\" : `0% { opacity: 0; }`,\n `${toFixed(fromPerc, 4)}% { opacity: 0; }`,\n `${toFixed(fromPerc + 0.1, 4)}% { opacity: 0; }`,\n `${toFixed(toPerc, 4)}% { opacity: 1; }`,\n toPerc === 100 ? \"\" : `100% { opacity: 1; }`,\n ].filter(Boolean);\n }\n const clippedInset =\n mode === \"top to bottom\" ? `inset(0 0 100% 0)` : `inset(0 100% 0 0)`;\n return [\n !fromPerc ? \"\" : `0% { opacity: 0; clip-path: ${clippedInset} }`,\n `${toFixed(fromPerc, 4)}% { opacity: 0; clip-path: ${clippedInset} }`,\n `${toFixed(fromPerc + 0.1, 4)}% { opacity: 1; clip-path: ${clippedInset} }`,\n `${toFixed(toPerc, 4)}% { opacity: 1; clip-path: inset(0 0 0 0); }`,\n toPerc === 100 ? \"\" : `100% { opacity: 1; clip-path: inset(0 0 0 0); }`,\n ].filter(Boolean);\n};\n" }, { "path": "client/src/app/domToSVG/SVGif/getSVGifTargetBBox.ts", "content": "export const getSVGifTargetBBox = ({\n elementSelector,\n svgDom,\n svgFileName,\n width,\n height,\n}: {\n elementSelector: string;\n svgDom: SVGElement;\n svgFileName: string;\n width: number;\n height: number;\n}) => {\n const element = svgDom.querySelector(elementSelector);\n if (!element) {\n throw `Element not found: ${elementSelector} in SVG file ${svgFileName}`;\n }\n\n const bbox = element.getBBox();\n\n /* Clamp width and height to be within visible bounds */\n bbox.x = Math.max(0, Math.min(bbox.x, width));\n bbox.y = Math.max(0, Math.min(bbox.y, height));\n bbox.width = Math.max(0, Math.min(bbox.width, width - bbox.x));\n bbox.height = Math.max(0, Math.min(bbox.height, height - bbox.y));\n\n return { bbox, element };\n};\n" }, { "path": "client/src/app/domToSVG/addFragmentViewBoxes.ts", "content": "import { SVG_NAMESPACE } from \"./domToSVG\";\n\nexport const addFragmentViewBoxes = (svg: SVGSVGElement, padding = 10) => {\n // Ensure the SVG has a viewBox defined (needed for calculations)\n if (!svg.hasAttribute(\"viewBox\")) {\n throw new Error(\"SVG must have a viewBox attribute\");\n }\n if (!svg.isConnected) {\n throw new Error(\"SVG must be in the DOM for bbox calculations\");\n }\n\n // Iterate over elements with a data-command attribute\n const groups = svg.querySelectorAll(\"g[data-command]\");\n\n groups.forEach((g) => {\n const cmd = g.getAttribute(\"data-command\");\n if (!cmd) return;\n\n const bbox = g.getBBox();\n\n const x = bbox.x - padding;\n const y = bbox.y - padding;\n const w = bbox.width + 2 * padding;\n const h = bbox.height + 2 * padding;\n\n const view = document.createElementNS(SVG_NAMESPACE, \"view\");\n const id = cmd.replace(/\\./g, \"_\");\n if (svg.querySelector(`view#${id}`)) {\n console.warn(`View ID collision for ${id}`);\n return;\n }\n view.setAttribute(\"id\", id);\n view.setAttribute(\"viewBox\", [x, y, w, h].map(Math.round).join(\" \"));\n\n svg.appendChild(view);\n });\n /**\n * Ensures the img tag size matches the viewBox size when using fragment identifiers\n */\n svg.setAttribute(\"preserveAspectRatio\", \"xMidYMid meet\");\n svg.setAttribute(\"width\", \"100%\");\n svg.setAttribute(\"height\", \"100%\");\n};\n" }, { "path": "client/src/app/domToSVG/containers/addOverflowClipPath.ts", "content": "import { includes } from \"../../../dashboard/W_SQL/W_SQLBottomBar/W_SQLBottomBar\";\nimport type { WhatToRenderOnSVG } from \"../utils/getWhatToRenderOnSVG\";\nimport { isElementNode } from \"../utils/isElementVisible\";\nimport type { SVGContext } from \"./elementToSVG\";\n\nexport const addOverflowClipPath = (\n element: HTMLElement,\n style: CSSStyleDeclaration,\n g: SVGGElement,\n {\n x,\n height,\n width,\n y,\n }: {\n x: number;\n y: number;\n width: number;\n height: number;\n },\n context: SVGContext,\n whatToRender: Pick,\n) => {\n /**\n * If overflow is set to hidden, we need to add a clip path to the group\n */\n if (!mustAddClipPath(element, style)) return;\n const borderWidth =\n whatToRender.border?.type === \"border\" ?\n whatToRender.border.borderWidth\n : 0;\n\n /**\n * This is to ensure we don't cut out the rounded parent corners\n * */\n // const parentWithRoundedCorners = element\n const inputBorderRadius =\n element instanceof HTMLInputElement ? \"8px\" : style.borderRadius || \"0\";\n const borderRadiusValue = parseFloat(inputBorderRadius);\n const roundProperty =\n borderRadiusValue ? ` round ${borderRadiusValue}px` : \"\";\n const translate = g\n .getAttribute(\"transform\")\n ?.split(\"translate(\")[1]\n ?.split(\")\")[0];\n const [transformX = 0, transformY = 0] =\n translate ? translate.split(\",\").map((v) => parseFloat(v.trim())) : [0, 0];\n\n const top = y - borderWidth - transformY;\n const right = context.width - x - width - borderWidth - transformX;\n const bottom = context.height - y - height - borderWidth - transformY;\n const left = x - borderWidth - transformX;\n\n const insetValues = [top, right, bottom, left]\n .map((v) => (v < 0 ? 0 : v))\n .map((v) => `${v}px`)\n .join(\" \");\n\n g._overflowClipPath = {\n x,\n y,\n width,\n height,\n };\n g.style.clipPath = `inset(${insetValues} ${roundProperty}) view-box`;\n};\n\nconst mustAddClipPath = (element: HTMLElement, style: CSSStyleDeclaration) => {\n if (\n element instanceof HTMLSelectElement ||\n element instanceof HTMLButtonElement ||\n element instanceof HTMLLabelElement\n ) {\n return false;\n }\n if (\n element instanceof HTMLInputElement ||\n element instanceof HTMLTextAreaElement\n ) {\n return true;\n }\n\n if (element instanceof HTMLCanvasElement) {\n return true;\n }\n if (!includes(style.overflow, [\"hidden\", \"auto\", \"scroll\", \"clip\"])) {\n return false;\n }\n if (!element.children.length && element.childNodes.length) {\n return true;\n }\n\n /**\n * Ensures the sql tooltip is not overflowing out of the sql editor\n if (element.className.includes(\"monaco-scrollable-element\")) {\n debugger;\n }\n */\n const isRelativeOrAbsolute = includes(style.position, [\n \"relative\",\n \"absolute\",\n ]);\n\n const isBoundingChildren = Array.from(element.children).some((child) => {\n if (!isElementNode(child)) {\n return false;\n }\n const childStyle = getComputedStyle(child);\n if (childStyle.position === \"absolute\") return isRelativeOrAbsolute;\n if (childStyle.position !== \"fixed\") return true;\n });\n return isBoundingChildren;\n /* To expensive and not accurate enough */\n // return Array.from(element.children).some(\n // (child) => isElementVisible(child).isVisible,\n // );\n};\n" }, { "path": "client/src/app/domToSVG/containers/bgAndBorderToSVG.ts", "content": "import { SVG_NAMESPACE } from \"../domToSVG\";\nimport type { SVGScreenshotNodeType } from \"../domToThemeAwareSVG\";\nimport { toFixed } from \"../utils/toFixed\";\n\nexport function hasBorder(style: CSSStyleDeclaration) {\n return (\n style.borderTopWidth !== \"0px\" ||\n style.borderRightWidth !== \"0px\" ||\n style.borderBottomWidth !== \"0px\" ||\n style.borderLeftWidth !== \"0px\"\n );\n}\n\nexport const addSpecificBorders = (\n g: SVGGElement,\n x: number,\n y: number,\n width: number,\n height: number,\n style: CSSStyleDeclaration,\n) => {\n const drawBorder = (\n x1: number,\n y1: number,\n x2: number,\n y2: number,\n color: string,\n width: number,\n ) => {\n const border = document.createElementNS(SVG_NAMESPACE, \"line\") as Extract<\n SVGScreenshotNodeType,\n SVGLineElement\n >;\n border._purpose = { border: true };\n border.setAttribute(\"x1\", x1);\n border.setAttribute(\"y1\", y1);\n border.setAttribute(\"x2\", x2);\n border.setAttribute(\"y2\", y2);\n border.setAttribute(\"stroke\", color);\n border.setAttribute(\"stroke-width\", width);\n g.appendChild(border);\n };\n\n const {\n borderTopWidth,\n borderRightWidth,\n borderBottomWidth,\n borderLeftWidth,\n borderTopColor,\n borderRightColor,\n borderBottomColor,\n borderLeftColor,\n } = style;\n\n // Top border\n if (borderTopWidth !== \"0px\") {\n const borderWidth = parseFloat(borderTopWidth);\n drawBorder(\n x,\n /** Given that the x,y,w,h refer to the rectangle edges, we need to subtract half width of the overflowing border to match the dimensions */\n y + borderWidth / 2,\n x + width,\n y + borderWidth / 2,\n borderTopColor,\n borderWidth,\n );\n }\n\n // Right border\n if (borderRightWidth !== \"0px\") {\n const borderWidth = parseFloat(borderRightWidth);\n drawBorder(\n x - borderWidth / 2 + width,\n y,\n x - borderWidth / 2 + width,\n y + height,\n borderRightColor,\n borderWidth,\n );\n }\n\n // Bottom border\n if (borderBottomWidth !== \"0px\") {\n const borderWidth = parseFloat(borderBottomWidth);\n\n drawBorder(\n x,\n y - borderWidth / 2 + height,\n x + width,\n y - borderWidth / 2 + height,\n borderBottomColor,\n borderWidth,\n );\n }\n\n // Left border\n if (borderLeftWidth !== \"0px\") {\n const borderWidth = parseFloat(borderLeftWidth);\n drawBorder(\n x + borderWidth / 2,\n y,\n x + borderWidth / 2,\n y + height,\n borderLeftColor,\n borderWidth,\n );\n }\n};\n\nexport function getBackgroundColor(style: CSSStyleDeclaration) {\n const { backgroundColor, backgroundImage } = style;\n if (backgroundImage.includes(\"gradient\")) {\n console.warn(\"TODO: handle gradients\");\n // TODO: handle gradients\n // return backgroundImage\n // .split(\"var(--\")\n // .map((cssVar, index) => {\n // if (!index) return cssVar;\n // const [varName, ...endParts] = cssVar.split(\")\");\n // const value = getComputedStyle(document.documentElement)\n // .getPropertyValue(\"--\" + varName)\n // .trim();\n // return value + endParts.join(\")\");\n // })\n // .join(\"\");\n }\n if (backgroundColor.startsWith(\"rgba\") && backgroundColor.endsWith(\"0)\")) {\n return undefined;\n }\n if (backgroundColor === \"transparent\") {\n return undefined;\n }\n return backgroundColor;\n}\n\nexport const getBackdropFilter = (style: CSSStyleDeclaration) => {\n return style.backdropFilter && style.backdropFilter !== \"none\" ?\n style.backdropFilter\n : undefined;\n};\n\n/**\n * Build a \"d\" attribute for a rectangle with arbitrary corner radii.\n * Accounts for border width and ensures crisp edges by using whole numbers\n * and half-pixel offsets when needed.\n */\nexport const roundedRectPath = (\n x: number,\n y: number,\n w: number,\n h: number,\n [rtl, rtr, rbr, rbl]: [number, number, number, number],\n) => {\n /* Clamp radii so that they never overlap (same thing the browser does) */\n const sumH = rtl + rtr;\n const sumH2 = rbl + rbr;\n const sumV = rtl + rbl;\n const sumV2 = rtr + rbr;\n\n if (sumH > w) {\n const scale = w / sumH;\n rtl *= scale;\n rtr *= scale;\n }\n if (sumH2 > w) {\n const scale = w / sumH2;\n rbl *= scale;\n rbr *= scale;\n }\n if (sumV > h) {\n const scale = h / sumV;\n rtl *= scale;\n rbl *= scale;\n }\n if (sumV2 > h) {\n const scale = h / sumV2;\n rtr *= scale;\n rbr *= scale;\n }\n\n /* Path – clockwise, starting in the top-left corner */\n return [\n `M${toFixed(x + rtl)},${toFixed(y)}`, // start\n `H${toFixed(x + w - rtr)}`, // top\n rtr ?\n `A${toFixed(rtr)},${toFixed(rtr)} 0 0 1 ${toFixed(x + w)},${toFixed(y + rtr)}`\n : \"\",\n `V${toFixed(y + h - rbr)}`, // right\n rbr ?\n `A${toFixed(rbr)},${toFixed(rbr)} 0 0 1 ${toFixed(x + w - rbr)},${toFixed(y + h)}`\n : \"\",\n `H${toFixed(x + rbl)}`, // bottom\n rbl ?\n `A${toFixed(rbl)},${toFixed(rbl)} 0 0 1 ${toFixed(x)},${toFixed(y + h - rbl)}`\n : \"\",\n `V${toFixed(y + rtl)}`, // left\n rtl ?\n `A${toFixed(rtl)},${toFixed(rtl)} 0 0 1 ${toFixed(x + rtl)},${toFixed(y)}`\n : \"\",\n \"Z\",\n ]\n .filter(Boolean)\n .join(\" \");\n};\n" }, { "path": "client/src/app/domToSVG/containers/deduplicateSVGPaths.ts", "content": "export const deduplicateSVGPaths = (svgElement: SVGElement) => {\n // Get or create defs element\n let defs = svgElement.querySelector(\"defs\");\n if (!defs) {\n defs = document.createElementNS(\"http://www.w3.org/2000/svg\", \"defs\");\n svgElement.insertBefore(defs, svgElement.firstChild);\n }\n\n // Map to track identical paths: key = path signature, value = { id, count }\n const pathMap = new Map();\n\n // Find all path elements (excluding those already in defs)\n const paths = Array.from(\n svgElement.querySelectorAll(\"path:not(defs path)\"),\n );\n\n paths.forEach((path) => {\n // Create a signature from the path's key attributes\n const signature = createPathSignature(path);\n\n if (pathMap.has(signature)) {\n // Duplicate found - replace with \n const { id } = pathMap.get(signature);\n replaceWithUse(path, id);\n } else {\n // First occurrence - move to defs if beneficial\n const id = `path-${pathMap.size}`;\n pathMap.set(signature, { id, element: path });\n }\n });\n\n // Move paths that appear multiple times to defs\n let deduplicatedCount = 0;\n pathMap.forEach(({ id, element }, signature) => {\n // Count how many times this signature appears\n const occurrences = paths.filter(\n (p) => createPathSignature(p) === signature,\n ).length;\n\n if (occurrences > 1) {\n moveToDefsAndReplaceAll(element, id, signature, paths, defs);\n deduplicatedCount++;\n }\n });\n\n return {\n deduplicatedCount,\n totalPaths: paths.length,\n };\n};\n\nconst createPathSignature = (path: SVGPathElement) => {\n // Create a unique signature based on path data and styling attributes\n // Exclude transform and position attributes\n const d = path.getAttribute(\"d\") || \"\";\n // const fill = path.getAttribute(\"fill\") || \"\";\n // const stroke = path.getAttribute(\"stroke\") || \"\";\n // const strokeWidth = path.getAttribute(\"stroke-width\") || \"\";\n // const fillRule = path.getAttribute(\"fill-rule\") || \"\";\n // const strokeLinecap = path.getAttribute(\"stroke-linecap\") || \"\";\n // const strokeLinejoin = path.getAttribute(\"stroke-linejoin\") || \"\";\n // const opacity = path.getAttribute(\"opacity\") || \"\";\n // const fillOpacity = path.getAttribute(\"fill-opacity\") || \"\";\n // const strokeOpacity = path.getAttribute(\"stroke-opacity\") || \"\";\n\n return JSON.stringify({\n d,\n // fill,\n // stroke,\n // strokeWidth,\n // fillRule,\n // strokeLinecap,\n // strokeLinejoin,\n // opacity,\n // fillOpacity,\n // strokeOpacity,\n });\n};\n\nconst moveToDefsAndReplaceAll = (\n originalPath: SVGPathElement,\n id,\n signature: string,\n allPaths: SVGPathElement[],\n defs: SVGDefsElement,\n) => {\n // Clone the path for defs (without transform)\n const defPath = originalPath.cloneNode(true) as SVGPathElement;\n defPath.setAttribute(\"id\", id);\n defPath.removeAttribute(\"transform\");\n defs.appendChild(defPath);\n\n // Replace all matching paths with elements\n allPaths.forEach((path) => {\n if (createPathSignature(path) === signature) {\n replaceWithUse(path, id);\n }\n });\n};\n\nconst replaceWithUse = (path: SVGPathElement, refId: string) => {\n const use = document.createElementNS(\"http://www.w3.org/2000/svg\", \"use\");\n use.setAttributeNS(\"http://www.w3.org/1999/xlink\", \"xlink:href\", `#${refId}`);\n use.setAttribute(\"href\", `#${refId}`);\n\n // Preserve transform and position attributes\n const preserveAttrs = [\"transform\", \"x\", \"y\", \"class\", \"id\", \"data-*\"];\n preserveAttrs.forEach((attr) => {\n if (path.hasAttribute(attr)) {\n use.setAttribute(attr, path.getAttribute(attr));\n }\n });\n\n // Copy data attributes\n Array.from(path.attributes).forEach((attr) => {\n if (attr.name.startsWith(\"data-\")) {\n use.setAttribute(attr.name, attr.value);\n }\n });\n\n const parent = path.parentNode;\n if (!parent) {\n return;\n // throw new Error(\"Path element has no parent node.\");\n }\n\n parent.replaceChild(use, path);\n};\n" }, { "path": "client/src/app/domToSVG/containers/elementToSVG.ts", "content": "import { getEntries } from \"@common/utils\";\nimport { drawShapesOnSVG } from \"../../../dashboard/Charts/drawShapes/drawShapesOnSVG\";\nimport { SVG_NAMESPACE } from \"../domToSVG\";\nimport { getBBoxCode, type SVGScreenshotNodeType } from \"../domToThemeAwareSVG\";\nimport { fontIconToSVG } from \"../graphics/fontIconToSVG\";\nimport { addImageFromDataURL, imgToSVG } from \"../graphics/imgToSVG\";\nimport { textToSVG } from \"../text/textToSVG\";\nimport { canvasToDataURL } from \"../utils/canvasToDataURL\";\nimport { getAnimationsHandler } from \"../utils/copyAnimationStylesToSvg\";\nimport { getWhatToRenderOnSVG } from \"../utils/getWhatToRenderOnSVG\";\nimport { isElementNode } from \"../utils/isElementVisible\";\nimport { toFixed } from \"../utils/toFixed\";\nimport { addOverflowClipPath } from \"./addOverflowClipPath\";\nimport { rectangleToSVG } from \"./rectangleToSVG\";\n\nexport type SVGContext = {\n docId: string;\n offsetX: number;\n offsetY: number;\n defs: SVGDefsElement;\n idCounter: number;\n fontFamilies: string[];\n cssDeclarations: Map;\n width: number;\n height: number;\n};\nexport type SVGNodeLayout = {\n x: number;\n y: number;\n width: number;\n height: number;\n style: CSSStyleDeclaration;\n};\n\nexport const elementToSVG = async (\n element: HTMLElement,\n parentSvg: SVGElement | SVGGElement,\n context: SVGContext,\n) => {\n /** Ensures bbox calculations are stable */\n\n const copyAnimations = getAnimationsHandler(element);\n\n const _whatToRender = await getWhatToRenderOnSVG(element, context, parentSvg);\n\n const { elemInfo, ...whatToRender } = _whatToRender;\n const { x, y, width, height, style, isVisible } = elemInfo;\n\n if (!isVisible && !_whatToRender.mightBeHovered) {\n return whatToRender;\n }\n\n const g = document.createElementNS(SVG_NAMESPACE, \"g\");\n g._domElement = element;\n g._whatToRender = _whatToRender;\n g.setAttribute(\n \"data-selector\",\n [element.nodeName.toLowerCase(), element.className].join(\".\"),\n );\n\n const roundedPosition = {\n x: Math.round(x),\n y: Math.round(y),\n width: Math.round(width),\n height: Math.round(height),\n };\n const bboxCode = getBBoxCode(element, roundedPosition);\n (g as SVGScreenshotNodeType)._bboxCode = bboxCode;\n\n getEntries({\n ...whatToRender.attributeData,\n }).forEach(([key, value]) => {\n if (value) {\n g.setAttribute(key, value);\n }\n });\n\n getEntries({\n ...whatToRender.childAffectingStyles,\n }).forEach(([key, value]) => {\n if (value && key === \"opacity\") {\n g.style[key] = value;\n }\n });\n\n const rectElem = rectangleToSVG(\n g,\n element,\n style,\n elemInfo,\n whatToRender,\n bboxCode,\n );\n\n if (whatToRender.text?.length) {\n whatToRender.text.forEach((textForSVG) => {\n textToSVG(element, g, textForSVG, style, bboxCode);\n });\n }\n\n if (element instanceof HTMLCanvasElement) {\n if (element._drawn?.shapes.length) {\n const { shapes, scale, translate } = element._drawn;\n const transformedG = document.createElementNS(SVG_NAMESPACE, \"g\");\n g.setAttribute(\"transform\", `translate(${x}, ${y})`);\n g.appendChild(transformedG);\n drawShapesOnSVG(\n shapes,\n context,\n transformedG,\n {\n scale,\n translate,\n },\n {\n width,\n height,\n },\n );\n } else {\n element._deckgl?.redraw(\"screenshot\");\n const canvas = element._deckgl?.getCanvas() || element;\n const dataURL = canvasToDataURL(canvas);\n addImageFromDataURL(g, dataURL, context, elemInfo);\n }\n }\n\n if (whatToRender.image?.type === \"foreignObject\") {\n parentSvg.appendChild(whatToRender.image.foreignObject);\n\n (whatToRender.image.foreignObject as SVGScreenshotNodeType)._bboxCode =\n bboxCode;\n return;\n }\n\n const { image } = whatToRender;\n if (image?.type === \"svgElement\") {\n const width =\n image.element instanceof HTMLImageElement ?\n image.element.width\n : element.clientWidth;\n const height =\n image.element instanceof HTMLImageElement ?\n image.element.height\n : element.clientHeight;\n const gWrapper = document.createElementNS(SVG_NAMESPACE, \"g\");\n parentSvg.appendChild(gWrapper);\n const svgClone = image.element.cloneNode(true) as SVGElement;\n svgClone.setAttribute(\"width\", `${toFixed(width)}`);\n svgClone.setAttribute(\"height\", `${toFixed(height)}`);\n gWrapper.style.transform = `translate(${toFixed(x)}px, ${toFixed(y)}px)`;\n gWrapper.style.color = style.color;\n gWrapper._gWrapperFor = element;\n gWrapper.appendChild(svgClone);\n } else if (image?.type === \"fontIcon\") {\n await fontIconToSVG(g, image, context, elemInfo);\n } else if (image?.type === \"img\") {\n await imgToSVG(g, image.element, elemInfo, context);\n } else if (image?.type === \"maskedElement\") {\n const { width, height, x, y } = element.getBoundingClientRect();\n const dataUrl = decodeURIComponent(\n style.maskImage.split(\",\")[1]!.slice(0, -2),\n );\n const parser = new DOMParser();\n const svgDoc = parser.parseFromString(dataUrl, \"image/svg+xml\");\n const svgElement = svgDoc.documentElement;\n svgElement.setAttribute(\"width\", `${toFixed(width)}`);\n svgElement.setAttribute(\"height\", `${toFixed(height)}`);\n svgElement.setAttribute(\"x\", toFixed(x));\n svgElement.setAttribute(\"y\", toFixed(y));\n svgElement.setAttribute(\"fill\", style.color);\n\n const wrapperG = document.createElementNS(SVG_NAMESPACE, \"g\");\n wrapperG.appendChild(svgElement);\n /** wrapperG is required to ensure animations work on safari */\n if (style.animation) {\n wrapperG.setAttribute(\n \"style\",\n `animation: ${style.animation}; transform-origin: ${toFixed(x + width / 2)}px ${toFixed(y + height / 2)}px;`,\n );\n }\n\n copyAnimations?.(style, wrapperG, context.cssDeclarations, false);\n\n parentSvg.appendChild(wrapperG);\n }\n\n if (image?.type !== \"maskedElement\") {\n copyAnimations?.(style, rectElem?.path ?? g, context.cssDeclarations, true);\n }\n\n for (const child of getChildrenSortedByZIndex(element)) {\n if (isElementNode(child)) {\n await elementToSVG(child, g, context);\n }\n }\n\n /** Must ensure we have a bbox for clicking interaction placement */\n if (!g.childNodes.length && whatToRender.attributeData) {\n const bboxRect = document.createElementNS(SVG_NAMESPACE, \"rect\");\n bboxRect.setAttribute(\"x\", toFixed(x));\n bboxRect.setAttribute(\"y\", toFixed(y));\n bboxRect.setAttribute(\"width\", toFixed(width));\n bboxRect.setAttribute(\"height\", toFixed(height));\n bboxRect.setAttribute(\"fill\", \"transparent\");\n g.appendChild(bboxRect);\n }\n if (g.childNodes.length) {\n addOverflowClipPath(\n element,\n style,\n g,\n { x, y, width, height },\n context,\n whatToRender,\n );\n parentSvg.appendChild(g);\n }\n\n return whatToRender;\n};\n\nconst getChildrenSortedByZIndex = (element: HTMLElement): HTMLElement[] => {\n const children = Array.from(element.children) as HTMLElement[];\n return children.slice(0).sort((a, b) => {\n const aZIndex = parseInt(getComputedStyle(a).zIndex) || 0;\n const bZIndex = parseInt(getComputedStyle(b).zIndex) || 0;\n return aZIndex - bZIndex;\n });\n};\n" }, { "path": "client/src/app/domToSVG/containers/rectangleToSVG.ts", "content": "import { fromEntries, getEntries } from \"@common/utils\";\nimport { SVG_NAMESPACE } from \"../domToSVG\";\nimport type { SVGScreenshotNodeType } from \"../domToThemeAwareSVG\";\nimport type { getWhatToRenderOnSVG } from \"../utils/getWhatToRenderOnSVG\";\nimport { addSpecificBorders, roundedRectPath } from \"./bgAndBorderToSVG\";\nimport type { SVGNodeLayout } from \"./elementToSVG\";\nimport { getBoxShadowAsDropShadow } from \"./shadowToSVG\";\nexport const BORDER_ELEMENT_TYPES = [\"rect\", \"path\", \"line\"] as const;\n\nexport const rectangleToSVG = (\n g: SVGGElement,\n element: HTMLElement,\n style: CSSStyleDeclaration,\n { x, y, width, height }: Pick,\n {\n border,\n background,\n backdropFilter,\n }: Pick<\n Awaited>,\n \"background\" | \"border\" | \"backdropFilter\"\n >,\n bboxCode: string,\n) => {\n const shadow = getBoxShadowAsDropShadow(style);\n const scrollMask =\n style.backdropFilter &&\n style.mask &&\n style.mask.includes(\"linear-gradient\");\n if (!border && !background && !shadow && !scrollMask && !backdropFilter) {\n return;\n }\n\n let _path: ReturnType | undefined;\n const getPath = () => {\n if (_path) return _path;\n const entries = getEntries({\n border,\n background,\n shadow,\n scrollMask,\n backdropFilter,\n } as const);\n const _purpose = fromEntries(entries.map(([k, v]) => [k, v]));\n const { path, showBorder, rtl, rtr, rbr, rbl, borderWidth } =\n getRectanglePath(style, { x, y, width, height }, { border });\n path._domElement = element;\n path._bboxCode = bboxCode;\n path._purpose = _purpose;\n\n /** This is required to make backgroundSameAsRenderedParent work as expected */\n path.setAttribute(\"fill\", \"none\");\n\n g.appendChild(path);\n _path = { path, showBorder, rtl, rtr, rbr, rbl, borderWidth };\n return _path;\n };\n\n const maskLinearGradients = style.maskImage.split(\"linear-gradient(\");\n const blendModes = style.maskComposite.split(\", \");\n if (\n maskLinearGradients.length > 1 &&\n blendModes.every((b) => b === \"source-in\")\n ) {\n const masks = maskLinearGradients.slice(1);\n\n masks.forEach((grad, index) => {\n if (index) {\n // Mask combining does not work\n return;\n }\n\n g.style.maskImage = style.maskImage;\n g.style.maskSize = `${width}px ${height}px`;\n g.style.maskPosition = `${x}px ${0}px`;\n g.style.maskPosition = `0px 0px`;\n });\n }\n\n if (background) {\n getPath().path.setAttribute(\"fill\", background);\n }\n\n if (style.animation) {\n getPath().path.style.animation = style.animation;\n }\n\n // TODO: shadow and border must be drawn outside the overflow clip path\n if (shadow) {\n getPath().path.style.filter = shadow.filter;\n }\n\n if (border) {\n const { outline } = border;\n if (outline) {\n // TODO: outline must be drawn outside the overflow clip path\n const outlineNode = getPath().path.cloneNode(\n true,\n ) as SVGScreenshotNodeType;\n outlineNode.setAttribute(\"fill\", \"none\");\n outlineNode.setAttribute(\"stroke-width\", outline.borderWidth + \"px\");\n outlineNode.setAttribute(\"stroke\", outline.borderColor);\n outlineNode.setAttribute(\"stroke-linejoin\", \"round\");\n outlineNode.setAttribute(\"stroke-linecap\", \"round\");\n g.appendChild(outlineNode);\n // const { path, rtl, rtr, rbr, rbl, showBorder, borderWidth } = getPath();\n // if (path instanceof SVGRectElement) {\n // throw new Error(\"Outline not supported for rect element\");\n // }\n // path.setAttribute(\n // \"d\",\n // roundedRectPath(\n // /** This is to ensure the new-connection connection type radio buttons are aligned */\n // x - outline.borderWidth / 2 + (!showBorder ? borderWidth : 0),\n // y - outline.borderWidth / 2 + (!showBorder ? borderWidth : 0),\n // width + outline.borderWidth,\n // height + outline.borderWidth,\n // [rtl, rtr, rbr, rbl],\n // ),\n // );\n }\n\n if (border.type === \"border\") {\n getPath().path.setAttribute(\"stroke-width\", border.borderWidth + \"px\");\n getPath().path.setAttribute(\"stroke\", border.borderColor);\n } else if (border.type === \"borders\") {\n addSpecificBorders(g, x, y, width, height, style);\n }\n }\n\n return _path;\n};\n\nconst getRectanglePath = (\n style: CSSStyleDeclaration,\n { x, y, width, height }: Pick,\n { border }: Pick>, \"border\">,\n) => {\n const minDimension = Math.min(width, height);\n const [rtl = 0, rtr = 0, rbr = 0, rbl = 0] = [\n style.borderTopLeftRadius,\n style.borderTopRightRadius,\n style.borderBottomRightRadius,\n style.borderBottomLeftRadius,\n ].map((r) => {\n const radiusNumber = parseFloat(r);\n if (r.includes(\"%\")) {\n const clampedPercentage = Math.min(50, radiusNumber);\n return (clampedPercentage / 100) * minDimension;\n }\n return radiusNumber;\n });\n\n const showBorder =\n border?.type == \"border\" && border.borderColor !== \"rgba(0, 0, 0, 0)\";\n\n const borderWidth = parseFloat(style.borderWidth);\n const visibleBorderWidth = showBorder ? borderWidth : 0;\n const adjusted = {\n x: x + visibleBorderWidth / 2,\n y: y + visibleBorderWidth / 2,\n width: width - visibleBorderWidth,\n height: height - visibleBorderWidth,\n };\n\n /** Use recangle if possible */\n const hasSingleRadius = new Set([rtl, rtr, rbr, rbl]).size === 1;\n const hasConstantBorder = !border || border.type === \"border\";\n if (hasSingleRadius && hasConstantBorder) {\n const rect = document.createElementNS(SVG_NAMESPACE, \"rect\") as Extract<\n SVGScreenshotNodeType,\n SVGRectElement\n >;\n rect.setAttribute(\"x\", adjusted.x);\n rect.setAttribute(\"y\", adjusted.y);\n rect.setAttribute(\"width\", adjusted.width);\n rect.setAttribute(\"height\", adjusted.height);\n rect.setAttribute(\"rx\", rtl);\n rect.setAttribute(\"ry\", rtl);\n return { path: rect, showBorder, rtl, rtr, rbr, rbl, borderWidth };\n }\n\n const path = document.createElementNS(SVG_NAMESPACE, \"path\") as Extract<\n SVGScreenshotNodeType,\n SVGPathElement\n >;\n path.setAttribute(\n \"d\",\n roundedRectPath(\n /** This is to ensure the new-connection connection type radio buttons are aligned */\n adjusted.x,\n adjusted.y,\n adjusted.width,\n adjusted.height,\n [rtl, rtr, rbr, rbl],\n ),\n );\n\n path satisfies SVGElementTagNameMap[(typeof BORDER_ELEMENT_TYPES)[number]];\n return { path, showBorder, rtl, rtr, rbr, rbl, borderWidth };\n};\n" }, { "path": "client/src/app/domToSVG/containers/shadowToSVG.ts", "content": "import { isDefined } from \"src/utils/utils\";\n\n/**\n * 'rgba(255, 0, 0, 0.21) 0px 1px 2px 0px'\n * or\n * 'rgba(255, 0, 0) 0px 1px 2px 0px'\n */\nexport const getBoxShadowAsDropShadow = (style: CSSStyleDeclaration) => {\n if (!style.boxShadow || style.boxShadow === \"none\") return;\n const boxShadows = style.boxShadow\n .split(\"rgb\")\n .filter((v) => v)\n .map((v) => \"rgb\" + v.trim())\n .map((v) => (v.endsWith(\",\") ? v.slice(0, -1) : v));\n\n const parsedBoxShadows = boxShadows\n .map((boxShadow) => {\n const [colorPart, offsetParts = \"\"] = boxShadow.split(\")\");\n const color = colorPart + \")\";\n const offsets = offsetParts\n .split(\" \")\n .map((v) => v.trim())\n .filter((v) => v);\n\n const offsetValues = offsets.map((v) => parseFloat(v));\n if (offsetValues.slice(0, 3).filter((v) => v === 0).length >= 3) {\n return;\n }\n return {\n color,\n offsets,\n offsetValues,\n };\n })\n .filter(isDefined);\n\n const filterParts = parsedBoxShadows.slice().map(\n ({ color, offsets }) =>\n `drop-shadow(${offsets\n .slice(0, 3)\n .map((part, index) => {\n if (index === 2 && part.endsWith(\"px\")) {\n // reduce blur radius due to SVG rendering differences\n return `${(parseFloat(part) * 0.5).toFixed(1)}px`;\n }\n return part;\n })\n .join(\" \")} ${color})`,\n );\n const filter = filterParts.join(\" \");\n return { filter, filterParts };\n};\n" }, { "path": "client/src/app/domToSVG/domToSVG.ts", "content": "import { includes } from \"prostgles-types\";\nimport { tout } from \"src/utils/utils\";\nimport { elementToSVG, type SVGContext } from \"./containers/elementToSVG\";\nimport type { SVGScreenshotNodeType } from \"./domToThemeAwareSVG\";\nimport { renderSvg, wrapAllSVGText } from \"./text/textToSVG\";\nimport { BORDER_ELEMENT_TYPES } from \"./containers/rectangleToSVG\";\n\nexport const SVG_NAMESPACE = \"http://www.w3.org/2000/svg\";\n\nexport const domToSVG = async (node: HTMLElement) => {\n const svg = document.createElementNS(SVG_NAMESPACE, \"svg\");\n const cssDeclarations = new Map();\n\n // Get dimensions and position\n const nodeBBox = node.getBoundingClientRect();\n\n svg.setAttribute(\"width\", nodeBBox.width.toString());\n svg.setAttribute(\"height\", nodeBBox.height.toString());\n svg.setAttribute(\"viewBox\", `0 0 ${nodeBBox.width} ${nodeBBox.height}`);\n\n // Create defs section for gradients, patterns, etc.\n const defs = document.createElementNS(SVG_NAMESPACE, \"defs\");\n svg.appendChild(defs);\n\n const rootId = \"id-\" + crypto.randomUUID().split(\"-\")[0];\n const context: SVGContext = {\n docId: rootId,\n offsetX: -nodeBBox.left,\n offsetY: -nodeBBox.top,\n width: nodeBBox.width,\n height: nodeBBox.height,\n defs: defs,\n idCounter: 0,\n cssDeclarations,\n fontFamilies: [],\n };\n await elementToSVG(node, svg, context);\n const style = document.createElementNS(SVG_NAMESPACE, \"style\");\n style.setAttribute(\"type\", \"text/css\");\n defs.appendChild(style);\n style.textContent = Array.from(cssDeclarations.entries())\n .map(([_selector, declaration]) => declaration)\n .join(\"\\n\");\n\n setBackdropFilters(svg);\n const { remove } = renderSvg(svg);\n wrapAllSVGText(svg);\n\n /** Add textLength to prevent bugs in ios (It uses a different font which is wider and overflows the existing rects and clip paths) */\n svg.querySelectorAll(\"text,tspan\").forEach((_text) => {\n const text = _text as SVGTextElement | SVGTSpanElement;\n const isMultiLine = text.textContent.includes(\"\\n\");\n if (\n isMultiLine ||\n /** Has tspans that we'll handle separately */\n (text instanceof SVGTextElement && text.children.length)\n ) {\n return;\n }\n const bbox = text.getBoundingClientRect();\n const ctm = text.getCTM();\n const scaleX = !ctm ? 1 : Math.hypot(ctm.a, ctm.c);\n text.setAttribute(\"textLength\", bbox.width / scaleX);\n text.setAttribute(\"lengthAdjust\", \"spacingAndGlyphs\");\n });\n\n /** Does not really seem effective */\n // deduplicateSVGPaths(svg);\n // await addFragmentViewBoxes(svg, 10);\n repositionAbsoluteFixedAndSticky(svg);\n moveBordersToTop(svg);\n removeOverflowedElements(svg);\n repositionMasks(svg);\n remove();\n await tout(100);\n\n const xmlSerializer = new XMLSerializer();\n const svgString = xmlSerializer.serializeToString(svg);\n const [firstG, otherChild] = Array.from(svg.children).filter(\n (c) => c instanceof SVGGElement,\n );\n if (!firstG) {\n throw new Error(\"No SVG content generated\");\n }\n if (otherChild) {\n throw new Error(\"Unexpected SVG structure - multiple root elements\");\n }\n firstG.setAttribute(\"id\", rootId);\n return { svgString, svg, rootId };\n};\n\n/**\n * In divs the mask positioning is relative to the div, but in SVG it's relative to the SVG canvas\n */\nconst repositionMasks = (svg: SVGGElement) => {\n const gElements = svg.querySelectorAll(\"g\");\n gElements.forEach((g) => {\n const { elemInfo } = g._whatToRender ?? {};\n const maskImage = g.style.maskImage;\n if (maskImage && elemInfo) {\n const { x, y, width, height } = elemInfo;\n const gBBox = g.getBoundingClientRect();\n const offsetX = x - gBBox.left;\n const offsetY = y - gBBox.top;\n g.style.maskSize = `${width}px ${height}px`;\n g.style.maskPosition = `${offsetX}px ${offsetY}px`;\n }\n });\n};\n\nconst removeOverflowedElements = (svg: SVGGElement) => {\n svg.querySelectorAll(\"g\").forEach((g) => {\n if (g._overflowClipPath) {\n const { x, y, width, height } = g._overflowClipPath;\n const clipXMin = x;\n const clipYMin = y;\n const clipXMax = x + width;\n const clipYMax = y + height;\n if (g.querySelector(`[style*=animation]`)) {\n return;\n }\n g.childNodes.forEach((child) => {\n /** Ignore animated elements */\n if (child instanceof SVGGElement || child instanceof SVGTextElement) {\n const elBBox = child.getBoundingClientRect();\n const cXMin = elBBox.x;\n const cYMin = elBBox.y;\n const cXMax = elBBox.x + elBBox.width;\n const cYMax = elBBox.y + elBBox.height;\n const bboxesOverlap =\n clipXMin < cXMax &&\n clipXMax > cXMin &&\n clipYMin < cYMax &&\n clipYMax > cYMin;\n if (!bboxesOverlap) {\n child.remove();\n }\n }\n });\n }\n });\n};\n\n/**\n * Hacky (because bg+border case is not handled) approach to ensure row card foreign key select fields rounded border corners are visible\n */\nconst moveBordersToTop = (svg: SVGGElement) => {\n svg\n .querySelectorAll(BORDER_ELEMENT_TYPES.join(\",\"))\n .forEach((path) => {\n if (\n path._purpose?.border &&\n !path._purpose.background &&\n path.parentElement instanceof SVGGElement\n ) {\n path.parentElement.appendChild(path);\n }\n });\n};\n\nconst repositionAbsoluteFixedAndSticky = (svg: SVGGElement) => {\n const [gBody, ...other] = Array.from(\n svg.querySelectorAll(\":scope > g\"),\n );\n if (!gBody || other.length || gBody._domElement !== document.body) {\n console.error(\"Unexpected SVG structure\", { svg, gBody, other });\n throw new Error(\"Unexpected SVG structure\");\n }\n const gElements = Array.from(svg.querySelectorAll(\"g\"));\n gElements.forEach((g) => {\n const style = g._domElement && getComputedStyle(g._domElement);\n if (style?.position === \"fixed\") {\n gBody.appendChild(g);\n }\n if (style?.position === \"absolute\") {\n const closestParent = getClosestRelativeOrAbsoluteParent(g) || gBody;\n const closestParentOrGBody =\n gBody.contains(closestParent) ? closestParent : gBody;\n closestParentOrGBody.appendChild(g);\n }\n\n /** Move sticky to end */\n if (\n style?.position === \"sticky\" &&\n g.parentElement instanceof SVGGElement\n ) {\n g.parentElement.appendChild(g);\n }\n });\n};\n\nconst getClosestRelativeOrAbsoluteParent = (g: SVGGElement) => {\n let parentG = g.parentElement;\n while (parentG && parentG instanceof SVGGElement && parentG._domElement) {\n const position = getComputedStyle(parentG._domElement).position;\n if (\n includes([\"relative\", \"absolute\"] as const, position) &&\n parentG._domElement !== g._domElement\n ) {\n return parentG;\n }\n parentG = parentG.parentElement;\n }\n};\n\ndeclare global {\n interface Element {\n setAttribute(name: string, value: any): void;\n }\n}\n\nconst setBackdropFilters = (svg: SVGGElement) => {\n const gElements = svg.querySelectorAll(\"g\");\n gElements.forEach((g) => {\n const prevContent = g.parentElement?.parentElement?.previousSibling;\n if (\n g._whatToRender?.backdropFilter &&\n prevContent &&\n prevContent instanceof SVGGElement &&\n prevContent._whatToRender?.elemInfo\n ) {\n const { width, height } = g._whatToRender.elemInfo;\n const pBBox = prevContent._whatToRender.elemInfo;\n // If not fully covering it then ignore it\n if (width > pBBox.width * 0.8 && height > 0.8 * pBBox.height) {\n prevContent.style.filter = g._whatToRender.backdropFilter;\n }\n }\n });\n};\n" }, { "path": "client/src/app/domToSVG/domToThemeAwareSVG.ts", "content": "import { hashCode } from \"src/utils/hashCode\";\nimport { isDefined } from \"src/utils/utils\";\nimport { domToSVG } from \"./domToSVG\";\nimport { getCorrespondingDarkNode } from \"./getCorrespondingDarkNode\";\nimport { setThemeForSVGScreenshot } from \"./setThemeForSVGScreenshot\";\nimport type { TextForSVG } from \"./text/getTextForSVG\";\nimport { renderSvg } from \"./text/textToSVG\";\nimport type { getWhatToRenderOnSVG } from \"./utils/getWhatToRenderOnSVG\";\nexport const displayNoneIfDark = \"--dark-theme-hide\";\nexport const displayNoneIfLight = \"--light-theme-hide\";\nexport const domToThemeAwareSVG = async (\n node: HTMLElement,\n themes?: \"current\" | \"both\",\n) => {\n const { svg: svgLight, rootId: svgLightRootId } = await domToSVG(node);\n if (themes === \"current\") {\n renderSvg(svgLight);\n return;\n }\n svgLight.parentElement?.removeChild(svgLight);\n await setThemeForSVGScreenshot(\"dark\");\n const { svg: svgDark } = await domToSVG(node);\n svgDark.parentElement?.removeChild(svgDark);\n document.body.appendChild(svgDark);\n document.body.appendChild(svgLight);\n\n let varId = 0;\n type CSSProperty = \"color\" | \"shadow\" | \"opacity\" | \"fontFamily\" | \"href\";\n const getUniqueColorVarName = (\n property: CSSProperty,\n value: string,\n darkValue: string,\n ): string => {\n /** This allows us to deduplicate g elements that have the same outerHTML */\n let varName = `${(value + \"-\" + darkValue).replace(/[^a-zA-Z0-9]/g, \"\")}`;\n\n // If bigger than a hash then use hash\n if (varName.length > 40) {\n varName = `${property}-${hashCode(varName)}`;\n }\n\n while (lightToDarkMap.get(value)?.some((c) => c.varName === varName)) {\n varName = `${property}-${varId++}`;\n }\n return varName;\n };\n const lightToDarkMap = new Map<\n string,\n { darkValue: string; varName: string }[]\n >();\n const upsertCssVar = (\n property: CSSProperty,\n value: string,\n darkValue: string,\n ): string => {\n const existingGroup = lightToDarkMap.get(value) ?? [];\n\n const existing = existingGroup.find((c) => c.darkValue === darkValue);\n if (existing) {\n return existing.varName;\n }\n const varName = getUniqueColorVarName(property, value, darkValue);\n lightToDarkMap.set(value, [\n ...existingGroup,\n { darkValue: darkValue, varName },\n ]);\n return varName;\n };\n\n const isVisibleColor = (color: string | null) => {\n const isVisible =\n color &&\n color !== \"none\" &&\n color !== \"currentColor\" &&\n color !== \"rgba(0, 0, 0, 0)\" &&\n color !== \"transparent\";\n\n return isVisible;\n };\n\n const selector = \"line, path, text, foreignObject, g, use, rect\";\n const lightNodes = svgLight.querySelectorAll(selector);\n const darkNodes = svgDark.querySelectorAll(selector);\n\n if (!svgDark.isConnected || !svgLight.isConnected) {\n throw new Error(\n \"SVGs must be connected to the DOM to ensure bbox calculations work.\",\n );\n }\n\n const matchesMap: Map<\n SVGScreenshotNodeType,\n SVGScreenshotNodeType | undefined\n > = new Map();\n const matches = Array.from(lightNodes)\n .map((lightNode, index) => {\n // Ignore nested svgs\n if (lightNode.ownerSVGElement !== svgLight) {\n return;\n }\n const darkNode = getCorrespondingDarkNode(darkNodes, lightNode, index);\n matchesMap.set(lightNode, darkNode);\n return { lightNode, darkNode };\n })\n .filter(isDefined);\n\n matches.forEach(({ lightNode, darkNode }) => {\n if (lightNode instanceof SVGUseElement) {\n const lightHref = lightNode.getAttribute(\"href\");\n const darkHref = darkNode?.getAttribute(\"href\");\n if (lightHref && darkHref) {\n const darkRefImgSymbol =\n svgDark.querySelector(darkHref);\n const lightRefImgSymbol =\n svgLight.querySelector(lightHref);\n const darkRefImgData =\n darkRefImgSymbol?.querySelector(\"image\")?.href.baseVal;\n const lightRefImgData =\n lightRefImgSymbol?.querySelector(\"image\")?.href.baseVal;\n if (\n darkRefImgData &&\n lightRefImgData &&\n darkRefImgData !== lightRefImgData\n ) {\n /** Add dark image into light svg */\n const darkImageSymbolClone = darkRefImgSymbol.cloneNode(\n true,\n ) as SVGImageElement;\n darkImageSymbolClone.id = `${darkImageSymbolClone.id}-dark`;\n lightNode.ownerSVGElement\n ?.querySelector(\"defs\")\n ?.appendChild(darkImageSymbolClone);\n\n const darkThemeUse = lightNode.cloneNode(true) as SVGUseElement;\n darkThemeUse.setAttribute(\"href\", `#${darkImageSymbolClone.id}`);\n darkThemeUse.style.opacity = `var(${displayNoneIfLight})`;\n lightNode.parentElement?.appendChild(darkThemeUse);\n lightNode.style.opacity = `var(${displayNoneIfDark})`;\n }\n }\n return;\n }\n if (!darkNode) {\n console.warn(\n \"No corresponding dark node found for light node \" + lightNode.nodeName,\n lightNode._bboxCode,\n );\n // if (\n // lightNode instanceof SVGTextElement\n // // &&\n // // lightNode.textContent?.includes(\"11:4\")\n // ) {\n // console.log(lightNodes, darkNodes);\n // debugger;\n // }\n return;\n }\n\n /** Add extra elements from dark node (sometimes the background changes from transparent to color on match case button) */\n // if (lightNode instanceof SVGGElement && darkNode instanceof SVGGElement) {\n // addNewChildren(lightNode, darkNode, matchesMap);\n // }\n\n const fill = lightNode.getAttribute(\"fill\");\n const darkFill = darkNode.getAttribute(\"fill\");\n if (fill !== darkFill) {\n const varName = upsertCssVar(\"color\", fill || \"\", darkFill || fill || \"\");\n lightNode.setAttribute(\"fill\", `var(--${varName})`);\n }\n const stroke = lightNode.getAttribute(\"stroke\");\n const darkStroke = darkNode.getAttribute(\"stroke\");\n if (stroke !== darkStroke) {\n const varName = upsertCssVar(\n \"color\",\n stroke || \"\",\n darkStroke || stroke || \"\",\n );\n lightNode.setAttribute(\"stroke\", `var(--${varName})`);\n }\n const color = lightNode.style.color;\n if (color) {\n const darkColor = darkNode.style.color;\n const varName = upsertCssVar(\"color\", color, darkColor || color);\n lightNode.style.color = `var(--${varName})`;\n }\n\n const opacity = lightNode.style.opacity;\n if (!opacity || opacity !== \"1\") {\n const darkOpacity = darkNode.style.opacity;\n if (darkOpacity !== opacity) {\n const varName = upsertCssVar(\n \"opacity\",\n opacity,\n darkOpacity || opacity,\n );\n lightNode.style.opacity = `var(--${varName})`;\n }\n }\n\n /** Just to save space */\n if (lightNode instanceof SVGTextElement) {\n const fontFamily = lightNode.getAttribute(\"font-family\");\n if (fontFamily && fontFamily.length > 12) {\n const darkFontFamily = darkNode.getAttribute(\"font-family\");\n const varName = upsertCssVar(\n \"fontFamily\",\n fontFamily,\n darkFontFamily || fontFamily,\n );\n lightNode.setAttribute(\"font-family\", `var(--${varName})`);\n }\n }\n\n const filter = lightNode.style.filter;\n const darkFilter = darkNode.style.filter;\n if (darkFilter !== filter) {\n const varName = upsertCssVar(\"shadow\", filter, darkFilter || filter);\n lightNode.style.filter = `var(--${varName})`;\n }\n\n if (lightNode instanceof SVGForeignObjectElement) {\n const color = lightNode.style.color;\n if (color && isVisibleColor(color)) {\n const darkColor = darkNode.style.color;\n const varName = upsertCssVar(\"color\", color, darkColor || color);\n lightNode.style.color = `var(--${varName})`;\n }\n }\n });\n const colorArr = Array.from(lightToDarkMap.entries()).flatMap(\n ([lightColor, darkItems]) =>\n darkItems.map(({ darkValue: darkColor, varName }) => ({\n lightColor,\n darkColor,\n sameForBoth: lightColor === darkColor,\n varName,\n })),\n );\n\n const cssSheet = document.createElement(\"style\");\n cssSheet.setAttribute(\"type\", \"text/css\");\n svgLight.appendChild(cssSheet);\n cssSheet.textContent = [\n `:root #${svgLightRootId} { `,\n ` ${displayNoneIfDark}: 1;`,\n ` ${displayNoneIfLight}: 0;`,\n ...colorArr.map(\n ({ varName, lightColor }) => ` --${varName}: ${lightColor}; `,\n ),\n `}\\n`,\n ].join(\"\\n\");\n cssSheet.textContent += [\n `@media (prefers-color-scheme: dark) { `,\n ` :root #${svgLightRootId} { `,\n ` ${displayNoneIfDark}: 0;`,\n ` ${displayNoneIfLight}: 1;`,\n ...colorArr\n .filter((c) => !c.sameForBoth)\n .map(({ varName, darkColor }) => ` --${varName}: ${darkColor}; `),\n ` }`,\n `} \\n`,\n ].join(\"\\n\");\n\n const xmlSerializer = new XMLSerializer();\n const svgString = xmlSerializer.serializeToString(svgLight);\n document.body.removeChild(svgDark);\n await setThemeForSVGScreenshot(undefined);\n document.body.removeChild(svgLight);\n\n if (themes === \"both\") {\n renderSvg(svgLight);\n return;\n }\n return {\n light: svgString,\n dark: xmlSerializer.serializeToString(svgDark),\n };\n};\n\ndocument.body.addEventListener(\"keydown\", (e) => {\n if (e.key === \"F2\") {\n void domToThemeAwareSVG(document.body, \"current\");\n } else if (e.key === \"F4\") {\n void domToThemeAwareSVG(document.body, \"both\");\n } else if (e.key === \"F6\") {\n // eslint-disable-next-line no-debugger\n debugger;\n }\n});\n\n/** Interleave data */\nexport const getBBoxCode = (\n element: HTMLElement,\n {\n x,\n y,\n width,\n height,\n }: {\n x: number;\n y: number;\n width: number;\n height: number;\n },\n) => {\n return `${x}-${y}-${width}-${height}__${element.nodeName}${getElementPath(element).join(\"-\")}`;\n};\n\ndeclare global {\n interface SVGGElement {\n _gWrapperFor?: HTMLElement;\n _overflowClipPath?: {\n x: number;\n y: number;\n width: number;\n height: number;\n };\n _domElement?: HTMLElement;\n _whatToRender?: Awaited>;\n }\n}\nexport type SVGScreenshotNodeType = (\n | SVGPathElement\n | SVGTextElement\n | SVGRectElement\n | SVGLineElement\n | SVGForeignObjectElement\n) & {\n _bboxCode?: string;\n _purpose?: Partial<\n Record<\n \"border\" | \"background\" | \"shadow\" | \"scrollMask\" | \"backdropFilter\",\n any\n >\n >;\n _bbox?: DOMRect;\n _gWrapperFor?: HTMLElement;\n _domElement?: HTMLElement;\n _domElementId?: string;\n _domElementPath?: number[];\n _domElementPathString?: string;\n _textInfo?: TextForSVG;\n};\n\nconst getElementPath = (element: HTMLElement) => {\n const path: number[] = [];\n let current: HTMLElement | ParentNode | null = element;\n\n while (current && current !== document.body) {\n const index = Array.from(current.parentNode?.children ?? []).indexOf(\n // @ts-ignore\n current,\n );\n path.unshift(index);\n current = current.parentNode;\n }\n\n return path;\n};\n" }, { "path": "client/src/app/domToSVG/getCorrespondingDarkNode.ts", "content": "import type { SVGScreenshotNodeType } from \"./domToThemeAwareSVG\";\n\nexport const getCorrespondingDarkNode = (\n darkNodes: NodeListOf,\n lightNode: SVGScreenshotNodeType,\n index: number,\n): SVGScreenshotNodeType | undefined => {\n let darkNode = darkNodes[index];\n\n const darkNodesArr = Array.from(darkNodes);\n const matchesTypes = darkNodesArr.filter(\n (n) => n.nodeName === lightNode.nodeName,\n );\n darkNode = matchesTypes.find(\n (n) => lightNode._bboxCode && n._bboxCode === lightNode._bboxCode,\n );\n\n if (darkNode) return darkNode;\n\n const lightBBox = lightNode.getBBox();\n let matchedTypeAndOverlap = matchesTypes.filter((n) => {\n if (lightNode._gWrapperFor) {\n return n._gWrapperFor === lightNode._gWrapperFor;\n }\n const nBBox = n.getBBox();\n\n if (!lightBBox.width || !lightBBox.height) {\n return (\n lightBBox.width === nBBox.width &&\n lightBBox.height === nBBox.height &&\n lightBBox.x === nBBox.x &&\n lightBBox.y === nBBox.y\n );\n }\n\n const bboxesOverlap =\n lightBBox.x < nBBox.x + nBBox.width &&\n lightBBox.x + lightBBox.width > nBBox.x &&\n lightBBox.y < nBBox.y + nBBox.height &&\n lightBBox.y + lightBBox.height > nBBox.y;\n return bboxesOverlap;\n });\n if (matchedTypeAndOverlap.length > 1) {\n matchedTypeAndOverlap = matchedTypeAndOverlap.filter((n) =>\n n.nodeName === \"use\" ?\n n.getAttribute(\"href\") === lightNode.getAttribute(\"href\") ||\n n.parentElement?.dataset.selector ===\n lightNode.parentElement?.dataset.selector\n : n.nodeName === \"path\" ?\n n.getAttribute(\"d\") === lightNode.getAttribute(\"d\")\n : n.nodeName === \"rect\" ?\n n.getAttribute(\"x\") === lightNode.getAttribute(\"x\") &&\n n.getAttribute(\"y\") === lightNode.getAttribute(\"y\") &&\n n.getAttribute(\"width\") === lightNode.getAttribute(\"width\") &&\n n.getAttribute(\"height\") === lightNode.getAttribute(\"height\")\n : n.nodeName === \"line\" ?\n n.getAttribute(\"x1\") === lightNode.getAttribute(\"x1\") &&\n n.getAttribute(\"y1\") === lightNode.getAttribute(\"y1\") &&\n n.getAttribute(\"x2\") === lightNode.getAttribute(\"x2\") &&\n n.getAttribute(\"y2\") === lightNode.getAttribute(\"y2\")\n : n.textContent === lightNode.textContent ||\n /** Some text content changes between renders */\n (n.getAttribute(\"x\") === lightNode.getAttribute(\"x\") &&\n n.getAttribute(\"y\") === lightNode.getAttribute(\"y\")),\n );\n }\n // if (\n // lightNode instanceof SVGTextElement &&\n // lightNode.textContent?.includes(\"11:5\")\n // // &&\n // // lightNode.getAttribute(\"fill\") === \"rgb(108, 6, 171)\"\n // ) {\n // debugger;\n // }\n if (matchedTypeAndOverlap.length > 1 && lightNode.nodeName === \"path\") {\n matchedTypeAndOverlap = matchedTypeAndOverlap.filter(\n (n) => n._bboxCode?.length === lightNode._bboxCode?.length,\n );\n }\n if (lightNode._gWrapperFor && matchedTypeAndOverlap.length > 1) {\n throw new Error(\"Multiple matching gWrappers found\");\n }\n if (matchedTypeAndOverlap.length === 1) {\n darkNode = matchedTypeAndOverlap[0];\n }\n return darkNode;\n};\n" }, { "path": "client/src/app/domToSVG/graphics/fontIconToSVG.ts", "content": "import { includes } from \"../../../dashboard/W_SQL/W_SQLBottomBar/W_SQLBottomBar\";\nimport type { SVGContext, SVGNodeLayout } from \"../containers/elementToSVG\";\nimport { isElementNode } from \"../utils/isElementVisible\";\nimport { SVG_NAMESPACE } from \"../domToSVG\";\n\nexport const fontIconToSVG = async (\n g: SVGGElement,\n iconInfo: NonNullable>,\n context: SVGContext,\n layout: SVGNodeLayout,\n) => {\n // const { x, y, height, width } = layout;\n const style = getComputedStyle(iconInfo.element);\n const fontFamily = style.getPropertyValue(\"font-family\");\n const fontSize = parseInt(style.getPropertyValue(\"font-size\"));\n const iconColor = style.getPropertyValue(\"color\");\n await addFontFamily(fontFamily, context).catch((err) => {\n /** Might be system font. Ignore error */\n if (fontFamily.includes(\", \")) return;\n console.error(\n `Failed to add font ${fontFamily} to SVG:`,\n iconInfo.element,\n err,\n );\n });\n\n const rect = iconInfo.element.getBoundingClientRect();\n const width = rect.width;\n const height = rect.height;\n /** TODO: Must calculate the actual position of :after based on main content width + bbox - :after width */\n const x =\n iconInfo.iconStyle.type === \"after\" ?\n layout.width + layout.x - rect.width / 2\n : layout.x;\n const y = rect.y;\n\n // Create a text element with the icon\n const textEl = document.createElementNS(SVG_NAMESPACE, \"text\");\n textEl.setAttribute(\"x\", x + width / 2);\n textEl.setAttribute(\"y\", y + height / 2);\n textEl.setAttribute(\"font-family\", fontFamily);\n textEl.setAttribute(\"font-size\", `${fontSize}px`);\n textEl.setAttribute(\"fill\", iconColor);\n textEl.setAttribute(\"text-anchor\", \"middle\");\n textEl.setAttribute(\"dominant-baseline\", \"middle\");\n textEl.textContent = iconInfo.content;\n\n g.appendChild(textEl);\n};\n\n/**\n * TODO: extract used icons only using opentype.js\n */\nconst addFontFamily = async (familyName: string, context: SVGContext) => {\n if (context.fontFamilies.includes(familyName)) {\n return;\n }\n\n const fontURL = findFontURL(familyName);\n if (!fontURL) return;\n return fetch(fontURL)\n .then((response) => response.blob())\n .then((blob) => {\n // Convert blob to data URL\n return new Promise((resolve) => {\n const reader = new FileReader();\n reader.onloadend = () => resolve(reader.result as string);\n reader.readAsDataURL(blob);\n });\n })\n .then((dataURL) => {\n // Create a style element for the font\n const styleEl = document.createElementNS(SVG_NAMESPACE, \"style\");\n styleEl.textContent = `\n @font-face {\n font-family: \"${familyName}\";\n src: url(\"${dataURL}\");\n font-weight: normal;\n font-style: normal;\n }\n `;\n\n context.defs.appendChild(styleEl);\n\n context.fontFamilies.push(familyName);\n });\n};\n\nexport const getFontIconElement = (node: Node) => {\n if (!isElementNode(node)) return;\n const beforeStyle = getComputedStyle(node, \":before\");\n const afterStyle = getComputedStyle(node, \":after\");\n const iconStyle =\n beforeStyle.content && !includes(beforeStyle.content, [\"\", \"none\"]) ?\n ({ type: \"before\", style: beforeStyle } as const)\n : afterStyle.content && !includes(afterStyle.content, [\"\", \"none\"]) ?\n ({ type: \"after\", style: afterStyle } as const)\n : \"\";\n if (!iconStyle) {\n return;\n }\n return {\n element: node,\n iconStyle,\n content: iconStyle.style.content.replace(/['\"]/g, \"\"),\n };\n};\n\nfunction findFontURL(fontFamily: string) {\n // This is a simplified approach to find the font URL\n\n for (const sheet of document.styleSheets) {\n try {\n const rules = sheet.cssRules;\n\n for (let j = 0; j < rules.length; j++) {\n const rule = rules[j];\n if (rule instanceof CSSFontFaceRule) {\n const fontFamilyValue = rule.style\n .getPropertyValue(\"font-family\")\n .replace(/['\"]/g, \"\");\n\n if (fontFamilyValue === fontFamily) {\n // Extract the URL from the src property\n const src = rule.style.getPropertyValue(\"src\");\n const urlMatch = src.match(/url\\(['\"]?([^'\"]+)['\"]?\\)/);\n\n if (urlMatch && urlMatch[1]) {\n return urlMatch[1];\n }\n }\n }\n }\n } catch (e) {\n // Security error, likely due to cross-origin stylesheet\n console.warn(\"Could not access stylesheet:\", e);\n }\n }\n\n throw new Error(`Could not find URL for font family: ${fontFamily}`);\n}\n" }, { "path": "client/src/app/domToSVG/graphics/getForeignObject.ts", "content": "import { isImgNode } from \"../utils/isElementVisible\";\nimport { toFixed } from \"../utils/toFixed\";\n\nexport const isSVGElement = (element: Element): element is SVGElement => {\n return element instanceof SVGElement;\n};\n\nexport const getForeignObject = async (\n element: Element,\n style: CSSStyleDeclaration,\n x: number,\n y: number,\n) => {\n if (isImgNode(element) && element.src.endsWith(\".svg\")) {\n return new Promise((resolve) => {\n fetch(element.src)\n .then((response) => {\n if (!response.ok) {\n throw new Error(`Failed to fetch SVG: ${response.statusText}`);\n }\n return response.text();\n })\n .then((svgContent) => {\n const parser = new DOMParser();\n const svgDoc = parser.parseFromString(svgContent, \"image/svg+xml\");\n const svgElement = svgDoc.documentElement;\n\n const { width, height } = element;\n const paddingLeft = parseFloat(style.paddingLeft) || 0;\n const paddingTop = parseFloat(style.paddingTop) || 0;\n svgElement.setAttribute(\"x\", `${toFixed(x + paddingLeft)}`);\n svgElement.setAttribute(\"y\", `${toFixed(y + paddingTop)}`);\n svgElement.setAttribute(\"width\", `${toFixed(width)}`);\n svgElement.setAttribute(\"height\", `${toFixed(height)}`);\n resolve(svgElement as unknown as SVGElement);\n })\n .catch((error) => {\n console.error(\"Error fetching SVG:\", error);\n resolve(undefined);\n });\n });\n }\n};\n" }, { "path": "client/src/app/domToSVG/graphics/imgToSVG.ts", "content": "import { hashCode } from \"src/utils/hashCode\";\nimport type { SVGContext, SVGNodeLayout } from \"../containers/elementToSVG\";\nimport { SVG_NAMESPACE } from \"../domToSVG\";\nimport { canvasToDataURL } from \"../utils/canvasToDataURL\";\n\nexport const addImageFromDataURL = (\n g: SVGGElement,\n dataUrl: string,\n context: SVGContext,\n { style, height, width, x, y }: SVGNodeLayout,\n) => {\n const sameDataUrlSymbol = Array.from(\n context.defs.querySelectorAll(\"symbol\"),\n ).find((symbol) => {\n const imgInSymbol = symbol.querySelector(\"image\");\n if (!imgInSymbol) {\n return false;\n }\n const href = imgInSymbol.getAttribute(\"href\");\n return href === dataUrl;\n })?.id;\n\n let imageSymbolId = sameDataUrlSymbol;\n if (!imageSymbolId) {\n imageSymbolId = \"id\" + hashCode(dataUrl.slice(100));\n while (context.defs.querySelector(`#${imageSymbolId}`)) {\n imageSymbolId += Math.floor(Math.random() * 10).toString();\n }\n const imageElem = document.createElementNS(SVG_NAMESPACE, \"image\");\n imageElem.setAttribute(\"href\", dataUrl);\n imageElem.setAttribute(\"width\", \"100%\");\n imageElem.setAttribute(\"height\", \"100%\");\n imageElem.setAttribute(\"preserveAspectRatio\", \"xMidYMid meet\");\n\n const symbolElem = document.createElementNS(SVG_NAMESPACE, \"symbol\");\n symbolElem.setAttribute(\"id\", imageSymbolId);\n symbolElem.appendChild(imageElem);\n symbolElem.setAttribute(\"viewBox\", `0 0 ${width} ${height}`);\n context.defs.appendChild(symbolElem);\n }\n\n const useElem = document.createElementNS(SVG_NAMESPACE, \"use\");\n useElem.setAttribute(\"href\", `#${imageSymbolId}`);\n useElem.setAttribute(\"x\", x);\n useElem.setAttribute(\"y\", y);\n useElem.setAttribute(\"width\", width);\n useElem.setAttribute(\"height\", height);\n if (style.opacity && style.opacity !== \"1\") {\n useElem.style.opacity = style.opacity;\n }\n\n g.appendChild(useElem);\n};\n\nexport const imgToSVG = async (\n g: SVGGElement,\n imgElement: HTMLImageElement,\n layout: SVGNodeLayout,\n context,\n) => {\n const loadedImage = await loadImage(imgElement);\n\n const dataUrl = convertImageToDataURL(loadedImage);\n addImageFromDataURL(g, dataUrl, context, layout);\n};\n\nconst loadImage = async (\n imgSource: HTMLImageElement,\n): Promise => {\n if (!imgSource.complete) {\n return new Promise((resolve, reject) => {\n imgSource.onload = () => resolve(imgSource);\n imgSource.onerror = () =>\n reject(new Error(\"Failed to load the provided image element\"));\n });\n }\n return imgSource;\n};\n\nconst convertImageToDataURL = (img: HTMLImageElement): string => {\n try {\n if (img.src.startsWith(\"data:\")) {\n return img.src;\n }\n const canvas = document.createElement(\"canvas\");\n canvas.width = img.naturalWidth;\n canvas.height = img.naturalHeight;\n const ctx = canvas.getContext(\"2d\");\n\n if (!ctx) {\n throw new Error(\"Failed to get canvas context\");\n }\n\n ctx.drawImage(img, 0, 0);\n return canvasToDataURL(canvas);\n } catch (error) {\n console.error(\"Error converting image to data URL:\", error);\n // Fallback to original source if conversion fails\n return img.src;\n }\n};\n" }, { "path": "client/src/app/domToSVG/recordDomChanges.ts", "content": "import { isElementNode, isElementVisible } from \"./utils/isElementVisible\";\n\nexport const recordDomChanges = (targetNode: HTMLElement) => {\n const config = {\n attributes: true,\n childList: true,\n subtree: true,\n attributeOldValue: true,\n };\n\n const observer = new MutationObserver((mutationList, observer) => {\n for (const mutation of mutationList) {\n const { target, oldValue } = mutation;\n if (!isElementNode(target) || !isElementVisible(target).isVisible)\n continue;\n if (mutation.type === \"childList\") {\n console.log(\n \"A child node has been added or removed.\",\n mutation.addedNodes,\n mutation.removedNodes,\n );\n changes.push({\n type: \"childList\",\n target: target,\n addedNodes: mutation.addedNodes,\n removedNodes: mutation.removedNodes,\n timestamp: Date.now(),\n });\n } else if (\n mutation.type === \"attributes\" &&\n mutation.attributeName === \"style\"\n ) {\n const currentStyle = target.getAttribute(\"style\");\n const styleDiff = getStyleDiff(oldValue, currentStyle, target);\n changes.push({\n type: \"style\",\n target: target,\n oldValue,\n currentStyle,\n changes: styleDiff,\n timestamp: Date.now(),\n });\n }\n }\n });\n\n observer.observe(targetNode, config);\n};\n\nsetInterval(() => {\n if (changes.length > 0) {\n console.log(\"DOM changes detected:\", changes);\n }\n}, 3000);\n\ntype DOMChange =\n | {\n type: \"childList\";\n target: HTMLElement;\n addedNodes: NodeList;\n removedNodes: NodeList;\n timestamp: number;\n }\n | {\n type: \"style\";\n target: HTMLElement;\n oldValue: string | null;\n currentStyle: string | null;\n changes: Record;\n timestamp: number;\n };\nconst changes: DOMChange[] = [];\n\nconst getStyleDiff = (\n oldStyle: string | null,\n currentStyle: string | null,\n target: HTMLElement,\n) => {\n const oldStyleObj = parseStyle(oldStyle);\n const currentStyleObj = parseStyle(currentStyle);\n\n // Determine added/changed properties\n const added: Record = {};\n const changed: Record = {};\n const removed: Record = {};\n\n // Find added or changed properties\n Object.entries(currentStyleObj).forEach(([prop, value]) => {\n if (!(prop in oldStyleObj)) {\n added[prop] = value;\n } else if (oldStyleObj[prop] !== value) {\n changed[prop] = { old: oldStyleObj[prop]!, new: value };\n }\n });\n\n // Find removed properties\n Object.entries(oldStyleObj).forEach(([prop, value]) => {\n if (!(prop in currentStyleObj)) {\n removed[prop] = value;\n }\n });\n\n console.log(`Style attribute was modified on`, target);\n\n if (Object.keys(added).length > 0) {\n console.log(\"Added styles:\", added);\n }\n\n if (Object.keys(changed).length > 0) {\n console.log(\"Changed styles:\", changed);\n }\n\n if (Object.keys(removed).length > 0) {\n console.log(\"Removed styles:\", removed);\n }\n return { added, changed, removed };\n};\n\n// Parse the styles into key-value objects for easier comparison\nconst parseStyle = (styleString: string | null): Record => {\n const result: Record = {};\n if (!styleString) return result;\n\n // Split the style string and extract property-value pairs\n styleString.split(\";\").forEach((pair) => {\n const trimmed = pair.trim();\n if (!trimmed) return;\n\n const [property, value] = trimmed.split(\":\").map((s) => s.trim());\n if (property && value) {\n result[property] = value;\n }\n });\n\n return result;\n};\n" }, { "path": "client/src/app/domToSVG/setThemeForSVGScreenshot.ts", "content": "import { localSettings } from \"../../dashboard/localSettings\";\nimport { tout } from \"../../utils/utils\";\n\nexport const setThemeForSVGScreenshot = async (theme: undefined | \"dark\") => {\n const resetUICallbacks: (() => void)[] = [];\n\n /** Ensure that any sql suggestion popups are opened back */\n const sqlEditor = document.querySelector(`div.ProstglesSQL`);\n if (sqlEditor?.sqlRef?.editor) {\n const suggestionsAreShown = //@ts-ignore\n sqlEditor.sqlRef.editor._contextKeyService?.getContextKeyValue(\n \"suggestWidgetVisible\",\n );\n const position = sqlEditor.sqlRef.editor.getPosition();\n if (suggestionsAreShown && position) {\n resetUICallbacks.push(async () => {\n await tout(500);\n const editor =\n document.querySelector(`div.ProstglesSQL`);\n editor?.sqlRef?.editor.setPosition(position);\n await tout(100);\n editor?.sqlRef?.editor.trigger(\n \"demo\",\n \"editor.action.triggerSuggest\",\n {},\n );\n });\n }\n }\n\n /** Re-open any closed popup menus */\n const openPopupSelectors = Array.from(\n document.querySelectorAll(\n `div.PopupMenu_triggerWrapper.is-open, .select-button.is-open`,\n ),\n ).map((el) => getUniqueSelector(el));\n openPopupSelectors.forEach((selector) => {\n resetUICallbacks.push(async () => {\n await tout(500);\n const triggerBtn = document.querySelector(selector);\n if (triggerBtn && !triggerBtn.classList.contains(\"is-open\")) {\n triggerBtn.click();\n }\n });\n });\n\n localSettings.get().$set({ themeOverride: theme });\n await tout(500);\n for (const cb of resetUICallbacks) {\n await cb();\n }\n await tout(500);\n};\n// function getUniqueSelector(element: HTMLElement) {\n// // If element has an ID, use it\n// if (element.id) {\n// return `#${element.id}`;\n// }\n\n// // Build path from element to root\n// const path: string[] = [];\n// let current: HTMLElement | null = element;\n\n// while (current && current !== document.body) {\n// let selector = current.tagName.toLowerCase();\n\n// // Add class if available\n// if (current.className && typeof current.className === \"string\") {\n// const classes = current.className.trim().split(/\\s+/).join(\".\");\n// if (classes) {\n// selector += `.${classes}`;\n// }\n// }\n\n// // Add nth-child if needed to make it unique\n// const parent: HTMLElement | null = current.parentElement;\n// if (parent) {\n// const siblings = Array.from(parent.children);\n// const sameTagSiblings = siblings.filter(\n// (s) => s.tagName === current?.tagName,\n// );\n\n// if (sameTagSiblings.length > 1) {\n// const index = siblings.indexOf(current) + 1;\n// selector += `:nth-child(${index})`;\n// }\n// }\n\n// path.unshift(selector);\n// current = parent;\n// }\n\n// return path.join(\" > \");\n// }\nfunction getUniqueSelector(element: HTMLElement): string {\n // If element has an ID, use it\n if (element.id) {\n return `#${element.id}`;\n }\n\n // Build path from element to root\n const path: string[] = [];\n let current: HTMLElement | null = element;\n\n while (current && current !== document.documentElement) {\n const parent = current.parentElement;\n\n if (!parent) break;\n\n // Get index among all siblings\n const siblings = Array.from(parent.children);\n const index = siblings.indexOf(current) + 1;\n\n // Build selector: tagname:nth-child(index)\n const selector = `${current.tagName.toLowerCase()}:nth-child(${index})`;\n path.unshift(selector);\n\n current = parent;\n }\n\n return path.join(\" > \");\n}\n" }, { "path": "client/src/app/domToSVG/text/getTextForSVG.ts", "content": "import { isDefined } from \"../../../utils/utils\";\nimport {\n isElementNode,\n isInputOrTextAreaNode,\n isTextNode,\n} from \"../utils/isElementVisible\";\n\nexport type TextForSVG = {\n style: CSSStyleDeclaration;\n textContent: string;\n textIndent: number | undefined;\n x: number;\n y: number;\n width: number;\n height: number;\n isSingleLine: boolean | undefined;\n numberOfLines?: number;\n element: HTMLElement;\n};\n\nexport const getTextForSVG = (\n element: HTMLElement,\n style: CSSStyleDeclaration,\n {\n x,\n y,\n width,\n height,\n }: { x: number; y: number; width: number; height: number },\n): TextForSVG[] | undefined => {\n if (isTextNode(element)) {\n throw new Error(\"Not expecting this to be honest\");\n }\n if (isInputOrTextAreaNode(element)) {\n const inputRect = element.getBoundingClientRect();\n let textContent = element.value || element.placeholder;\n if (\n (element.type === \"date\" || element.type === \"datetime-local\") &&\n element.value\n ) {\n try {\n textContent = new Date(element.value).toLocaleString();\n } catch {}\n }\n const isPlaceholder = !element.value;\n if (!textContent.trim()) return;\n const paddingLeft = parseFloat(style.paddingLeft) || 0;\n const paddingTop = parseFloat(style.paddingTop) || 0;\n const paddingBottom = parseFloat(style.paddingBottom) || 0;\n const borderTop = parseFloat(style.borderTop) || 0;\n const borderBottom = parseFloat(style.borderBottom) || 0;\n const contentHeight =\n inputRect.height - paddingTop - paddingBottom - borderTop - borderBottom;\n const actualStyle =\n isPlaceholder ? getComputedStyle(element, \"::placeholder\") : style;\n const fontSize = parseFloat(actualStyle.fontSize);\n const fontYPadding = Math.max(0, contentHeight - fontSize);\n const borderLeft = parseFloat(style.borderLeftWidth) || 0;\n\n const yTextOffsetForInput =\n -paddingBottom - borderBottom - fontYPadding / 2 - 0.5;\n const isTextArea = element instanceof HTMLTextAreaElement;\n const y =\n isTextArea ?\n inputRect.y + paddingTop + fontSize + borderTop + 3\n : inputRect.y + inputRect.height + yTextOffsetForInput;\n const result = [\n {\n style: actualStyle,\n textContent,\n x: inputRect.x + paddingLeft + borderLeft,\n y,\n width: inputRect.width - paddingLeft,\n height: inputRect.height - paddingTop,\n textIndent: 0,\n isSingleLine: undefined,\n element,\n },\n ];\n return result;\n }\n\n return Array.from(element.childNodes)\n .map((childTextNode, index) => {\n if (!isTextNode(childTextNode)) return;\n const textContent = childTextNode.textContent;\n if (!textContent || !textContent.trim()) return;\n const range = document.createRange();\n range.selectNodeContents(childTextNode);\n const textRect = range.getBoundingClientRect();\n\n const maxX = x + width;\n const maxY = y + height;\n const textMaxX = textRect.x + textRect.width;\n const textMaxY = textRect.y + textRect.height;\n const textxMaxWidth = Math.min(textMaxX, maxX) - textRect.x;\n const textyMaxHeight = Math.min(textMaxY, maxY) - textRect.y;\n const visibleTextWidth = Math.min(textRect.width, textxMaxWidth);\n const visibleTextHeight = Math.min(textRect.height, textyMaxHeight);\n const spanHeight =\n element instanceof HTMLSpanElement ? element.clientHeight : undefined;\n const numberOfLines = range.getClientRects().length;\n if (visibleTextWidth && visibleTextHeight) {\n const edgeRects = getTextEdgeRects(childTextNode, textContent.length);\n const textIndent = edgeRects.startCharRect.left - textRect.x;\n const res: TextForSVG = {\n style: {\n // eslint-disable-next-line @typescript-eslint/no-misused-spread\n ...style,\n /** This is done to preserve leading spaces between spans of the same text block */\n whiteSpace: textContent.startsWith(\" \") ? \"pre\" : style.whiteSpace,\n },\n textContent,\n x: textRect.x,\n y: textRect.y + 1,\n /** This ensures the actual visible/non overflown size of text is used */\n width: visibleTextWidth,\n height: spanHeight ?? visibleTextHeight,\n textIndent: Math.max(0, textIndent),\n isSingleLine:\n edgeRects.startCharRect.top === edgeRects.endCharRect.top,\n numberOfLines,\n element,\n };\n return res;\n }\n })\n .filter(isDefined);\n};\n\nconst getTextEdgeRects = (textNode: Text, contentLength: number) => {\n const range = document.createRange();\n range.setStart(textNode, 0);\n range.setEnd(textNode, 1);\n\n const startCharRect = range.getBoundingClientRect();\n\n range.setStart(textNode, contentLength - 1);\n range.setEnd(textNode, contentLength);\n\n const endCharRect = range.getBoundingClientRect();\n\n return { startCharRect, endCharRect };\n};\n\n// Function to recursively process text nodes\nconst getTextNodes = (\n element: HTMLElement,\n parentStyles: Partial,\n) => {\n const computedStyles = window.getComputedStyle(element);\n\n // Merge parent styles with current element styles\n const currentStyles = {\n fontSize: computedStyles.fontSize,\n fontFamily: computedStyles.fontFamily,\n fontWeight: computedStyles.fontWeight,\n fontStyle: computedStyles.fontStyle,\n color: computedStyles.color,\n // eslint-disable-next-line @typescript-eslint/no-misused-spread\n ...parentStyles,\n };\n\n return Array.from(element.childNodes)\n .map((node) => {\n if (isTextNode(node) && node.textContent) {\n const text = node.textContent.trim();\n if (text) {\n // Create a range for this text node\n const range = document.createRange();\n range.selectNodeContents(node);\n const rect = range.getBoundingClientRect();\n\n return {\n text: text,\n x: rect.left,\n y: rect.top,\n width: rect.width,\n height: rect.height,\n styles: currentStyles,\n element: element.tagName || \"TEXT\",\n };\n }\n } else if (isElementNode(node)) {\n // Recursively process child elements\n getTextNodes(node, currentStyles);\n }\n })\n .filter(isDefined);\n};\n\nconst calculateVerticalPosition = (inputElement: HTMLInputElement) => {\n const computedStyle = window.getComputedStyle(inputElement);\n\n // Get dimensions\n const inputHeight = inputElement.offsetHeight;\n const fontSize = parseFloat(computedStyle.fontSize);\n const lineHeight =\n computedStyle.lineHeight === \"normal\" ?\n fontSize * 1.2\n : parseFloat(computedStyle.lineHeight);\n\n // Get padding\n const paddingTop = parseFloat(computedStyle.paddingTop);\n const paddingBottom = parseFloat(computedStyle.paddingBottom);\n const borderTop = parseFloat(computedStyle.borderTopWidth);\n const borderBottom = parseFloat(computedStyle.borderBottomWidth);\n\n // Calculate available content height\n const contentHeight =\n inputHeight - paddingTop - paddingBottom - borderTop - borderBottom;\n\n // Calculate vertical center position\n const textVerticalCenter =\n paddingTop + borderTop + (contentHeight - lineHeight) / 2;\n\n return {\n textTop: textVerticalCenter,\n textCenter: textVerticalCenter + lineHeight / 2,\n textBottom: textVerticalCenter + lineHeight,\n contentHeight: contentHeight,\n lineHeight: lineHeight,\n };\n};\n" }, { "path": "client/src/app/domToSVG/text/textToSVG.ts", "content": "import { includes } from \"prostgles-types\";\nimport { SVG_NAMESPACE } from \"../domToSVG\";\nimport type { SVGScreenshotNodeType } from \"../domToThemeAwareSVG\";\nimport { isInputOrTextAreaNode } from \"../utils/isElementVisible\";\nimport { toFixed } from \"../utils/toFixed\";\nimport type { TextForSVG } from \"./getTextForSVG\";\nconst _singleLineEllipsis = \"_singleLineEllipsis\" as const;\nconst TEXT_WIDTH_ATTR = \"data-text-width\";\nconst TEXT_HEIGHT_ATTR = \"data-text-height\";\n\nconst getLineBreakPartsWithDelimiters = (content: string) =>\n content.split(/([\\s\\-–—:]+)/);\n\nexport const textToSVG = (\n element: HTMLElement,\n g: SVGGElement,\n textInfo: TextForSVG,\n elementStyle: CSSStyleDeclaration,\n bboxCode: string,\n) => {\n const {\n height,\n style: placeholderOrElementStyle,\n textContent: content,\n width,\n x,\n y,\n isSingleLine,\n numberOfLines,\n } = textInfo;\n const style = placeholderOrElementStyle;\n if (!content.trim()) return;\n const textNode = document.createElementNS(SVG_NAMESPACE, \"text\");\n (textNode as SVGScreenshotNodeType)._bboxCode = bboxCode;\n (textNode as SVGScreenshotNodeType)._textInfo = textInfo;\n textNode.setAttribute(TEXT_WIDTH_ATTR, toFixed(width));\n textNode.setAttribute(TEXT_HEIGHT_ATTR, toFixed(height));\n textNode.setAttribute(\"x\", toFixed(x));\n\n /** In firefox it seems the text nodes don't have font size */\n const textNodeStyle = {\n color: style.color || elementStyle.color,\n fontFamily: style.fontFamily || elementStyle.fontFamily,\n fontSize: style.fontSize || elementStyle.fontSize,\n fontWeight: style.fontWeight || elementStyle.fontWeight,\n letterSpacing: style.letterSpacing || elementStyle.letterSpacing,\n textDecoration: style.textDecoration || elementStyle.textDecoration,\n lineHeight: style.lineHeight || elementStyle.lineHeight,\n whiteSpace: style.whiteSpace || elementStyle.whiteSpace,\n textOverflow: style.textOverflow || elementStyle.textOverflow,\n textTransform: style.textTransform || elementStyle.textTransform,\n fontStyle: style.fontStyle || elementStyle.fontStyle,\n };\n const fontSize = parseFloat(textNodeStyle.fontSize);\n const isInputElement = isInputOrTextAreaNode(element);\n textNode.setAttribute(\"y\", toFixed((isInputElement ? y : y + fontSize) - 2));\n textNode.setAttribute(\"fill\", textNodeStyle.color);\n textNode.setAttribute(\"font-family\", textNodeStyle.fontFamily);\n textNode.setAttribute(\"font-size\", textNodeStyle.fontSize);\n textNode.setAttribute(\"font-weight\", textNodeStyle.fontWeight);\n textNode.setAttribute(\"font-style\", textNodeStyle.fontStyle);\n textNode.setAttribute(\"letter-spacing\", textNodeStyle.letterSpacing);\n textNode.setAttribute(\"text-decoration\", textNodeStyle.textDecoration);\n textNode.style.lineHeight = textNodeStyle.lineHeight;\n textNode.style.whiteSpace = textNodeStyle.whiteSpace;\n textNode.style.textTransform = textNodeStyle.textTransform;\n const nonWrappingWhiteSpaces = [\"nowrap\", \"pre\", \"reverse\", \"reverse-wrap\"];\n if (\n textNodeStyle.textOverflow === \"ellipsis\" &&\n (includes(nonWrappingWhiteSpaces, textNodeStyle.whiteSpace) || isSingleLine)\n ) {\n textNode[_singleLineEllipsis] = true;\n }\n textNode.setAttribute(\"text-anchor\", \"start\");\n\n textNode.textContent = content.trimEnd();\n\n g.appendChild(textNode);\n};\n\nconst tolerance = 2;\nconst wrapTextIfOverflowing = (\n textNode: Extract,\n width: number,\n height: number,\n content: string,\n) => {\n const currTextLength = textNode.getComputedTextLength();\n const {\n textIndent = 0,\n isSingleLine,\n style,\n numberOfLines,\n } = textNode._textInfo ?? {};\n\n if (currTextLength <= width + tolerance && !textIndent) {\n return;\n } else if (textNode[_singleLineEllipsis]) {\n while (\n textNode.getComputedTextLength() > width + tolerance &&\n content.length\n ) {\n content = content.slice(0, -1);\n textNode.textContent = content + \"...\";\n }\n return;\n }\n textNode.textContent = \"\";\n let line: string[] = [];\n const wordsWithDelimiters = getLineBreakPartsWithDelimiters(content).filter(\n (w) => w !== \"\",\n );\n const fontSize = textNode.getAttribute(\"font-size\") || \"16\";\n const lineHeightPx =\n parseFloat(textNode.style.lineHeight) || 1.1 * parseFloat(fontSize);\n const x = parseFloat(textNode.getAttribute(\"x\") || \"0\");\n const maxLines = numberOfLines ?? Math.floor(height / lineHeightPx);\n let tspan = document.createElementNS(SVG_NAMESPACE, \"tspan\");\n tspan.setAttribute(\"x\", toFixed(x + textIndent));\n tspan.setAttribute(\"dy\", 0);\n tspan.textContent =\n style?.whiteSpace === \"pre\" ? content : content.trimStart();\n textNode.appendChild(tspan);\n\n const willNotWrap =\n isSingleLine || textNode._textInfo?.element instanceof HTMLInputElement;\n if (willNotWrap) {\n return;\n }\n let lineNumber = 1;\n const hasTextOverflowEllipsis =\n style?.textOverflow === \"ellipsis\" && style.overflow === \"hidden\";\n for (let wordIndex = 0; wordIndex < wordsWithDelimiters.length; wordIndex++) {\n const isFirstLine = lineNumber === 1;\n const currentLineWidth = isFirstLine ? width - textIndent : width;\n const word = wordsWithDelimiters[wordIndex]!;\n line.push(word);\n\n const setTextContent = () => {\n tspan.textContent =\n isFirstLine ? line.join(\"\") : line.join(\"\").trimStart();\n };\n\n setTextContent();\n const textLen = tspan.getComputedTextLength();\n\n const textIsOverflowing = textLen > currentLineWidth + tolerance;\n const cannotWrapMoreBecauseItsASingleWord = line.length === 1;\n if (textIsOverflowing && !cannotWrapMoreBecauseItsASingleWord) {\n if (\n numberOfLines &&\n lineNumber === numberOfLines &&\n !hasTextOverflowEllipsis\n ) {\n return;\n }\n\n line.pop(); // Remove the word that caused overflow\n\n setTextContent();\n\n // Move to next line if possible\n lineNumber++;\n\n if (lineNumber >= maxLines && hasTextOverflowEllipsis) {\n // Add ellipsis to indicate truncation if there's room\n if (\n tspan.textContent &&\n tspan.getComputedTextLength() < currentLineWidth - 10\n ) {\n tspan.textContent += \"...\";\n }\n return;\n }\n\n // Create new tspan for next line\n line = [word];\n tspan = document.createElementNS(SVG_NAMESPACE, \"tspan\");\n tspan.setAttribute(\"x\", toFixed(x));\n tspan.setAttribute(\"dy\", toFixed(lineHeightPx) + \"px\");\n textNode.appendChild(tspan);\n tspan.textContent = word;\n }\n }\n};\n\nconst unnestRedundantGElements = (svg: SVGElement) => {\n const gElements = svg.querySelectorAll(\"g\");\n\n gElements.forEach((gElement) => {\n if (\n gElement.childElementCount === 1 &&\n gElement.firstElementChild?.tagName.toLowerCase() === \"g\" &&\n gElement.attributes.length === 0\n ) {\n const childG = gElement.firstElementChild as SVGElement;\n\n gElement.parentNode?.replaceChild(childG, gElement);\n\n unnestRedundantGElements(svg);\n }\n });\n\n return svg;\n};\n\nexport const wrapAllSVGText = (svg: SVGElement) => {\n if (!svg.isConnected) {\n throw new Error(\"SVG must be in the DOM for bbox calculations\");\n }\n\n unnestRedundantGElements(svg);\n svg\n .querySelectorAll(`text[${TEXT_WIDTH_ATTR}]`)\n .forEach((text) => {\n const textWidth = text.getAttribute(TEXT_WIDTH_ATTR);\n const textHeight = text.getAttribute(TEXT_HEIGHT_ATTR);\n if (!text.textContent || !textWidth || !textHeight) return;\n\n wrapTextIfOverflowing(\n text,\n +textWidth,\n +textHeight,\n text.textContent || \"\",\n );\n });\n svg\n .querySelectorAll(`text[${TEXT_WIDTH_ATTR}]`)\n .forEach((text) => {\n text.removeAttribute(TEXT_WIDTH_ATTR);\n text.removeAttribute(TEXT_HEIGHT_ATTR);\n });\n};\n\n/**\n * Appends svg to document to ensure the bbox/text length calcs work\n * */\nexport const renderSvg = (svg: SVGElement) => {\n const topStyle = {\n position: \"absolute\",\n top: \"0\",\n left: \"0\",\n zIndex: \"9999\",\n } as const;\n\n const getIsAppended = () => document.body.contains(svg);\n\n if (!getIsAppended()) {\n Object.entries(topStyle).forEach(([key, value]) => {\n svg.style[key] = value;\n });\n document.body.appendChild(svg);\n }\n\n return {\n remove: () => {\n if (getIsAppended()) {\n svg.removeAttribute(\"style\");\n svg.remove();\n }\n },\n };\n};\n" }, { "path": "client/src/app/domToSVG/utils/addNewChildren.ts", "content": "import { isDefined } from \"src/utils/utils\";\nimport {\n displayNoneIfLight,\n type SVGScreenshotNodeType,\n} from \"../domToThemeAwareSVG\";\n\nexport const addNewChildren = (\n lightNode: SVGScreenshotNodeType,\n darkNode: SVGScreenshotNodeType,\n matchesMap: Map,\n) => {\n const matchingChildren = Array.from(lightNode.children)\n .map((lightChild, index) => {\n const darkChild = matchesMap.get(lightChild as SVGScreenshotNodeType);\n if (darkChild) {\n return {\n lightChild: lightChild as SVGScreenshotNodeType,\n darkChild,\n index,\n };\n }\n })\n .filter(isDefined);\n\n const newChildren = Array.from(darkNode.children)\n .map((darkChild, index) => {\n if (\n !(\n darkChild instanceof SVGGElement ||\n darkChild instanceof SVGPathElement ||\n darkChild instanceof SVGRectElement ||\n darkChild instanceof SVGCircleElement ||\n darkChild instanceof SVGUseElement\n )\n )\n return;\n const isMatched = matchingChildren.find(\n (mc) => mc.darkChild === darkChild,\n );\n if (!isMatched) {\n return {\n darkChild: darkChild as SVGScreenshotNodeType,\n index,\n };\n }\n })\n .filter(isDefined);\n\n /** Add new nodes to lightNode */\n newChildren.forEach(({ darkChild, index }) => {\n const clonedChild = darkChild.cloneNode(true) as SVGScreenshotNodeType;\n clonedChild.style.opacity = `var(${displayNoneIfLight})`;\n lightNode.insertBefore(clonedChild, lightNode.children[index] || null);\n });\n};\n" }, { "path": "client/src/app/domToSVG/utils/canvasToDataURL.ts", "content": "export const canvasToDataURL = (\n canvas: HTMLCanvasElement,\n quality = 0.8,\n): string => {\n return canvas.toDataURL(\"image/webp\", quality);\n};\n" }, { "path": "client/src/app/domToSVG/utils/copyAnimationStylesToSvg.ts", "content": "import type { SVGContext } from \"../containers/elementToSVG\";\n\n/**\n * Extracts and clones CSS animations and keyframes from an element\n */\nconst getAnimationKeyframeRules = (element: Element) => {\n const computedStyle = window.getComputedStyle(element);\n const animationName = computedStyle.animationName;\n\n if (!animationName || animationName === \"none\") {\n return;\n }\n\n // const styleElement = targetDocument.createElement(\"style\");\n const keyframeRules: CSSKeyframesRule[] = [];\n const animationNames = animationName.split(\",\").map((name) => name.trim());\n\n // Search through all stylesheets for matching @keyframes rules\n for (const sheet of Array.from(document.styleSheets)) {\n try {\n const rules = sheet.cssRules;\n\n for (const rule of Array.from(rules)) {\n if (\n rule instanceof CSSKeyframesRule &&\n animationNames.includes(rule.name)\n ) {\n keyframeRules.push(rule);\n }\n }\n } catch (e) {\n // Skip stylesheets that can't be accessed (CORS)\n console.warn(\"Cannot access stylesheet:\", e);\n }\n }\n\n return keyframeRules;\n};\n\n/**\n * Copies inline animation styles to the cloned element\n */\nconst copyAnimationStylesToSvg = (\n source: CSSStyleDeclaration,\n target: HTMLElement | SVGElement,\n) => {\n const computedStyle = source;\n const animationProperties = [\n \"animationName\",\n \"animationDuration\",\n \"animationTimingFunction\",\n \"animationDelay\",\n \"animationIterationCount\",\n \"animationDirection\",\n \"animationFillMode\",\n \"animationPlayState\",\n ] as const;\n\n if (!source.animationName || source.animationName === \"none\") {\n return false;\n }\n animationProperties.forEach((prop) => {\n const value = computedStyle[prop];\n if (value && value !== \"none\") {\n target.style[prop] = value;\n }\n });\n return true;\n};\n\nconst copyAnimationsToSvg = (\n sourceElement: Element,\n sourceCss: CSSStyleDeclaration,\n wrapperG: SVGElement,\n cssDeclarations: SVGContext[\"cssDeclarations\"],\n): void => {\n // Extract keyframes from the original element's styles\n const copiedAnimations = copyAnimationStylesToSvg(sourceCss, wrapperG);\n if (!copiedAnimations) {\n console.error(\"Unexpected: could not copy animations\");\n return;\n }\n const animationKeyframeRules = getAnimationKeyframeRules(sourceElement);\n if (animationKeyframeRules) {\n // defs.appendChild(animationStyles);\n // cssDeclarations.push(...animationKeyframeRules);\n }\n animationKeyframeRules?.forEach((rule) => {\n const ruleText = rule.cssText;\n if (!cssDeclarations.has(ruleText)) {\n cssDeclarations.set(ruleText, ruleText);\n }\n });\n};\n\nexport const getAnimationsHandler = (sourceElement: Element) => {\n let hasAnimations = false as boolean;\n /** Ensures bbox calculations are stable */\n sourceElement.getAnimations().forEach((animation) => {\n animation.cancel();\n // animation.pause();\n // animation.currentTime = 0;\n hasAnimations = true;\n });\n\n if (!hasAnimations) return;\n return (\n sourceCss: CSSStyleDeclaration,\n wrapperG: SVGElement,\n cssDeclarations: SVGContext[\"cssDeclarations\"],\n /**\n * Important for correct animation scaling in SVG. Otherwise percentages are\n * calculated based on the viewport, not the element's bounding box.\n */\n addFillBox: boolean,\n ) => {\n if (addFillBox) {\n wrapperG.style.transformBox = \"fill-box\";\n }\n return copyAnimationsToSvg(\n sourceElement,\n sourceCss,\n wrapperG,\n cssDeclarations,\n );\n };\n};\n" }, { "path": "client/src/app/domToSVG/utils/getWhatToRenderOnSVG.ts", "content": "import { isDefined } from \"../../../utils/utils\";\nimport {\n getBackdropFilter,\n getBackgroundColor,\n} from \"../containers/bgAndBorderToSVG\";\nimport type { SVGContext } from \"../containers/elementToSVG\";\nimport { getFontIconElement } from \"../graphics/fontIconToSVG\";\nimport { getTextForSVG } from \"../text/getTextForSVG\";\nimport { isElementVisible, isImgNode, isSVGNode } from \"./isElementVisible\";\nimport { getForeignObject } from \"../graphics/getForeignObject\";\nimport { includes } from \"src/dashboard/W_SQL/W_SQLBottomBar/W_SQLBottomBar\";\n\nconst attributesToKeep = [\n \"data-command\",\n \"data-key\",\n \"data-label\",\n \"role\",\n] as const;\nexport type WhatToRenderOnSVG = Awaited<\n ReturnType\n>;\nexport const getWhatToRenderOnSVG = async (\n element: HTMLElement,\n context: SVGContext,\n parentSvg: SVGElement | SVGGElement,\n) => {\n const { isVisible, style, bbox } = isElementVisible(element);\n // Calculate absolute position\n const x = bbox.left + context.offsetX;\n const y = bbox.top + context.offsetY;\n const width = bbox.width;\n const height = bbox.height;\n const elemInfo = {\n x,\n y,\n width,\n height,\n style,\n bbox,\n isVisible,\n };\n\n /** Used to highlight so will render as a rectangle */\n const attributeData = attributesToKeep.reduce(\n (acc, attr) => {\n const attrValue = element.getAttribute(attr);\n if (attrValue) {\n return { ...acc, [attr]: attrValue };\n }\n return acc;\n },\n undefined as\n | Partial>\n | undefined,\n );\n\n let mightBeHovered = false;\n if (!isVisible) {\n const hoverClasses = [\n \"show-on-row-hover\",\n \"show-on-hover\",\n \"show-on-parent-hover\",\n \"show-on-trigger-hover\",\n ];\n if (\n hoverClasses.some(\n (cls) => element.classList.contains(cls) || element.closest(`.${cls}`),\n ) &&\n (attributeData ||\n element.querySelector(`[data-command], [data-key], [data-label]`))\n ) {\n mightBeHovered = true;\n } else return { elemInfo };\n }\n\n const background = getBackgroundColor(style);\n const parentBackground =\n background &&\n element.parentElement &&\n getBackgroundColor(getComputedStyle(element.parentElement));\n\n /**\n * Used to prevent drawing over rounded input border corners\n */\n const backgroundSameAsRenderedParent =\n background &&\n background === parentBackground &&\n (parentSvg as SVGGElement)._domElement === element.parentElement;\n\n const backdropFilter = getBackdropFilter(style);\n const childAffectingStyles: Partial<\n Pick\n > = {};\n if (style.opacity && style.opacity !== \"1\") {\n childAffectingStyles.opacity = style.opacity;\n }\n if (includes(style.position, [\"fixed\", \"absolute\", \"relative\"])) {\n childAffectingStyles.position = style.position;\n }\n\n const foreignObject = await getForeignObject(element, style, x, y);\n const fontIcon = getFontIconElement(element);\n const image =\n isSVGNode(element) ?\n {\n type: \"svgElement\" as const,\n element,\n }\n : foreignObject ?\n {\n type: \"foreignObject\" as const,\n foreignObject,\n }\n : fontIcon ?\n {\n type: \"fontIcon\" as const,\n ...fontIcon,\n }\n : isImgNode(element) ?\n {\n type: \"img\" as const,\n element,\n }\n : style.maskImage.startsWith(\"url(\") ?\n {\n type: \"maskedElement\" as const,\n element,\n }\n : undefined;\n\n const text = getTextForSVG(element, style, {\n x,\n y,\n width,\n height,\n });\n\n return {\n elemInfo,\n attributeData,\n mightBeHovered,\n background:\n /** TODO: addNewChildren should be fixed. This is a workaround when non transparent bg appears after dark theme switch */\n element instanceof HTMLBodyElement ? style.backgroundColor\n : backgroundSameAsRenderedParent || image?.type === \"maskedElement\" ?\n undefined\n : background,\n backdropFilter,\n border: getBorderForSVG(style),\n childAffectingStyles,\n image,\n text,\n };\n};\n\nconst getBorderDetails = (value: string) => {\n const [width, display, ...colorParts] = value.split(\" \").map((v) => v.trim());\n const color = colorParts.join(\" \");\n if (display !== \"none\" && width) {\n const widthNum = parseFloat(width);\n if (widthNum && color) {\n return {\n borderWidth: widthNum,\n borderColor: color,\n };\n }\n }\n};\nconst getBorderForSVG = (style: CSSStyleDeclaration) => {\n const border = getBorderDetails(style.border);\n const outline = getBorderDetails(\n [style.outlineWidth, style.outlineStyle, style.outlineColor].join(\" \"),\n );\n\n if (border) {\n return {\n type: \"border\" as const,\n outline,\n ...border,\n };\n }\n\n const borders = [\n style.borderTop,\n style.borderRight,\n style.borderBottom,\n style.borderLeft,\n ]\n .map(getBorderDetails)\n .filter(isDefined);\n\n if (borders.length) {\n return {\n type: \"borders\" as const,\n outline,\n borders,\n };\n }\n\n if (!outline) return;\n\n return {\n type: \"noBorder\" as const,\n outline,\n };\n};\n" }, { "path": "client/src/app/domToSVG/utils/isElementVisible.ts", "content": "import { includes } from \"../../../dashboard/W_SQL/W_SQLBottomBar/W_SQLBottomBar\";\n\nexport const isElementVisible = (element: Element) => {\n const style = window.getComputedStyle(element);\n const bbox = element.getBoundingClientRect();\n\n if (!isElementNode(element) && !isTextNode(element))\n return { isVisible: false, style, bbox };\n\n if (isTextNode(element)) {\n return {\n isVisible: !!(element.textContent as string | null)?.trim().length,\n style,\n bbox,\n };\n }\n const mightBeVisible = element.checkVisibility({\n checkOpacity: true,\n checkVisibilityCSS: true,\n });\n\n if (!mightBeVisible) return { isVisible: false, style, bbox };\n const parent = element.parentElement;\n if (!parent) return { isVisible: true, style, bbox };\n const isOnParentScreen = isInParentViewport(element, bbox);\n return { isVisible: isOnParentScreen, style, bbox };\n};\n\nconst isInViewport = (\n bbox: DOMRect,\n vport: Pick,\n) => {\n return (\n bbox.left <= vport.right &&\n vport.x <= bbox.right &&\n bbox.top <= vport.bottom &&\n vport.y <= bbox.bottom\n );\n};\n\nexport const isInParentViewport = (\n element: Element,\n bbox: DOMRect,\n): boolean => {\n const parent = element.parentElement;\n if (!parent) return true;\n const parentHidesOverflow =\n includes(getComputedStyle(parent).overflow, [\"hidden\", \"scroll\", \"auto\"]) &&\n !includes(getComputedStyle(element).position, [\"absolute\", \"fixed\"]);\n if (!parentHidesOverflow) {\n const isVisible = isInViewport(bbox, {\n x: 0,\n y: 0,\n right: window.innerWidth || document.documentElement.clientWidth,\n bottom: window.innerHeight || document.documentElement.clientHeight,\n });\n // if (!isVisible) {\n // return Array.from(element.children).some((child) =>\n // isInParentViewport(child, child.getBoundingClientRect()),\n // );\n // }\n return isVisible;\n }\n const parentBbox = parent.getBoundingClientRect();\n const isVisible = isInViewport(bbox, parentBbox);\n if (!isVisible) {\n return Array.from(element.children).some((child) =>\n isInParentViewport(child, child.getBoundingClientRect()),\n );\n }\n return true;\n};\n\nconst checkIfObscured = (\n element: Element,\n bbox = element.getBoundingClientRect(),\n) => {\n const topElement = document.elementFromPoint(\n bbox.x + bbox.width / 2,\n bbox.y + bbox.height / 2,\n );\n if (topElement && isElementNode(topElement)) {\n const isObscured = !element.contains(topElement);\n return isObscured ? topElement : undefined;\n }\n};\n\nexport const isElementNode = (node: Node): node is HTMLElement =>\n node.nodeType === Node.ELEMENT_NODE;\n\nexport const isTextNode = (node: Node): node is Text =>\n node.nodeType === Node.TEXT_NODE;\n\nexport const isImgNode = (node: Node): node is HTMLImageElement =>\n isElementNode(node) && node.nodeName.toLowerCase() === \"img\";\n\nexport const isInputOrTextAreaNode = (node: Node): node is HTMLInputElement =>\n isElementNode(node) &&\n (node instanceof HTMLInputElement || node instanceof HTMLTextAreaElement);\n\nexport const isSVGNode = (node: Node): node is SVGElement =>\n isElementNode(node) && node.nodeName.toLowerCase() === \"svg\";\n" }, { "path": "client/src/app/domToSVG/utils/toFixed.ts", "content": "export const toFixed = (num: number, precision = 2) => {\n return parseFloat(num.toFixed(precision));\n};\n" }, { "path": "client/src/appUtils.ts", "content": "import { useEffect, useState } from \"react\";\nimport type { Theme } from \"./App\";\nimport { type DocumentationFile } from \"./app/CommandPalette/getDocumentation\";\nimport type { UIDocFlat } from \"./app/UIDocs\";\nimport type { SQLEditorRef } from \"./dashboard/SQLEditor/W_SQLEditor\";\nimport type { getSVGif } from \"./app/domToSVG/SVGif/getSVGif\";\nimport type { domToThemeAwareSVG } from \"./app/domToSVG/domToThemeAwareSVG\";\n\ntype Unsubscribe = {\n unsubscribe: () => void;\n};\n\ntype OnStateChange = (newState: S) => void;\ntype Subscribe = (sc: OnStateChange) => Unsubscribe;\n\nexport type ReactiveState = {\n initialState: S;\n set: (newState: S) => void;\n get: () => S;\n subscribe: Subscribe;\n};\nexport const createReactiveState = (\n initialState: S,\n onChange?: (state: S) => void,\n) => {\n const handler: {\n listeners: OnStateChange[];\n currentState: S;\n } = {\n listeners: [],\n currentState: initialState,\n };\n\n const rootReference: ReactiveState = {\n subscribe: (listener) => {\n handler.listeners.push(listener);\n\n return {\n unsubscribe: () => {\n handler.listeners = handler.listeners.filter((l) => l !== listener);\n },\n };\n },\n set: (newState: S) => {\n handler.currentState = newState;\n handler.listeners.forEach((l) => l(handler.currentState));\n onChange?.(newState);\n },\n initialState: initialState,\n get: () => handler.currentState,\n };\n\n return rootReference;\n};\n\nexport const useReactiveState = (store: ReactiveState) => {\n const [state, setState] = useState(store.get());\n useEffect(() => {\n return store.subscribe((newState) => {\n setState(newState);\n }).unsubscribe;\n }, [store]);\n\n return {\n state,\n setState: (data) => {\n store.set(data);\n },\n };\n};\n\nexport const iOS = () => {\n return (\n [\n \"iPad Simulator\",\n \"iPhone Simulator\",\n \"iPod Simulator\",\n \"iPad\",\n \"iPhone\",\n \"iPod\",\n ].includes(navigator.platform) ||\n // iPad on iOS 13 detection\n (navigator.userAgent.includes(\"Mac\") && \"ontouchend\" in document)\n );\n};\n\ndeclare global {\n interface Window {\n __prglIsImporting: any;\n /**\n * /Mobi/i.test(window.navigator.userAgent);\n */\n isMobileDevice: boolean;\n /**\n * window.matchMedia(\"(any-hover: none)\").matches\n */\n isTouchOnlyDevice: boolean;\n /**\n * window.innerWidth < 700\n */\n isLowWidthScreen: boolean;\n /**\n * window.innerWidth < 1200\n */\n isMediumWidthScreen: boolean;\n isIOSDevice: boolean;\n isMobile: boolean;\n toSVG: typeof domToThemeAwareSVG;\n getSVGif: typeof getSVGif;\n documentation: DocumentationFile[];\n flatUIDocs: UIDocFlat[];\n }\n\n interface HTMLDivElement {\n sqlRef?: SQLEditorRef;\n }\n}\n\nexport const appTheme = createReactiveState(\"light\");\n\nconst checkSize = () => {\n window.isLowWidthScreen = window.innerWidth < 700;\n window.isMediumWidthScreen = window.innerWidth < 1200;\n};\nwindow.isIOSDevice = iOS();\nwindow.isMobileDevice = /Mobi/i.test(window.navigator.userAgent);\nwindow.isTouchOnlyDevice = window.matchMedia(\"(any-hover: none)\").matches;\nwindow.isMobile = window.isLowWidthScreen || window.isIOSDevice;\ncheckSize();\nwindow.addEventListener(\"resize\", checkSize);\n" }, { "path": "client/src/components/AlertProvider.tsx", "content": "import React, {\n createContext,\n useCallback,\n useContext,\n useMemo,\n useState,\n} from \"react\";\nimport Popup, { type PopupProps } from \"./Popup/Popup\";\nimport ErrorComponent from \"./ErrorComponent\";\nimport { useIsMounted } from \"prostgles-client\";\n\ntype AlertDialogProps = Pick<\n PopupProps,\n \"children\" | \"footerButtons\" | \"title\" | \"subTitle\" | \"contentClassName\"\n>;\n\nexport type AlertContext = {\n addAlert: (props: AlertDialogProps | string) => void;\n};\n\nconst AlertContext = createContext(undefined);\n\nexport const AlertProvider = ({ children }: { children: React.ReactNode }) => {\n const [alerts, setAlerts] = useState([]);\n const removeFirstAlert = useCallback(() => {\n setAlerts((prevAlerts) => prevAlerts.slice(1));\n }, []);\n\n const addAlert: AlertContext[\"addAlert\"] = useCallback((newAlert) => {\n setAlerts((prevAlerts) => [\n ...prevAlerts,\n typeof newAlert === \"string\" ? { children: newAlert } : newAlert,\n ]);\n }, []);\n\n const contextValue = useMemo(\n () => ({\n addAlert,\n }),\n [addAlert],\n );\n\n const alertProps = useMemo(() => alerts.at(0), [alerts]);\n return (\n \n {children}\n {alertProps && (\n \n )}\n \n );\n};\n\nexport const useAlert = () => {\n const context = useContext(AlertContext);\n if (!context) {\n throw new Error(\"useAlert must be used within an AlertProvider\");\n }\n return context;\n};\n\nexport const useOnErrorAlert = () => {\n const alert = useAlert();\n const getIsMounted = useIsMounted();\n const onErrorAlert = useCallback(\n async (promiseFunc: () => Promise) => {\n await promiseFunc().catch((error) => {\n if (!getIsMounted()) return;\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n alert.addAlert({ children: });\n });\n },\n [alert, getIsMounted],\n );\n return { onErrorAlert };\n};\n" }, { "path": "client/src/components/Animations.css", "content": ".custom-animations.success-checkmark {\n width: 80px;\n height: 115px;\n margin: 0 auto;\n}\n\n.custom-animations.success-checkmark .check-icon {\n width: 80px;\n height: 80px;\n position: relative;\n border-radius: 50%;\n box-sizing: content-box;\n border: 4px solid #4caf50;\n}\n\n.custom-animations.success-checkmark .check-icon::before {\n top: 3px;\n left: -2px;\n width: 30px;\n transform-origin: 100% 50%;\n border-radius: 100px 0 0 100px;\n}\n\n.custom-animations.success-checkmark .check-icon::after {\n top: 0;\n left: 30px;\n width: 60px;\n transform-origin: 0 50%;\n border-radius: 0 100px 100px 0;\n animation: rotate-circle 4.25s ease-in;\n}\n\n.custom-animations.success-checkmark .check-icon::before,\n.custom-animations.success-checkmark .check-icon::after {\n content: \"\";\n height: 100px;\n position: absolute;\n transform: rotate(-45deg);\n}\n\n.custom-animations.success-checkmark .check-icon .icon-line {\n height: 5px;\n background-color: #4caf50;\n display: block;\n border-radius: 2px;\n position: absolute;\n z-index: 10;\n}\n\n.custom-animations.success-checkmark .check-icon .icon-line.line-tip {\n top: 46px;\n left: 14px;\n width: 25px;\n transform: rotate(45deg);\n animation: icon-line-tip 0.75s;\n}\n\n.custom-animations.success-checkmark .check-icon .icon-line.line-long {\n top: 38px;\n right: 8px;\n width: 47px;\n transform: rotate(-45deg);\n animation: icon-line-long 0.75s;\n}\n\n.custom-animations.success-checkmark .icon-circle {\n top: -4px;\n left: -4px;\n z-index: 10;\n width: 80px;\n height: 80px;\n border-radius: 50%;\n position: absolute;\n box-sizing: content-box;\n border: 4px solid rgba(76, 175, 80, 0.5);\n}\n\n.custom-animations.success-checkmark .icon-fix {\n top: 8px;\n width: 5px;\n left: 26px;\n z-index: 1;\n height: 85px;\n position: absolute;\n transform: rotate(-45deg);\n}\n\n@keyframes rotate-circle {\n 0% {\n transform: rotate(-45deg);\n }\n 5% {\n transform: rotate(-45deg);\n }\n 12% {\n transform: rotate(-405deg);\n }\n 100% {\n transform: rotate(-405deg);\n }\n}\n\n@keyframes icon-line-tip {\n 0% {\n width: 0;\n left: 1px;\n top: 19px;\n }\n 54% {\n width: 0;\n left: 1px;\n top: 19px;\n }\n 70% {\n width: 50px;\n left: -8px;\n top: 37px;\n }\n 84% {\n width: 17px;\n left: 21px;\n top: 48px;\n }\n 100% {\n width: 25px;\n left: 14px;\n top: 45px;\n }\n}\n\n@keyframes icon-line-long {\n 0% {\n width: 0;\n right: 46px;\n top: 54px;\n }\n 65% {\n width: 0;\n right: 46px;\n top: 54px;\n }\n 84% {\n width: 55px;\n right: 0px;\n top: 35px;\n }\n 100% {\n width: 47px;\n right: 8px;\n top: 38px;\n }\n}\n\n.custom-animations.checkmark {\n width: 1em;\n height: 1em;\n font-size: 36px;\n border-radius: 50%;\n display: block;\n stroke-width: 2;\n stroke: #fff;\n stroke-miterlimit: 10;\n margin: 10% auto;\n box-shadow: inset 0px 0px 0px #7ac142;\n animation:\n fill 0.4s ease-in-out 0.4s forwards,\n scale 0.3s ease-in-out 0.9s both;\n stroke: #7ac142;\n}\n\n.custom-animations .checkmark__circle {\n stroke-dasharray: 166;\n stroke-dashoffset: 166;\n stroke-width: 2;\n stroke-miterlimit: 10;\n stroke: #7ac142;\n fill: white;\n /* animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; */\n animation: stroke 0.5s ease-out forwards;\n}\n\n.custom-animations .checkmark__check {\n transform-origin: 50% 50%;\n stroke-dasharray: 48;\n stroke-dashoffset: 48;\n animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.5s forwards;\n}\n\n@keyframes stroke {\n 100% {\n stroke-dashoffset: 0;\n }\n}\n@keyframes scale {\n 0%,\n 100% {\n transform: none;\n }\n 50% {\n transform: scale3d(1.1, 1.1, 1);\n }\n}\n@keyframes fill {\n 100% {\n box-shadow: inset 0px 0px 0px 30px #7ac142;\n }\n}\n" }, { "path": "client/src/components/Animations.tsx", "content": "import React, { useEffect } from \"react\";\nimport \"./Animations.css\";\nimport type { TestSelectors } from \"../Testing\";\nimport { classOverride } from \"./Flex\";\nimport { useIsMounted } from \"prostgles-client\";\n\nexport type DivProps = React.DetailedHTMLProps<\n React.HTMLAttributes,\n HTMLDivElement\n>;\nexport const Success = (props: DivProps) => {\n const { className = \"\", ...otherProps } = props;\n\n return (\n \n
\n \n \n
\n
\n
\n \n );\n};\n\nexport class SuccessSVG extends React.Component> {\n render() {\n const { className = \"\" } = this.props;\n\n return (\n \n \n \n \n );\n }\n}\n\nconst smallStyle = {\n transform: `scale(0.5) translate(-50%, -50%)`,\n width: \"40px\",\n height: \"40px\",\n};\nconst textSizedStyle = {\n transform: `scale(0.25) translate(-75%, -175%)`,\n width: \"20px\",\n height: \"20px\",\n};\n\nexport const SuccessMini = ({ children }: { children: React.ReactNode }) => {\n return (\n
\n \n
{children}
\n
\n );\n};\n\ntype FlashMessageProps = {\n message: string;\n duration?: {\n millis: number;\n onEnd: VoidFunction;\n };\n variant?: \"small\" | \"text-sized\";\n} & TestSelectors &\n Pick;\n\nexport const SuccessMessage = ({\n message,\n className = \"\",\n duration,\n variant,\n ...divProps\n}: FlashMessageProps) => {\n const getIsMounted = useIsMounted();\n useEffect(() => {\n if (duration) {\n const timeout = setInterval(() => {\n if (!getIsMounted()) return;\n\n duration.onEnd();\n }, duration.millis);\n\n return () => clearInterval(timeout);\n }\n }, [duration, getIsMounted]);\n\n return (\n \n
{message}
\n \n \n );\n};\n" }, { "path": "client/src/components/Btn.css", "content": "button.disabled {\n cursor: not-allowed !important;\n}\nbutton.disabled:not(.no-fade):not(.hidden) {\n opacity: 0.5 !important;\n}\n\nbutton {\n background: transparent;\n}\n\nbutton.fade-in,\n.fade-in-2 {\n -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */\n -moz-animation: fadein 2s; /* Firefox < 16 */\n -ms-animation: fadein 2s; /* Internet Explorer */\n -o-animation: fadein 2s; /* Opera < 12.1 */\n animation: fadein 2s;\n}\n\n.fade-in {\n -webkit-animation: fadein 0.5s; /* Safari, Chrome and Opera > 12.1 */\n -moz-animation: fadein 0.5s; /* Firefox < 16 */\n -ms-animation: fadein 0.5s; /* Internet Explorer */\n -o-animation: fadein 0.5s; /* Opera < 12.1 */\n animation: fadein 0.5s;\n}\n\n@keyframes fadein {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n/* Firefox < 16 */\n@-moz-keyframes fadein {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n/* Safari, Chrome and Opera > 12.1 */\n@-webkit-keyframes fadein {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n/* Internet Explorer */\n@-ms-keyframes fadein {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n/* Opera < 12.1 */\n@-o-keyframes fadein {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n.btn-color-default {\n --color: var(--gray-600);\n --filled-bg: var(--gray-400);\n --border-color: var(--gray-400);\n --faded-bg: #7d7d7d38;\n --faded-bg-hover: #5252525e;\n}\n.dark-theme .btn-color-default {\n --filled-bg: #5d5d5d;\n --border-color: var(--gray-400);\n --color: var(--gray-200);\n --faded-bg: #7d7d7d61;\n --faded-bg-hover: #7d7d7dc4;\n}\n\n.btn-color-action {\n --filled-bg: var(--blue-500);\n --border-color: var(--blue-500);\n --color: var(--blue-500);\n --faded-bg: var(--blue-100);\n --faded-bg-hover: var(--blue-200);\n}\n\n.dark-theme .btn-color-action {\n --filled-bg: #3079c5;\n --border-color: #5292d7;\n --color: var(--blue-200);\n --faded-bg: #004fa3cc;\n --faded-bg-hover: #6195e4ee;\n}\n\n.dark-theme .btn-color-action.btn-faded {\n --color: white;\n}\n\n.btn-outline.btn-color-action {\n --color: #479dff;\n}\n.dark-theme .btn-default.btn-color-action {\n --color: #5ba4ff;\n}\n\n.btn-color-green {\n --filled-bg: var(--green-500);\n --border-color: var(--green-500);\n --color: var(--green-800);\n --faded-bg: var(--green-100);\n --faded-bg-hover: var(--green-200);\n}\n.btn-color-danger {\n --color: var(--text-danger);\n --filled-bg: #b31010;\n --border-color: var(--text-danger);\n --faded-bg: var(--red-100);\n --faded-bg-hover: #be181833;\n}\n\n.btn-color-warn {\n --filled-bg: var(--yellow-500);\n --border-color: var(--yellow-700);\n --color: var(--yellow-800);\n --faded-bg: #e4ce0559;\n --faded-bg-hover: #e6d96c;\n}\n.dark-theme .btn-color-warn {\n --color: #dabb8c;\n}\n.dark-theme .btn-color-danger {\n --filled-bg: #890808;\n --faded-bg: #5900003b;\n --faded-bg-hover: #7e020288;\n /* --color: #9c2a2a; */\n}\n\n.btn-color-inherit {\n --color: inherit;\n --filled-bg: inherit;\n --border-color: inherit;\n --faded-bg: inherit;\n --faded-bg-hover: inherit;\n}\n.btn-color-transparent {\n --color: transparent;\n --filled-bg: transparent;\n --border-color: transparent;\n --faded-bg: transparent;\n --faded-bg-hover: transparent;\n}\n.btn-color-white {\n --color: white;\n --filled-bg: white;\n --border-color: white;\n --faded-bg: white;\n --faded-bg-hover: var(--gray-100);\n}\n.btn-color-indigo {\n --filled-bg: var(--indigo-600);\n --border-color: var(--indigo-400);\n --color: var(--indigo-800);\n --faded-bg: var(--indigo-200);\n --faded-bg-hover: var(--indigo-300);\n}\n\n.btn-filled {\n background: var(--filled-bg);\n color: white;\n}\n.btn.btn-filled:hover {\n filter: brightness(1.2);\n}\n\n.btn-outline {\n border: 1px solid var(--border-color);\n color: var(--color);\n background: var(--bg-color-0);\n}\n.btn-outline:hover {\n background: var(--filled-bg);\n border-color: var(--filled-bg) !important;\n color: white;\n}\n\n:root {\n --btn-hover-bg: #dbdbdb;\n}\n:root.dark-theme {\n --btn-hover-bg: var(--li-hover-bg);\n}\n\n.btn-default,\n.btn-icon,\n.btn-text {\n color: var(--color);\n}\n.btn-default:hover {\n filter: brightness(1.5);\n}\n\n.btn-icon:hover {\n background: var(--btn-hover-bg);\n}\n\n.btn-faded {\n background: var(--faded-bg);\n color: var(--color);\n}\n\n.btn.btn-faded:hover {\n background-color: var(--faded-bg-hover);\n}\n\n.underline-on-hover:hover {\n text-decoration: underline;\n}\n" }, { "path": "client/src/components/Btn.tsx", "content": "import { mdiAlert, mdiCheck } from \"@mdi/js\";\nimport { omitKeys, pickKeys } from \"prostgles-types\";\nimport React from \"react\";\nimport { NavLink } from \"react-router-dom\";\nimport RTComp from \"../dashboard/RTComp\";\nimport type { TestSelectors } from \"../Testing\";\nimport { tout } from \"../utils/utils\";\nimport \"./Btn.css\";\nimport { parsedError } from \"./ErrorComponent\";\nimport { classOverride } from \"./Flex\";\nimport type { IconProps } from \"./Icon/Icon\";\nimport { Icon } from \"./Icon/Icon\";\nimport { Label, type LabelProps } from \"./Label\";\nimport Loading from \"./Loader/Loading\";\nimport Popup from \"./Popup/Popup\";\n\ntype ClickMessage = (\n | { err: any }\n | { ok: React.ReactNode; replace?: boolean }\n | { loading: 1 | 0; delay?: number }\n) & { duration?: number };\ntype ClickMessageArgs = (msg: ClickMessage, onEnd?: () => void) => void;\n\ntype BtnCustomProps = (\n | {\n iconPath?: never;\n iconStyle?: never;\n iconProps?: never;\n iconClassname?: never;\n iconNode?: never;\n }\n | {\n iconPath?: string;\n iconStyle?: React.CSSProperties;\n iconProps?: IconProps;\n iconClassname?: string;\n iconNode?: React.ReactNode;\n }\n) & {\n iconPosition?: \"left\" | \"right\";\n label?: LabelProps;\n\n /**\n * If provided then the button is disabled and will display a tooltip with this message\n */\n disabledInfo?: string;\n /**\n * no-fade - will not fade out the button when disabled/loading\n */\n disabledVariant?: \"no-fade\";\n loading?: boolean;\n fadeIn?: boolean;\n _ref?: React.RefObject;\n\n size?: \"large\" | \"default\" | \"small\" | \"micro\" | \"nano\";\n variant?: \"outline\" | \"filled\" | \"faded\" | \"icon\" | \"text\" | \"default\";\n color?:\n | \"danger\"\n | \"warn\"\n | \"action\"\n | \"inherit\"\n | \"transparent\"\n | \"white\"\n | \"green\"\n | \"indigo\"\n | \"default\";\n\n \"data-id\"?: string;\n /**\n * If true then title will be used as children\n */\n titleAsLabel?: boolean;\n\n /**\n * If provided then will display a confirmation dialog before running any onClick function\n */\n clickConfirmation?: {\n color: \"danger\" | \"action\" | \"warn\";\n message: React.ReactNode;\n buttonText: string;\n };\n} & (\n | {\n onClickMessage?: (\n e: React.MouseEvent,\n showMessage: ClickMessageArgs,\n ) => void;\n onClickPromise?: undefined;\n onClickPromiseMode?: undefined;\n }\n | {\n onClickMessage?: undefined;\n onClickPromise?: (\n e: React.MouseEvent,\n ) => Promise | void;\n onClickPromiseMode?: \"noTickIcon\";\n /**\n * Will display it instead of the error message\n */\n onClickPromiseMessage?: React.ReactNode;\n }\n );\ntype KeysOfUnion = T extends T ? keyof T : never;\n\ntype OmmitedKeys =\n | KeysOfUnion\n | \"children\"\n | \"ref\"\n | \"onClick\"\n | \"style\"\n | \"title\";\nconst CUSTOM_ATTRS: OmmitedKeys[] = [\n \"iconPath\",\n \"children\",\n \"disabledInfo\",\n \"title\",\n \"disabledVariant\",\n \"onClick\",\n \"loading\",\n \"color\",\n \"fadeIn\",\n \"_ref\",\n \"ref\",\n \"style\",\n \"size\",\n \"iconProps\",\n \"iconNode\",\n \"iconPosition\",\n \"iconClassname\",\n \"onClickMessage\",\n \"onClickPromise\",\n \"onClickPromiseMessage\",\n \"onClickPromiseMode\",\n //@ts-ignore\n \"asNavLink\",\n \"iconStyle\",\n \"titleAsLabel\",\n \"clickConfirmation\",\n \"label\",\n];\n\nexport type BtnProps = TestSelectors &\n BtnCustomProps & {\n /**\n * If provided then will render as an anchor\n */\n href?: HREF;\n target?: string;\n asNavLink?: boolean;\n download?: boolean;\n } & React.HTMLAttributes & {\n value?: string;\n type?: \"button\" | \"submit\";\n };\n\ntype BtnState = {\n show: boolean;\n clickMessage?: {\n type: \"err\" | \"ok\" | \"loading\";\n msg: React.ReactNode;\n replace?: boolean;\n };\n showClickConfirmation?: boolean;\n};\n\nexport default class Btn extends RTComp<\n BtnProps,\n BtnState\n> {\n state: BtnState = {\n show: true,\n };\n\n timeOut?: NodeJS.Timeout;\n loadingTimeOut?: NodeJS.Timeout;\n\n latestMsg?: ClickMessage;\n clickMessage: ClickMessageArgs = (msg, onEnd) => {\n if (!this.mounted) return;\n this.latestMsg = msg;\n const hasErr = \"err\" in msg;\n if (this.loadingTimeOut) clearTimeout(this.loadingTimeOut);\n if (this.timeOut) clearTimeout(this.timeOut);\n\n if (hasErr) {\n this.setState({\n clickMessage: {\n type: \"err\",\n msg: parsedError(msg.err, true),\n },\n });\n } else if (\"ok\" in msg) {\n this.setState({\n clickMessage: {\n type: \"ok\",\n msg: msg.ok,\n replace: msg.replace,\n },\n });\n } else if (\"loading\" in msg) {\n if (!msg.loading) {\n this.setState({ clickMessage: undefined }, onEnd);\n } else {\n this.loadingTimeOut = setTimeout(() => {\n /** Check if msg is stale */\n if (\n this.mounted &&\n JSON.stringify(this.latestMsg) === JSON.stringify(msg)\n ) {\n this.setState({\n clickMessage: { type: \"loading\", msg: \"\" },\n });\n }\n }, msg.delay ?? 750);\n }\n\n return;\n }\n\n this.timeOut = setTimeout(\n () => {\n if (this.mounted) {\n this.setState({ clickMessage: undefined }, onEnd);\n }\n },\n msg.duration ?? (hasErr ? 5000 : 2000),\n );\n };\n\n setPromise = async (\n promise: ReturnType[\"onClickPromise\"]>,\n ) => {\n this.clickMessage({ loading: 1, delay: 0 });\n const minDuration = 500;\n const startTime = Date.now();\n try {\n const res = await promise;\n const endTime = Date.now();\n const duration = endTime - startTime;\n if (!this.mounted) return;\n if (duration < minDuration) {\n await tout(Math.max(0, minDuration - duration));\n }\n this.clickMessage({ ok: \"\" });\n } catch (err) {\n this.clickMessage({\n err:\n (\"onClickPromiseMessage\" in this.props ?\n this.props.onClickPromiseMessage\n : undefined) ?? err,\n });\n }\n };\n\n render() {\n const {\n iconPath,\n iconPosition = \"left\",\n className = \"\",\n style = {},\n iconStyle = {},\n disabledInfo,\n disabledVariant,\n title,\n fadeIn,\n variant = \"default\",\n iconProps,\n iconNode,\n iconClassname = \"\",\n titleAsLabel,\n label,\n clickConfirmation,\n onClickPromiseMode,\n ...otherProps\n } = this.props;\n const { clickMessage, showClickConfirmation } = this.state;\n let extraStyle: React.CSSProperties = {};\n\n const color =\n (clickMessage?.type === \"err\" ? \"danger\"\n : clickMessage?.type === \"ok\" ? \"action\"\n : this.props.color) ?? \"default\";\n const loading =\n clickMessage?.type === \"loading\" ? true : (this.props.loading ?? false);\n const children =\n clickMessage?.msg || (titleAsLabel ? title : this.props.children);\n\n if (clickMessage?.replace) return clickMessage.msg;\n\n const isDisabled = disabledInfo || loading;\n let _className = \"\";\n const { size = window.isLowWidthScreen ? \"small\" : \"default\" } = this.props;\n\n const hasBgClassname = (className + \"\").includes(\"bg-\");\n _className =\n \" f-0 flex-row gap-p5 ai-center \" +\n (\"href\" in this.props ? \" button-css \" : \" \") +\n (variant === \"outline\" ? \" b \" : \"\");\n\n if (children && !iconNode && !iconPath && !loading) {\n if (variant === \"outline\") {\n if (!hasBgClassname)\n _className =\n _className.replace(\"bg-transparent\", \"\") + \" bg-color-0 \";\n extraStyle = {\n borderColor: \"currentcolor\",\n };\n }\n\n if (size === \"micro\") {\n extraStyle.padding = \"5px\";\n }\n\n if (size === \"small\") {\n extraStyle.padding = \"6px 8px\";\n }\n\n if (size === \"default\") {\n extraStyle.padding = \"12px 14px\";\n }\n if (size === \"large\") {\n extraStyle.padding = \"12px\";\n }\n\n if (variant === \"text\") {\n extraStyle.paddingLeft = 0;\n }\n } else {\n const padding =\n size === \"nano\" ? \"0px\"\n : size === \"micro\" ? \"4px\"\n : size === \"small\" ? \"6px\"\n : size === \"default\" ? \"8px\"\n : \"10px\";\n const sidePadding = children ? `calc(${padding} * 1.5)` : padding;\n /** Must add right padding to icon and text button */\n extraStyle = {\n padding: `${padding} ${sidePadding}`,\n };\n }\n\n _className +=\n (fadeIn ? \" fade-in \" : \"\") +\n (iconPath && !children ? \" \" : \"rounded\") + // round\n (isDisabled ? ` disabled ${disabledVariant ? \"no-fade\" : \"\"} ` : \" \");\n\n const loadingSize = {\n large: 22,\n default: 20,\n small: 14,\n micro: 12,\n nano: 10,\n }[size];\n const loadingMargin = {\n large: 1,\n default: 1,\n small: 0,\n micro: 2,\n nano: 0,\n }[size];\n const childrenContent =\n children === undefined || children === null || children === \"\" ? null\n : loading ?\n \n {children}\n \n : children;\n\n const content = (\n <>\n {iconPosition === \"right\" && childrenContent}\n\n {!(iconPath || iconProps?.path || iconNode) || loading ? null : (\n (iconNode ?? (\n \n ))\n )}\n\n {loading && (\n \n )}\n\n {iconPosition === \"left\" && childrenContent}\n \n );\n\n type PropsOf = React.HTMLAttributes & { ref?: React.Ref };\n\n const needsConfirmation = () => {\n if (clickConfirmation && !showClickConfirmation) {\n this.setState({ showClickConfirmation: true });\n return true;\n }\n return false;\n };\n let onClick = this.props.onClick;\n if (this.props.onClickPromise) {\n const { onClickPromise } = this.props;\n onClick = (e) => {\n !needsConfirmation() && this.setPromise(onClickPromise(e));\n };\n } else if (this.props.onClickMessage) {\n const { onClickMessage } = this.props;\n onClick = (e) => {\n !needsConfirmation() && onClickMessage(e, this.clickMessage);\n };\n } else if (this.props.onClick) {\n onClick = (e) => {\n if (needsConfirmation()) return;\n this.props.onClick?.(e);\n };\n }\n\n if (size === \"small\") {\n extraStyle.minHeight = \"32px\";\n extraStyle.minWidth = \"32px\";\n }\n\n const FontSizeMap: Record[\"size\"], string> = {\n large: \"16px\",\n default: \"16px\",\n small: \"14px\",\n micro: \"12px\",\n nano: \"10px\",\n };\n\n const finalProps: PropsOf | PropsOf =\n {\n ...omitKeys(this.props, CUSTOM_ATTRS as any),\n onClick:\n isDisabled ?\n !window.isMobileDevice ?\n undefined\n : () => alert(disabledInfo)\n : onClick,\n title: disabledInfo || title,\n style: {\n ...extraStyle,\n display: \"flex\",\n lineHeight: \"1em\",\n width: \"fit-content\",\n fontSize: FontSizeMap[size],\n ...style,\n },\n onMouseDown: (e) => e.preventDefault(),\n className: classOverride(\n `${_className} btn btn-${variant} btn-size-${size} btn-color-${color} ws-nowrap w-fit `,\n className,\n ),\n ref: this.props._ref as any,\n ...pickKeys(otherProps, [\"data-id\"]),\n };\n\n const withLabel = (content: React.ReactNode) => {\n if (label) {\n return (\n
\n
\n );\n }\n return content;\n };\n\n if (\"href\" in this.props && this.props.href) {\n if (this.props.asNavLink) {\n return withLabel(\n )}\n onClick={\n !disabledInfo ? undefined : (\n (e) => {\n e.preventDefault();\n }\n )\n }\n to={this.props.href}\n tabIndex={-1}\n >\n {content}\n ,\n );\n }\n return withLabel(\n )}\n target={this.props.target}\n onClick={disabledInfo ? undefined : () => false}\n {...(this.props.download && { download: true })}\n >\n {content}\n ,\n );\n }\n\n return withLabel(\n <>\n \n {content}\n \n {clickConfirmation && showClickConfirmation && (\n this.setState({ showClickConfirmation: false })}\n clickCatchStyle={{ opacity: 1 }}\n footerButtons={[\n {\n label: \"Cancel\",\n onClickClose: true,\n },\n {\n label: clickConfirmation.buttonText,\n color: clickConfirmation.color,\n \"data-command\": \"Btn.ClickConfirmation.Confirm\",\n variant: \"filled\",\n className: \"ml-auto\",\n onClick: (e) => {\n this.setState({ showClickConfirmation: false });\n onClick?.(e);\n },\n },\n ]}\n >\n {clickConfirmation.message}\n \n )}\n ,\n );\n }\n}\n" }, { "path": "client/src/components/ButtonBar.tsx", "content": "import React from \"react\";\nimport type { BtnProps } from \"./Btn\";\nimport Btn from \"./Btn\";\nimport ErrorComponent from \"./ErrorComponent\";\n\ntype P = {\n error?: any;\n buttons: BtnProps[];\n style?: React.CSSProperties;\n className?: string;\n};\n\nexport const ButtonBar = ({ buttons, className = \"\", error, style }: P) => {\n if (!buttons.length && !error) return null;\n\n return (\n \n \n
\n {buttons.map((btnProps, i) => (\n \n ))}\n
\n \n );\n};\n" }, { "path": "client/src/components/ButtonGroup.tsx", "content": "import React from \"react\";\nimport { isObject } from \"@common/publishUtils\";\nimport Btn from \"./Btn\";\nimport { FlexCol } from \"./Flex\";\nimport type { LabelProps } from \"./Label\";\nimport { Label } from \"./Label\";\nimport type { FullOption } from \"./Select/Select\";\nimport { Select } from \"./Select/Select\";\nimport { pickKeys } from \"prostgles-types\";\nimport type { TestSelectors } from \"../Testing\";\n\ntype P\n );\n }\n let ariaLabelledby;\n const labelledById = `icon_labelledby_${id}`;\n const describedById = `icon_describedby_${id}`;\n let role;\n if (title) {\n ariaLabelledby =\n description ? `${labelledById} ${describedById}` : labelledById;\n } else {\n role = \"presentation\";\n if (description) {\n throw new Error(\"title attribute required when description is set\");\n }\n }\n return (\n \n {title && {title}}\n {description && {description}}\n {spin &&\n (inverse ?\n \n : )}\n {spinElement}\n \n );\n },\n);\n" }, { "path": "client/src/components/IconPalette/IconPalette.tsx", "content": "import { mdiChevronDown, mdiClose } from \"@mdi/js\";\nimport { usePromise } from \"prostgles-client\";\nimport React, { useEffect, useMemo, useState } from \"react\";\nimport { isDefined } from \"../../utils/utils\";\nimport Btn from \"../Btn\";\nimport type { BtnProps } from \"../Btn\";\nimport { FlexCol, FlexRow } from \"../Flex\";\nimport { FormFieldDebounced } from \"../FormField/FormFieldDebounced\";\nimport Popup from \"../Popup/Popup\";\nimport { ScrollFade } from \"../ScrollFade/ScrollFade\";\nimport { Pagination } from \"../Table/Pagination\";\nimport { SvgIcon } from \"../SvgIcon\";\n\ntype P = {\n iconName: string | null | undefined;\n onChange: (newIcon: string | undefined | null) => void;\n label?: BtnProps[\"label\"];\n};\nexport const IconPalette = ({ iconName, onChange, label }: P) => {\n const iconList = usePromise(async () => {\n const iconsNames: string[] = await fetch(\"/icons/_meta.json\").then((r) =>\n r.json(),\n );\n return iconsNames;\n }, []);\n const [searchTerm, setSearchTerm] = useState(\"\");\n const iconSize = 55;\n const iconStyle = {\n width: `${iconSize}px`,\n height: `${iconSize}px`,\n };\n const displayedItemsFull = useMemo(() => {\n if (!iconList) return [];\n return iconList\n .map((name) => {\n //** Camel case to spaced */\n const label = name\n .replace(/([a-z0-9])([A-Z])/g, \"$1 $2\")\n .replace(/_/g, \" \");\n const rank = label.toLowerCase().indexOf(searchTerm.toLowerCase());\n if (rank === -1) return;\n return {\n name,\n label,\n rank,\n node: (\n \n {label.slice(0, rank)}\n {label.slice(rank, rank + searchTerm.length)}\n {label.slice(rank + searchTerm.length)}\n \n ),\n };\n })\n .filter(isDefined)\n .sort((a, b) => a.rank - b.rank);\n }, [iconList, searchTerm]);\n const [open, setOpen] = useState(false);\n const [page, setPage] = useState(0);\n useEffect(() => {\n setPage(0);\n }, [searchTerm]);\n const displayedItems = useMemo(\n () => displayedItemsFull.slice(page * 50, (page + 1) * 50),\n [page, displayedItemsFull],\n );\n\n return (\n <>\n \n }\n onClick={() => setOpen(true)}\n />\n {![undefined, null].includes(iconName as any) && (\n onChange(null)}\n />\n )}\n \n {open && (\n setOpen(false),\n },\n ]}\n rootStyle={{\n flex: 1,\n }}\n clickCatchStyle={{ opacity: 1 }}\n rootChildClassname=\"f-1\"\n contentClassName=\"p-0\"\n positioning=\"center\"\n persistInitialSize={true}\n title=\"Chose icon\"\n onClose={() => setOpen(false)}\n >\n \n {\n setSearchTerm(newTerm);\n setPage(0);\n }}\n />\n \n \n {displayedItems.map(({ name, node }) => {\n return (\n {\n onChange(name);\n setOpen(false);\n }}\n >\n \n
{node}
\n \n );\n })}\n \n {\n console.error(\"onPageSizeChange disabled for performance\");\n }}\n onPageChange={(newPage) => {\n setPage(newPage);\n }}\n />\n \n \n )}\n \n );\n};\n" }, { "path": "client/src/components/InfoRow.tsx", "content": "import { mdiInformationOutline } from \"@mdi/js\";\nimport React from \"react\";\nimport { Icon } from \"./Icon/Icon\";\nimport { classOverride } from \"./Flex\";\n\ntype InfoRowProps = {\n variant?: \"filled\" | \"naked\";\n color?: \"warning\" | \"danger\" | \"info\" | \"action\";\n iconPath?: string;\n iconSize?: number;\n style?: React.CSSProperties;\n className?: string;\n contentClassname?: string;\n children?: React.ReactNode;\n};\nexport function InfoRow(props: InfoRowProps) {\n const {\n className,\n iconPath = mdiInformationOutline,\n style = {},\n variant,\n children,\n color = \"warning\",\n contentClassname = \"\",\n iconSize = 1.25,\n } = props;\n\n let rootClass = \"\";\n const bgColor = color === \"info\" ? \"default\" : color;\n if (variant === \"filled\") {\n rootClass = `b b-${bgColor} text-${bgColor} bg-${bgColor} px-1 py-p75`;\n } else if (variant === \"naked\") {\n rootClass = `text-${bgColor} `;\n } else {\n rootClass = `b b-${bgColor} text-${bgColor} px-1 py-p75`;\n }\n\n return (\n \n {iconPath && iconPath.length > 0 && (\n \n )}\n \n {children}\n \n \n );\n}\n" }, { "path": "client/src/components/Input.tsx", "content": "import React, { useEffect, useState } from \"react\";\n\ntype P = React.HTMLProps & {\n onNumLockAlert?: (show: boolean) => void;\n};\n\nexport const Input = React.forwardRef((props, ref) => {\n const { className = \"\", style = {}, onNumLockAlert, ...otherProps } = props;\n\n const [showNumLock, setShowNumLock] = useState(false);\n useEffect(() => {\n onNumLockAlert?.(showNumLock);\n }, [showNumLock, onNumLockAlert]);\n\n return (\n {\n if (ref) {\n typeof ref === \"function\" ? ref(e) : (ref.current = e);\n }\n if (e) {\n setTimeout(() => {\n if (props.autoFocus && document.activeElement !== e) {\n e.focus();\n e.select();\n }\n }, 40);\n\n // @ts-ignore\n e.forceDemoValue = (val: any) => {\n // @ts-ignore\n props.onChange?.({ currentTarget: { value: val } });\n };\n }\n }}\n onKeyDown={\n props.type === \"number\" ?\n (e) => {\n const numLockAlert =\n !e.getModifierState(\"NumLock\") &&\n e.nativeEvent.code.startsWith(\"Numpad\") &&\n e.key !== e.nativeEvent.code.slice(0, \"Numpad\".length); //(NUMLOCK_KEYS.includes(e.key) || !e.currentTarget.value && [\"ArrowRight\", \"ArrowLeft\"].includes(e.key) )\n if (numLockAlert !== showNumLock) {\n setShowNumLock(numLockAlert);\n }\n props.onKeyDown?.(e);\n const node = e.target as HTMLInputElement;\n if (!/^-?\\d+$/.test(props.value as any)) {\n node.placeholder = \"Numbers only\";\n setTimeout(() => {\n if (!node.isConnected) return;\n node.placeholder = otherProps.placeholder ?? \"\";\n }, 1000);\n }\n }\n : otherProps.onKeyDown\n }\n />\n );\n});\n" }, { "path": "client/src/components/JSONBSchema/JSONBSchema.tsx", "content": "import type { JSONB } from \"prostgles-types\";\nimport { isEqual, isObject } from \"prostgles-types\";\nimport React, { useCallback, useEffect, useState } from \"react\";\nimport type { Prgl } from \"../../App\";\nimport { isCompleteJSONB } from \"./isCompleteJSONB\";\nimport {\n JSONBSchemaAllowedOptions,\n JSONBSchemaAllowedOptionsMatch,\n} from \"./JSONBSchemaAllowedOptions\";\nimport { JSONBSchemaArray, JSONBSchemaArrayMatch } from \"./JSONBSchemaArray\";\nimport { JSONBSchemaLookup, JSONBSchemaLookupMatch } from \"./JSONBSchemaLookup\";\nimport { JSONBSchemaObject, JSONBSchemaObjectMatch } from \"./JSONBSchemaObject\";\nimport {\n JSONBSchemaOneOfType,\n JSONBSchemaOneOfTypeMatch,\n} from \"./JSONBSchemaOneOfType\";\nimport {\n JSONBSchemaPrimitive,\n JSONBSchemaPrimitiveMatch,\n} from \"./JSONBSchemaPrimitive\";\nimport { JSONBSchemaRecord, JSONBSchemaRecordMatch } from \"./JSONBSchemaRecord\";\n\ntype Schema = JSONB.JSONBSchema & { optional?: boolean };\nexport type JSONBSchemaCommonProps = Pick & {\n className?: string;\n style?: React.CSSProperties;\n value: unknown;\n setHasErrors?: (hasErrors: boolean) => void;\n showErrors?: boolean;\n nestingPath?: (string | number)[];\n allowIncomplete?: boolean;\n noLabels?: boolean;\n schemaStyles?: {\n path: string[];\n style?: React.CSSProperties;\n className?: string;\n }[];\n};\n\ntype P = JSONBSchemaCommonProps & {\n schema: S;\n onChange: (newValue: JSONB.GetType) => void;\n};\n\nexport const JSONBSchema = (props: P) => {\n const {\n style,\n className = \"\",\n value,\n schema,\n onChange,\n setHasErrors,\n ...otherProps\n } = props;\n const { allowIncomplete, nestingPath: isNested } = otherProps;\n const [_localValueRaw, setlocalValue] = useState();\n const localValueRaw = _localValueRaw ?? value;\n const localValue = isNested ? value : localValueRaw;\n const setLocalValue = useCallback(\n (newlocalValue) => {\n if (isNested) {\n onChange(newlocalValue);\n } else {\n setlocalValue(newlocalValue);\n }\n },\n [onChange, isNested, setlocalValue],\n );\n\n const hasError = !isCompleteJSONB(value, schema);\n useEffect(() => {\n setHasErrors?.(hasError);\n }, [hasError, setHasErrors]);\n\n useEffect(() => {\n if (isNested) return;\n\n /** Fire onchange if data is complete */\n const shouldFireOnChange =\n allowIncomplete || isCompleteJSONB(localValue, schema);\n const valueHasChanged = !isEqual(localValue, value);\n // console.log({ shouldFireOnChange, valueHasChanged, localValue, value });\n if (shouldFireOnChange && valueHasChanged) {\n onChange(localValue);\n setlocalValue(undefined);\n }\n }, [localValue, value, allowIncomplete, isNested, onChange, schema]);\n\n if (JSONBSchemaLookupMatch(schema)) {\n return (\n \n );\n }\n\n let node: React.ReactNode = null;\n if (JSONBSchemaAllowedOptionsMatch(schema)) {\n node = (\n \n );\n } else if (JSONBSchemaPrimitiveMatch(schema)) {\n node = (\n \n );\n } else if (JSONBSchemaOneOfTypeMatch(schema)) {\n node = (\n //@ts-ignore\n \n );\n } else if (JSONBSchemaObjectMatch(schema)) {\n node = (\n \n );\n } else if (JSONBSchemaRecordMatch(schema)) {\n node = (\n \n );\n } else if (JSONBSchemaArrayMatch(schema)) {\n node = (\n \n );\n }\n\n if (node) {\n const isDisabled =\n isObject(schema) && schema.optional && localValue === undefined;\n const styleDisabled =\n !isDisabled || otherProps.nestingPath ? {} : { opacity: 0.5 };\n return (\n \n {node}\n \n );\n }\n\n return (\n <>\n Schema not suitable for JSONBSchema.tsx: {JSON.stringify(schema, null, 2)}\n \n );\n};\n\n// @ts-ignore\nexport const JSONBSchemaA = JSONBSchema as (\n props: JSONBSchemaCommonProps & {\n schema: any;\n onChange: (newValue: any) => void;\n },\n) => React.JSX.Element;\n" }, { "path": "client/src/components/JSONBSchema/JSONBSchemaAllowedOptions.tsx", "content": "import type { JSONB } from \"prostgles-types\";\nimport { isObject } from \"prostgles-types\";\nimport React from \"react\";\nimport FormField from \"../FormField/FormField\";\nimport type { FullOption } from \"../Select/Select\";\nimport { isCompleteJSONB } from \"./isCompleteJSONB\";\nimport type { JSONBSchemaCommonProps } from \"./JSONBSchema\";\n\ntype Schema = JSONB.BasicType;\ntype P = JSONBSchemaCommonProps & {\n schema: Schema;\n onChange: (newValue: JSONB.GetType) => void;\n};\n\nexport const JSONBSchemaAllowedOptionsMatch = (\n s: JSONB.JSONBSchema,\n): s is JSONB.BasicType => !!getFullOptions(s);\n\nexport const JSONBSchemaAllowedOptions = ({\n value,\n schema,\n onChange,\n showErrors,\n noLabels,\n}: P) => {\n const o = getFullOptions(schema);\n if (!o) {\n return (\n <>\n Could not render JSONBSchemaAllowedOptions schema:{\" \"}\n {JSON.stringify(schema)}\n \n );\n }\n\n const error =\n showErrors && !isCompleteJSONB(value, schema) ? \"Required\" : undefined;\n\n return (\n {\n onChange(newVal);\n }}\n error={error}\n />\n );\n};\n\n/**\n * To construct a fullOptions select use this schema:\n * {\n * oneOf: [\n * { enum: [\"key\"], description: \"subLabel\" }\n * ]\n * }\n */\nconst getFullOptions = (\n s: JSONB.JSONBSchema,\n): { fullOptions: FullOption[]; isMulti: boolean } | undefined => {\n if (s.allowedValues) {\n const firstValue = s.allowedValues[0];\n const fullOptions =\n isObject(firstValue) ?\n (\n s.allowedValues as { label: string; value: any; subLabel?: string }[]\n ).map(({ value, label, subLabel }) => ({\n key: value,\n label,\n subLabel,\n }))\n : s.allowedValues.map((key) => ({ key }));\n return {\n fullOptions,\n isMulti: typeof s.type === \"string\" && s.type.endsWith(\"[]\"),\n };\n } else if (s.oneOf?.every((ss) => isObject(ss) && ss.enum)) {\n const fullOptions = s.oneOf.flatMap((_ss) => {\n const ss = _ss as JSONB.EnumType;\n return ss.enum.map((key) => {\n return {\n key,\n subLabel: ss.description,\n };\n });\n });\n\n return {\n fullOptions,\n isMulti: false,\n };\n }\n\n return undefined;\n};\n" }, { "path": "client/src/components/JSONBSchema/JSONBSchemaArray.tsx", "content": "import { mdiClose, mdiPlus } from \"@mdi/js\";\nimport type { JSONB } from \"prostgles-types\";\nimport React, { useState } from \"react\";\nimport Btn from \"../Btn\";\nimport { DraggableLI } from \"../DraggableLI\";\nimport Popup from \"../Popup/Popup\";\nimport { Section } from \"../Section\";\nimport type { JSONBSchemaCommonProps } from \"./JSONBSchema\";\nimport { JSONBSchema } from \"./JSONBSchema\";\nimport { classOverride } from \"../Flex\";\n\ntype Schema = JSONB.ArrayOf;\ntype P = JSONBSchemaCommonProps & {\n schema: Schema;\n onChange: (newValue: JSONB.GetType) => void;\n};\n\nexport const JSONBSchemaArrayMatch = (s: JSONB.JSONBSchema): s is Schema =>\n !!(s.arrayOf || s.arrayOfType);\n\nexport const JSONBSchemaArray = ({\n value,\n schema,\n onChange,\n nestingPath,\n ...oProps\n}: P) => {\n const [newItem, setNewItem] = useState<{\n val: any;\n isComplete: boolean;\n anchorEl: HTMLElement;\n }>();\n const itemSchema =\n typeof schema.arrayOf === \"string\" ?\n { type: schema.arrayOf }\n : (schema.arrayOf ?? { type: schema.arrayOfType });\n\n const addNewItem = (nItem = newItem) => {\n if (!nItem) return;\n\n onChange([...(Array.isArray(value) ? value : []), nItem.val] as any);\n setNewItem(undefined);\n };\n\n const [orderAge, setOrderAge] = useState(0);\n\n return (\n {\n setNewItem({\n isComplete: false,\n val: null,\n anchorEl: currentTarget,\n });\n }}\n />\n }\n open={true}\n >\n {/* */}\n
\n {Array.isArray(value) &&\n value.map((item, itemIdx) => {\n const itemNestingPath = [...(nestingPath ?? []), itemIdx];\n const itemStyle = oProps.schemaStyles?.find(\n (ss) => ss.path.join() === itemNestingPath.join(),\n );\n return (\n {\n onChange(newValue as any);\n setOrderAge(Date.now());\n }}\n >\n
\n {\n onChange(\n newValue === undefined ?\n (value as any).filter((_, i) => i !== itemIdx)\n : (value.map((v, i) =>\n i === itemIdx ? newValue : v,\n ) as any),\n );\n }) as any\n }\n nestingPath={itemNestingPath}\n {...oProps}\n />\n
\n {\n onChange((value as any).filter((_, i) => i !== itemIdx));\n }}\n />\n \n );\n })}\n
\n {newItem && (\n setNewItem(undefined)}\n footerButtons={[\n {\n label: \"Cancel\",\n onClickClose: true,\n },\n {\n label: \"Add item\",\n color: \"action\",\n variant: \"filled\",\n disabledInfo:\n !newItem.isComplete ?\n \"Must fill all required data first\"\n : undefined,\n onClick: () => addNewItem(),\n },\n ]}\n >\n {\n setNewItem({ ...newItem, val: newValue, isComplete: true });\n addNewItem({ ...newItem, val: newValue, isComplete: true });\n }) as any\n }\n {...oProps}\n />\n \n )}\n \n );\n};\n" }, { "path": "client/src/components/JSONBSchema/JSONBSchemaLookup.tsx", "content": "import type { JSONB } from \"prostgles-types\";\nimport { getKeys, isEmpty, isObject, pickKeys } from \"prostgles-types\";\nimport React from \"react\";\nimport { SmartSearch } from \"../../dashboard/SmartFilter/SmartSearch/SmartSearch\";\nimport { areEqual } from \"../../utils/utils\";\nimport ErrorComponent from \"../ErrorComponent\";\nimport { Select } from \"../Select/Select\";\nimport { isCompleteJSONB } from \"./isCompleteJSONB\";\nimport type { JSONBSchemaCommonProps } from \"./JSONBSchema\";\nimport { JSONBSchema } from \"./JSONBSchema\";\nimport { getFinalFilter } from \"@common/filterUtils\";\n\ntype Schema = JSONB.Lookup;\ntype P = JSONBSchemaCommonProps & {\n schema: Schema;\n onChange: (newValue: JSONB.GetType) => void;\n};\n\nexport const JSONBSchemaLookupMatch = (s: JSONB.JSONBSchema): s is Schema =>\n isObject(s.lookup);\n\nexport const JSONBSchemaLookup = ({\n value: rawValue,\n schema,\n onChange,\n db,\n tables,\n ...oProps\n}: P) => {\n let defaultValue: string | undefined = undefined;\n const { lookup } = schema;\n\n if (lookup.type === \"schema\" || lookup.type === \"data-def\") {\n const { filter } = lookup;\n const tableFilter = filter?.table;\n const colFilter =\n (\n isObject(filter) &&\n !isEmpty(filter) &&\n (filter.udt_name || filter.tsDataType)\n ) ?\n pickKeys(filter, [\"tsDataType\", \"udt_name\"], true)\n : undefined;\n\n if (!tables as any) {\n return ;\n }\n const matchingTables = tables.filter(\n (t) => !tableFilter || t.name === tableFilter,\n );\n const delimiter = `||_prgl$_||?!#$@#@$@$#\"4$`;\n const needsCol =\n lookup.type === \"data-def\" ||\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n (lookup.type === \"schema\" && lookup.object === \"column\");\n const fullOptions =\n needsCol ?\n matchingTables.flatMap((t) => {\n return t.columns\n .filter(\n (c) => !colFilter || areEqual(colFilter, c, getKeys(colFilter)),\n )\n .map((c) => ({\n key: [t.name, c.name].join(delimiter),\n label: [t.name, c.name].join(\".\"),\n subLabel: c.udt_name,\n }));\n })\n : matchingTables.map((t) => ({\n key: t.name,\n subLabel: t.columns.map((c) => c.name).join(\", \"),\n }));\n\n const setLookupMerged = (l: Partial) => {\n const newLookup = { ...(isObject(rawValue) ? rawValue : {}), ...l };\n\n onChange(newLookup);\n };\n\n const selectedValue =\n isObject(rawValue) ?\n [rawValue.table, rawValue.column].join(delimiter)\n : rawValue;\n\n // TODO: this must be fixed through LookupTable, LookupTable[], LookupTableColumn etc\n if (schema.type === \"Lookup[]\" && !lookup.isArray) {\n return (\n \n );\n }\n const multiSelect = lookup.isArray;\n const selector = (\n {\n if (needsCol) {\n const [table, column] =\n typeof opts === \"string\" ? opts.split(delimiter) : [];\n setLookupMerged({ table, column });\n } else {\n onChange(opts);\n }\n }}\n />\n );\n\n if (lookup.type === \"data-def\") {\n const value = isObject(rawValue) ? rawValue : undefined;\n const tableCols =\n value?.table ?\n tables.find((t) => t.name === value.table)?.columns.map((c) => c.name)\n : undefined;\n\n return (\n
\n {selector}\n {tableCols && (\n <>\n {\n setLookupMerged({\n ...newLookupOpts,\n type: \"data\",\n });\n }) as any\n }\n db={db}\n tables={tables}\n {...oProps}\n />\n \n )}\n
\n );\n }\n\n return selector;\n }\n\n if (lookup.isFullRow) {\n if (!isObject(rawValue)) {\n } else if (lookup.isFullRow.displayColumns?.length) {\n defaultValue = Object.values(\n pickKeys(rawValue, lookup.isFullRow.displayColumns),\n ).join(\", \");\n } else if (lookup.column) {\n defaultValue = rawValue[lookup.column];\n } else {\n defaultValue = Object.values(rawValue)[0];\n }\n } else if (typeof rawValue === \"string\" || typeof rawValue === \"number\") {\n defaultValue = rawValue.toString();\n }\n\n const error =\n oProps.showErrors && !isCompleteJSONB(defaultValue || undefined, schema) ?\n \"Required\"\n : undefined;\n\n return (\n {\n if (!searchArgs && searchArgs !== defaultValue) {\n onChange(searchArgs);\n return;\n }\n\n const refCol = lookup.column;\n const { colName, columnValue, filter } = searchArgs ?? {};\n const filterItem = filter?.[0];\n if (!colName || !columnValue || !refCol || !filterItem) return;\n\n const finalFilter = getFinalFilter(filterItem);\n const firstMatchingRow = await db[lookup.table]?.findOne!(finalFilter);\n if (firstMatchingRow) {\n onChange(\n lookup.isFullRow ? firstMatchingRow : firstMatchingRow[refCol],\n );\n // if(isDisabled){\n // otherProps.setState({ disabledArgs: disabledArgs.filter(d => d !== argName) })\n // }\n }\n }}\n />\n );\n};\n" }, { "path": "client/src/components/JSONBSchema/JSONBSchemaObject.tsx", "content": "import { mdiClose, mdiDotsHorizontal } from \"@mdi/js\";\nimport type { JSONB } from \"prostgles-types\";\nimport { getKeys, isObject, omitKeys } from \"prostgles-types\";\nimport React, { useState } from \"react\";\nimport Btn from \"../Btn\";\nimport { Label } from \"../Label\";\nimport type { JSONBSchemaCommonProps } from \"./JSONBSchema\";\nimport { JSONBSchema } from \"./JSONBSchema\";\nimport { getSchemaFromField } from \"./isCompleteJSONB\";\nimport { classOverride } from \"../Flex\";\n\ntype Schema = JSONB.ObjectType;\ntype P = JSONBSchemaCommonProps & {\n schema: Schema;\n onChange: (newValue: JSONB.GetType) => void;\n showOptionalUndefinedProps?: boolean;\n};\n\nexport const JSONBSchemaObjectMatch = (\n s: JSONB.JSONBSchema,\n): s is JSONB.ObjectType => isObject(s.type);\n\nexport const JSONBSchemaObject = ({\n value: rawValue,\n schema,\n onChange,\n nestingPath,\n className,\n style,\n ...oProps\n}: P) => {\n const value = isObject(rawValue) ? rawValue : undefined;\n const optionalProps = Object.entries(schema.type)\n .filter(([k, v]) => isObject(v) && v.optional && value?.[k] === undefined)\n .map(([k]) => k);\n const [showOptional, setShowOptional] = useState(false);\n\n if (schema.optional && value === undefined && !showOptional && nestingPath) {\n return (\n \n {!oProps.noLabels && }\n {\n setShowOptional(true);\n onChange({} as any);\n }}\n />\n \n );\n }\n\n const objectSchema = schema.type;\n const requiredPropNames = getKeys(objectSchema).filter(\n (k) => !getSchemaFromField(objectSchema[k]!).optional,\n );\n const optionalPropNames = getKeys(objectSchema).filter(\n (k) => getSchemaFromField(objectSchema[k]!).optional,\n );\n\n return (\n \n {[...requiredPropNames, ...optionalPropNames]\n .filter((k) => showOptional || !optionalProps.includes(k))\n .map((propName) => {\n const ps = schema.type[propName]!;\n const propSchema = {\n title: propName,\n ...(typeof ps === \"string\" ? { type: ps } : ps),\n };\n\n const itemNestingPath = [...(nestingPath ?? []), propName];\n\n const itemStyle = oProps.schemaStyles?.find(\n (ss) => ss.path.join() === itemNestingPath.join(),\n );\n return (\n {\n onChange(\n (newVal === undefined ?\n omitKeys(value ?? {}, [propName])\n : { ...value, [propName]: newVal }) as any,\n );\n }) as any\n }\n {...oProps}\n />\n );\n })}\n {!showOptional && !!optionalProps.length && (\n setShowOptional(true)}\n className=\"as-end fit\"\n />\n )}\n {value !== undefined && schema.optional && (\n onChange(undefined as any)}\n className=\"as-end fit\"\n />\n )}\n \n );\n};\n" }, { "path": "client/src/components/JSONBSchema/JSONBSchemaOneOfType.tsx", "content": "import type { JSONB } from \"prostgles-types\";\nimport { getKeys, isObject, omitKeys, pickKeys } from \"prostgles-types\";\nimport React from \"react\";\nimport type { JSONBSchemaCommonProps } from \"./JSONBSchema\";\nimport { JSONBSchemaObject } from \"./JSONBSchemaObject\";\nimport { classOverride } from \"../Flex\";\n\ntype Schema = Extract<\n { oneOfType: Required[\"oneOfType\"] },\n JSONB.OneOf\n>;\ntype P = JSONBSchemaCommonProps & {\n schema: Schema;\n onChange: (newValue: JSONB.GetType) => void;\n};\n\n/**\n * Can render oneOfType only if there are common properties across objects\n */\nexport const JSONBSchemaOneOfTypeMatch = (s: JSONB.JSONBSchema): s is Schema =>\n Array.isArray(s.oneOfType);\n\nexport const JSONBSchemaOneOfType = ({\n value,\n schema,\n onChange,\n nestingPath,\n style,\n className,\n ...oProps\n}: P) => {\n const s = schema;\n\n const firstSchema = s.oneOfType[0];\n const firstSchemaKeys = getKeys(firstSchema ?? {});\n const commonRequiredPropertyNames = firstSchemaKeys.filter((propName) => {\n const fPropS = getFieldObj(firstSchema![propName]!);\n return (\n !fPropS.optional &&\n s.oneOfType.every((subSchema) => {\n const objType = subSchema[propName];\n const propS = typeof objType === \"string\" ? { type: objType } : objType;\n return (\n propS && (propS.type === fPropS.type || (propS.enum && fPropS.enum))\n );\n })\n );\n });\n\n /**\n * oneOfType: [\n * { toggle: { enum: [\"opt1\"] } },\n * ...otherProps\n */\n const toggleProps = commonRequiredPropertyNames.filter((key) => {\n const s = firstSchema?.[key];\n return isObject(s) && s.enum?.length;\n });\n\n if (!firstSchema) {\n return <>Cannot render: schema.oneOfType is empty;\n }\n if (!toggleProps.length) {\n return <>Cannot render: schema.oneOfType has no common properties;\n }\n\n const getOneOfSchemaIndex = (value: any): number => {\n return s.oneOfType.findIndex(\n (ss) =>\n isObject(value) &&\n toggleProps.every((propName) =>\n (ss[propName] as JSONB.EnumType).enum.includes(value[propName]),\n ),\n );\n };\n\n const matchingOneOfSchemaIdx = getOneOfSchemaIndex(value);\n\n const matchingOneOfSchema = structuredClone(\n s.oneOfType[matchingOneOfSchemaIdx] ||\n pickKeys(firstSchema, commonRequiredPropertyNames),\n );\n\n toggleProps.forEach((tKey) => {\n /**\n * Create full options schema\n */\n matchingOneOfSchema[tKey] = {\n ...omitKeys(matchingOneOfSchema[tKey]! as any, [\"enum\"]),\n oneOf: s.oneOfType.flatMap((ss) => {\n return {\n title: tKey,\n ...(ss[tKey] as JSONB.EnumType),\n };\n }),\n };\n });\n\n const itemNestingPath = [...(nestingPath ?? []), matchingOneOfSchemaIdx];\n const itemStyle = oProps.schemaStyles?.find(\n (ss) => ss.path.join() === itemNestingPath.join(),\n );\n return (\n
\n {\n /**\n * If matching a different schema then keep only common properties\n */\n const newSchemaIdx = getOneOfSchemaIndex(newValue);\n //@ts-ignore\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n if (newValue && newSchemaIdx !== matchingOneOfSchemaIdx) {\n const currentSchema = matchingOneOfSchema;\n const newSchema = s.oneOfType[newSchemaIdx]!;\n /** Must remove any properties that do not exist in the new schema */\n const newValueWithCommonProps = pickKeys(\n newValue,\n getKeys(newSchema).filter((key) => {\n if (toggleProps.includes(key)) return true;\n const oldPropSchema =\n currentSchema[key] && getFieldObj(currentSchema[key]);\n const newPropSchema =\n newSchema[key] && getFieldObj(newSchema[key]);\n return (\n oldPropSchema &&\n newPropSchema &&\n typeof oldPropSchema.type === \"string\" &&\n oldPropSchema.type === newPropSchema.type\n );\n }),\n );\n //@ts-ignore\n onChange(newValueWithCommonProps);\n } else {\n onChange(newValue);\n }\n }}\n nestingPath={itemNestingPath}\n className={classOverride(className, itemStyle?.className)}\n style={{ ...style, ...itemStyle?.style }}\n {...oProps}\n />\n
\n );\n};\n\nexport const getFieldObj = (f: JSONB.FieldType): JSONB.FieldTypeObj => {\n return typeof f === \"string\" ? { type: f } : f;\n};\n" }, { "path": "client/src/components/JSONBSchema/JSONBSchemaPrimitive.tsx", "content": "import { FormFieldDebounced } from \"@components/FormField/FormFieldDebounced\";\nimport type { JSONB, ValidatedColumnInfo } from \"prostgles-types\";\nimport React from \"react\";\nimport { getInputType } from \"../../dashboard/SmartForm/SmartFormField/fieldUtils\";\nimport type { FormFieldProps } from \"../FormField/FormField\";\nimport type { FullOption } from \"../Select/Select\";\nimport type { JSONBSchemaCommonProps } from \"./JSONBSchema\";\nimport { isCompleteJSONB } from \"./isCompleteJSONB\";\n\ntype Schema = JSONB.BasicType | JSONB.EnumType;\ntype P = JSONBSchemaCommonProps & {\n className?: string;\n style?: React.CSSProperties;\n schema: Schema;\n value: JSONB.GetType;\n onChange: (newValue: JSONB.GetType) => void;\n};\nexport const JSONBSchemaPrimitiveMatch = (\n s: JSONB.JSONBSchema,\n): s is JSONB.BasicType | JSONB.EnumType =>\n !s.lookup &&\n (!!s.enum?.length ||\n (!s.allowedValues?.length && typeof s.type === \"string\"));\n\nexport const JSONBSchemaPrimitive = ({\n value,\n schema,\n onChange,\n showErrors,\n noLabels,\n}: P) => {\n let fullOptions: FullOption[] | undefined = undefined;\n if (schema.enum?.length || schema.allowedValues?.length) {\n fullOptions = (schema.enum || schema.allowedValues!).map((key) => ({\n key,\n }));\n }\n\n const transformedType = {\n ...(schemaTypeToColType[schema.type as any] ?? {\n tsDataType: \"string\",\n udt_name: \"text\",\n }),\n };\n\n let arrayType: FormFieldProps<\"text\">[\"arrayType\"];\n if (schema.type?.endsWith(\"[]\")) {\n const tsDataType = schema.type.slice(0, -2) as any;\n arrayType = {\n ...(schemaTypeToColType[tsDataType!] ?? {\n tsDataType: \"string\",\n udt_name: \"text\",\n }),\n };\n }\n\n const inputType = getInputType({\n ...transformedType,\n name: schema.title ?? \"text\",\n });\n\n const error =\n showErrors && !isCompleteJSONB(value, schema) ? \"Required\" : undefined;\n\n return (\n {\n if (schema.type === \"number[]\" || schema.type === \"integer[]\") {\n if (Array.isArray(newVal) && newVal.every(parseNumber)) {\n onChange(newVal.map(parseNumber));\n return;\n }\n }\n if (\n (schema.type === \"number\" || schema.type === \"integer\") &&\n parseNumber(newVal)\n ) {\n onChange(+newVal);\n return;\n }\n onChange(newVal);\n }}\n error={error}\n />\n );\n};\n\nconst schemaTypeToColType: Record<\n Required[\"type\"],\n Pick\n> = {\n Date: {\n tsDataType: \"string\",\n udt_name: \"date\",\n },\n \"Date[]\": {\n tsDataType: \"string\",\n udt_name: \"date\",\n },\n boolean: {\n tsDataType: \"boolean\",\n udt_name: \"bool\",\n },\n \"boolean[]\": {\n tsDataType: \"boolean[]\",\n udt_name: \"bool\",\n },\n integer: {\n tsDataType: \"number\",\n udt_name: \"int4\",\n },\n \"integer[]\": {\n tsDataType: \"number[]\",\n udt_name: \"int4\",\n },\n time: {\n tsDataType: \"string\",\n udt_name: \"time\",\n },\n \"time[]\": {\n tsDataType: \"string[]\",\n udt_name: \"time\",\n },\n timestamp: {\n tsDataType: \"string\",\n udt_name: \"timestamp\",\n },\n \"timestamp[]\": {\n tsDataType: \"string[]\",\n udt_name: \"timestamp\",\n },\n string: {\n tsDataType: \"string\",\n udt_name: \"text\",\n },\n \"string[]\": {\n tsDataType: \"string[]\",\n udt_name: \"text\",\n },\n number: {\n tsDataType: \"number\",\n udt_name: \"numeric\",\n },\n \"number[]\": {\n tsDataType: \"number[]\",\n udt_name: \"numeric\",\n },\n any: {\n tsDataType: \"any\",\n udt_name: \"text\",\n },\n \"any[]\": {\n tsDataType: \"any\",\n udt_name: \"text\",\n },\n};\n\nconst parseNumber = (str: string) =>\n str && Number.isFinite(+str) && (+str.trim()).toString() === str.trim();\n" }, { "path": "client/src/components/JSONBSchema/JSONBSchemaRecord.tsx", "content": "import { mdiPlus } from \"@mdi/js\";\nimport type { JSONB } from \"prostgles-types\";\nimport { getKeys, isObject, omitKeys } from \"prostgles-types\";\nimport React from \"react\";\nimport Btn from \"../Btn\";\nimport { FormFieldDebounced } from \"../FormField/FormFieldDebounced\";\nimport type { JSONBSchemaCommonProps } from \"./JSONBSchema\";\nimport { JSONBSchema } from \"./JSONBSchema\";\n\ntype Schema = JSONB.RecordType;\ntype P = JSONBSchemaCommonProps & {\n schema: Schema;\n onChange: (newValue: JSONB.GetType) => void;\n};\n\nexport const JSONBSchemaRecordMatch = (s: JSONB.JSONBSchema): s is Schema =>\n isObject(s.record);\nexport const JSONBSchemaRecord = ({\n value,\n schema,\n onChange,\n ...oProps\n}: P) => {\n return (\n
\n {isObject(value) &&\n getKeys(value).map((propName) => {\n const ps = schema.record.values ?? { type: \"any\" };\n const propSchema = {\n title: \"Value\",\n ...(typeof ps === \"string\" ? { type: ps } : ps),\n };\n return (\n
\n {\n onChange({\n ...omitKeys(value, [propName]),\n [newPropName]: value[propName],\n });\n }}\n />\n {\n onChange(\n newVal === undefined ?\n omitKeys(value, [propName])\n : { ...value, [propName]: newVal },\n );\n }}\n {...oProps}\n />\n
\n );\n })}\n\n {\n onChange({\n ...(value ?? {}),\n new_property: undefined,\n });\n }}\n >\n Add property\n \n
\n );\n};\n" }, { "path": "client/src/components/JSONBSchema/isCompleteJSONB.ts", "content": "import type { JSONB } from \"prostgles-types\";\nimport { isObject } from \"prostgles-types\";\nimport { getEntries } from \"@common/utils\";\n\nexport const getSchemaFromField = (s: JSONB.FieldType): JSONB.FieldTypeObj =>\n typeof s === \"string\" ? { type: s } : s;\n\nexport const getJSONBError = (\n schema: JSONB.JSONBSchema & { optional?: boolean },\n value: any,\n) => {\n if (\n (!schema.nullable && value === null) ||\n (!schema.optional && value === undefined)\n ) {\n return \"Required\";\n }\n\n return undefined;\n};\n\nexport const isCompleteJSONB = (\n v: any,\n ss: JSONB.JSONBSchema | JSONB.OneOf | JSONB.FieldType,\n) => {\n const s = typeof ss === \"string\" ? getSchemaFromField(ss) : ss;\n if ((s as JSONB.BasicType).optional && v === undefined) {\n return true;\n }\n if (s.nullable && v === null) {\n return true;\n }\n if (\"lookup\" in s && s.lookup) {\n return v !== undefined;\n } else if (typeof s.type === \"string\" && v !== undefined) {\n return true;\n } else if (s.enum?.includes(v)) {\n return true;\n } else if (isObject(s.type) && isObject(v)) {\n return getEntries(s.type).every(([propName, propSchema]) =>\n isCompleteJSONB(v[propName], propSchema),\n );\n } else if (s.arrayOf || s.arrayOfType) {\n const arrSchema = s.arrayOf ? s.arrayOf : { type: s.arrayOfType };\n return (\n Array.isArray(v) && v.every((elem) => isCompleteJSONB(elem, arrSchema))\n );\n } else if (s.oneOf || s.oneOfType) {\n return (s.oneOf || s.oneOfType?.map((type) => ({ type })))?.some((oneS) =>\n isCompleteJSONB(v, oneS),\n );\n }\n return false;\n};\n" }, { "path": "client/src/components/JsonRenderer.tsx", "content": "import React from \"react\";\n\ntype P = {\n value: any;\n};\n\nexport const JsonRenderer: React.FC

= ({ value }) => {\n const renderObject = (obj: any, idx = 1) => {\n if (Array.isArray(obj)) {\n return obj.map(renderObject);\n }\n\n if (Object(obj) !== obj) {\n return {obj};\n }\n\n return (\n

\n {Object.entries(obj).map(([key, value]) => (\n
\n
{key}:
\n
{renderObject(value)}
\n
\n ))}\n
\n );\n };\n\n return
{renderObject(value)}
;\n};\n" }, { "path": "client/src/components/Label.css", "content": ".Label_QuestionButton {\n position: relative;\n}\n\n.Label_QuestionButton:hover::after {\n content: \"?\";\n position: absolute;\n top: 0;\n right: 0;\n}\n" }, { "path": "client/src/components/Label.tsx", "content": "import { mdiHelp, mdiInformationOutline } from \"@mdi/js\";\nimport React from \"react\";\nimport Btn from \"./Btn\";\nimport { Checkbox } from \"./Checkbox\";\nimport { classOverride } from \"./Flex\";\nimport { Icon } from \"./Icon/Icon\";\nimport \"./Label.css\";\nimport PopupMenu from \"./PopupMenu\";\n\nexport type NormalLabelProps = {\n variant: \"normal\";\n iconPath?: undefined;\n leftIcon?: React.ReactNode;\n toggle?: {\n checked?: boolean;\n onChange: (checked: boolean) => void;\n };\n};\n\nexport type HeaderLabelProps = {\n variant?: \"header\";\n iconPath?: string;\n leftIcon?: undefined;\n toggle?: undefined;\n};\n\ntype LabelPropsCommon = React.DetailedHTMLProps<\n React.LabelHTMLAttributes,\n HTMLLabelElement\n> & {\n label?: string;\n info?: React.ReactNode;\n popupTitle?: React.ReactNode;\n size?: \"small\";\n};\n\nexport type LabelPropsNormal = LabelPropsCommon & NormalLabelProps;\nexport type LabelPropsHeader = LabelPropsCommon & HeaderLabelProps;\n\nexport type LabelProps = LabelPropsNormal | LabelPropsHeader;\n\nexport const Label = ({\n info = null,\n variant = \"header\",\n iconPath = mdiHelp,\n label,\n popupTitle,\n className = \"\",\n toggle,\n children,\n size,\n leftIcon,\n ...otherProps\n}: LabelProps) => {\n const isHeader = variant === \"header\";\n\n const ensureInfoBtnKeepsCardLayoutCellsConsistent = Boolean(\n !isHeader && info,\n );\n\n const IconBtn = info && (\n \n : \n }\n >\n
\n \n {info}\n
\n \n );\n\n return (\n \n {isHeader && IconBtn}\n {leftIcon}\n {label ?? children}\n {toggle && (\n toggle.onChange(c)}\n variant=\"micro\"\n />\n )}\n {!isHeader && IconBtn}\n \n );\n};\n" }, { "path": "client/src/components/LabeledRow.tsx", "content": "import React from \"react\";\nimport { Icon } from \"./Icon/Icon\";\nimport { FlexRowWrap } from \"./Flex\";\n\ntype P = {\n icon?: string;\n label?: React.ReactNode;\n title?: string;\n className?: string;\n style?: React.CSSProperties;\n children?: React.ReactNode;\n onClick?: React.DOMAttributes[\"onClick\"];\n\n labelClassName?: string;\n labelStyle?: React.CSSProperties;\n contentClassName?: string;\n contentStyle?: React.CSSProperties;\n noContentWrapper?: boolean;\n};\n\nexport const LabeledRow = (p: P) => {\n return (\n \n \n {p.icon && }\n {p.label}\n \n {p.noContentWrapper ?\n p.children\n : \n {p.children}\n \n }\n \n );\n};\n" }, { "path": "client/src/components/List.css", "content": "input.custom-input {\n -webkit-appearance: none !important;\n padding: 0.5em;\n padding-bottom: 4px;\n font-size: 16px;\n outline: none;\n font-weight: 600;\n /* border: 1px solid rgb(223, 223, 223); */\n border: unset;\n}\n\n.input-focus.error:focus,\n/* input.custom-input:focus, */\n.focus-border.error:focus-within {\n -webkit-appearance: none !important;\n border: 1px solid rgb(255, 0, 0);\n outline: none;\n -webkit-box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.151);\n box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.151);\n}\n\n.list-comp ul, ul.no-decor {\n padding: 0;\n margin: 0;\n text-decoration: none;\n list-style: none;\n}\n\n.list-comp label {\n text-align: start;\n}\n\n.hover-bg:hover {\n background-color: var(--li-hover-bg);\n}\n\n.list-comp li:not(.no-hover, :active, :focus):hover ,\n.list-comp li:not(.no-hover, :active, :focus).hover , \nul > li[role=option]:not(.no-hover, :active, :focus):hover {\n background-color: var(--li-hover-bg);\n border: none;\n outline: none;\n}\n\nul > li:focus {\n background-color: var(--li-focus-bg);\n border: none;\n outline: none;\n}" }, { "path": "client/src/components/List.tsx", "content": "import React from \"react\";\nimport { Checkbox } from \"./Checkbox\";\nimport { DraggableLI } from \"./DraggableLI\";\nimport Popup from \"./Popup/Popup\";\nimport type { OptionKey } from \"./Select/Select\";\n\ntype Items = {\n key?: OptionKey;\n label?: string;\n node?: React.ReactNode;\n content?: React.ReactNode;\n contentLeft?: React.ReactNode;\n contentRight?: React.ReactNode;\n onPress: (\n e:\n | React.MouseEvent\n | React.KeyboardEvent,\n ) => void;\n style?: React.CSSProperties;\n}[];\n\nexport type ListProps = {\n id?: string;\n items: Items;\n onReorder?: (newItems: Items) => void;\n style?: React.CSSProperties;\n className?: string;\n\n onClose: VoidFunction;\n selectedValue?: string;\n checkedValues?: OptionKey[];\n anchorRef?: HTMLElement;\n anchorContent?: React.ReactChild;\n};\n\nexport default class List extends React.Component {\n refList?: HTMLUListElement;\n popupAnchor?: HTMLElement;\n render() {\n const {\n className = \"\",\n style = {},\n items,\n onReorder,\n onClose,\n\n selectedValue,\n checkedValues,\n\n anchorRef,\n anchorContent,\n } = this.props;\n\n const list = (\n {\n if (r) this.refList = r;\n }}\n style={{\n // padding: \"0.5em\",\n padding: 0,\n ...style,\n }}\n >\n {!items.length ?\n
No results
\n : items.map((d, i) => (\n d.onPress(e)}\n onKeyUp={(e) => {\n if (e.key === \"Enter\") d.onPress(e);\n }}\n >\n {d.content || (\n <>\n {d.contentLeft || null}\n \n {d.node || (d.label ?? d.key)?.toString()}\n \n {d.contentRight || null}\n {!checkedValues ? null : (\n \n )}\n \n )}\n \n ))\n }\n \n );\n\n let popupAnchor, popupContent;\n if (anchorRef) {\n popupAnchor = anchorRef;\n popupContent = list;\n }\n\n if (anchorContent) {\n popupAnchor = this.popupAnchor;\n popupContent = (\n \n {\n if (e) this.popupAnchor = e;\n }}\n className=\"f-0 min-h-0 min-w-0 m-p5 flex-row jc-start \"\n >\n {popupContent}\n \n {list}\n \n );\n }\n\n if (popupAnchor && popupContent) {\n return (\n \n {popupContent}\n \n );\n }\n\n if (popupAnchor || popupContent) return null;\n\n return list;\n }\n}\n\n{\n /* {\n onChange(e.target.checked, e);\n}}/>\n */\n}\n" }, { "path": "client/src/components/Loader/Loading.css", "content": ".loader {\n font-size: 10px;\n margin: 50px auto;\n text-indent: -9999em;\n width: 11em;\n height: 11em;\n border-radius: 50%;\n background: #ffffff;\n background: -moz-linear-gradient(\n left,\n #ffffff 10%,\n rgba(255, 255, 255, 0) 42%\n );\n background: -webkit-linear-gradient(\n left,\n #ffffff 10%,\n rgba(255, 255, 255, 0) 42%\n );\n background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);\n background: -ms-linear-gradient(\n left,\n #ffffff 10%,\n rgba(255, 255, 255, 0) 42%\n );\n background: linear-gradient(\n to right,\n #ffffff 10%,\n rgba(255, 255, 255, 0) 42%\n );\n position: relative;\n -webkit-animation: load3 1.4s infinite linear;\n animation: load3 1.4s infinite linear;\n -webkit-transform: translateZ(0);\n -ms-transform: translateZ(0);\n transform: translateZ(0);\n will-change: transform;\n}\n.loader:before {\n width: 50%;\n height: 50%;\n background: #ffffff;\n border-radius: 100% 0 0 0;\n position: absolute;\n top: 0;\n left: 0;\n content: \"\";\n}\n.loader:after {\n background: #0dc5c1;\n width: 75%;\n height: 75%;\n border-radius: 50%;\n content: \"\";\n margin: auto;\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n}\n@-webkit-keyframes load3 {\n 0% {\n -webkit-transform: rotate(0deg);\n transform: translateZ(0) rotate(0deg);\n }\n 100% {\n -webkit-transform: rotate(360deg);\n transform: translateZ(0) rotate(360deg);\n }\n}\n@keyframes load3 {\n 0% {\n -webkit-transform: rotate(0deg);\n transform: translateZ(0) rotate(0deg);\n }\n 100% {\n -webkit-transform: rotate(360deg);\n transform: translateZ(0) rotate(360deg);\n }\n}\n\n/* $offset: 187;\n$duration: 1.4s; */\n\n.Spinner path {\n transform-box: fill-box;\n transform-origin: center;\n animation: rotator 0.75s infinite linear;\n will-change: transform;\n}\n@keyframes rotator {\n 100% {\n transform: translateZ(0) rotate(360deg);\n }\n}\n\n@keyframes colors {\n 0% {\n stroke: #4285f4;\n }\n 25% {\n stroke: #de3e35;\n }\n 50% {\n stroke: #f7c223;\n }\n 75% {\n stroke: #1b9a59;\n }\n 100% {\n stroke: #4285f4;\n }\n}\n\n@keyframes dash {\n 0% {\n stroke-dashoffset: 187;\n }\n 50% {\n stroke-dashoffset: 47.65;\n transform: translateZ(0) rotate(135deg);\n }\n 100% {\n stroke-dashoffset: 187;\n transform: translateZ(0) rotate(450deg);\n }\n}\n\n.top-bar-loader {\n background: #eee;\n background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);\n border-radius: 5px;\n background-size: 200% 100%;\n animation: 1.5s shine linear infinite;\n}\n\n@keyframes shine {\n to {\n background-position-x: -200%;\n }\n}\n" }, { "path": "client/src/components/Loader/Loading.tsx", "content": "import React, { useEffect, useMemo, useRef, useState } from \"react\";\nimport \"./Loading.css\";\nimport RTComp from \"../../dashboard/RTComp\";\nimport { classOverride, FlexRow } from \"../Flex\";\nimport { tout } from \"../../utils/utils\";\nimport { SpinnerV2 } from \"./SpinnerV2\";\nimport { SpinnerV4 } from \"./SpinnerV4\";\nimport { SpinnerV3 } from \"./SpinnerV3\";\nexport const pageReload = async (reason: string) => {\n console.log(\"pageReload due to: \", reason);\n await tout(200);\n window.location.reload();\n};\n\ntype P = {\n /* If provided will ensure continuity to the applied delays */\n id?: string;\n style?: React.CSSProperties;\n className?: string;\n variant?: \"top-bar\" | \"cover\";\n sizePx?: number;\n message?: string;\n colorAnimation?: boolean;\n} & (\n | { show?: boolean; delay?: undefined }\n | { delay?: number; show?: undefined }\n) &\n (\n | {\n /**\n * Used to call something if stuck on the same loading message\n */\n onTimeout?: {\n message?: string;\n run: VoidFunction;\n timeout: number;\n };\n /**\n * Used to refresh page if stuck on the same loading message\n */\n refreshPageTimeout?: undefined;\n }\n | {\n onTimeout?: undefined;\n refreshPageTimeout?: number;\n }\n );\n\nconst loaderIdLastShown: Record = {};\n\ntype S = {\n ready: boolean;\n timeoutMessage?: string;\n};\nexport default class Loading extends RTComp {\n state: S = {\n ready: false,\n };\n mounted = false;\n\n get show() {\n const { delay = 500, id } = this.props;\n const wasShownRecently =\n id !== undefined &&\n loaderIdLastShown[id] &&\n Date.now() - loaderIdLastShown[id] < delay;\n return !delay || wasShownRecently || this.state.ready;\n }\n\n onMount() {\n this.mounted = true;\n if (\"show\" in this.props) return;\n\n const { delay = 500, id } = this.props;\n if (delay && !this.show) {\n setTimeout(() => {\n if (this.mounted) {\n if (id) loaderIdLastShown[id] = Date.now();\n this.setState({ ready: true });\n }\n }, delay);\n } else {\n this.setState({ ready: true });\n }\n }\n\n onTimeout?: NodeJS.Timeout;\n onDelta(\n deltaP: Partial

| undefined,\n deltaS: Partial<{ ready: boolean }> | undefined,\n deltaD: { [x: string]: any } | undefined,\n ): void {\n if (deltaP?.onTimeout ?? deltaP?.refreshPageTimeout) {\n if (this.onTimeout) clearTimeout(this.onTimeout);\n\n const { onTimeout, message, refreshPageTimeout } = this.props;\n if (onTimeout || refreshPageTimeout) {\n this.onTimeout = setTimeout(() => {\n if (!this.mounted || this.props.message !== message) {\n return;\n }\n if (this.props.onTimeout) {\n console.log(\"onTimeout\", message, this.props.message);\n this.props.onTimeout.run();\n if (this.props.onTimeout.message) {\n this.setState({ timeoutMessage: this.props.onTimeout.message });\n }\n } else {\n pageReload(\"Loader refreshPageTimeout\");\n }\n }, onTimeout?.timeout ?? refreshPageTimeout!);\n }\n }\n }\n\n render() {\n const {\n style = {},\n className = \"\",\n variant,\n sizePx = 30,\n colorAnimation = false,\n } = this.props;\n const { show = this.show } = this.props;\n const size = sizePx + \"px\";\n\n const msg = this.state.timeoutMessage ?? this.props.message;\n const message = msg ?

{msg}
: null;\n\n // const delayStyle = { opacity: (!show) ? 0.0001 : 1 };\n const commonStyle = {\n display: !show ? \"none\" : undefined,\n cursor: \"wait\",\n };\n\n if (variant === \"top-bar\") {\n return (\n \n );\n }\n if (variant === \"cover\") {\n return (\n <>\n \n \n \n {message}\n \n \n \n );\n }\n\n const rootStyle: React.CSSProperties =\n !message ? { width: size, height: size } : {};\n\n return (\n \n \n {message}\n \n );\n }\n}\n\n/* \n The spinner should keep laptop fans quiet. \n Test pages: \n http://localhost:3004/component-list#loader-test\n\n\n Mask image (SpinnerV4): \n 10% cpu 20% gpu\n SVG as image (SpinnerV3): \n 60% cpu 20% gpu\n Canvas (SpinnerV2): \n 30% cpu 50% gpu\n*/\n\nconst Spinner = ({ size }: { size: string; colorAnimation: boolean }) => {\n // return ;\n return ;\n // return ;\n\n /** ONLY USE IN DEVELOPMENT. Causes high cpu usage on high node count page */\n // return (\n // \n // \n // \n // );\n};\n" }, { "path": "client/src/components/Loader/SpinnerV2.tsx", "content": "import React, { useCallback, useEffect, useRef } from \"react\";\nimport { useResizeObserver } from \"../ScrollFade/useResizeObserver\";\n\n/**\n * @deprecated Use SpinnerV4 instead. Deprecated due to performance issues when page has too many nodes\n */\nexport const SpinnerV2 = ({ size }: { size: string }) => {\n const canvasRef = React.useRef(null);\n const animationFrameIdRef = useRef(null);\n\n const startAnimation = useCallback(() => {\n if (animationFrameIdRef.current) {\n cancelAnimationFrame(animationFrameIdRef.current);\n animationFrameIdRef.current = null; // Clear the stored ID\n }\n\n const canvas = canvasRef.current;\n const ctx = canvas?.getContext(\"2d\");\n\n if (!canvas || !ctx) {\n console.error(\"SpinnerV2: Failed to get canvas element or 2D context.\");\n return;\n }\n\n const width = canvas.clientWidth;\n const height = canvas.clientHeight;\n\n canvas.width = width;\n canvas.height = height;\n\n const centerX = width / 2;\n const centerY = height / 2;\n\n // Spinner properties\n const radius = Math.max(1, (Math.min(width, height) / 2) * 0.8); // Ensure radius is at least 1\n const lineWidth = 2;\n const color = getComputedStyle(canvas).color; // getCssVariableValue(\"--text-2\") || \"#888\";\n const rotationSpeed = 0.08;\n const arcLength = Math.PI * 1.5; // 270 degrees\n\n let currentAngle = 0;\n\n const drawFrame = () => {\n if (canvasRef.current) {\n ctx.clearRect(0, 0, width, height);\n ctx.beginPath();\n ctx.arc(\n centerX,\n centerY,\n radius,\n currentAngle,\n currentAngle + arcLength,\n );\n ctx.lineWidth = lineWidth;\n ctx.strokeStyle = color;\n ctx.lineCap = \"round\";\n ctx.stroke();\n } else {\n if (animationFrameIdRef.current) {\n cancelAnimationFrame(animationFrameIdRef.current);\n animationFrameIdRef.current = null;\n }\n }\n };\n\n const animate = () => {\n // Only proceed if the canvas is still mounted and context exists\n if (!canvasRef.current) {\n if (animationFrameIdRef.current) {\n cancelAnimationFrame(animationFrameIdRef.current);\n animationFrameIdRef.current = null;\n }\n return;\n }\n\n currentAngle += rotationSpeed;\n drawFrame();\n\n // Store the ID of the *next* animation frame request\n animationFrameIdRef.current = requestAnimationFrame(animate);\n };\n\n animate();\n }, []);\n\n useEffect(() => {\n startAnimation();\n\n return () => {\n if (animationFrameIdRef.current) {\n cancelAnimationFrame(animationFrameIdRef.current);\n animationFrameIdRef.current = null;\n }\n };\n }, [startAnimation]);\n\n useResizeObserver({\n elem: canvasRef.current,\n onResize: startAnimation,\n });\n\n useEffect(() => startAnimation(), [startAnimation]);\n\n return (\n \n \n \n );\n};\n" }, { "path": "client/src/components/Loader/SpinnerV3.tsx", "content": "import React, { useEffect, useMemo, useRef, useState } from \"react\";\n\n/**\n * @deprecated Use SpinnerV4 instead. Deprecated due to performance issues and currentColor issues\n */\nexport const SpinnerV3 = ({ size }: { size: string }) => {\n const imgRef = useRef(null);\n const [color, setColor] = useState(\"currentColor\");\n\n useEffect(() => {\n if (imgRef.current?.parentElement) {\n const computedColor = getComputedStyle(\n imgRef.current.parentElement,\n ).color;\n setColor(computedColor);\n }\n }, []);\n\n const dataUrl = useMemo(() => {\n const sizeStringified = JSON.stringify(size);\n const svgString = `\n \n \n \n \n \n \n `;\n const dataUrl = `data:image/svg+xml;utf8,${encodeURIComponent(svgString)}`;\n return dataUrl;\n }, [size, color]);\n return (\n \n );\n};\n" }, { "path": "client/src/components/Loader/SpinnerV4.tsx", "content": "import React from \"react\";\n\nexport const SpinnerV4 = ({ size }: { size: string }) => {\n return (\n \n );\n};\nconst svgString = `\n \n \n \n `;\nconst spinnerDataUrl = `url(\"data:image/svg+xml;utf8,${encodeURIComponent(svgString)}\")`;\n" }, { "path": "client/src/components/MediaViewer/MediaViewer.tsx", "content": "import { sliceText } from \"@common/utils\";\nimport { mdiChevronLeft } from \"@mdi/js\";\nimport React, { useCallback, useEffect, useState } from \"react\";\nimport { Icon } from \"../Icon/Icon\";\nimport Popup from \"../Popup/Popup\";\nimport {\n ContentTypes,\n RenderMedia,\n type UrlInfo,\n type ValidContentType,\n} from \"./RenderMedia\";\n\ntype P = {\n url: string;\n\n /**\n * Request prev or next media\n */\n onPrevOrNext?: (increment: -1 | 1) => { url: string | undefined };\n\n style?: React.CSSProperties;\n\n /**\n * If present then check URL hostname before requesting\n */\n allowedHostnames?: string[];\n /**\n * If present then use this\n */\n content_type?: ValidContentType;\n};\n\nexport const MediaViewer = (props: P) => {\n const { onPrevOrNext, style, content_type, url, allowedHostnames } = props;\n const [isFocused, setIsFocused] = useState(false);\n const [urlInfo, setUrlInfo] = useState(\n content_type && url ?\n {\n raw: url,\n validated: url,\n forDisplay: sliceText(url, 100),\n type: content_type,\n content_type,\n }\n : undefined,\n );\n\n const setURL = useCallback(\n async (url: string) => {\n if (!url) return;\n\n let contentType: string | undefined = content_type;\n if (!content_type) {\n const mimeFromData =\n url.startsWith(\"data:\") ?\n url.split(\":\")[1]?.split(\";\")[0]\n : undefined;\n const mime = mimeFromData ?? (await fetchMimeFromURLHead(url));\n contentType = mimeFromData ?? mime?.split(\";\")[0]?.trim();\n }\n\n setUrlInfo({\n raw: url,\n validated: url,\n forDisplay: sliceText(url, 100),\n type: ContentTypes.find((ct) => contentType?.startsWith(ct)),\n content_type: contentType,\n });\n },\n [content_type],\n );\n\n useEffect(() => {\n if (!url) return;\n if (allowedHostnames) {\n try {\n const u = new URL(url);\n if (!allowedHostnames.includes(u.hostname)) {\n throw `Hostname ${u.hostname} is not allowed. Allowed hostnames: ${allowedHostnames}`;\n }\n void setURL(url);\n } catch (e) {\n console.error(\"Could check media URL\", e);\n }\n } else {\n void setURL(url);\n }\n }, [allowedHostnames, setURL, url]);\n\n const onKeyDown = useCallback(\n (e: KeyboardEvent) => {\n if (e.key === \"ArrowRight\") {\n e.preventDefault();\n onPrevOrNext?.(1);\n } else if (e.key === \"ArrowLeft\") {\n e.preventDefault();\n onPrevOrNext?.(-1);\n }\n },\n [onPrevOrNext],\n );\n\n const toggleClick =\n !onPrevOrNext ? undefined : (\n (increment: 1 | -1) => {\n const { url } = onPrevOrNext(increment);\n if (url) {\n void setURL(url);\n }\n }\n );\n return (\n <>\n \n {isFocused && (\n {\n setIsFocused(false);\n }}\n positioning=\"fullscreen\"\n autoFocusFirst={\"content\"}\n focusTrap={true}\n title={\n !urlInfo ? \"\" : (\n \n {urlInfo.forDisplay}\n \n )\n }\n onKeyDown={!onPrevOrNext ? undefined : onKeyDown}\n >\n \n {toggleClick && ToggleBtn(true, () => toggleClick(-1))}\n \n {toggleClick && ToggleBtn(false, () => toggleClick(1))}\n \n \n )}\n \n );\n};\n\nexport const fetchMimeFromURLHead = async (\n url: string,\n): Promise => {\n try {\n const resp = await fetch(\n url,\n // { method: \"HEAD\" } this approach is not suitable due to CORS issues on some servers\n {\n headers: {\n Range: \"bytes=0-0\",\n },\n },\n );\n if (resp.status >= 400) return null;\n return resp.headers.get(\"Content-Type\");\n } catch (e) {\n console.error(e);\n return null;\n }\n};\n\nconst ToggleBtn = (isLeft: boolean, onClick: VoidFunction) => {\n return (\n \n \n \n );\n};\n" }, { "path": "client/src/components/MediaViewer/RenderMedia.tsx", "content": "import { mdiFileDocumentOutline } from \"@mdi/js\";\nimport React, { useState } from \"react\";\nimport Chip from \"../Chip\";\nimport { FlexCol } from \"../Flex\";\n\nexport const ContentTypes = [\"image\", \"video\", \"audio\"] as const;\nexport type ValidContentType = (typeof ContentTypes)[number];\nexport type UrlInfo = {\n raw: string;\n validated: string;\n forDisplay: string;\n content_type?: string; // If undefined then show as URL\n type?: ValidContentType;\n};\n\nexport const RenderMedia = ({\n contentOnly = false,\n isFocused,\n setIsFocused,\n urlInfo,\n style,\n}: {\n contentOnly: boolean;\n urlInfo: UrlInfo | undefined;\n isFocused: boolean;\n style: React.CSSProperties | undefined;\n setIsFocused: (isFocused: boolean) => void;\n}) => {\n if (!urlInfo) return null;\n\n const { validated: url, type = \"\", content_type } = urlInfo;\n let mediaContent: React.ReactNode = null;\n if (url) {\n const commonProps = {\n style: {\n minHeight: 0,\n flex:\n type === \"audio\" ? \"none\"\n : type === \"image\" ? undefined\n : 1,\n maxWidth: \"100%\",\n maxHeight: \"100%\",\n objectFit: \"contain\",\n ...(isFocused && contentOnly ? {} : style),\n ...(type === \"audio\" &&\n isFocused && {\n margin: \"2em\",\n border: \"unset\",\n }),\n ...(type === \"audio\" && {\n display: \"block\",\n objectFit: undefined,\n minHeight: undefined,\n maxWidth: \"99vw\",\n minWidth: \"399px\",\n height: \"60px\",\n width: \"400px\",\n border: \"unset\",\n flex: 1,\n }),\n } satisfies React.CSSProperties,\n } as const;\n if (type === \"image\") {\n mediaContent = (\n {\n e.stopPropagation();\n e.preventDefault();\n setIsFocused(!isFocused);\n }}\n className=\"pointer\"\n loading=\"lazy\"\n src={url}\n {...commonProps}\n />\n );\n } else if (type === \"video\") {\n mediaContent = (\n \n );\n } else if (type === \"audio\") {\n mediaContent =