@opencloning/ui 1.3.3 → 1.4.1

package/src/components/form/ServerStaticFileSelect.cy.jsx

@@ -0,0 +1,466 @@
+import React from 'react';
+import { ConfigProvider } from '../../providers/ConfigProvider';
+import { localFilesHttpClient } from '../../hooks/useServerStaticFiles';
+import ServerStaticFileSelect from './ServerStaticFileSelect';
+
+// A common intercept does not work here, because we are requesting
+// static files, and cypress intercepts don't work.
+
+const config = {
+  backendUrl: 'http://localhost:8000',
+  staticContentPath: 'collection',
+  showAppBar: false,
+  noExternalRequests: false,
+  enableAssembler: true,
+  enablePlannotate: false,
+};
+
+export const dummyIndex = {
+  sequences: [
+    {
+      name: 'Example sequence 1',
+      path: 'example.fa',
+      categories: ['Test category'],
+    },
+    {
+      name: 'Example sequence 2',
+      path: 'example2.gb',
+      categories: ['Test category2'],
+    },
+    {
+      name: 'Example sequence 3',
+      path: 'example3.fa',
+      categories: ['Test category'],
+    },
+  ],
+  syntaxes: [
+    {
+      name: 'Example syntax 1',
+      path: 'example.json',
+    },
+    {
+      name: 'Example syntax 2',
+      path: 'example2.json',
+    },
+  ],
+};
+
+describe('<ServerStaticFileSelect />', () => {
+  it('loads index, fetches file and calls onFileSelected', () => {
+    const httpGet = cy.stub(localFilesHttpClient, 'get').callsFake((url) => {
+      if (url.endsWith('/index.json')) {
+        return Promise.resolve({
+          data: dummyIndex,
+        });
+      }
+      if (url.endsWith('/example.fa')) {
+        return Promise.resolve({ data: 'ATGC' });
+      }
+      throw new Error(`Unexpected URL: ${url}`);
+    });
+    cy.wrap(httpGet).as('httpGet');
+
+    const onFileSelected = cy.spy().as('onFileSelected');
+
+    cy.mount(
+      <ConfigProvider config={config}>
+        <ServerStaticFileSelect
+          onFileSelected={onFileSelected}
+        />
+      </ConfigProvider>,
+    );
+
+    cy.get('@httpGet').should('have.been.calledWithMatch', 'index.json');
+
+    // Button is disabled
+    cy.contains('button', 'Submit').should('be.disabled');
+
+    // Select sequence
+    cy.get('#option-select').click();
+    cy.contains('Example sequence 1').click();
+
+    // Submit form
+    cy.contains('button', 'Submit').click();
+
+    cy.get('@httpGet').should('have.been.calledWithMatch', 'example.fa');
+
+    cy.get('@onFileSelected').should('have.been.calledOnce');
+    cy.get('@onFileSelected').should((spy) => {
+      const [file] = spy.lastCall.args;
+      expect(file.name).to.equal('example.fa');
+      expect(file.type).to.equal('text/plain');
+      expect(file.size).to.equal(4);
+    });
+  });
+
+  it('handles index load failure and allows retry', () => {
+    let firstCall = true;
+    const httpGet = cy.stub(localFilesHttpClient, 'get').callsFake((url) => {
+      if (!url.endsWith('/index.json')) {
+        throw new Error(`Unexpected URL: ${url}`);
+      }
+      if (firstCall) {
+        firstCall = false;
+        return Promise.reject(new Error('Network error'));
+      }
+      return Promise.resolve({
+        data: dummyIndex,
+      });
+    });
+    cy.wrap(httpGet).as('httpGet');
+
+    cy.mount(
+      <ConfigProvider config={config}>
+        <ServerStaticFileSelect
+          onFileSelected={cy.spy()}
+        />
+      </ConfigProvider>,
+    );
+
+    cy.get('@httpGet').should('have.been.calledWithMatch', 'index.json');
+
+    // First request failed, should show retry alert
+    cy.get('.MuiAlert-colorError').should('exist');
+    cy.contains('Retry').click();
+
+    // Second request succeeds
+    cy.get('@httpGet').should('have.been.calledTwice');
+
+    // Error alert should disappear and form should be visible
+    cy.get('.MuiAlert-colorError').should('not.exist');
+    cy.get('#option-select').should('exist');
+  });
+
+  it('handles invalid sequence and file request failure', () => {
+    const httpGet = cy.stub(localFilesHttpClient, 'get').callsFake((url) => {
+      if (url.endsWith('/index.json')) {
+        return Promise.resolve({
+          data: {
+            sequences: [
+              {
+                name: 'No path sequence',
+                categories: ['Test category'],
+              },
+              {
+                name: 'Valid path sequence',
+                path: 'valid.fa',
+                categories: ['Test category'],
+              },
+            ],
+          },
+        });
+      }
+      if (url.endsWith('/valid.fa')) {
+        return Promise.reject(new Error('Server error'));
+      }
+      throw new Error(`Unexpected URL: ${url}`);
+    });
+    cy.wrap(httpGet).as('httpGet');
+
+    const onFileSelected = cy.spy().as('onFileSelected');
+
+    cy.mount(
+      <ConfigProvider config={config}>
+        <ServerStaticFileSelect
+          onFileSelected={onFileSelected}
+        />
+      </ConfigProvider>,
+    );
+
+    cy.get('@httpGet').should('have.been.calledWithMatch', 'index.json');
+
+    // Select category
+    cy.get('#category-select').click();
+    cy.contains('Test category').click();
+
+    // First: select malformed sequence (no path)
+    cy.get('#option-select').click();
+    cy.contains('No path sequence').click();
+    cy.contains('button', 'Submit').click();
+
+    cy.get('.MuiAlert-colorError')
+      .contains('Malformatted option, must have a path')
+      .should('exist');
+    cy.get('@onFileSelected').should('not.have.been.called');
+
+    // Then: select valid sequence but make file request fail
+    cy.get('#option-select').click();
+    cy.contains('Valid path sequence').click();
+    cy.contains('button', 'Submit').click();
+
+    cy.get('.MuiAlert-colorError')
+      .contains('Error requesting file')
+      .should('exist');
+    cy.get('@onFileSelected').should('not.have.been.called');
+  });
+  it('handles filtering by categories', () => {
+    const httpGet = cy.stub(localFilesHttpClient, 'get').callsFake((url) => {
+      if (url.endsWith('/index.json')) {
+        return Promise.resolve({
+          data: dummyIndex,
+        });
+      }
+    });
+    cy.wrap(httpGet).as('httpGet');
+
+    cy.mount(
+      <ConfigProvider config={config}>
+        <ServerStaticFileSelect
+          onFileSelected={cy.spy()}
+        />
+      </ConfigProvider>,
+    );
+
+    cy.get('@httpGet').should('have.been.calledWithMatch', 'index.json');
+
+    // Select category
+    cy.get('#category-select').click();
+    cy.contains('Test category').click();
+
+    // Only one sequence should be shown
+    cy.get('#option-select').click();
+    cy.contains('Example sequence 1').should('exist');
+    cy.contains('Example sequence 2').should('not.exist');
+    cy.contains('Example sequence 3').should('exist');
+    // Select sequence
+    cy.contains('Example sequence 1').click();
+
+    // Select All
+    cy.get('#category-select').click();
+    cy.contains('All').click();
+
+    // Nothing should be selected
+    cy.get('#option-select').should('have.value', '');
+  });
+  it('works with syntaxes', () => {
+    const httpGet = cy.stub(localFilesHttpClient, 'get').callsFake((url) => {
+      if (url.endsWith('/index.json')) {
+        return Promise.resolve({
+          data: dummyIndex,
+        });
+      }
+      if (url.endsWith('/example.json')) {
+        return Promise.resolve({ data: '{"name": "Example syntax 1"}' });
+      }
+      throw new Error(`Unexpected URL: ${url}`);
+    });
+    cy.wrap(httpGet).as('httpGet');
+
+    const onFileSelected = cy.spy().as('onFileSelected');
+    cy.mount(
+      <ConfigProvider config={config}>
+        <ServerStaticFileSelect
+          onFileSelected={onFileSelected}
+          type="syntax"
+        />
+      </ConfigProvider>,
+    );
+
+    cy.get('@httpGet').should('have.been.calledWithMatch', 'index.json');
+
+    // Select syntax
+    cy.get('#option-select').click();
+    cy.contains('Example syntax 1').click();
+
+    // Submit form
+    cy.contains('button', 'Submit').click();
+    cy.get('@httpGet').should('have.been.calledWithMatch', 'example.json');
+
+    cy.get('@onFileSelected').should('have.been.calledOnce');
+    cy.get('@onFileSelected').should((spy) => {
+      const [file] = spy.lastCall.args;
+      expect(file.name).to.equal('example.json');
+      expect(file.type).to.equal('text/plain');
+      expect(file.size).to.equal(28);
+    });
+  });
+  it('allows selecting all sequences with the Select all option when multiple', () => {
+    const httpGet = cy.stub(localFilesHttpClient, 'get').callsFake((url) => {
+      if (url.endsWith('/index.json')) {
+        return Promise.resolve({
+          data: dummyIndex,
+        });
+      }
+      if (url.endsWith('/example.fa')) {
+        return Promise.resolve({ data: 'ATGC' });
+      }
+      if (url.endsWith('/example2.gb')) {
+        return Promise.resolve({ data: 'ATGCA' });
+      }
+      if (url.endsWith('/example3.fa')) {
+        return Promise.resolve({ data: 'ATGCG' });
+      }
+      throw new Error(`Unexpected URL: ${url}`);
+    });
+    cy.wrap(httpGet).as('httpGet');
+
+    const onFileSelected = cy.spy().as('onFileSelected');
+    cy.mount(
+      <ConfigProvider config={config}>
+        <ServerStaticFileSelect
+          onFileSelected={onFileSelected}
+          multiple
+        />
+      </ConfigProvider>,
+    );
+
+    cy.get('@httpGet').should('have.been.calledWithMatch', 'index.json');
+
+    // Use the Select all option to select all sequences
+    cy.get('#option-select').click();
+    cy.contains('Select all').click();
+    cy.get('body').click(0, 0);
+
+    // Submit form
+    cy.contains('button', 'Submit').click();
+
+    cy.get('@httpGet').should('have.been.calledWithMatch', 'example.fa');
+    cy.get('@httpGet').should('have.been.calledWithMatch', 'example2.gb');
+    cy.get('@httpGet').should('have.been.calledWithMatch', 'example3.fa');
+
+    cy.get('@onFileSelected').should('have.been.calledOnce');
+    cy.get('@onFileSelected').should((spy) => {
+      const [files] = spy.lastCall.args;
+      expect(files).to.have.length(3);
+      expect(files[0].name).to.equal('example.fa');
+      expect(files[0].type).to.equal('text/plain');
+      expect(files[1].name).to.equal('example2.gb');
+      expect(files[1].type).to.equal('text/plain');
+      expect(files[2].name).to.equal('example3.fa');
+      expect(files[2].type).to.equal('text/plain');
+    });
+  });
+  it('clicking select all only selects the sequences that were filtered by category', () => {
+    const httpGet = cy.stub(localFilesHttpClient, 'get').callsFake((url) => {
+      if (url.endsWith('/index.json')) {
+        return Promise.resolve({
+          data: dummyIndex,
+        });
+      }
+      if (url.endsWith('/example.fa')) {
+        return Promise.resolve({ data: 'ATGC' });
+      }
+      if (url.endsWith('/example3.fa')) {
+        return Promise.resolve({ data: 'ATGCG' });
+      }
+    });
+    cy.wrap(httpGet).as('httpGet');
+    const onFileSelected = cy.spy().as('onFileSelected');
+    cy.mount(
+      <ConfigProvider config={config}>
+        <ServerStaticFileSelect
+          onFileSelected={onFileSelected}
+          multiple
+        />
+      </ConfigProvider>,
+    );
+    cy.get('@httpGet').should('have.been.calledWithMatch', 'index.json');
+
+    // Select category
+    cy.get('#category-select').click();
+    cy.contains('Test category').click();
+
+    // Select all
+    cy.get('#option-select').click();
+    cy.contains('Select all').click();
+
+    // Only one sequence should be shown
+    cy.get('#option-select').click();
+    cy.contains('Example sequence 1').should('exist');
+    cy.contains('Example sequence 2').should('not.exist');
+    cy.contains('Example sequence 3').should('exist');
+
+    // Click outside to close select element
+    cy.get('body').click(0, 0);
+    cy.contains('button', 'Submit').click();
+
+    cy.get('@httpGet').should('have.been.calledThrice');
+    cy.get('@onFileSelected').should('have.been.calledOnce');
+    cy.get('@onFileSelected').should((spy) => {
+      const [files] = spy.lastCall.args;
+      expect(files).to.have.length(2);
+      expect(files[0].name).to.equal('example.fa');
+      expect(files[1].name).to.equal('example3.fa');
+    });
+  })
+  it('works with multiple', () => {
+    const httpGet = cy.stub(localFilesHttpClient, 'get').callsFake((url) => {
+      if (url.endsWith('/index.json')) {
+        return Promise.resolve({
+          data: dummyIndex,
+        });
+      }
+      if (url.endsWith('/example.fa')) {
+        return Promise.resolve({ data: 'ATGC' });
+      }
+      if (url.endsWith('/example2.gb')) {
+        return Promise.resolve({ data: 'ATGCA' });
+      }
+      throw new Error(`Unexpected URL: ${url}`);
+    });
+    cy.wrap(httpGet).as('httpGet');
+    const onFileSelected = cy.spy().as('onFileSelected');
+    cy.mount(
+      <ConfigProvider config={config}>
+        <ServerStaticFileSelect
+          onFileSelected={onFileSelected}
+          multiple
+        />
+      </ConfigProvider>,
+    );
+    cy.get('@httpGet').should('have.been.calledWithMatch', 'index.json');
+
+    // Select sequence
+    cy.get('#option-select').click();
+    cy.contains('Example sequence 1').click();
+    cy.contains('Example sequence 2').click();
+    // Click outside to close select element
+    cy.get('body').click(0, 0);
+    cy.contains('button', 'Submit').click();
+
+    cy.get('@httpGet').should('have.been.calledThrice');
+    cy.get('@onFileSelected').should('have.been.calledOnce');
+    cy.get('@onFileSelected').should((spy) => {
+      const [files] = spy.lastCall.args;
+      expect(files).to.have.length(2);
+      expect(files[0].name).to.equal('example.fa');
+      expect(files[0].type).to.equal('text/plain');
+      expect(files[0].size).to.equal(4);
+      expect(files[1].name).to.equal('example2.gb');
+      expect(files[1].type).to.equal('text/plain');
+      expect(files[1].size).to.equal(5);
+    });
+  });
+
+  it('can filter with multiple', () => {
+    const httpGet = cy.stub(localFilesHttpClient, 'get').callsFake((url) => {
+      if (url.endsWith('/index.json')) {
+        return Promise.resolve({
+          data: dummyIndex,
+        });
+      }
+    });
+
+    cy.wrap(httpGet).as('httpGet');
+    cy.mount(
+      <ConfigProvider config={config}>
+        <ServerStaticFileSelect
+          onFileSelected={cy.spy()}
+          multiple
+        />
+      </ConfigProvider>,
+    );
+    cy.get('@httpGet').should('have.been.calledWithMatch', 'index.json');
+
+    // Select category
+    cy.get('#category-select').click();
+    cy.contains('Test category').click();
+
+    // Only one sequence should be shown
+    cy.get('#option-select').click();
+    cy.contains('Example sequence 1').should('exist');
+    cy.contains('Example sequence 2').should('not.exist');
+    cy.contains('Example sequence 3').should('exist');
+
+  });
+});

package/src/components/form/ServerStaticFileSelect.jsx

@@ -0,0 +1,134 @@
+import React from 'react'
+import useServerStaticFiles from '../../hooks/useServerStaticFiles';
+import RequestStatusWrapper from './RequestStatusWrapper';
+import { Alert, Autocomplete, Button, FormControl, TextField } from '@mui/material';
+
+function ServerStaticFileSelect({ onFileSelected, multiple = false, type = 'sequence' }) {
+  const [selectedCategory, setSelectedCategory] = React.useState('');
+  const [selectedOptions, setSelectedOptions] = React.useState(multiple ? [] : null);
+  const [error, setError] = React.useState(null);
+
+  const localFiles = useServerStaticFiles();
+  const{ index, indexRequestStatus, indexRetry, requestFile } = localFiles;
+
+  const options = React.useMemo(() => {
+    if (index === null) return [];
+    if (type !== 'sequence') {
+      return index.syntaxes;
+    }
+    const prePendArray = multiple ? ['__all__'] : [];
+    if (selectedCategory === '') {
+      return [...prePendArray, ...index.sequences];
+    }
+    return [...prePendArray, ...index.sequences.filter((sequence) => sequence.categories?.includes(selectedCategory))];
+  }, [type, index, selectedCategory, multiple]);
+
+  const categoryOptions = React.useMemo(() => {
+    if (!index?.categories) return [];
+    return ['All', ...index.categories];
+  }, [index]);
+
+  const optionToFile = React.useCallback(async (option) => {
+    if (!option.path) {
+      throw new Error('Malformatted option, must have a path');
+    }
+    let fileContent = null;
+    try {
+      fileContent = await requestFile(option.path);
+    } catch (error) {
+      throw new Error(`Error requesting file: ${error.message}`);
+    }
+    if (typeof fileContent !== 'string') {
+      fileContent = JSON.stringify(fileContent);
+    }
+    const file = new File([fileContent], option.path, { type: 'text/plain' });
+    return file;
+  }, [requestFile]);
+
+  const onSubmit = React.useCallback(async (e) => {
+    e.preventDefault();
+    setError(null);
+    try {
+      if (!multiple) {
+        const file = await optionToFile(selectedOptions);
+        onFileSelected(file);
+      } else {
+        const files = await Promise.all(selectedOptions.map((option) => optionToFile(option)));
+        onFileSelected(files);
+      }
+    } catch (error) {
+      setError(error.message);
+    }
+  }, [multiple, selectedOptions, onFileSelected, optionToFile]);
+
+  const onCategoryChange = React.useCallback((event, newValue) => {
+    setSelectedOptions(multiple ? [] : null);
+    if (!newValue || newValue === 'All') {
+      setSelectedCategory('');
+    } else {
+      setSelectedCategory(newValue);
+    }
+  }, [multiple]);
+
+  const buttonDisabled = multiple ? selectedOptions.length === 0 : !selectedOptions;
+
+  const label = type === 'sequence' ? 'Sequence' : 'Syntax';
+
+  const onOptionsChange = React.useCallback((event, value) => {
+    console.log('onOptionsChange', value);
+    if (multiple && type === 'sequence') {
+      if (value.includes('__all__')) {
+        const allSequences = options.filter((option) => option !== '__all__');
+        setSelectedOptions(allSequences);
+        return;
+      }
+    }
+    setSelectedOptions(value);
+  }, [multiple, type, options]);
+
+  return (
+    <RequestStatusWrapper requestStatus={indexRequestStatus} retry={indexRetry}>
+      {error && <Alert severity="error">{error}</Alert>}
+      <form onSubmit={onSubmit}>
+        {type === 'sequence' && (
+          <FormControl fullWidth sx={{ my: 1 }}>
+            <Autocomplete
+              id="category-select"
+              options={categoryOptions}
+              value={selectedCategory === '' ? 'All' : selectedCategory}
+              onChange={onCategoryChange}
+              renderInput={(params) => (
+                <TextField
+                  {...params}
+                  label="Category"
+                />
+              )}
+            />
+          </FormControl>
+        )}
+        <FormControl fullWidth sx={{ my: 1 }}>
+          <Autocomplete
+            id="option-select"
+            multiple={multiple}
+            options={options}
+            value={selectedOptions}
+            onChange={onOptionsChange}
+            getOptionLabel={(option) => (option === '__all__' ? 'Select all' : option?.name || option?.path || '')}
+            disableCloseOnSelect={multiple}
+            renderInput={(params) => (
+              <TextField
+                {...params}
+                label={label}
+              />
+            )}
+          />
+        </FormControl>
+        <FormControl fullWidth>
+          <Button disabled={buttonDisabled} type="submit" variant="contained" color="primary">Submit</Button>
+        </FormControl>
+      </form>
+    </RequestStatusWrapper>
+  );
+}
+
+export default ServerStaticFileSelect

package/src/components/sources/Source.jsx

@@ -21,6 +21,7 @@ import SourceCopySequence from './SourceCopySequence';
 import SourceReverseComplement from './SourceReverseComplement';
 import SourceKnownGenomeRegion from './SourceKnownGenomeRegion';
 import { doesSourceHaveOutput } from '@opencloning/store/cloning_utils';
+import SourceServerStaticFile from './SourceServerStaticFile';
 
 // There are several types of source, this components holds the common part,
 // which for now is a select element to pick which kind of source is created
@@ -49,6 +50,8 @@ function Source({ sourceId }) {
     /* eslint-disable */
     case 'UploadedFileSource':
       specificSource = <SourceFile {...{ source, requestStatus, sendPostRequest }} />; break;
+    case 'LocalFileSource':
+      specificSource = <SourceServerStaticFile {...{ source, requestStatus, sendPostRequest }} />; break;
     case 'RestrictionEnzymeDigestionSource':
       specificSource = <SourceRestriction {...{ source, requestStatus, sendPostRequest }} />; break;
     case 'RepositoryIdSource':

package/src/components/sources/SourceServerStaticFile.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import ServerStaticFileSelect from '../form/ServerStaticFileSelect';
+import { Alert, LinearProgress } from '@mui/material';
+
+function SourceServerStaticFile({ source, requestStatus, sendPostRequest }) {
+  const onFileSelected = React.useCallback((file) => {
+    const requestData = new FormData();
+    requestData.append('file', file);
+    const config = {
+      headers: {
+        'content-type': 'multipart/form-data',
+      },
+    };
+    sendPostRequest({ endpoint: 'read_from_file', requestData, config, source });
+  }, [sendPostRequest, source]);
+
+  return (
+    <>
+      <ServerStaticFileSelect onFileSelected={onFileSelected} />
+      { requestStatus.status === 'loading' && <LinearProgress /> }
+      { requestStatus.status === 'error' && <Alert severity="error">{requestStatus.message}</Alert> }
+    </>
+  );
+}
+
+export default SourceServerStaticFile

package/src/components/sources/SourceTypeSelector.jsx

@@ -13,7 +13,7 @@ function SourceTypeSelector({ source }) {
   const dispatch = useDispatch();
   const database = useDatabase();
   const sourceIsPrimerDesign = useSelector((state) => Boolean(state.cloning.sequences.find((e) => e.id === source.id)?.primer_design));
-  const { noExternalRequests, enablePlannotate } = useConfig();
+  const { noExternalRequests, enablePlannotate, staticContentPath } = useConfig();
 
   const onChange = (event) => {
     // Clear the source other than these fields
@@ -28,6 +28,9 @@ function SourceTypeSelector({ source }) {
   const options = [];
   if (inputSequences.length === 0) {
     options.push(<MenuItem key="UploadedFileSource" value="UploadedFileSource">Submit file</MenuItem>);
+    if (staticContentPath) {
+      options.push(<MenuItem key="LocalFileSource" value="LocalFileSource">Local server file</MenuItem>);
+    }
     if (!noExternalRequests) {
       options.push(<MenuItem key="RepositoryIdSource" value="RepositoryIdSource">Repository</MenuItem>);
       options.push(<MenuItem key="GenomeCoordinatesSource" value="GenomeCoordinatesSource">Genome region</MenuItem>);

package/src/hooks/useRequestForEffect.js

@@ -0,0 +1,28 @@
+import React from 'react'
+
+function useRequestForEffect({ requestFunction, onSuccess }) {
+  const [requestStatus, setRequestStatus] = React.useState({ status: 'loading', message: '' });
+  const [connectAttempt, setConnectAttempt] = React.useState(0);
+
+  const retry = React.useCallback(() => {
+    setConnectAttempt((prev) => prev + 1);
+  }, []);
+
+  React.useEffect(() => {
+    const fetchData = async () => {
+      setRequestStatus({ status: 'loading', message: '' });
+      try {
+        const resp = await requestFunction();
+        setRequestStatus({ status: 'success', message: '' });
+        onSuccess(resp);
+      } catch (error) {
+        setRequestStatus({ status: 'error', message: error.message });
+      }
+    };
+    fetchData();
+  }, [connectAttempt, requestFunction, onSuccess]);
+
+  return React.useMemo(() => ({ requestStatus, retry }), [requestStatus, retry]);
+}
+
+export default useRequestForEffect