Repository: Kanaries/pygwalker Branch: main Commit: c6e0fb76dad4 Files: 180 Total size: 742.4 KB Directory structure: gitextract__wqcb176/ ├── .github/ │ ├── ISSUE_TEMPLATE/ │ │ ├── any-questions-topics-you-want-to-share.md │ │ ├── bug_report.md │ │ └── feature_request.md │ └── workflows/ │ ├── auto-ci.yml │ └── publish.yml ├── .gitignore ├── .gitmodules ├── .pylintrc ├── CITATION.cff ├── CONDUCT.md ├── LICENSE ├── MANIFEST.in ├── README.md ├── app/ │ ├── .gitignore │ ├── components.json │ ├── index.html │ ├── package.json │ ├── postcss.config.js │ ├── src/ │ │ ├── components/ │ │ │ ├── codeExportModal/ │ │ │ │ ├── index.tsx │ │ │ │ └── usePythonCode.ts │ │ │ ├── initModal/ │ │ │ │ └── index.tsx │ │ │ ├── options.tsx │ │ │ ├── preview/ │ │ │ │ └── index.tsx │ │ │ ├── runcellBanner/ │ │ │ │ └── index.tsx │ │ │ ├── ui/ │ │ │ │ ├── badge.tsx │ │ │ │ ├── button.tsx │ │ │ │ ├── checkbox.tsx │ │ │ │ ├── dialog.tsx │ │ │ │ ├── input.tsx │ │ │ │ ├── label.tsx │ │ │ │ ├── select.tsx │ │ │ │ ├── tabs.tsx │ │ │ │ ├── toggle-group.tsx │ │ │ │ └── toggle.tsx │ │ │ ├── uploadChartModal/ │ │ │ │ └── index.tsx │ │ │ └── uploadSpecModal/ │ │ │ └── index.tsx │ │ ├── dataSource/ │ │ │ └── index.tsx │ │ ├── index.css │ │ ├── index.tsx │ │ ├── interfaces/ │ │ │ └── index.ts │ │ ├── lib/ │ │ │ ├── dslToWorkflow.ts │ │ │ ├── utils.ts │ │ │ └── vegaToDsl.ts │ │ ├── notify/ │ │ │ └── index.tsx │ │ ├── store/ │ │ │ ├── common.ts │ │ │ ├── communication.ts │ │ │ └── context.ts │ │ ├── tools/ │ │ │ ├── exportDataframe.tsx │ │ │ ├── exportTool.tsx │ │ │ ├── openDesktop.tsx │ │ │ ├── runcellTool.tsx │ │ │ └── saveTool.tsx │ │ └── utils/ │ │ ├── communication.tsx │ │ ├── context.tsx │ │ ├── formatSpec.ts │ │ ├── save.ts │ │ ├── theme.ts │ │ ├── tracker.ts │ │ └── userConfig.ts │ ├── tailwind.config.js │ ├── tsconfig.json │ └── vite.config.ts ├── bin/ │ └── pygwalker_command.py ├── docs/ │ ├── CONTRIBUTING.md │ ├── DEVELOPMENT.md │ ├── README.de.md │ ├── README.es.md │ ├── README.fr.md │ ├── README.ja.md │ ├── README.ko.md │ ├── README.ru.md │ ├── README.tr.md │ └── README.zh.md ├── environment.yml ├── examples/ │ ├── README.md │ ├── component_demo.ipynb │ ├── dash_demo.py │ ├── gradio_demo.py │ ├── gw_config.json │ ├── html_demo.py │ ├── jupyter_demo.ipynb │ ├── marimo_demo.py │ ├── reflex_demo/ │ │ ├── .gitignore │ │ ├── README.md │ │ ├── __init__.py │ │ ├── app/ │ │ │ ├── __init__.py │ │ │ └── app.py │ │ └── rxconfig.py │ ├── streamlit_demo.py │ └── web_server_demo.py ├── pygwalker/ │ ├── __init__.py │ ├── _constants.py │ ├── _typing.py │ ├── api/ │ │ ├── __init__.py │ │ ├── adapter.py │ │ ├── anywidget.py │ │ ├── component.py │ │ ├── gradio.py │ │ ├── html.py │ │ ├── jupyter.py │ │ ├── kanaries_cloud.py │ │ ├── marimo.py │ │ ├── pygwalker.py │ │ ├── reflex.py │ │ ├── streamlit.py │ │ └── webserver.py │ ├── communications/ │ │ ├── __init__.py │ │ ├── anywidget_comm.py │ │ ├── base.py │ │ ├── gradio_comm.py │ │ ├── hacker_comm.py │ │ ├── reflex_comm.py │ │ └── streamlit_comm.py │ ├── data_parsers/ │ │ ├── __init__.py │ │ ├── base.py │ │ ├── cloud_dataset_parser.py │ │ ├── database_parser.py │ │ ├── modin_parser.py │ │ ├── pandas_parser.py │ │ ├── polars_parser.py │ │ └── spark_parser.py │ ├── errors.py │ ├── services/ │ │ ├── __init__.py │ │ ├── check_update.py │ │ ├── cloud_service.py │ │ ├── config.py │ │ ├── data_parsers.py │ │ ├── fname_encodings.py │ │ ├── format_invoke_walk_code.py │ │ ├── global_var.py │ │ ├── kaggle.py │ │ ├── kanaries_cli_login.py │ │ ├── preview_image.py │ │ ├── render.py │ │ ├── spec.py │ │ ├── streamlit_components.py │ │ ├── tip_tools.py │ │ ├── track.py │ │ └── upload_data.py │ ├── templates/ │ │ ├── .gitignore │ │ ├── index.html │ │ ├── jupyter_iframe_message.html │ │ ├── pygwalker_iframe.html │ │ └── pygwalker_main_page.html │ └── utils/ │ ├── __init__.py │ ├── check_walker_params.py │ ├── custom_sqlglot.py │ ├── display.py │ ├── dsl_transform.py │ ├── encode.py │ ├── estimate_tools.py │ ├── execute_env_check.py │ ├── free_port.py │ ├── log.py │ ├── payload_to_sql.py │ ├── randoms.py │ └── runtime_env.py ├── pygwalker_tools/ │ ├── __init__.py │ └── metrics/ │ ├── __init__.py │ ├── api.py │ └── core.py ├── pyproject.toml ├── scripts/ │ ├── __init__.py │ ├── ci_run_pytest.py │ ├── compile.sh │ ├── test-init.py │ └── test-init.sh ├── tests/ │ ├── .gitignore │ ├── __init__.py │ ├── field-spec.ipynb │ ├── main-modin.ipynb │ ├── main-polars.ipynb │ ├── main.ipynb │ ├── test_component_api.ipynb │ ├── test_data_parsers.py │ ├── test_dsl_transform.py │ ├── test_fname_encodings.py │ └── test_format_invoke_walk_code.py └── tutorials/ ├── README.md └── pygwalker_complete_tutorial.ipynb ================================================ FILE CONTENTS ================================================ ================================================ FILE: .github/ISSUE_TEMPLATE/any-questions-topics-you-want-to-share.md ================================================ --- name: Any Questions/Topics you want to share about: Describe anything you want to talk about related to pygwalker title: '' labels: '' assignees: '' --- ================================================ FILE: .github/ISSUE_TEMPLATE/bug_report.md ================================================ --- name: Bug report about: Create a report to help us improve title: "[BUG] pygwalker bug report" labels: bug assignees: '' --- **Describe the bug** A clear and concise description of what the bug is. **To Reproduce** Steps to reproduce the behavior: 1. Go to '...' 2. Click on '....' 3. Scroll down to '....' 4. See error **Expected behavior** A clear and concise description of what you expected to happen. **Screenshots** If applicable, add screenshots to help explain your problem. **Versions** - pygwalker version: - python version - browser **Additional context** Add any other context about the problem here. ================================================ FILE: .github/ISSUE_TEMPLATE/feature_request.md ================================================ --- name: Feature request about: Suggest an idea for this project title: '' labels: '' assignees: '' --- **Is your feature request related to a problem? Please describe.** A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] **Describe the solution you'd like** A clear and concise description of what you want to happen. **Describe alternatives you've considered** A clear and concise description of any alternative solutions or features you've considered. **Additional context** Add any other context or screenshots about the feature request here. ================================================ FILE: .github/workflows/auto-ci.yml ================================================ # This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node # For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs name: Auto CI on: push: branches: [ "main", "dev" ] pull_request: branches: [ "main" ] workflow_dispatch: jobs: build-js: runs-on: ubuntu-latest strategy: matrix: node-version: [22.x] # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ steps: - uses: actions/checkout@v4 with: submodules: 'recursive' - name: Use Node.js ${{ matrix.node-version }} uses: actions/setup-node@v4 with: node-version: ${{ matrix.node-version }} cache: 'yarn' cache-dependency-path: ./app/yarn.lock - name: Try Compiling working-directory: ./ run: | chmod u+x ./scripts/compile.sh ./scripts/compile.sh - name: Uploading dist uses: actions/upload-artifact@v4 with: name: pygwalker-app path: ./pygwalker/templates/dist/* build-py: needs: build-js timeout-minutes: 90 strategy: fail-fast: false matrix: python-version: ['3.12', '3.13'] os-version: [ubuntu-latest, windows-latest, macos-latest] runs-on: ${{ matrix.os-version }} steps: - uses: actions/checkout@v4 - name: Download PyGWalkerApp uses: actions/download-artifact@v4 id: build-py with: name: pygwalker-app path: ./pygwalker/templates/dist - name: Use Python ${{ matrix.python-version }} uses: actions/setup-python@v4 with: python-version: ${{ matrix.python-version }} - name: Download test data working-directory: ./ run: | chmod u+x ./scripts/test-init.py python ./scripts/test-init.py - name: Try Installing working-directory: ./ env: PIP_ONLY_BINARY: "duckdb" run: | pip install ".[export]" - name: Try Install Modin In Linux Os if: ${{ matrix.os-version == 'ubuntu-latest' && matrix.python-version == '3.11' }} run: | pip install aiohttp==3.8.6 pip install "modin==0.23.1" "modin[ray]==0.23.1" pip install pydantic==1.10.9 - name: Try Running working-directory: ./tests/ run: | pip install ipykernel nbconvert pandas polars python -m ipykernel install --name python --user jupyter kernelspec list jupyter nbconvert --execute --ExecutePreprocessor.kernel_name=python --to html *.ipynb - name: Try Pytest timeout-minutes: 20 working-directory: ./ run: | pip install duckdb_engine pip install pytest python ./scripts/ci_run_pytest.py - name: Uploading notebooks uses: actions/upload-artifact@v4 if: ${{ matrix.python-version == '3.12' && matrix.os-version == 'ubuntu-latest' }} with: name: notebook path: | ./tests/main.html ./tests/offline.html ./tests/stress-test.html ================================================ FILE: .github/workflows/publish.yml ================================================ name: Publish PyPI on: workflow_dispatch: jobs: build-js: runs-on: ubuntu-latest strategy: matrix: node-version: [22.x] # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ steps: - uses: actions/checkout@v4 with: submodules: 'recursive' - name: Use Node.js ${{ matrix.node-version }} uses: actions/setup-node@v4 with: node-version: ${{ matrix.node-version }} cache: 'yarn' cache-dependency-path: ./app/yarn.lock - name: Try Compiling working-directory: ./ run: | chmod u+x ./scripts/compile.sh ./scripts/compile.sh - name: Uploading dist if: ${{ matrix.node-version == '22.x' }} uses: actions/upload-artifact@v4 with: name: pygwalker-app path: ./pygwalker/templates/dist/* build-py: needs: [build-js] strategy: fail-fast: false matrix: python-version: ['3.12'] os-version: [ubuntu-latest] runs-on: ${{ matrix.os-version }} steps: - uses: actions/checkout@v4 - name: Download PyGWalkerApp uses: actions/download-artifact@v4 with: name: pygwalker-app path: ./pygwalker/templates/dist - name: Use Python ${{ matrix.python-version }} uses: actions/setup-python@v4 with: python-version: ${{ matrix.python-version }} - name: Try building working-directory: ./ run: | pip install build twine python -m build . - name: Uploading packages if: ${{ matrix.python-version == '3.12' && matrix.os-version == 'ubuntu-latest' }} uses: actions/upload-artifact@v4 with: name: pygwalker path: ./dist/* - name: Uploading PyPI if: ${{ matrix.python-version == '3.12' && matrix.os-version == 'ubuntu-latest' && (github.ref == 'refs/heads/main' || startsWith(github.ref, 'refs/tags')) }} uses: pypa/gh-action-pypi-publish@v1.12.4 with: # PyPI user # Password for your PyPI user or an access token password: ${{ secrets.PYPI_TOKEN }} # The target directory for distribution packages-dir: dist # Check metadata before uploading verify-metadata: true # Do not fail if a Python package distribution exists in the target package index skip-existing: true # Show verbose output. verbose: true # Show hash values of files to be uploaded print-hash: true ================================================ FILE: .gitignore ================================================ # Byte-compiled / optimized / DLL files __pycache__/ *.py[cod] *$py.class # C extensions *.so # Distribution / packaging .Python build/ develop-eggs/ dist/ downloads/ eggs/ .eggs/ lib/ lib64/ parts/ sdist/ var/ wheels/ pip-wheel-metadata/ share/python-wheels/ *.egg-info/ .installed.cfg *.egg MANIFEST # PyInstaller # Usually these files are written by a python script from a template # before PyInstaller builds the exe, so as to inject date/other infos into it. *.manifest *.spec # Installer logs pip-log.txt pip-delete-this-directory.txt # Unit test / coverage reports htmlcov/ .tox/ .nox/ .coverage .coverage.* .cache nosetests.xml coverage.xml *.cover *.py,cover .hypothesis/ .pytest_cache/ # Translations *.mo *.pot # Django stuff: *.log local_settings.py db.sqlite3 db.sqlite3-journal # Flask stuff: instance/ .webassets-cache # Scrapy stuff: .scrapy # Sphinx documentation docs/_build/ # PyBuilder target/ # Jupyter Notebook .ipynb_checkpoints # IPython profile_default/ ipython_config.py # pyenv .python-version # pipenv # According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control. # However, in case of collaboration, if having platform-specific dependencies or dependencies # having no cross-platform support, pipenv may install dependencies that don't work, or not # install all needed dependencies. #Pipfile.lock # PEP 582; used by e.g. github.com/David-OConnor/pyflow __pypackages__/ # Celery stuff celerybeat-schedule celerybeat.pid # SageMath parsed files *.sage.py # Environments .env .venv env/ venv/ ENV/ env.bak/ venv.bak/ # Spyder project settings .spyderproject .spyproject # Rope project settings .ropeproject # mkdocs documentation /site # mypy .mypy_cache/ .dmypy.json dmypy.json # Pyre type checker .pyre/ __pycache__ dist !/pygwalker/templates/dist/* .DS_Store venv .ipynb_checkpoints node_modules poetry.lock pygwalker/templates/graphic-walker.umd.js pygwalker/templates/graphic-walker.iife.js tests/*.csv __pycache__/ .states *.db .web *.py[cod] assets/external/ ================================================ FILE: .gitmodules ================================================ ================================================ FILE: .pylintrc ================================================ # This Pylint rcfile contains a best-effort configuration to uphold the # best-practices and style described in the Google Python style guide: # https://google.github.io/styleguide/pyguide.html # # Its canonical open-source location is: # https://google.github.io/styleguide/pylintrc [MASTER] # Files or directories to be skipped. They should be base names, not paths. ignore=third_party # Files or directories matching the regex patterns are skipped. The regex # matches against base names, not paths. ignore-patterns= # Pickle collected data for later comparisons. persistent=no # List of plugins (as comma separated values of python modules names) to load, # usually to register additional checkers. load-plugins= # Use multiple processes to speed up Pylint. jobs=4 # Allow loading of arbitrary C extensions. Extensions are imported into the # active Python interpreter and may run arbitrary code. unsafe-load-any-extension=no [MESSAGES CONTROL] # Only show warnings with the listed confidence levels. Leave empty to show # all. Valid levels: HIGH, INFERENCE, INFERENCE_FAILURE, UNDEFINED confidence= # Enable the message, report, category or checker with the given id(s). You can # either give multiple identifier separated by comma (,) or put this option # multiple time (only on the command line, not in the configuration file where # it should appear only once). See also the "--disable" option for examples. #enable= # Disable the message, report, category or checker with the given id(s). You # can either give multiple identifiers separated by comma (,) or put this # option multiple times (only on the command line, not in the configuration # file where it should appear only once).You can also use "--disable=all" to # disable everything first and then reenable specific checks. For example, if # you want to run only the similarities checker, you can use "--disable=all # --enable=similarities". If you want to run only the classes checker, but have # no Warning level messages displayed, use"--disable=all --enable=classes # --disable=W" disable=abstract-method, apply-builtin, arguments-differ, attribute-defined-outside-init, backtick, bad-option-value, basestring-builtin, buffer-builtin, c-extension-no-member, consider-using-enumerate, cmp-builtin, cmp-method, coerce-builtin, coerce-method, delslice-method, div-method, duplicate-code, eq-without-hash, execfile-builtin, file-builtin, filter-builtin-not-iterating, fixme, getslice-method, global-statement, hex-method, idiv-method, implicit-str-concat, import-error, import-self, import-star-module-level, inconsistent-return-statements, input-builtin, intern-builtin, invalid-str-codec, locally-disabled, long-builtin, long-suffix, map-builtin-not-iterating, misplaced-comparison-constant, missing-function-docstring, missing-module-docstring, metaclass-assignment, next-method-called, next-method-defined, no-absolute-import, no-else-break, no-else-continue, no-else-raise, no-else-return, no-init, # added no-member, no-name-in-module, no-self-use, nonzero-method, oct-method, old-division, old-ne-operator, old-octal-literal, old-raise-syntax, parameter-unpacking, print-statement, raising-string, range-builtin-not-iterating, raw_input-builtin, rdiv-method, reduce-builtin, relative-import, reload-builtin, round-builtin, setslice-method, signature-differs, standarderror-builtin, suppressed-message, sys-max-int, too-few-public-methods, too-many-ancestors, too-many-arguments, too-many-boolean-expressions, too-many-branches, too-many-instance-attributes, too-many-locals, too-many-nested-blocks, too-many-public-methods, too-many-return-statements, too-many-statements, trailing-newlines, unichr-builtin, unicode-builtin, unnecessary-pass, unpacking-in-except, useless-else-on-loop, useless-object-inheritance, useless-suppression, using-cmp-argument, wrong-import-order, xrange-builtin, zip-builtin-not-iterating, [REPORTS] # Set the output format. Available formats are text, parseable, colorized, msvs # (visual studio) and html. You can also give a reporter class, eg # mypackage.mymodule.MyReporterClass. output-format=text # Tells whether to display a full report or only the messages reports=no # Python expression which should return a note less than 10 (10 is the highest # note). You have access to the variables errors warning, statement which # respectively contain the number of errors / warnings messages and the total # number of statements analyzed. This is used by the global evaluation report # (RP0004). evaluation=10.0 - ((float(5 * error + warning + refactor + convention) / statement) * 10) # Template used to display messages. This is a python new-style format string # used to format the message information. See doc for all details #msg-template= [BASIC] # Good variable names which should always be accepted, separated by a comma good-names=main,_ # Bad variable names which should always be refused, separated by a comma bad-names= # Colon-delimited sets of names that determine each other's naming style when # the name regexes allow several styles. name-group= # Include a hint for the correct naming format with invalid-name include-naming-hint=no # List of decorators that produce properties, such as abc.abstractproperty. Add # to this list to register other decorators that produce valid properties. property-classes=abc.abstractproperty,cached_property.cached_property,cached_property.threaded_cached_property,cached_property.cached_property_with_ttl,cached_property.threaded_cached_property_with_ttl # Regular expression matching correct function names function-rgx=^(?:(?PsetUp|tearDown|setUpModule|tearDownModule)|(?P_?[A-Z][a-zA-Z0-9]*)|(?P_?[a-z][a-z0-9_]*))$ # Regular expression matching correct variable names variable-rgx=^[a-z][a-z0-9_]*$ # Regular expression matching correct constant names const-rgx=^(_?[A-Z][A-Z0-9_]*|__[a-z0-9_]+__|_?[a-z][a-z0-9_]*)$ # Regular expression matching correct attribute names attr-rgx=^_{0,2}[a-z][a-z0-9_]*$ # Regular expression matching correct argument names argument-rgx=^[a-z][a-z0-9_]*$ # Regular expression matching correct class attribute names class-attribute-rgx=^(_?[A-Z][A-Z0-9_]*|__[a-z0-9_]+__|_?[a-z][a-z0-9_]*)$ # Regular expression matching correct inline iteration names inlinevar-rgx=^[a-z][a-z0-9_]*$ # Regular expression matching correct class names class-rgx=^_?[A-Z][a-zA-Z0-9]*$ # Regular expression matching correct module names module-rgx=^(_?[a-z][a-z0-9_]*|__init__)$ # Regular expression matching correct method names method-rgx=(?x)^(?:(?P_[a-z0-9_]+__|runTest|setUp|tearDown|setUpTestCase|tearDownTestCase|setupSelf|tearDownClass|setUpClass|(test|assert)_*[A-Z0-9][a-zA-Z0-9_]*|next)|(?P_{0,2}[A-Z][a-zA-Z0-9_]*)|(?P_{0,2}[a-z][a-z0-9_]*))$ # Regular expression which should only match function or class names that do # not require a docstring. no-docstring-rgx=(__.*__|main|test.*|.*test|.*Test)$ # Minimum line length for functions/classes that require docstrings, shorter # ones are exempt. docstring-min-length=10 [TYPECHECK] # List of decorators that produce context managers, such as # contextlib.contextmanager. Add to this list to register other decorators that # produce valid context managers. contextmanager-decorators=contextlib.contextmanager,contextlib2.contextmanager # Tells whether missing members accessed in mixin class should be ignored. A # mixin class is detected if its name ends with "mixin" (case insensitive). ignore-mixin-members=yes # List of module names for which member attributes should not be checked # (useful for modules/projects where namespaces are manipulated during runtime # and thus existing member attributes cannot be deduced by static analysis. It # supports qualified module names, as well as Unix pattern matching. ignored-modules= # List of class names for which member attributes should not be checked (useful # for classes with dynamically set attributes). This supports the use of # qualified names. ignored-classes=optparse.Values,thread._local,_thread._local # List of members which are set dynamically and missed by pylint inference # system, and so shouldn't trigger E1101 when accessed. Python regular # expressions are accepted. generated-members= [FORMAT] # Maximum number of characters on a single line. max-line-length=180 # TODO(https://github.com/PyCQA/pylint/issues/3352): Direct pylint to exempt # lines made too long by directives to pytype. # Regexp for a line that is allowed to be longer than the limit. ignore-long-lines=(?x)( ^\s*(\#\ )??$| ^\s*(from\s+\S+\s+)?import\s+.+$) # Allow the body of an if to be on the same line as the test if there is no # else. single-line-if-stmt=yes # Maximum number of lines in a module max-module-lines=99999 # String used as indentation unit. The internal Google style guide mandates 2 # spaces. Google's externaly-published style guide says 4, consistent with # PEP 8. Here, we use 2 spaces, for conformity with many open-sourced Google # projects (like TensorFlow). indent-string=' ' # Number of spaces of indent required inside a hanging or continued line. indent-after-paren=4 # Expected format of line ending, e.g. empty (any line ending), LF or CRLF. expected-line-ending-format= [MISCELLANEOUS] # List of note tags to take in consideration, separated by a comma. notes=TODO [STRING] # This flag controls whether inconsistent-quotes generates a warning when the # character used as a quote delimiter is used inconsistently within a module. check-quote-consistency=no [VARIABLES] # Tells whether we should check for unused import in __init__ files. init-import=no # A regular expression matching the name of dummy variables (i.e. expectedly # not used). dummy-variables-rgx=^\*{0,2}(_$|unused_|dummy_) # List of additional names supposed to be defined in builtins. Remember that # you should avoid to define new builtins when possible. additional-builtins= # List of strings which can identify a callback function by name. A callback # name must start or end with one of those strings. callbacks=cb_,_cb # List of qualified module names which can have objects that can redefine # builtins. redefining-builtins-modules=six,six.moves,past.builtins,future.builtins,functools [LOGGING] # Logging modules to check that the string format arguments are in logging # function parameter format logging-modules=logging,absl.logging,tensorflow.io.logging [SIMILARITIES] # Minimum lines number of a similarity. min-similarity-lines=4 # Ignore comments when computing similarities. ignore-comments=yes # Ignore docstrings when computing similarities. ignore-docstrings=yes # Ignore imports when computing similarities. ignore-imports=no [SPELLING] # Spelling dictionary name. Available dictionaries: none. To make it working # install python-enchant package. spelling-dict= # List of comma separated words that should not be checked. spelling-ignore-words= # A path to a file that contains private dictionary; one word per line. spelling-private-dict-file= # Tells whether to store unknown words to indicated private dictionary in # --spelling-private-dict-file option instead of raising a message. spelling-store-unknown-words=no [IMPORTS] # Deprecated modules which should not be used, separated by a comma deprecated-modules=regsub, TERMIOS, Bastion, rexec, sets # Create a graph of every (i.e. internal and external) dependencies in the # given file (report RP0402 must not be disabled) import-graph= # Create a graph of external dependencies in the given file (report RP0402 must # not be disabled) ext-import-graph= # Create a graph of internal dependencies in the given file (report RP0402 must # not be disabled) int-import-graph= # Force import order to recognize a module as part of the standard # compatibility libraries. known-standard-library= # Force import order to recognize a module as part of a third party library. known-third-party=enchant, absl # Analyse import fallback blocks. This can be used to support both Python 2 and # 3 compatible code, which means that the block might have code that exists # only in one or another interpreter, leading to false positives when analysed. analyse-fallback-blocks=no [CLASSES] # List of method names used to declare (i.e. assign) instance attributes. defining-attr-methods=__init__, __new__, setUp # List of member names, which should be excluded from the protected access # warning. exclude-protected=_asdict, _fields, _replace, _source, _make # List of valid names for the first argument in a class method. valid-classmethod-first-arg=cls, class_ # List of valid names for the first argument in a metaclass class method. valid-metaclass-classmethod-first-arg=mcs [EXCEPTIONS] # Exceptions that will emit a warning when being caught. Defaults to # "Exception" overgeneral-exceptions=builtins.StandardError, builtins.Exception, builtins.BaseException ================================================ FILE: CITATION.cff ================================================ # This CITATION.cff file was generated with cffinit. # Visit https://bit.ly/cffinit to generate yours today! cff-version: 1.2.0 title: PyGWalker message: >- If you use this software, please cite it using the metadata from this file. type: software authors: - website: 'https://kanaries.net/' name: Kanaries Open Source Community repository-code: 'https://github.com/Kanaries/pygwalker' url: 'https://kanaries.net/pygwalker' abstract: >- PyGWalker is a Python Library for Exploratory Data Analysis with Visualization that can simplify your Jupyter Notebook data analysis and data visualization workflow, by turning your pandas dataframe into an interactive user interface for visual exploration. keywords: - Data Analysis - Exploratory Data Analysis - Data Visualization tools - Python Library - interactive license: Apache-2.0 ================================================ FILE: CONDUCT.md ================================================ # Code of Conduct ## Our Pledge We as members, contributors, and leaders pledge to make participation in our community a harassment-free experience for everyone, regardless of age, body size, visible or invisible disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, caste, color, religion, or sexual identity and orientation. We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community. ## Our Standards Examples of behavior that contributes to a positive environment for our community include: - Demonstrating empathy and kindness toward other people - Being respectful of differing opinions, viewpoints, and experiences - Giving and gracefully accepting constructive feedback - Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience - Focusing on what is best not just for us as individuals, but for the overall community Examples of unacceptable behavior include: - The use of sexualized language or imagery, and sexual attention or advances of any kind - Trolling, insulting or derogatory comments, and personal or political attacks - Public or private harassment - Publishing others’ private information, such as a physical or email address, without their explicit permission - Other conduct which could reasonably be considered inappropriate in a professional setting ## Enforcement Responsibilities Community leaders are responsible for clarifying and enforcing our standards of acceptable behavior and will take appropriate and fair corrective action in response to any behavior that they deem inappropriate, threatening, offensive, or harmful. Community leaders have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, and will communicate reasons for moderation decisions when appropriate. ## Scope This Code of Conduct applies within all community spaces, and also applies when an individual is officially representing the community in public spaces. Examples of representing our community include using an official e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. ## Enforcement Instances of abusive, harassing, or otherwise unacceptable behavior may be reported to the community leaders responsible for enforcement at [support@kanaries.net](mailto:support@kanaries.net). All complaints will be reviewed and investigated promptly and fairly. All community leaders are obligated to respect the privacy and security of the reporter of any incident. ## Enforcement Guidelines Community leaders will follow these Community Impact Guidelines in determining the consequences for any action they deem in violation of this Code of Conduct: #### 1. Correction Community Impact: Use of inappropriate language or other behavior deemed unprofessional or unwelcome in the community. Consequence: A private, written warning from community leaders, providing clarity around the nature of the violation and an explanation of why the behavior was inappropriate. A public apology may be requested. #### 2. Warning Community Impact: A violation through a single incident or series of actions. Consequence: A warning with consequences for continued behavior. No interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, for a specified period of time. This includes avoiding interactions in community spaces as well as external channels like social media. Violating these terms may lead to a temporary or permanent ban. #### 3. Temporary Ban Community Impact: A serious violation of community standards, including sustained inappropriate behavior. Consequence: A temporary ban from any sort of interaction or public communication with the community for a specified period of time. No public or private interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, is allowed during this period. Violating these terms may lead to a permanent ban. #### 4. Permanent Ban Community Impact: Demonstrating a pattern of violation of community standards, including sustained inappropriate behavior, harassment of an individual, or aggression toward or disparagement of classes of individuals. Consequence: A permanent ban from any sort of public interaction within the community. ## Attribution This Code of Conduct is adapted from the Contributor Covenant, version 2.1, available at https://www.contributor-covenant.org/version/2/1/code_of_conduct.html. ================================================ FILE: LICENSE ================================================ Apache License Version 2.0, January 2004 http://www.apache.org/licenses/ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 1. Definitions. "License" shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document. "Licensor" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License. "Legal Entity" shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity. "You" (or "Your") shall mean an individual or Legal Entity exercising permissions granted by this License. "Source" form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files. "Object" form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types. "Work" shall mean the work of authorship, whether in Source or Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below). "Derivative Works" shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof. "Contribution" shall mean any work of authorship, including the original version of the Work and any modifications or additions to that Work or Derivative Works thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner. For the purposes of this definition, "submitted" means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing by the copyright owner as "Not a Contribution." "Contributor" shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorporated within the Work. 2. Grant of Copyright License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form. 3. Grant of Patent License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed. 4. Redistribution. You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions: (a) You must give any other recipients of the Work or Derivative Works a copy of this License; and (b) You must cause any modified files to carry prominent notices stating that You changed the files; and (c) You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and (d) If the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License. You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License. 5. Submission of Contributions. Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with Licensor regarding such Contributions. 6. Trademarks. This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file. 7. Disclaimer of Warranty. Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License. 8. Limitation of Liability. In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages. 9. Accepting Warranty or Additional Liability. While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability. END OF TERMS AND CONDITIONS APPENDIX: How to apply the Apache License to your work. To apply the Apache License to your work, attach the following boilerplate notice, with the fields enclosed by brackets "[]" replaced with your own identifying information. (Don't include the brackets!) The text should be enclosed in the appropriate comment syntax for the file format. We also recommend that a file or class name and description of purpose be included on the same "printed page" as the copyright notice for easier identification within third-party archives. Copyright [2023] [Kanaries Data, Inc.] Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. ================================================ FILE: MANIFEST.in ================================================ include LICENSE include README.md graft pygwalker/templates/** ================================================ FILE: README.md ================================================ [English](README.md) | [Español](./docs/README.es.md) | [Français](./docs/README.fr.md) | [Deutsch](./docs/README.de.md) | [中文](./docs/README.zh.md) | [Türkçe](./docs/README.tr.md) | [日本語](./docs/README.ja.md) | [한국어](./docs/README.ko.md) | [Русский](./docs/README.ru.md)

PyGWalker: A Python Library for Exploratory Data Analysis with Visualization

PyPI version binder PyPI downloads conda-forge

discord invitation link Twitter Follow Join Kanaries on Slack

[**PyGWalker**](https://github.com/Kanaries/pygwalker) can simplify your Jupyter Notebook data analysis and data visualization workflow, by turning your pandas dataframe into an interactive user interface for visual exploration. **PyGWalker** (pronounced like "Pig Walker", just for fun) is named as an abbreviation of "**Py**thon binding of **G**raphic **Walker**". It integrates Jupyter Notebook with [Graphic Walker](https://github.com/Kanaries/graphic-walker), an open-source alternative to Tableau. It allows data scientists to visualize / clean / annotates the data with simple drag-and-drop operations and even natural language queries. https://github.com/Kanaries/pygwalker/assets/22167673/2b940e11-cf8b-4cde-b7f6-190fb10ee44b > [!TIP] > If you want more AI features, we also build [runcell](https://runcell.dev), an AI Code Agent in Jupyter that understands your code/data/cells and generate code, execute cells and take actions for you. It can be used in jupyter lab with `pip install runcell` https://github.com/user-attachments/assets/9ec64252-864d-4bd1-8755-83f9b0396d38 Visit [Google Colab](https://colab.research.google.com/drive/171QUQeq-uTLgSj1u-P9DQig7Md1kpXQ2?usp=sharing), [Kaggle Code](https://www.kaggle.com/code/lxy21495892/airbnb-eda-pygwalker-demo) or [Graphic Walker Online Demo](https://graphic-walker.kanaries.net/) to test it out! > If you prefer using R, check [GWalkR](https://github.com/Kanaries/GWalkR), the R wrapper of Graphic Walker. > If you prefer a Desktop App that can be used offline and without any coding, check out [PyGWalker Desktop](https://kanaries.net/download?utm_source=pygwalker_github&utm_content=tip). # Features PyGWalker is a Python library that simplifies data analysis and visualization workflows by turning pandas DataFrames into interactive visual interfaces. It offers a variety of features that make it a powerful tool for data exploration: - ##### Interactive Data Exploration: - Drag-and-drop interface for easy visualization creation.   - Real-time updates as you make changes to the visualization. - Ability to zoom, pan, and filter the data.   - ##### Data Cleaning and Transformation: - Visual data cleaning tools to identify and remove outliers or inconsistencies.   - Ability to create new variables and features based on existing data.   - ##### Advanced Visualization Capabilities: - Support for various chart types (bar charts, line charts, scatter plots, etc.). - Customization options for colors, labels, and other visual elements.   - Interactive features like tooltips and drill-down capabilities.   - ##### Integration with Jupyter Notebooks: - Seamless integration with Jupyter Notebooks for a smooth workflow.   - ##### Open-Source and Free: - Available for free and allows for customization and extension. # Getting Started > Check our video tutorial about using pygwalker, pygwalker + streamlit and pygwalker + snowflake, [How to explore data with PyGWalker in Python ](https://youtu.be/rprn79wfB9E?si=lAsJn1cAQnb-EklD) | [Run in Kaggle](https://www.kaggle.com/code/lxy21495892/airbnb-eda-pygwalker-demo) | [Run in Colab](https://colab.research.google.com/drive/171QUQeq-uTLgSj1u-P9DQig7Md1kpXQ2?usp=sharing) | |--------------------------------------------------------------|--------------------------------------------------------| | [![Kaggle Code](https://docs-us.oss-us-west-1.aliyuncs.com/img/pygwalker/kaggle.png)](https://www.kaggle.com/code/lxy21495892/airbnb-eda-pygwalker-demo) | [![Google Colab](https://docs-us.oss-us-west-1.aliyuncs.com/img/pygwalker/colab.png)](https://colab.research.google.com/drive/171QUQeq-uTLgSj1u-P9DQig7Md1kpXQ2?usp=sharing) | ## Setup pygwalker Before using pygwalker, make sure to install the packages through the command line using pip or conda. ### pip ```bash pip install pygwalker ``` > **Note** > > For an early trial, you can install with `pip install pygwalker --upgrade` to keep your version up to date with the latest release or even `pip install pygwalker --upgrade --pre` to obtain latest features and bug-fixes. ### Conda-forge ```bash conda install -c conda-forge pygwalker ``` or ```bash mamba install -c conda-forge pygwalker ``` See [conda-forge feedstock](https://github.com/conda-forge/pygwalker-feedstock) for more help. ## Use pygwalker in Jupyter Notebook ### Quick Start Import pygwalker and pandas to your Jupyter Notebook to get started. ```python import pandas as pd import pygwalker as pyg ``` You can use pygwalker without breaking your existing workflow. For example, you can call up PyGWalker with the dataframe loaded in this way: ```python df = pd.read_csv('./bike_sharing_dc.csv') walker = pyg.walk(df) ``` ![](https://docs-us.oss-us-west-1.aliyuncs.com/img/pygwalker/travel-ani-0-light.gif) That's it. Now you have an interactive UI to analyze and visualize data with simple drag-and-drop operations. ![](https://docs-us.oss-us-west-1.aliyuncs.com/img/pygwalker/travel-ani-1-light.gif) Cool things you can do with PyGwalker: + You can change the mark type into others to make different charts, for example, a line chart: ![graphic walker line chart](https://user-images.githubusercontent.com/8137814/221894699-b9623304-4eb1-4051-b29d-ca4a913fb7c7.png) + To compare different measures, you can create a concat view by adding more than one measure into rows/columns. ![graphic walker area chart](https://user-images.githubusercontent.com/8137814/224550839-7b8a2193-d3e9-4c11-a19e-ad8e5ec19539.png) + To make a facet view of several subviews divided by the value in dimension, put dimensions into rows or columns to make a facets view. ![graphic walker scatter chart](https://user-images.githubusercontent.com/8137814/221894480-b5ec5df2-d0bb-45bc-aa3d-6479920b6fe2.png) + PyGWalker contains a powerful data table, which provides a quick view of data and its distribution, profiling. You can also add filters or change the data types in the table. pygwalker-data-preview + You can save the data exploration result to a local file ### Better Practices There are some important parameters you should know when using pygwalker: + `spec`: for save/load chart config (json string or file path) + `kernel_computation`: for using duckdb as computing engine which allows you to handle larger dataset faster in your local machine. + `use_kernel_calc`: Deprecated, use `kernel_computation` instead. ```python df = pd.read_csv('./bike_sharing_dc.csv') walker = pyg.walk( df, spec="./chart_meta_0.json", # this json file will save your chart state, you need to click save button in ui mannual when you finish a chart, 'autosave' will be supported in the future. kernel_computation=True, # set `kernel_computation=True`, pygwalker will use duckdb as computing engine, it support you explore bigger dataset(<=100GB). ) ``` ### Example in local notebook * Notebook Code: [Click Here](https://github.com/Kanaries/pygwalker-offline-example) * Preview Notebook Html: [Click Here](https://pygwalker-public-bucket.s3.amazonaws.com/demo.html) ### Example in cloud notebook * [Use PyGWalker in Kaggle](https://www.kaggle.com/code/lxy21495892/airbnb-eda-pygwalker-demo) * [Use PyGWalker in Google Colab](https://colab.research.google.com/drive/171QUQeq-uTLgSj1u-P9DQig7Md1kpXQ2?usp=sharing) ### Programmatic Export of Charts After saving a chart from the UI, you can retrieve the image directly from Python. ```python walker = pyg.walk(df, spec="./chart_meta_0.json") # edit the chart in the UI and click the save button walker.save_chart_to_file("Chart 1", "chart1.svg", save_type="svg") png_bytes = walker.export_chart_png("Chart 1") svg_bytes = walker.export_chart_svg("Chart 1") ``` ## Use pygwalker in Streamlit Streamlit allows you to host a web version of pygwalker without figuring out details of how web application works. Here are some of the app examples build with pygwalker and streamlit: + [PyGWalker + streamlit for Bike sharing dataset](https://pygwalkerdemo-cxz7f7pt5oc.streamlit.app/) + [Earthquake Dashboard](https://earthquake-dashboard-pygwalker.streamlit.app/) [![](https://user-images.githubusercontent.com/22167673/271170853-5643c3b1-6216-4ade-87f4-41c6e6893eab.png)](https://earthquake-dashboard-pygwalker.streamlit.app/) ```python from pygwalker.api.streamlit import StreamlitRenderer import pandas as pd import streamlit as st # Adjust the width of the Streamlit page st.set_page_config( page_title="Use Pygwalker In Streamlit", layout="wide" ) # Add Title st.title("Use Pygwalker In Streamlit") # You should cache your pygwalker renderer, if you don't want your memory to explode @st.cache_resource def get_pyg_renderer() -> "StreamlitRenderer": df = pd.read_csv("./bike_sharing_dc.csv") # If you want to use feature of saving chart config, set `spec_io_mode="rw"` return StreamlitRenderer(df, spec="./gw_config.json", spec_io_mode="rw") renderer = get_pyg_renderer() renderer.explorer() ``` ## [API Reference](https://pygwalker-docs.vercel.app/api-reference/jupyter) ### [pygwalker.walk](https://pygwalker-docs.vercel.app/api-reference/jupyter#walk) | Parameter | Type | Default | Description | |------------------------|-----------------------------------------------------------|----------------------|--------------------------------------------------------------------------------------------------------------------------------------------------| | dataset | Union[DataFrame, Connector] | - | The dataframe or connector to be used. | | gid | Union[int, str] | None | ID for the GraphicWalker container div, formatted as 'gwalker-{gid}'. | | env | Literal['Jupyter', 'JupyterWidget'] | 'JupyterWidget' | Environment using pygwalker. | | field_specs | Optional[Dict[str, FieldSpec]] | None | Specifications of fields. Will be automatically inferred from `dataset` if not specified. | | hide_data_source_config | bool | True | If True, hides DataSource import and export button. | | theme_key | Literal['vega', 'g2'] | 'g2' | Theme type for the GraphicWalker. | | appearance | Literal['media', 'light', 'dark'] | 'media' | Theme setting. 'media' will auto-detect the OS theme. | | spec | str | "" | Chart configuration data. Can be a configuration ID, JSON, or remote file URL. | | use_preview | bool | True | If True, uses the preview function. | | kernel_computation | bool | False | If True, uses kernel computation for data. | | **kwargs | Any | - | Additional keyword arguments. | ## Development Refer it: [local-development](https://docs.kanaries.net/pygwalker/installation#local-development) ## Tested Environments - [x] Jupyter Notebook - [x] Google Colab - [x] Kaggle Code - [x] Jupyter Lab - [x] Jupyter Lite - [x] Databricks Notebook (Since version `0.1.4a0`) - [x] Jupyter Extension for Visual Studio Code (Since version `0.1.4a0`) - [x] Most web applications compatiable with IPython kernels. (Since version `0.1.4a0`) - [x] **Streamlit (Since version `0.1.4.9`)**, enabled with `pyg.walk(df, env='Streamlit')` - [x] DataCamp Workspace (Since version `0.1.4a0`) - [x] Panel. See [panel-graphic-walker](https://github.com/panel-extensions/panel-graphic-walker). - [x] marimo (Since version `0.4.9.11`) - [ ] Hex Projects - [ ] ...feel free to raise an issue for more environments. ## Configuration And Privacy Policy(pygwalker >= 0.3.10) You can use `pygwalker config` to set your privacy configuration. ```bash $ pygwalker config --help usage: pygwalker config [-h] [--set [key=value ...]] [--reset [key ...]] [--reset-all] [--list] Modify configuration file. (default: ~/Library/Application Support/pygwalker/config.json) Available configurations: - privacy ['offline', 'update-only', 'events'] (default: events). "offline": fully offline, no data is send or api is requested "update-only": only check whether this is a new version of pygwalker to update "events": share which events about which feature is used in pygwalker, it only contains events data about which feature you arrive for product optimization. No DATA YOU ANALYSIS IS SEND. Events data will bind with a unique id, which is generated by pygwalker when it is installed based on timestamp. We will not collect any other information about you. - kanaries_token ['your kanaries token'] (default: empty string). your kanaries token, you can get it from https://kanaries.net. refer: https://space.kanaries.net/t/how-to-get-api-key-of-kanaries. by kanaries token, you can use kanaries service in pygwalker, such as share chart, share config. options: -h, --help show this help message and exit --set [key=value ...] Set configuration. e.g. "pygwalker config --set privacy=update-only" --reset [key ...] Reset user configuration and use default values instead. e.g. "pygwalker config --reset privacy" --reset-all Reset all user configuration and use default values instead. e.g. "pygwalker config --reset-all" --list List current used configuration. ``` More details, refer it: [How to set your privacy configuration?](https://github.com/Kanaries/pygwalker/wiki/How-to-set-your-privacy-configuration%3F) # License [Apache License 2.0](https://github.com/Kanaries/pygwalker/blob/main/LICENSE) # Contribution Guideline You are encouraged to contribute to PyGWalker in any way that suits your interests. This may include: - Answering questions and providing support - Sharing ideas for new features - Reporting bugs and glitches - Contributing code to the project - Offering suggestions for website improvements and better documentation # Resources > PyGWalker Cloud is released! You can now save your charts to cloud, publish the interactive cell as a web app and use advanced GPT-powered features. Check out the [PyGWalker Cloud](https://kanaries.net/pygwalker?from=gh_md) for more details. + Check out more resources about PyGWalker on [Kanaries PyGWalker](https://kanaries.net/pygwalker) + PyGWalker Paper [PyGWalker: On-the-fly Assistant for Exploratory Visual Data Analysis ](https://arxiv.org/abs/2406.11637) + We are also working on [RATH](https://kanaries.net): an Open Source, Automate exploratory data analysis software that redefines the workflow of data wrangling, exploration and visualization with AI-powered automation. Check out the [Kanaries website](https://kanaries.net) and [RATH GitHub](https://github.com/Kanaries/Rath) for more! + [Youtube: How to explore data with PyGWalker in Python ](https://youtu.be/rprn79wfB9E?si=lAsJn1cAQnb-EklD) + [Use pygwalker to build visual analysis app in streamlit](https://docs.kanaries.net/pygwalker/use-pygwalker-with-streamlit) + Use [panel-graphic-walker](https://github.com/panel-extensions/panel-graphic-walker) to build data visualization apps with Panel. + If you encounter any issues and need support, please join our [Discord](https://discord.gg/Z4ngFWXz2U) channel or raise an issue on github. + Share pygwalker on these social media platforms if you like it! [![Reddit](https://img.shields.io/badge/share%20on-reddit-red?style=flat-square&logo=reddit)](https://reddit.com/submit?url=https://github.com/Kanaries/pygwalker&title=Say%20Hello%20to%20pygwalker%3A%20Combining%20Jupyter%20Notebook%20with%20a%20Tableau-like%20UI) [![HackerNews](https://img.shields.io/badge/share%20on-hacker%20news-orange?style=flat-square&logo=ycombinator)](https://news.ycombinator.com/submitlink?u=https://github.com/Kanaries/pygwalker) [![Twitter](https://img.shields.io/badge/share%20on-twitter-03A9F4?style=flat-square&logo=twitter)](https://twitter.com/share?url=https://github.com/Kanaries/pygwalker&text=Say%20Hello%20to%20pygwalker%3A%20Combining%20Jupyter%20Notebook%20with%20a%20Tableau-alternative%20UI) [![Facebook](https://img.shields.io/badge/share%20on-facebook-1976D2?style=flat-square&logo=facebook)](https://www.facebook.com/sharer/sharer.php?u=https://github.com/Kanaries/pygwalker) [![LinkedIn](https://img.shields.io/badge/share%20on-linkedin-3949AB?style=flat-square&logo=linkedin)](https://www.linkedin.com/shareArticle?url=https://github.com/Kanaries/pygwalker&&title=Say%20Hello%20to%20pygwalker%3A%20Combining%20Jupyter%20Notebook%20with%20a%20Tableau-alternative%20UI) ================================================ FILE: app/.gitignore ================================================ node_modules/ !lib ================================================ FILE: app/components.json ================================================ { "$schema": "https://ui.shadcn.com/schema.json", "style": "new-york", "rsc": false, "tsx": true, "tailwind": { "config": "tailwind.config.js", "css": "src/index.css", "baseColor": "zinc", "cssVariables": true }, "aliases": { "components": "@/components", "utils": "@/lib/utils" } } ================================================ FILE: app/index.html ================================================ PyGWalker App Preview
================================================ FILE: app/package.json ================================================ { "name": "pygwalker-app", "version": "0.0.1", "main": "index.ts", "license": "Apache License 2.0", "private": true, "scripts": { "build": "vite build && vite build --mode=dsl_to_workflow && vite build --mode=vega_to_dsl", "build:app": "vite build", "dev:preinstall": "(cd ../graphic-walker/packages/graphic-walker; yarn --frozen-lockfile && yarn build)", "dev:server": "vite --host", "dev": "vite", "test:front_end": "vite --host", "test": "npm run test:front_end", "serve": "vite preview" }, "dependencies": { "@anywidget/react": "^0.0.8", "@headlessui/react": "^1.7.14", "@heroicons/react": "^2.0.8", "@kanaries/graphic-walker": "0.5.0-alpha.2", "@kanaries/gw-dsl-parser": "0.1.49", "@radix-ui/react-checkbox": "^1.3.3", "@radix-ui/react-dialog": "^1.1.15", "@radix-ui/react-icons": "^1.3.2", "@radix-ui/react-label": "^2.1.8", "@radix-ui/react-select": "^2.2.6", "@radix-ui/react-slot": "^1.2.4", "@radix-ui/react-tabs": "^1.1.13", "@radix-ui/react-toggle": "^1.1.10", "@radix-ui/react-toggle-group": "^1.1.11", "@segment/analytics-next": "^1.69.0", "autoprefixer": "^10.3.5", "buffer": "^6.0.3", "class-variance-authority": "^0.7.0", "clsx": "^2.0.0", "html-to-image": "^1.11.11", "lucide-react": "^0.341.0", "mobx": "^6.9.0", "mobx-react-lite": "^3.4.3", "postcss": "^8.3.7", "react": "19.x", "react-dom": "19.x", "react-syntax-highlighter": "^15.5.0", "streamlit-component-lib": "^2.0.0", "styled-components": "^5.3.6", "tailwind-merge": "^1.14.0", "tailwindcss": "^3.2.4", "tailwindcss-animate": "^1.0.7", "uuid": "^8.3.2" }, "devDependencies": { "@rollup/plugin-commonjs": "^24.0.x", "@rollup/plugin-replace": "^5.0.x", "@rollup/plugin-terser": "^0.4.x", "@rollup/plugin-typescript": "^11.0.x", "@types/node": "^20.7.2", "@types/react": "^19.x", "@types/react-dom": "^19.x", "@types/react-syntax-highlighter": "^15.5.7", "@types/styled-components": "^5.1.26", "@vitejs/plugin-react": "^3.1.x", "typescript": "^5.4.2", "vite": "4.1.5", "vite-plugin-wasm": "^3.2.2" }, "resolutions": { "react": "^19.x", "react-dom": "^19.x", "@types/react": "^19.x", "@types/react-dom": "^19.x" }, "peerDependencies": {}, "prettier": { "tabWidth": 4, "printWidth": 160 } } ================================================ FILE: app/postcss.config.js ================================================ module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, } ================================================ FILE: app/src/components/codeExportModal/index.tsx ================================================ import React, { useEffect, useState, useCallback } from "react"; import { observer } from "mobx-react-lite"; import { Light as SyntaxHighlighter } from "react-syntax-highlighter"; import json from "react-syntax-highlighter/dist/esm/languages/hljs/json"; import py from "react-syntax-highlighter/dist/esm/languages/hljs/python"; import atomOneLight from "react-syntax-highlighter/dist/esm/styles/hljs/atom-one-light"; import atomOneDark from "react-syntax-highlighter/dist/esm/styles/hljs/atom-one-dark"; import type { VizSpecStore } from "@kanaries/graphic-walker/store/visualSpecStore"; import type { IChart } from "@kanaries/graphic-walker/interfaces"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import commonStore from "@/store/common"; import { darkModeContext } from "@/store/context"; import { Button } from "@/components/ui/button"; import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"; import { tracker } from "@/utils/tracker"; import { usePythonCode } from "./usePythonCode"; SyntaxHighlighter.registerLanguage("json", json); SyntaxHighlighter.registerLanguage("python", py); interface ICodeExport { globalStore: React.MutableRefObject; sourceCode: string; open: boolean; setOpen: (open: boolean) => void; } const CodeExport: React.FC = observer((props) => { const { globalStore, sourceCode, open, setOpen } = props; const [visSpec, setVisSpec] = useState([]); const [tips, setTips] = useState(""); const darkMode = React.useContext(darkModeContext); const { pyCode } = usePythonCode({ sourceCode, visSpec, version: commonStore.version, }); const closeModal = useCallback(() => { setOpen(false); }, [setOpen]); const copyToCliboard = async (content: string) => { try { navigator.clipboard.writeText(content); setOpen(false); } catch(e) { setTips("The Clipboard API has been blocked in this environment. Please copy manully."); } }; useEffect(() => { if (open && globalStore.current) { const res = globalStore.current.exportCode(); setVisSpec(res); } }, [open]); return ( { setOpen(show); }} > Code Export Export the code of all charts in PyGWalker.
Python JSON(Graphic Walker)

PyGWalker Code

{pyCode}

{tips}

Graphic Walker Specification

{JSON.stringify(visSpec, null, 2)}

{tips}
); }); export default CodeExport; ================================================ FILE: app/src/components/codeExportModal/usePythonCode.ts ================================================ import { chartToWorkflow } from "@kanaries/graphic-walker/utils/workflow"; import type { IChart } from "@kanaries/graphic-walker/interfaces"; import { useMemo } from "react" export function usePythonCode (props: { sourceCode: string; visSpec: IChart[]; version: string; }) { const { sourceCode, visSpec, version } = props; const pygConfig = useMemo(() => { return JSON.stringify({ "config": visSpec, "chart_map": {}, "workflow_list": visSpec.map((spec) => chartToWorkflow(spec)), version }) }, [visSpec]) const pyCode = useMemo(() => { const preCode = sourceCode.replace("'____pyg_walker_spec_params____'", "vis_spec") return `vis_spec = r"""${pygConfig}"""\n${preCode}`; }, [sourceCode, pygConfig]) return { pyCode } } ================================================ FILE: app/src/components/initModal/index.tsx ================================================ import React from "react"; import { observer } from "mobx-react-lite"; import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog"; import commonStore from "../../store/common"; interface IInitModal {} const InitModal: React.FC = observer((props) => { return ( {commonStore.initModalInfo.title}
{commonStore.initModalInfo.title} {commonStore.initModalInfo.curIndex} / {commonStore.initModalInfo.total}
); }); export default InitModal; ================================================ FILE: app/src/components/options.tsx ================================================ import React, { useEffect, useState } from "react"; import type { IAppProps } from "../interfaces"; const copyToClipboard = async (text: string) => { return navigator.clipboard.writeText(text); }; interface ISolutionProps { header: string; cmd: string; } const updateSolutions: ISolutionProps[] = [ { header: "Using pip:", cmd: "pip install pygwalker --upgrade", }, { header: "Using anaconda:", cmd: "conda install -c conda-forge pygwalker", }, ]; const Solution: React.FC = (props) => { const [busy, setBusy] = useState(false); return ( <>
{props.header}
{props.cmd}
{ if (busy) { return; } setBusy(true); copyToClipboard(props.cmd).finally(() => { setTimeout(() => { setBusy(false); }, 2_000); }); }} > {busy ? "Copied" : "Copy"} {busy ? "\u2705" : "\u274f"}
); }; const RAND_HASH = Math.random().toString(16).split(".").at(1) + new Date().getTime().toString(16).padStart(16, "0"); const Options: React.FC = (props: IAppProps) => { const [outdated, setOutDated] = useState(false); const [appMeta, setAppMeta] = useState({}); const [showUpdateHint, setShowUpdateHint] = useState(false); if (window.localStorage.getItem("HASH") === null) { window.localStorage.setItem("HASH", RAND_HASH); } const UPDATE_URL = "https://5agko11g7e.execute-api.us-west-1.amazonaws.com/default/check_updates"; const VERSION = (window as any)?.__GW_VERSION || "current"; const HASH = window.localStorage.getItem("HASH"); useEffect(() => { if (props.userConfig?.privacy !== "offline") { const req = `${UPDATE_URL}?pkg=pygwalker-app&v=${VERSION}&hashcode=${HASH}&env=${process.env.NODE_ENV}&kernelHashcode=${props.hashcode}`; fetch(req, { headers: { "Content-Type": "application/json", }, }) .then((resp) => resp.json()) .then((res) => { setAppMeta({ data: res.data }); setOutDated(res?.data?.outdated || false); }); } }, []); useEffect(() => { setShowUpdateHint(false); }, [outdated]); useEffect(() => { if (!showUpdateHint) { return; } const handleDismiss = () => { setShowUpdateHint(false); }; document.addEventListener("click", handleDismiss); return () => { document.removeEventListener("click", handleDismiss); }; }, [showUpdateHint]); useEffect(() => { setShowUpdateHint(false); }, [outdated]); useEffect(() => { if (!showUpdateHint) { return; } const handleDismiss = () => { setShowUpdateHint(false); }; document.addEventListener("click", handleDismiss); return () => { document.removeEventListener("click", handleDismiss); }; }, [showUpdateHint]); return ( <> {outdated && (
e.stopPropagation()}>

{"Update: "} {`${VERSION}\u2191`} {` ${appMeta?.data?.latest?.release?.version || "latest"}`} | setShowUpdateHint((s) => !s)}> {`${showUpdateHint ? "Hide" : " Cmd"} \u274f`}

{showUpdateHint && (
{updateSolutions.map((sol, i) => ( ))}
)}
)} ); }; export default Options; ================================================ FILE: app/src/components/preview/index.tsx ================================================ import React from "react"; import { observer } from "mobx-react-lite"; import { PureRenderer, IRow } from '@kanaries/graphic-walker'; import type { IDarkMode, IThemeKey } from '@kanaries/graphic-walker/interfaces'; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; // @ts-ignore import style from '@/index.css?inline' interface IPreviewProps { gid: string; themeKey: string; dark: IDarkMode; charts: { visSpec: any; data: IRow[]; }[]; } const Preview: React.FC = observer((props) => { const { charts, themeKey } = props; return (
{charts.map((chart, index) => { return {chart.visSpec.name} })}
{charts.map((chart, index) => { return { return chart.data }} appearance={props.dark as IDarkMode} /> })}
); }); interface IChartPreviewProps { themeKey: string; dark: IDarkMode; visSpec: any; data: IRow[]; title: string; desc: string; } const ChartPreview: React.FC = observer((props) => { return (

{ props.title }

{ props.desc }

{ return props.data }} appearance={props.dark as IDarkMode} />
); }); export { Preview, ChartPreview, }; export type { IPreviewProps, IChartPreviewProps } ================================================ FILE: app/src/components/runcellBanner/index.tsx ================================================ import React, { useState } from "react"; import { tracker } from "@/utils/tracker"; const RUNCELL_LOGO_URL = "https://www.runcell.dev/runcell-logo.svg"; const RUNCELL_WEBSITE = "https://www.runcell.dev?utm_source=pygwalker"; const LLM_LOGOS = [ "https://www.runcell.dev/llm-icons/openai.svg", "https://www.runcell.dev/llm-icons/claude-color.svg", "https://www.runcell.dev/llm-icons/gemini-color.svg", "https://www.runcell.dev/llm-icons/deepseek-color.svg", ]; interface RuncellBannerProps { env?: string; } const checkRuncellInstalled = (): boolean => { try { // Runcell JupyterLab plugin stores user status in localStorage const runcellUser = window.parent.localStorage.getItem("plugin_auth_user_v2"); return runcellUser !== null; } catch { return false; } }; export const RuncellBanner: React.FC = ({ env }) => { const [dismissed, setDismissed] = useState(false); // Only show in Jupyter environments if (env !== "jupyter_widgets" && env !== "anywidget") { return null; } // Don't show if runcell is installed or user dismissed if (checkRuncellInstalled() || dismissed) { return null; } const handleClick = () => { tracker.track("click", { entity: "runcell_banner" }); window.open(RUNCELL_WEBSITE, "_blank"); }; const handleDismiss = (e: React.MouseEvent) => { e.stopPropagation(); tracker.track("click", { entity: "runcell_banner_dismiss" }); setDismissed(true); }; return (
Runcell Enable AI Agent for data analysis with pip install runcell
{LLM_LOGOS.map((logo, index) => ( LLM ))}
); }; export default RuncellBanner; ================================================ FILE: app/src/components/ui/badge.tsx ================================================ import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", { variants: { variant: { default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80", secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", destructive: "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80", outline: "text-foreground", }, }, defaultVariants: { variant: "default", }, } ) export interface BadgeProps extends React.HTMLAttributes, VariantProps {} function Badge({ className, variant, ...props }: BadgeProps) { return (
) } export { Badge, badgeVariants } ================================================ FILE: app/src/components/ui/button.tsx ================================================ import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-primary text-primary-foreground shadow hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90", outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-9 px-4 py-2", sm: "h-8 rounded-md px-3 text-xs", lg: "h-10 rounded-md px-8", icon: "h-9 w-9", }, }, defaultVariants: { variant: "default", size: "default", }, } ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return ( ) } ) Button.displayName = "Button" export { Button, buttonVariants } ================================================ FILE: app/src/components/ui/checkbox.tsx ================================================ import * as React from "react" import * as CheckboxPrimitive from "@radix-ui/react-checkbox" import { CheckIcon } from "@radix-ui/react-icons" import { cn } from "@/lib/utils" const Checkbox = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Checkbox.displayName = CheckboxPrimitive.Root.displayName export { Checkbox } ================================================ FILE: app/src/components/ui/dialog.tsx ================================================ import * as React from "react" import * as DialogPrimitive from "@radix-ui/react-dialog" import { Cross2Icon } from "@radix-ui/react-icons" import { cn } from "@/lib/utils" import { portalContainerContext } from "@/store/context" const Dialog = DialogPrimitive.Root const DialogTrigger = DialogPrimitive.Trigger const DialogPortal = DialogPrimitive.Portal const DialogClose = DialogPrimitive.Close const DialogOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogOverlay.displayName = DialogPrimitive.Overlay.displayName const DialogContent = React.forwardRef< React.ElementRef, { hideClose?: boolean } & React.ComponentPropsWithoutRef >(({ className, children, hideClose, ...props }, ref) => ( {children} { !hideClose && ( Close )} )) DialogContent.displayName = DialogPrimitive.Content.displayName const DialogHeader = ({ className, ...props }: React.HTMLAttributes) => (
) DialogHeader.displayName = "DialogHeader" const DialogFooter = ({ className, ...props }: React.HTMLAttributes) => (
) DialogFooter.displayName = "DialogFooter" const DialogTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogTitle.displayName = DialogPrimitive.Title.displayName const DialogDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogDescription.displayName = DialogPrimitive.Description.displayName export { Dialog, DialogPortal, DialogOverlay, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, } ================================================ FILE: app/src/components/ui/input.tsx ================================================ import * as React from "react" import { cn } from "@/lib/utils" export interface InputProps extends React.InputHTMLAttributes {} const Input = React.forwardRef( ({ className, type, ...props }, ref) => { return ( ) } ) Input.displayName = "Input" export { Input } ================================================ FILE: app/src/components/ui/label.tsx ================================================ import * as React from "react" import * as LabelPrimitive from "@radix-ui/react-label" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const labelVariants = cva( "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" ) const Label = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, ...props }, ref) => ( )) Label.displayName = LabelPrimitive.Root.displayName export { Label } ================================================ FILE: app/src/components/ui/select.tsx ================================================ import * as React from "react" import { CaretSortIcon, CheckIcon, ChevronDownIcon, ChevronUpIcon, } from "@radix-ui/react-icons" import * as SelectPrimitive from "@radix-ui/react-select" import { cn } from "@/lib/utils" import { portalContainerContext } from "@/store/context" const Select = SelectPrimitive.Root const SelectGroup = SelectPrimitive.Group const SelectValue = SelectPrimitive.Value const SelectTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( span]:line-clamp-1", className )} {...props} > {children} )) SelectTrigger.displayName = SelectPrimitive.Trigger.displayName const SelectScrollUpButton = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName const SelectScrollDownButton = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName const SelectContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, position = "popper", ...props }, ref) => ( {children} )) SelectContent.displayName = SelectPrimitive.Content.displayName const SelectLabel = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectLabel.displayName = SelectPrimitive.Label.displayName const SelectItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} )) SelectItem.displayName = SelectPrimitive.Item.displayName const SelectSeparator = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectSeparator.displayName = SelectPrimitive.Separator.displayName export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, } ================================================ FILE: app/src/components/ui/tabs.tsx ================================================ import * as React from "react" import * as TabsPrimitive from "@radix-ui/react-tabs" import { cn } from "@/lib/utils" const Tabs = TabsPrimitive.Root const TabsList = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsList.displayName = TabsPrimitive.List.displayName const TabsTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsTrigger.displayName = TabsPrimitive.Trigger.displayName const TabsContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsContent.displayName = TabsPrimitive.Content.displayName export { Tabs, TabsList, TabsTrigger, TabsContent } ================================================ FILE: app/src/components/ui/toggle-group.tsx ================================================ import * as React from "react" import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group" import { VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" import { toggleVariants } from "@/components/ui/toggle" const ToggleGroupContext = React.createContext< VariantProps >({ size: "default", variant: "default", }) const ToggleGroup = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, variant, size, children, ...props }, ref) => ( {children} )) ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName const ToggleGroupItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, children, variant, size, ...props }, ref) => { const context = React.useContext(ToggleGroupContext) return ( {children} ) }) ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName export { ToggleGroup, ToggleGroupItem } ================================================ FILE: app/src/components/ui/toggle.tsx ================================================ import * as React from "react" import * as TogglePrimitive from "@radix-ui/react-toggle" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const toggleVariants = cva( "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground", { variants: { variant: { default: "bg-transparent", outline: "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground", }, size: { default: "h-9 px-3", sm: "h-8 px-2", lg: "h-10 px-3", }, }, defaultVariants: { variant: "default", size: "default", }, } ) const Toggle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, variant, size, ...props }, ref) => ( )) Toggle.displayName = TogglePrimitive.Root.displayName export { Toggle, toggleVariants } ================================================ FILE: app/src/components/uploadChartModal/index.tsx ================================================ import React, { useState, useEffect } from "react"; import { observer } from "mobx-react-lite"; import type { IGWHandler } from "@kanaries/graphic-walker/interfaces"; import type { VizSpecStore } from '@kanaries/graphic-walker/store/visualSpecStore' import { chartToWorkflow } from "@kanaries/graphic-walker" import { tracker } from "@/utils/tracker"; import communicationStore from "../../store/communication"; import commonStore from "../../store/common"; import { Button } from "@/components/ui/button"; import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Checkbox } from "@/components/ui/checkbox"; interface IUploadChartModal { gwRef: React.MutableRefObject; storeRef: React.MutableRefObject; dark: string; } const UploadChartModal: React.FC = observer((props) => { const [uploading, setUploading] = useState(false); const [chartName, setChartName] = useState(""); const [datasetName, setDatasetName] = useState(""); const [isPublic, setIsPublic] = useState(true); const [isCreateDashboard, setIsCreateDashboard] = useState(true); const [instanceType, setInstanceType] = useState(""); useEffect(() => { if (commonStore.uploadChartModalOpen) { const instanceType = (props.storeRef.current?.exportCode().length || 0) > 1 ? "dashboard" : "chart"; setChartName(`${instanceType}-${new Date().getTime().toString(16).padStart(16, "0")}`); setDatasetName(`dataset-${new Date().getTime().toString(16).padStart(16, "0")}`); setIsPublic(true); setInstanceType(instanceType); } }, [commonStore.uploadChartModalOpen]) const uploadSuccess = (instanceType: string, instanceId: string, datasetId: string) => { const managerUrl = instanceType === "chart" ? `https://kanaries.net/analytics/c/${instanceId}` : `https://kanaries.net/analytics/d/${instanceId}` const shareUrl = instanceType === "chart" ? `https://kanaries.net/analytics/chart/${instanceId}/share?theme=${props.dark}` : `https://kanaries.net/analytics/dashboard/${instanceId}/share?theme=${props.dark}` const datsetUrl = `https://kanaries.net/analytics/detail/${datasetId}` if (instanceType === "dashboard" && instanceId === "" ) { commonStore.setNotification( { type: "success", title: "Success", message: ( <>

Upload success, you can view and manager it at: {datsetUrl}

), }, 30_000 ); } else { commonStore.setNotification( { type: "success", title: "Success", message: ( <>

Upload success, you can view and manager it at: {managerUrl}


{isPublic &&

Since you set the {instanceType} to public, you can also share it with others by: {shareUrl}

} ), }, 30_000 ); } }; const onClick = async () => { if (uploading) return; setUploading(true); tracker.track("click", {"entity": "upload_chart_button"}); const visSpec = props.storeRef.current?.exportCode()!; try { if (instanceType === "dashboard") { const resp = await communicationStore.comm?.sendMsg( "upload_to_cloud_dashboard", { chartName: chartName, datasetName: datasetName, isPublic: isPublic, isCreateDashboard: isCreateDashboard, visSpec: visSpec, workflowList: visSpec.map(spec => chartToWorkflow(spec).workflow), }, 120_000 ); uploadSuccess(instanceType, resp?.data.dashboardId, resp?.data.datasetId); } else { const resp = await communicationStore.comm?.sendMsg( "upload_to_cloud_charts", { chartName: chartName, datasetName: datasetName, isPublic: isPublic, visSpec: visSpec, workflow: chartToWorkflow(visSpec[0]).workflow, }, 120_000 ); uploadSuccess(instanceType, resp?.data.chartId, resp?.data.datasetId); } commonStore.setUploadChartModalOpen(false); } finally { setUploading(false); } }; return ( { commonStore.setUploadChartModalOpen(show) }} > Upload Chart upload your charts to dashboard of kanaries cloud.
{ setDatasetName(e.target.value); }} type="text" placeholder="please input dataset name" id="dataset-name-input" className="mb-1" />
{ setChartName(e.target.value); }} disabled={!isCreateDashboard} type="text" placeholder="please input chart name" id="chart-name-input" className="mb-1" />
{setIsPublic(checked as boolean);}} />

Make {instanceType} publicly accessible.

{instanceType === "dashboard" && (
{setIsCreateDashboard(checked as boolean);}} />

Create a dashboard containing all charts, or upload charts individually.

)}
); }); export default UploadChartModal; ================================================ FILE: app/src/components/uploadSpecModal/index.tsx ================================================ import React, { useEffect, useState } from "react"; import { observer } from "mobx-react-lite"; import type { VizSpecStore } from '@kanaries/graphic-walker/store/visualSpecStore' import { chartToWorkflow } from "@kanaries/graphic-walker/utils/workflow"; import { tracker } from "@/utils/tracker"; import communicationStore from "../../store/communication"; import commonStore from "../../store/common"; import { Button } from "@/components/ui/button"; import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Checkbox } from "@/components/ui/checkbox"; import { badgeVariants } from "@/components/ui/badge"; interface IUploadSpecModal { setGwIsChanged: React.Dispatch>; storeRef: React.MutableRefObject; } const UploadSpecModal: React.FC = observer((props) => { const [uploading, setUploading] = useState(false); const [specName, setSpecName] = useState(""); const [isSetToken, setIsSetToken] = useState(false); const [token, setToken] = useState(""); const [contentType, setContentType] = useState<"onboarding" | "upload">("onboarding"); const uploadSuccess = (path: string) => { commonStore.setNotification( { type: "success", title: "Success", message: ( <>

upload spec success, please use

`pyg.walk(df, spec="ksf://{path}")`

to rerun pygwalker.

), }, 30_000 ); }; const onClick = async () => { if (uploading) return; tracker.track("click", {"entity": "upload_spec_to_cloud_button"}); setUploading(true); try { const resp = await communicationStore.comm?.sendMsg( "upload_spec_to_cloud", {"fileName": specName, "newToken": isSetToken ? token : ""}, 30_000 ); commonStore.setUploadSpecModalOpen(false); uploadSuccess(resp?.data["specFilePath"]); props.setGwIsChanged(false); } finally { setUploading(false); } }; const onClickSetToken = (checked: boolean) => { setIsSetToken(checked); setToken(""); } const saveSpecToLocal = () => { tracker.track("click", {"entity": "save_spec_to_local_file_button"}); const visSpec = props.storeRef.current?.exportCode(); const configObj = { config: visSpec, chart_map: {}, version: commonStore.version, workflow_list: visSpec?.map(spec => chartToWorkflow(spec).workflow), } const blob = new Blob([JSON.stringify(configObj)], {type: "text/plain;charset=utf-8"}); const url = URL.createObjectURL(blob); const tempLink = document.createElement("a"); tempLink.href = url; tempLink.download = `pygwalker_spec_${new Date().getTime()}.json` tempLink.click(); URL.revokeObjectURL(url); commonStore.setUploadSpecModalOpen(false); props.setGwIsChanged(false); }; useEffect(() => { setContentType("onboarding"); }, [commonStore.uploadSpecModalOpen]); const OnboardingContent = ( Save Spec
) const UpdateSpecContent = ( Upload Sepc

Because you currently don't pass in the spec parameter or the passed in spec parameter is not a writable spec file.

Currently the spec configuration is already in your ui cache, you may need to upload kanaries cloud to save it.

If you don't have kanaries_token, you need to get it: Kanaries
{ setSpecName(e.target.value); }} type="text" placeholder="please input spec file name" id="chart-name-input" className="mb-1" />
{ onClickSetToken(checked as boolean); }} />
{ isSetToken && (
{ setToken(e.target.value); }} type="text" autoComplete="off" placeholder="please input new kanaries token" id="token-input" />
) }
) return ( { commonStore.setUploadSpecModalOpen(show); }} > {contentType === "upload" && UpdateSpecContent } {contentType === "onboarding" && OnboardingContent } ); }); export default UploadSpecModal; ================================================ FILE: app/src/dataSource/index.tsx ================================================ import type { IDataSourceProps } from "../interfaces"; import type { IRow, IDataQueryPayload } from "@kanaries/graphic-walker/interfaces"; import commonStore from "../store/common"; import communicationStore from "../store/communication" import { parser_dsl_with_meta } from "@kanaries/gw-dsl-parser"; interface MessagePayload extends IDataSourceProps { action: "requestData" | "postData" | "finishData"; dataSourceId: string; partId: number; curIndex: number; total: number; data?: IRow[]; } interface ICommPostDataMessage { dataSourceId: string; data?: IRow[]; total: number; curIndex: number; } export async function loadDataSource(props: IDataSourceProps): Promise { const { dataSourceId } = props; return new Promise((resolve, reject) => { const data = new Array(); const timeout = () => { reject("timeout"); }; let timer = setTimeout(timeout, 100_000); const onmessage = (ev: MessageEvent) => { try { if (ev.data.dataSourceId === dataSourceId) { clearTimeout(timer); timer = setTimeout(timeout, 100_000); if (ev.data.action === "postData") { commonStore.setInitModalOpen(true); commonStore.setInitModalInfo({ total: ev.data.total, curIndex: ev.data.curIndex, title: "Loading Data", }); data.push(...(ev.data.data ?? [])); } else if (ev.data.action === "finishData") { window.removeEventListener("message", onmessage); resolve(data); } } } catch (err) { reject({ message: "handler", error: err }); } }; window.addEventListener("message", onmessage); }); } export function postDataService(msg: ICommPostDataMessage) { window.postMessage( { action: "postData", dataSourceId: msg.dataSourceId, total: msg.total, curIndex: msg.curIndex, data: msg.data, } as MessagePayload, "*" ) } export function finishDataService(msg: any) { window.postMessage( { action: "finishData", dataSourceId: msg.dataSourceId, } as MessagePayload, "*" ) } interface IBatchGetDatasTask { query: any; resolve: (value: any) => void; reject: (reason?: any) => void; } function initBatchGetDatas(action: string) { const taskList = [] as IBatchGetDatasTask[]; const batchGetDatas = async(taskList: IBatchGetDatasTask[]) => { const result = await communicationStore.comm?.sendMsg( action, {"queryList": taskList.map(task => task.query)}, 60_000 ); if (result) { for (let i = 0; i < taskList.length; i++) { taskList[i].resolve(result["data"]["datas"][i]); } } else { for (let i = 0; i < taskList.length; i++) { taskList[i].reject("get result error"); } } } const getDatas = (query: any) => { return new Promise((resolve, reject) => { taskList.push({ query, resolve, reject }); if (taskList.length === 1) { setTimeout(() => { batchGetDatas(taskList.splice(0, taskList.length)); }, 100); } }) } return { getDatas } } const batchGetDatasBySql = initBatchGetDatas("batch_get_datas_by_sql"); const batchGetDatasByPayload = initBatchGetDatas("batch_get_datas_by_payload"); const DEFAULT_LIMIT = 50_000; function notifyDataLimit() { commonStore.setNotification({ type: "warning", title: "Data Limit Reached", message: (<> The current computation has returned more than 50,000 rows of data. To ensure optimal performance, we are currently rendering only the first 50,000 rows. If you need to render the entire all datas, please use the 'limit' tool ( ) to manually set the maximum number of rows to be returned. ) }, 60_000); } export function getDatasFromKernelBySql(fieldMetas: any) { return async (payload: IDataQueryPayload) => { const sql = parser_dsl_with_meta( "pygwalker_mid_table", JSON.stringify({...payload, limit: payload.limit ?? DEFAULT_LIMIT}), JSON.stringify({"pygwalker_mid_table": fieldMetas}) ); const result = await batchGetDatasBySql.getDatas(sql) ?? []; if (!payload.limit && result.length === DEFAULT_LIMIT) { notifyDataLimit(); } return result as IRow[]; } } export async function getDatasFromKernelByPayload(payload: IDataQueryPayload) { const result = await batchGetDatasByPayload.getDatas({...payload, limit: payload.limit ?? DEFAULT_LIMIT}) ?? []; if (!payload.limit && result.length === DEFAULT_LIMIT) { notifyDataLimit(); } return result as IRow[]; } ================================================ FILE: app/src/index.css ================================================ @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 240 10% 3.9%; --card: 0 0% 100%; --card-foreground: 240 10% 3.9%; --popover: 0 0% 100%; --popover-foreground: 240 10% 3.9%; --primary: 240 5.9% 10%; --primary-foreground: 0 0% 98%; --secondary: 240 4.8% 95.9%; --secondary-foreground: 240 5.9% 10%; --muted: 240 4.8% 95.9%; --muted-foreground: 240 3.8% 46.1%; --accent: 240 4.8% 95.9%; --accent-foreground: 240 5.9% 10%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 240 5.9% 90%; --input: 240 5.9% 90%; --ring: 240 10% 3.9%; --radius: 0.5rem; } .dark { --background: 240 10% 3.9%; --foreground: 0 0% 98%; --card: 240 10% 3.9%; --card-foreground: 0 0% 98%; --popover: 240 10% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 240 5.9% 10%; --secondary: 240 3.7% 15.9; --secondary-foreground: 0 0% 98%; --muted: 240 3.7% 15.9%; --muted-foreground: 240 5% 64.9%; --accent: 240 3.7% 15.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; --ring: 240 4.9% 83.9%; } } ================================================ FILE: app/src/index.tsx ================================================ import React, { useCallback, useContext, useEffect, useState } from 'react'; import { createRoot } from 'react-dom/client'; import { observer } from "mobx-react-lite"; import { reaction } from "mobx" import { GraphicWalker, PureRenderer, GraphicRenderer, TableWalker } from '@kanaries/graphic-walker' import type { VizSpecStore } from '@kanaries/graphic-walker/store/visualSpecStore' import type { IGWHandler, IViewField, ISegmentKey, IDarkMode, IChatMessage, IRow } from '@kanaries/graphic-walker/interfaces'; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Streamlit, withStreamlitConnection } from "streamlit-component-lib" import { createRender, useModel } from "@anywidget/react"; import Options from './components/options'; import { IAppProps } from './interfaces'; import { loadDataSource, postDataService, finishDataService, getDatasFromKernelBySql, getDatasFromKernelByPayload } from './dataSource'; import commonStore from "./store/common"; import { initJupyterCommunication, initHttpCommunication, streamlitComponentCallback, initAnywidgetCommunication } from "./utils/communication"; import communicationStore from "./store/communication" import { setConfig } from './utils/userConfig'; import CodeExportModal from './components/codeExportModal'; import type { IPreviewProps, IChartPreviewProps } from './components/preview'; import { Preview, ChartPreview } from './components/preview'; import UploadSpecModal from "./components/uploadSpecModal" import UploadChartModal from './components/uploadChartModal'; import InitModal from './components/initModal'; import { getSaveTool } from './tools/saveTool'; import { getExportTool } from './tools/exportTool'; import { getExportDataframeTool } from './tools/exportDataframe'; import { getRuncellTool } from './tools/runcellTool'; import { formatExportedChartDatas } from "./utils/save"; import { tracker } from "@/utils/tracker"; import Notification from "./notify" import initDslParser from "@kanaries/gw-dsl-parser"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select" import { ToggleGroup, ToggleGroupItem, } from "@/components/ui/toggle-group" import { SunIcon, MoonIcon, DesktopIcon, ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons" // @ts-ignore import style from './index.css?inline' import { currentMediaTheme } from './utils/theme'; import { AppContext, darkModeContext } from './store/context'; import FormatSpec from './utils/formatSpec'; import { getOpenDesktopTool } from './tools/openDesktop'; import RuncellBanner from './components/runcellBanner'; const initChart = async (gwRef: React.MutableRefObject, total: number, props: IAppProps) => { if (props.needInitChart && props.env === "jupyter_widgets" && total !== 0) { commonStore.setInitModalOpen(true); commonStore.setInitModalInfo({ title: "Recover Charts", curIndex: 0, total: total, }); for await (const chart of gwRef.current?.exportChartList("data-url")!) { await communicationStore.comm?.sendMsg("save_chart", await formatExportedChartDatas(chart.data)); commonStore.setInitModalInfo({ title: "Recover Charts", curIndex: chart.index + 1, total: chart.total, }); } } commonStore.setInitModalOpen(false); } const getComputationCallback = (props: IAppProps) => { if (props.useKernelCalc && props.parseDslType === "client") { return getDatasFromKernelBySql(props.fieldMetas); } if (props.useKernelCalc && props.parseDslType === "server") { return getDatasFromKernelByPayload; } } const MainApp = observer((props: {children: React.ReactNode, darkMode: "dark" | "light" | "media", hideToolBar?: boolean, gid?: string, sendMessage?: boolean}) => { const [portal, setPortal] = useState(null); const [selectedDarkMode, setSelectedDarkMode] = useState(props.darkMode); const [darkMode, setDarkMode] = useState(currentMediaTheme(props.darkMode)); const sendAppearanceMessageToParent = useCallback((appearance: IDarkMode) => { if (!props.sendMessage) return; window.parent.postMessage({ action: "changeAppearance", gid: props.gid, appearance: appearance }, "*"); }, [props.gid, props.sendMessage]); useEffect(() => { if (selectedDarkMode === "media") { setDarkMode(currentMediaTheme(selectedDarkMode)); sendAppearanceMessageToParent(currentMediaTheme(selectedDarkMode)); const media = window.matchMedia('(prefers-color-scheme: dark)'); const listener = (e: MediaQueryListEvent) => { setDarkMode(e.matches ? "dark" : "light"); } media.addEventListener("change", listener); return () => media.removeEventListener("change", listener); } else { sendAppearanceMessageToParent(selectedDarkMode); setDarkMode(selectedDarkMode); } }, [selectedDarkMode]) return (
{ props.children }
{!props.hideToolBar && (
{value && setSelectedDarkMode(value as IDarkMode)}} >
)}
) }) const ExploreApp: React.FC = (props) => { const gwRef = React.useRef(null); const { userConfig } = props; const [exportOpen, setExportOpen] = useState(false); const [mode, setMode] = useState("walker"); const [visSpec, setVisSpec] = useState(props.visSpec); const [hideModeOption, _] = useState(true); const [isChanged, setIsChanged] = useState(false); const storeRef = React.useRef(null); const disposerRef = React.useRef<() => void>(); const storeRefProxied = React.useMemo( () => new Proxy(storeRef, { set(target, prop, value) { if (prop === "current") { if (value) { disposerRef.current?.(); const store = value as VizSpecStore; disposerRef.current = reaction( () => store.currentVis, () => { setIsChanged((value as VizSpecStore).canUndo); streamlitComponentCallback({ event: "spec_change", data: store.exportCode() }); }, ); } } return Reflect.set(target, prop, value); }, }), [] ); commonStore.setVersion(props.version!); useEffect(() => { commonStore.setShowCloudTool(props.showCloudTool); tracker.setUserId(props.hashcode ?? ""); if (userConfig) { setConfig(userConfig); tracker.setOpen(userConfig.privacy === "events"); }; }, []); useEffect(() => { if (props.initChartFlag) { setTimeout(() => { initChart(gwRef, visSpec.length, props) }, 0); } }, [props.initChartFlag]); useEffect(() => { setTimeout(() => { storeRef.current?.setSegmentKey(props.defaultTab as ISegmentKey); }, 0); }, [mode]); const runcellTool = getRuncellTool(); const exportTool = getExportTool(setExportOpen); const openInDesktopTool = getOpenDesktopTool(props, storeRef); const tools = [runcellTool, exportTool, openInDesktopTool]; if (props.env && ["jupyter_widgets", "streamlit", "gradio", "marimo", "anywidget", "web_server"].indexOf(props.env) !== -1 && props.useSaveTool) { const saveTool = getSaveTool(props, gwRef, storeRef, isChanged, setIsChanged); tools.push(saveTool); } if (props.isExportDataFrame) { const exportDataFrameTool = getExportDataframeTool(props, storeRef); tools.push(exportDataFrameTool); } const toolbarConfig = { exclude: ["export_code"], extra: tools } const enhanceAPI = React.useMemo(() => { if (props.showCloudTool) { const features: Record = {}; if (props.enableAskViz) { features["askviz"] = async (metas: IViewField[], query: string) => { const resp = await communicationStore.comm?.sendMsg("get_spec_by_text", { metas, query }); return resp?.data.data; }; } if (props.enableVlChat) { features["vlChat"] = async (metas: IViewField[], chats: IChatMessage[]) => { const resp = await communicationStore.comm?.sendMsg("get_chart_by_chats", { metas, chats }); return resp?.data.data; }; } if (Object.keys(features).length > 0) { return { features }; } } return undefined; }, [props.showCloudTool, props.enableAskViz, props.enableVlChat]); const computationCallback = React.useMemo(() => getComputationCallback(props), []); const modeChange = (value: string) => { if (mode === "walker") { setVisSpec(storeRef.current?.exportCode()); } setMode(value); } return ( { !hideModeOption && } { mode === "walker" ? : } ); } const PureRednererApp: React.FC = observer((props) => { const computationCallback = getComputationCallback(props); const spec = props.visSpec[0]; const [expand, setExpand] = useState(false); return (
{ !expand && () } { expand && commonStore.isStreamlitComponent && (
) } { commonStore.isStreamlitComponent && expand && ( setExpand(false)}> )} { commonStore.isStreamlitComponent && !expand && ( setExpand(true)}> )}
) }); const initOnJupyter = async(props: IAppProps) => { const comm = initJupyterCommunication(props.id); comm.registerEndpoint("postData", postDataService); comm.registerEndpoint("finishData", finishDataService); communicationStore.setComm(comm); if (props.needLoadLastSpec) { const visSpecResp = await comm.sendMsg("get_latest_vis_spec", {}); props.visSpec = FormatSpec(visSpecResp["data"]["visSpec"], props.rawFields); } if (props.needLoadDatas) { comm.sendMsgAsync("request_data", {}, null); } await initDslParser(); } const initOnHttpCommunication = async(props: IAppProps) => { const comm = await initHttpCommunication(props.id, props.communicationUrl); communicationStore.setComm(comm); if ((props.gwMode === "explore" || props.gwMode === "filter_renderer") && props.needLoadLastSpec) { const visSpecResp = await comm.sendMsg("get_latest_vis_spec", {}); props.visSpec = visSpecResp["data"]["visSpec"]; } await initDslParser(); } const initOnAnywidgetCommunication = async(props: IAppProps, model: import("@anywidget/types").AnyModel) => { const comm = await initAnywidgetCommunication(props.id, model); communicationStore.setComm(comm); if ((props.gwMode === "explore" || props.gwMode === "filter_renderer") && props.needLoadLastSpec) { const visSpecResp = await comm.sendMsg("get_latest_vis_spec", {}); props.visSpec = visSpecResp["data"]["visSpec"]; } await initDslParser(); } const defaultInit = async(props: IAppProps) => {} function GWalkerComponent(props: IAppProps) { const [initChartFlag, setInitChartFlag] = useState(false); const [dataSource, setDataSource] = useState(props.dataSource); useEffect(() => { if (props.needLoadDatas) { loadDataSource(props.dataSourceProps).then((data) => { setDataSource(data); setInitChartFlag(true); commonStore.setInitModalOpen(false); }) } else { setInitChartFlag(true); } }, []); return ( { props.gwMode === "explore" && } { props.gwMode === "renderer" && } { props.gwMode === "filter_renderer" && } { props.gwMode === "table" && } ) } function GWalker(props: IAppProps, id: string) { props.visSpec = FormatSpec(props.visSpec, props.rawFields); let preRender = defaultInit; switch(props.env) { case "jupyter_widgets": preRender = initOnJupyter; break; case "streamlit": preRender = initOnHttpCommunication; break; case "gradio": preRender = initOnHttpCommunication; break; case "web_server": preRender = initOnHttpCommunication; break; default: preRender = defaultInit; } preRender(props).then(() => { const container = document.getElementById(id); if (container) { createRoot(container).render( ); } }) } function PreviewApp(props: IPreviewProps, containerId: string) { props.charts = FormatSpec(props.charts.map(chart => chart.visSpec), []) .map((visSpec, index) => { return {...props.charts[index], visSpec} }); if (window.document.getElementById(`gwalker-${props.gid}`)) { window.document.getElementById(containerId)?.remove(); } const container = document.getElementById(containerId); if (container) { createRoot(container).render( ); } } function ChartPreviewApp(props: IChartPreviewProps, id: string) { props.visSpec = FormatSpec([props.visSpec], [])[0]; const container = document.getElementById(id); if (container) { createRoot(container).render( ); } } function GraphicRendererApp(props: IAppProps) { const computationCallback = getComputationCallback(props); const containerSize = props["containerSize"] ?? [null, null]; const globalProps = { rawFields: props.rawFields, containerStyle: { height: containerSize[1] ? `${containerSize[1]-200}px` : "700px", width: containerSize[0] ? `${containerSize[0]-20}px` : "60%" }, themeKey:props.themeKey, dark: useContext(darkModeContext), } return (
{props.visSpec.map((chart, index) => { return {chart.name} })}
{props.visSpec.map((chart, index) => { return { props.useKernelCalc ? : } })} ) } function TableWalkerApp(props: IAppProps) { const computationCallback = getComputationCallback(props); const globalProps = { rawFields: props.rawFields, themeKey: props.themeKey, dark: useContext(darkModeContext) } return ( { props.useKernelCalc ? : } ) } function SteamlitGWalkerApp(streamlitProps: any) { const props = streamlitProps.args as IAppProps; const [inited, setInited] = useState(false); const container = React.useRef(null); props.visSpec = FormatSpec(props.visSpec, props.rawFields); useEffect(() => { commonStore.setIsStreamlitComponent(true); initOnHttpCommunication(props).then(() => { setInited(true); }) }, []); useEffect(() => { if (!container.current) return; const resizeObserver = new ResizeObserver(() => { Streamlit.setFrameHeight((container.current?.clientHeight ?? 0) + 20); }) resizeObserver.observe(container.current); return () => resizeObserver.disconnect(); }, [inited]); return ( {inited && (
)} ); }; const StreamlitGWalker = () => { const StreamlitGWalkerComponent = withStreamlitConnection(SteamlitGWalkerApp); const container = document.getElementById("root"); if (container) { createRoot(container).render( ); } } function AnywidgetGWalkerApp() { const [inited, setInited] = useState(false); const model = useModel(); const props = JSON.parse(model.get("props")) as IAppProps; props.visSpec = FormatSpec(props.visSpec, props.rawFields); useEffect(() => { initOnAnywidgetCommunication(props, model).then(() => { setInited(true); }) }, []); return ( {!inited &&
Loading...
} {inited && ( )} ); } export default { GWalker, PreviewApp, ChartPreviewApp, StreamlitGWalker, render: createRender(AnywidgetGWalkerApp) } ================================================ FILE: app/src/interfaces/index.ts ================================================ import type { IRow, IMutField } from '@kanaries/graphic-walker/interfaces' import type { IDarkMode, IThemeKey, IComputationFunction } from '@kanaries/graphic-walker/interfaces'; export interface IAppProps { // graphic-walker props fieldkeyGuard: boolean; themeKey: IThemeKey; dark: IDarkMode; // pygwalker props dataSource: IRow[]; rawFields: IMutField[]; id: string; dataSourceProps: IDataSourceProps; version?: string; hashcode?: string; visSpec: any; userConfig?: IUserConfig; env?: string; needLoadDatas?: boolean; specType: string; showCloudTool: boolean; enableAskViz: boolean; enableVlChat: boolean; needInitChart: boolean; useKernelCalc: boolean; useSaveTool: boolean; parseDslType: "server" | "client"; communicationUrl: string; gwMode: "explore" | "renderer" | "filter_renderer" | "table"; needLoadLastSpec: boolean; extraConfig?: any; fieldMetas: any; isExportDataFrame: boolean; defaultTab: "data" | "vis"; } export interface IDataSourceProps { tunnelId: string; dataSourceId: string; } export interface IUserConfig { [key: string]: any; privacy: 'events' | 'update-only' | 'offline'; } ================================================ FILE: app/src/lib/dslToWorkflow.ts ================================================ import { chartToWorkflow } from "@kanaries/graphic-walker/utils/workflow"; export default function Transform(str: string) { return JSON.stringify(chartToWorkflow(JSON.parse(str))); } ================================================ FILE: app/src/lib/utils.ts ================================================ import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } ================================================ FILE: app/src/lib/vegaToDsl.ts ================================================ import { VegaliteMapper } from '@kanaries/graphic-walker/lib/vl2gw'; export default function Transform(str: string) { const params = JSON.parse(str); return JSON.stringify( VegaliteMapper(...[params["vl"], params["allFields"], params["visId"], params["name"]]) ); } ================================================ FILE: app/src/notify/index.tsx ================================================ import { Fragment } from "react"; import { Transition } from "@headlessui/react"; import { CheckCircleIcon } from "@heroicons/react/24/outline"; import { XMarkIcon } from "@heroicons/react/20/solid"; import commonStore, { INotification } from "../store/common"; import { observer } from "mobx-react-lite"; function getNotificationIcon(type: INotification["type"]) { switch (type) { case "success": return