{"id":23632197,"url":"https://github.com/harmonydata/app","last_synced_at":"2025-06-25T00:31:58.677Z","repository":{"id":175579379,"uuid":"651608110","full_name":"harmonydata/app","owner":"harmonydata","description":"Harmony front end","archived":false,"fork":false,"pushed_at":"2025-03-13T22:38:52.000Z","size":40843,"stargazers_count":0,"open_issues_count":10,"forks_count":6,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-01T15:42:20.614Z","etag":null,"topics":["data-science","deep-learning","fair-data","foss","front-end","harmonisation","harmony","javascript","llms","machine-learning","natural-language-processing","nlp","open-source","react"],"latest_commit_sha":null,"homepage":"https://harmonydata.ac.uk/app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/harmonydata.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"zenodo":null}},"created_at":"2023-06-09T16:11:29.000Z","updated_at":"2025-03-13T22:38:56.000Z","dependencies_parsed_at":"2023-12-20T20:26:35.226Z","dependency_job_id":"af2d46bc-c738-4203-8411-9b9f1b1edf5d","html_url":"https://github.com/harmonydata/app","commit_stats":null,"previous_names":["harmonydata/harmony_frontend"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/harmonydata/app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/harmonydata%2Fapp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/harmonydata%2Fapp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/harmonydata%2Fapp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/harmonydata%2Fapp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/harmonydata","download_url":"https://codeload.github.com/harmonydata/app/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/harmonydata%2Fapp/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261782332,"owners_count":23208902,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["data-science","deep-learning","fair-data","foss","front-end","harmonisation","harmony","javascript","llms","machine-learning","natural-language-processing","nlp","open-source","react"],"created_at":"2024-12-28T03:27:59.492Z","updated_at":"2025-06-25T00:31:58.666Z","avatar_url":"https://github.com/harmonydata.png","language":"JavaScript","readme":"![The Harmony Project logo](https://raw.githubusercontent.com/harmonydata/brand/main/Logo/PNG/%D0%BB%D0%BE%D0%B3%D0%BE%20%D1%84%D1%83%D0%BB-05.png)\n\n\u003ca href=\"https://harmonydata.ac.uk\"\u003e\u003cspan align=\"left\"\u003e🌐 harmonydata.ac.uk\u003c/span\u003e\u003c/a\u003e\n\u003ca href=\"https://www.linkedin.com/company/harmonydata\"\u003e\u003cimg align=\"left\" src=\"https://raw.githubusercontent.com//harmonydata/.github/main/profile/linkedin.svg\" alt=\"Harmony | LinkedIn\" width=\"21px\"/\u003e\u003c/a\u003e\n\u003ca href=\"https://twitter.com/harmony_data\"\u003e\u003cimg align=\"left\" src=\"https://raw.githubusercontent.com//harmonydata/.github/main/profile/x.svg\" alt=\"Harmony | X\" width=\"21px\"/\u003e\u003c/a\u003e\n\u003ca href=\"https://www.instagram.com/harmonydata/\"\u003e\u003cimg align=\"left\" src=\"https://raw.githubusercontent.com//harmonydata/.github/main/profile/instagram.svg\" alt=\"Harmony | Instagram\" width=\"21px\"/\u003e\u003c/a\u003e\n\u003ca href=\"https://www.facebook.com/people/Harmony-Project/100086772661697/\"\u003e\u003cimg align=\"left\" src=\"https://raw.githubusercontent.com//harmonydata/.github/main/profile/fb.svg\" alt=\"Harmony | Facebook\" width=\"21px\"/\u003e\u003c/a\u003e\n\u003ca href=\"https://www.youtube.com/channel/UCraLlfBr0jXwap41oQ763OQ\"\u003e\u003cimg align=\"left\" src=\"https://raw.githubusercontent.com//harmonydata/.github/main/profile/yt.svg\" alt=\"Harmony | YouTube\" width=\"21px\"/\u003e\u003c/a\u003e\n\n# Harmony Front End\n\n\u003c!-- badges: start --\u003e\n\n![my badge](https://badgen.net/badge/Status/In%20Development/orange)\n[![License](https://img.shields.io/github/license/harmonydata/harmony)](https://github.com/harmonydata/harmony/blob/main/LICENSE)\n[![forks](https://img.shields.io/github/forks/harmonydata/app)](https://github.com/harmonydata/app/forks)\n\n\u003c!-- badges: end --\u003e\n\nThis is the app in React which is running at https://harmonydata.ac.uk/app. It is not the blog which is at the base of the https://harmonydata.ac.uk domain at all paths other than /app.\n\n- 🪧 The source code of the Harmony static blog at https://harmonydata.ac.uk is in this repo: https://github.com/harmonydata/harmonydata.github.io. It is hosted with Github Pages.\n- 🪧 The Harmony Python library source code is here: https://github.com/harmonydata/harmony.\n- 🪧 The Harmony R library source code is here: https://github.com/harmonydata/harmony_r.\n- 🪧 The Harmony API source code is here: https://github.com/harmonydata/harmonyapi.\n\n## Installing on your local machine\n\n[YouTube video on installing and running the app in Windows](https://www.youtube.com/watch?v=1xp3Uh6dptg)\n\n## How to run Harmony's Node.js front end.\n\nFirst you need the [API server](https://github.com/harmonydata/harmonyapi) running. Download, install and start the Harmony API. The Node.js front end will connect to the API server.\n\nFollow the steps to install [Node.js](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).\n\nThen `cd` into this cloned folder (`cd app`) and run:\n\n```\nnpm install\nnpm start\n```\n\nYou can access Harmony in your browser at `http://localhost:3000/app#/`.\n\n![screenshot](https://harmonydata.ac.uk/images/localhost-min.png)\n\n## How to run this front end and connect to localhost API\n\n[Watch a video tutorial on how to run the Harmony front end locally and connect to Harmony API on localhost](https://youtu.be/1xp3Uh6dptg?si=g2CkXGEJCtevgdzY)\n\nRun the [Harmony API](https://github.com/harmonydata/harmonyapi) app in Python.\n\nOpen `.env` and change `REACT_APP_API_URL` to `http://localhost:8000` and change `REACT_APP_ABSOLUTE_URL_PREFIX` to `http://localhost:8000/app` (so that the front end knows that it's running on localhost and that it should connect to a localhost API)\n\n```\nREACT_APP_API_URL=http://localhost:8000\nREACT_APP_ABSOLUTE_URL_PREFIX=http://localhost:8000/app\n```\n\nThen run `npm install; npm start` as usual.\n\n## Who to contact?\n\nYou can contact Harmony team at https://harmonydata.ac.uk/, Thomas Wood at http://fastdatascience.com/ or John Rogers at http://delosis.com\n\n## Deployment\n\nCommits / pull requests to the master or staging branches will trigger an automatic build on netlifiy - temporay build URLS will be displayed in pull requests and please manually confirm your commits are working as intended.\n\nThe staging branch is always available at https://harmony-staging.netlify.app/\n\nThis app is deployed to the main website using Github actions when there is a push to `releases` branch - this is a protected branch. The script to do this is under folder `.github`.\n\nUlster University is managing the domain `harmonydata.ac.uk` which is configured to point to the IPs of the Github Pages deployment.\n\n## Harmony export library\n\nThis repository also includes the [distributable library](https://github.com/harmonydata/app/blob/master/src/components/HarmonyExport.js) to simplify making external links to the harmony model definition.\n\nTo build this component run\n\n```\nnpm run build:HarmonyExport\n```\n\nTo use this component on other sites include the package:\n\n```\n\u003cscript src=\"https://harmonydata.ac.uk/app/js/harmony-export.js\"\u003e\u003c/script\u003e\n```\n\nYou then have two routes to creating an harmony link - the easiest is using the custom web component `\u003charmony-export\u003e` it provides. This takes care of creating the special link code and provides the harmony icon.\n\n```\nconst harmonyLink = document.createElement(\"harmony-export\");\n\n' questions can be defined as a simple text array\nharmonyLink.questions = [\"question1\", \"question2\" ...]\n\n' OR as an array of objects which must specify both question_text and question_no\nharmonyLink.questions = [{question_no:1, question_text:\"question1\"}, {question_no:2, question_text:\"question2\"} ...]\n\n' You can also optionally define the name for the instrument containing these questions\nharmonyLink.instrument_name = \"PHQ-7\";\n\n' the icon size defaults to 24px but you can alter it with:\nharmonyLink.size= \"36px\"\n\n' Finally - apply any styling to the component you need and add it to your DOM\nwrapper.append(harmonyLink);\n```\n\nThe alternative method is to call the globally available function `createHarmonyUrl({questions, instrument_name})` This will return the bare URL needed to import your questions into the Harmony upload page. You will have to provide the means of following this link yourself. Note that you need to set a constant `target` for multiple links to ensure that the same session of the harmony site is reused to allow multiple imports into the same session.\n\n# How to contribute\n\nYou can raise an issue in the [issue tracker](https://github.com/harmonydata/harmony/issues), and you can open a [pull request](https://github.com/harmonydata/harmony/pulls).\n\nPlease contact us at https://harmonydata.ac.uk/contact or write to thomas@fastdatascience.com if you would like to be involved in the project.\n\n# Harmony Browser Extensions\n\nBrowser extensions for sending selected text to Harmony. Available for Chrome, Firefox, and Safari.\n\n## Features\n\n- Right-click to send selected text to Harmony\n- Popup interface for pasting text from PDFs\n- Seamless integration with Harmony Data platform\n- Cross-browser support\n\n## Development\n\nThe extensions are built using vanilla JavaScript and browser-specific Extension APIs. Each browser extension is located in its own directory:\n\n- `extensions/chrome/`: Chrome extension\n- `extensions/firefox/`: Firefox add-on\n- `extensions/safari/`: Safari extension\n\n### Common Components\n\nEach extension shares similar core functionality:\n- Context menu integration\n- Popup interface\n- Text selection handling\n- PDF text extraction\n\n### Local Development\n\n1. Clone the repository:\n   ```bash\n   git clone https://github.com/harmonydata/harmony-browser-extension.git\n   cd harmony-browser-extension\n   ```\n\n2. Install dependencies:\n   ```bash\n   npm install\n   ```\n\n3. Load the extension in your browser:\n\n   **Chrome:**\n   - Open Chrome and go to `chrome://extensions/`\n   - Enable \"Developer mode\"\n   - Click \"Load unpacked\" and select the `extensions/chrome` directory\n\n   **Firefox:**\n   - Open Firefox and go to `about:debugging`\n   - Click \"This Firefox\" on the left\n   - Click \"Load Temporary Add-on\"\n   - Select the `extensions/firefox/manifest.json` file\n\n   **Safari:**\n   - Open Safari and go to Safari \u003e Settings \u003e Extensions\n   - Enable \"Developer mode\"\n   - Click \"Load Extension\"\n   - Select the `extensions/safari` directory\n\n## Publishing\n\nThe extensions are automatically published to their respective stores when changes are pushed to the main branch. This is handled by GitHub Actions.\n\n### Chrome Web Store\n\n1. Go to the [Chrome Web Store Developer Dashboard](https://chrome.google.com/webstore/devconsole)\n2. Create a new item or select your existing extension\n3. Get your Extension ID from the URL\n4. Go to the \"API Access\" tab\n5. Create a new API key:\n   - Click \"Create new credentials\"\n   - Choose \"Chrome Web Store API\"\n   - Save the Client ID and Client Secret\n\n### Firefox Add-ons\n\n1. Go to the [Firefox Add-ons Developer Hub](https://addons.mozilla.org/developers/)\n2. Create a new add-on or select your existing one\n3. Get your Add-on ID\n4. Generate API credentials in the Developer Hub\n\n### Safari Extensions\n\n1. Go to the [Apple Developer Portal](https://developer.apple.com)\n2. Create a new Safari extension or select your existing one\n3. Get your Extension ID\n4. Generate API credentials in the Developer Portal\n\n### Configuring GitHub Secrets\n\nAdd the following secrets to your GitHub repository (Settings \u003e Secrets and variables \u003e Actions):\n\n**Chrome:**\n- `CHROME_EXTENSION_ID`\n- `CHROME_CLIENT_ID`\n- `CHROME_CLIENT_SECRET`\n- `CHROME_REFRESH_TOKEN`\n\n**Firefox:**\n- `FIREFOX_EXTENSION_ID`\n- `FIREFOX_API_KEY`\n- `FIREFOX_API_SECRET`\n\n**Safari:**\n- `SAFARI_EXTENSION_ID`\n- `SAFARI_API_KEY`\n- `SAFARI_API_SECRET`\n\n## Contributing\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add some amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## License\n\nThis project is licensed under the MIT License - see the LICENSE file for details.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fharmonydata%2Fapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fharmonydata%2Fapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fharmonydata%2Fapp/lists"}