diff --git a/.gitignore b/.gitignore index 4f6312c..daf5b3c 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,6 @@ -__pycache__/ .ipynb_checkpoints build/ +__pycache__/ neon_dashboard/__pycache__/ .venv .vscode/ diff --git a/README.md b/README.md index 2589d1c..0a8cdea 100644 --- a/README.md +++ b/README.md @@ -1,66 +1,47 @@ -# 📚 Neon Dashboard Readme 📚 +# 📚 NCAR-NEON Dashboard Readme 📚 -Neon Dashboard is a web-based visualization tool for exploring and analyzing neon data. It was created as part of the research project outlined in the paper (** add link). +**To access the NEON Dashboard, please visit the following link: [Neon Dashboard](https://ncar.nationalsciencedatafabric.org/neon-demo/v1/). + +The NCAR-NEON Dashboard provides an interactive visualization interface for visualizing and analyzing data collected by the [National Ecological Observatory Network (NEON)](https://www.neonscience.org/) and compare it with with the Community Terrestrial System Model (CTSM) simulations at those points. It was created as part of the research project outlined in [this paper](https://gmd.copernicus.org/articles/16/5979/2023/gmd-16-5979-2023.pdf). + +This dashboard enables users from anywhere in the world to explore and interact with model outputs and observations on the fly without any requirements for advanced computational resouces. This tool allows users to generate graphs and statistical summaries comparing CTSM simulations and observational data for NEON sites without downloading the observational data or running the model. Users access a Graphical User Interface (GUI) to select individual NEON sites, variables, and output frequencies to visualize. The tool offers different types of interactive visualizations and statistical summaries based on user selections. This interactive visualization dashboard does not require specialist knowledge to operate; therefore, it can be used for educational outreach activities and in classrooms. Moreover, users +can interact with the dashboard using a browser, so it is possible to interact with the plots via a tablet or smartphone. + +Users can customize the plots by selecting different data sources, time periods, and geographic regions. This dashboard is currently hosted on [the National Science Data Fabric (NSDF)](https://nationalsciencedatafabric.org/) and is publicly accessibler + +Besides using the above link to access the NEON Dashboard, you can also run the application on your local machine. This README provides instructions on how to run the NEON Dashboard application using a Docker container or without using a Docker container. + +-------------------------------------------------- + +## How to run the NEON Dashboard application yourself? There are many ways to run this application on your local machine: -## 🚀 Easiest Method: How to Clone Docker Image and Start the Bokeh Application from Docker Hub 📦 +### 🚀 Easiest Method: Using Docker Image Directly! 📦 -To quickly get started with the Neon Dashboard Bokeh application, you can use the easiest method by pulling the pre-built Docker image from Docker Hub. 📦 +To get started with the NEON Dashboard Bokeh application, you can use the easiest method by pulling the pre-built Docker image from Docker Hub. 📦 Open a terminal or command prompt and run the following command to pull the image: ```bash -docker pull negin513/neon-app +docker pull negin513/NEON-app ``` Once the image is pulled successfully, run the Bokeh application in a Docker container with the following command. This will forward the port `8080`, making the application publicly available: 🚀 ```bash -docker run -p 8080:5006 negin513/neon-app +docker run -p 8080:5006 negin513/NEON-app ``` The Bokeh application should now be up and running inside the Docker container. You can access it in your web browser at http://localhost:8080. 🎉🎉🎉 +### How to Run this Application without Docker Container? (using Conda) 🏃 -## 🚀 How to Run with Container? 🚀 - -To run Neon Dashboard using Docker container, follow these steps: - -1. Make sure you have Docker installed on your system. - -2. Clone or download the Neon Dashboard repository from https://github.com/negin513/neon_dashboard. - ``` - git clone https://github.com/negin513/neon_dashboard - ``` - -3. Navigate to the root directory of the cloned/downloaded repository. - ``` - cd neon_dashboard - ``` - -4. Build the Docker image using the provided Dockerfile: - ``` - docker build -t neon-app . - ``` - -5. Once the image is built, run the container with port mapping: - - ``` - docker run -p 5006:5006 neon-app - ``` - -6. The Neon Dashboard should now be accessible in your web browser at `http://localhost:5006`. - -Sure! Here's an additional section on how to run Neon Dashboard without using a Docker container, using Conda for managing the Python environment. +To run NEON Dashboard without using a Docker container, you'll need to have Conda and Python installed on your system. Follow these steps: -## 🏃 How to Run with Conda (Without Docker Container)? 🏃 - -To run Neon Dashboard without using a Docker container, you'll need to have Conda and Python installed on your system. Follow these steps: - -1. lone or download the Neon Dashboard repository from https://github.com/negin513/neon_dashboard. +1. lone or download the NEON Dashboard repository from https://github.com/negin513/NEON_dashboard. ``` - git clone https://github.com/negin513/neon_dashboard + git clone https://github.com/negin513/NEON_dashboard ``` 2. Create a Conda environment and install the required Python packages: @@ -72,7 +53,7 @@ To run Neon Dashboard without using a Docker container, you'll need to have Cond The first command creates a new Conda environment named "neon-env". The second command activates the environment. The third command installs Bokeh and its required dependencies, while the fourth command installs any additional Python packages listed in the requirements.txt file. -3. Once the dependencies are installed, navigate to the root directory of the Neon Dashboard repository and activate the `ncar-env` environment: +3. Once the dependencies are installed, navigate to the root directory of the NEON Dashboard repository and activate the `ncar-env` environment: ``` conda activate neon-env cd neon_dashboard @@ -85,12 +66,45 @@ To run Neon Dashboard without using a Docker container, you'll need to have Cond The `--allow-websocket-origin` flag is used to enable connections from the local host. -5. The Neon Dashboard should now be accessible in your web browser at `http://localhost:5006`. +5. The NEON Dashboard should now be accessible in your web browser at `http://localhost:5006`. + + + + + +### ### 🚀 How to Run with Container? 🚀 + +To run NEON Dashboard using Docker container, follow these steps: + +1. Make sure you have Docker installed on your system. + +2. Clone or download the NEON Dashboard repository from https://github.com/negin513/neon_dashboard. + ``` + git clone https://github.com/negin513/neon_dashboard + ``` + +3. Navigate to the root directory of the cloned/downloaded repository. + ``` + cd neon_dashboard + ``` + +4. Build the Docker image using the provided Dockerfile: + ``` + docker build -t neon-app . + ``` + +5. Once the image is built, run the container with port mapping: + + ``` + docker run -p 5006:5006 neon-app + ``` +6. The NEON Dashboard should now be accessible in your web browser at `http://localhost:5006`. +Sure! Here's an additional section on how to run NEON Dashboard without using a Docker container, using Conda for managing the Python environment. ## 📄 Citing the Paper 📄 -If you use Neon Dashboard in your research or work and want to cite the original paper, please use the following citation format [***]. +If you use NEON Dashboard in your research or work and want to cite the original paper, please use the following citation format [***]. -🎉🎉🎉 Have fun exploring your neon data with Neon Dashboard! 🎉🎉🎉 \ No newline at end of file +🎉🎉🎉 Have fun exploring your NEON data with NEON Dashboard! 🎉🎉🎉 \ No newline at end of file diff --git a/neon_dashboard/__pycache__/data_utils.cpython-39.pyc b/neon_dashboard/__pycache__/data_utils.cpython-39.pyc deleted file mode 100644 index 52875ac..0000000 Binary files a/neon_dashboard/__pycache__/data_utils.cpython-39.pyc and /dev/null differ diff --git a/neon_dashboard/models/download.js b/neon_dashboard/models/download.js index bb5e36e..95921d8 100644 --- a/neon_dashboard/models/download.js +++ b/neon_dashboard/models/download.js @@ -1,17 +1,24 @@ function table_to_csv(source) { - const columns = Object.keys(source.data) - const nrows = source.get_length() - const lines = [columns.join(',')] + const columns = Object.keys(source.data); + const nrows = source.get_length(); + const lines = [columns.join(',')]; for (let i = 0; i < nrows; i++) { let row = []; for (let j = 0; j < columns.length; j++) { - const column = columns[j] - row.push(source.data[column][i].toString()) + const column = columns[j]; + let cellValue = source.data[column][i]; + // Check if the column name suggests it's a time/date column + // Adjust the condition to fit your specific column naming + if (column.toLowerCase().includes('time') || column.toLowerCase().includes('date')) { + // Assuming UNIX timestamp in milliseconds, adjust accordingly + cellValue = new Date(cellValue).toISOString(); + } + row.push(cellValue.toString()); } - lines.push(row.join(',')) + lines.push(row.join(',')); } - return lines.join('\n').concat('\n') + return lines.join('\n').concat('\n'); }