@opencloning/ui 1.9.2 → 2.1.0

package/src/components/form/EnzymeMultiSelect.jsx

@@ -1,18 +1,16 @@
 import * as React from 'react';
 import GetRequestMultiSelect from './GetRequestMultiSelect';
-import useBackendRoute from '../../hooks/useBackendRoute';
-import useHttpClient from '../../hooks/useHttpClient';
+import useBackendHttpClient from '../../hooks/useBackendHttpClient';
 
 function EnzymeMultiSelect({ setEnzymes, label = 'Enzymes used', multiple = true }) {
-  const backendRoute = useBackendRoute();
-  const url = backendRoute('restriction_enzyme_list');
+  const url = 'restriction_enzyme_list';
   const getOptionsFromResponse = React.useCallback((data) => data.enzyme_names, []);
   const messages = React.useMemo(() => ({
     loadingMessage: 'retrieving enzymes...',
     errorMessage: 'Could not retrieve enzymes from server',
   }), []);
   const onChange = React.useCallback((value) => setEnzymes(value), [setEnzymes]);
-  const httpClient = useHttpClient();
+  const httpClient = useBackendHttpClient();
 
   return (
 

package/src/components/navigation/MainAppBar.jsx

@@ -15,7 +15,10 @@ import DownloadCloningStrategyDialog from '../DownloadCloningStrategyDialog';
 import LoadCloningHistoryWrapper from '../LoadCloningHistoryWrapper';
 import useCloningHistoryLoader from '../../hooks/useCloningHistoryLoader';
 import GithubCornerRight from './GithubCornerRight';
-import useHttpClient from '../../hooks/useHttpClient';
+import { getExternalHttpClient } from '@opencloning/utils/httpClients';
+
+// External urls (not the backend): no auth token, only whitelisted urls
+const httpClient = getExternalHttpClient();
 
 const { setCurrentTab } = cloningActions;
 
@@ -28,7 +31,6 @@ function MainAppBar() {
   const [openVersionDialog, setOpenVersionDialog] = React.useState(false);
   const [anchorEl, setAnchorEl] = React.useState(null);
   const openMenu = Boolean(anchorEl);
-  const httpClient = useHttpClient();
 
   const dispatch = useDispatch();
   const { addAlert } = useCloningAlerts();

package/src/components/navigation/SelectTemplateDialog.jsx

@@ -2,14 +2,16 @@ import { Accordion, AccordionDetails, AccordionSummary, Alert, Button, CircularP
 
 import React from 'react';
 import { ExpandMore as ExpandMoreIcon } from '@mui/icons-material';
-import useHttpClient from '../../hooks/useHttpClient';
+import { getExternalHttpClient } from '@opencloning/utils/httpClients';
+
+// External urls (not the backend): no auth token, only whitelisted urls
+const httpClient = getExternalHttpClient();
 
 function SelectTemplateDialog({ onClose, open }) {
   const [templates, setTemplates] = React.useState(null);
   const [connectAttempt, setConnectAttemp] = React.useState(0);
   const [error, setError] = React.useState(null);
   const baseUrl = 'https://assets.opencloning.org/OpenCloning-submission';
-  const httpClient = useHttpClient();
 
   React.useEffect(() => {
     const fetchData = async () => {

package/src/components/primers/primer_design/SequenceTabComponents/hooks/useDesignPrimers.js

@@ -1,7 +1,6 @@
 import { useState, useCallback } from 'react';
 import { batch, useDispatch, useStore } from 'react-redux';
-import useBackendRoute from '../../../../../hooks/useBackendRoute';
-import useHttpClient from '../../../../../hooks/useHttpClient';
+import useBackendHttpClient from '../../../../../hooks/useBackendHttpClient';
 import useStoreEditor from '../../../../../hooks/useStoreEditor';
 import error2String from '@opencloning/utils/error2String';
 import { cloningActions } from '@opencloning/store/cloning';
@@ -19,8 +18,7 @@ export default function useDesignPrimers({
 
   const store = useStore();
   const dispatch = useDispatch();
-  const backendRoute = useBackendRoute();
-  const httpClient = useHttpClient();
+  const httpClient = useBackendHttpClient();
   const { updateStoreEditor } = useStoreEditor();
 
   const designPrimers = useCallback(async () => {
@@ -43,7 +41,7 @@ export default function useDesignPrimers({
     });
 
     requestData.settings = globalPrimerSettings;
-    const url = backendRoute(`primer_design/${endpoint}`);
+    const url = `primer_design/${endpoint}`;
 
     try {
       const resp = await httpClient.post(url, requestData, { params });
@@ -55,7 +53,7 @@ export default function useDesignPrimers({
       setError(error2String(thrownError));
       return true;
     }
-  }, [fragmentOrientations, rois, sequenceIds, templateSequenceIds, designType, circularAssembly, primerDesignSettings, spacers, store, httpClient, backendRoute, handleNext, isAmplified]);
+  }, [fragmentOrientations, rois, sequenceIds, templateSequenceIds, designType, circularAssembly, primerDesignSettings, spacers, store, httpClient, handleNext, isAmplified]);
 
   const addPrimers = useCallback(() => {
     const pcrSources = store.getState().cloning.sources.filter((source) => source.type === 'PCRSource');

package/src/components/primers/primer_details/usePrimerDetailsEndpoints.js

@@ -1,6 +1,5 @@
 import React, { useCallback } from 'react';
-import useBackendRoute from '../../../hooks/useBackendRoute';
-import useHttpClient from '../../../hooks/useHttpClient';
+import useBackendHttpClient from '../../../hooks/useBackendHttpClient';
 import { isEqual } from 'lodash-es';
 import { useSelector } from 'react-redux';
 
@@ -16,15 +15,14 @@ export function makeHeterodimerCacheKey(sequence1, sequence2, globalPrimerSettin
   return `${pairKey}::${settingsKey}`;
 }
 export function usePrimerDetailsEndpoints() {
-  const backendRoute = useBackendRoute();
-  const httpClient = useHttpClient();
+  const httpClient = useBackendHttpClient();
   const globalPrimerSettings = useSelector((state) => state.cloning.globalPrimerSettings, isEqual);
 
   // Caches are keyed by both the input sequence(s) and the current globalPrimerSettings,
   // so we don't need to clear them on settings change.
 
-  const url = backendRoute('primer_details');
-  const heterodimerUrl = backendRoute('primer_heterodimer');
+  const url = 'primer_details';
+  const heterodimerUrl = 'primer_heterodimer';
 
   const getPrimerDetails = useCallback(async (sequence) => {
     const cacheKey = makePrimerDetailsCacheKey(sequence, globalPrimerSettings);

package/src/components/sources/CollectionSource.jsx

@@ -7,7 +7,7 @@ import { classNameToEndPointMap } from '@opencloning/utils/sourceFunctions';
 import ObjectTable from '../ObjectTable';
 import { cloningActions } from '@opencloning/store/cloning';
 
-function CollectionSource({ source, requestStatus, sendPostRequest }) {
+function CollectionSource({ source, requestStatus, sendSourceRequest }) {
   const { id: sourceId, options, image: imageInfo, title, description } = source;
   const [image, imageWidth] = imageInfo || [null, null];
   const [selectedOption, setSelectedOption] = React.useState(null);
@@ -34,7 +34,7 @@ function CollectionSource({ source, requestStatus, sendPostRequest }) {
       const reverseOligo = primers.find((primer) => primer.id === selectedSource.input[1].sequence);
       requestData = { source: { id: sourceId, ...selectedSource }, primers: [forwardOligo, reverseOligo] };
     }
-    sendPostRequest({ endpoint, requestData, source, modifySource });
+    sendSourceRequest({ endpoint, requestData, source, modifySource });
   };
 
   const onChange = (event) => {

package/src/components/sources/Source.jsx

@@ -14,7 +14,7 @@ import SourceAnnotation from './SourceAnnotation';
 import SourceDatabase from './SourceDatabase';
 import SourcePolymeraseExtension from './SourcePolymeraseExtension';
 import CollectionSource from './CollectionSource';
-import useBackendAPI from '../../hooks/useBackendAPI';
+import useSourceRequest from '../../hooks/useSourceRequest';
 import MultipleOutputsSelector from './MultipleOutputsSelector';
 import { cloningActions } from '@opencloning/store/cloning';
 import SourceCopySequence from './SourceCopySequence';
@@ -31,7 +31,7 @@ function Source({ sourceId }) {
   const { type: sourceType } = source;
   let specificSource = null;
   const templateOnlySources = ['CollectionSource', 'KnownGenomeCoordinatesSource'];
-  const { requestStatus, sendPostRequest, sources, sequences } = useBackendAPI();
+  const { requestStatus, sendSourceRequest, sources, sequences } = useSourceRequest();
   const { addSequenceAndUpdateItsSource, updateSequenceAndItsSource } = cloningActions;
   const [chosenFragment, setChosenFragment] = React.useState(null);
   const dispatch = useDispatch();
@@ -49,67 +49,67 @@ function Source({ sourceId }) {
   switch (sourceType) {
     /* eslint-disable */
     case 'UploadedFileSource':
-      specificSource = <SourceFile {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourceFile {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'LocalFileSource':
-      specificSource = <SourceServerStaticFile {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourceServerStaticFile {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'RestrictionEnzymeDigestionSource':
-      specificSource = <SourceRestriction {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourceRestriction {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'RepositoryIdSource':
-      specificSource = <SourceRepositoryId {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourceRepositoryId {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'AddgeneIdSource':
-      specificSource = <SourceRepositoryId {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourceRepositoryId {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'SnapGenePlasmidSource':
-      specificSource = <SourceRepositoryId {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourceRepositoryId {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'EuroscarfSource':
-      specificSource = <SourceRepositoryId {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourceRepositoryId {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'WekWikGeneIdSource':
-      specificSource = <SourceRepositoryId {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourceRepositoryId {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'OpenDNACollectionsSource':
-      specificSource = <SourceRepositoryId {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourceRepositoryId {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'LigationSource':
-      specificSource = <SourceAssembly {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourceAssembly {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'GibsonAssemblySource':
-      specificSource = <SourceAssembly {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourceAssembly {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'OverlapExtensionPCRLigationSource':
-      specificSource = <SourceAssembly {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourceAssembly {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'InFusionSource':
-      specificSource = <SourceAssembly {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourceAssembly {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'InVivoAssemblySource':
-      specificSource = <SourceAssembly {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourceAssembly {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'GatewaySource':
-      specificSource = <SourceAssembly {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourceAssembly {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'CreLoxRecombinationSource':
-      specificSource = <SourceAssembly {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourceAssembly {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'RecombinaseSource':
-      specificSource = <SourceAssembly {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourceAssembly {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'HomologousRecombinationSource':
-      specificSource = <SourceHomologousRecombination {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourceHomologousRecombination {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'PCRSource':
-      specificSource = <SourcePCRorHybridization {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourcePCRorHybridization {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'RestrictionAndLigationSource':
-      specificSource = <SourceAssembly {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourceAssembly {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'GenomeCoordinatesSource':
-      specificSource = <SourceGenomeRegion {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourceGenomeRegion {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'KnownGenomeCoordinatesSource':
-      specificSource = <SourceKnownGenomeRegion {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourceKnownGenomeRegion {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'ManuallyTypedSource':
-      specificSource = <SourceManuallyTyped {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourceManuallyTyped {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'CRISPRSource':
-      specificSource = <SourceHomologousRecombination {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourceHomologousRecombination {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'OligoHybridizationSource':
-      specificSource = <SourcePCRorHybridization {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourcePCRorHybridization {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'PolymeraseExtensionSource':
-      specificSource = <SourcePolymeraseExtension {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourcePolymeraseExtension {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'DatabaseSource':
-      specificSource = <SourceDatabase {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourceDatabase {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'CollectionSource':
-      specificSource = <CollectionSource {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <CollectionSource {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'CopySequence':
       specificSource = <SourceCopySequence {...{ source }} />; break;
     case 'AnnotationSource':
-      specificSource = <SourceAnnotation {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourceAnnotation {...{ source, requestStatus, sendSourceRequest }} />; break;
     case 'ReverseComplementSource':
-      specificSource = <SourceReverseComplement {...{ source, requestStatus, sendPostRequest }} />; break;
+      specificSource = <SourceReverseComplement {...{ source, requestStatus, sendSourceRequest }} />; break;
     default:
       break;
     /* eslint-enable */

package/src/components/sources/SourceAnnotation.jsx

@@ -5,7 +5,7 @@ import { isEqual } from 'lodash-es';
 import { getInputSequencesFromSourceId } from '@opencloning/store/cloning_utils';
 import SubmitButtonBackendAPI from '../form/SubmitButtonBackendAPI';
 
-function SourceAnnotation({ source, requestStatus, sendPostRequest }) {
+function SourceAnnotation({ source, requestStatus, sendSourceRequest }) {
   const [annotationTool, setAnnotationTool] = React.useState('plannotate');
 
   const inputSequences = useSelector((state) => getInputSequencesFromSourceId(state, source.id), isEqual);
@@ -16,7 +16,7 @@ function SourceAnnotation({ source, requestStatus, sendPostRequest }) {
       sequence: inputSequences[0],
       source: { id: source.id, input: inputSequences.map((e) => ({ sequence: e.id })), annotation_tool: annotationTool },
     };
-    sendPostRequest({ endpoint: 'annotate/plannotate', requestData, source });
+    sendSourceRequest({ endpoint: 'annotate/plannotate', requestData, source });
   };
 
   return (

package/src/components/sources/SourceAssembly.jsx

@@ -15,7 +15,7 @@ const helpSingleSite = 'Even if input sequences contain multiple att sites '
   + 'Select this option to get those products.';
 
 // A component representing the ligation or gibson assembly of several fragments
-function SourceAssembly({ source, requestStatus, sendPostRequest }) {
+function SourceAssembly({ source, requestStatus, sendSourceRequest }) {
   const assemblyType = source.type;
   const { id: sourceId, input: sourceInput } = source;
   const inputSequences = useSelector((state) => getInputSequencesFromSourceId(state, sourceId), shallowEqual);
@@ -91,21 +91,21 @@ function SourceAssembly({ source, requestStatus, sendPostRequest }) {
       } };
       // To instantiate the correct class on the backend
       requestData.source.type = assemblyType;
-      sendPostRequest({ endpoint: 'gibson_assembly', requestData, config, source });
+      sendSourceRequest({ endpoint: 'gibson_assembly', requestData, config, source });
     } else if (assemblyType === 'RestrictionAndLigationSource') {
       if (enzymes.length === 0) { return; }
       requestData.source.restriction_enzymes = enzymes;
       const config = { params: {
         circular_only: circularOnly,
       } };
-      sendPostRequest({ endpoint: 'restriction_and_ligation', requestData, config, source });
+      sendSourceRequest({ endpoint: 'restriction_and_ligation', requestData, config, source });
     } else if (assemblyType === 'GatewaySource') {
       requestData.source.greedy = gatewaySettings.greedy;
       requestData.source.reaction_type = gatewaySettings.reactionType;
       const config = { params: { circular_only: circularOnly, only_multi_site: gatewaySettings.onlyMultiSite } };
-      sendPostRequest({ endpoint: 'gateway', requestData, config, source });
+      sendSourceRequest({ endpoint: 'gateway', requestData, config, source });
     } else if (assemblyType === 'CreLoxRecombinationSource') {
-      sendPostRequest({ endpoint: 'cre_lox_recombination', requestData, source });
+      sendSourceRequest({ endpoint: 'cre_lox_recombination', requestData, source });
     } else if (assemblyType === 'RecombinaseSource') {
       if (recombinases.length === 0) { return; }
       requestData.source.recombinases = recombinases;
@@ -113,14 +113,14 @@ function SourceAssembly({ source, requestStatus, sendPostRequest }) {
         reverse_recombinase: reverseRecombinase,
         input_contains_genome: inputContainsGenome,
       } };
-      sendPostRequest({ endpoint: 'recombinase', requestData, config, source });
+      sendSourceRequest({ endpoint: 'recombinase', requestData, config, source });
     } else {
       const config = { params: {
         allow_partial_overlap: allowPartialOverlap,
         circular_only: circularOnly,
         blunt: bluntLigation,
       } };
-      sendPostRequest({ endpoint: classNameToEndPointMap[assemblyType], requestData, config, source });
+      sendSourceRequest({ endpoint: classNameToEndPointMap[assemblyType], requestData, config, source });
     }
   };
 

package/src/components/sources/SourceDatabase.jsx

@@ -4,12 +4,12 @@ import SubmitButtonBackendAPI from '../form/SubmitButtonBackendAPI';
 import useDatabase from '../../hooks/useDatabase';
 import useLoadDatabaseFile from '../../hooks/useLoadDatabaseFile';
 
-function SourceDatabase({ source, requestStatus, sendPostRequest }) {
+function SourceDatabase({ source, requestStatus, sendSourceRequest }) {
   const [file, setFile] = React.useState(null);
   const [databaseId, setDatabaseId] = React.useState(null);
   const database = useDatabase();
   const [historyFileError, setHistoryFileError] = React.useState(null);
-  const { loadDatabaseFile } = useLoadDatabaseFile({ source, sendPostRequest, setHistoryFileError });
+  const { loadDatabaseFile } = useLoadDatabaseFile({ source, sendSourceRequest, setHistoryFileError });
 
   const onSubmit = async (e) => {
     e.preventDefault();

package/src/components/sources/SourceFile.jsx

@@ -14,7 +14,7 @@ const fileFormatToExtension = {
 };
 
 // A component providing an interface to import a file
-function SourceFile({ source, requestStatus, sendPostRequest }) {
+function SourceFile({ source, requestStatus, sendSourceRequest }) {
   const [circularize, setCircularize] = React.useState(false);
   const [showCoordinates, setShowCoordinates] = React.useState(false);
   const [coordinates, setCoordinates] = React.useState({ start: null, end: null });
@@ -80,7 +80,7 @@ function SourceFile({ source, requestStatus, sendPostRequest }) {
       },
       params: { circularize, sequence_file_format: fileFormat || null, ...coordinates },
     };
-    sendPostRequest({ endpoint: 'read_from_file', requestData, config, source });
+    sendSourceRequest({ endpoint: 'read_from_file', requestData, config, source });
   };
 
   const updateCoordinates = (value, isStart) => {

package/src/components/sources/SourceGenomeRegion.cy.jsx

@@ -62,6 +62,52 @@ describe('<AssemblyIdSelector />', () => {
     cy.wait('@getPairedAssemblyInfo');
     cy.contains('Equivalent assembly GCF_000002945.3 has annotation').should('exist');
   });
+  it('shows a warning when the paired accession lookup fails', () => {
+    const setAssemblyId = cy.spy().as('setAssemblyId');
+    const setHasAnnotation = cy.spy().as('setHasAnnotation');
+    const onAssemblyIdChange = cy.spy().as('onAssemblyIdChange');
+
+    cy.intercept('GET', 'https://api.ncbi.nlm.nih.gov/datasets/v2alpha/genome/accession/GCA_000002945.3/dataset_report*', {
+      statusCode: 200,
+      body: {
+        reports: [{
+          accession: 'GCA_000002945.3',
+          organism: {
+            tax_id: 559292,
+            organism_name: 'Saccharomyces cerevisiae'
+          },
+          annotation_info: undefined,
+          paired_accession: 'GCF_000002945.3',
+          assembly_info: {
+            assembly_status: 'current'
+          }
+        }]
+      }
+    }).as('getAssemblyInfo');
+
+    cy.intercept('GET', 'https://api.ncbi.nlm.nih.gov/datasets/v2alpha/genome/accession/GCF_000002945.3/dataset_report*', {
+      statusCode: 500,
+      body: {}
+    }).as('getPairedAssemblyInfo');
+
+    cy.mount(
+      <ConfigProvider config={config}>
+        <AssemblyIdSelector
+          setAssemblyId={setAssemblyId}
+          setHasAnnotation={setHasAnnotation}
+          onAssemblyIdChange={onAssemblyIdChange}
+        />
+      </ConfigProvider>
+    );
+    cy.get('input').type('GCA_000002945.3');
+    cy.wait('@getAssemblyInfo');
+    cy.wait('@getPairedAssemblyInfo');
+
+    cy.contains('Could not check whether an equivalent assembly has annotation:').should('exist');
+    cy.contains('Equivalent assembly GCF_000002945.3 has annotation').should('not.exist');
+    cy.get('label').contains('Species').siblings('div').children('input')
+      .should('have.value', 'Saccharomyces cerevisiae - 559292');
+  });
   it('handles NCBI being down displaying the right error', () => {
     cy.intercept('GET', 'https://api.ncbi.nlm.nih.gov/datasets/v2alpha/genome/accession/GCA_000002945.3/dataset_report*', {
       statusCode: 500,

package/src/components/sources/SourceGenomeRegion.jsx

@@ -5,8 +5,11 @@ import { getReferenceAssemblyId, taxonSuggest, geneSuggest, getInfoFromAssemblyI
 import TextFieldValidate from '../form/TextFieldValidate';
 import SubmitButtonBackendAPI from '../form/SubmitButtonBackendAPI';
 import GetRequestMultiSelect from '../form/GetRequestMultiSelect';
-import useHttpClient from '../../hooks/useHttpClient';
 import { formatSequenceLocationString } from '@opencloning/utils/other';
+import { getExternalHttpClient } from '@opencloning/utils/httpClients';
+
+// External urls (not the backend): no auth token, only whitelisted urls
+const httpClient = getExternalHttpClient();
 
 function getGeneCoordsInfo(gene) {
   const { range: geneRange, accession_version: accessionVersion } = gene.annotation.genomic_regions[0].gene_range;
@@ -59,7 +62,6 @@ function SpeciesPicker({ setSpecies, setAssemblyId }) {
 }
 
 function SequenceAccessionPicker({ assemblyAccession, setSequenceAccession }) {
-  const httpClient = useHttpClient();
 
   const url = `https://api.ncbi.nlm.nih.gov/datasets/v2alpha/genome/accession/${assemblyAccession}/sequence_reports`
   return (
@@ -80,7 +82,7 @@ function SequenceAccessionPicker({ assemblyAccession, setSequenceAccession }) {
 }
 
 // Extra component to be used in SourceGenomeRegion
-function SourceGenomeRegionLocusOnReference({ source, requestStatus, sendPostRequest }) {
+function SourceGenomeRegionLocusOnReference({ source, requestStatus, sendSourceRequest }) {
   const { id: sourceId } = source;
   const [gene, setGene] = React.useState(null);
   const [species, setSpecies] = React.useState(null);
@@ -92,7 +94,7 @@ function SourceGenomeRegionLocusOnReference({ source, requestStatus, sendPostReq
     event.preventDefault();
     const requestData = formatBackendPayloadWithGene(assemblyId, gene, Number(upstreamBasesRef.current.value), Number(downstreamBasesRef.current.value));
     requestData.id = sourceId;
-    sendPostRequest({ endpoint: 'genome_coordinates', requestData, source });
+    sendSourceRequest({ endpoint: 'genome_coordinates', requestData, source });
   };
 
   // Reset gene when species changes
@@ -153,9 +155,11 @@ function AssemblyIdSelector({ setAssemblyId, setHasAnnotation = () => {}, onAsse
   const [newerAssembly, setNewerAssembly] = React.useState(false);
   const [species, setSpecies] = React.useState(null);
   const [pairedAccessionWithAnnotation, setPairedAccessionWithAnnotation] = React.useState('');
+  const [pairedAccessionLookupFailed, setPairedAccessionLookupFailed] = React.useState(false);
 
   const onChange = async (userInput, resp) => {
     setPairedAccessionWithAnnotation('');
+    setPairedAccessionLookupFailed(false);
     setSpecies(resp === null ? null : resp.species);
     if (resp === null) {
       setAssemblyId('');
@@ -172,9 +176,14 @@ function AssemblyIdSelector({ setAssemblyId, setHasAnnotation = () => {}, onAsse
     setNewerAssembly(resp !== null && resp.newerAssembly);
     onAssemblyIdChange();
     if (resp !== null && !resp.hasAnnotation && resp.pairedAccession) {
-      const pairedAccessionInfo = await getInfoFromAssemblyId(resp.pairedAccession);
-      if (pairedAccessionInfo !== null && pairedAccessionInfo.hasAnnotation) {
-        setPairedAccessionWithAnnotation(resp.pairedAccession);
+      try {
+        const pairedAccessionInfo = await getInfoFromAssemblyId(resp.pairedAccession);
+        if (pairedAccessionInfo !== null && pairedAccessionInfo.hasAnnotation) {
+          setPairedAccessionWithAnnotation(resp.pairedAccession);
+        }
+      } catch (e) {
+        console.error(e);
+        setPairedAccessionLookupFailed(true);
       }
     }
   };
@@ -194,13 +203,18 @@ function AssemblyIdSelector({ setAssemblyId, setHasAnnotation = () => {}, onAsse
           Equivalent assembly <a href={`https://www.ncbi.nlm.nih.gov/datasets/genome/${pairedAccessionWithAnnotation}`} target="_blank" rel="noopener noreferrer">{pairedAccessionWithAnnotation}</a> has annotation.
         </Alert>
       )}
+      {pairedAccessionLookupFailed && (
+        <Alert severity="warning">
+          Could not check whether an equivalent assembly has annotation: Try deleting and retyping the assembly ID.
+        </Alert>
+      )}
       {species && <KnownSpeciesField species={species} />}
     </>
   );
 }
 
 // Extra component to be used in SourceGenomeRegion
-function SourceGenomeRegionLocusOnOther({ source, requestStatus, sendPostRequest }) {
+function SourceGenomeRegionLocusOnOther({ source, requestStatus, sendSourceRequest }) {
   const { id: sourceId } = source;
   const [gene, setGene] = React.useState(null);
   const [assemblyId, setAssemblyId] = React.useState('');
@@ -212,7 +226,7 @@ function SourceGenomeRegionLocusOnOther({ source, requestStatus, sendPostRequest
     event.preventDefault();
     const requestData = formatBackendPayloadWithGene(assemblyId, gene, Number(upstreamBasesRef.current.value), Number(downstreamBasesRef.current.value));
     requestData.id = sourceId;
-    sendPostRequest({ endpoint: 'genome_coordinates', requestData, source });
+    sendSourceRequest({ endpoint: 'genome_coordinates', requestData, source });
   };
 
   return (
@@ -235,7 +249,7 @@ function SourceGenomeRegionLocusOnOther({ source, requestStatus, sendPostRequest
 }
 
 // Extra component to be used in SourceGenomeRegion
-function SourceGenomeRegionCustomCoordinates({ source, requestStatus, sendPostRequest, selectionMode }) {
+function SourceGenomeRegionCustomCoordinates({ source, requestStatus, sendSourceRequest, selectionMode }) {
   // https://eutils.ncbi.nlm.nih.gov/entrez/eutils/elink.fcgi?dbfrom=nuccore&db=assembly&id=CM041205.1&idtype=acc
   const { id: sourceId } = source;
   const [species, setSpecies] = React.useState(null);
@@ -285,7 +299,7 @@ function SourceGenomeRegionCustomCoordinates({ source, requestStatus, sendPostRe
       assembly_accession: assemblyId || null,
       coordinates: formatSequenceLocationString(coords.start, coords.end, coords.strand === 'plus' ? 1 : -1),
     };
-    sendPostRequest({ endpoint: 'genome_coordinates', requestData, source });
+    sendSourceRequest({ endpoint: 'genome_coordinates', requestData, source });
   };
 
   const onSequenceAccessionChange = async (userInput, resp) => {
@@ -446,7 +460,7 @@ function SourceGenomeRegionSelectGene({ gene, upstreamBasesRef, downstreamBasesR
   );
 }
 
-function SourceGenomeRegion({ source, requestStatus, sendPostRequest }) {
+function SourceGenomeRegion({ source, requestStatus, sendSourceRequest }) {
   const { id: sourceId } = source;
   const [selectionMode, setSelectionMode] = React.useState('');
   const changeSelectionMode = (event) => { setSelectionMode(event.target.value); };
@@ -470,9 +484,9 @@ function SourceGenomeRegion({ source, requestStatus, sendPostRequest }) {
           </Select>
         </FormControl>
       </form>
-      {selectionMode === 'reference_genome' && (<SourceGenomeRegionLocusOnReference {...{ source, requestStatus, sendPostRequest }} />)}
-      {selectionMode === 'other_assembly' && (<SourceGenomeRegionLocusOnOther {...{ source, requestStatus, sendPostRequest }} />)}
-      {selectionMode.startsWith('custom') && (<SourceGenomeRegionCustomCoordinates {...{ source, requestStatus, sendPostRequest, selectionMode }} />)}
+      {selectionMode === 'reference_genome' && (<SourceGenomeRegionLocusOnReference {...{ source, requestStatus, sendSourceRequest }} />)}
+      {selectionMode === 'other_assembly' && (<SourceGenomeRegionLocusOnOther {...{ source, requestStatus, sendSourceRequest }} />)}
+      {selectionMode.startsWith('custom') && (<SourceGenomeRegionCustomCoordinates {...{ source, requestStatus, sendSourceRequest, selectionMode }} />)}
 
     </>
   );

package/src/components/sources/SourceHomologousRecombination.jsx

@@ -9,7 +9,7 @@ import SubmitButtonBackendAPI from '../form/SubmitButtonBackendAPI';
 import SelectPrimerForm from '../primers/SelectPrimerForm';
 
 // A component representing the ligation of several fragments
-function SourceHomologousRecombination({ source, requestStatus, sendPostRequest }) {
+function SourceHomologousRecombination({ source, requestStatus, sendSourceRequest }) {
   const isCrispr = source.type === 'CRISPRSource';
   const { id: sourceId, input } = source;
   const inputSequences = useSelector((state) => getInputSequencesFromSourceId(state, sourceId), isEqual);
@@ -33,9 +33,9 @@ function SourceHomologousRecombination({ source, requestStatus, sendPostRequest
     const config = { params: { minimal_homology: minimalHomologyRef.current.value } };
     if (isCrispr) {
       requestData.guides = selectedPrimers.map((primerId) => primers.find((p) => p.id === primerId));
-      sendPostRequest({ endpoint: 'crispr', requestData, config, source });
+      sendSourceRequest({ endpoint: 'crispr', requestData, config, source });
     } else {
-      sendPostRequest({ endpoint: 'homologous_recombination', requestData, config, source });
+      sendSourceRequest({ endpoint: 'homologous_recombination', requestData, config, source });
     }
   };
 

package/src/components/sources/SourceKnownGenomeRegion.jsx

@@ -4,7 +4,7 @@ import { geneSuggest } from '@opencloning/utils/ncbiRequests';
 import { formatBackendPayloadWithGene } from './SourceGenomeRegion';
 import { Box, CircularProgress } from '@mui/material';
 
-function SourceKnownGenomeRegion({ source, requestStatus, sendPostRequest }) {
+function SourceKnownGenomeRegion({ source, requestStatus, sendSourceRequest }) {
   // A source where we pass a complete GenomeCoordinatesSource, so we just have to make the request
   const [error, setError] = React.useState('');
   const [connectAttempt, setConnectAttempt] = React.useState(0);
@@ -25,14 +25,14 @@ function SourceKnownGenomeRegion({ source, requestStatus, sendPostRequest }) {
         }
         const requestData = formatBackendPayloadWithGene(source.assembly_accession, resp[0], source.padding, source.padding);
         requestData.id = source.id;
-        sendPostRequest({ endpoint: 'genome_coordinates', requestData, source });
+        sendSourceRequest({ endpoint: 'genome_coordinates', requestData, source });
       }
       else {
         const requestData = {
           ...source,
           type: 'GenomeCoordinatesSource',
         };
-        sendPostRequest({ endpoint: 'genome_coordinates', requestData, source });
+        sendSourceRequest({ endpoint: 'genome_coordinates', requestData, source });
       }
     }
   makeRequest();

package/src/components/sources/SourceManuallyTyped.jsx

@@ -4,7 +4,7 @@ import SubmitButtonBackendAPI from '../form/SubmitButtonBackendAPI';
 import ValidatedTextField from '../form/ValidatedTextField';
 import { stringIsNotDNA } from '@opencloning/store/cloning_utils';
 
-function SourceManuallyTyped({ source, requestStatus, sendPostRequest }) {
+function SourceManuallyTyped({ source, requestStatus, sendSourceRequest }) {
   const { id: sourceId } = source;
 
   const [userInput, setUserInput] = React.useState('');
@@ -48,7 +48,7 @@ function SourceManuallyTyped({ source, requestStatus, sendPostRequest }) {
           overhang_watson_3prime: overhangWatson3prime,
         },
       };
-      sendPostRequest({ endpoint: 'manually_typed', requestData, source });
+      sendSourceRequest({ endpoint: 'manually_typed', requestData, source });
     }
   };