{"id":24599819,"url":"https://github.com/cissieab/flask_plotly_dash_site","last_synced_at":"2026-05-02T05:41:49.859Z","repository":{"id":128865386,"uuid":"358021841","full_name":"cissieAB/Flask_Plotly_Dash_Site","owner":"cissieAB","description":"A Flask site to host many dash Plotly apps.","archived":false,"fork":false,"pushed_at":"2021-04-19T14:41:09.000Z","size":449,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-06-05T03:27:34.183Z","etag":null,"topics":["dash","flask","plotly","python"],"latest_commit_sha":null,"homepage":"","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cissieAB.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-04-14T19:37:23.000Z","updated_at":"2021-04-19T14:41:11.000Z","dependencies_parsed_at":null,"dependency_job_id":"c6d87f36-c48b-4fdf-93a9-f7d3a2beef4e","html_url":"https://github.com/cissieAB/Flask_Plotly_Dash_Site","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/cissieAB/Flask_Plotly_Dash_Site","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cissieAB%2FFlask_Plotly_Dash_Site","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cissieAB%2FFlask_Plotly_Dash_Site/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cissieAB%2FFlask_Plotly_Dash_Site/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cissieAB%2FFlask_Plotly_Dash_Site/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cissieAB","download_url":"https://codeload.github.com/cissieAB/Flask_Plotly_Dash_Site/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cissieAB%2FFlask_Plotly_Dash_Site/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32524565,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-02T01:12:54.858Z","status":"online","status_checked_at":"2026-05-02T02:00:05.923Z","response_time":132,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dash","flask","plotly","python"],"created_at":"2025-01-24T13:17:33.971Z","updated_at":"2026-05-02T05:41:49.846Z","avatar_url":"https://github.com/cissieAB.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NASA FLASHFLUX TEAM INTERNAL SITE\n\nThis is a lightweight website written in Python Flask/Dash/Plotly (backend) and Bootstrap HTML/CSS (frontend).\nThe main purpose of this site is to share the Python Plotly figures with group members. Dash is utilized for \nrealtime interactive plots.\n\n\n## Environment\n\n### Python version requirement\nA minimum version of Python 3.8 is required for this project. Older versions are not supported. \nPlease install an appropriate version of Python.\n\n\n### Running the Python virtual environment\nThis project utilizes the Python virtual environment to pack all the needed packages to `requirements.txt`.\n\n- For the first time usage, running the bash script with `sh start_venv.sh`.\n- Then each time to edit the project, you can follow *either* of the following to start the virtual environment:\n    1. Command line: `source .venv/bin/activate`. You will find the difference in the shell screen.\n    2. IDE (PyCharm, in my case): follow the instructions \n   [here](https://www.jetbrains.com/help/pycharm/configuring-python-interpreter.html) \n   and set the Python interpreter as `$current_folder$/.venv/bin/python3`.\n- After adding more modules into the environment, please use `python3 -m pip freeze` to update `requirements.txt`.\nA reference can be found [here](https://packaging.python.org/guides/installing-using-pip-and-virtual-environments/).\n  \n## Description\n### Folder structure\n![](folder_structure.png)\n\nAbove is the screenshot of the project. Its main structure is described below.\n- `requirement.txt`,`start_venv.sh`, `.venv/`: Python environment related.\n- `.env`, `config.py`: global Flask configuration files. `config.py` parse the parameters\n  in `.env` and pass them to the Flask server. \n  Change `.env` when needed, especially with the deployed version.\n  The official documentation is [here](https://flask.palletsprojects.com/en/1.1.x/config/).\n- `/apps/__init__.py`: register the Flask and the Dash apps. Change them when you create \nmore Dash apps.\n- `/apps/routes.py`: define the mapping of the webpage url addresses to the static html \n  files for each sub page of the website. The documentation of the Flask routing rules can \n  be found [here](https://flask.palletsprojects.com/en/1.1.x/quickstart/#routing). \n  It must be changed when you add more sub pages.\n- `/apps/common_app_layouts.py`: define the common Dash components for all the Dash apps.\n  Now it includes a main container, with a return to homepage button at the bottom.\n  Change it to meet your own designs.\n- `/apps/templates/`: all the static html files defined by `/apps/routes.py` have to be \n  located here. These html files are independent of the Dash pages created by pure Python. \n  Change them when needed.\n- `/apps/static/`: all the site-related static files, including `styles.css` and the images.\nNote that `.js` files are also supported though I have not succeeded yet.\n- `/apps/data/`: all the related data for the real-time plots. I use different folders \nfor diverse Dash apps.\n- `/apps/dashapp_latency/`: all the files related to the latency Dash app. \n  Create another folder named as \"dashapp_xxxx\" under `/apps` and register them \n  in `/apps/__init__.py` if you add more Dash apps.\n\n### Backend\nThe backend mainly consists of Python Dash+Plotly apps. \nEach app is within a folder named as `./apps/dashapp_xxx`. \nFor example, the latency plot app is within `./apps/dashapp_latency`.\n\n### Frontend\nThe static html files have to be in the folder `/apps/templates/`. \nFlask will automatically search this location. Inappropriate processes may cause error.\n\nNote that although the html pages are static, some contents can be passed through Python. \nBelow I demonstrate how I render the homepage with Python and html together.\n\nThe Homepage is scripted in `/apps/templates/index.html`. It's a gallery entry for the Dash apps.\n\nThe html code for each app is marked below. Note that the three variables `app_1_latency_title`, \n`app_1_latency_description` and `app_1_latency_path` are passed through `/apps/route.py`. A screenshot \nof the first app is uploaded for your better understanding\n\n```html\n\u003c!-- index.html --\u003e\n        \u003c!-- One dash plot entry is represented with one Bootstrap Card--\u003e\n        \u003cdiv class=\"col-sm-4\"\u003e\n            \u003cdiv class=\"card\"\u003e\n                \u003cdiv class=\"card-header\"\u003e\n                    \u003c!-- image size: height: 200px, width: 375px--\u003e\n                    \u003cimg class=\"card-img-top\" src=\"../static/images/cover_latency_app.png\" alt=\"Latency App Cover Image\"\u003e\n                \u003c/div\u003e\n\n                \u003cdiv class=\"card-body\"\u003e\n                    \u003c!-- things in the double quoted brace are passed through `./apps/routes.py` --\u003e\n                    \u003ch4 class=\"dash-app-title\"\u003e{{ app_1_latency_title }}\u003c/h4\u003e\n                    \u003cp class=\"card-text\"\u003e\n                        {{ app_1_latency_description }}\n                    \u003c/p\u003e\n                \u003c/div\u003e\n                \u003cdiv class=\"card-footer\"\u003e\n                    \u003ca href={{ app_1_latency_path }} class=\"btn btn-primary\"\u003eClick here\u003c/a\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n```\n\n```python\n# routes.py\n@server_bp.route(\"/\")\ndef render_page_home():\n    \"\"\"Render the homepage.\"\"\"\n    return render_template(\n        \"index.html\",    # a html file at \"./templates\"\n        # parameters for the first Dash app\n        app_1_latency_title=HTML_APP_LATENCY_TITLE,  # 1. app_title\n        app_1_latency_description=\"Display the latency success rates of the FLASHFlux v3c/v4a SSF Aqua/Terra and the \"\n                                  \"TISA data products by month or by year.\",  # 2. app_latency\n        app_1_latency_path=HTML_APP_LATENCY_PATH,   # 3. the url for the app\n        ...\n    )\n```\n\n![](./apps/static/images/screenshot_app_1.png)\n\n\n\n\n## Deployment\n\n### Configuring Apache\n[TODO] NASA is using Apache to host the websites.\n- [ ] [Apache reference](https://flask.palletsprojects.com/en/1.1.x/deploying/mod_wsgi/)\n\n### Revising codes for production usage\n- Change `.env`. Now all the configuration parameters are written in `.env`. \n  Please modify it when deployed, especially for `FLASK_ENV=development`. \n  By default, the value of `FLASK_ENV` is `production`.\n  Do not enable `development` when deploying in production by deleting this line.\n```python\nFLASK_APP=dashapp.py     # the main function entry\nFLASK_ENV=development    # delete this line when deployed\nSECRET_KEY=NASA#FLASHFlux$RandomStrings   # a security key, use more secure ones when deployed\nLESS_BIN=/usr/local/bin/lessc\nASSETS_DEBUG=False\nLESS_RUN_IN_DEBUG=False\nCOMPRESSOR_DEBUG=True\n```\n  \n- In `/apps/constants.py`, change `HTML_HOME_PATH` to the true homepage url address when deployed.\n```python\n# url paths for the dash plot apps\nHTML_HOME_PATH = \"http://127.0.0.1:5000\"   # IMPORTANT: change it to the true url address when deployed\n```\n\n## Updating web contexts\n### Latency charts\n- Source data location: `apps/data/latency/*.csv`. \n  Replacing the files in this folder to update the plots at the webpage endpoint.\n- Naming rules:\n  1. Monthly latency data files are named as \"typestr_vstr_SR_by_month.csv\",\n  2. Annual latency data files are named as \"vstr_latency_by_year.csv\"\n\n    where `typestr` is one of \"Aqua\", \"Terra\" or \"TISA\", and `vstr` is \"Version3C\" or \"Version4A\".\n- The location and the file names are hardcoded in the backend scripts. Please follow them to save time.  \n- The source data files are got through \n  the [automatic latency statistic scripts](https://github.com/cissieAB/LatencyResample). \n  Copying the results from there is recommended.\n  \n### More Dash apps\nFollow the processes below to create a new Dash app and merge it to the existing code base:\n- Create the `layout` and the `callback` Dash functions based on your design.\n- Register this app in `/apps/__init__.py`.\n- Change the html template in `/apps/templates/index.html` when needed. \n\nPlease refer to \n[the git commit](https://github.com/cissieAB/Flask_Plotly_Dash_Site/commit/a92429d6214b5f7bafc5c403166d22b57b1e51a4)\n for how I added the second demo app.\n \n\n## References\n- [Flask official documentation](https://flask.palletsprojects.com/en/1.1.x/)\n- [Deploy Flask with Apache](https://flask.palletsprojects.com/en/1.1.x/deploying/mod_wsgi/)\n- [Dash official documentation](https://dash.plotly.com/)\n- [Bootstrap official documentation](https://getbootstrap.com/)\n- [Bootstrap templates](https://www.w3schools.com/bootstrap/bootstrap_templates.asp)\n- [Dash Bootstrap components](https://dash-bootstrap-components.opensource.faculty.ai/)\n- [How to embed a Dash app into an existing Flask app](https://medium.com/@olegkomarov_77860/how-to-embed-a-dash-app-into-an-existing-flask-app-ea05d7a2210b#bd30)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcissieab%2Fflask_plotly_dash_site","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcissieab%2Fflask_plotly_dash_site","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcissieab%2Fflask_plotly_dash_site/lists"}