├── .gitignore ├── .vscode └── settings.json ├── LICENSE ├── MANIFEST.in ├── README.md ├── build.sh ├── docs ├── a.png ├── b.png ├── screenshot.png ├── streamlit-markdown.gif └── vscode_type_hint.png ├── example.py ├── pyproject.toml ├── requirements.txt ├── server.py ├── streamlit_markdown ├── __init__.py ├── frontend │ ├── .eslintrc.json │ ├── .gitignore │ ├── README.md │ ├── components │ │ ├── markdown-content.tsx │ │ └── streamlit-markdown.tsx │ ├── hooks │ │ └── use-markdown-processor.tsx │ ├── libs │ │ └── class-names.ts │ ├── next.config.js │ ├── out │ │ ├── 404.html │ │ ├── _next │ │ │ └── static │ │ │ │ ├── chunks │ │ │ │ ├── 128.4d9231bbd09e3c13.js │ │ │ │ ├── 129.9efdded3503e2056.js │ │ │ │ ├── 15.767906eca7c842ec.js │ │ │ │ ├── 162.9993134950e5aae2.js │ │ │ │ ├── 172.4568e3e47a7b0d6c.js │ │ │ │ ├── 175675d1-5839900ee54d9685.js │ │ │ │ ├── 289.c3641639ea07261c.js │ │ │ │ ├── 327.3ff3126ba5f69a76.js │ │ │ │ ├── 336.c3ee2e7484c89406.js │ │ │ │ ├── 3a3990a6-7141d383e7e655e4.js │ │ │ │ ├── 407.1f033106645f6827.js │ │ │ │ ├── 449.368de69e44e91daf.js │ │ │ │ ├── 474.c95c7a055f8a822b.js │ │ │ │ ├── 493.8a17d5547315436c.js │ │ │ │ ├── 518.a072e9351f53ceee.js │ │ │ │ ├── 553.8317b30d3e990326.js │ │ │ │ ├── 57.5c87ccbc7fc65323.js │ │ │ │ ├── 585.718c889433935045.js │ │ │ │ ├── 616.62b94ea455be6fb0.js │ │ │ │ ├── 644.b993fb3718a827b7.js │ │ │ │ ├── 650.a33183e56716c341.js │ │ │ │ ├── 705.af52d38cf2fd4da4.js │ │ │ │ ├── 72fdc299.4f8b8de40dfb5bcf.js │ │ │ │ ├── 756.10ac3796d4e90817.js │ │ │ │ ├── 777.0efe89c210d8a0ac.js │ │ │ │ ├── 832.a60101b3ef0e470d.js │ │ │ │ ├── 836-d76537b2d96d3d2c.js │ │ │ │ ├── 882.42f6fe1f1ebc00e9.js │ │ │ │ ├── 8f0ac8b7-4274af56975c41d5.js │ │ │ │ ├── 90912e1b.7a2ec5fbd21a3bbe.js │ │ │ │ ├── 913.2b855727617fa758.js │ │ │ │ ├── 914.2b69f243ce7b6d05.js │ │ │ │ ├── 921.ef7a56237d2146a9.js │ │ │ │ ├── 97.83d797fa8ca65733.js │ │ │ │ ├── 998.d3593cc5157a0cca.js │ │ │ │ ├── framework-305cb810cde7afac.js │ │ │ │ ├── main-7e7c010f6db7fe59.js │ │ │ │ ├── pages │ │ │ │ │ ├── _app-2ddf65715eee6393.js │ │ │ │ │ ├── _error-54de1933a164a1ff.js │ │ │ │ │ └── index-ca7df3f4b012a137.js │ │ │ │ ├── polyfills-78c92fac7aa8fdd8.js │ │ │ │ └── webpack-fc3c301467690dd7.js │ │ │ │ ├── css │ │ │ │ ├── 0898c1c40419df1b.css │ │ │ │ └── 5b23f672090e4edc.css │ │ │ │ ├── media │ │ │ │ ├── KaTeX_AMS-Regular.1608a09b.woff │ │ │ │ ├── KaTeX_AMS-Regular.4aafdb68.ttf │ │ │ │ ├── KaTeX_AMS-Regular.a79f1c31.woff2 │ │ │ │ ├── KaTeX_Caligraphic-Bold.b6770918.woff │ │ │ │ ├── KaTeX_Caligraphic-Bold.cce5b8ec.ttf │ │ │ │ ├── KaTeX_Caligraphic-Bold.ec17d132.woff2 │ │ │ │ ├── KaTeX_Caligraphic-Regular.07ef19e7.ttf │ │ │ │ ├── KaTeX_Caligraphic-Regular.55fac258.woff2 │ │ │ │ ├── KaTeX_Caligraphic-Regular.dad44a7f.woff │ │ │ │ ├── KaTeX_Fraktur-Bold.9f256b85.woff │ │ │ │ ├── KaTeX_Fraktur-Bold.b18f59e1.ttf │ │ │ │ ├── KaTeX_Fraktur-Bold.d42a5579.woff2 │ │ │ │ ├── KaTeX_Fraktur-Regular.7c187121.woff │ │ │ │ ├── KaTeX_Fraktur-Regular.d3c882a6.woff2 │ │ │ │ ├── KaTeX_Fraktur-Regular.ed38e79f.ttf │ │ │ │ ├── KaTeX_Main-Bold.b74a1a8b.ttf │ │ │ │ ├── KaTeX_Main-Bold.c3fb5ac2.woff2 │ │ │ │ ├── KaTeX_Main-Bold.d181c465.woff │ │ │ │ ├── KaTeX_Main-BoldItalic.6f2bb1df.woff2 │ │ │ │ ├── KaTeX_Main-BoldItalic.70d8b0a5.ttf │ │ │ │ ├── KaTeX_Main-BoldItalic.e3f82f9d.woff │ │ │ │ ├── KaTeX_Main-Italic.47373d1e.ttf │ │ │ │ ├── KaTeX_Main-Italic.8916142b.woff2 │ │ │ │ ├── KaTeX_Main-Italic.9024d815.woff │ │ │ │ ├── KaTeX_Main-Regular.0462f03b.woff2 │ │ │ │ ├── KaTeX_Main-Regular.7f51fe03.woff │ │ │ │ ├── KaTeX_Main-Regular.b7f8fe9b.ttf │ │ │ │ ├── KaTeX_Math-BoldItalic.572d331f.woff2 │ │ │ │ ├── KaTeX_Math-BoldItalic.a879cf83.ttf │ │ │ │ ├── KaTeX_Math-BoldItalic.f1035d8d.woff │ │ │ │ ├── KaTeX_Math-Italic.5295ba48.woff │ │ │ │ ├── KaTeX_Math-Italic.939bc644.ttf │ │ │ │ ├── KaTeX_Math-Italic.f28c23ac.woff2 │ │ │ │ ├── KaTeX_SansSerif-Bold.8c5b5494.woff2 │ │ │ │ ├── KaTeX_SansSerif-Bold.94e1e8dc.ttf │ │ │ │ ├── KaTeX_SansSerif-Bold.bf59d231.woff │ │ │ │ ├── KaTeX_SansSerif-Italic.3b1e59b3.woff2 │ │ │ │ ├── KaTeX_SansSerif-Italic.7c9bc82b.woff │ │ │ │ ├── KaTeX_SansSerif-Italic.b4c20c84.ttf │ │ │ │ ├── KaTeX_SansSerif-Regular.74048478.woff │ │ │ │ ├── KaTeX_SansSerif-Regular.ba21ed5f.woff2 │ │ │ │ ├── KaTeX_SansSerif-Regular.d4d7ba48.ttf │ │ │ │ ├── KaTeX_Script-Regular.03e9641d.woff2 │ │ │ │ ├── KaTeX_Script-Regular.07505710.woff │ │ │ │ ├── KaTeX_Script-Regular.fe9cbbe1.ttf │ │ │ │ ├── KaTeX_Size1-Regular.e1e279cb.woff │ │ │ │ ├── KaTeX_Size1-Regular.eae34984.woff2 │ │ │ │ ├── KaTeX_Size1-Regular.fabc004a.ttf │ │ │ │ ├── KaTeX_Size2-Regular.57727022.woff │ │ │ │ ├── KaTeX_Size2-Regular.5916a24f.woff2 │ │ │ │ ├── KaTeX_Size2-Regular.d6b476ec.ttf │ │ │ │ ├── KaTeX_Size3-Regular.9acaf01c.woff │ │ │ │ ├── KaTeX_Size3-Regular.a144ef58.ttf │ │ │ │ ├── KaTeX_Size3-Regular.b4230e7e.woff2 │ │ │ │ ├── KaTeX_Size4-Regular.10d95fd3.woff2 │ │ │ │ ├── KaTeX_Size4-Regular.7a996c9d.woff │ │ │ │ ├── KaTeX_Size4-Regular.fbccdabe.ttf │ │ │ │ ├── KaTeX_Typewriter-Regular.6258592b.woff │ │ │ │ ├── KaTeX_Typewriter-Regular.a8709e36.woff2 │ │ │ │ └── KaTeX_Typewriter-Regular.d97aaf4a.ttf │ │ │ │ └── pQlBTOQ6TjA3dnZUi80-J │ │ │ │ ├── _buildManifest.js │ │ │ │ └── _ssgManifest.js │ │ ├── favicon.ico │ │ ├── index.html │ │ └── vercel.svg │ ├── package.json │ ├── pages │ │ ├── _app.tsx │ │ └── index.tsx │ ├── postcss.config.js │ ├── public │ │ ├── favicon.ico │ │ └── vercel.svg │ ├── styles │ │ ├── globals.css │ │ └── green-screen.css │ ├── tailwind.config.js │ └── tsconfig.json ├── st_hack.py ├── st_hack_v1.py └── st_hack_v2.py └── test.sh /.gitignore: -------------------------------------------------------------------------------- 1 | # Byte-compiled / optimized / DLL files 2 | __pycache__/ 3 | *.py[cod] 4 | *$py.class 5 | 6 | # C extensions 7 | *.so 8 | 9 | # Distribution / packaging 10 | .Python 11 | build/ 12 | develop-eggs/ 13 | dist/ 14 | downloads/ 15 | eggs/ 16 | .eggs/ 17 | lib/ 18 | lib64/ 19 | parts/ 20 | sdist/ 21 | var/ 22 | wheels/ 23 | share/python-wheels/ 24 | *.egg-info/ 25 | .installed.cfg 26 | *.egg 27 | MANIFEST 28 | 29 | # PyInstaller 30 | # Usually these files are written by a python script from a template 31 | # before PyInstaller builds the exe, so as to inject date/other infos into it. 32 | *.manifest 33 | *.spec 34 | 35 | # Installer logs 36 | pip-log.txt 37 | pip-delete-this-directory.txt 38 | 39 | # Unit test / coverage reports 40 | htmlcov/ 41 | .tox/ 42 | .nox/ 43 | .coverage 44 | .coverage.* 45 | .cache 46 | nosetests.xml 47 | coverage.xml 48 | *.cover 49 | *.py,cover 50 | .hypothesis/ 51 | .pytest_cache/ 52 | cover/ 53 | 54 | # Translations 55 | *.mo 56 | *.pot 57 | 58 | # Django stuff: 59 | *.log 60 | local_settings.py 61 | db.sqlite3 62 | db.sqlite3-journal 63 | 64 | # Flask stuff: 65 | instance/ 66 | .webassets-cache 67 | 68 | # Scrapy stuff: 69 | .scrapy 70 | 71 | # Sphinx documentation 72 | docs/_build/ 73 | 74 | # PyBuilder 75 | .pybuilder/ 76 | target/ 77 | 78 | # Jupyter Notebook 79 | .ipynb_checkpoints 80 | 81 | # IPython 82 | profile_default/ 83 | ipython_config.py 84 | 85 | # pyenv 86 | # For a library or package, you might want to ignore these files since the code is 87 | # intended to run in multiple environments; otherwise, check them in: 88 | # .python-version 89 | 90 | # pipenv 91 | # According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control. 92 | # However, in case of collaboration, if having platform-specific dependencies or dependencies 93 | # having no cross-platform support, pipenv may install dependencies that don't work, or not 94 | # install all needed dependencies. 95 | #Pipfile.lock 96 | 97 | # poetry 98 | # Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control. 99 | # This is especially recommended for binary packages to ensure reproducibility, and is more 100 | # commonly ignored for libraries. 101 | # https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control 102 | #poetry.lock 103 | 104 | # pdm 105 | # Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control. 106 | #pdm.lock 107 | # pdm stores project-wide configurations in .pdm.toml, but it is recommended to not include it 108 | # in version control. 109 | # https://pdm.fming.dev/#use-with-ide 110 | .pdm.toml 111 | 112 | # PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm 113 | __pypackages__/ 114 | 115 | # Celery stuff 116 | celerybeat-schedule 117 | celerybeat.pid 118 | 119 | # SageMath parsed files 120 | *.sage.py 121 | 122 | # Environments 123 | .env 124 | .venv 125 | env/ 126 | venv/ 127 | ENV/ 128 | env.bak/ 129 | venv.bak/ 130 | 131 | # Spyder project settings 132 | .spyderproject 133 | .spyproject 134 | 135 | # Rope project settings 136 | .ropeproject 137 | 138 | # mkdocs documentation 139 | /site 140 | 141 | # mypy 142 | .mypy_cache/ 143 | .dmypy.json 144 | dmypy.json 145 | 146 | # Pyre type checker 147 | .pyre/ 148 | 149 | # pytype static type analyzer 150 | .pytype/ 151 | 152 | # Cython debug symbols 153 | cython_debug/ 154 | 155 | # PyCharm 156 | # JetBrains specific template is maintained in a separate JetBrains.gitignore that can 157 | # be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore 158 | # and can be added to the global gitignore or merged into this file. For a more nuclear 159 | # option (not recommended) you can uncomment the following to ignore the entire idea folder. 160 | #.idea/ 161 | 162 | yarn.lock 163 | **/.DS_Store 164 | .DS_Store 165 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "[markdown]": { 3 | "editor.cursorSurroundingLines": 0 4 | } 5 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 兮尘 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /MANIFEST.in: -------------------------------------------------------------------------------- 1 | recursive-include streamlit_markdown/frontend/out * -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # streamlit-markdown 2 | 3 | react-markdown with streaming support for streamlit webapp. 4 | 5 | ![](./docs/streamlit-markdown.gif) 6 | 7 | - [x] streaming rendering of markdown text 8 | - [x] support for latex math, mermaid diagrams, code highlighting 9 | - [x] support for tables, images, links 10 | 11 | > Have a try at https://streaming-markdown.streamlit.app/ 12 | 13 | ![](./docs/screenshot.png) 14 | 15 | ## Installation 16 | 17 | ```bash 18 | pip install streamlit-markdown 19 | ``` 20 | 21 | ## Usage 22 | 23 | static content: 24 | 25 | ```python 26 | from streamlit_markdown import st_markdown 27 | 28 | markdown_text = "$ y = f(x)$" 29 | st_markdown(markdown_text) 30 | ``` 31 | 32 | streaming content: 33 | 34 | ```python 35 | from streamlit_markdown import st_streaming_markdown 36 | 37 | markdown_text = "$ y = f(x)$" 38 | def token_stream(): 39 | for token in markdown_text: 40 | yield token 41 | st_streaming_markdown(token_stream, key="token_stream") # key must be set to prevent re-rendering 42 | ``` 43 | 44 | combined streaming content: 45 | 46 | ```python 47 | from streamlit_markdown import st_streaming_markdown 48 | 49 | markdown_text = "$ y = f(x)$" 50 | def token_stream(): 51 | import random 52 | for token in markdown_text: 53 | if random.rand() > 0.5: 54 | yield token 55 | else: 56 | def callable_token(): 57 | return token 58 | yield callable_token 59 | st_streaming_markdown(token_stream, key="token_stream") # key must be set to prevent re-rendering 60 | ``` 61 | 62 | run example: 63 | 64 | ```bash 65 | streamlit run example.py 66 | ``` 67 | 68 | ![img.png](./docs/a.png) 69 | ![img.png](./docs/b.png) 70 | 71 | ## Advanced Usage 72 | 73 | There are 3 ways for Style Customization! 74 | 75 | ### Select another theme_color 76 | 77 | ``` 78 | GLOBAL_THEME_COLOR = Literal["blue", "orange", "green", "red", "purple", "pink", "indigo", "yellow", "teal", "cyan", "gray", "slate", "dark", "light", "null", "custom"] 79 | MERMAID_THEME = Literal["default", "forest", "dark", "neutral", "base"] 80 | ``` 81 | 82 | I have annotated the type. You should be able to see a type hint if you are using `vscode+pylance`: 83 | 84 | ![](./docs/vscode_type_hint.png) 85 | 86 | 87 | ### Let theme_color == "custom" and specific custom_color 88 | 89 | In this way, you can control the color of border and text separately. 90 | 91 | The value follows the color naming of Tailwind CSS. 92 | 93 | ```python 94 | custom_color = { 95 | "bg": "bg-gray-100", 96 | "border": "border-gray-300", 97 | "text": "text-green-900", 98 | "hover_bg": "hover:bg-gray-200", 99 | "hover_text": "hover:text-gray-900", 100 | } 101 | final_content = st_markdown( 102 | content, 103 | theme_color="custom", 104 | mermaid_theme=mermaid_theme, 105 | mermaid_theme_CSS=None, 106 | custom_color=custom_color, 107 | custom_css=None, 108 | key="content", 109 | ) 110 | ``` 111 | 112 | ### Specific custom_css 113 | 114 | By this way, the value of custom_css dict should be empty string (at least, not None). 115 | If the value is empty string, it will be ignored and theme_color system will be used when rendering the type of markdown block html. 116 | Otherwise, the custom css value will replace all the class style of the html element. 117 | Use it at your own risk! 118 | 119 | The inner code is like: 120 | 121 | ```jsx 122 | 0 ? custom_css.a_class : classNames( 124 | classNameByTheme(theme_color, ["text", "hover_text"], custom_color), 125 | ) 126 | } /> 127 | ``` 128 | 129 | 130 | ```python 131 | custom_css = { 132 | "a_class": "text-green-900 border-grey-900 hover:text-gray-900", 133 | "h1_class": "", 134 | "h2_class": "", 135 | "h3_class": "", 136 | "h4_class": "", 137 | "h5_class": "", 138 | "h6_class": "", 139 | "p_class": "", 140 | "strong_class": "", 141 | "em_class": "", 142 | "code_class": "", 143 | "code_button_class": "", 144 | "code_latex_class": "", 145 | "code_mermaid_class": "", 146 | "pre_class": "", 147 | "ul_class": "", 148 | "ol_class": "", 149 | "li_class": "", 150 | "table_class": "", 151 | "thead_class": "", 152 | "th_class": "", 153 | "td_class": "", 154 | "blockquote_class": "", 155 | } 156 | final_content = st_markdown( 157 | content, 158 | theme_color="custom", 159 | mermaid_theme=mermaid_theme, 160 | mermaid_theme_CSS=None, 161 | custom_color=None, 162 | custom_css=custom_css, 163 | key="content", 164 | ) 165 | ``` 166 | 167 | 168 | ## Building from source 169 | 170 | ### Prerequisites 171 | 172 | - nodejs >= 18.x 173 | - yarn >= 1.22.x 174 | - poetry >= 1.2.x 175 | - python >= 3.8.x 176 | 177 | ### Building 178 | 179 | ```bash 180 | ./build.sh 181 | ``` 182 | 183 | ### Publishing 184 | 185 | ```bash 186 | poetry publish 187 | ``` 188 | 189 | ## License 190 | 191 | This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details 192 | -------------------------------------------------------------------------------- /build.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | set -e 4 | 5 | # Build Frontend 6 | cd streamlit_markdown/frontend || exit 7 | yarn install 8 | yarn run build 9 | 10 | # Build Python package 11 | cd ../.. 12 | poetry version patch 13 | poetry build 14 | 15 | # Publish to PyPi 16 | # poetry publish 17 | -------------------------------------------------------------------------------- /docs/a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinXueyuanStdio/streamlit-markdown/7c1603c958f9811e87628f63176a790cc2fbc89c/docs/a.png -------------------------------------------------------------------------------- /docs/b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinXueyuanStdio/streamlit-markdown/7c1603c958f9811e87628f63176a790cc2fbc89c/docs/b.png -------------------------------------------------------------------------------- /docs/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinXueyuanStdio/streamlit-markdown/7c1603c958f9811e87628f63176a790cc2fbc89c/docs/screenshot.png -------------------------------------------------------------------------------- /docs/streamlit-markdown.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinXueyuanStdio/streamlit-markdown/7c1603c958f9811e87628f63176a790cc2fbc89c/docs/streamlit-markdown.gif -------------------------------------------------------------------------------- /docs/vscode_type_hint.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinXueyuanStdio/streamlit-markdown/7c1603c958f9811e87628f63176a790cc2fbc89c/docs/vscode_type_hint.png -------------------------------------------------------------------------------- /example.py: -------------------------------------------------------------------------------- 1 | import streamlit as st 2 | from streamlit_markdown import ( 3 | st_markdown, 4 | st_streaming_markdown, 5 | simulated_token_stream, 6 | TEST_MARKDOWN_TEXT, 7 | ) 8 | 9 | st.set_page_config( 10 | layout="wide", 11 | page_title="streamlit-markdown", 12 | ) 13 | st.title("streamlit-markdown") 14 | 15 | left, right = st.columns(2) 16 | with left: 17 | streaming = st.radio( 18 | "Streaming", 19 | [ 20 | "static content", 21 | "streaming content", 22 | "streaming from server (built with FastAPI)", 23 | ], 24 | index=0, 25 | ) 26 | richContent = st.checkbox("Rich Content", True) 27 | theme_color = st.selectbox("Theme Color", ["green", "blue", "orange", "red" , "purple" , "pink" , "indigo" , "yellow" , "teal" , "cyan" , "gray" , "slate" , "dark" , "light" , "null", "custom"]) 28 | mermaid_theme = st.selectbox("Mermaid Theme", ["default", "forest", "dark", "neutral", "null"]) 29 | mermaid_theme_CSS = st.text_area("Mermaid Theme CSS", height=120) 30 | if theme_color == "custom": 31 | custom_color = { 32 | "bg": st.text_input("Background Color", "bg-gray-100"), 33 | "border": st.text_input("Border Color", "border-gray-300"), 34 | "text": st.text_input("Text Color", "text-gray-900"), 35 | "hover:bg": st.text_input("Hover Background Color", "hover:bg-gray-200"), 36 | "hover:text": st.text_input("Hover Text Color", "hover:text-gray-900"), 37 | } 38 | else: 39 | custom_color = { 40 | "bg": "bg-gray-100", 41 | "border": "border-gray-300", 42 | "text": "text-gray-900", 43 | "hover:bg": "hover:bg-gray-200", 44 | "hover:text": "hover:text-gray-900", 45 | } 46 | with st.expander("Custom CSS"): 47 | st.warning("Leave empty to use theme_color system. If not empty, theme_color will be ignored and the customized css will replace **ALL** classNames.") 48 | custom_css = { 49 | "a_class": st.text_input("a class", ""), 50 | "h1_class": st.text_input("h1 class", ""), 51 | "h2_class": st.text_input("h2 class", ""), 52 | "h3_class": st.text_input("h3 class", ""), 53 | "h4_class": st.text_input("h4 class", ""), 54 | "h5_class": st.text_input("h5 class", ""), 55 | "h6_class": st.text_input("h6 class", ""), 56 | "p_class": st.text_input("p class", ""), 57 | "strong_class": st.text_input("strong class", ""), 58 | "em_class": st.text_input("em class", ""), 59 | "code_class": st.text_input("code class", ""), 60 | "code_button_class": st.text_input("code_button class", ""), 61 | "code_latex_class": st.text_input("code_latex class", ""), 62 | "code_mermaid_class": st.text_input("code_mermaid class", ""), 63 | "pre_class": st.text_input("pre class", ""), 64 | "ul_class": st.text_input("ul class", ""), 65 | "ol_class": st.text_input("ol class", ""), 66 | "li_class": st.text_input("li class", ""), 67 | "table_class": st.text_input("table class", ""), 68 | "thead_class": st.text_input("thead class", ""), 69 | "th_class": st.text_input("th class", ""), 70 | "td_class": st.text_input("td class", ""), 71 | "blockquote_class": st.text_input("blockquote class", ""), 72 | } 73 | 74 | content = st.text_area("Markdown", TEST_MARKDOWN_TEXT, height=480) 75 | with right: 76 | if streaming == "streaming from server (built with FastAPI)": 77 | def remote_token_stream(): 78 | import requests 79 | response = requests.get( 80 | "http://localhost:8000/simulated_token_stream", 81 | params={"text": content}, 82 | headers={"accept": "application/json"}, 83 | stream=True, 84 | ) 85 | for chunk in response.iter_content(chunk_size=1024): 86 | if chunk: 87 | token = str(chunk, encoding="utf-8") 88 | yield token 89 | final_content = st_streaming_markdown( 90 | remote_token_stream(), 91 | richContent=richContent, 92 | theme_color=theme_color, 93 | mermaid_theme=mermaid_theme, 94 | mermaid_theme_CSS=mermaid_theme_CSS, 95 | custom_color=custom_color, 96 | custom_css=custom_css, 97 | key="streaming_from_server", 98 | ) 99 | if streaming == "streaming content": 100 | token_stream = simulated_token_stream(content) 101 | final_content = st_streaming_markdown( 102 | token_stream, 103 | richContent=richContent, 104 | theme_color=theme_color, 105 | mermaid_theme=mermaid_theme, 106 | mermaid_theme_CSS=mermaid_theme_CSS, 107 | custom_color=custom_color, 108 | custom_css=custom_css, 109 | key="streaming_content", 110 | ) 111 | else: 112 | final_content = st_markdown( 113 | content, 114 | richContent=richContent, 115 | theme_color=theme_color, 116 | mermaid_theme=mermaid_theme, 117 | mermaid_theme_CSS=mermaid_theme_CSS, 118 | custom_color=custom_color, 119 | custom_css=custom_css, 120 | key="content", 121 | ) 122 | 123 | if final_content: 124 | st.balloons() 125 | -------------------------------------------------------------------------------- /pyproject.toml: -------------------------------------------------------------------------------- 1 | [tool.poetry] 2 | name = "streamlit-markdown" 3 | version = "1.1.3" 4 | homepage = "https://github.com/LinXueyuanStdio/streamlit-markdown" 5 | description = "A Streamlit component to display markdown, which supports table, code switch, LaTeX, mermaid, and more." 6 | authors = ["Xueyuan Lin "] 7 | readme = "README.md" 8 | packages = [{ include = "streamlit_markdown"}] 9 | 10 | license = "MIT" 11 | 12 | # Only include the out directory of the frontend 13 | # The order of the include/exclude lists is important! 14 | include = ["streamlit_markdown/frontend/out/**", "docs/**"] 15 | exclude = ["streamlit_markdown/frontend/*"] 16 | 17 | [tool.poetry.dependencies] 18 | python = ">=3.8,<3.9.7 || >3.9.7,<4.0" 19 | streamlit = ">=0.63" 20 | 21 | [tool.poetry.group.dev.dependencies] 22 | watchdog = "^3.0.0" 23 | 24 | [build-system] 25 | requires = ["poetry-core"] 26 | build-backend = "poetry.core.masonry.api" 27 | 28 | -------------------------------------------------------------------------------- /requirements.txt: -------------------------------------------------------------------------------- 1 | streamlit 2 | streamlit-markdown 3 | -------------------------------------------------------------------------------- /server.py: -------------------------------------------------------------------------------- 1 | import json 2 | import random 3 | import time 4 | from fastapi import FastAPI 5 | from fastapi.responses import StreamingResponse 6 | from transformers import AutoTokenizer, TextIteratorStreamer 7 | from threading import Thread 8 | 9 | app = FastAPI() 10 | 11 | 12 | def simulated_token_stream(content): 13 | import random 14 | 15 | length = 0 16 | while length < len(content): 17 | n_chars = random.randint(5, 15) 18 | yield content[length : length + n_chars] 19 | length += n_chars 20 | time.sleep(0.05) 21 | 22 | 23 | @app.get("/simulated_token_stream") 24 | async def main(text): 25 | return StreamingResponse(simulated_token_stream(text)) 26 | 27 | # from transformers import AutoModel 28 | # tokenizer = AutoTokenizer.from_pretrained("openai-community/gpt2") 29 | # model = AutoModel.from_pretrained("openai-community/gpt2") 30 | # async def generate(instruction): 31 | # inputs = tokenizer([instruction], return_tensors="pt") 32 | # streamer = TextIteratorStreamer(tokenizer) 33 | # generation_kwargs = dict(inputs, streamer=streamer, max_new_tokens=20) 34 | # thread = Thread(target=model.generate, kwargs=generation_kwargs) 35 | # thread.start() 36 | # for new_text in streamer: 37 | # yield new_text 38 | # 39 | # @app.get("/simulated_with_local_model") 40 | # async def simulated_with_local_model(instruction): 41 | # return StreamingResponse(generate(instruction)) 42 | 43 | 44 | def fake_generation(inputs, streamer: TextIteratorStreamer): 45 | ids = inputs.input_ids[0] 46 | length = 0 47 | while length < len(ids): 48 | token_id = ids[length: length + random.randint(5, 20)] 49 | length += len(token_id) 50 | streamer.put(token_id) 51 | time.sleep(0.3) 52 | streamer.end() 53 | 54 | 55 | async def generate_fake_markdown(text): 56 | tokenizer = AutoTokenizer.from_pretrained("openai-community/gpt2") 57 | inputs = tokenizer([text], return_tensors="pt") 58 | streamer = TextIteratorStreamer(tokenizer) 59 | generation_kwargs = dict(inputs=inputs, streamer=streamer) 60 | thread = Thread(target=fake_generation, kwargs=generation_kwargs) 61 | thread.start() 62 | for new_text in streamer: 63 | yield new_text 64 | 65 | 66 | @app.get("/simulated_with_tokenizer") 67 | async def simulated_with_tokenizer(text: str): 68 | return StreamingResponse(generate_fake_markdown(text)) 69 | 70 | 71 | if __name__ == "__main__": 72 | import uvicorn 73 | 74 | # usage: 75 | # curl -N localhost:8000 76 | uvicorn.run(app, host="0.0.0.0", port=8000) 77 | -------------------------------------------------------------------------------- /streamlit_markdown/__init__.py: -------------------------------------------------------------------------------- 1 | import os 2 | import inspect 3 | import time 4 | from typing import Literal, Any, Callable, Generator, Literal, Optional, Union, TypedDict 5 | 6 | import streamlit as st 7 | from streamlit import _main 8 | from streamlit_markdown.st_hack import st_hack_component 9 | 10 | import streamlit.components.v1 as components 11 | 12 | try: 13 | from typing import Literal 14 | except ImportError: 15 | from typing_extensions import Literal 16 | 17 | _RELEASE = True 18 | COMPONENT_NAME = "streamlit_markdown" 19 | 20 | # use the build instead of development if release is true 21 | if _RELEASE: 22 | root_dir = os.path.dirname(os.path.abspath(__file__)) 23 | build_dir = os.path.join(root_dir, "frontend/out") 24 | 25 | _markdown = components.declare_component(COMPONENT_NAME, path=build_dir) 26 | else: 27 | _markdown = components.declare_component( 28 | COMPONENT_NAME, 29 | url="http://localhost:35335", 30 | ) 31 | 32 | GLOBAL_THEME_COLOR = Literal["blue", "orange", "green", "red", "purple", "pink", "indigo", "yellow", "teal", "cyan", "gray", "slate", "dark", "light", "null", "custom"] 33 | MERMAID_THEME = Literal["default", "forest", "dark", "neutral", "base"] 34 | class CUSTOM_COLOR(TypedDict): 35 | bg: str = "" 36 | border: str = "" 37 | text: str = "" 38 | hover_bg: str = "" 39 | hover_text: str = "" 40 | class CUSTOM_CSS(TypedDict): 41 | a_class: str = "" 42 | h1_class: str = "" 43 | h2_class: str = "" 44 | h3_class: str = "" 45 | h4_class: str = "" 46 | h5_class: str = "" 47 | h6_class: str = "" 48 | p_class: str = "" 49 | strong_class: str = "" 50 | em_class: str = "" 51 | code_class: str = "" 52 | code_button_class: str = "" 53 | code_latex_class: str = "" 54 | code_mermaid_class: str = "" 55 | pre_class: str = "" 56 | ul_class: str = "" 57 | ol_class: str = "" 58 | li_class: str = "" 59 | table_class: str = "" 60 | thead_class: str = "" 61 | th_class: str = "" 62 | td_class: str = "" 63 | blockquote_class: str = "" 64 | 65 | def st_markdown( 66 | content: str, 67 | richContent: bool = True, 68 | theme_color: GLOBAL_THEME_COLOR = "green", 69 | mermaid_theme: MERMAID_THEME = "forest", 70 | mermaid_theme_CSS: Optional[str] = None, 71 | custom_color: Optional[CUSTOM_COLOR] = None, 72 | custom_css: Optional[CUSTOM_CSS] = None, 73 | key=None, 74 | default: Any = None, 75 | **kwargs, 76 | ): 77 | """ 78 | Creates a new instance of streamlit-markdown component 79 | 80 | Parameters 81 | ---------- 82 | content: str 83 | The markdown content to be displayed 84 | richContent: bool 85 | Whether to display rich content 86 | theme_color: GLOBAL_THEME_COLOR 87 | The background color of the component 88 | mermaid_theme: MERMAID_THEME 89 | The theme of the mermaid diagram 90 | mermaid_theme_CSS: Optional[str] 91 | The CSS string to style the mermaid diagram. If set, mermaid_theme will be ignored 92 | custom_color: Optional[dict] 93 | Custom color for the component 94 | custom_css: Optional[dict] 95 | Custom CSS for the component 96 | key: Optional[str] 97 | An optional key that makes the component unique 98 | 99 | Returns: current text that already rendered to markdown 100 | """ 101 | if not mermaid_theme_CSS: 102 | mermaid_theme_CSS = "" 103 | if not custom_color: 104 | custom_color = { 105 | "bg": "bg-gray-100", 106 | "border": "border-gray-300", 107 | "text": "text-green-900", 108 | "hover_bg": "hover:bg-gray-200", 109 | "hover_text": "hover:text-gray-900", 110 | } 111 | if not custom_css: 112 | custom_css = { 113 | "a_class": "", 114 | "h1_class": "", 115 | "h2_class": "", 116 | "h3_class": "", 117 | "h4_class": "", 118 | "h5_class": "", 119 | "h6_class": "", 120 | "p_class": "", 121 | "strong_class": "", 122 | "em_class": "", 123 | "code_class": "", 124 | "code_button_class": "", 125 | "code_latex_class": "", 126 | "code_mermaid_class": "", 127 | "pre_class": "", 128 | "ul_class": "", 129 | "ol_class": "", 130 | "li_class": "", 131 | "table_class": "", 132 | "thead_class": "", 133 | "th_class": "", 134 | "td_class": "", 135 | "blockquote_class": "", 136 | } 137 | return _markdown( 138 | theme_color=theme_color, 139 | content=content, 140 | richContent=richContent, 141 | mermaid_theme=mermaid_theme, 142 | mermaid_theme_CSS=mermaid_theme_CSS, 143 | custom_color=custom_color, 144 | custom_css=custom_css, 145 | key=key, 146 | default=default, 147 | **kwargs, 148 | ) 149 | 150 | 151 | def st_hack_markdown( 152 | content: str, 153 | richContent: bool = True, 154 | theme_color: GLOBAL_THEME_COLOR = "green", 155 | mermaid_theme: MERMAID_THEME = "forest", 156 | mermaid_theme_CSS: Optional[str] = None, 157 | custom_color: Optional[CUSTOM_COLOR] = None, 158 | custom_css: Optional[CUSTOM_CSS] = None, 159 | key=None, 160 | default: Any = None, 161 | **kwargs, 162 | ): 163 | """hack streamlt to prevent re-rendering or throw DuplicateWidgetID 164 | 165 | Args and Returns: 166 | same as st_markdown 167 | """ 168 | 169 | if not mermaid_theme_CSS: 170 | mermaid_theme_CSS = "" 171 | if not custom_color: 172 | custom_color = { 173 | "bg": "bg-gray-100", 174 | "border": "border-gray-300", 175 | "text": "text-gray-900", 176 | "hover_bg": "hover:bg-gray-200", 177 | "hover_text": "hover:text-gray-900", 178 | } 179 | if not custom_css: 180 | custom_css = { 181 | "a_class": "", 182 | "h1_class": "", 183 | "h2_class": "", 184 | "h3_class": "", 185 | "h4_class": "", 186 | "h5_class": "", 187 | "h6_class": "", 188 | "p_class": "", 189 | "strong_class": "", 190 | "em_class": "", 191 | "code_class": "", 192 | "code_button_class": "", 193 | "code_latex_class": "", 194 | "code_mermaid_class": "", 195 | "pre_class": "", 196 | "ul_class": "", 197 | "ol_class": "", 198 | "li_class": "", 199 | "table_class": "", 200 | "thead_class": "", 201 | "th_class": "", 202 | "td_class": "", 203 | "blockquote_class": "", 204 | } 205 | kwargs["content"] = content 206 | kwargs["richContent"] = richContent 207 | kwargs["theme_color"] = theme_color 208 | kwargs["mermaid_theme"] = mermaid_theme 209 | kwargs["mermaid_theme_CSS"] = mermaid_theme_CSS 210 | kwargs["custom_color"] = custom_color 211 | kwargs["custom_css"] = custom_css 212 | return st_hack_component(_main, _markdown, key, default, **kwargs) 213 | 214 | 215 | def st_streaming_markdown( 216 | token_stream: Union[Generator[str, str, str], Callable[[], str], str], 217 | richContent: bool = True, 218 | theme_color: GLOBAL_THEME_COLOR = "green", 219 | mermaid_theme: MERMAID_THEME = "forest", 220 | mermaid_theme_CSS: Optional[str] = None, 221 | custom_color: Optional[CUSTOM_COLOR] = None, 222 | custom_css: Optional[CUSTOM_CSS] = None, 223 | key=None, 224 | default: Any = None, 225 | **kwargs, 226 | ): 227 | assert key is not None, "key must be provided to prevent re-rendering" 228 | placeholder = st.empty() 229 | # Order matters! 230 | if callable(token_stream): 231 | token_stream = token_stream() 232 | if isinstance(token_stream, str): 233 | placeholder.empty() 234 | with placeholder.container(): 235 | st_hack_markdown( 236 | token_stream, 237 | richContent, 238 | theme_color, 239 | mermaid_theme, 240 | mermaid_theme_CSS, 241 | custom_color, 242 | custom_css, 243 | key=key, 244 | default=default, 245 | **kwargs, 246 | ) 247 | return token_stream 248 | elif inspect.isgenerator(token_stream): 249 | content = "" 250 | for token in token_stream: 251 | if isinstance(token, str): 252 | content += token 253 | elif callable(token): 254 | content += token() 255 | else: 256 | raise TypeError( 257 | f"token must be str or callable[() -> str], not {type(token)}" 258 | ) 259 | placeholder.empty() 260 | with placeholder.container(): 261 | st_hack_markdown( 262 | content, 263 | richContent, 264 | theme_color, 265 | mermaid_theme, 266 | mermaid_theme_CSS, 267 | custom_color, 268 | custom_css, 269 | key=key, 270 | default=default, 271 | **kwargs, 272 | ) 273 | return content 274 | else: 275 | raise TypeError( 276 | f"token_stream must be generator or callable, not {type(token_stream)}" 277 | ) 278 | 279 | 280 | def simulated_token_stream(content): 281 | import random 282 | 283 | length = 0 284 | while length < len(content): 285 | n_chars = random.randint(5, 15) 286 | yield content[length : length + n_chars] 287 | length += n_chars 288 | time.sleep(0.05) 289 | 290 | 291 | TEST_MARKDOWN_TEXT = """\ 292 | This is a table: 293 | 294 | | Title | Description | 295 | |-----------|-------------| 296 | | text | hello world | 297 | | math | $y=f(x)$ | 298 | | bold | **bold** | 299 | | italics | _italics_ | 300 | | herf | [anchor](https://github.com) | 301 | 302 | 1. **Bold**: One 303 | - One, and latex $y=f(x)$ 304 | - Two, and **bold** 305 | 2. **Bold**: Two 306 | - [ ] This is a task list. 307 | - [x] This is a checked task list. 308 | 309 | > This is a blockquote. 310 | 311 | This is inline latex $y=f(x)$ and below is a latex block: 312 | 313 | $$y=f(x)$$ 314 | 315 | This is `inline` code and below is a code block: 316 | 317 | ```tsx 318 | const Message = () => { 319 | return
hi
; 320 | }; 321 | ``` 322 | 323 | This is a mermaid diagram in a code block: 324 | 325 | ```mermaid 326 | flowchart TD 327 | A[Christmas] -->|Get money| B(Go shopping) 328 | B --> C{Let me think} 329 | C -->|One| D[Laptop] 330 | C -->|Two| E[iPhone] 331 | C -->|Three| F[fa:fa-car Car] 332 | ``` 333 | """ 334 | -------------------------------------------------------------------------------- /streamlit_markdown/frontend/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /streamlit_markdown/frontend/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | 14 | # production 15 | /build 16 | 17 | # misc 18 | .DS_Store 19 | *.pem 20 | 21 | # debug 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | .pnpm-debug.log* 26 | 27 | # local env files 28 | .env*.local 29 | 30 | # vercel 31 | .vercel 32 | 33 | # typescript 34 | *.tsbuildinfo 35 | next-env.d.ts 36 | 37 | # IDE 38 | .idea/ -------------------------------------------------------------------------------- /streamlit_markdown/frontend/README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | ``` 12 | 13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 14 | 15 | You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file. 16 | 17 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`. 18 | 19 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. 20 | 21 | ## Learn More 22 | 23 | To learn more about Next.js, take a look at the following resources: 24 | 25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 27 | 28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 29 | 30 | ## Deploy on Vercel 31 | 32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 33 | 34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 35 | -------------------------------------------------------------------------------- /streamlit_markdown/frontend/components/markdown-content.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { classNames } from "@/libs/class-names"; 3 | import { useMarkdownProcessor, ThemeColor, MermaidTheme, CustomColor, CustomCSS, classNameByTheme } from "@/hooks/use-markdown-processor"; 4 | 5 | interface MarkdownContentProps { 6 | theme_color?: ThemeColor; 7 | content?: string; 8 | richContent?: boolean; 9 | mermaid_theme?: MermaidTheme; 10 | mermaid_theme_CSS?: string; 11 | custom_color: CustomColor; 12 | custom_css: CustomCSS; 13 | } 14 | 15 | function MarkdownContent({ 16 | theme_color = "green", 17 | content = "", 18 | richContent = true, 19 | mermaid_theme = "forest", 20 | mermaid_theme_CSS = "", 21 | custom_color = {} as CustomColor, 22 | custom_css = {} as CustomCSS, 23 | }: MarkdownContentProps): JSX.Element { 24 | console.log("content", content); 25 | console.log("theme_color", theme_color); 26 | console.log("mermaid_theme", mermaid_theme); 27 | console.log("mermaid_theme_CSS", mermaid_theme_CSS); 28 | console.log("custom_color", custom_color); 29 | console.log("custom_css", custom_css); 30 | const markdown_content = useMarkdownProcessor(content, theme_color, mermaid_theme, mermaid_theme_CSS, custom_color, custom_css); 31 | 32 | return ( 33 |
*:first-child]:mt-0 [&>*:last-child]:mb-0", 37 | theme_color == "null" ? "" : "border-2 border", 38 | classNameByTheme(theme_color, ["bg", "border", "text"]) 39 | )} 40 | > 41 | {richContent ? markdown_content : ( 42 |
{content}
43 | )} 44 |
45 | ); 46 | } 47 | 48 | export default MarkdownContent; 49 | -------------------------------------------------------------------------------- /streamlit_markdown/frontend/components/streamlit-markdown.tsx: -------------------------------------------------------------------------------- 1 | import { useRenderData } from "streamlit-component-lib-react-hooks"; 2 | import React from 'react'; 3 | import MarkdownContent from '@/components/markdown-content'; 4 | 5 | function StreamlitMarkdown() { 6 | const { theme, disabled, args } = useRenderData(); 7 | 8 | return ( 9 |
10 | 19 |
20 | ); 21 | } 22 | 23 | export default StreamlitMarkdown; 24 | -------------------------------------------------------------------------------- /streamlit_markdown/frontend/libs/class-names.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Helper function to generate class names 3 | */ 4 | export function classNames( 5 | ...classes: (false | null | undefined | string)[] 6 | ): string { 7 | return classes.filter(Boolean).join(" "); 8 | } 9 | -------------------------------------------------------------------------------- /streamlit_markdown/frontend/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | output: "export", 4 | basePath: "/component/streamlit_markdown.streamlit_markdown", 5 | reactStrictMode: true, 6 | swcMinify: true, 7 | images: { 8 | unoptimized: true, 9 | }, 10 | transpilePackages: [ 11 | "streamlit-component-lib-react-hooks", 12 | "streamlit-component-lib", 13 | ], 14 | }; 15 | 16 | module.exports = nextConfig; 17 | -------------------------------------------------------------------------------- /streamlit_markdown/frontend/out/404.html: -------------------------------------------------------------------------------- 1 | 404: This page could not be found

404

This page could not be found.

-------------------------------------------------------------------------------- /streamlit_markdown/frontend/out/_next/static/chunks/128.4d9231bbd09e3c13.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[128],{2128:function(t,e,i){i.d(e,{diagram:function(){return p}});var s=i(1835),n=i(4218);i(7484),i(7967),i(7856);var r=function(){var t=function(t,e,i,s){for(i=i||{},s=t.length;s--;i[t[s]]=e);return i},e=[1,3],i=[1,4],s=[1,5],n=[1,6],r=[1,10,12,14,16,18,19,20,21,22],l=[2,4],a=[1,5,10,12,14,16,18,19,20,21,22],c=[20,21,22],o=[2,7],h=[1,12],u=[1,13],y=[1,14],p=[1,15],g=[1,16],d=[1,17],_={trace:function(){},yy:{},symbols_:{error:2,start:3,eol:4,PIE:5,document:6,showData:7,line:8,statement:9,txt:10,value:11,title:12,title_value:13,acc_title:14,acc_title_value:15,acc_descr:16,acc_descr_value:17,acc_descr_multiline_value:18,section:19,NEWLINE:20,";":21,EOF:22,$accept:0,$end:1},terminals_:{2:"error",5:"PIE",7:"showData",10:"txt",11:"value",12:"title",13:"title_value",14:"acc_title",15:"acc_title_value",16:"acc_descr",17:"acc_descr_value",18:"acc_descr_multiline_value",19:"section",20:"NEWLINE",21:";",22:"EOF"},productions_:[0,[3,2],[3,2],[3,3],[6,0],[6,2],[8,2],[9,0],[9,2],[9,2],[9,2],[9,2],[9,1],[9,1],[4,1],[4,1],[4,1]],performAction:function(t,e,i,s,n,r,l){var a=r.length-1;switch(n){case 3:s.setShowData(!0);break;case 6:this.$=r[a-1];break;case 8:s.addSection(r[a-1],s.cleanupValue(r[a]));break;case 9:this.$=r[a].trim(),s.setDiagramTitle(this.$);break;case 10:this.$=r[a].trim(),s.setAccTitle(this.$);break;case 11:case 12:this.$=r[a].trim(),s.setAccDescription(this.$);break;case 13:s.addSection(r[a].substr(8)),this.$=r[a].substr(8)}},table:[{3:1,4:2,5:e,20:i,21:s,22:n},{1:[3]},{3:7,4:2,5:e,20:i,21:s,22:n},t(r,l,{6:8,7:[1,9]}),t(a,[2,14]),t(a,[2,15]),t(a,[2,16]),{1:[2,1]},t(c,o,{8:10,9:11,1:[2,2],10:h,12:u,14:y,16:p,18:g,19:d}),t(r,l,{6:18}),t(r,[2,5]),{4:19,20:i,21:s,22:n},{11:[1,20]},{13:[1,21]},{15:[1,22]},{17:[1,23]},t(c,[2,12]),t(c,[2,13]),t(c,o,{8:10,9:11,1:[2,3],10:h,12:u,14:y,16:p,18:g,19:d}),t(r,[2,6]),t(c,[2,8]),t(c,[2,9]),t(c,[2,10]),t(c,[2,11])],defaultActions:{7:[2,1]},parseError:function(t,e){if(e.recoverable)this.trace(t);else{var i=Error(t);throw i.hash=e,i}},parse:function(t){var e=this,i=[0],s=[],n=[null],r=[],l=this.table,a="",c=0,o=0,h=r.slice.call(arguments,1),u=Object.create(this.lexer),y={yy:{}};for(var p in this.yy)Object.prototype.hasOwnProperty.call(this.yy,p)&&(y.yy[p]=this.yy[p]);u.setInput(t,y.yy),y.yy.lexer=u,y.yy.parser=this,void 0===u.yylloc&&(u.yylloc={});var g=u.yylloc;r.push(g);var d=u.options&&u.options.ranges;"function"==typeof y.yy.parseError?this.parseError=y.yy.parseError:this.parseError=Object.getPrototypeOf(this).parseError;for(var _,f,m,k,b,x,v,S,w={};;){if(f=i[i.length-1],this.defaultActions[f]?m=this.defaultActions[f]:(null==_&&(_=function(){var t;return"number"!=typeof(t=s.pop()||u.lex()||1)&&(t instanceof Array&&(t=(s=t).pop()),t=e.symbols_[t]||t),t}()),m=l[f]&&l[f][_]),void 0===m||!m.length||!m[0]){var $="";for(b in S=[],l[f])this.terminals_[b]&&b>2&&S.push("'"+this.terminals_[b]+"'");$=u.showPosition?"Parse error on line "+(c+1)+":\n"+u.showPosition()+"\nExpecting "+S.join(", ")+", got '"+(this.terminals_[_]||_)+"'":"Parse error on line "+(c+1)+": Unexpected "+(1==_?"end of input":"'"+(this.terminals_[_]||_)+"'"),this.parseError($,{text:u.match,token:this.terminals_[_]||_,line:u.yylineno,loc:g,expected:S})}if(m[0]instanceof Array&&m.length>1)throw Error("Parse Error: multiple actions possible at state: "+f+", token: "+_);switch(m[0]){case 1:i.push(_),n.push(u.yytext),r.push(u.yylloc),i.push(m[1]),_=null,o=u.yyleng,a=u.yytext,c=u.yylineno,g=u.yylloc;break;case 2:if(x=this.productions_[m[1]][1],w.$=n[n.length-x],w._$={first_line:r[r.length-(x||1)].first_line,last_line:r[r.length-1].last_line,first_column:r[r.length-(x||1)].first_column,last_column:r[r.length-1].last_column},d&&(w._$.range=[r[r.length-(x||1)].range[0],r[r.length-1].range[1]]),void 0!==(k=this.performAction.apply(w,[a,o,c,y.yy,m[1],n,r].concat(h))))return k;x&&(i=i.slice(0,-1*x*2),n=n.slice(0,-1*x),r=r.slice(0,-1*x)),i.push(this.productions_[m[1]][0]),n.push(w.$),r.push(w._$),v=l[i[i.length-2]][i[i.length-1]],i.push(v);break;case 3:return!0}}return!0}};function f(){this.yy={}}return _.lexer={EOF:1,parseError:function(t,e){if(this.yy.parser)this.yy.parser.parseError(t,e);else throw Error(t)},setInput:function(t,e){return this.yy=e||this.yy||{},this._input=t,this._more=this._backtrack=this.done=!1,this.yylineno=this.yyleng=0,this.yytext=this.matched=this.match="",this.conditionStack=["INITIAL"],this.yylloc={first_line:1,first_column:0,last_line:1,last_column:0},this.options.ranges&&(this.yylloc.range=[0,0]),this.offset=0,this},input:function(){var t=this._input[0];return this.yytext+=t,this.yyleng++,this.offset++,this.match+=t,this.matched+=t,t.match(/(?:\r\n?|\n).*/g)?(this.yylineno++,this.yylloc.last_line++):this.yylloc.last_column++,this.options.ranges&&this.yylloc.range[1]++,this._input=this._input.slice(1),t},unput:function(t){var e=t.length,i=t.split(/(?:\r\n?|\n)/g);this._input=t+this._input,this.yytext=this.yytext.substr(0,this.yytext.length-e),this.offset-=e;var s=this.match.split(/(?:\r\n?|\n)/g);this.match=this.match.substr(0,this.match.length-1),this.matched=this.matched.substr(0,this.matched.length-1),i.length-1&&(this.yylineno-=i.length-1);var n=this.yylloc.range;return this.yylloc={first_line:this.yylloc.first_line,last_line:this.yylineno+1,first_column:this.yylloc.first_column,last_column:i?(i.length===s.length?this.yylloc.first_column:0)+s[s.length-i.length].length-i[0].length:this.yylloc.first_column-e},this.options.ranges&&(this.yylloc.range=[n[0],n[0]+this.yyleng-e]),this.yyleng=this.yytext.length,this},more:function(){return this._more=!0,this},reject:function(){return this.options.backtrack_lexer?(this._backtrack=!0,this):this.parseError("Lexical error on line "+(this.yylineno+1)+". You can only invoke reject() in the lexer when the lexer is of the backtracking persuasion (options.backtrack_lexer = true).\n"+this.showPosition(),{text:"",token:null,line:this.yylineno})},less:function(t){this.unput(this.match.slice(t))},pastInput:function(){var t=this.matched.substr(0,this.matched.length-this.match.length);return(t.length>20?"...":"")+t.substr(-20).replace(/\n/g,"")},upcomingInput:function(){var t=this.match;return t.length<20&&(t+=this._input.substr(0,20-t.length)),(t.substr(0,20)+(t.length>20?"...":"")).replace(/\n/g,"")},showPosition:function(){var t=this.pastInput(),e=Array(t.length+1).join("-");return t+this.upcomingInput()+"\n"+e+"^"},test_match:function(t,e){var i,s,n;if(this.options.backtrack_lexer&&(n={yylineno:this.yylineno,yylloc:{first_line:this.yylloc.first_line,last_line:this.last_line,first_column:this.yylloc.first_column,last_column:this.yylloc.last_column},yytext:this.yytext,match:this.match,matches:this.matches,matched:this.matched,yyleng:this.yyleng,offset:this.offset,_more:this._more,_input:this._input,yy:this.yy,conditionStack:this.conditionStack.slice(0),done:this.done},this.options.ranges&&(n.yylloc.range=this.yylloc.range.slice(0))),(s=t[0].match(/(?:\r\n?|\n).*/g))&&(this.yylineno+=s.length),this.yylloc={first_line:this.yylloc.last_line,last_line:this.yylineno+1,first_column:this.yylloc.last_column,last_column:s?s[s.length-1].length-s[s.length-1].match(/\r?\n?/)[0].length:this.yylloc.last_column+t[0].length},this.yytext+=t[0],this.match+=t[0],this.matches=t,this.yyleng=this.yytext.length,this.options.ranges&&(this.yylloc.range=[this.offset,this.offset+=this.yyleng]),this._more=!1,this._backtrack=!1,this._input=this._input.slice(t[0].length),this.matched+=t[0],i=this.performAction.call(this,this.yy,this,e,this.conditionStack[this.conditionStack.length-1]),this.done&&this._input&&(this.done=!1),i)return i;if(this._backtrack)for(var r in n)this[r]=n[r];return!1},next:function(){if(this.done)return this.EOF;this._input||(this.done=!0),this._more||(this.yytext="",this.match="");for(var t,e,i,s,n=this._currentRules(),r=0;re[0].length)){if(e=i,s=r,this.options.backtrack_lexer){if(!1!==(t=this.test_match(i,n[r])))return t;if(!this._backtrack)return!1;e=!1;continue}if(!this.options.flex)break}return e?!1!==(t=this.test_match(e,n[s]))&&t:""===this._input?this.EOF:this.parseError("Lexical error on line "+(this.yylineno+1)+". Unrecognized text.\n"+this.showPosition(),{text:"",token:null,line:this.yylineno})},lex:function(){return this.next()||this.lex()},begin:function(t){this.conditionStack.push(t)},popState:function(){return this.conditionStack.length-1>0?this.conditionStack.pop():this.conditionStack[0]},_currentRules:function(){return this.conditionStack.length&&this.conditionStack[this.conditionStack.length-1]?this.conditions[this.conditionStack[this.conditionStack.length-1]].rules:this.conditions.INITIAL.rules},topState:function(t){return(t=this.conditionStack.length-1-Math.abs(t||0))>=0?this.conditionStack[t]:"INITIAL"},pushState:function(t){this.begin(t)},stateStackSize:function(){return this.conditionStack.length},options:{"case-insensitive":!0},performAction:function(t,e,i,s){switch(i){case 0:case 1:case 3:case 4:break;case 2:return 20;case 5:return this.begin("title"),12;case 6:return this.popState(),"title_value";case 7:return this.begin("acc_title"),14;case 8:return this.popState(),"acc_title_value";case 9:return this.begin("acc_descr"),16;case 10:return this.popState(),"acc_descr_value";case 11:this.begin("acc_descr_multiline");break;case 12:case 15:this.popState();break;case 13:return"acc_descr_multiline_value";case 14:this.begin("string");break;case 16:return"txt";case 17:return 5;case 18:return 7;case 19:return"value";case 20:return 22}},rules:[/^(?:%%(?!\{)[^\n]*)/i,/^(?:[^\}]%%[^\n]*)/i,/^(?:[\n\r]+)/i,/^(?:%%[^\n]*)/i,/^(?:[\s]+)/i,/^(?:title\b)/i,/^(?:(?!\n||)*[^\n]*)/i,/^(?:accTitle\s*:\s*)/i,/^(?:(?!\n||)*[^\n]*)/i,/^(?:accDescr\s*:\s*)/i,/^(?:(?!\n||)*[^\n]*)/i,/^(?:accDescr\s*\{\s*)/i,/^(?:[\}])/i,/^(?:[^\}]*)/i,/^(?:["])/i,/^(?:["])/i,/^(?:[^"]*)/i,/^(?:pie\b)/i,/^(?:showData\b)/i,/^(?::[\s]*[\d]+(?:\.[\d]+)?)/i,/^(?:$)/i],conditions:{acc_descr_multiline:{rules:[12,13],inclusive:!1},acc_descr:{rules:[10],inclusive:!1},acc_title:{rules:[8],inclusive:!1},title:{rules:[6],inclusive:!1},string:{rules:[15,16],inclusive:!1},INITIAL:{rules:[0,1,2,3,4,5,7,9,11,14,17,18,19,20],inclusive:!0}}},f.prototype=_,_.Parser=f,new f}();r.parser=r;let l=s.B.pie,a={sections:{},showData:!1,config:l},c=a.sections,o=a.showData,h=structuredClone(l),u={getConfig:()=>structuredClone(h),clear:()=>{c=structuredClone(a.sections),o=a.showData,(0,s.v)()},setDiagramTitle:s.q,getDiagramTitle:s.t,setAccTitle:s.s,getAccTitle:s.g,setAccDescription:s.b,getAccDescription:s.a,addSection:(t,e)=>{void 0===c[t=(0,s.d)(t,(0,s.c)())]&&(c[t]=e,s.l.debug(`added new section: ${t}, with value: ${e}`))},getSections:()=>c,cleanupValue:t=>(":"===t.substring(0,1)&&(t=t.substring(1).trim()),Number(t.trim())),setShowData:t=>{o=t},getShowData:()=>o},y=t=>{let e=Object.entries(t).map(t=>({label:t[0],value:t[1]})).sort((t,e)=>e.value-t.value),i=(0,n.ve8)().value(t=>t.value);return i(e)},p={parser:r,db:u,renderer:{draw:(t,e,i,r)=>{s.l.debug("rendering pie chart\n"+t);let l=r.db,a=(0,s.c)(),c=(0,s.C)(l.getConfig(),a.pie),o=(0,s.A)(e),h=o.append("g"),u=l.getSections();h.attr("transform","translate(225,225)");let{themeVariables:p}=a,[g]=(0,s.D)(p.pieOuterStrokeWidth);g??(g=2);let d=c.textPosition,_=(0,n.Nb1)().innerRadius(0).outerRadius(185),f=(0,n.Nb1)().innerRadius(185*d).outerRadius(185*d);h.append("circle").attr("cx",0).attr("cy",0).attr("r",185+g/2).attr("class","pieOuterCircle");let m=y(u),k=[p.pie1,p.pie2,p.pie3,p.pie4,p.pie5,p.pie6,p.pie7,p.pie8,p.pie9,p.pie10,p.pie11,p.pie12],b=(0,n.PKp)(k);h.selectAll("mySlices").data(m).enter().append("path").attr("d",_).attr("fill",t=>b(t.data.label)).attr("class","pieCircle");let x=0;Object.keys(u).forEach(t=>{x+=u[t]}),h.selectAll("mySlices").data(m).enter().append("text").text(t=>(t.data.value/x*100).toFixed(0)+"%").attr("transform",t=>"translate("+f.centroid(t)+")").style("text-anchor","middle").attr("class","slice"),h.append("text").text(l.getDiagramTitle()).attr("x",0).attr("y",-200).attr("class","pieTitleText");let v=h.selectAll(".legend").data(b.domain()).enter().append("g").attr("class","legend").attr("transform",(t,e)=>{let i=22*b.domain().length/2;return"translate(216,"+(22*e-i)+")"});v.append("rect").attr("width",18).attr("height",18).style("fill",b).style("stroke",b),v.data(m).append("text").attr("x",22).attr("y",14).text(t=>{let{label:e,value:i}=t.data;return l.getShowData()?`${e} [${i}]`:e});let S=Math.max(...v.selectAll("text").nodes().map(t=>(null==t?void 0:t.getBoundingClientRect().width)??0)),w=512+S;o.attr("viewBox",`0 0 ${w} 450`),(0,s.i)(o,450,w,c.useMaxWidth)}},styles:t=>` 2 | .pieCircle{ 3 | stroke: ${t.pieStrokeColor}; 4 | stroke-width : ${t.pieStrokeWidth}; 5 | opacity : ${t.pieOpacity}; 6 | } 7 | .pieOuterCircle{ 8 | stroke: ${t.pieOuterStrokeColor}; 9 | stroke-width: ${t.pieOuterStrokeWidth}; 10 | fill: none; 11 | } 12 | .pieTitleText { 13 | text-anchor: middle; 14 | font-size: ${t.pieTitleTextSize}; 15 | fill: ${t.pieTitleTextColor}; 16 | font-family: ${t.fontFamily}; 17 | } 18 | .slice { 19 | font-family: ${t.fontFamily}; 20 | fill: ${t.pieSectionTextColor}; 21 | font-size:${t.pieSectionTextSize}; 22 | // fill: white; 23 | } 24 | .legend text { 25 | fill: ${t.pieLegendTextColor}; 26 | font-family: ${t.fontFamily}; 27 | font-size: ${t.pieLegendTextSize}; 28 | } 29 | `}}}]); -------------------------------------------------------------------------------- /streamlit_markdown/frontend/out/_next/static/chunks/15.767906eca7c842ec.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[15],{6060:function(e,t,n){n.d(t,{c:function(){return a}});var r=n(9360),i=n(2346),l=n(3836);function a(e){var t={options:{directed:e.isDirected(),multigraph:e.isMultigraph(),compound:e.isCompound()},nodes:l.Z(e.nodes(),function(t){var n=e.node(t),i=e.parent(t),l={v:t};return r.Z(n)||(l.value=n),r.Z(i)||(l.parent=i),l}),edges:l.Z(e.edges(),function(t){var n=e.edge(t),i={v:t.v,w:t.w};return r.Z(t.name)||(i.name=t.name),r.Z(n)||(i.value=n),i})};return r.Z(e.graph())||(t.value=i.Z(e.graph())),t}n(2544)},2346:function(e,t,n){var r=n(8451);t.Z=function(e){return(0,r.Z)(e,4)}},4015:function(e,t,n){n.d(t,{r:function(){return O}});var r=n(1644),i=n(6060),l=n(5200),a=n(1835),d=n(5625),o=n(4596),s=n(4218);let h={},c={},g={},f=()=>{c={},g={},h={}},u=(e,t)=>(a.l.trace("In isDescendant",t," ",e," = ",c[t].includes(e)),!!c[t].includes(e)),w=(e,t)=>(a.l.info("Descendants of ",t," is ",c[t]),a.l.info("Edge is ",e),e.v!==t&&e.w!==t&&(c[t]?c[t].includes(e.v)||u(e.v,t)||u(e.w,t)||c[t].includes(e.w):(a.l.debug("Tilt, ",t,",not in descendants"),!1))),p=(e,t,n,r)=>{a.l.warn("Copying children of ",e,"root",r,"data",t.node(e),r);let i=t.children(e)||[];e!==r&&i.push(e),a.l.warn("Copying (nodes) clusterId",e,"nodes",i),i.forEach(i=>{if(t.children(i).length>0)p(i,t,n,r);else{let l=t.node(i);a.l.info("cp ",i," to ",r," with parent ",e),n.setNode(i,l),r!==t.parent(i)&&(a.l.warn("Setting parent",i,t.parent(i)),n.setParent(i,t.parent(i))),e!==r&&i!==e?(a.l.debug("Setting parent",i,e),n.setParent(i,e)):(a.l.info("In copy ",e,"root",r,"data",t.node(e),r),a.l.debug("Not Setting parent for node=",i,"cluster!==rootId",e!==r,"node!==clusterId",i!==e));let d=t.edges(i);a.l.debug("Copying Edges",d),d.forEach(i=>{a.l.info("Edge",i);let l=t.edge(i.v,i.w,i.name);a.l.info("Edge data",l,r);try{w(i,r)?(a.l.info("Copying as ",i.v,i.w,l,i.name),n.setEdge(i.v,i.w,l,i.name),a.l.info("newGraph edges ",n.edges(),n.edge(n.edges()[0]))):a.l.info("Skipping copy of edge ",i.v,"-->",i.w," rootId: ",r," clusterId:",e)}catch(e){a.l.error(e)}})}a.l.debug("Removing node",i),t.removeNode(i)})},v=(e,t)=>{let n=t.children(e),r=[...n];for(let i of n)g[i]=e,r=[...r,...v(i,t)];return r},y=(e,t)=>{a.l.trace("Searching",e);let n=t.children(e);if(a.l.trace("Searching children of id ",e,n),n.length<1)return a.l.trace("This is a valid node",e),e;for(let r of n){let n=y(r,t);if(n)return a.l.trace("Found replacement for",e," => ",n),n}},x=e=>h[e]&&h[e].externalConnections&&h[e]?h[e].id:e,m=(e,t)=>{if(!e||t>10){a.l.debug("Opting out, no graph ");return}for(let t of(a.l.debug("Opting in, graph "),e.nodes().forEach(function(t){let n=e.children(t);n.length>0&&(a.l.warn("Cluster identified",t," Replacement id in edges: ",y(t,e)),c[t]=v(t,e),h[t]={id:y(t,e),clusterData:e.node(t)})}),e.nodes().forEach(function(t){let n=e.children(t),r=e.edges();n.length>0?(a.l.debug("Cluster identified",t,c),r.forEach(e=>{if(e.v!==t&&e.w!==t){let n=u(e.v,t),r=u(e.w,t);n^r&&(a.l.warn("Edge: ",e," leaves cluster ",t),a.l.warn("Descendants of XXX ",t,": ",c[t]),h[t].externalConnections=!0)}})):a.l.debug("Not a cluster ",t,c)}),Object.keys(h))){let n=h[t].id,r=e.parent(n);r!==t&&h[r]&&!h[r].externalConnections&&(h[t].id=r)}e.edges().forEach(function(t){let n=e.edge(t);a.l.warn("Edge "+t.v+" -> "+t.w+": "+JSON.stringify(t)),a.l.warn("Edge "+t.v+" -> "+t.w+": "+JSON.stringify(e.edge(t)));let r=t.v,i=t.w;if(a.l.warn("Fix XXX",h,"ids:",t.v,t.w,"Translating: ",h[t.v]," --- ",h[t.w]),h[t.v]&&h[t.w]&&h[t.v]===h[t.w]){a.l.warn("Fixing and trixing link to self - removing XXX",t.v,t.w,t.name),a.l.warn("Fixing and trixing - removing XXX",t.v,t.w,t.name),r=x(t.v),i=x(t.w),e.removeEdge(t.v,t.w,t.name);let l=t.w+"---"+t.v;e.setNode(l,{domId:l,id:l,labelStyle:"",labelText:n.label,padding:0,shape:"labelRect",style:""});let d=structuredClone(n),o=structuredClone(n);d.label="",d.arrowTypeEnd="none",o.label="",d.fromCluster=t.v,o.toCluster=t.v,e.setEdge(r,l,d,t.name+"-cyclic-special"),e.setEdge(l,i,o,t.name+"-cyclic-special")}else if(h[t.v]||h[t.w]){if(a.l.warn("Fixing and trixing - removing XXX",t.v,t.w,t.name),r=x(t.v),i=x(t.w),e.removeEdge(t.v,t.w,t.name),r!==t.v){let i=e.parent(r);h[i].externalConnections=!0,n.fromCluster=t.v}if(i!==t.w){let r=e.parent(i);h[r].externalConnections=!0,n.toCluster=t.w}a.l.warn("Fix Replacing with XXX",r,i,t.name),e.setEdge(r,i,n,t.name)}}),a.l.warn("Adjusted Graph",i.c(e)),b(e,0),a.l.trace(h)},b=(e,t)=>{if(a.l.warn("extractor - ",t,i.c(e),e.children("D")),t>10){a.l.error("Bailing out");return}let n=e.nodes(),r=!1;for(let t of n){let n=e.children(t);r=r||n.length>0}if(!r){a.l.debug("Done, no node has children",e.nodes());return}for(let r of(a.l.debug("Nodes = ",n,t),n))if(a.l.debug("Extracting node",r,h,h[r]&&!h[r].externalConnections,!e.parent(r),e.node(r),e.children("D")," Depth ",t),h[r]){if(!h[r].externalConnections&&e.children(r)&&e.children(r).length>0){a.l.warn("Cluster without external connections, without a parent and with children",r,t);let n=e.graph(),l="TB"===n.rankdir?"LR":"TB";h[r]&&h[r].clusterData&&h[r].clusterData.dir&&(l=h[r].clusterData.dir,a.l.warn("Fixing dir",h[r].clusterData.dir,l));let o=new d.k({multigraph:!0,compound:!0}).setGraph({rankdir:l,nodesep:50,ranksep:50,marginx:8,marginy:8}).setDefaultEdgeLabel(function(){return{}});a.l.warn("Old graph before copy",i.c(e)),p(r,e,o,r),e.setNode(r,{clusterNode:!0,id:r,clusterData:h[r].clusterData,labelText:h[r].labelText,graph:o}),a.l.warn("New graph after copy node: (",r,")",i.c(o)),a.l.debug("Old graph after copy",i.c(e))}else a.l.warn("Cluster ** ",r," **not meeting the criteria !externalConnections:",!h[r].externalConnections," no parent: ",!e.parent(r)," children ",e.children(r)&&e.children(r).length>0,e.children("D"),t),a.l.debug(h)}else a.l.debug("Not a cluster",r,t);for(let r of(n=e.nodes(),a.l.warn("New list of nodes",n),n)){let n=e.node(r);a.l.warn(" Now next level",r,n),n.clusterNode&&b(n.graph,t+1)}},E=(e,t)=>{if(0===t.length)return[];let n=Object.assign(t);return t.forEach(t=>{let r=e.children(t),i=E(e,r);n=[...n,...i]}),n},N=e=>E(e,e.children()),C={rect:(e,t)=>{a.l.info("Creating subgraph rect for ",t.id,t);let n=(0,a.c)(),r=e.insert("g").attr("class","cluster"+(t.class?" "+t.class:"")).attr("id",t.id),i=r.insert("rect",":first-child"),d=(0,a.m)(n.flowchart.htmlLabels),h=r.insert("g").attr("class","cluster-label"),c="markdown"===t.labelType?(0,o.a)(h,t.labelText,{style:t.labelStyle,useHtmlLabels:d}):h.node().appendChild((0,l.c)(t.labelText,t.labelStyle,void 0,!0)),g=c.getBBox();if((0,a.m)(n.flowchart.htmlLabels)){let e=c.children[0],t=(0,s.Ys)(c);g=e.getBoundingClientRect(),t.attr("width",g.width),t.attr("height",g.height)}let f=0*t.padding,u=f/2,w=t.width<=g.width+f?g.width+f:t.width;t.width<=g.width+f?t.diff=(g.width-t.width)/2-t.padding/2:t.diff=-t.padding/2,a.l.trace("Data ",t,JSON.stringify(t)),i.attr("style",t.style).attr("rx",t.rx).attr("ry",t.ry).attr("x",t.x-w/2).attr("y",t.y-t.height/2-u).attr("width",w).attr("height",t.height+f);let{subGraphTitleTopMargin:p}=(0,l.g)(n);d?h.attr("transform",`translate(${t.x-g.width/2}, ${t.y-t.height/2+p})`):h.attr("transform",`translate(${t.x}, ${t.y-t.height/2+p})`);let v=i.node().getBBox();return t.width=v.width,t.height=v.height,t.intersect=function(e){return(0,l.i)(t,e)},r},roundedWithTitle:(e,t)=>{let n=(0,a.c)(),r=e.insert("g").attr("class",t.classes).attr("id",t.id),i=r.insert("rect",":first-child"),d=r.insert("g").attr("class","cluster-label"),o=r.append("rect"),h=d.node().appendChild((0,l.c)(t.labelText,t.labelStyle,void 0,!0)),c=h.getBBox();if((0,a.m)(n.flowchart.htmlLabels)){let e=h.children[0],t=(0,s.Ys)(h);c=e.getBoundingClientRect(),t.attr("width",c.width),t.attr("height",c.height)}c=h.getBBox();let g=0*t.padding,f=g/2,u=t.width<=c.width+t.padding?c.width+t.padding:t.width;t.width<=c.width+t.padding?t.diff=(c.width+0*t.padding-t.width)/2:t.diff=-t.padding/2,i.attr("class","outer").attr("x",t.x-u/2-f).attr("y",t.y-t.height/2-f).attr("width",u+g).attr("height",t.height+g),o.attr("class","inner").attr("x",t.x-u/2-f).attr("y",t.y-t.height/2-f+c.height-1).attr("width",u+g).attr("height",t.height+g-c.height-3);let{subGraphTitleTopMargin:w}=(0,l.g)(n);d.attr("transform",`translate(${t.x-c.width/2}, ${t.y-t.height/2-t.padding/3+((0,a.m)(n.flowchart.htmlLabels)?5:3)+w})`);let p=i.node().getBBox();return t.height=p.height,t.intersect=function(e){return(0,l.i)(t,e)},r},noteGroup:(e,t)=>{let n=e.insert("g").attr("class","note-cluster").attr("id",t.id),r=n.insert("rect",":first-child"),i=0*t.padding,a=i/2;r.attr("rx",t.rx).attr("ry",t.ry).attr("x",t.x-t.width/2-a).attr("y",t.y-t.height/2-a).attr("width",t.width+i).attr("height",t.height+i).attr("fill","none");let d=r.node().getBBox();return t.width=d.width,t.height=d.height,t.intersect=function(e){return(0,l.i)(t,e)},n},divider:(e,t)=>{let n=e.insert("g").attr("class",t.classes).attr("id",t.id),r=n.insert("rect",":first-child"),i=0*t.padding,a=i/2;r.attr("class","divider").attr("x",t.x-t.width/2-a).attr("y",t.y-t.height/2).attr("width",t.width+i).attr("height",t.height+i);let d=r.node().getBBox();return t.width=d.width,t.height=d.height,t.diff=-t.padding/2,t.intersect=function(e){return(0,l.i)(t,e)},n}},X={},S=(e,t)=>{a.l.trace("Inserting cluster");let n=t.shape||"rect";X[t.id]=C[n](e,t)},D=()=>{X={}},B=async(e,t,n,d,o,s)=>{a.l.info("Graph in recursive render: XXX",i.c(t),o);let c=t.graph().rankdir;a.l.trace("Dir in recursive render - dir:",c);let g=e.insert("g").attr("class","root");t.nodes()?a.l.info("Recursive render XXX",t.nodes()):a.l.info("No nodes found for",t),t.edges().length>0&&a.l.trace("Recursive edges",t.edge(t.edges()[0]));let f=g.insert("g").attr("class","clusters"),u=g.insert("g").attr("class","edgePaths"),w=g.insert("g").attr("class","edgeLabels"),p=g.insert("g").attr("class","nodes");await Promise.all(t.nodes().map(async function(e){let r=t.node(e);if(void 0!==o){let n=JSON.parse(JSON.stringify(o.clusterData));a.l.info("Setting data for cluster XXX (",e,") ",n,o),t.setNode(o.id,n),t.parent(e)||(a.l.trace("Setting parent",e,o.id),t.setParent(e,o.id,n))}if(a.l.info("(Insert) Node XXX"+e+": "+JSON.stringify(t.node(e))),r&&r.clusterNode){a.l.info("Cluster identified",e,r.width,t.node(e));let i=await B(p,r.graph,n,d,t.node(e),s),o=i.elem;(0,l.u)(r,o),r.diff=i.diff||0,a.l.info("Node bounds (abc123)",e,r,r.width,r.x,r.y),(0,l.s)(o,r),a.l.warn("Recursive render complete ",o,r)}else t.children(e).length>0?(a.l.info("Cluster - the non recursive path XXX",e,r.id,r,t),a.l.info(y(r.id,t)),h[r.id]={id:y(r.id,t),node:r}):(a.l.info("Node - the non recursive path",e,r.id,r),await (0,l.e)(p,t.node(e),c))})),t.edges().forEach(function(e){let n=t.edge(e.v,e.w,e.name);a.l.info("Edge "+e.v+" -> "+e.w+": "+JSON.stringify(e)),a.l.info("Edge "+e.v+" -> "+e.w+": ",e," ",JSON.stringify(t.edge(e))),a.l.info("Fix",h,"ids:",e.v,e.w,"Translating: ",h[e.v],h[e.w]),(0,l.f)(w,n)}),t.edges().forEach(function(e){a.l.info("Edge "+e.v+" -> "+e.w+": "+JSON.stringify(e))}),a.l.info("#############################################"),a.l.info("### Layout ###"),a.l.info("#############################################"),a.l.info(t),(0,r.bK)(t),a.l.info("Graph after layout:",i.c(t));let v=0,{subGraphTitleTotalMargin:x}=(0,l.g)(s);return N(t).forEach(function(e){let n=t.node(e);a.l.info("Position "+e+": "+JSON.stringify(t.node(e))),a.l.info("Position "+e+": ("+n.x,","+n.y,") width: ",n.width," height: ",n.height),n&&n.clusterNode?(n.y+=x,(0,l.p)(n)):t.children(e).length>0?(n.height+=x,S(f,n),h[n.id].node=n):(n.y+=x/2,(0,l.p)(n))}),t.edges().forEach(function(e){let r=t.edge(e);a.l.info("Edge "+e.v+" -> "+e.w+": "+JSON.stringify(r),r),r.points.forEach(e=>e.y+=x/2);let i=(0,l.h)(u,e,r,h,n,t,d);(0,l.j)(r,i)}),t.nodes().forEach(function(e){let n=t.node(e);a.l.info(e,n.type,n.diff),"group"===n.type&&(v=n.diff)}),{elem:g,diff:v}},O=async(e,t,n,r,d)=>{(0,l.a)(e,n,r,d),(0,l.b)(),(0,l.d)(),D(),f(),a.l.warn("Graph at first:",JSON.stringify(i.c(t))),m(t),a.l.warn("Graph after:",JSON.stringify(i.c(t)));let o=(0,a.c)();await B(e,t,r,d,void 0,o)}}}]); -------------------------------------------------------------------------------- /streamlit_markdown/frontend/out/_next/static/chunks/172.4568e3e47a7b0d6c.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[172],{3172:function(t,i,n){n.d(i,{diagram:function(){return o}});var s=n(1835);n(7484),n(7967),n(4218),n(7856);var e=function(){var t=function(t,i,n,s){for(n=n||{},s=t.length;s--;n[t[s]]=i);return n},i=[6,9,10],n={trace:function(){},yy:{},symbols_:{error:2,start:3,info:4,document:5,EOF:6,line:7,statement:8,NL:9,showInfo:10,$accept:0,$end:1},terminals_:{2:"error",4:"info",6:"EOF",9:"NL",10:"showInfo"},productions_:[0,[3,3],[5,0],[5,2],[7,1],[7,1],[8,1]],performAction:function(t,i,n,s,e,r,h){switch(r.length,e){case 1:return s;case 4:break;case 6:s.setInfo(!0)}},table:[{3:1,4:[1,2]},{1:[3]},t(i,[2,2],{5:3}),{6:[1,4],7:5,8:6,9:[1,7],10:[1,8]},{1:[2,1]},t(i,[2,3]),t(i,[2,4]),t(i,[2,5]),t(i,[2,6])],defaultActions:{4:[2,1]},parseError:function(t,i){if(i.recoverable)this.trace(t);else{var n=Error(t);throw n.hash=i,n}},parse:function(t){var i=this,n=[0],s=[],e=[null],r=[],h=this.table,o="",l=0,c=0,a=r.slice.call(arguments,1),y=Object.create(this.lexer),u={yy:{}};for(var p in this.yy)Object.prototype.hasOwnProperty.call(this.yy,p)&&(u.yy[p]=this.yy[p]);y.setInput(t,u.yy),u.yy.lexer=y,u.yy.parser=this,void 0===y.yylloc&&(y.yylloc={});var f=y.yylloc;r.push(f);var g=y.options&&y.options.ranges;"function"==typeof u.yy.parseError?this.parseError=u.yy.parseError:this.parseError=Object.getPrototypeOf(this).parseError;for(var _,m,d,k,b,x,v,I,E={};;){if(m=n[n.length-1],this.defaultActions[m]?d=this.defaultActions[m]:(null==_&&(_=function(){var t;return"number"!=typeof(t=s.pop()||y.lex()||1)&&(t instanceof Array&&(t=(s=t).pop()),t=i.symbols_[t]||t),t}()),d=h[m]&&h[m][_]),void 0===d||!d.length||!d[0]){var S="";for(b in I=[],h[m])this.terminals_[b]&&b>2&&I.push("'"+this.terminals_[b]+"'");S=y.showPosition?"Parse error on line "+(l+1)+":\n"+y.showPosition()+"\nExpecting "+I.join(", ")+", got '"+(this.terminals_[_]||_)+"'":"Parse error on line "+(l+1)+": Unexpected "+(1==_?"end of input":"'"+(this.terminals_[_]||_)+"'"),this.parseError(S,{text:y.match,token:this.terminals_[_]||_,line:y.yylineno,loc:f,expected:I})}if(d[0]instanceof Array&&d.length>1)throw Error("Parse Error: multiple actions possible at state: "+m+", token: "+_);switch(d[0]){case 1:n.push(_),e.push(y.yytext),r.push(y.yylloc),n.push(d[1]),_=null,c=y.yyleng,o=y.yytext,l=y.yylineno,f=y.yylloc;break;case 2:if(x=this.productions_[d[1]][1],E.$=e[e.length-x],E._$={first_line:r[r.length-(x||1)].first_line,last_line:r[r.length-1].last_line,first_column:r[r.length-(x||1)].first_column,last_column:r[r.length-1].last_column},g&&(E._$.range=[r[r.length-(x||1)].range[0],r[r.length-1].range[1]]),void 0!==(k=this.performAction.apply(E,[o,c,l,u.yy,d[1],e,r].concat(a))))return k;x&&(n=n.slice(0,-1*x*2),e=e.slice(0,-1*x),r=r.slice(0,-1*x)),n.push(this.productions_[d[1]][0]),e.push(E.$),r.push(E._$),v=h[n[n.length-2]][n[n.length-1]],n.push(v);break;case 3:return!0}}return!0}};function s(){this.yy={}}return n.lexer={EOF:1,parseError:function(t,i){if(this.yy.parser)this.yy.parser.parseError(t,i);else throw Error(t)},setInput:function(t,i){return this.yy=i||this.yy||{},this._input=t,this._more=this._backtrack=this.done=!1,this.yylineno=this.yyleng=0,this.yytext=this.matched=this.match="",this.conditionStack=["INITIAL"],this.yylloc={first_line:1,first_column:0,last_line:1,last_column:0},this.options.ranges&&(this.yylloc.range=[0,0]),this.offset=0,this},input:function(){var t=this._input[0];return this.yytext+=t,this.yyleng++,this.offset++,this.match+=t,this.matched+=t,t.match(/(?:\r\n?|\n).*/g)?(this.yylineno++,this.yylloc.last_line++):this.yylloc.last_column++,this.options.ranges&&this.yylloc.range[1]++,this._input=this._input.slice(1),t},unput:function(t){var i=t.length,n=t.split(/(?:\r\n?|\n)/g);this._input=t+this._input,this.yytext=this.yytext.substr(0,this.yytext.length-i),this.offset-=i;var s=this.match.split(/(?:\r\n?|\n)/g);this.match=this.match.substr(0,this.match.length-1),this.matched=this.matched.substr(0,this.matched.length-1),n.length-1&&(this.yylineno-=n.length-1);var e=this.yylloc.range;return this.yylloc={first_line:this.yylloc.first_line,last_line:this.yylineno+1,first_column:this.yylloc.first_column,last_column:n?(n.length===s.length?this.yylloc.first_column:0)+s[s.length-n.length].length-n[0].length:this.yylloc.first_column-i},this.options.ranges&&(this.yylloc.range=[e[0],e[0]+this.yyleng-i]),this.yyleng=this.yytext.length,this},more:function(){return this._more=!0,this},reject:function(){return this.options.backtrack_lexer?(this._backtrack=!0,this):this.parseError("Lexical error on line "+(this.yylineno+1)+". You can only invoke reject() in the lexer when the lexer is of the backtracking persuasion (options.backtrack_lexer = true).\n"+this.showPosition(),{text:"",token:null,line:this.yylineno})},less:function(t){this.unput(this.match.slice(t))},pastInput:function(){var t=this.matched.substr(0,this.matched.length-this.match.length);return(t.length>20?"...":"")+t.substr(-20).replace(/\n/g,"")},upcomingInput:function(){var t=this.match;return t.length<20&&(t+=this._input.substr(0,20-t.length)),(t.substr(0,20)+(t.length>20?"...":"")).replace(/\n/g,"")},showPosition:function(){var t=this.pastInput(),i=Array(t.length+1).join("-");return t+this.upcomingInput()+"\n"+i+"^"},test_match:function(t,i){var n,s,e;if(this.options.backtrack_lexer&&(e={yylineno:this.yylineno,yylloc:{first_line:this.yylloc.first_line,last_line:this.last_line,first_column:this.yylloc.first_column,last_column:this.yylloc.last_column},yytext:this.yytext,match:this.match,matches:this.matches,matched:this.matched,yyleng:this.yyleng,offset:this.offset,_more:this._more,_input:this._input,yy:this.yy,conditionStack:this.conditionStack.slice(0),done:this.done},this.options.ranges&&(e.yylloc.range=this.yylloc.range.slice(0))),(s=t[0].match(/(?:\r\n?|\n).*/g))&&(this.yylineno+=s.length),this.yylloc={first_line:this.yylloc.last_line,last_line:this.yylineno+1,first_column:this.yylloc.last_column,last_column:s?s[s.length-1].length-s[s.length-1].match(/\r?\n?/)[0].length:this.yylloc.last_column+t[0].length},this.yytext+=t[0],this.match+=t[0],this.matches=t,this.yyleng=this.yytext.length,this.options.ranges&&(this.yylloc.range=[this.offset,this.offset+=this.yyleng]),this._more=!1,this._backtrack=!1,this._input=this._input.slice(t[0].length),this.matched+=t[0],n=this.performAction.call(this,this.yy,this,i,this.conditionStack[this.conditionStack.length-1]),this.done&&this._input&&(this.done=!1),n)return n;if(this._backtrack)for(var r in e)this[r]=e[r];return!1},next:function(){if(this.done)return this.EOF;this._input||(this.done=!0),this._more||(this.yytext="",this.match="");for(var t,i,n,s,e=this._currentRules(),r=0;ri[0].length)){if(i=n,s=r,this.options.backtrack_lexer){if(!1!==(t=this.test_match(n,e[r])))return t;if(!this._backtrack)return!1;i=!1;continue}if(!this.options.flex)break}return i?!1!==(t=this.test_match(i,e[s]))&&t:""===this._input?this.EOF:this.parseError("Lexical error on line "+(this.yylineno+1)+". Unrecognized text.\n"+this.showPosition(),{text:"",token:null,line:this.yylineno})},lex:function(){return this.next()||this.lex()},begin:function(t){this.conditionStack.push(t)},popState:function(){return this.conditionStack.length-1>0?this.conditionStack.pop():this.conditionStack[0]},_currentRules:function(){return this.conditionStack.length&&this.conditionStack[this.conditionStack.length-1]?this.conditions[this.conditionStack[this.conditionStack.length-1]].rules:this.conditions.INITIAL.rules},topState:function(t){return(t=this.conditionStack.length-1-Math.abs(t||0))>=0?this.conditionStack[t]:"INITIAL"},pushState:function(t){this.begin(t)},stateStackSize:function(){return this.conditionStack.length},options:{"case-insensitive":!0},performAction:function(t,i,n,s){switch(n){case 0:return 4;case 1:return 9;case 2:return"space";case 3:return 10;case 4:return 6;case 5:return"TXT"}},rules:[/^(?:info\b)/i,/^(?:[\s\n\r]+)/i,/^(?:[\s]+)/i,/^(?:showInfo\b)/i,/^(?:$)/i,/^(?:.)/i],conditions:{INITIAL:{rules:[0,1,2,3,4,5],inclusive:!0}}},s.prototype=n,n.Parser=s,new s}();e.parser=e;let r={info:!1},h=r.info,o={parser:e,db:{clear:()=>{h=r.info},setInfo:t=>{h=t},getInfo:()=>h},renderer:{draw:(t,i,n)=>{s.l.debug("rendering info diagram\n"+t);let e=(0,s.A)(i);(0,s.i)(e,100,400,!0);let r=e.append("g");r.append("text").attr("x",100).attr("y",40).attr("class","version").attr("font-size",32).style("text-anchor","middle").text(`v${n}`)}}}}}]); -------------------------------------------------------------------------------- /streamlit_markdown/frontend/out/_next/static/chunks/327.3ff3126ba5f69a76.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[327],{7327:function(e,l,t){t.d(l,{diagram:function(){return g}});var a=t(6336),i=t(4218),n=t(5625),o=t(1835),s=t(4015);t(7484),t(7967),t(7856),t(1644),t(6060);let d=e=>o.e.sanitizeText(e,(0,o.c)()),r={dividerMargin:10,padding:5,textHeight:10,curve:void 0},c=function(e,l,t,a){let i=Object.keys(e);o.l.info("keys:",i),o.l.info(e),i.forEach(function(i){var n,s;let r=e[i],c={shape:"rect",id:r.id,domId:r.domId,labelText:d(r.id),labelStyle:"",style:"fill: none; stroke: black",padding:(null==(n=(0,o.c)().flowchart)?void 0:n.padding)??(null==(s=(0,o.c)().class)?void 0:s.padding)};l.setNode(r.id,c),b(r.classes,l,t,a,r.id),o.l.info("setNode",c)})},b=function(e,l,t,a,i){let n=Object.keys(e);o.l.info("keys:",n),o.l.info(e),n.filter(l=>e[l].parent==i).forEach(function(t){var n,s;let r=e[t],c=r.cssClasses.join(" "),b=(0,o.k)(r.styles),p=r.label??r.id,y={labelStyle:b.labelStyle,shape:"class_box",labelText:d(p),classData:r,rx:0,ry:0,class:c,style:b.style,id:r.id,domId:r.domId,tooltip:a.db.getTooltip(r.id,i)||"",haveCallback:r.haveCallback,link:r.link,width:"group"===r.type?500:void 0,type:r.type,padding:(null==(n=(0,o.c)().flowchart)?void 0:n.padding)??(null==(s=(0,o.c)().class)?void 0:s.padding)};l.setNode(r.id,y),i&&l.setParent(r.id,i),o.l.info("setNode",y)})},p=function(e,l,t,a){o.l.info(e),e.forEach(function(e,n){var s,c;let b={labelStyle:"",style:""},p=e.text,y={labelStyle:b.labelStyle,shape:"note",labelText:d(p),noteData:e,rx:0,ry:0,class:"",style:b.style,id:e.id,domId:e.id,tooltip:"",type:"note",padding:(null==(s=(0,o.c)().flowchart)?void 0:s.padding)??(null==(c=(0,o.c)().class)?void 0:c.padding)};if(l.setNode(e.id,y),o.l.info("setNode",y),!e.class||!(e.class in a))return;let f=t+n,u={id:`edgeNote${f}`,classes:"relation",pattern:"dotted",arrowhead:"none",startLabelRight:"",endLabelLeft:"",arrowTypeStart:"none",arrowTypeEnd:"none",style:"fill:none",labelStyle:"",curve:(0,o.n)(r.curve,i.c_6)};l.setEdge(e.id,e.class,u,f)})},y=function(e,l){let t=(0,o.c)().flowchart,a=0;e.forEach(function(e){var n;a++;let s={classes:"relation",pattern:1==e.relation.lineType?"dashed":"solid",id:`id_${e.id1}_${e.id2}_${a}`,arrowhead:"arrow_open"===e.type?"none":"normal",startLabelRight:"none"===e.relationTitle1?"":e.relationTitle1,endLabelLeft:"none"===e.relationTitle2?"":e.relationTitle2,arrowTypeStart:u(e.relation.type1),arrowTypeEnd:u(e.relation.type2),style:"fill:none",labelStyle:"",curve:(0,o.n)(null==t?void 0:t.curve,i.c_6)};if(o.l.info(s,e),void 0!==e.style){let l=(0,o.k)(e.style);s.style=l.style,s.labelStyle=l.labelStyle}e.text=e.title,void 0===e.text?void 0!==e.style&&(s.arrowheadStyle="fill: #333"):(s.arrowheadStyle="fill: #333",s.labelpos="c",(null==(n=(0,o.c)().flowchart)?void 0:n.htmlLabels)??(0,o.c)().htmlLabels?(s.labelType="html",s.label=''+e.text+""):(s.labelType="text",s.label=e.text.replace(o.e.lineBreakRegex,"\n"),void 0===e.style&&(s.style=s.style||"stroke: #333; stroke-width: 1.5px;fill:none"),s.labelStyle=s.labelStyle.replace("color:","fill:"))),l.setEdge(e.id1,e.id2,s,a)})},f=async function(e,l,t,a){let d;o.l.info("Drawing class - ",l);let r=(0,o.c)().flowchart??(0,o.c)().class,f=(0,o.c)().securityLevel;o.l.info("config:",r);let u=(null==r?void 0:r.nodeSpacing)??50,g=(null==r?void 0:r.rankSpacing)??50,h=new n.k({multigraph:!0,compound:!0}).setGraph({rankdir:a.db.getDirection(),nodesep:u,ranksep:g,marginx:8,marginy:8}).setDefaultEdgeLabel(function(){return{}}),v=a.db.getNamespaces(),w=a.db.getClasses(),k=a.db.getRelations(),x=a.db.getNotes();o.l.info(k),c(v,h,l,a),b(w,h,l,a),y(k,h),p(x,h,k.length+1,w),"sandbox"===f&&(d=(0,i.Ys)("#i"+l));let m="sandbox"===f?(0,i.Ys)(d.nodes()[0].contentDocument.body):(0,i.Ys)("body"),T=m.select(`[id="${l}"]`),S=m.select("#"+l+" g");if(await (0,s.r)(S,h,["aggregation","extension","composition","dependency","lollipop"],"classDiagram",l),o.u.insertTitle(T,"classTitleText",(null==r?void 0:r.titleTopMargin)??5,a.db.getDiagramTitle()),(0,o.o)(h,T,null==r?void 0:r.diagramPadding,null==r?void 0:r.useMaxWidth),!(null==r?void 0:r.htmlLabels)){let e="sandbox"===f?d.nodes()[0].contentDocument:document,t=e.querySelectorAll('[id="'+l+'"] .edgeLabel .label');for(let l of t){let t=l.getBBox(),a=e.createElementNS("http://www.w3.org/2000/svg","rect");a.setAttribute("rx",0),a.setAttribute("ry",0),a.setAttribute("width",t.width),a.setAttribute("height",t.height),l.insertBefore(a,l.firstChild)}}};function u(e){let l;switch(e){case 0:l="aggregation";break;case 1:l="extension";break;case 2:l="composition";break;case 3:l="dependency";break;case 4:l="lollipop";break;default:l="none"}return l}let g={parser:a.p,db:a.d,renderer:{setConf:function(e){r={...r,...e}},draw:f},styles:a.s,init:e=>{e.class||(e.class={}),e.class.arrowMarkerAbsolute=e.arrowMarkerAbsolute,a.d.clear()}}}}]); -------------------------------------------------------------------------------- /streamlit_markdown/frontend/out/_next/static/chunks/407.1f033106645f6827.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[407],{3349:function(e,t,r){r.d(t,{a:function(){return o}});var l=r(6225);function o(e,t){var r=e.append("foreignObject").attr("width","100000"),o=r.append("xhtml:div");o.attr("xmlns","http://www.w3.org/1999/xhtml");var a=t.label;switch(typeof a){case"function":o.insert(a);break;case"object":o.insert(function(){return a});break;default:o.html(a)}l.bg(o,t.labelStyle),o.style("display","inline-block"),o.style("white-space","nowrap");var n=o.node().getBoundingClientRect();return r.attr("width",n.width).attr("height",n.height),r}},6225:function(e,t,r){r.d(t,{$p:function(){return d},O1:function(){return n},WR:function(){return p},bF:function(){return a},bg:function(){return c}});var l=r(7514),o=r(3234);function a(e,t){return!!e.children(t).length}function n(e){return s(e.v)+":"+s(e.w)+":"+s(e.name)}var i=/:/g;function s(e){return e?String(e).replace(i,"\\:"):""}function c(e,t){t&&e.attr("style",t)}function d(e,t,r){t&&e.attr("class",t).attr("class",r+" "+e.attr("class"))}function p(e,t){var r=t.graph();if(l.Z(r)){var a=r.transition;if(o.Z(a))return a(e)}return e}},9792:function(e,t,r){var l=r(1691),o=r(1610);t.Z=(e,t)=>l.Z.lang.round(o.Z.parse(e)[t])},407:function(e,t,r){r.d(t,{diagram:function(){return n}});var l=r(7474),o=r(8583),a=r(1835);r(4218),r(5625),r(1644),r(6060),r(7484),r(7967),r(7856);let n={parser:l.p,db:l.f,renderer:o.f,styles:o.a,init:e=>{e.flowchart||(e.flowchart={}),e.flowchart.arrowMarkerAbsolute=e.arrowMarkerAbsolute,(0,a.p)({flowchart:{arrowMarkerAbsolute:e.arrowMarkerAbsolute}}),o.f.setConf(e.flowchart),l.f.clear(),l.f.setGen("gen-2")}}},8583:function(e,t,r){r.d(t,{a:function(){return h},f:function(){return f}});var l=r(5625),o=r(4218),a=r(1835),n=r(4015),i=r(3349),s=r(9792),c=r(1117);let d={},p=async function(e,t,r,l,o,n){let s=l.select(`[id="${r}"]`),c=Object.keys(e);for(let r of c){let l;let c=e[r],d="default";c.classes.length>0&&(d=c.classes.join(" ")),d+=" flowchart-label";let p=(0,a.k)(c.styles),b=void 0!==c.text?c.text:c.id;if(a.l.info("vertex",c,c.labelType),"markdown"===c.labelType)a.l.info("vertex",c,c.labelType);else if((0,a.m)((0,a.c)().flowchart.htmlLabels)){let e={label:b};(l=(0,i.a)(s,e).node()).parentNode.removeChild(l)}else{let e=o.createElementNS("http://www.w3.org/2000/svg","text");e.setAttribute("style",p.labelStyle.replace("color:","fill:"));let t=b.split(a.e.lineBreakRegex);for(let r of t){let t=o.createElementNS("http://www.w3.org/2000/svg","tspan");t.setAttributeNS("http://www.w3.org/XML/1998/namespace","xml:space","preserve"),t.setAttribute("dy","1em"),t.setAttribute("x","1"),t.textContent=r,e.appendChild(t)}l=e}let u=0,f="";switch(c.type){case"round":u=5,f="rect";break;case"square":case"group":default:f="rect";break;case"diamond":f="question";break;case"hexagon":f="hexagon";break;case"odd":case"odd_right":f="rect_left_inv_arrow";break;case"lean_right":f="lean_right";break;case"lean_left":f="lean_left";break;case"trapezoid":f="trapezoid";break;case"inv_trapezoid":f="inv_trapezoid";break;case"circle":f="circle";break;case"ellipse":f="ellipse";break;case"stadium":f="stadium";break;case"subroutine":f="subroutine";break;case"cylinder":f="cylinder";break;case"doublecircle":f="doublecircle"}let w=await (0,a.r)(b,(0,a.c)());t.setNode(c.id,{labelStyle:p.labelStyle,shape:f,labelText:w,labelType:c.labelType,rx:u,ry:u,class:d,style:p.style,id:c.id,link:c.link,linkTarget:c.linkTarget,tooltip:n.db.getTooltip(c.id)||"",domId:n.db.lookUpDomId(c.id),haveCallback:c.haveCallback,width:"group"===c.type?500:void 0,dir:c.dir,type:c.type,props:c.props,padding:(0,a.c)().flowchart.padding}),a.l.info("setNode",{labelStyle:p.labelStyle,labelType:c.labelType,shape:f,labelText:w,rx:u,ry:u,class:d,style:p.style,id:c.id,domId:n.db.lookUpDomId(c.id),width:"group"===c.type?500:void 0,type:c.type,dir:c.dir,props:c.props,padding:(0,a.c)().flowchart.padding})}},b=async function(e,t,r){let l,n;a.l.info("abc78 edges = ",e);let i=0,s={};if(void 0!==e.defaultStyle){let t=(0,a.k)(e.defaultStyle);l=t.style,n=t.labelStyle}for(let r of e){i++;let c="L-"+r.start+"-"+r.end;void 0===s[c]?(s[c]=0,a.l.info("abc78 new entry",c,s[c])):(s[c]++,a.l.info("abc78 new entry",c,s[c]));let p=c+"-"+s[c];a.l.info("abc78 new link id to be used is",c,p,s[c]);let b="LS-"+r.start,u="LE-"+r.end,f={style:"",labelStyle:""};switch(f.minlen=r.length||1,"arrow_open"===r.type?f.arrowhead="none":f.arrowhead="normal",f.arrowTypeStart="arrow_open",f.arrowTypeEnd="arrow_open",r.type){case"double_arrow_cross":f.arrowTypeStart="arrow_cross";case"arrow_cross":f.arrowTypeEnd="arrow_cross";break;case"double_arrow_point":f.arrowTypeStart="arrow_point";case"arrow_point":f.arrowTypeEnd="arrow_point";break;case"double_arrow_circle":f.arrowTypeStart="arrow_circle";case"arrow_circle":f.arrowTypeEnd="arrow_circle"}let w="",h="";switch(r.stroke){case"normal":w="fill:none;",void 0!==l&&(w=l),void 0!==n&&(h=n),f.thickness="normal",f.pattern="solid";break;case"dotted":f.thickness="normal",f.pattern="dotted",f.style="fill:none;stroke-width:2px;stroke-dasharray:3;";break;case"thick":f.thickness="thick",f.pattern="solid",f.style="stroke-width: 3.5px;fill:none;";break;case"invisible":f.thickness="invisible",f.pattern="solid",f.style="stroke-width: 0;fill:none;"}if(void 0!==r.style){let e=(0,a.k)(r.style);w=e.style,h=e.labelStyle}f.style=f.style+=w,f.labelStyle=f.labelStyle+=h,void 0!==r.interpolate?f.curve=(0,a.n)(r.interpolate,o.c_6):void 0!==e.defaultInterpolate?f.curve=(0,a.n)(e.defaultInterpolate,o.c_6):f.curve=(0,a.n)(d.curve,o.c_6),void 0===r.text?void 0!==r.style&&(f.arrowheadStyle="fill: #333"):(f.arrowheadStyle="fill: #333",f.labelpos="c"),f.labelType=r.labelType,f.label=await (0,a.r)(r.text.replace(a.e.lineBreakRegex,"\n"),(0,a.c)()),void 0===r.style&&(f.style=f.style||"stroke: #333; stroke-width: 1.5px;fill:none;"),f.labelStyle=f.labelStyle.replace("color:","fill:"),f.id=p,f.classes="flowchart-link "+b+" "+u,t.setEdge(r.start,r.end,f,i)}},u=async function(e,t,r,i){let s,c;a.l.info("Drawing flowchart");let d=i.db.getDirection();void 0===d&&(d="TD");let{securityLevel:u,flowchart:f}=(0,a.c)(),w=f.nodeSpacing||50,h=f.rankSpacing||50;"sandbox"===u&&(s=(0,o.Ys)("#i"+t));let g="sandbox"===u?(0,o.Ys)(s.nodes()[0].contentDocument.body):(0,o.Ys)("body"),y="sandbox"===u?s.nodes()[0].contentDocument:document,k=new l.k({multigraph:!0,compound:!0}).setGraph({rankdir:d,nodesep:w,ranksep:h,marginx:0,marginy:0}).setDefaultEdgeLabel(function(){return{}}),x=i.db.getSubGraphs();a.l.info("Subgraphs - ",x);for(let e=x.length-1;e>=0;e--)c=x[e],a.l.info("Subgraph - ",c),i.db.addVertex(c.id,{text:c.title,type:c.labelType},"group",void 0,c.classes,c.dir);let v=i.db.getVertices(),m=i.db.getEdges();a.l.info("Edges",m);let S=0;for(S=x.length-1;S>=0;S--){c=x[S],(0,o.td_)("cluster").append("text");for(let e=0;e{let r=s.Z,l=r(e,"r"),o=r(e,"g"),a=r(e,"b");return c.Z(l,o,a,t)},h=e=>`.label { 2 | font-family: ${e.fontFamily}; 3 | color: ${e.nodeTextColor||e.textColor}; 4 | } 5 | .cluster-label text { 6 | fill: ${e.titleColor}; 7 | } 8 | .cluster-label span,p { 9 | color: ${e.titleColor}; 10 | } 11 | 12 | .label text,span,p { 13 | fill: ${e.nodeTextColor||e.textColor}; 14 | color: ${e.nodeTextColor||e.textColor}; 15 | } 16 | 17 | .node rect, 18 | .node circle, 19 | .node ellipse, 20 | .node polygon, 21 | .node path { 22 | fill: ${e.mainBkg}; 23 | stroke: ${e.nodeBorder}; 24 | stroke-width: 1px; 25 | } 26 | .flowchart-label text { 27 | text-anchor: middle; 28 | } 29 | // .flowchart-label .text-outer-tspan { 30 | // text-anchor: middle; 31 | // } 32 | // .flowchart-label .text-inner-tspan { 33 | // text-anchor: start; 34 | // } 35 | 36 | .node .katex path { 37 | fill: #000; 38 | stroke: #000; 39 | stroke-width: 1px; 40 | } 41 | 42 | .node .label { 43 | text-align: center; 44 | } 45 | .node.clickable { 46 | cursor: pointer; 47 | } 48 | 49 | .arrowheadPath { 50 | fill: ${e.arrowheadColor}; 51 | } 52 | 53 | .edgePath .path { 54 | stroke: ${e.lineColor}; 55 | stroke-width: 2.0px; 56 | } 57 | 58 | .flowchart-link { 59 | stroke: ${e.lineColor}; 60 | fill: none; 61 | } 62 | 63 | .edgeLabel { 64 | background-color: ${e.edgeLabelBackground}; 65 | rect { 66 | opacity: 0.5; 67 | background-color: ${e.edgeLabelBackground}; 68 | fill: ${e.edgeLabelBackground}; 69 | } 70 | text-align: center; 71 | } 72 | 73 | /* For html labels only */ 74 | .labelBkg { 75 | background-color: ${w(e.edgeLabelBackground,.5)}; 76 | // background-color: 77 | } 78 | 79 | .cluster rect { 80 | fill: ${e.clusterBkg}; 81 | stroke: ${e.clusterBorder}; 82 | stroke-width: 1px; 83 | } 84 | 85 | .cluster text { 86 | fill: ${e.titleColor}; 87 | } 88 | 89 | .cluster span,p { 90 | color: ${e.titleColor}; 91 | } 92 | /* .cluster div { 93 | color: ${e.titleColor}; 94 | } */ 95 | 96 | div.mermaidTooltip { 97 | position: absolute; 98 | text-align: center; 99 | max-width: 200px; 100 | padding: 2px; 101 | font-family: ${e.fontFamily}; 102 | font-size: 12px; 103 | background: ${e.tertiaryColor}; 104 | border: 1px solid ${e.border2}; 105 | border-radius: 2px; 106 | pointer-events: none; 107 | z-index: 100; 108 | } 109 | 110 | .flowchartTitleText { 111 | text-anchor: middle; 112 | font-size: 18px; 113 | fill: ${e.textColor}; 114 | } 115 | `}}]); -------------------------------------------------------------------------------- /streamlit_markdown/frontend/out/_next/static/chunks/449.368de69e44e91daf.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[449],{2544:function(t,e,n){n.d(e,{k:function(){return N}});var r=n(7452),i=n(2002),o=n(3234),u=n(7179),s=n(3445),c=n(9697),a=n(870),f=n(9360),h=n(626),l=n(9581),d=n(3001),Z=n(1692),v=function(t){return t!=t},b=function(t,e,n){for(var r=n-1,i=t.length;++r-1},p=function(t,e,n){for(var r=-1,i=null==t?0:t.length;++r=200){var a=e?null:m(t);if(a)return(0,y.Z)(a);u=!1,i=g.Z,c=new d.Z}else c=e?[]:s;t:for(;++r1?r.setNode(t,e):r.setNode(t)}),this}setNode(t,e){return r.Z(this._nodes,t)?(arguments.length>1&&(this._nodes[t]=e),this):(this._nodes[t]=arguments.length>1?e:this._defaultNodeLabelFn(t),this._isCompound&&(this._parent[t]="\x00",this._children[t]={},this._children["\x00"][t]=!0),this._in[t]={},this._preds[t]={},this._out[t]={},this._sucs[t]={},++this._nodeCount,this)}node(t){return this._nodes[t]}hasNode(t){return r.Z(this._nodes,t)}removeNode(t){var e=this;if(r.Z(this._nodes,t)){var n=function(t){e.removeEdge(e._edgeObjs[t])};delete this._nodes[t],this._isCompound&&(this._removeFromParentsChildList(t),delete this._parent[t],a.Z(this.children(t),function(t){e.setParent(t)}),delete this._children[t]),a.Z(u.Z(this._in[t]),n),delete this._in[t],delete this._preds[t],a.Z(u.Z(this._out[t]),n),delete this._out[t],delete this._sucs[t],--this._nodeCount}return this}setParent(t,e){if(!this._isCompound)throw Error("Cannot set parent in a non-compound graph");if(f.Z(e))e="\x00";else{e+="";for(var n=e;!f.Z(n);n=this.parent(n))if(n===t)throw Error("Setting "+e+" as parent of "+t+" would create a cycle");this.setNode(e)}return this.setNode(t),this._removeFromParentsChildList(t),this._parent[t]=e,this._children[e][t]=!0,this}_removeFromParentsChildList(t){delete this._children[this._parent[t]][t]}parent(t){if(this._isCompound){var e=this._parent[t];if("\x00"!==e)return e}}children(t){if(f.Z(t)&&(t="\x00"),this._isCompound){var e=this._children[t];if(e)return u.Z(e)}else if("\x00"===t)return this.nodes();else if(this.hasNode(t))return[]}predecessors(t){var e=this._preds[t];if(e)return u.Z(e)}successors(t){var e=this._sucs[t];if(e)return u.Z(e)}neighbors(t){var e=this.predecessors(t);if(e)return C(e,this.successors(t))}isLeaf(t){return 0===(this.isDirected()?this.successors(t):this.neighbors(t)).length}filterNodes(t){var e=new this.constructor({directed:this._isDirected,multigraph:this._isMultigraph,compound:this._isCompound});e.setGraph(this.graph());var n=this;a.Z(this._nodes,function(n,r){t(r)&&e.setNode(r,n)}),a.Z(this._edgeObjs,function(t){e.hasNode(t.v)&&e.hasNode(t.w)&&e.setEdge(t,n.edge(t))});var r={};return this._isCompound&&a.Z(e.nodes(),function(t){e.setParent(t,function t(i){var o=n.parent(i);return void 0===o||e.hasNode(o)?(r[i]=o,o):o in r?r[o]:t(o)}(t))}),e}setDefaultEdgeLabel(t){return o.Z(t)||(t=i.Z(t)),this._defaultEdgeLabelFn=t,this}edgeCount(){return this._edgeCount}edges(){return E.Z(this._edgeObjs)}setPath(t,e){var n=this,r=arguments;return A.Z(t,function(t,i){return r.length>1?n.setEdge(t,i,e):n.setEdge(t,i),i}),this}setEdge(){var t,e,n,i,o=!1,u=arguments[0];"object"==typeof u&&null!==u&&"v"in u?(t=u.v,e=u.w,n=u.name,2==arguments.length&&(i=arguments[1],o=!0)):(t=u,e=arguments[1],n=arguments[3],arguments.length>2&&(i=arguments[2],o=!0)),t=""+t,e=""+e,f.Z(n)||(n=""+n);var s=x(this._isDirected,t,e,n);if(r.Z(this._edgeLabels,s))return o&&(this._edgeLabels[s]=i),this;if(!f.Z(n)&&!this._isMultigraph)throw Error("Cannot set a named edge when isMultigraph = false");this.setNode(t),this.setNode(e),this._edgeLabels[s]=o?i:this._defaultEdgeLabelFn(t,e,n);var c=function(t,e,n,r){var i=""+e,o=""+n;if(!t&&i>o){var u=i;i=o,o=u}var s={v:i,w:o};return r&&(s.name=r),s}(this._isDirected,t,e,n);return t=c.v,e=c.w,Object.freeze(c),this._edgeObjs[s]=c,L(this._preds[e],t),L(this._sucs[t],e),this._in[e][s]=c,this._out[t][s]=c,this._edgeCount++,this}edge(t,e,n){var r=1==arguments.length?k(this._isDirected,arguments[0]):x(this._isDirected,t,e,n);return this._edgeLabels[r]}hasEdge(t,e,n){var i=1==arguments.length?k(this._isDirected,arguments[0]):x(this._isDirected,t,e,n);return r.Z(this._edgeLabels,i)}removeEdge(t,e,n){var r=1==arguments.length?k(this._isDirected,arguments[0]):x(this._isDirected,t,e,n),i=this._edgeObjs[r];return i&&(t=i.v,e=i.w,delete this._edgeLabels[r],delete this._edgeObjs[r],D(this._preds[e],t),D(this._sucs[t],e),delete this._in[e][r],delete this._out[t][r],this._edgeCount--),this}inEdges(t,e){var n=this._in[t];if(n){var r=E.Z(n);return e?s.Z(r,function(t){return t.v===e}):r}}outEdges(t,e){var n=this._out[t];if(n){var r=E.Z(n);return e?s.Z(r,function(t){return t.w===e}):r}}nodeEdges(t,e){var n=this.inEdges(t,e);if(n)return n.concat(this.outEdges(t,e))}}function L(t,e){t[e]?t[e]++:t[e]=1}function D(t,e){--t[e]||delete t[e]}function x(t,e,n,r){var i=""+e,o=""+n;if(!t&&i>o){var u=i;i=o,o=u}return i+"\x01"+o+"\x01"+(f.Z(r)?"\x00":r)}function k(t,e){return x(t,e.v,e.w,e.name)}N.prototype._nodeCount=0,N.prototype._edgeCount=0},5625:function(t,e,n){n.d(e,{k:function(){return r.k}});var r=n(2544)},3001:function(t,e,n){n.d(e,{Z:function(){return o}});var r=n(7834);function i(t){var e=-1,n=null==t?0:t.length;for(this.__data__=new r.Z;++e0&&i(f)?n>1?t(f,n-1,i,o,u):(0,r.Z)(u,f):o||(u[u.length]=f)}return u}},2693:function(t,e,n){var r=n(1395),i=n(7179);e.Z=function(t,e){return t&&(0,r.Z)(t,e,i.Z)}},3317:function(t,e,n){var r=n(2823),i=n(2656);e.Z=function(t,e){e=(0,r.Z)(e,t);for(var n=0,o=e.length;null!=t&&nf))return!1;var l=c.get(t),d=c.get(e);if(l&&d)return l==e&&d==t;var Z=-1,v=!0,b=2&n?new i.Z:void 0;for(c.set(t,e),c.set(e,t);++Z"),e},p=function(t,e,a,r){let{displayText:i,cssStyle:n}=e.getDisplayDetails(),d=t.append("tspan").attr("x",r.padding).text(i);""!==n&&d.attr("style",e.cssStyle),a||d.attr("dy",r.textHeight)},g={getClassTitleString:s,drawClass:function(t,e,a,r){let i,n,d,l;o.l.debug("Rendering class ",e,a);let g=e.id,h={id:g,label:e.id,width:0,height:0},c=t.append("g").attr("id",r.db.lookUpDomId(g)).attr("class","classGroup");i=e.link?c.append("svg:a").attr("xlink:href",e.link).attr("target",e.linkTarget).append("text").attr("y",a.textHeight+a.padding).attr("x",0):c.append("text").attr("y",a.textHeight+a.padding).attr("x",0);let f=!0;e.annotations.forEach(function(t){let e=i.append("tspan").text("\xab"+t+"\xbb");f||e.attr("dy",a.textHeight),f=!1});let x=s(e),u=i.append("tspan").text(x).attr("class","title");f||u.attr("dy",a.textHeight);let y=i.node().getBBox().height;if(e.members.length>0){n=c.append("line").attr("x1",0).attr("y1",a.padding+y+a.dividerMargin/2).attr("y2",a.padding+y+a.dividerMargin/2);let t=c.append("text").attr("x",a.padding).attr("y",y+a.dividerMargin+a.textHeight).attr("fill","white").attr("class","classText");f=!0,e.members.forEach(function(e){p(t,e,f,a),f=!1}),d=t.node().getBBox()}if(e.methods.length>0){l=c.append("line").attr("x1",0).attr("y1",a.padding+y+a.dividerMargin+d.height).attr("y2",a.padding+y+a.dividerMargin+d.height);let t=c.append("text").attr("x",a.padding).attr("y",y+2*a.dividerMargin+d.height+a.textHeight).attr("fill","white").attr("class","classText");f=!0,e.methods.forEach(function(e){p(t,e,f,a),f=!1})}let b=c.node().getBBox();var m=" ";e.cssClasses.length>0&&(m+=e.cssClasses.join(" "));let w=c.insert("rect",":first-child").attr("x",0).attr("y",0).attr("width",b.width+2*a.padding).attr("height",b.height+a.padding+.5*a.dividerMargin).attr("class",m),k=w.node().getBBox().width;return i.node().childNodes.forEach(function(t){t.setAttribute("x",(k-t.getBBox().width)/2)}),e.tooltip&&i.insert("title").text(e.tooltip),n&&n.attr("x2",k),l&&l.attr("x2",k),h.width=k,h.height=b.height+a.padding+.5*a.dividerMargin,h},drawEdge:function(t,e,a,r,n){let d,s,p,g,h,c;let f=function(t){switch(t){case n.db.relationType.AGGREGATION:return"aggregation";case n.db.relationType.EXTENSION:return"extension";case n.db.relationType.COMPOSITION:return"composition";case n.db.relationType.DEPENDENCY:return"dependency";case n.db.relationType.LOLLIPOP:return"lollipop"}};e.points=e.points.filter(t=>!Number.isNaN(t.y));let x=e.points,u=(0,i.jvg)().x(function(t){return t.x}).y(function(t){return t.y}).curve(i.$0Z),y=t.append("path").attr("d",u(x)).attr("id","edge"+l).attr("class","relation"),b="";r.arrowMarkerAbsolute&&(b=(b=(b=window.location.protocol+"//"+window.location.host+window.location.pathname+window.location.search).replace(/\(/g,"\\(")).replace(/\)/g,"\\)")),1==a.relation.lineType&&y.attr("class","relation dashed-line"),10==a.relation.lineType&&y.attr("class","relation dotted-line"),"none"!==a.relation.type1&&y.attr("marker-start","url("+b+"#"+f(a.relation.type1)+"Start)"),"none"!==a.relation.type2&&y.attr("marker-end","url("+b+"#"+f(a.relation.type2)+"End)");let m=e.points.length,w=o.u.calcLabelPosition(e.points);if(d=w.x,s=w.y,m%2!=0&&m>1){let t=o.u.calcCardinalityPosition("none"!==a.relation.type1,e.points,e.points[0]),r=o.u.calcCardinalityPosition("none"!==a.relation.type2,e.points,e.points[m-1]);o.l.debug("cardinality_1_point "+JSON.stringify(t)),o.l.debug("cardinality_2_point "+JSON.stringify(r)),p=t.x,g=t.y,h=r.x,c=r.y}if(void 0!==a.title){let e=t.append("g").attr("class","classLabel"),i=e.append("text").attr("class","label").attr("x",d).attr("y",s).attr("fill","red").attr("text-anchor","middle").text(a.title);window.label=i;let n=i.node().getBBox();e.insert("rect",":first-child").attr("class","box").attr("x",n.x-r.padding/2).attr("y",n.y-r.padding/2).attr("width",n.width+r.padding).attr("height",n.height+r.padding)}if(o.l.info("Rendering relation "+JSON.stringify(a)),void 0!==a.relationTitle1&&"none"!==a.relationTitle1){let e=t.append("g").attr("class","cardinality");e.append("text").attr("class","type1").attr("x",p).attr("y",g).attr("fill","black").attr("font-size","6").text(a.relationTitle1)}if(void 0!==a.relationTitle2&&"none"!==a.relationTitle2){let e=t.append("g").attr("class","cardinality");e.append("text").attr("class","type2").attr("x",h).attr("y",c).attr("fill","black").attr("font-size","6").text(a.relationTitle2)}l++},drawNote:function(t,e,a,r){o.l.debug("Rendering note ",e,a);let i=e.id,n={id:i,text:e.text,width:0,height:0},d=t.append("g").attr("id",i).attr("class","classGroup"),l=d.append("text").attr("y",a.textHeight+a.padding).attr("x",0),s=JSON.parse(`"${e.text}"`).split("\n");s.forEach(function(t){o.l.debug(`Adding line: ${t}`),l.append("tspan").text(t).attr("class","title").attr("dy",a.textHeight)});let p=d.node().getBBox(),g=d.insert("rect",":first-child").attr("x",0).attr("y",0).attr("width",p.width+2*a.padding).attr("height",p.height+s.length*a.textHeight+a.padding+.5*a.dividerMargin),h=g.node().getBBox().width;return l.node().childNodes.forEach(function(t){t.setAttribute("x",(h-t.getBBox().width)/2)}),n.width=h,n.height=p.height+s.length*a.textHeight+a.padding+.5*a.dividerMargin,n}},h={},c=function(t){let e=Object.entries(h).find(e=>e[1].label===t);if(e)return e[0]},f=function(t){t.append("defs").append("marker").attr("id","extensionStart").attr("class","extension").attr("refX",0).attr("refY",7).attr("markerWidth",190).attr("markerHeight",240).attr("orient","auto").append("path").attr("d","M 1,7 L18,13 V 1 Z"),t.append("defs").append("marker").attr("id","extensionEnd").attr("refX",19).attr("refY",7).attr("markerWidth",20).attr("markerHeight",28).attr("orient","auto").append("path").attr("d","M 1,1 V 13 L18,7 Z"),t.append("defs").append("marker").attr("id","compositionStart").attr("class","extension").attr("refX",0).attr("refY",7).attr("markerWidth",190).attr("markerHeight",240).attr("orient","auto").append("path").attr("d","M 18,7 L9,13 L1,7 L9,1 Z"),t.append("defs").append("marker").attr("id","compositionEnd").attr("refX",19).attr("refY",7).attr("markerWidth",20).attr("markerHeight",28).attr("orient","auto").append("path").attr("d","M 18,7 L9,13 L1,7 L9,1 Z"),t.append("defs").append("marker").attr("id","aggregationStart").attr("class","extension").attr("refX",0).attr("refY",7).attr("markerWidth",190).attr("markerHeight",240).attr("orient","auto").append("path").attr("d","M 18,7 L9,13 L1,7 L9,1 Z"),t.append("defs").append("marker").attr("id","aggregationEnd").attr("refX",19).attr("refY",7).attr("markerWidth",20).attr("markerHeight",28).attr("orient","auto").append("path").attr("d","M 18,7 L9,13 L1,7 L9,1 Z"),t.append("defs").append("marker").attr("id","dependencyStart").attr("class","extension").attr("refX",0).attr("refY",7).attr("markerWidth",190).attr("markerHeight",240).attr("orient","auto").append("path").attr("d","M 5,7 L9,13 L1,7 L9,1 Z"),t.append("defs").append("marker").attr("id","dependencyEnd").attr("refX",19).attr("refY",7).attr("markerWidth",20).attr("markerHeight",28).attr("orient","auto").append("path").attr("d","M 18,7 L9,13 L14,7 L9,1 Z")},x={parser:r.p,db:r.d,renderer:{draw:function(t,e,a,r){let l;let s=(0,o.c)().class;h={},o.l.info("Rendering diagram "+t);let p=(0,o.c)().securityLevel;"sandbox"===p&&(l=(0,i.Ys)("#i"+e));let x="sandbox"===p?(0,i.Ys)(l.nodes()[0].contentDocument.body):(0,i.Ys)("body"),u=x.select(`[id='${e}']`);f(u);let y=new d.k({multigraph:!0});y.setGraph({isMultiGraph:!0}),y.setDefaultEdgeLabel(function(){return{}});let b=r.db.getClasses(),m=Object.keys(b);for(let t of m){let e=b[t],a=g.drawClass(u,e,s,r);h[a.id]=a,y.setNode(a.id,a),o.l.info("Org height: "+a.height)}let w=r.db.getRelations();w.forEach(function(t){o.l.info("tjoho"+c(t.id1)+c(t.id2)+JSON.stringify(t)),y.setEdge(c(t.id1),c(t.id2),{relation:t},t.title||"DEFAULT")});let k=r.db.getNotes();k.forEach(function(t){o.l.debug(`Adding note: ${JSON.stringify(t)}`);let e=g.drawNote(u,t,s,r);h[e.id]=e,y.setNode(e.id,e),t.class&&t.class in b&&y.setEdge(t.id,c(t.class),{relation:{id1:t.id,id2:t.class,relation:{type1:"none",type2:"none",lineType:10}}},"DEFAULT")}),(0,n.bK)(y),y.nodes().forEach(function(t){void 0!==t&&void 0!==y.node(t)&&(o.l.debug("Node "+t+": "+JSON.stringify(y.node(t))),x.select("#"+(r.db.lookUpDomId(t)||t)).attr("transform","translate("+(y.node(t).x-y.node(t).width/2)+","+(y.node(t).y-y.node(t).height/2)+" )"))}),y.edges().forEach(function(t){void 0!==t&&void 0!==y.edge(t)&&(o.l.debug("Edge "+t.v+" -> "+t.w+": "+JSON.stringify(y.edge(t))),g.drawEdge(u,y.edge(t),y.edge(t).relation,s,r))});let E=u.node().getBBox(),L=E.width+40,N=E.height+40;(0,o.i)(u,N,L,s.useMaxWidth);let v=`${E.x-20} ${E.y-20} ${L} ${N}`;o.l.debug(`viewBox ${v}`),u.attr("viewBox",v)}},styles:r.s,init:t=>{t.class||(t.class={}),t.class.arrowMarkerAbsolute=t.arrowMarkerAbsolute,r.d.clear()}}}}]); -------------------------------------------------------------------------------- /streamlit_markdown/frontend/out/_next/static/chunks/777.0efe89c210d8a0ac.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[777],{5777:function(e,t,o){o.d(t,{diagram:function(){return E}});var l=o(7474),r=o(4218),a=o(5200),i=o(1835),n=o(7295);o(7484),o(7967),o(7856);let s=(e,t,o)=>{let{parentById:l}=o,r=new Set,a=e;for(;a;){if(r.add(a),a===t)return a;a=l[a]}for(a=t;a;){if(r.has(a))return a;a=l[a]}return"root"},d=new n,c={},h={},p={},u=async function(e,t,o,l,r,n,s){let d=o.select(`[id="${t}"]`),c=d.insert("g").attr("class","nodes"),h=Object.keys(e);return await Promise.all(h.map(async function(t){let o,s;let d=e[t],h="default";d.classes.length>0&&(h=d.classes.join(" ")),h+=" flowchart-label";let u=(0,i.k)(d.styles),b=void 0!==d.text?d.text:d.id,y={width:0,height:0},g=[{id:d.id+"-west",layoutOptions:{"port.side":"WEST"}},{id:d.id+"-east",layoutOptions:{"port.side":"EAST"}},{id:d.id+"-south",layoutOptions:{"port.side":"SOUTH"}},{id:d.id+"-north",layoutOptions:{"port.side":"NORTH"}}],f=0,w="",k={};switch(d.type){case"round":f=5,w="rect";break;case"square":case"group":default:w="rect";break;case"diamond":w="question",k={portConstraints:"FIXED_SIDE"};break;case"hexagon":w="hexagon";break;case"odd":case"odd_right":w="rect_left_inv_arrow";break;case"lean_right":w="lean_right";break;case"lean_left":w="lean_left";break;case"trapezoid":w="trapezoid";break;case"inv_trapezoid":w="inv_trapezoid";break;case"circle":w="circle";break;case"ellipse":w="ellipse";break;case"stadium":w="stadium";break;case"subroutine":w="subroutine";break;case"cylinder":w="cylinder";break;case"doublecircle":w="doublecircle"}let x={labelStyle:u.labelStyle,shape:w,labelText:b,labelType:d.labelType,rx:f,ry:f,class:h,style:u.style,id:d.id,link:d.link,linkTarget:d.linkTarget,tooltip:r.db.getTooltip(d.id)||"",domId:r.db.lookUpDomId(d.id),haveCallback:d.haveCallback,width:"group"===d.type?500:void 0,dir:d.dir,type:d.type,props:d.props,padding:(0,i.F)().flowchart.padding};if("group"!==x.type)o=(s=await (0,a.e)(c,x,d.dir)).node().getBBox();else{l.createElementNS("http://www.w3.org/2000/svg","text");let{shapeSvg:e,bbox:t}=await (0,a.l)(c,x,void 0,!0);y.width=t.width,y.wrappingWidth=(0,i.F)().flowchart.wrappingWidth,y.height=t.height,y.labelNode=e.node(),x.labelData=y}let m={id:d.id,ports:"diamond"===d.type?g:[],layoutOptions:k,labelText:b,labelData:y,domId:r.db.lookUpDomId(d.id),width:null==o?void 0:o.width,height:null==o?void 0:o.height,type:d.type,el:s,parent:n.parentById[d.id]};p[x.id]=m})),s},b=(e,t,o)=>{let l={TB:{in:{north:"north"},out:{south:"west",west:"east",east:"south"}},LR:{in:{west:"west"},out:{east:"south",south:"north",north:"east"}},RL:{in:{east:"east"},out:{west:"north",north:"south",south:"west"}},BT:{in:{south:"south"},out:{north:"east",east:"west",west:"north"}}};return l.TD=l.TB,l[o][t][e]},y=(e,t,o)=>{if(i.l.info("getNextPort",{node:e,edgeDirection:t,graphDirection:o}),!c[e])switch(o){case"TB":case"TD":c[e]={inPosition:"north",outPosition:"south"};break;case"BT":c[e]={inPosition:"south",outPosition:"north"};break;case"RL":c[e]={inPosition:"east",outPosition:"west"};break;case"LR":c[e]={inPosition:"west",outPosition:"east"}}let l="in"===t?c[e].inPosition:c[e].outPosition;return"in"===t?c[e].inPosition=b(c[e].inPosition,t,o):c[e].outPosition=b(c[e].outPosition,t,o),l},g=(e,t)=>{let o=e.start,l=e.end,r=o,a=l,i=p[o],n=p[l];return i&&n?("diamond"===i.type&&(o=`${o}-${y(o,"out",t)}`),"diamond"===n.type&&(l=`${l}-${y(l,"in",t)}`),{source:o,target:l,sourceId:r,targetId:a}):{source:o,target:l}},f=function(e,t,o,l){let n,s;i.l.info("abc78 edges = ",e);let d=l.insert("g").attr("class","edgeLabels"),c={},p=t.db.getDirection();if(void 0!==e.defaultStyle){let t=(0,i.k)(e.defaultStyle);n=t.style,s=t.labelStyle}return e.forEach(function(t){let l="L-"+t.start+"-"+t.end;void 0===c[l]?(c[l]=0,i.l.info("abc78 new entry",l,c[l])):(c[l]++,i.l.info("abc78 new entry",l,c[l]));let u=l+"-"+c[l];i.l.info("abc78 new link id to be used is",l,u,c[l]);let b="LS-"+t.start,y="LE-"+t.end,f={style:"",labelStyle:""};switch(f.minlen=t.length||1,"arrow_open"===t.type?f.arrowhead="none":f.arrowhead="normal",f.arrowTypeStart="arrow_open",f.arrowTypeEnd="arrow_open",t.type){case"double_arrow_cross":f.arrowTypeStart="arrow_cross";case"arrow_cross":f.arrowTypeEnd="arrow_cross";break;case"double_arrow_point":f.arrowTypeStart="arrow_point";case"arrow_point":f.arrowTypeEnd="arrow_point";break;case"double_arrow_circle":f.arrowTypeStart="arrow_circle";case"arrow_circle":f.arrowTypeEnd="arrow_circle"}let w="",k="";switch(t.stroke){case"normal":w="fill:none;",void 0!==n&&(w=n),void 0!==s&&(k=s),f.thickness="normal",f.pattern="solid";break;case"dotted":f.thickness="normal",f.pattern="dotted",f.style="fill:none;stroke-width:2px;stroke-dasharray:3;";break;case"thick":f.thickness="thick",f.pattern="solid",f.style="stroke-width: 3.5px;fill:none;"}if(void 0!==t.style){let e=(0,i.k)(t.style);w=e.style,k=e.labelStyle}f.style=f.style+=w,f.labelStyle=f.labelStyle+=k,void 0!==t.interpolate?f.curve=(0,i.n)(t.interpolate,r.c_6):void 0!==e.defaultInterpolate?f.curve=(0,i.n)(e.defaultInterpolate,r.c_6):f.curve=(0,i.n)(h.curve,r.c_6),void 0===t.text?void 0!==t.style&&(f.arrowheadStyle="fill: #333"):(f.arrowheadStyle="fill: #333",f.labelpos="c"),f.labelType=t.labelType,f.label=t.text.replace(i.e.lineBreakRegex,"\n"),void 0===t.style&&(f.style=f.style||"stroke: #333; stroke-width: 1.5px;fill:none;"),f.labelStyle=f.labelStyle.replace("color:","fill:"),f.id=u,f.classes="flowchart-link "+b+" "+y;let x=(0,a.f)(d,f),{source:m,target:v,sourceId:T,targetId:$}=g(t,p);i.l.debug("abc78 source and target",m,v),o.edges.push({id:"e"+t.start+t.end,sources:[m],targets:[v],sourceId:T,targetId:$,labelEl:x,labels:[{width:f.width,height:f.height,orgWidth:f.width,orgHeight:f.height,text:f.label,layoutOptions:{"edgeLabels.inline":"true","edgeLabels.placement":"CENTER"}}],edgeData:f})}),o},w=function(e,t,o,l,r){let i="";l&&(i=(i=(i=window.location.protocol+"//"+window.location.host+window.location.pathname+window.location.search).replace(/\(/g,"\\(")).replace(/\)/g,"\\)")),(0,a.m)(e,t,i,r,o)},k=function(e){let t={parentById:{},childrenById:{}},o=e.getSubGraphs();return i.l.info("Subgraphs - ",o),o.forEach(function(e){e.nodes.forEach(function(o){t.parentById[o]=e.id,void 0===t.childrenById[e.id]&&(t.childrenById[e.id]=[]),t.childrenById[e.id].push(o)})}),o.forEach(function(e){e.id,void 0!==t.parentById[e.id]&&t.parentById[e.id]}),t},x=function(e,t,o){let l=s(e,t,o);if(void 0===l||"root"===l)return{x:0,y:0};let r=p[l].offset;return{x:r.posX,y:r.posY}},m=function(e,t,o,l,i,n){let s=x(t.sourceId,t.targetId,i),d=t.sections[0].startPoint,c=t.sections[0].endPoint,h=t.sections[0].bendPoints?t.sections[0].bendPoints:[],p=h.map(e=>[e.x+s.x,e.y+s.y]),u=[[d.x+s.x,d.y+s.y],...p,[c.x+s.x,c.y+s.y]],{x:b,y}=(0,a.k)(t.edgeData),g=(0,r.jvg)().x(b).y(y).curve(r.c_6),f=e.insert("path").attr("d",g(u)).attr("class","path "+o.classes).attr("fill","none"),k=e.insert("g").attr("class","edgeLabel"),m=(0,r.Ys)(k.node().appendChild(t.labelEl)),v=m.node().firstChild.getBoundingClientRect();m.attr("width",v.width),m.attr("height",v.height),k.attr("transform",`translate(${t.labels[0].x+s.x}, ${t.labels[0].y+s.y})`),w(f,o,l.type,l.arrowMarkerAbsolute,n)},v=(e,t)=>{e.forEach(e=>{e.children||(e.children=[]);let o=t.childrenById[e.id];o&&o.forEach(t=>{e.children.push(p[t])}),v(e.children,t)})},T=async function(e,t,o,l){var n;let s,h;l.db.clear(),p={},c={},l.db.setGen("gen-2"),l.parser.parse(e);let b=(0,r.Ys)("body").append("div").attr("style","height:400px").attr("id","cy"),y={id:"root",layoutOptions:{"elk.hierarchyHandling":"INCLUDE_CHILDREN","org.eclipse.elk.padding":"[top=100, left=100, bottom=110, right=110]","elk.layered.spacing.edgeNodeBetweenLayers":"30","elk.direction":"DOWN"},children:[],edges:[]};switch(i.l.info("Drawing flowchart using v3 renderer",d),l.db.getDirection()){case"BT":y.layoutOptions["elk.direction"]="UP";break;case"TB":y.layoutOptions["elk.direction"]="DOWN";break;case"LR":y.layoutOptions["elk.direction"]="RIGHT";break;case"RL":y.layoutOptions["elk.direction"]="LEFT"}let{securityLevel:g,flowchart:w}=(0,i.F)();"sandbox"===g&&(s=(0,r.Ys)("#i"+t));let x="sandbox"===g?(0,r.Ys)(s.nodes()[0].contentDocument.body):(0,r.Ys)("body"),T="sandbox"===g?s.nodes()[0].contentDocument:document,_=x.select(`[id="${t}"]`);(0,a.a)(_,["point","circle","cross"],l.type,t);let E=l.db.getVertices(),C=l.db.getSubGraphs();i.l.info("Subgraphs - ",C);for(let e=C.length-1;e>=0;e--)h=C[e],l.db.addVertex(h.id,{text:h.title,type:h.labelType},"group",void 0,h.classes,h.dir);let B=_.insert("g").attr("class","subgraphs"),S=k(l.db);y=await u(E,t,x,T,l,S,y);let I=_.insert("g").attr("class","edges edgePath"),P=l.db.getEdges();y=f(P,l,y,_);let D=Object.keys(p);D.forEach(e=>{let t=p[e];t.parent||y.children.push(t),void 0!==S.childrenById[e]&&(t.labels=[{text:t.labelText,layoutOptions:{"nodeLabels.placement":"[H_CENTER, V_TOP, INSIDE]"},width:t.labelData.width,height:t.labelData.height}],delete t.x,delete t.y,delete t.width,delete t.height)}),v(y.children,S),i.l.info("after layout",JSON.stringify(y,null,2));let L=await d.layout(y);$(0,0,L.children,_,B,l,0),i.l.info("after layout",L),null==(n=L.edges)||n.map(e=>{m(I,e,e.edgeData,l,S,t)}),(0,i.o)({},_,w.diagramPadding,w.useMaxWidth),b.remove()},$=(e,t,o,l,r,a,n)=>{o.forEach(function(o){if(o){if(p[o.id].offset={posX:o.x+e,posY:o.y+t,x:e,y:t,depth:n,width:o.width,height:o.height},"group"===o.type){let l=r.insert("g").attr("class","subgraph");l.insert("rect").attr("class","subgraph subgraph-lvl-"+n%5+" node").attr("x",o.x+e).attr("y",o.y+t).attr("width",o.width).attr("height",o.height);let a=l.insert("g").attr("class","label"),s=(0,i.F)().flowchart.htmlLabels?o.labelData.width/2:0;a.attr("transform",`translate(${o.labels[0].x+e+o.x+s}, ${o.labels[0].y+t+o.y+3})`),a.node().appendChild(o.labelData.labelNode),i.l.info("Id (UGH)= ",o.type,o.labels)}else i.l.info("Id (UGH)= ",o.id),o.el.attr("transform",`translate(${o.x+e+o.width/2}, ${o.y+t+o.height/2})`)}}),o.forEach(function(o){o&&"group"===o.type&&$(e+o.x,t+o.y,o.children,l,r,a,n+1)})},_=e=>{let t="";for(let o=0;o<5;o++)t+=` 2 | .subgraph-lvl-${o} { 3 | fill: ${e[`surface${o}`]}; 4 | stroke: ${e[`surfacePeer${o}`]}; 5 | } 6 | `;return t},E={db:l.d,renderer:{getClasses:function(e,t){return i.l.info("Extracting classes"),t.db.getClasses()},draw:T},parser:l.p,styles:e=>`.label { 7 | font-family: ${e.fontFamily}; 8 | color: ${e.nodeTextColor||e.textColor}; 9 | } 10 | .cluster-label text { 11 | fill: ${e.titleColor}; 12 | } 13 | .cluster-label span { 14 | color: ${e.titleColor}; 15 | } 16 | 17 | .label text,span { 18 | fill: ${e.nodeTextColor||e.textColor}; 19 | color: ${e.nodeTextColor||e.textColor}; 20 | } 21 | 22 | .node rect, 23 | .node circle, 24 | .node ellipse, 25 | .node polygon, 26 | .node path { 27 | fill: ${e.mainBkg}; 28 | stroke: ${e.nodeBorder}; 29 | stroke-width: 1px; 30 | } 31 | 32 | .node .label { 33 | text-align: center; 34 | } 35 | .node.clickable { 36 | cursor: pointer; 37 | } 38 | 39 | .arrowheadPath { 40 | fill: ${e.arrowheadColor}; 41 | } 42 | 43 | .edgePath .path { 44 | stroke: ${e.lineColor}; 45 | stroke-width: 2.0px; 46 | } 47 | 48 | .flowchart-link { 49 | stroke: ${e.lineColor}; 50 | fill: none; 51 | } 52 | 53 | .edgeLabel { 54 | background-color: ${e.edgeLabelBackground}; 55 | rect { 56 | opacity: 0.85; 57 | background-color: ${e.edgeLabelBackground}; 58 | fill: ${e.edgeLabelBackground}; 59 | } 60 | text-align: center; 61 | } 62 | 63 | .cluster rect { 64 | fill: ${e.clusterBkg}; 65 | stroke: ${e.clusterBorder}; 66 | stroke-width: 1px; 67 | } 68 | 69 | .cluster text { 70 | fill: ${e.titleColor}; 71 | } 72 | 73 | .cluster span { 74 | color: ${e.titleColor}; 75 | } 76 | /* .cluster div { 77 | color: ${e.titleColor}; 78 | } */ 79 | 80 | div.mermaidTooltip { 81 | position: absolute; 82 | text-align: center; 83 | max-width: 200px; 84 | padding: 2px; 85 | font-family: ${e.fontFamily}; 86 | font-size: 12px; 87 | background: ${e.tertiaryColor}; 88 | border: 1px solid ${e.border2}; 89 | border-radius: 2px; 90 | pointer-events: none; 91 | z-index: 100; 92 | } 93 | 94 | .flowchartTitleText { 95 | text-anchor: middle; 96 | font-size: 18px; 97 | fill: ${e.textColor}; 98 | } 99 | .subgraph { 100 | stroke-width:2; 101 | rx:3; 102 | } 103 | // .subgraph-lvl-1 { 104 | // fill:#ccc; 105 | // // stroke:black; 106 | // } 107 | 108 | .flowchart-label text { 109 | text-anchor: middle; 110 | } 111 | 112 | ${_(e)} 113 | `}}}]); -------------------------------------------------------------------------------- /streamlit_markdown/frontend/out/_next/static/chunks/832.a60101b3ef0e470d.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[832],{7832:function(e,t,s){s.d(t,{diagram:function(){return V}});var i=s(7518),a=s(5625),r=s(4218),o=s(1835),l=s(4015);s(7484),s(7967),s(7856),s(1644),s(6060);let d="rect",n="rectWithTitle",c="statediagram",p=`${c}-state`,b="transition",g=`${b} note-edge`,h=`${c}-note`,u=`${c}-cluster`,y=`${c}-cluster-alt`,f="parent",w="note",x="----",$=`${x}${w}`,m=`${x}${f}`,T="fill:none",S="fill: #333",k="text",D="normal",A={},v=0;function B(e="",t=0,s="",i=x){let a=null!==s&&s.length>0?`${i}${s}`:"";return`state-${e}${a}-${t}`}let E=(e,t,s,a,r,l)=>{var c;let b=s.id,x=null==(c=a[b])?"":c.classes?c.classes.join(" "):"";if("root"!==b){let t=d;!0===s.start&&(t="start"),!1===s.start&&(t="end"),s.type!==i.D&&(t=s.type),A[b]||(A[b]={id:b,shape:t,description:o.e.sanitizeText(b,(0,o.c)()),classes:`${x} ${p}`});let a=A[b];s.description&&(Array.isArray(a.description)?(a.shape=n,a.description.push(s.description)):a.description.length>0?(a.shape=n,a.description===b?a.description=[s.description]:a.description=[a.description,s.description]):(a.shape=d,a.description=s.description),a.description=o.e.sanitizeTextOrArray(a.description,(0,o.c)())),1===a.description.length&&a.shape===n&&(a.shape=d),!a.type&&s.doc&&(o.l.info("Setting cluster for ",b,C(s)),a.type="group",a.dir=C(s),a.shape=s.type===i.a?"divider":"roundedWithTitle",a.classes=a.classes+" "+u+" "+(l?y:""));let r={labelStyle:"",shape:a.shape,labelText:a.description,classes:a.classes,style:"",id:b,dir:a.dir,domId:B(b,v),type:a.type,padding:15};if(r.centerLabel=!0,s.note){let t={labelStyle:"",shape:"note",labelText:s.note.text,classes:h,style:"",id:b+$+"-"+v,domId:B(b,v,w),type:a.type,padding:15},i={labelStyle:"",shape:"noteGroup",labelText:s.note.text,classes:a.classes,style:"",id:b+m,domId:B(b,v,f),type:"group",padding:0};v++;let o=b+m;e.setNode(o,i),e.setNode(t.id,t),e.setNode(b,r),e.setParent(b,o),e.setParent(t.id,o);let l=b,d=t.id;"left of"===s.note.position&&(l=t.id,d=b),e.setEdge(l,d,{arrowhead:"none",arrowType:"",style:T,labelStyle:"",classes:g,arrowheadStyle:S,labelpos:"c",labelType:k,thickness:D})}else e.setNode(b,r)}t&&"root"!==t.id&&(o.l.trace("Setting node ",b," to be child of its parent ",t.id),e.setParent(b,t.id)),s.doc&&(o.l.trace("Adding nodes children "),N(e,s,s.doc,a,r,!l))},N=(e,t,s,a,r,l)=>{o.l.trace("items",s),s.forEach(s=>{switch(s.stmt){case i.b:case i.D:E(e,t,s,a,r,l);break;case i.S:{E(e,t,s.state1,a,r,l),E(e,t,s.state2,a,r,l);let i={id:"edge"+v,arrowhead:"normal",arrowTypeEnd:"arrow_barb",style:T,labelStyle:"",label:o.e.sanitizeText(s.description,(0,o.c)()),arrowheadStyle:S,labelpos:"c",labelType:k,thickness:D,classes:b};e.setEdge(s.state1.id,s.state2.id,i,v),v++}}})},C=(e,t=i.c)=>{let s=t;if(e.doc)for(let t=0;t{e.state||(e.state={}),e.state.arrowMarkerAbsolute=e.arrowMarkerAbsolute,i.d.clear()}}}}]); -------------------------------------------------------------------------------- /streamlit_markdown/frontend/out/_next/static/chunks/97.83d797fa8ca65733.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[97],{6097:function(t,e,a){let i;a.d(e,{diagram:function(){return z}});var r=a(7518),d=a(4218),n=a(1644),s=a(5625),o=a(1835);a(7484),a(7967),a(7856);let c={},l=()=>Object.keys(c),g={get:t=>c[t],set:(t,e)=>{c[t]=e},keys:l,size:()=>l().length},p=t=>t.append("circle").attr("class","start-state").attr("r",(0,o.c)().state.sizeUnit).attr("cx",(0,o.c)().state.padding+(0,o.c)().state.sizeUnit).attr("cy",(0,o.c)().state.padding+(0,o.c)().state.sizeUnit),h=t=>t.append("line").style("stroke","grey").style("stroke-dasharray","3").attr("x1",(0,o.c)().state.textHeight).attr("class","divider").attr("x2",2*(0,o.c)().state.textHeight).attr("y1",0).attr("y2",0),x=(t,e)=>{let a=t.append("text").attr("x",2*(0,o.c)().state.padding).attr("y",(0,o.c)().state.textHeight+2*(0,o.c)().state.padding).attr("font-size",(0,o.c)().state.fontSize).attr("class","state-title").text(e.id),i=a.node().getBBox();return t.insert("rect",":first-child").attr("x",(0,o.c)().state.padding).attr("y",(0,o.c)().state.padding).attr("width",i.width+2*(0,o.c)().state.padding).attr("height",i.height+2*(0,o.c)().state.padding).attr("rx",(0,o.c)().state.radius),a},u=(t,e)=>{let a=function(t,e,a){let i=t.append("tspan").attr("x",2*(0,o.c)().state.padding).text(e);a||i.attr("dy",(0,o.c)().state.textHeight)},i=t.append("text").attr("x",2*(0,o.c)().state.padding).attr("y",(0,o.c)().state.textHeight+1.3*(0,o.c)().state.padding).attr("font-size",(0,o.c)().state.fontSize).attr("class","state-title").text(e.descriptions[0]),r=i.node().getBBox(),d=r.height,n=t.append("text").attr("x",(0,o.c)().state.padding).attr("y",d+.4*(0,o.c)().state.padding+(0,o.c)().state.dividerMargin+(0,o.c)().state.textHeight).attr("class","state-description"),s=!0,c=!0;e.descriptions.forEach(function(t){s||(a(n,t,c),c=!1),s=!1});let l=t.append("line").attr("x1",(0,o.c)().state.padding).attr("y1",(0,o.c)().state.padding+d+(0,o.c)().state.dividerMargin/2).attr("y2",(0,o.c)().state.padding+d+(0,o.c)().state.dividerMargin/2).attr("class","descr-divider"),g=n.node().getBBox(),p=Math.max(g.width,r.width);return l.attr("x2",p+3*(0,o.c)().state.padding),t.insert("rect",":first-child").attr("x",(0,o.c)().state.padding).attr("y",(0,o.c)().state.padding).attr("width",p+2*(0,o.c)().state.padding).attr("height",g.height+d+2*(0,o.c)().state.padding).attr("rx",(0,o.c)().state.radius),t},f=(t,e,a)=>{let i;let r=(0,o.c)().state.padding,d=2*(0,o.c)().state.padding,n=t.node().getBBox(),s=n.width,c=n.x,l=t.append("text").attr("x",0).attr("y",(0,o.c)().state.titleShift).attr("font-size",(0,o.c)().state.fontSize).attr("class","state-title").text(e.id),g=l.node().getBBox(),p=g.width+d,h=Math.max(p,s);h===s&&(h+=d);let x=t.node().getBBox();e.doc,i=c-r,p>s&&(i=(s-h)/2+r),Math.abs(c-x.x)s&&(i=c-(p-s)/2);let u=1-(0,o.c)().state.textHeight;return t.insert("rect",":first-child").attr("x",i).attr("y",u).attr("class",a?"alt-composit":"composit").attr("width",h).attr("height",x.height+(0,o.c)().state.textHeight+(0,o.c)().state.titleShift+1).attr("rx","0"),l.attr("x",i+r),p<=s&&l.attr("x",c+(h-d)/2-p/2+r),t.insert("rect",":first-child").attr("x",i).attr("y",(0,o.c)().state.titleShift-(0,o.c)().state.textHeight-(0,o.c)().state.padding).attr("width",h).attr("height",3*(0,o.c)().state.textHeight).attr("rx",(0,o.c)().state.radius),t.insert("rect",":first-child").attr("x",i).attr("y",(0,o.c)().state.titleShift-(0,o.c)().state.textHeight-(0,o.c)().state.padding).attr("width",h).attr("height",x.height+3+2*(0,o.c)().state.textHeight).attr("rx",(0,o.c)().state.radius),t},y=t=>(t.append("circle").attr("class","end-state-outer").attr("r",(0,o.c)().state.sizeUnit+(0,o.c)().state.miniPadding).attr("cx",(0,o.c)().state.padding+(0,o.c)().state.sizeUnit+(0,o.c)().state.miniPadding).attr("cy",(0,o.c)().state.padding+(0,o.c)().state.sizeUnit+(0,o.c)().state.miniPadding),t.append("circle").attr("class","end-state-inner").attr("r",(0,o.c)().state.sizeUnit).attr("cx",(0,o.c)().state.padding+(0,o.c)().state.sizeUnit+2).attr("cy",(0,o.c)().state.padding+(0,o.c)().state.sizeUnit+2)),w=(t,e)=>{let a=(0,o.c)().state.forkWidth,i=(0,o.c)().state.forkHeight;if(e.parentId){let t=a;a=i,i=t}return t.append("rect").style("stroke","black").style("fill","black").attr("width",a).attr("height",i).attr("x",(0,o.c)().state.padding).attr("y",(0,o.c)().state.padding)},b=(t,e,a,i)=>{let r=0,d=i.append("text");d.style("text-anchor","start"),d.attr("class","noteText");let n=t.replace(/\r\n/g,"
");n=n.replace(/\n/g,"
");let s=n.split(o.e.lineBreakRegex),c=1.25*(0,o.c)().state.noteMargin;for(let t of s){let i=t.trim();if(i.length>0){let t=d.append("tspan");if(t.text(i),0===c){let e=t.node().getBBox();c+=e.height}r+=c,t.attr("x",e+(0,o.c)().state.noteMargin),t.attr("y",a+r+1.25*(0,o.c)().state.noteMargin)}}return{textWidth:d.node().getBBox().width,textHeight:r}},B=(t,e)=>{e.attr("class","state-note");let a=e.append("rect").attr("x",0).attr("y",(0,o.c)().state.padding),i=e.append("g"),{textWidth:r,textHeight:d}=b(t,0,0,i);return a.attr("height",d+2*(0,o.c)().state.noteMargin),a.attr("width",r+2*(0,o.c)().state.noteMargin),a},m=function(t,e){let a=e.id,i={id:a,label:e.id,width:0,height:0},r=t.append("g").attr("id",a).attr("class","stateGroup");"start"===e.type&&p(r),"end"===e.type&&y(r),("fork"===e.type||"join"===e.type)&&w(r,e),"note"===e.type&&B(e.note.text,r),"divider"===e.type&&h(r),"default"===e.type&&0===e.descriptions.length&&x(r,e),"default"===e.type&&e.descriptions.length>0&&u(r,e);let d=r.node().getBBox();return i.width=d.width+2*(0,o.c)().state.padding,i.height=d.height+2*(0,o.c)().state.padding,g.set(a,i),i},k=0,N=function(t,e,a){e.points=e.points.filter(t=>!Number.isNaN(t.y));let i=e.points,n=(0,d.jvg)().x(function(t){return t.x}).y(function(t){return t.y}).curve(d.$0Z),s=t.append("path").attr("d",n(i)).attr("id","edge"+k).attr("class","transition"),c="";if((0,o.c)().state.arrowMarkerAbsolute&&(c=(c=(c=window.location.protocol+"//"+window.location.host+window.location.pathname+window.location.search).replace(/\(/g,"\\(")).replace(/\)/g,"\\)")),s.attr("marker-end","url("+c+"#"+function(t){switch(t){case r.d.relationType.AGGREGATION:return"aggregation";case r.d.relationType.EXTENSION:return"extension";case r.d.relationType.COMPOSITION:return"composition";case r.d.relationType.DEPENDENCY:return"dependency"}}(r.d.relationType.DEPENDENCY)+"End)"),void 0!==a.title){let i=t.append("g").attr("class","stateLabel"),{x:r,y:d}=o.u.calcLabelPosition(e.points),n=o.e.getRows(a.title),s=0,c=[],l=0,g=0;for(let t=0;t<=n.length;t++){let e=i.append("text").attr("text-anchor","middle").text(n[t]).attr("x",r).attr("y",d+s),a=e.node().getBBox();if(l=Math.max(l,a.width),g=Math.min(g,a.x),o.l.info(a.x,r,d+s),0===s){let t=e.node().getBBox();s=t.height,o.l.info("Title height",s,d)}c.push(e)}let p=s*n.length;if(n.length>1){let t=(n.length-1)*s*.5;c.forEach((e,a)=>e.attr("y",d+a*s-t)),p=s*n.length}let h=i.node().getBBox();i.insert("rect",":first-child").attr("class","box").attr("x",r-l/2-(0,o.c)().state.padding/2).attr("y",d-p/2-(0,o.c)().state.padding/2-3.5).attr("width",l+(0,o.c)().state.padding).attr("height",p+(0,o.c)().state.padding),o.l.info(h)}k++},E={},M=function(t){t.append("defs").append("marker").attr("id","dependencyEnd").attr("refX",19).attr("refY",7).attr("markerWidth",20).attr("markerHeight",28).attr("orient","auto").append("path").attr("d","M 19,7 L9,13 L14,7 L9,1 Z")},v=t=>t?t.length*i.fontSizeFactor:1,S=(t,e,a,r,d,c,l)=>{let g;let p=new s.k({compound:!0,multigraph:!0}),h=!0;for(g=0;g{let e=t.parentElement,a=0,i=0;e&&(e.parentElement&&(a=e.parentElement.getBBox().width),Number.isNaN(i=parseInt(e.getAttribute("data-x-shift"),10))&&(i=0)),t.setAttribute("x1",0-i+8),t.setAttribute("x2",a-i-8)})}else o.l.debug("No Node "+t+": "+JSON.stringify(p.node(t)))});let B=b.getBBox();p.edges().forEach(function(t){void 0!==t&&void 0!==p.edge(t)&&(o.l.debug("Edge "+t.v+" -> "+t.w+": "+JSON.stringify(p.edge(t))),N(e,p.edge(t),p.edge(t).relation))}),B=b.getBBox();let k={id:a||"root",label:a||"root",width:0,height:0};return k.width=B.width+2*i.padding,k.height=B.height+2*i.padding,o.l.debug("Doc rendered",k,p),k},z={parser:r.p,db:r.d,renderer:{setConf:function(){},draw:function(t,e,a,r){let n;i=(0,o.c)().state;let s=(0,o.c)().securityLevel;"sandbox"===s&&(n=(0,d.Ys)("#i"+e));let c="sandbox"===s?(0,d.Ys)(n.nodes()[0].contentDocument.body):(0,d.Ys)("body"),l="sandbox"===s?n.nodes()[0].contentDocument:document;o.l.debug("Rendering diagram "+t);let g=c.select(`[id='${e}']`);M(g);let p=r.db.getRootDoc();S(p,g,void 0,!1,c,l,r);let h=i.padding,x=g.node().getBBox(),u=x.width+2*h,f=x.height+2*h,y=1.75*u;(0,o.i)(g,f,y,i.useMaxWidth),g.attr("viewBox",`${x.x-i.padding} ${x.y-i.padding} `+u+" "+f)}},styles:r.s,init:t=>{t.state||(t.state={}),t.state.arrowMarkerAbsolute=t.arrowMarkerAbsolute,r.d.clear()}}}}]); -------------------------------------------------------------------------------- /streamlit_markdown/frontend/out/_next/static/chunks/pages/_app-2ddf65715eee6393.js: -------------------------------------------------------------------------------- 1 | (self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[888],{6840:function(n,u,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/_app",function(){return t(4178)}])},4178:function(n,u,t){"use strict";t.r(u);var _=t(5893);t(3814),u.default=function(n){let{Component:u,pageProps:t}=n;return(0,_.jsx)(u,{...t})}},3814:function(){}},function(n){var u=function(u){return n(n.s=u)};n.O(0,[774,179],function(){return u(6840),u(6885)}),_N_E=n.O()}]); -------------------------------------------------------------------------------- /streamlit_markdown/frontend/out/_next/static/chunks/pages/_error-54de1933a164a1ff.js: -------------------------------------------------------------------------------- 1 | (self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[820],{1981:function(n,_,u){(window.__NEXT_P=window.__NEXT_P||[]).push(["/_error",function(){return u(3499)}])}},function(n){n.O(0,[774,888,179],function(){return n(n.s=1981)}),_N_E=n.O()}]); -------------------------------------------------------------------------------- /streamlit_markdown/frontend/out/_next/static/chunks/pages/index-ca7df3f4b012a137.js: -------------------------------------------------------------------------------- 1 | (self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[405],{9176:function(e){function t(e){return Promise.resolve().then(function(){var t=Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t})}t.keys=function(){return[]},t.resolve=t,t.id=9176,e.exports=t},8312:function(e,t,r){(window.__NEXT_P=window.__NEXT_P||[]).push(["/",function(){return r(3223)}])},3223:function(e,t,r){"use strict";r.r(t),r.d(t,{default:function(){return P}});var s=r(5893),l=r(9008),o=r.n(l),n=r(5795),a=r(7294);function c(){for(var e=arguments.length,t=Array(e),r=0;re=>((0,C.Vn)(e,"element",e=>{"li"===e.tagName&&(e.children=e.children.map(e=>("element"===e.type&&"p"===e.tagName&&(e.tagName="div"),e)))}),e);function L(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:["bg","border","text"],r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{bg:"",border:"",text:"",hover_bg:"hover:bg-gray-100",hover_text:"hover:text-gray-900"},s={custom:r,orange:{bg:"bg-orange-100",border:"border-orange-200",text:"text-orange-900",hover_bg:"hover:bg-orange-200",hover_text:"hover:text-orange-800"},green:{bg:"bg-green-50",border:"border-green-200",text:"text-green-900",hover_bg:"hover:bg-green-200",hover_text:"hover:text-green-800"},blue:{bg:"bg-blue-50",border:"border-blue-200",text:"text-blue-900",hover_bg:"hover:bg-blue-200",hover_text:"hover:text-blue-800"},red:{bg:"bg-red-50",border:"border-red-200",text:"text-red-900",hover_bg:"hover:bg-red-200",hover_text:"hover:text-red-800"},purple:{bg:"bg-purple-50",border:"border-purple-200",text:"text-purple-900",hover_bg:"hover:bg-purple-200",hover_text:"hover:text-purple-800"},pink:{bg:"bg-pink-50",border:"border-pink-200",text:"text-pink-900",hover_bg:"hover:bg-pink-200",hover_text:"hover:text-pink-800"},indigo:{bg:"bg-indigo-50",border:"border-indigo-200",text:"text-indigo-900",hover_bg:"hover:bg-indigo-200",hover_text:"hover:text-indigo-800"},yellow:{bg:"bg-yellow-50",border:"border-yellow-200",text:"text-yellow-900",hover_bg:"hover:bg-yellow-200",hover_text:"hover:text-yellow-800"},teal:{bg:"bg-teal-50",border:"border-teal-200",text:"text-teal-900",hover_bg:"hover:bg-teal-200",hover_text:"hover:text-teal-800"},cyan:{bg:"bg-cyan-50",border:"border-cyan-200",text:"text-cyan-900",hover_bg:"hover:bg-cyan-200",hover_text:"hover:text-cyan-800"},gray:{bg:"bg-gray-50",border:"border-gray-200",text:"text-gray-900",hover_bg:"hover:bg-gray-200",hover_text:"hover:text-gray-800"},slate:{bg:"bg-slate-50",border:"border-slate-200",text:"text-slate-900",hover_bg:"hover:bg-slate-200",hover_text:"hover:text-slate-800"},dark:{bg:"bg-gray-900",border:"border-gray-800",text:"text-gray-100",hover_bg:"hover:bg-gray-800",hover_text:"hover:text-gray-100"},light:{bg:"bg-white",border:"border-gray-200",text:"text-gray-900",hover_bg:"hover:bg-gray-100",hover_text:"hover:text-gray-900"},null:{bg:"",border:"",text:"",hover_bg:"hover:bg-gray-100",hover_text:"hover:text-gray-900"}};return t.map(t=>s[e][t]).join(" ")}let Z=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"green",r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"default",l=arguments.length>3&&void 0!==arguments[3]?arguments[3]:void 0,o=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{},n=arguments.length>5&&void 0!==arguments[5]?arguments[5]:{};return(0,a.useEffect)(()=>{b.N.initialize({startOnLoad:!1,theme:r,themeCSS:l})},[r,l]),(0,a.useMemo)(()=>(0,S.l)().use(N.Z).use(j.Z).use(y.Z).use(k.Z).use(w.Z).use(f.Z,{ignoreMissing:!0}).use(F).use(p.Z,{createElement:a.createElement,Fragment:a.Fragment,components:{a:e=>{let{href:r,children:l}=e;return(0,s.jsx)("a",{href:r,target:"_blank",rel:"noreferrer",className:n.a_class.length>0?n.a_class:c(T,L(t,["text","hover_text"],o)),children:l})},h1:e=>{let{children:r,id:l}=e;return(0,s.jsx)("h1",{className:n.h1_class.length>0?n.h1_class:c("font-sans font-semibold text-2xl mb-6 mt-6",L(t,["text"],o)),id:l,children:r})},h2:e=>{let{children:r,id:l}=e;return(0,s.jsx)("h2",{className:n.h2_class.length>0?n.h2_class:c("font-sans font-medium text-2xl mb-6 mt-6",L(t,["text"],o)),id:l,children:r})},h3:e=>{let{children:r,id:l}=e;return(0,s.jsx)("h3",{className:n.h3_class.length>0?n.h3_class:c("font-sans font-semibold text-xl mb-6 mt-2",L(t,["text"],o)),id:l,children:r})},h4:e=>{let{children:r,id:l}=e;return(0,s.jsx)("h4",{className:n.h4_class.length>0?n.td_class:c("font-sans font-medium text-xl my-6",L(t,["text"],o)),id:l,children:r})},h5:e=>{let{children:r,id:l}=e;return(0,s.jsx)("h5",{className:n.h5_class.length>0?n.h5_class:c("font-sans font-semibold text-lg my-6",L(t,["text"],o)),id:l,children:r})},h6:e=>{let{children:r,id:l}=e;return(0,s.jsx)("h6",{className:n.h6_class.length>0?n.h6_class:c("font-sans font-medium text-lg my-6",L(t,["text"],o)),id:l,children:r})},p:e=>(0,s.jsx)("p",{className:n.p_class.length>0?n.p_class:c("font-sans text-sm mb-6",L(t,["text"],o)),children:e.children}),strong:e=>{let{children:r}=e;return(0,s.jsx)("strong",{className:n.strong_class.length>0?n.strong_class:c("font-semibold",L(t,["text"],o)),children:r})},em:e=>{let{children:r}=e;return(0,s.jsx)("em",{className:n.em_class.length>0?n.em_class:c("italic",L(t,["text"],o)),children:r})},code:e=>{let{children:r,className:s}=e;return O({children:r,className:s},t,o,n)},pre:e=>{let{children:r}=e;return(0,s.jsx)("div",{className:"relative mb-6",children:(0,s.jsx)("pre",{className:n.pre_class.length>0?n.pre_class:c("p-4 rounded-lg border-2 [&>code.hljs]:p-0 [&>code.hljs]:bg-transparent font-code text-sm overflow-x-auto flex items-start",L(t,["border","bg"],o)),children:r})})},ul:e=>{let{children:r}=e;return(0,s.jsx)("ul",{className:n.ul_class.length>0?n.ul_class:c("flex flex-col gap-3 my-6 pl-3 [&_ol]:my-3 [&_ul]:my-3",L(t,["text"],o)),children:a.Children.map((0,v.Z)(r).filter(a.isValidElement),(e,t)=>(0,s.jsxs)("li",{className:"flex gap-2 items-start",children:[(0,s.jsx)("div",{className:"w-1 h-1 rounded-full bg-current block shrink-0 mt-1"}),e]},t))})},ol:e=>{let{children:r}=e;return(0,s.jsx)("ol",{className:n.ol_class.length>0?n.ol_class:c("flex flex-col gap-3 my-6 pl-3 [&_ol]:my-3 [&_ul]:my-3",L(t,["text"],o)),children:a.Children.map((0,v.Z)(r).filter(a.isValidElement),(e,r)=>(0,s.jsxs)("li",{className:"flex gap-2 items-start",children:[(0,s.jsxs)("div",{className:n.li_class.length>0?n.li_class:c("font-sans text-sm font-semibold shrink-0 min-w-[1.4ch]",L(t,["text"],o)),"aria-hidden":!0,children:[r+1,"."]}),e]},r))})},li:e=>{let{children:r}=e;return(0,s.jsx)("div",{className:n.li_class.length>0?n.li_class:c("font-sans text-sm",L(t,["text"],o)),children:r})},table:e=>{let{children:r}=e;return(0,s.jsx)("div",{className:"overflow-x-auto mb-6",children:(0,s.jsx)("table",{className:n.table_class.length>0?n.table_class:c("table-auto border-2",L(t,["border"],o)),children:r})})},thead:e=>{let{children:r}=e;return(0,s.jsx)("thead",{className:n.thead_class.length>0?n.thead_class:c(L(t,["bg"],o)),children:r})},th:e=>{let{children:r}=e;return(0,s.jsx)("th",{className:n.th_class.length>0?n.th_class:c("border-2 p-2 font-sans text-sm font-semibold",L(t,["border","text"],o)),children:r})},td:e=>{let{children:r}=e;return(0,s.jsx)("td",{className:n.td_class.length>0?n.td_class:c("border-2 p-2 font-sans text-sm",L(t,["border","text"],o)),children:r})},blockquote:e=>{let{children:r}=e;return(0,s.jsx)("blockquote",{className:n.blockquote_class.length>0?n.blockquote_class:c("border-l-4 pl-2 italic",L(t,["border","text"],o)),children:r})}}}).processSync(e).result,[e,t])},O=function(e){let{children:t,className:r}=e,l=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"green",o=arguments.length>2?arguments[2]:void 0,n=arguments.length>3?arguments[3]:void 0,m=!!r&&r.includes("language-mermaid"),b=!!r&&r.includes("language-latex"),[u,_]=(0,a.useState)(m),[v,f]=(0,a.useState)(b),[p,j]=(0,a.useState)(!1),N=(0,a.useRef)(null);if((0,a.useEffect)(()=>{if(p){let e=setTimeout(()=>j(!1),500);return()=>clearTimeout(e)}},[p]),r){var y,w;return(0,s.jsxs)(s.Fragment,{children:[v?(0,s.jsx)("div",{className:"flex-grow flex-shrink my-auto",children:(0,s.jsx)(D,{content:null!==(y=null==t?void 0:t.toString())&&void 0!==y?y:"",theme_color:l,custom_color:o,custom_css:n})}):u?(0,s.jsx)("div",{className:"flex-grow flex-shrink my-auto",children:(0,s.jsx)(U,{content:null!==(w=null==t?void 0:t.toString())&&void 0!==w?w:"",theme_color:l,custom_color:o,custom_css:n})}):(0,s.jsx)("code",{ref:N,className:n.code_class.length>0?n.code_class:"".concat(r," flex-grow flex-shrink my-auto"),children:t}),(0,s.jsxs)("div",{className:"flex flex-col gap-1 flex-grow-0 flex-shrink-0",children:[(0,s.jsx)("button",{type:"button",className:c("rounded-md p-1 border-2 transition-colors",L(l,["border","text","hover_bg"],o)),"aria-label":"copy code to clipboard",title:"Copy code to clipboard",onClick:()=>{if(N.current){var e;navigator.clipboard.writeText(null!==(e=N.current.innerText)&&void 0!==e?e:""),j(!0)}},children:p?(0,s.jsx)(i.X,{className:"w-4 h-4"}):(0,s.jsx)(d.C,{className:"w-4 h-4"})}),m?(0,s.jsx)(s.Fragment,{children:(0,s.jsx)("button",{type:"button",className:n.code_button_class.length>0?n.code_button_class:c("rounded-md p-1 border-2 transition-colors",L(l,["border","text","hover_bg"],o)),"aria-label":u?"Show Mermaid Code":"Show Mermaid Diagram",title:u?"Show Mermaid Code":"Show Mermaid Diagram",onClick:()=>{_(!u)},children:u?(0,s.jsx)(h.E,{className:"w-4 h-4"}):(0,s.jsx)(x.g,{className:"w-4 h-4"})})}):null,b?(0,s.jsx)(s.Fragment,{children:(0,s.jsx)("button",{type:"button",className:n.code_button_class.length>0?n.code_button_class:c("rounded-md p-1 border-2 transition-colors",L(l,["border","text","hover_bg"],o)),"aria-label":v?"Show Latex Code":"Show Latex Diagram",title:v?"Show Latex Code":"Show Latex Diagram",onClick:()=>{f(!v)},children:v?(0,s.jsx)(h.E,{className:"w-4 h-4"}):(0,s.jsx)(g.M,{className:"w-4 h-4"})})}):null]})]})}return(0,s.jsx)("code",{className:n.code_class.length>0?n.code_class:c("inline-block font-code p-0.5 -my-0.5 rounded",L(l,["text","bg"],o)),children:t})},D=e=>{let{content:t,theme_color:r="green",custom_color:l,custom_css:o}=e,[n,i]=(0,a.useState)(!0);return((0,a.useEffect)(()=>{try{let e=new M.Wq({hyphenate:!1}),r=(0,M.Qc)(t,{generator:e}).domFragment();i(r.firstElementChild.outerHTML)}catch(e){console.error(e),i(!1)}E.Streamlit.setFrameHeight()},[t]),!0===n)?(0,s.jsxs)("div",{className:"flex gap-2 items-center",children:[(0,s.jsx)(m.U,{className:c("animate-spin w-4 h-4",L(r,["text"],l))}),(0,s.jsx)("p",{className:"font-sans text-sm text-slate-700",children:"Rendering diagram..."})]}):!1===n?(0,s.jsx)("p",{className:"font-sans text-sm text-slate-700",children:"Unable to render this diagram."}):(0,s.jsx)("div",{className:o.code_latex_class.length>0?o.code_latex_class:c("font-sans text-sm",L(r,["text"],l)),dangerouslySetInnerHTML:{__html:null!=n?n:""}})},U=e=>{let{content:t,theme_color:r="green",custom_color:l,custom_css:o}=e,[n,i]=(0,a.useState)(!0);return((0,a.useEffect)(()=>{let e=async()=>{if(await b.N.parse(t,{suppressErrors:!0})){let{svg:e}=await b.N.render("mermaid-svg-".concat(Math.round(1e7*Math.random())),t);i(e)}else i(!1);E.Streamlit.setFrameHeight()};e()},[t]),!0===n)?(0,s.jsxs)("div",{className:"flex gap-2 items-center",children:[(0,s.jsx)(m.U,{className:c("animate-spin w-4 h-4",L(r,["text"],l))}),(0,s.jsx)("p",{className:"font-sans text-sm text-slate-700",children:"Rendering diagram..."})]}):!1===n?(0,s.jsxs)("p",{className:"font-sans text-sm text-slate-700",children:["Unable to render this diagram. Try copying it into the"," ",(0,s.jsx)(_(),{href:"https://mermaid.live/edit",className:c(T,L(r,["text","hover_text"],l)),target:"_blank",children:"Mermaid Live Editor"}),"."]}):(0,s.jsx)("div",{className:o.code_mermaid_class.length>0?o.code_mermaid_class:c("font-sans text-sm",L(r,["text"],l)),dangerouslySetInnerHTML:{__html:null!=n?n:""}})};var q=function(e){let{theme_color:t="green",content:r="",richContent:l=!0,mermaid_theme:o="forest",mermaid_theme_CSS:n="",custom_color:a={},custom_css:i={}}=e;console.log("content",r),console.log("theme_color",t),console.log("mermaid_theme",o),console.log("mermaid_theme_CSS",n),console.log("custom_color",a),console.log("custom_css",i);let d=Z(r,t,o,n,a,i);return(0,s.jsx)("div",{className:c("rounded rounded-xl py-3 px-4 text-sm break-words overflow-x-auto shadow shadow relative ","p-2 lg:p-6 rounded-lg min-w-0 [&>*:first-child]:mt-0 [&>*:last-child]:mb-0","null"==t?"":"border-2 border",L(t,["bg","border","text"])),children:l?d:(0,s.jsx)("div",{className:"whitespace-pre-wrap prose prose-sm",children:r})})},H=function(){let{theme:e,disabled:t,args:r}=(0,n.QO)();return(0,s.jsx)("div",{children:(0,s.jsx)(q,{theme_color:r.theme_color,content:r.content,richContent:r.richContent,mermaid_theme_CSS:r.mermaid_theme_CSS,mermaid_theme:r.mermaid_theme,custom_color:r.custom_color,custom_css:r.custom_css})})},P=()=>(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(o(),{children:[(0,s.jsx)("title",{children:"Create Next App"}),(0,s.jsx)("meta",{name:"description",content:"Generated by create next app"}),(0,s.jsx)("link",{rel:"icon",href:"/favicon.ico"})]}),(0,s.jsx)(n.ei,{children:(0,s.jsx)(H,{})})]})}},function(e){e.O(0,[83,338,265,836,774,888,179],function(){return e(e.s=8312)}),_N_E=e.O()}]); -------------------------------------------------------------------------------- /streamlit_markdown/frontend/out/_next/static/chunks/webpack-fc3c301467690dd7.js: -------------------------------------------------------------------------------- 1 | !function(){"use strict";var e,t,r,n,c,o,a,i={},u={};function f(e){var t=u[e];if(void 0!==t)return t.exports;var r=u[e]={exports:{}},n=!0;try{i[e].call(r.exports,r,r.exports,f),n=!1}finally{n&&delete u[e]}return r.exports}f.m=i,e=[],f.O=function(t,r,n,c){if(r){c=c||0;for(var o=e.length;o>0&&e[o-1][2]>c;o--)e[o]=e[o-1];e[o]=[r,n,c];return}for(var a=1/0,o=0;o=c&&Object.keys(f.O).every(function(e){return f.O[e](r[u])})?r.splice(u--,1):(i=!1,cCreate Next App
-------------------------------------------------------------------------------- /streamlit_markdown/frontend/out/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /streamlit_markdown/frontend/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "streamlit-markdown", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "npx serve@latest out", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@heroicons/react": "^2.0.18", 13 | "@tailwindcss/typography": "^0.5.9", 14 | "@phosphor-icons/react": "^2.0.10", 15 | "@radix-ui/react-dialog": "^1.0.4", 16 | "next": "13.4.7", 17 | "react": "18.2.0", 18 | "prettier": "^2.8.8", 19 | "react-copy-to-clipboard": "^5.1.0", 20 | "react-dom": "18.2.0", 21 | "react-keyed-flatten-children": "^2.2.1", 22 | "react-markdown": "^8.0.7", 23 | "react-syntax-highlighter": "^15.5.0", 24 | "rehype-highlight": "^6.0.0", 25 | "rehype-react": "^7.2.0", 26 | "rehype-katex": "^6.0.3", 27 | "rehype-raw": "^6.1.1", 28 | "remark-gfm": "^3.0.1", 29 | "remark-math": "^5.1.1", 30 | "remark-rehype": "^10.1.0", 31 | "remark-parse": "^10.0.2", 32 | "latex.js": "^0.12.6", 33 | "mermaid": "^10.2.4", 34 | "streamlit-component-lib-react-hooks": "^1.2.0" 35 | }, 36 | "devDependencies": { 37 | "@types/node": "20.3.1", 38 | "@types/react": "18.2.14", 39 | "@types/react-copy-to-clipboard": "^5.0.4", 40 | "@types/react-dom": "18.2.6", 41 | "@types/react-syntax-highlighter": "^15.5.7", 42 | "autoprefixer": "^10.4.14", 43 | "eslint": "8.43.0", 44 | "eslint-config-next": "13.4.7", 45 | "postcss": "^8.4.24", 46 | "tailwindcss": "^3.3.2", 47 | "typescript": "5.1.3" 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /streamlit_markdown/frontend/pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import "@/styles/globals.css"; 2 | import type { AppProps } from "next/app"; 3 | 4 | function MyApp({ Component, pageProps }: AppProps) { 5 | return ; 6 | } 7 | 8 | export default MyApp; 9 | -------------------------------------------------------------------------------- /streamlit_markdown/frontend/pages/index.tsx: -------------------------------------------------------------------------------- 1 | import type { NextPage } from "next"; 2 | import Head from "next/head"; 3 | import { StreamlitProvider } from "streamlit-component-lib-react-hooks"; 4 | import StreamlitMarkdown from "@/components/streamlit-markdown"; 5 | 6 | const Home: NextPage = () => { 7 | return ( 8 | <> 9 | 10 | Create Next App 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | ); 19 | }; 20 | 21 | export default Home; 22 | -------------------------------------------------------------------------------- /streamlit_markdown/frontend/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /streamlit_markdown/frontend/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinXueyuanStdio/streamlit-markdown/7c1603c958f9811e87628f63176a790cc2fbc89c/streamlit_markdown/frontend/public/favicon.ico -------------------------------------------------------------------------------- /streamlit_markdown/frontend/public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /streamlit_markdown/frontend/styles/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /streamlit_markdown/frontend/styles/green-screen.css: -------------------------------------------------------------------------------- 1 | /*! 2 | Theme: Green Screen 3 | Author: Chris Kempson (http://chriskempson.com) 4 | License: ~ MIT (or more permissive) [via base16-schemes-source] 5 | Maintainer: @highlightjs/core-team 6 | Version: 2021.09.0 7 | */ 8 | 9 | /* 10 | WARNING: DO NOT EDIT THIS FILE DIRECTLY. 11 | 12 | This theme file was auto-generated from the Base16 scheme green-screen 13 | by the Highlight.js Base16 template builder. 14 | 15 | - https://github.com/highlightjs/base16-highlightjs 16 | */ 17 | 18 | /* 19 | base00 #001100 Default Background 20 | base01 #003300 Lighter Background (Used for status bars, line number and folding marks) 21 | base02 #005500 Selection Background 22 | base03 #007700 Comments, Invisibles, Line Highlighting 23 | base04 #009900 Dark Foreground (Used for status bars) 24 | base05 #00bb00 Default Foreground, Caret, Delimiters, Operators 25 | base06 #00dd00 Light Foreground (Not often used) 26 | base07 #00ff00 Light Background (Not often used) 27 | base08 #007700 Variables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted 28 | base09 #009900 Integers, Boolean, Constants, XML Attributes, Markup Link Url 29 | base0A #007700 Classes, Markup Bold, Search Text Background 30 | base0B #00bb00 Strings, Inherited Class, Markup Code, Diff Inserted 31 | base0C #005500 Support, Regular Expressions, Escape Characters, Markup Quotes 32 | base0D #009900 Functions, Methods, Attribute IDs, Headings 33 | base0E #00bb00 Keywords, Storage, Selector, Markup Italic, Diff Changed 34 | base0F #005500 Deprecated, Opening/Closing Embedded Language Tags, e.g. 35 | */ 36 | 37 | pre code.hljs { 38 | display: block; 39 | overflow-x: auto; 40 | padding: 1em; 41 | } 42 | 43 | code.hljs { 44 | padding: 3px 5px; 45 | } 46 | 47 | .hljs { 48 | color: #00bb00; 49 | background: #001100; 50 | } 51 | 52 | .hljs::selection, 53 | .hljs ::selection { 54 | background-color: #005500; 55 | color: #00bb00; 56 | } 57 | 58 | 59 | /* purposely do not highlight these things */ 60 | .hljs-formula, 61 | .hljs-params, 62 | .hljs-property 63 | {} 64 | 65 | /* base03 - #007700 - Comments, Invisibles, Line Highlighting */ 66 | .hljs-comment { 67 | color: #007700; 68 | } 69 | 70 | /* base04 - #009900 - Dark Foreground (Used for status bars) */ 71 | .hljs-tag { 72 | color: #009900; 73 | } 74 | 75 | /* base05 - #00bb00 - Default Foreground, Caret, Delimiters, Operators */ 76 | .hljs-subst, 77 | .hljs-punctuation, 78 | .hljs-operator { 79 | color: #00bb00; 80 | } 81 | 82 | .hljs-operator { 83 | opacity: 0.7; 84 | } 85 | 86 | /* base08 - Variables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted */ 87 | .hljs-bullet, 88 | .hljs-variable, 89 | .hljs-template-variable, 90 | .hljs-selector-tag, 91 | .hljs-name, 92 | .hljs-deletion { 93 | color: #007700; 94 | } 95 | 96 | /* base09 - Integers, Boolean, Constants, XML Attributes, Markup Link Url */ 97 | .hljs-symbol, 98 | .hljs-number, 99 | .hljs-link, 100 | .hljs-attr, 101 | .hljs-variable.constant_, 102 | .hljs-literal { 103 | color: #009900; 104 | } 105 | 106 | /* base0A - Classes, Markup Bold, Search Text Background */ 107 | .hljs-title, 108 | .hljs-class .hljs-title, 109 | .hljs-title.class_ 110 | { 111 | color: #007700; 112 | } 113 | 114 | .hljs-strong { 115 | font-weight:bold; 116 | color: #007700; 117 | } 118 | 119 | /* base0B - Strings, Inherited Class, Markup Code, Diff Inserted */ 120 | .hljs-code, 121 | .hljs-addition, 122 | .hljs-title.class_.inherited__, 123 | .hljs-string { 124 | color: #00bb00; 125 | } 126 | 127 | /* base0C - Support, Regular Expressions, Escape Characters, Markup Quotes */ 128 | .hljs-built_in, 129 | .hljs-doctag, /* guessing */ 130 | .hljs-quote, 131 | .hljs-keyword.hljs-atrule, 132 | .hljs-regexp { 133 | color: #005500; 134 | } 135 | 136 | /* base0D - Functions, Methods, Attribute IDs, Headings */ 137 | .hljs-function .hljs-title, 138 | .hljs-attribute, 139 | .ruby .hljs-property, 140 | .hljs-title.function_, 141 | .hljs-section { 142 | color: #009900; 143 | } 144 | 145 | /* base0E - Keywords, Storage, Selector, Markup Italic, Diff Changed */ 146 | .hljs-type, 147 | /* .hljs-selector-id, */ 148 | /* .hljs-selector-class, */ 149 | /* .hljs-selector-attr, */ 150 | /* .hljs-selector-pseudo, */ 151 | .hljs-template-tag, 152 | .diff .hljs-meta, 153 | .hljs-keyword { 154 | color: #00bb00; 155 | } 156 | .hljs-emphasis { 157 | color: #00bb00; 158 | font-style: italic; 159 | } 160 | 161 | /* base0F - Deprecated, Opening/Closing Embedded Language Tags, e.g. */ 162 | .hljs-meta, 163 | /* 164 | prevent top level .keyword and .string scopes 165 | from leaking into meta by accident 166 | */ 167 | .hljs-meta .hljs-keyword, 168 | .hljs-meta .hljs-string 169 | { 170 | color: #005500; 171 | } 172 | 173 | .hljs-meta .hljs-keyword, 174 | /* for v10 compatible themes */ 175 | .hljs-meta-keyword { 176 | font-weight: bold; 177 | } -------------------------------------------------------------------------------- /streamlit_markdown/frontend/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: [ 4 | "./pages/**/*.{js,jsx,ts,tsx}", 5 | "./components/**/*.{js,jsx,ts,tsx}", 6 | "./lib/**/*.{js,jsx,ts,tsx}", 7 | "./hooks/**/*.{js,jsx,ts,tsx}", 8 | ], 9 | theme: { 10 | extend: {}, 11 | }, 12 | plugins: [require("@tailwindcss/typography")], 13 | }; 14 | -------------------------------------------------------------------------------- /streamlit_markdown/frontend/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "strict": true, 12 | "forceConsistentCasingInFileNames": true, 13 | "noEmit": true, 14 | "esModuleInterop": true, 15 | "module": "esnext", 16 | "moduleResolution": "node", 17 | "resolveJsonModule": true, 18 | "isolatedModules": true, 19 | "jsx": "preserve", 20 | "incremental": true, 21 | "paths": { 22 | "@/*": [ 23 | "./*" 24 | ] 25 | } 26 | }, 27 | "include": [ 28 | "next-env.d.ts", 29 | "**/*.ts", 30 | "**/*.tsx" 31 | ], 32 | "exclude": [ 33 | "node_modules" 34 | ] 35 | } 36 | -------------------------------------------------------------------------------- /streamlit_markdown/st_hack.py: -------------------------------------------------------------------------------- 1 | from __future__ import annotations 2 | from typing import * 3 | 4 | from streamlit import __version__ 5 | from streamlit.proto.Element_pb2 import Element 6 | from streamlit.delta_generator import DeltaGenerator 7 | 8 | import streamlit.components.v1 as v1 9 | if hasattr(v1, "custom_component"): 10 | from streamlit.components.v1.custom_component import CustomComponent 11 | else: 12 | from streamlit.components.v1.components import CustomComponent 13 | 14 | try: 15 | from streamlit_markdown.st_hack_v1 import marshall_component 16 | except: 17 | from streamlit_markdown.st_hack_v2 import marshall_component 18 | 19 | 20 | 21 | def st_hack_component( 22 | parent: DeltaGenerator, 23 | component: CustomComponent, 24 | key=None, 25 | default: Any = None, 26 | **kwargs, 27 | ): 28 | element = Element() 29 | component_proto, return_value = marshall_component( 30 | component, 31 | parent, 32 | element, 33 | key, 34 | default, 35 | **kwargs, 36 | ) 37 | 38 | return parent._enqueue("component_instance", component_proto, return_value) 39 | 40 | -------------------------------------------------------------------------------- /streamlit_markdown/st_hack_v1.py: -------------------------------------------------------------------------------- 1 | from __future__ import annotations 2 | 3 | from streamlit.elements.form import current_form_id 4 | from streamlit.proto.Element_pb2 import Element 5 | from streamlit.runtime.scriptrunner import get_script_run_ctx, ScriptRunContext 6 | from streamlit.runtime.state import NoValue, register_widget 7 | from streamlit.runtime.state.widgets import ElementType, ELEMENT_TYPE_TO_VALUE_TYPE 8 | from streamlit.runtime.state.common import compute_widget_id 9 | from streamlit.delta_generator import DeltaGenerator 10 | 11 | import streamlit.components.v1 as v1 12 | if hasattr(v1, "custom_component"): 13 | from streamlit.components.v1.custom_component import CustomComponent, MarshallComponentException 14 | else: 15 | from streamlit.components.v1.components import CustomComponent, MarshallComponentException 16 | 17 | from streamlit.runtime.state.common import ( 18 | RegisterWidgetResult, 19 | T, 20 | WidgetArgs, 21 | WidgetCallback, 22 | WidgetDeserializer, 23 | WidgetKwargs, 24 | WidgetMetadata, 25 | WidgetProto, 26 | WidgetSerializer, 27 | user_key_from_widget_id, 28 | ) 29 | from typing import * 30 | import json 31 | 32 | 33 | def marshall_component( 34 | self: CustomComponent, 35 | dg: DeltaGenerator, 36 | element: Element, 37 | key, 38 | default, 39 | **kwargs, 40 | ): 41 | all_args = dict(kwargs, **{"default": default, "key": key}) 42 | 43 | json_args = {} 44 | special_args = [] 45 | for arg_name, arg_val in all_args.items(): 46 | json_args[arg_name] = arg_val 47 | 48 | try: 49 | serialized_json_args = json.dumps(json_args) 50 | except Exception as ex: 51 | raise MarshallComponentException("Could not convert component args to JSON", ex) 52 | element.component_instance.component_name = self.name 53 | element.component_instance.form_id = current_form_id(dg) 54 | if self.url is not None: 55 | element.component_instance.url = self.url 56 | 57 | # Normally, a widget's element_hash (which determines 58 | # its identity across multiple runs of an app) is computed 59 | # by hashing its arguments. This means that, if any of the arguments 60 | # to the widget are changed, Streamlit considers it a new widget 61 | # instance and it loses its previous state. 62 | # 63 | # However! If a *component* has a `key` argument, then the 64 | # component's hash identity is determined by entirely by 65 | # `component_name + url + key`. This means that, when `key` 66 | # exists, the component will maintain its identity even when its 67 | # other arguments change, and the component's iframe won't be 68 | # remounted on the frontend. 69 | 70 | def marshall_element_args(): 71 | element.component_instance.json_args = serialized_json_args 72 | element.component_instance.special_args.extend(special_args) 73 | 74 | ctx = get_script_run_ctx() 75 | 76 | if key is None: 77 | marshall_element_args() 78 | computed_id = compute_widget_id( 79 | "component_instance", 80 | user_key=key, 81 | name=self.name, 82 | form_id=current_form_id(dg), 83 | url=self.url, 84 | key=key, 85 | json_args=serialized_json_args, 86 | special_args=special_args, 87 | page=ctx.page_script_hash if ctx else None, 88 | ) 89 | else: 90 | computed_id = compute_widget_id( 91 | "component_instance", 92 | user_key=key, 93 | name=self.name, 94 | form_id=current_form_id(dg), 95 | url=self.url, 96 | key=key, 97 | page=ctx.page_script_hash if ctx else None, 98 | ) 99 | 100 | element.component_instance.id = computed_id 101 | 102 | def deserialize_component(ui_value, widget_id=""): 103 | # ui_value is an object from json, an ArrowTable proto, or a bytearray 104 | return ui_value 105 | 106 | component_state = register_widget( 107 | element_type="component_instance", 108 | element_proto=element.component_instance, 109 | user_key=key, 110 | widget_func_name=self.name, 111 | deserializer=deserialize_component, 112 | serializer=lambda x: x, 113 | ctx=ctx, 114 | ) 115 | widget_value = component_state.value 116 | 117 | if key is not None: 118 | marshall_element_args() 119 | 120 | if widget_value is None: 121 | widget_value = default 122 | 123 | # widget_value will be either None or whatever the component's most 124 | # recent setWidgetValue value is. We coerce None -> NoValue, 125 | # because that's what DeltaGenerator._enqueue expects. 126 | value = widget_value if widget_value is not None else NoValue 127 | return element.component_instance, value 128 | 129 | 130 | def register_widget( 131 | element_type: ElementType, 132 | element_proto: WidgetProto, 133 | deserializer: WidgetDeserializer[T], 134 | serializer: WidgetSerializer[T], 135 | ctx: ScriptRunContext | None, 136 | user_key: str | None = None, 137 | widget_func_name: str | None = None, 138 | on_change_handler: WidgetCallback | None = None, 139 | args: WidgetArgs | None = None, 140 | kwargs: WidgetKwargs | None = None, 141 | ) -> RegisterWidgetResult[T]: 142 | if hasattr(ctx, "current_fragment_id"): 143 | metadata = WidgetMetadata( 144 | element_proto.id, 145 | deserializer, 146 | serializer, 147 | value_type=ELEMENT_TYPE_TO_VALUE_TYPE[element_type], 148 | callback=on_change_handler, 149 | callback_args=args, 150 | callback_kwargs=kwargs, 151 | fragment_id=ctx.current_fragment_id if ctx else None, 152 | ) 153 | else: 154 | metadata = WidgetMetadata( 155 | element_proto.id, 156 | deserializer, 157 | serializer, 158 | value_type=ELEMENT_TYPE_TO_VALUE_TYPE[element_type], 159 | callback=on_change_handler, 160 | callback_args=args, 161 | callback_kwargs=kwargs, 162 | ) 163 | return register_widget_from_metadata(metadata, ctx, widget_func_name, element_type) 164 | 165 | 166 | def register_widget_from_metadata( 167 | metadata: WidgetMetadata[T], 168 | ctx: ScriptRunContext | None, 169 | widget_func_name: str | None, 170 | element_type: ElementType, 171 | ) -> RegisterWidgetResult[T]: 172 | """Register a widget and return its value, using an already constructed 173 | `WidgetMetadata`. 174 | 175 | This is split out from `register_widget` to allow caching code to replay 176 | widgets by saving and reusing the completed metadata. 177 | 178 | See `register_widget` for details on what this returns. 179 | """ 180 | # Local import to avoid import cycle 181 | import streamlit.runtime.caching as caching 182 | 183 | if ctx is None: 184 | # Early-out if we don't have a script run context (which probably means 185 | # we're running as a "bare" Python script, and not via `streamlit run`). 186 | return RegisterWidgetResult.failure(deserializer=metadata.deserializer) 187 | 188 | widget_id = metadata.id 189 | user_key = user_key_from_widget_id(widget_id) 190 | 191 | # Ensure another widget with the same user key hasn't already been registered. 192 | if user_key is not None: 193 | if user_key not in ctx.widget_user_keys_this_run: 194 | ctx.widget_user_keys_this_run.add(user_key) 195 | 196 | # Ensure another widget with the same id hasn't already been registered. 197 | new_widget = widget_id not in ctx.widget_ids_this_run 198 | if new_widget: 199 | ctx.widget_ids_this_run.add(widget_id) 200 | 201 | # Save the widget metadata for cached result replay 202 | if hasattr(caching, "save_widget_metadata"): 203 | caching.save_widget_metadata(metadata) 204 | return ctx.session_state.register_widget(metadata, user_key) 205 | -------------------------------------------------------------------------------- /streamlit_markdown/st_hack_v2.py: -------------------------------------------------------------------------------- 1 | from __future__ import annotations 2 | 3 | from streamlit.elements.form import current_form_id 4 | from streamlit.proto.Element_pb2 import Element 5 | from streamlit.runtime.scriptrunner import get_script_run_ctx 6 | from streamlit.runtime.state import register_widget 7 | from streamlit.elements.lib.utils import compute_and_register_element_id, _compute_element_id 8 | from streamlit.delta_generator import DeltaGenerator 9 | 10 | import streamlit.components.v1 as v1 11 | if hasattr(v1, "custom_component"): 12 | from streamlit.components.v1.custom_component import CustomComponent, MarshallComponentException 13 | else: 14 | from streamlit.components.v1.components import CustomComponent, MarshallComponentException 15 | 16 | from streamlit.runtime.scriptrunner_utils.script_run_context import ScriptRunContext 17 | from streamlit.runtime.state.common import ( 18 | WidgetCallback, 19 | user_key_from_element_id, 20 | ) 21 | from typing import * 22 | import json 23 | 24 | 25 | def marshall_component( 26 | self: CustomComponent, 27 | dg: DeltaGenerator, 28 | element: Element, 29 | key, 30 | default, 31 | on_change: WidgetCallback | None = None, 32 | **kwargs, 33 | ): 34 | all_args = dict(kwargs, **{"default": default, "key": key}) 35 | 36 | json_args = {} 37 | special_args = [] 38 | for arg_name, arg_val in all_args.items(): 39 | json_args[arg_name] = arg_val 40 | 41 | try: 42 | serialized_json_args = json.dumps(json_args) 43 | except Exception as ex: 44 | raise MarshallComponentException("Could not convert component args to JSON", ex) 45 | element.component_instance.component_name = self.name 46 | element.component_instance.form_id = current_form_id(dg) 47 | if self.url is not None: 48 | element.component_instance.url = self.url 49 | 50 | # Normally, a widget's element_hash (which determines 51 | # its identity across multiple runs of an app) is computed 52 | # by hashing its arguments. This means that, if any of the arguments 53 | # to the widget are changed, Streamlit considers it a new widget 54 | # instance and it loses its previous state. 55 | # 56 | # However! If a *component* has a `key` argument, then the 57 | # component's hash identity is determined by entirely by 58 | # `component_name + url + key`. This means that, when `key` 59 | # exists, the component will maintain its identity even when its 60 | # other arguments change, and the component's iframe won't be 61 | # remounted on the frontend. 62 | 63 | def marshall_element_args(): 64 | element.component_instance.json_args = serialized_json_args 65 | element.component_instance.special_args.extend(special_args) 66 | 67 | ctx = get_script_run_ctx() 68 | 69 | if key is None: 70 | marshall_element_args() 71 | computed_id = compute_and_register_element_id( 72 | "component_instance", 73 | user_key=key, 74 | form_id=current_form_id(dg), 75 | name=self.name, 76 | url=self.url, 77 | json_args=serialized_json_args, 78 | special_args=special_args, 79 | ) 80 | else: 81 | computed_id = compute_and_register_element_id( 82 | "component_instance", 83 | user_key=key, 84 | form_id=current_form_id(dg), 85 | name=self.name, 86 | url=self.url, 87 | ) 88 | 89 | element.component_instance.id = computed_id 90 | 91 | def deserialize_component(ui_value, widget_id=""): 92 | # ui_value is an object from json, an ArrowTable proto, or a bytearray 93 | return ui_value 94 | 95 | component_state = register_widget( 96 | element.component_instance.id, 97 | deserializer=deserialize_component, 98 | serializer=lambda x: x, 99 | ctx=ctx, 100 | on_change_handler=on_change, 101 | value_type="json_value", 102 | ) 103 | widget_value = component_state.value 104 | 105 | if key is not None: 106 | marshall_element_args() 107 | 108 | if widget_value is None: 109 | widget_value = default 110 | 111 | # widget_value will be either None or whatever the component's most 112 | # recent setWidgetValue value is. We coerce None -> NoValue, 113 | # because that's what DeltaGenerator._enqueue expects. 114 | value = widget_value 115 | return element.component_instance, value 116 | 117 | 118 | def compute_and_register_element_id( 119 | element_type: str, 120 | *, 121 | user_key: str | None, 122 | form_id: str | None, 123 | **kwargs: SAFE_VALUES | Iterable[SAFE_VALUES], 124 | ) -> str: 125 | """Compute and register the ID for the given element. 126 | 127 | This ID is stable: a given set of inputs to this function will always produce 128 | the same ID output. Only stable, deterministic values should be used to compute 129 | element IDs. Using nondeterministic values as inputs can cause the resulting 130 | element ID to change between runs. 131 | 132 | The element ID includes the user_key so elements with identical arguments can 133 | use it to be distinct. The element ID includes an easily identified prefix, and the 134 | user_key as a suffix, to make it easy to identify it and know if a key maps to it. 135 | 136 | The element ID gets registered to make sure that only one ID and user-specified 137 | key exists at the same time. If there are duplicated IDs or keys, an error 138 | is raised. 139 | 140 | Parameters 141 | ---------- 142 | element_type : str 143 | The type (command name) of the element to register. 144 | 145 | user_key : str | None 146 | The user-specified key for the element. `None` if no key is provided 147 | or if the element doesn't support a specifying a key. 148 | 149 | form_id : str | None 150 | The ID of the form that the element belongs to. `None` or empty string 151 | if the element doesn't belong to a form or doesn't support forms. 152 | 153 | kwargs : SAFE_VALUES | Iterable[SAFE_VALUES] 154 | The arguments to use to compute the element ID. 155 | The arguments must be stable, deterministic values. 156 | Some common parameters like key, disabled, 157 | format_func, label_visibility, args, kwargs, on_change, and 158 | the active_script_hash are not supposed to be added here 159 | """ 160 | ctx = get_script_run_ctx() 161 | 162 | # If form_id is provided, add it to the kwargs. 163 | kwargs_to_use = {"form_id": form_id, **kwargs} if form_id else kwargs 164 | 165 | if ctx: 166 | # Add the active script hash to give elements on different 167 | # pages unique IDs. 168 | kwargs_to_use["active_script_hash"] = ctx.active_script_hash 169 | 170 | element_id = _compute_element_id( 171 | element_type, 172 | user_key, 173 | **kwargs_to_use, 174 | ) 175 | 176 | if ctx: 177 | _register_element_id(ctx, element_type, element_id) 178 | return element_id 179 | 180 | 181 | def _register_element_id( 182 | ctx: ScriptRunContext, element_type: str, element_id: str 183 | ) -> None: 184 | 185 | if not element_id: 186 | return 187 | 188 | if user_key := user_key_from_element_id(element_id): 189 | if user_key not in ctx.widget_user_keys_this_run: 190 | ctx.widget_user_keys_this_run.add(user_key) 191 | # else: 192 | # raise StreamlitDuplicateElementKey(user_key) 193 | 194 | if element_id not in ctx.widget_ids_this_run: 195 | ctx.widget_ids_this_run.add(element_id) 196 | # else: 197 | # raise StreamlitDuplicateElementId(element_type) 198 | -------------------------------------------------------------------------------- /test.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | set -e 4 | 5 | # Build Frontend 6 | cd streamlit_markdown/frontend || exit 7 | yarn install 8 | yarn run build 9 | 10 | cd ../.. 11 | 12 | streamlit run example.py --server.fileWatcherType none 13 | --------------------------------------------------------------------------------