@opencloning/ui 1.7.3 → 1.8.1

package/src/components/form/QuerySelect.jsx

@@ -0,0 +1,128 @@
+import React from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { Autocomplete, TextField, FormControl, FormHelperText, InputLabel, MenuItem, Select, Button } from '@mui/material';
+import QueryStatusWrapper from './QueryStatusWrapper';
+import { AddCircle as AddCircleIcon } from '@mui/icons-material';
+
+export default function QuerySelect({
+  query,
+  label,
+  loadingMessage = 'Loading...',
+  errorMessage = 'Could not load options',
+  onChange = () => {},
+  value,
+  multiple = true,
+  autoComplete = true,
+  getOptionLabel,
+  getOptionKey = getOptionLabel,
+  autocompleteProps = {},
+  inputProps = {},
+  onClear = () => {},
+  noOptionsAction = null, // { label: string, onClick: () => void }
+  ...rest
+}) {
+  const queryResult = useQuery(query);
+  const { data: options = [] } = queryResult;
+  const [inputValue, setInputValue] = React.useState('');
+  const [internalValue, setInternalValue] = React.useState(() => (multiple ? [] : null));
+
+  const isControlled = value !== undefined;
+  const effectiveValue = isControlled ? value : internalValue;
+
+  const isOptionEqualToValue = React.useCallback((option, val) => getOptionKey(option) === getOptionKey(val), [getOptionKey]);
+
+  // Selected + query options so selected items stay visible when typing
+  const displayOptions = React.useMemo(() => {
+    const selected = multiple ? (effectiveValue || []) : effectiveValue ? [effectiveValue] : [];
+    const allOptions = [...selected, ...options];
+    return allOptions.filter((obj, index, self) =>
+      index === self.findIndex((t) => getOptionKey(t) === getOptionKey(obj))
+    );
+  }, [effectiveValue, multiple, options, getOptionKey]);
+
+  const handleAutocompleteChange = React.useCallback(
+    (event, newValue) => {
+      if (!isControlled) setInternalValue(newValue);
+      onChange(newValue);
+      setInputValue('');
+      onClear();
+    },
+    [onChange, isControlled, onClear],
+  );
+
+  const autocompleteValue = effectiveValue !== undefined ? effectiveValue : (multiple ? [] : null);
+
+  const noOptionsText = React.useMemo(() => {
+    if (noOptionsAction) {
+      return <MenuItem onClick={() => noOptionsAction.onClick(inputValue)} value="">
+        <AddCircleIcon color="success" />
+        <em style={{ marginLeft: 8 }}>{noOptionsAction.label}</em>
+      </MenuItem>
+    }
+    return undefined;
+  }, [noOptionsAction, inputValue]);
+
+  return (
+    <QueryStatusWrapper renderIfLoading={autoComplete} queryResult={queryResult} loadingMessage={loadingMessage} errorMessage={errorMessage}>
+      <FormControl {...rest}>
+        {autoComplete ? (
+          <Autocomplete
+            multiple={multiple}
+            onChange={handleAutocompleteChange}
+            options={displayOptions}
+            noOptionsText={noOptionsText}
+            getOptionLabel={getOptionLabel}
+            getOptionKey={getOptionKey}
+            value={autocompleteValue}
+            forcePopupIcon
+            isOptionEqualToValue={isOptionEqualToValue}
+            inputValue={inputValue}
+            onInputChange={(event, newInputValue, reason) => {
+              if (reason === 'reset') return;
+              setInputValue(newInputValue);
+            }}
+            {...autocompleteProps}
+            renderInput={(params) => (
+              <TextField
+                {...params}
+                label={label}
+                {...inputProps}
+              />
+            )}
+          />
+        ) : (
+          <>
+            <InputLabel id={`select-${label.replaceAll(' ', '-')}`}>{label}</InputLabel>
+            <Select
+              multiple={multiple}
+              onChange={(event) => {
+                const keys = event.target.value;
+                const keyList = multiple ? (Array.isArray(keys) ? keys : [keys]) : [keys];
+                const nextValue = multiple
+                  ? keyList.map((k) => options.find((o) => getOptionKey(o) === k)).filter(Boolean)
+                  : options.find((o) => getOptionKey(o) === keys) ?? null;
+                if (!isControlled) setInternalValue(nextValue);
+                onChange?.(nextValue);
+              }}
+              value={
+                multiple
+                  ? (effectiveValue || []).map((o) => getOptionKey(o))
+                  : effectiveValue ? getOptionKey(effectiveValue) : ''
+              }
+              label={label}
+              error={options.length === 0}
+              inputProps={inputProps}
+            >
+              {options.map((option) => (
+                <MenuItem key={getOptionKey(option)} value={getOptionKey(option)}>
+                  {getOptionLabel(option)}
+                </MenuItem>
+              ))}
+            </Select>
+            <FormHelperText>{options.length === 0 ? autocompleteProps?.noOptionsText : ''}</FormHelperText>
+          </>
+        )}
+      </FormControl>
+    </QueryStatusWrapper>
+  );
+}

package/src/components/form/QueryStatusWrapper.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Alert, CircularProgress } from '@mui/material';
+import RetryAlert from './RetryAlert';
+
+export default function QueryStatusWrapper({
+  children,
+  queryResult,
+  loadingMessage = 'Loading...',
+  errorMessage = 'Could not load options',
+  renderIfLoading = false,
+}) {
+  const { isLoading, isError, refetch } = queryResult;
+
+  if (isError) {
+    return (
+      <RetryAlert onRetry={refetch} sx={{ alignItems: 'center' }}>
+        {errorMessage}
+      </RetryAlert>
+    );
+  }
+
+  if (isLoading && !renderIfLoading) {
+    return (
+      <Alert severity="info" icon={<CircularProgress color="inherit" size="1em" />}>
+        {loadingMessage}
+      </Alert>
+    );
+  }
+
+  return children;
+}

package/src/components/form/SubmitToDatabaseDialog.jsx

@@ -1,4 +1,4 @@
-import { Alert, Button, Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/material';
+import { Alert, Button, CircularProgress, Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/material';
 import React from 'react';
 import { batch, useDispatch, useSelector, useStore } from 'react-redux';
 import useDatabase from '../../hooks/useDatabase';
@@ -32,7 +32,64 @@ function SubmitToDatabaseDialog({ id, dialogOpen, setDialogOpen, resourceType })
     setIsSubmitting(false);
   };
 
-  if (hasUnsavedIntermediates && !disclaimerAccepted) {
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    if (isSubmitting) {
+      return;
+    }
+    // This should never happen
+    if (!database.isSubmissionDataValid(submissionData)) {
+      setErrorMessage('Submission data is invalid');
+      return;
+    }
+    try {
+      setIsSubmitting(true);
+      if (resourceType === 'primer') {
+        const oldPrimer = store.getState().cloning.primers.find((p) => p.id === id);
+        const primerDatabaseId = await database.submitPrimerToDatabase({ submissionData, primer: oldPrimer });
+        const newPrimer = { ...oldPrimer, database_id: primerDatabaseId };
+        batch(() => {
+          dispatch(cloningActions.editPrimer(newPrimer));
+          dispatch(cloningActions.addAlert({
+            message: 'Primer created successfully',
+            severity: 'success',
+          }));
+        });
+      } else if (resourceType === 'sequence') {
+        const substate = getSubState(store.getState(), id, true);
+        let databaseId;
+        let primerMappings;
+        let sequenceMappings;
+        try {
+          ({ databaseId, primerMappings = [], sequenceMappings = [] } = await database.submitSequenceToDatabase({ submissionData, substate, id }));
+        } catch (error) {
+          console.error(error);
+          setErrorMessage(error.message);
+          setIsSubmitting(false);
+          return;
+        }
+        batch(() => {
+          primerMappings.forEach((mapping) => dispatch(cloningActions.addDatabaseIdToPrimer(mapping)));
+          dispatch(cloningActions.addDatabaseIdToSequence({ databaseId, id }));
+          sequenceMappings.forEach(({databaseId, localId}) => dispatch(cloningActions.addDatabaseIdToSequence({ databaseId, id: localId })));
+          dispatch(cloningActions.addAlert({
+            message: 'Sequence created successfully',
+            severity: 'success',
+          }));
+        });
+      }
+    } catch (error) {
+      console.error(error);
+      setErrorMessage(error.message);
+      setIsSubmitting(false);
+      return;
+    }
+    setDialogOpen(false);
+    setIsSubmitting(false);
+    setErrorMessage('');
+  }
+
+  if (!database.omitUnsavedIntermediatesDisclaimer && hasUnsavedIntermediates && !disclaimerAccepted) {
     return (
       <Dialog open={dialogOpen} onClose={handleClose} sx={{ textAlign: 'center' }}>
         <DialogTitle>Unsaved Intermediates</DialogTitle>
@@ -59,71 +116,19 @@ function SubmitToDatabaseDialog({ id, dialogOpen, setDialogOpen, resourceType })
       PaperProps={{
         component: 'form',
         sx: { width: '40%' },
-        onSubmit: async (event) => {
-          event.preventDefault();
-          if (isSubmitting) {
-            return;
-          }
-          // This should never happen
-          if (!database.isSubmissionDataValid(submissionData)) {
-            setErrorMessage('Submission data is invalid');
-            return;
-          }
-          try {
-            setIsSubmitting(true);
-            if (resourceType === 'primer') {
-              const oldPrimer = store.getState().cloning.primers.find((p) => p.id === id);
-              const primerDatabaseId = await database.submitPrimerToDatabase({ submissionData, primer: oldPrimer });
-              const newPrimer = { ...oldPrimer, database_id: primerDatabaseId };
-              batch(() => {
-                dispatch(cloningActions.editPrimer(newPrimer));
-                dispatch(cloningActions.addAlert({
-                  message: 'Primer created successfully',
-                  severity: 'success',
-                }));
-              });
-            } else if (resourceType === 'sequence') {
-              const substate = getSubState(store.getState(), id, true);
-              let databaseId;
-              let primerMappings;
-              try {
-                ({ databaseId, primerMappings } = await database.submitSequenceToDatabase({ submissionData, substate, id }));
-              } catch (error) {
-                console.error(error);
-                setErrorMessage(error.message);
-                setIsSubmitting(false);
-                return;
-              }
-              batch(() => {
-                primerMappings.forEach((mapping) => dispatch(cloningActions.addDatabaseIdToPrimer(mapping)));
-                dispatch(cloningActions.addDatabaseIdToSequence({ databaseId, id }));
-                dispatch(cloningActions.addAlert({
-                  message: 'Sequence created successfully',
-                  severity: 'success',
-                }));
-              });
-            }
-          } catch (error) {
-            console.error(error);
-            setErrorMessage(error.message);
-            setIsSubmitting(false);
-            return;
-          }
-          setIsSubmitting(false);
-          setDialogOpen(false);
-          setErrorMessage('');
-        },
+        onSubmit: handleSubmit,
       }}
+      data-testid="submit-to-database-component"
     >
       <DialogTitle>{`Save ${resourceType} to ${database.name}`}</DialogTitle>
       <DialogContent>
         <database.SubmitToDatabaseComponent id={id} submissionData={submissionData} setSubmissionData={setSubmissionData} resourceType={resourceType} />
-        {resourceType === 'sequence' && <database.PrimersNotInDatabaseComponent id={id} submissionData={submissionData} setSubmissionData={setSubmissionData} />}
+        {resourceType === 'sequence' && !isSubmitting && <database.PrimersNotInDatabaseComponent id={id} submissionData={submissionData} setSubmissionData={setSubmissionData} />}
         {errorMessage && <Alert sx={{ marginTop: 2 }} severity="error">{errorMessage}</Alert>}
       </DialogContent>
       <DialogActions>
         <Button onClick={handleClose}>Cancel</Button>
-        <Button type="submit" disabled={isSubmitting || submissionData === null || !database.isSubmissionDataValid(submissionData)}>Submit</Button>
+        <Button type="submit" disabled={isSubmitting || submissionData === null || !database.isSubmissionDataValid(submissionData)}>{isSubmitting ? <CircularProgress /> : 'Submit'}</Button>
       </DialogActions>
     </Dialog>
 

package/src/components/form/TextFieldQueryValidated.jsx

@@ -0,0 +1,93 @@
+import React, { useState, useEffect } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { TextField } from '@mui/material';
+
+/**
+ * Text field with validation driven by a React Query. Error/loading state come from the query.
+ * Similar to TextFieldApiValidated but takes a query (like QuerySelect vs PostRequestSelect).
+ *
+ * @param {string} label - Label for the TextField
+ * @param {string} placeholder - Placeholder text
+ * @param {Function} getQuery - (value) => ({ queryKey, queryFn, ... }) — returns a query config for the given value (use value in queryKey so each input has its own cache).
+ * @param {Function} onChange - Callback when validation succeeds; receives (queryData). Called with null when value is empty or validation fails.
+ * @param {string} value - Controlled value (optional)
+ * @param {number} debounceDelay - Delay in ms before running the query (default: 500)
+ * @param {string} successMessage - Optional message to show when validation succeeds (default: ' ')
+ * @param {string} validatingMessage - Message while the query is loading (default: 'Validating...')
+ */
+export default function TextFieldQueryValidated({
+  label,
+  placeholder,
+  getQuery,
+  onChange,
+  debounceDelay = 500,
+  successMessage = ' ',
+  validatingMessage = 'Validating...',
+  defaultValue = '',
+  ...rest
+}) {
+  const [localValue, setLocalValue] = useState(defaultValue);
+  const [debouncedValue, setDebouncedValue] = useState(defaultValue);
+
+  useEffect(() => {
+    setLocalValue(defaultValue);
+    setDebouncedValue(defaultValue);
+  }, [defaultValue]);
+
+  useEffect(() => {
+    const id = setTimeout(() => setDebouncedValue(localValue), debounceDelay);
+    return () => clearTimeout(id);
+  }, [localValue, debounceDelay]);
+
+  const queryConfig = React.useMemo(
+    () => getQuery(debouncedValue),
+    [getQuery, debouncedValue],
+  );
+
+  const { data: validationError, isLoading, error, isSuccess } = useQuery({
+    ...queryConfig,
+    enabled: debouncedValue.length > 0 && (queryConfig.enabled !== false),
+  });
+
+
+  useEffect(() => {
+    if (debouncedValue.length === 0) {
+      onChange('');
+      return;
+    }
+    if (isSuccess && !validationError) {
+      onChange(debouncedValue);
+    }
+    if (error || validationError) {
+      onChange('');
+    }
+  }, [debouncedValue, isSuccess, validationError, error, onChange]);
+
+  const handleChange = (e) => {
+    onChange('');
+    setLocalValue(e.target.value);
+  };
+
+  let helperText = ' ';
+  if (isLoading) {
+    helperText = validatingMessage;
+  } else if (validationError) {
+    helperText = validationError;
+  } else if (error) {
+    helperText = error.message;
+  } else if (isSuccess && !validationError) {
+    helperText = successMessage;
+  }
+
+  return (
+    <TextField
+      label={label}
+      placeholder={placeholder}
+      value={localValue}
+      onChange={handleChange}
+      error={!!error || !!validationError}
+      helperText={helperText}
+      {...rest}
+    />
+  );
+}

package/src/components/index.js

@@ -3,3 +3,7 @@ export { default as MainAppBar } from './navigation/MainAppBar';
 export { default as EditTextDialog } from './form/EditTextDialog';
 export { default as useUrlParamsLoader } from '../hooks/useUrlParamsLoader';
 export { default as useInitializeApp } from '../hooks/useInitializeApp';
+export { default as QuerySelect } from './form/QuerySelect';
+export { default as QueryStatusWrapper } from './form/QueryStatusWrapper';
+export { default as TextFieldQueryValidated } from './form/TextFieldQueryValidated';
+export { default as useDebouncedSearchQuery } from '../hooks/useDebouncedSearchQuery';

package/src/components/navigation/FeedbackDialog.jsx

@@ -16,7 +16,7 @@ function FeedbackDialog({ open, setOpen }) {
             <li style={{ marginBottom: 10 }}>
               If you use GitHub,
               {' '}
-              <a href="https://github.com/manulera/OpenCloning/issues/new" target="_blank" rel="noopener noreferrer">create an issue</a>
+              <a href="https://github.com/OpenCloning/OpenCloning/issues/new" target="_blank" rel="noopener noreferrer">create an issue</a>
             </li>
             <li>
               Otherwise, send an email to

package/src/components/navigation/MainAppBar.jsx

@@ -10,7 +10,7 @@ import SelectTemplateDialog from './SelectTemplateDialog';
 import FeedbackDialog from './FeedbackDialog';
 import { cloningActions } from '@opencloning/store/cloning';
 import VersionDialog from './VersionDialog';
-import useAlerts from '../../hooks/useAlerts';
+import useCloningAlerts from '../../hooks/useCloningAlerts';
 import DownloadCloningStrategyDialog from '../DownloadCloningStrategyDialog';
 import LoadCloningHistoryWrapper from '../LoadCloningHistoryWrapper';
 import useValidateState from '../../hooks/useValidateState';
@@ -31,7 +31,7 @@ function MainAppBar() {
   const httpClient = useHttpClient();
 
   const dispatch = useDispatch();
-  const { addAlert } = useAlerts();
+  const { addAlert } = useCloningAlerts();
   const validateState = useValidateState();
 
   // Hidden input field, used to load files.
@@ -78,8 +78,8 @@ function MainAppBar() {
   // TODO: turn these into <a> elements.
   const helpMenu = [
     { display: 'Newsletter', onClick: () => window.open('https://eepurl.com/h9-n71') },
-    { display: 'About the project', onClick: () => window.open('https://github.com/manulera/OpenCloning') },
-    { display: 'GitHub repository', onClick: () => window.open('https://github.com/manulera/OpenCloning_frontend') },
+    { display: 'About the project', onClick: () => window.open('https://github.com/OpenCloning/OpenCloning') },
+    { display: 'GitHub repository', onClick: () => window.open('https://github.com/OpenCloning/OpenCloning_frontend') },
     { display: 'Demo videos', onClick: () => window.open('https://www.youtube.com/watch?v=n0hedzvpW88&list=PLpv3x-ensLZkJToD2E6ejefADmHcUPYSJ&index=1') },
     { display: 'App version', onClick: () => setOpenVersionDialog(true) },
   ];
@@ -126,7 +126,7 @@ function MainAppBar() {
         <Box sx={{ display: { xs: 'none', md: 'flex' } }}>
           <Button
             className="github-corner"
-            onClick={() => window.open('https://github.com/manulera/OpenCloning')}
+            onClick={() => window.open('https://github.com/OpenCloning/OpenCloning')}
             aria-label="GitHub repository"
           >
             <GithubCornerRight />

package/src/components/primers/import_primers/ImportPrimersButton.jsx

@@ -1,14 +1,14 @@
 import React, { useState } from 'react';
 import { shallowEqual, useSelector } from 'react-redux';
 import { Button, Tooltip, Modal, Box } from '@mui/material';
-import useAlerts from '../../../hooks/useAlerts';
+import useCloningAlerts from '../../../hooks/useCloningAlerts';
 import './styles.css';
 
 import { primersFromTextFile } from '@opencloning/utils/fileParsers';
 import PrimersImportTable from './ImportPrimersTable';
 
 function ImportPrimersButton({ addPrimer }) {
-  const { addAlert } = useAlerts();
+  const { addAlert } = useCloningAlerts();
   const existingNames = useSelector((state) => state.cloning.primers.map((p) => p.name), shallowEqual);
 
   // Ref to the hidden file input element

package/src/components/primers/import_primers/PrimerDatabaseImportForm.jsx

@@ -1,12 +1,14 @@
 import React, { useState } from 'react';
-import { shallowEqual, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 import { Alert, Button, TextField } from '@mui/material';
 
 import useDatabase from '../../../hooks/useDatabase';
 import { stringIsNotDNA } from '@opencloning/store/cloning_utils';
+import { isEqual } from 'lodash-es';
 
 function PrimerDatabaseImportForm({ submitPrimer, cancelForm }) {
-  const existingNames = useSelector((state) => state.cloning.primers.map((p) => p.name), shallowEqual);
+  const existingNames = useSelector((state) => state.cloning.primers.map((p) => p.name), isEqual);
+  const existingDatabaseIds = useSelector((state) => state.cloning.primers.map((p) => p.database_id).filter(Boolean), isEqual);
   const [primer, setPrimer] = useState(null);
   const [error, setError] = useState('');
   const database = useDatabase();
@@ -44,6 +46,7 @@ function PrimerDatabaseImportForm({ submitPrimer, cancelForm }) {
             primer={primer}
             setPrimer={setPrimer}
             setError={setError}
+            existingDatabaseIds={existingDatabaseIds}
           />
         </div>
         {primer && (
@@ -87,7 +90,7 @@ function PrimerDatabaseImportForm({ submitPrimer, cancelForm }) {
             variant="contained"
             color="primary"
             type="submit"
-            disabled={!primer || error}
+            disabled={!primer || Boolean(error)}
           >
             Import Primer
           </Button>

package/src/components/sources/FinishedSource.jsx

@@ -17,6 +17,9 @@ function DatabaseMessage({ source }) {
   const handleClose = React.useCallback(() => setLoadingHistory(false), [setLoadingHistory]);
   const [historyFileError, setHistoryFileError] = React.useState(null);
   const { loadDatabaseFile } = useLoadDatabaseFile({ source, setHistoryFileError });
+  if (!database) {
+    return <div>Imported from unknown database</div>;
+  }
   const { LoadHistoryComponent } = database;
   return (
     <>

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

@@ -0,0 +1,95 @@
+import React from 'react';
+import MultipleOutputsSelector from './MultipleOutputsSelector';
+
+const mockSources = [
+  { id: 1, label: 'source-1' },
+  { id: 2, label: 'source-2' },
+  { id: 3, label: 'source-3' },
+];
+
+const mockSequences = [
+  { id: 'seq-1' },
+  { id: 'seq-2' },
+  { id: 'seq-3' },
+];
+
+const mockable = {
+  SubSequenceDisplayerComponent: ({ source, sourceId }) => <div>{`subsequence:${source.id}:${sourceId}`}</div>,
+  AssemblyPlanDisplayerComponent: ({ source }) => <div>{`assembly:${source.id}`}</div>,
+  CircularOrLinearViewComponent: ({ sequenceData }) => <div>{`view:${sequenceData.id}`}</div>,
+  OverhangsDisplayComponent: ({ sequence }) => <div>{`overhangs:${sequence.id}`}</div>,
+  convertSequence: (sequence) => sequence,
+};
+
+function TestHarness({ onFragmentChosen }) {
+  const [outputs, setOutputs] = React.useState({
+    sources: mockSources,
+    sequences: mockSequences,
+  });
+
+  return (
+    <>
+      <button type="button" onClick={() => setOutputs({
+        sources: mockSources.slice(0, 2),
+        sequences: mockSequences.slice(0, 2),
+      })}
+      >
+        Shrink outputs
+      </button>
+      <MultipleOutputsSelector
+        sources={outputs.sources}
+        sequences={outputs.sequences}
+        sourceId={9}
+        onFragmentChosen={onFragmentChosen}
+        mockable={mockable}
+        convertSequence={(sequence) => sequence}
+      />
+    </>
+  );
+}
+
+describe('<MultipleOutputsSelector />', () => {
+  it('renders nothing when there are no outputs', () => {
+    cy.mount(
+      <MultipleOutputsSelector
+        sources={[]}
+        sequences={[]}
+        sourceId={9}
+        onFragmentChosen={cy.spy()}
+        mockable={mockable}
+        convertSequence={(sequence) => sequence}
+      />
+    );
+
+    cy.get('.multiple-output-selector').should('not.exist');
+  });
+
+  it('clamps the selected output when the outputs shrink', () => {
+    const onFragmentChosen = cy.spy().as('onFragmentChosen');
+    cy.mount(<TestHarness onFragmentChosen={onFragmentChosen} />);
+
+    cy.contains('1 / 3').should('exist');
+    cy.contains('subsequence:1:9').should('exist');
+    cy.contains('view:seq-1').should('exist');
+
+    cy.get('[data-testid="ArrowForwardIcon"]').closest('button').click();
+    cy.contains('2 / 3').should('exist');
+    cy.get('[data-testid="ArrowForwardIcon"]').closest('button').click();
+    cy.contains('3 / 3').should('exist');
+    cy.contains('subsequence:3:9').should('exist');
+    cy.contains('assembly:3').should('exist');
+    cy.contains('view:seq-3').should('exist');
+    cy.contains('overhangs:seq-3').should('exist');
+
+    cy.contains('Shrink outputs').click();
+
+    cy.contains('1 / 2').should('exist');
+    cy.contains('subsequence:1:9').should('exist');
+    cy.contains('assembly:1').should('exist');
+    cy.contains('view:seq-1').should('exist');
+    cy.contains('overhangs:seq-1').should('exist');
+
+    cy.get('button').contains('Choose product').click();
+    cy.get('@onFragmentChosen').should('have.been.calledOnceWith', 0);
+  });
+});