Merge pull request #30 from RNAcentral/no-react

No react

Author: pmustonebi

.babelrc

@@ -1,6 +1,5 @@
 {
    "presets": [
        "@babel/preset-env",
-       "@babel/preset-react"
    ]
 }

.gitignore

@@ -1,3 +1,4 @@
+coverage/
 node_modules/
 package-lock.json
 .idea*

README.md

@@ -1,138 +1,95 @@
 # R2DT-Web
 
-This is an embeddable component that you can include into your website to visualise RNA secondary structures.
+This is an embeddable component that you can include in your website to visualise RNA secondary structures.
 
 ## How to use
 
-To use the latest stable version without worrying about updates, use the component's javascript package available at 
+Only two lines of code are needed to use this widget: one line with the r2dt-web tag and another with the script 
+for this component, for example:
+
+```
+<r2dt-web/>
+<script type="text/javascript" src="/path/to/r2dt-web.js"></script>
+```    
+And then the component provides a simple input box where you can paste an RNA/DNA sequence, URL or job ID.
+![Search input](img/search.png)
+
+To use the latest stable version without worrying about updates, use the component's JavaScript package available at 
 GitHub:
 
 `<script type="text/javascript" src="https://rnacentral.github.io/r2dt-web/dist/r2dt-web.js"></script>`
 
-If you prefer to install this package and perform the updates manually, see the [Installation](#Installation) section. 
+If you prefer to install this package and perform the updates manually, see the [Installation](#Installation) section.
 
-This tool can be used in two ways:
+### Other methods of use
 
-**1- Allow the user to enter a sequence and search for the secondary structure**. 
-
-For that, you just need to insert this html tag somewhere in your html:
+If you already have an external URL that returns an SVG generated by R2DT, you can provide it through the 
+`search` attribute as a JSON object.
 
 ```
-<r2dt-web />
+<r2dt-web search='{"url": "https://example.com/svg"}'></r2dt-web>
 ```
 
-To show some examples, use:
+To load an RNAcentral identifier (URS), pass it in the same way:
 
 ```
-<r2dt-web 
-    examples='[
-        {"description": "RNA5S1-8", "sequence": "GUCUACGGCCAUACCACCCUGAACGCGCCCGAUCUCGUCUGAUCUCGGAAGCUAAGCAGGGUCGGGCCUGGUUAGUACUUGGAUGGGAGACCGCCUGGGAAUACCGGGUGCUGUAGGCUUU"},
-        {"description": "TRT-TGT2-1", "sequence": "GGCTCCATAGCTCAGTGGTTAGAGCACTGGTCTTGTAAACCAGGGGTCGCGAGTTCGATCCTCGCTGGGGCCT"}
-    ]'
-/>
+<r2dt-web search='{"urs": "URS0000049E57"}'></r2dt-web>
 ```
 
-You can also customise some elements of this embeddable component. See what you can change [here](#layout).
-The example below changes the color of the buttons:
-
-```
-<r2dt-web
-    customStyle='{
-      "searchButtonColor": "#007c82",
-      "clearButtonColor": "#6c757d"
-    }'
-/>
-```
-
-For a minimal example, see [index.html](./index.html).
-
-**2- Given a specific URS, show the secondary structure**
-
-To show the secondary structure for a specific sequence, you need to pass the **U**nique **R**NA **S**equence 
-identifier (URS), for example: 
-
-```
-<r2dt-web search='{"urs": "URS000044DFF6"}' />
-```
+![URS visualisation](img/urs.png)
 
 Click [here](https://rnacentral.org/help#how-to-find-rnacentral-id) to see how you can find an RNAcentral identifier 
 for an RNA sequence.
 
-Obviously, you can automate this process by passing the URS as a variable, for example:
+If neither `url` nor `urs` is provided, the component will display a search field. You can optionally display example 
+sequences using the `examples` attribute.
 
 ```
-<r2dt-web search='{"urs": "{{ variable }}"}' />
+<r2dt-web 
+    examples='[
+        {"description": "RNA5S1-8", "sequence": "GUCUACGGCCAUACCACCCUGAACGCGCCCGAUCUCGUCUGAUCUCGGAAGCUAAGCAGGGUCGGGCCUGGUUAGUACUUGGAUGGGAGACCGCCUGGGAAUACCGGGUGCUGUAGGCUUU"},
+        {"description": "TRT-TGT2-1", "sequence": "GGCTCCATAGCTCAGTGGTTAGAGCACTGGTCTTGTAAACCAGGGGTCGCGAGTTCGATCCTCGCTGGGGCCT"}
+    ]'
+/>
 ```
 
-For a minimal example, see [urs-example.html](./urs-example.html).
+![Search with examples](img/search-with-examples.png)
 
 ## Installation
 
-Download this package directly from GitHub.
+Clone this repository from GitHub.
 
 `git clone https://github.com/RNAcentral/r2dt-web.git`
 
-Now you can add the component's javascript bundle (it contains all the styles and fonts) to your web page either 
+Now you can add the component's JavaScript bundle (it contains all the styles and fonts) to your web page either 
 directly or through an import with Webpack:
 
 `<script type="text/javascript" src="/r2dt-web/dist/r2dt-web.js"></script>`
 
-You will need to run the `git pull` command whenever there are updates.
-
 ## Attributes/parameters
 
 This component accepts a number of attributes. You pass them as html attributes and their values are strings 
 (this is a requirement of Web Components):
 
-#### layout
-
-Parameters that you can use to customise some elements of this embeddable component
-
-| parameter         | description                                                                              |
-|-------------------|------------------------------------------------------------------------------------------|
-| fixCss            | fix the CSS. Use *"fixCss": "true"* if the button sizes are different                    |
-| linkColor         | change the color of the links                                                            |
-| searchButtonColor | change the color of the `Search` button                                                  |
-| clearButtonColor  | change the color of the `Clear` button                                                   |
-| titleColor        | change the color of the `Secondary structure` text                                       |
-| titleSize         | change the size of the `Secondary structure` text                                        |
-| hideTitle         | Use *"hideTitle": "true"* to hide the title                                              |
-| legendLocation    | Use *"legendLocation": "right"* to show the legend side by side with secondary structure |
-
-## Developer details
-
-When integrating the r2dt-web component into your webpage, please be aware that its styles might conflict 
-with the existing styles of your page. To prevent such CSS conflicts and ensure proper isolation of the 
-component's styles, you can add the following lines to your webpage's CSS file:
-
-```
-r2dt-web {
-    all: initial;
-}
-```
-
-This will reset all inherited styles for the r2dt-web component, minimizing the chances of unintended 
-style interference.
+| parameter | description                                                            |
+|-----------|------------------------------------------------------------------------|
+| search    | JSON object with `url` or `urs` attributes                             |
+| examples  | Array of example sequences with `description` and `sequence`           |
+| legend    | Legend position (left by default). Can be `left`, `right` and `center` |
 
 ### Local development
 
 1. `npm install`
 
-2. `npm run serve` to start a server on http://localhost:8080/
-
-3. `npm run clean` to clean the dist folder of old assets
+2. `npm run update-templates` to use the latest models from the R2DT repository
 
-4. `npm run build` to generate a new distribution.
+3. `npm start` to start a server on http://localhost:9000/
 
-### Notes
+4. `npm run build` to generate a new distribution
 
-This embed is implemented as a Web Component, wrapping a piece of code in React/Redux. 
-The CSS styles and fonts are bundled into the javascript inline via Webpack build system, see webpack.config.js file. 
-Upon load of r2dt-web.js, the component registers itself in the custom elements registry.
+5. `npm test` to run unit tests
 
-Web Components accept input parameters as strings. That means that we have to parse parameters in Web Component 
-initialization code and pass the resulting objects as props to React. Here are some examples of passing the 
-parameters to the Web Component or from Web Component to React:
+### Notes
 
-* https://hackernoon.com/how-to-turn-react-component-into-native-web-component-84834315cb24
-* https://stackoverflow.com/questions/50404970/web-components-pass-data-to-and-from/50416836
+- Implemented as a Web Component using pure JavaScript — no React or Redux dependencies.
+- If both `url` and `urs` are provided, `urs` takes precedence.

__tests__/actions.test.js

@@ -0,0 +1,91 @@
+import { onSubmit, fetchStatus, getSvg, getFasta, getTsv, fetchSvgFromUrl } from '../src/actions';
+import routes from '../src/routes';
+
+global.fetch = jest.fn();
+
+describe('actions.js', () => {
+    beforeEach(() => jest.clearAllMocks() );
+
+    test('onSubmit success', async () => {
+        fetch
+            .mockResolvedValueOnce({ ok: true, text: () => Promise.resolve('job123') }) // submitJob
+            .mockResolvedValueOnce({ ok: true, text: () => Promise.resolve('FINISHED') }) // jobStatus
+            .mockResolvedValueOnce({ ok: true, text: () => Promise.resolve('>hdr\nACGU\n(((...)))') }) // fasta
+            .mockResolvedValueOnce({ ok: true, text: () => Promise.resolve('<svg></svg>') }) // svg
+            .mockResolvedValueOnce({ ok: true, text: () => Promise.resolve('tsv\ttemplate\tsource') }); // tsv
+
+        const result = await onSubmit('body=data');
+        expect(result.jobId).toBe('job123');
+        expect(result.svg).toContain('<svg');
+        expect(result.tsv).toEqual({ template: 'template', source: 'source' });
+    });
+
+    test('fetchStatus returns NOT_FOUND', async () => {
+        fetch.mockResolvedValueOnce({ ok: true, text: () => Promise.resolve('NOT_FOUND') });
+        const result = await fetchStatus('job123');
+        expect(result).toBe('NOT_FOUND');
+    });
+
+    test('fetchStatus returns FAILURE', async () => {
+        fetch.mockResolvedValueOnce({ ok: true, text: () => Promise.resolve('FAILURE') });
+        const result = await fetchStatus('job123');
+        expect(result).toBe('FAILURE');
+    });
+
+    test('fetchStatus returns ERROR', async () => {
+        fetch.mockResolvedValueOnce({ ok: true, text: () => Promise.resolve('ERROR') });
+        const result = await fetchStatus('job123');
+        expect(result).toBe('ERROR');
+    });
+
+    test('fetchStatus returns error on bad response', async () => {
+        fetch.mockResolvedValueOnce({ ok: false, status: 500 });
+        await expect(fetchStatus('job123')).rejects.toThrow('Error 500');
+    });
+
+    test('getFasta parses correctly', async () => {
+        fetch.mockResolvedValueOnce({
+            ok: true,
+            text: () => Promise.resolve('>header\nACGU\n(((...)))')
+        });
+        const res = await getFasta('job123');
+        expect(res).toEqual({ fastaHeader: '>header', sequence: 'ACGU', dotBracketNotation: '(((...)))' });
+    });
+
+    test('getTsv parses correctly', async () => {
+        fetch.mockResolvedValueOnce({
+            ok: true,
+            text: () => Promise.resolve('col1\ttemplate\tsource')
+        });
+        const res = await getTsv('job123');
+        expect(res).toEqual({ template: 'template', source: 'source' });
+    });
+
+    test('getSvg returns NO_MATCH', async () => {
+        fetch.mockResolvedValueOnce({ ok: true, status: 400 });
+        const result = await getSvg('job123');
+        expect(result).toBe('NO_MATCH');
+    });
+
+    test('getSvg returns empty string when text is missing', async () => {
+        fetch.mockResolvedValueOnce({
+            ok: true,
+            text: () => Promise.resolve('')
+        });
+
+        const result = await getSvg('job123');
+        expect(result).toBe('');
+    });
+
+    test('fetchSvgFromUrl returns NO_SVG for invalid data', async () => {
+        fetch.mockResolvedValueOnce({ ok: true, text: () => Promise.resolve('not an svg') });
+        const res = await fetchSvgFromUrl('http://example.com');
+        expect(res).toBe('NO_SVG');
+    });
+
+    test('fetchSvgFromUrl handles network errors', async () => {
+        fetch.mockRejectedValueOnce(new Error('network failed'));
+        const result = await fetchSvgFromUrl('http://bad.url');
+        expect(result).toBe('NO_SVG');
+    });
+});