From 114d6cfa0242565d332e087ec6d144f25e855787 Mon Sep 17 00:00:00 2001 From: Ganesh Patil <7030871503ganeshpatil@gmail.com> Date: Fri, 26 Dec 2025 14:48:32 +0530 Subject: [PATCH 1/2] Update code and documentation for new features and fixes --- docker-compose.yml | 58 +++++++++--------- docs/using_the_commons.md | 32 +++++++++- .../src/components/UploadSubmissionForm.jsx | 60 +++++++++++++++++++ .../components/UploadSubmissionForm.test.jsx | 25 ++++++++ scripts/postgres_run.sh | 2 +- scripts/postgres_run_fixed.sh | 7 +++ 6 files changed, 152 insertions(+), 32 deletions(-) create mode 100644 portal/src/components/UploadSubmissionForm.jsx create mode 100644 portal/src/components/UploadSubmissionForm.test.jsx create mode 100644 scripts/postgres_run_fixed.sh diff --git a/docker-compose.yml b/docker-compose.yml index 378c095..461e745 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -142,23 +142,23 @@ services: retries: 5 depends_on: - postgres - guppy-service: - image: "quay.io/cdis/guppy:2021.03" - container_name: guppy-service - networks: - - devnet - volumes: - - ./Secrets/guppy_config.json:/guppy/guppy_config.json - - ./scripts/wait_for_esproxy.sh:/usr/bin/wait_for_esproxy.sh:ro - entrypoint: /usr/bin/wait_for_esproxy.sh - command: node --max-http-header-size 16000 dist/server/server.js - environment: - - GUPPY_CONFIG_FILEPATH=/guppy/guppy_config.json - - GEN3_ARBORIST_ENDPOINT=http://arborist-service - - GEN3_ES_ENDPOINT=http://esproxy-service:9200 - depends_on: - - arborist-service - - esproxy-service + # guppy-service: + # image: "quay.io/cdis/guppy:2021.03" + # container_name: guppy-service + # networks: + # - devnet + # volumes: + # - ./Secrets/guppy_config.json:/guppy/guppy_config.json + # - ./scripts/wait_for_esproxy.sh:/usr/bin/wait_for_esproxy.sh:ro + # entrypoint: /usr/bin/wait_for_esproxy.sh + # command: node --max-http-header-size 16000 dist/server/server.js + # environment: + # - GUPPY_CONFIG_FILEPATH=/guppy/guppy_config.json + # - GEN3_ARBORIST_ENDPOINT=http://arborist-service + # - GEN3_ES_ENDPOINT=http://esproxy-service:9200 + # depends_on: + # - arborist-service + # - esproxy-service esproxy-service: image: quay.io/cdis/elasticsearch-oss:6.8.12 container_name: esproxy-service @@ -306,18 +306,18 @@ services: environment: - HADOOP_URL=hdfs://0.0.0.0:9000 - HADOOP_HOST=0.0.0.0 - kibana-service: - image: quay.io/cdis/kibana-oss:6.5.4 - container_name: kibana-service - environment: - - SERVER_NAME=kibana-service - - ELASTICSEARCH_URL=http://esproxy-service:9200 - ports: - - 5601:5601 - networks: - - devnet - depends_on: - - esproxy-service + # kibana-service: + # image: quay.io/cdis/kibana-oss:6.5.4 + # container_name: kibana-service + # environment: + # - SERVER_NAME=kibana-service + # - ELASTICSEARCH_URL=http://esproxy-service:9200 + # ports: + # - 5601:5601 + # networks: + # - devnet + # depends_on: + # - esproxy-service networks: devnet: volumes: diff --git a/docs/using_the_commons.md b/docs/using_the_commons.md index ec70e48..fd1c0a4 100644 --- a/docs/using_the_commons.md +++ b/docs/using_the_commons.md @@ -22,9 +22,37 @@ Make sure to update user privileges: docker exec -it fence-service fence-create sync --arborist http://arborist-service --yaml user.yaml ``` -To create a program, visit the URL where your Gen3 Commons is hosted and append `/_root`. If you are running the Docker Compose setup locally, then this will be `localhost/_root`. Otherwise, this will be whatever you set the `hostname` field to in the creds files for the services with `/_root` added to the end. Here, you can choose to either use form submission or upload a file. I will go through the process of using form submission here, as it will show you what your file would need to look like if you were using file upload. Choose form submission, search for "program" in the drop-down list and then fill in the "dbgap_accession_number" and "name" fields. As an example, you can use "123" as "dbgap accession number" and "Program1" as "name". Click 'Upload submission json from form' and then 'Submit'. If the message is green ("succeeded:200"), that indicates success, while a grey message indicates failure. More details can be viewed by clicking on the "DETAILS" button. If you don't see the green message, you can control the sheepdog logs for possible errors and check the Sheepdog database (`/datadictionary`), where programs and projects are stored. If you see your program in the data dictionary, neglect the fact that at this time the green message does not appear and continue to create a project. -To create a project, visit the URL where your Gen3 Commons is hosted and append the name of the program you want to create the project under. For example, if you are running the Docker Compose setup locally and would like to create a project under the program "Program1", the URL you will visit will be `localhost/Program1`. You will see the same options to use form submission or upload a file. This time, search for "project" in the drop-down list and then fill in the fields. As an example, you can use "P1" as "code", "phs1" as "dbgap_accession_number", and "project1" as "name". If you use different entries, make a note of the dbgap_accession_number for later. Click 'Upload submission json from form' and then 'Submit'. Again, a green message indicates success while a grey message indicates failure, and more details can be viewed by clicking on the "DETAILS" button. You can control in the `/datadictionary` whether the program and project have been correctly stored. +### Submitting Program or Project JSON via the UI + +You can submit a program or project using the Data Commons web UI. The submission form allows you to either: + +- **Upload a JSON file** (drag-and-drop or file picker) +- **Paste JSON directly** into a text area + +The form validates your JSON and provides feedback before submission. Example for a program: + +```json +{ + "dbgap_accession_number": "123", + "name": "Program1" +} +``` + +After uploading or pasting your JSON, click **Submit**. A green message indicates success; a grey message indicates failure. You can view more details by clicking the "DETAILS" button in the UI. + + +To create a project, visit your Gen3 Commons UI and navigate to the appropriate program (e.g., `localhost/Program1`). Use the submission form as above, but select **project** in the drop-down. Example project JSON: + +```json +{ + "code": "P1", + "dbgap_accession_number": "phs1", + "name": "project1" +} +``` + +After submitting, check for a green success message. You can verify the new program/project in the `/datadictionary` section. After that, you're ready to start submitting data for that project! Please note that Data Submission refers to metadata regarding the file(s) (Image, Sequencing files, etc.) that are to be uploaded. Please refer to the [Gen3 website](https://gen3.org/resources/user/submit-data/) for additional details. diff --git a/portal/src/components/UploadSubmissionForm.jsx b/portal/src/components/UploadSubmissionForm.jsx new file mode 100644 index 0000000..058dc39 --- /dev/null +++ b/portal/src/components/UploadSubmissionForm.jsx @@ -0,0 +1,60 @@ +import React, { useState } from 'react'; + +/** + * UploadSubmissionForm - allows users to upload a JSON file or submit JSON via a form for Gen3 submission. + * SRP: Handles only upload/submission logic, delegates validation and API to parent. + */ +export default function UploadSubmissionForm({ onSubmit }) { + const [jsonText, setJsonText] = useState(''); + const [fileError, setFileError] = useState(''); + const [status, setStatus] = useState(''); + + const handleFileChange = (e) => { + const file = e.target.files[0]; + if (!file) return; + if (!file.name.endsWith('.json')) { + setFileError('Please select a JSON file.'); + return; + } + const reader = new FileReader(); + reader.onload = (event) => { + setJsonText(event.target.result); + setFileError(''); + }; + reader.readAsText(file); + }; + + const handleChange = (e) => { + setJsonText(e.target.value); + }; + + const handleSubmit = (e) => { + e.preventDefault(); + try { + const json = JSON.parse(jsonText); + setStatus('Submitting...'); + onSubmit(json) + .then(() => setStatus('Submission successful!')) + .catch((err) => setStatus('Submission failed: ' + err.message)); + } catch (err) { + setStatus('Invalid JSON: ' + err.message); + } + }; + + return ( +
+

Upload Submission JSON

+
+ + + {fileError &&
{fileError}
} +
+
+ +