@opencloning/ui 1.0.0

package/src/components/primers/primer_design/SequenceTabComponents/PrimerDesignGibsonAssembly.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { PrimerDesignProvider } from './PrimerDesignContext';
+import PrimerDesignForm from './PrimerDesignForm';
+import usePrimerDesignSettings from './usePrimerDesignSettings';
+import { getPcrTemplateSequenceId } from '@opencloning/store/cloning_utils';
+
+export default function PrimerDesignGibsonAssembly({ pcrSources }) {
+  const templateSequencesIds = React.useMemo(() => pcrSources.map(getPcrTemplateSequenceId), [pcrSources]);
+  const steps = React.useMemo(() => [
+    ...templateSequencesIds.map((id, index) => (
+      { label: `Seq ${id}`, selectOrientation: true }
+    )),
+  ], [pcrSources]);
+
+  const primerDesignSettings = usePrimerDesignSettings({ homology_length: 35, minimal_hybridization_length: 20, target_tm: 55 });
+  return (
+    <PrimerDesignProvider
+      designType="gibson_assembly"
+      sequenceIds={templateSequencesIds}
+      primerDesignSettings={primerDesignSettings}
+      steps={steps}
+    >
+      <PrimerDesignForm />
+    </PrimerDesignProvider>
+  );
+}

package/src/components/primers/primer_design/SequenceTabComponents/PrimerDesignHomologousRecombination.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { PrimerDesignProvider } from './PrimerDesignContext';
+import PrimerDesignForm from './PrimerDesignForm';
+import usePrimerDesignSettings from './usePrimerDesignSettings';
+import { getPcrTemplateSequenceId } from '@opencloning/store/cloning_utils';
+
+export default function PrimerDesignHomologousRecombination({ homologousRecombinationTargetId, pcrSource }) {
+  const templateSequenceId = getPcrTemplateSequenceId(pcrSource);
+  const sequenceIds = React.useMemo(() => [templateSequenceId, homologousRecombinationTargetId], [templateSequenceId, homologousRecombinationTargetId]);
+  const steps = React.useMemo(() => [
+    { label: 'Amplified region',
+      description: `Select the fragment of sequence ${templateSequenceId} to be amplified in the editor and click "Choose region"`,
+      inputLabel: `Amplified region (sequence ${templateSequenceId})` },
+    { label: 'Replaced region',
+      description: 'Select the single position (insertion) or region (replacement) where recombination will introduce the amplified fragment',
+      inputLabel: `Replaced region (sequence ${homologousRecombinationTargetId})`,
+      allowSinglePosition: true,
+    },
+  ], [templateSequenceId, homologousRecombinationTargetId]);
+
+  const primerDesignSettings = usePrimerDesignSettings({ homology_length: 80, minimal_hybridization_length: 20, target_tm: 55 });
+  return (
+    <PrimerDesignProvider
+      designType="homologous_recombination"
+      sequenceIds={sequenceIds}
+      primerDesignSettings={primerDesignSettings}
+      steps={steps}
+    >
+      <PrimerDesignForm />
+    </PrimerDesignProvider>
+  );
+}

package/src/components/primers/primer_design/SequenceTabComponents/PrimerDesignRestriction.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { PrimerDesignProvider } from './PrimerDesignContext';
+import PrimerDesignForm from './PrimerDesignForm';
+import useEnzymePrimerDesignSettings from './useEnzymePrimerDesignSettings';
+import { getPcrTemplateSequenceId } from '@opencloning/store/cloning_utils';
+
+function PrimerDesignRestriction({ pcrSource }) {
+  const templateSequenceId = getPcrTemplateSequenceId(pcrSource);
+  const sequenceIds = React.useMemo(() => [templateSequenceId], [templateSequenceId]);
+
+  const steps = React.useMemo(() => [
+    { label: 'Amplified region' },
+  ], []);
+
+  const primerDesignSettings = useEnzymePrimerDesignSettings({ homology_length: null, minimal_hybridization_length: 20, target_tm: 55 });
+
+  return (
+    <PrimerDesignProvider designType="restriction_ligation" sequenceIds={sequenceIds} primerDesignSettings={primerDesignSettings} steps={steps}>
+      <PrimerDesignForm />
+    </PrimerDesignProvider>
+
+  );
+}
+
+export default PrimerDesignRestriction;

package/src/components/primers/primer_design/SequenceTabComponents/PrimerDesignSimplePair.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { PrimerDesignProvider } from './PrimerDesignContext';
+import PrimerDesignForm from './PrimerDesignForm';
+import usePrimerDesignSettings from './usePrimerDesignSettings';
+import { getPcrTemplateSequenceId } from '@opencloning/store/cloning_utils';
+
+function PrimerDesignSimplePair({ pcrSource }) {
+  const templateSequenceId = getPcrTemplateSequenceId(pcrSource);
+  const sequenceIds = React.useMemo(() => [templateSequenceId], [templateSequenceId]);
+
+  const steps = React.useMemo(() => [
+    { label: 'Amplified region' },
+  ], []);
+
+  const primerDesignSettings = usePrimerDesignSettings({ homology_length: null, minimal_hybridization_length: 20, target_tm: 55 });
+
+  return (
+    <PrimerDesignProvider designType="simple_pair" sequenceIds={sequenceIds} primerDesignSettings={primerDesignSettings} steps={steps}>
+      <PrimerDesignForm />
+    </PrimerDesignProvider>
+
+  );
+}
+
+export default PrimerDesignSimplePair;

package/src/components/primers/primer_design/SequenceTabComponents/PrimerDesignStepper.jsx

@@ -0,0 +1,53 @@
+import { Step, StepButton, Stepper } from '@mui/material';
+import React from 'react';
+import { usePrimerDesign } from './PrimerDesignContext';
+
+function PrimerDesignStepper() {
+  const { steps, selectedTab, onTabChange, rois, primers, submissionPreventedMessage } = usePrimerDesign();
+
+  const allSteps = [
+    ...steps,
+    { label: 'Other settings' },
+    { label: 'Results' },
+  ];
+  const completedSteps = [
+    ...rois.map((roi) => roi !== null),
+    // We check submissionPreventedMessage, because you could design primers and then come back
+    // and have bad settings
+    primers.length > 0 && submissionPreventedMessage === '',
+    false,
+  ];
+  const disabledSteps = [
+    ...rois.map(() => false),
+    rois.some((roi) => roi === null),
+    primers.length === 0,
+  ];
+
+  return (
+    <Stepper
+      nonLinear
+      activeStep={selectedTab}
+      sx={{
+        pt: 1,
+        pb: 1,
+        '& .Mui-active.MuiStepLabel-label': {
+          fontWeight: 'bold',
+          color: 'primary.main',
+        },
+
+      }}
+    >
+      {allSteps.map(({ label }, index) => (
+
+        <Step key={label} completed={!disabledSteps[index] && completedSteps[index]}>
+          <StepButton disabled={disabledSteps[index]} onClick={() => onTabChange(null, index)}>
+            {label}
+          </StepButton>
+        </Step>
+      ))}
+
+    </Stepper>
+  );
+}
+
+export default PrimerDesignStepper;

package/src/components/primers/primer_design/SequenceTabComponents/PrimerDesigner.jsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { isEqual } from 'lodash-es';
+import { Box, Button } from '@mui/material';
+import { getPcrTemplateSequenceId, getPrimerDesignObject } from '@opencloning/store/cloning_utils';
+import PrimerDesignHomologousRecombination from './PrimerDesignHomologousRecombination';
+import useStoreEditor from '../../../../hooks/useStoreEditor';
+import { cloningActions } from '@opencloning/store/cloning';
+import PrimerDesignGibsonAssembly from './PrimerDesignGibsonAssembly';
+import PrimerDesignSimplePair from './PrimerDesignSimplePair';
+import PrimerDesignGatewayBP from './PrimerDesignGatewayBP';
+import PrimerDesignEBIC from './PrimerDesignEBIC';
+import PrimerDesignRestriction from './PrimerDesignRestriction';
+
+function PrimerDesigner() {
+  const { updateStoreEditor } = useStoreEditor();
+  const dispatch = useDispatch();
+  const { setMainSequenceId } = cloningActions;
+
+  const { finalSource, otherInputIds, pcrSources, outputSequences } = useSelector((state) => getPrimerDesignObject(state.cloning), isEqual);
+
+  const mainSequenceId = useSelector((state) => state.cloning.mainSequenceId);
+
+  const templateSequencesIds = pcrSources.map((pcrSource) => getPcrTemplateSequenceId(pcrSource));
+  const openPrimerDesigner = () => {
+    updateStoreEditor('mainEditor', templateSequencesIds[0]);
+    dispatch(setMainSequenceId(templateSequencesIds[0]));
+  };
+
+  // Nothing to design
+  if (templateSequencesIds.length === 0) {
+    return null;
+  }
+
+  // The network supports design of primers, but the current main sequence is not part of it
+  const showPrimerDesigner = [...templateSequencesIds, ...otherInputIds].includes(mainSequenceId);
+
+  let component = null;
+  // Check conditions for different types of primer design
+  if (finalSource === null && pcrSources.length === 1 && outputSequences[0].primer_design === 'restriction_ligation') {
+    component = <PrimerDesignRestriction pcrSource={pcrSources[0]} />;
+  }
+  if (finalSource === null && pcrSources.length === 1 && outputSequences[0].primer_design === 'simple_pair') {
+    component = <PrimerDesignSimplePair pcrSource={pcrSources[0]} />;
+  }
+  if (finalSource?.type === 'GibsonAssemblySource' || finalSource?.type === 'InFusionSource' || finalSource?.type === 'InVivoAssemblySource' || finalSource?.type === 'CreLoxRecombinationSource') {
+    component = <PrimerDesignGibsonAssembly pcrSources={pcrSources} />;
+  }
+  if (finalSource?.type === 'HomologousRecombinationSource' && otherInputIds.length === 1 && pcrSources.length === 1) {
+    component = (
+      <PrimerDesignHomologousRecombination
+        homologousRecombinationTargetId={otherInputIds[0]}
+        pcrSource={pcrSources[0]}
+      />
+    );
+  }
+  if (finalSource?.type === 'GatewaySource' && otherInputIds.length === 1 && pcrSources.length === 1 && outputSequences[0].primer_design === 'gateway_bp') {
+    component = <PrimerDesignGatewayBP donorVectorId={otherInputIds[0]} pcrSource={pcrSources[0]} />;
+  }
+  if (finalSource?.type === 'RestrictionAndLigationSource' && outputSequences.every((outputSequence) => outputSequence.primer_design === 'ebic')) {
+    component = <PrimerDesignEBIC pcrSources={pcrSources} />;
+  }
+  return (
+    <>
+      {!showPrimerDesigner && (
+      <div>
+        <Button sx={{ mb: 4 }} variant="contained" color="success" onClick={openPrimerDesigner}>Open primer designer</Button>
+      </div>
+      )}
+      <Box className="primer-design" sx={{ display: showPrimerDesigner ? 'auto' : 'none', width: '60%', minWidth: '600px', margin: 'auto', border: 1, borderRadius: 2, overflow: 'hidden', borderColor: 'primary.main', marginBottom: 5 }}>
+        <Box sx={{ margin: 'auto', display: 'flex', height: 'auto', borderBottom: 2, borderColor: 'primary.main', backgroundColor: 'primary.main' }}>
+          <Box component="h2" sx={{ margin: 'auto', py: 1, color: 'white' }}>Primer designer</Box>
+        </Box>
+        {component}
+      </Box>
+    </>
+  );
+}
+
+export default React.memo(PrimerDesigner);

package/src/components/primers/primer_design/SequenceTabComponents/PrimerResultForm.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { FormControl, TextField } from '@mui/material';
+import '../../PrimerForm.css';
+import '../../PrimerList.css';
+
+function PrimerResultForm({
+  primer: { name, sequence }, updatePrimerName, existingPrimerNames,
+}) {
+  let nameError = '';
+  if (existingPrimerNames.includes(name)) {
+    nameError = 'Name exists';
+  }
+  if (name === '') {
+    nameError = 'Name is required';
+  }
+  return (
+    <div className="primer-design-form">
+      <FormControl sx={{ mx: 1, width: '30%', mb: 1 }}>
+        <TextField
+          label="Name"
+          value={name}
+          onChange={(e) => updatePrimerName(e.target.value)}
+          error={nameError !== ''}
+          FormHelperTextProps={{ component: 'div' }}
+          helperText={nameError}
+        />
+      </FormControl>
+      <FormControl sx={{ mx: 1, width: '60%' }}>
+        <TextField
+          label="Sequence"
+          value={sequence}
+          inputProps={{
+            id: 'sequence',
+            style: { fontSize: '0.8rem' }, // Reduce font size
+          }}
+          disabled
+          helperText=" " // Add an empty helper text to maintain consistent height
+          sx={{
+            '& .MuiInputBase-root': {
+              height: '56px', // Maintain the default height of TextField
+            },
+          }}
+        />
+      </FormControl>
+    </div>
+  );
+}
+
+export default PrimerResultForm;

package/src/components/primers/primer_design/SequenceTabComponents/PrimerSettingsForm.jsx

@@ -0,0 +1,68 @@
+import { Box, FormControl, FormLabel, InputAdornment, TextField } from '@mui/material';
+import React from 'react';
+
+import primerDesignMinimalValues from './primerDesignMinimalValues.json';
+
+function PrimerSettingsForm({
+  homology_length, minimal_hybridization_length, target_tm, updateSettings,
+}) {
+  return (
+    <Box sx={{ pt: 1 }}>
+      <FormLabel>Primer settings</FormLabel>
+      <Box sx={{ pt: 1.5 }}>
+        {homology_length !== null && (
+        <Box>
+          <FormControl>
+            <TextField
+              label="Homology length"
+              value={homology_length}
+              onChange={(e) => { updateSettings({ homology_length: Number(e.target.value) }); }}
+              type="number"
+              InputProps={{
+                endAdornment: <InputAdornment position="end">bp</InputAdornment>,
+                sx: { width: '10em' },
+              }}
+              error={homology_length < primerDesignMinimalValues.homology_length}
+              helperText={homology_length < primerDesignMinimalValues.homology_length ? `Min. ${primerDesignMinimalValues.homology_length} bp` : ''}
+            />
+          </FormControl>
+        </Box>
+        )}
+        <Box sx={{ pt: 2 }}>
+          <FormControl sx={{ mr: 2 }}>
+            <TextField
+              label="Target hybridization Tm"
+              value={target_tm}
+              onChange={(e) => { updateSettings({ target_tm: Number(e.target.value) }); }}
+              type="number"
+              InputProps={{
+                endAdornment: <InputAdornment position="end">°C</InputAdornment>,
+                sx: { width: '10em' },
+              }}
+              error={target_tm < primerDesignMinimalValues.target_tm}
+              helperText={target_tm < primerDesignMinimalValues.target_tm ? `Min. ${primerDesignMinimalValues.target_tm} °C` : ''}
+            />
+          </FormControl>
+
+          <FormControl>
+            <TextField
+              sx={{ minWidth: 'max-content' }}
+              label="Min. hybridization length"
+              value={minimal_hybridization_length}
+              onChange={(e) => { updateSettings({ minimal_hybridization_length: Number(e.target.value) }); }}
+              type="number"
+              InputProps={{
+                endAdornment: <InputAdornment position="end">bp</InputAdornment>,
+                sx: { width: '10em' },
+              }}
+              error={minimal_hybridization_length < primerDesignMinimalValues.hybridization_length}
+              helperText={minimal_hybridization_length < primerDesignMinimalValues.hybridization_length ? `Min. ${primerDesignMinimalValues.hybridization_length} bp` : ''}
+            />
+          </FormControl>
+        </Box>
+      </Box>
+    </Box>
+  );
+}
+
+export default PrimerSettingsForm;

package/src/components/primers/primer_design/SequenceTabComponents/PrimerSpacerForm.jsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import { FormControl, TextField, Box } from '@mui/material';
+import { stringIsNotDNA } from '@opencloning/store/cloning_utils';
+import CollapsableLabel from './CollapsableLabel';
+import { usePrimerDesign } from './PrimerDesignContext';
+
+function PrimerSpacerForm({ open = true }) {
+  const { spacers, setSpacers, circularAssembly, templateSequenceNames, templateSequenceIds } = usePrimerDesign();
+  const [localSpacers, setLocalSpacers] = React.useState(spacers);
+  const timeoutRef = React.useRef();
+
+  // Debounced upstream updates to avoid heavy re-rendering
+  const handleSpacerChange = (index, value) => {
+    setLocalSpacers((current) => current.map((spacer, i) => (i === index ? value : spacer)));
+
+    // Clear any existing timeout
+    clearTimeout(timeoutRef.current);
+
+    // Set new timeout and store its ID in the ref
+    timeoutRef.current = setTimeout(() => {
+      setSpacers((current) => current.map((spacer, i) => (i === index ? value : spacer)));
+    }, 500);
+  };
+
+  React.useEffect(() => {
+    if (!localSpacers.every((spacer, index) => spacer === spacers[index])) {
+      setLocalSpacers(spacers);
+    }
+  }, [spacers]);
+
+  const fragmentCount = templateSequenceIds.length;
+
+  const sequenceNamesWrapped = [...templateSequenceNames, templateSequenceNames[0]];
+  const templateSequenceIdsWrapped = [...templateSequenceIds, templateSequenceIds[0]];
+
+  const getSequenceName = (seqIndex) => {
+    const name = sequenceNamesWrapped[seqIndex];
+    const id = templateSequenceIdsWrapped[seqIndex];
+    return name && name !== 'name' ? `Seq. ${id} (${name})` : `Seq. ${id}`;
+  };
+
+  const getSpacerLabel = (index) => {
+    if (index === 0 && !circularAssembly) {
+      return `Before ${getSequenceName(index)}`;
+    } if (index === fragmentCount && !circularAssembly) {
+      return `After ${getSequenceName(fragmentCount - 1)}`;
+    }
+    if (circularAssembly) {
+      return `Between ${getSequenceName(index)} and ${getSequenceName(index + 1)}`;
+    }
+    return `Between ${getSequenceName(index - 1)} and ${getSequenceName(index)}`;
+  };
+
+  return (
+    <CollapsableLabel label="Spacer sequences" className="primer-spacer-form" open={open}>
+      <Box sx={{ pt: 1, width: '80%', margin: 'auto' }}>
+        <Box>
+          {localSpacers.map((spacer, index) => {
+            const error = stringIsNotDNA(spacer) ? 'Invalid DNA sequence' : '';
+            return (
+              <FormControl key={index} fullWidth sx={{ mb: 2 }}>
+                <TextField
+                  label={getSpacerLabel(index)}
+                  value={spacer}
+                  onChange={(e) => handleSpacerChange(index, e.target.value)}
+                  variant="outlined"
+                  size="small"
+                  inputProps={{
+                    id: 'sequence',
+                  }}
+                    // Error if not DNA
+                  error={error !== ''}
+                  helperText={error}
+                />
+              </FormControl>
+            );
+          })}
+        </Box>
+      </Box>
+    </CollapsableLabel>
+  );
+}
+
+export default PrimerSpacerForm;

package/src/components/primers/primer_design/SequenceTabComponents/RestrictionSpacerForm.jsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { FormLabel, Box, FormControl, TextField, Tooltip, FormControlLabel, Checkbox } from '@mui/material';
+import InfoIcon from '@mui/icons-material/Info';
+import { useStore } from 'react-redux';
+import { updateEditor } from '@teselagen/ove';
+import EnzymeMultiSelect from '../../../form/EnzymeMultiSelect';
+import { stringIsNotDNA } from '@opencloning/store/cloning_utils';
+import { usePrimerDesign } from './PrimerDesignContext';
+import { isEnzymePalyndromic } from '@opencloning/utils/enzyme_utils';
+
+function RestrictionSpacerForm() {
+  const { primerDesignSettings } = usePrimerDesign();
+  const {
+    left_enzyme: leftEnzyme,
+    right_enzyme: rightEnzyme,
+    left_enzyme_inverted: leftEnzymeInverted,
+    right_enzyme_inverted: rightEnzymeInverted,
+    filler_bases: fillerBases,
+    updateEnzymeSettings,
+  } = primerDesignSettings;
+
+  const store = useStore();
+
+  // When enzymes change, update the displayed enzymes in the editor
+  React.useEffect(() => {
+    const allEnzymes = [leftEnzyme, rightEnzyme].filter((enzyme) => enzyme !== null);
+    const filteredRestrictionEnzymes = allEnzymes.map((enzyme) => ({
+      canBeHidden: true,
+      value: enzyme,
+    }));
+    updateEditor(store, 'mainEditor', { annotationVisibility: { cutsites: leftEnzyme || rightEnzyme }, restrictionEnzymes: { filteredRestrictionEnzymes, isEnzymeFilterAnd: false } });
+  }, [leftEnzyme, rightEnzyme]);
+
+  return (
+    <>
+      <FormLabel>Restriction enzyme sites</FormLabel>
+      <Box sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'center' }}>
+        <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+          <FormControl sx={{ width: '10em', mt: 1.5, mr: 2 }}>
+            <EnzymeMultiSelect value={leftEnzyme} setEnzymes={(v) => updateEnzymeSettings({ left_enzyme: v })} label="Left enzyme" multiple={false} />
+          </FormControl>
+          {leftEnzyme && !isEnzymePalyndromic(leftEnzyme) && (
+          <FormControlLabel
+            control={<Checkbox checked={leftEnzymeInverted} onChange={(e) => updateEnzymeSettings({ left_enzyme_inverted: e.target.checked })} />}
+            label="Invert site"
+          />
+          )}
+        </Box>
+        <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+          <FormControl sx={{ width: '10em', mt: 1.5, mr: 2 }}>
+            <EnzymeMultiSelect value={rightEnzyme} setEnzymes={(v) => updateEnzymeSettings({ right_enzyme: v })} label="Right enzyme" multiple={false} />
+          </FormControl>
+          {rightEnzyme && !isEnzymePalyndromic(rightEnzyme) && (
+          <FormControlLabel
+            control={<Checkbox checked={rightEnzymeInverted} onChange={(e) => updateEnzymeSettings({ right_enzyme_inverted: e.target.checked })} />}
+            label="Invert site"
+          />
+          )}
+        </Box>
+        <FormControl sx={{ width: '10em', mt: 1.5 }}>
+          <TextField
+            label={(
+              <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                5&apos; filler bases
+                <Tooltip arrow placement="top" title="These bases are added to the 5&apos; end of the primer to ensure proper restriction enzyme digestion.">
+                  <InfoIcon sx={{ fontSize: '1.2em', ml: 0.5 }} />
+                </Tooltip>
+              </Box>
+                  )}
+            value={fillerBases}
+            onChange={(e) => updateEnzymeSettings({ filler_bases: e.target.value })}
+            variant="outlined"
+            inputProps={{
+              id: 'sequence',
+            }}
+            error={stringIsNotDNA(fillerBases)}
+            helperText={stringIsNotDNA(fillerBases) ? 'Invalid DNA sequence' : ''}
+          />
+        </FormControl>
+      </Box>
+    </>
+  );
+}
+
+export default RestrictionSpacerForm;

package/src/components/primers/primer_design/SequenceTabComponents/StepNavigation.jsx

@@ -0,0 +1,48 @@
+import { Box, Button, Tooltip } from '@mui/material';
+import React from 'react';
+import { usePrimerDesign } from './PrimerDesignContext';
+
+function ToolTipWrapper({ title, children, enabled = false }) {
+  if (enabled) {
+    return (
+      <Tooltip title={title} placement="top" arrow>
+        <span>
+          {children}
+        </span>
+      </Tooltip>
+    );
+  }
+  return children;
+}
+
+function StepNavigation({ onStepCompletion, allowStepCompletion, stepCompletionText, isFirstStep = false, nextDisabled = false, nextToolTip = '', stepCompletionToolTip = '' }) {
+  const { handleBack, handleNext } = usePrimerDesign();
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
+      <Button
+        color="inherit"
+        disabled={isFirstStep}
+        onClick={handleBack}
+        sx={{ mr: 1 }}
+      >
+        Back
+      </Button>
+      <Box sx={{ flex: '1 1 auto' }} />
+
+      <ToolTipWrapper title={stepCompletionToolTip} enabled={!allowStepCompletion}>
+        <Button onClick={onStepCompletion} disabled={!allowStepCompletion} sx={{ mr: 1 }}>
+          {stepCompletionText}
+        </Button>
+      </ToolTipWrapper>
+
+      <ToolTipWrapper title={nextToolTip} enabled={nextDisabled}>
+        <Button color="inherit" disabled={nextDisabled} onClick={handleNext} sx={{ mr: 1 }}>
+          Next
+        </Button>
+      </ToolTipWrapper>
+
+    </Box>
+  );
+}
+
+export default StepNavigation;