@teselagen/ove 0.3.11 → 0.3.12

package/src/CutsiteFilter/AdditionalCutsiteInfoDialog.js

@@ -41,7 +41,7 @@ export const AdditionalCutsiteInfoDialog = compose(
   withRestrictionEnzymes,
   wrapDialog({
     isDraggable: true,
-    getDialogProps: (props) => {
+    getDialogProps: props => {
       if (isGroup(props)) {
         return {
           title: (
@@ -224,7 +224,7 @@ export const AdditionalCutsiteInfoDialog = compose(
 
     forEach(userEnzymeGroups, (nameArray, name) => {
       let isInGroup;
-      forEach(nameArray, (n) => {
+      forEach(nameArray, n => {
         if (n.toLowerCase() === enzymeName.toLowerCase()) {
           isInGroup = true;
         }
@@ -289,7 +289,7 @@ export const CompareEnzymeGroupsDialog = compose(
     ...props,
     cutsiteOrGroupKey: group2
   });
-  const byNameLower = (n) => n.name.toLowerCase();
+  const byNameLower = n => n.name.toLowerCase();
   const shared = intersectionBy(
     g1.allEnzymesInGroup,
     g2.allEnzymesInGroup,
@@ -380,19 +380,19 @@ const getGroupElAndCutsites = ({
 
   const enzymesThatDontCutInSeq = [];
   let enzymesThatCutInSeq = [];
-  forEach(filteredRestrictionEnzymes, (g) => {
+  forEach(filteredRestrictionEnzymes, g => {
     if (g.value === cutsiteOrGroupKey) {
       isGroupActive = true;
     }
   });
 
   if (cutsiteOrGroupKey === "type2s") {
-    const nameArray = flatMap(defaultEnzymesByName, (e) =>
+    const nameArray = flatMap(defaultEnzymesByName, e =>
       e.isType2S ? e.name : []
     );
     label = "Type IIS Enzymes";
 
-    sortBy(nameArray).forEach((name) => {
+    sortBy(nameArray).forEach(name => {
       const cutsites = allCutsites.cutsitesByName[name.toLowerCase()];
       if (!cutsites) {
         enzymesThatDontCutInSeq.push({ name, sites: [] });
@@ -405,7 +405,7 @@ const getGroupElAndCutsites = ({
     const nameArray = userEnzymeGroups[name];
     label = getUserGroupLabel({ name, nameArray });
 
-    sortBy(nameArray).forEach((name) => {
+    sortBy(nameArray).forEach(name => {
       const cutsites = allCutsites.cutsitesByName[name.toLowerCase()];
       if (!cutsites) {
         enzymesThatDontCutInSeq.push({ name, sites: [] });
@@ -418,11 +418,11 @@ const getGroupElAndCutsites = ({
     const specialCutsiteFilterOption =
       specialCutsiteFilterOptions[cutsiteOrGroupKey];
     label = specialCutsiteFilterOption.label;
-    enzymesThatCutInSeq = map(allCutsites.cutsitesByName, (cutsites) =>
+    enzymesThatCutInSeq = map(allCutsites.cutsitesByName, cutsites =>
       cutsites.length === specialCutsiteFilterOption.cutsThisManyTimes
         ? { name: cutsites[0].name, sites: cutsites }
         : null
-    ).filter((n) => n !== null);
+    ).filter(n => n !== null);
   }
   const title = (
     <div style={{ display: "flex" }}>
@@ -466,7 +466,7 @@ export const CutsiteTag = ({
   let numCuts = (cutsitesByName[name.toLowerCase()] || []).length;
 
   const aliases = getEnzymeAliases(name);
-  aliases.forEach((alias) => {
+  aliases.forEach(alias => {
     if (numCuts === 0) {
       numCuts = (cutsitesByName[alias.toLowerCase()] || []).length;
     }
@@ -552,7 +552,7 @@ export const addCutsiteGroupClickHandler = ({
     onClick={
       noClick
         ? undefined
-        : (e) => {
+        : e => {
             const isInMultiSelect = e.target.closest(
               ".bp3-multi-select-popover"
             );

package/src/CutsiteFilter/index.js

@@ -24,7 +24,7 @@ import {
   defaultEnzymesByName
 } from "@teselagen/sequence-utils";
 
-const NoResults = withRestrictionEnzymes((props) => {
+const NoResults = withRestrictionEnzymes(props => {
   const {
     inputSequenceToTestAgainst,
     cutsitesByName,
@@ -167,11 +167,11 @@ export function CutsiteFilter(props) {
         {label}{" "}
         {canBeHidden && (
           <Icon
-            onClick={(e) => {
+            onClick={e => {
               e.stopPropagation();
 
               filteredRestrictionEnzymesUpdate(
-                flatMap(filteredRestrictionEnzymes, (e) => {
+                flatMap(filteredRestrictionEnzymes, e => {
                   if (e.value === value) return [];
                   return e;
                 }).concat({
@@ -194,14 +194,14 @@ export function CutsiteFilter(props) {
       </div>
     );
   };
-  const filteredRestrictionEnzymesUpdate = (enzymes) => {
+  const filteredRestrictionEnzymesUpdate = enzymes => {
     _filteredRestrictionEnzymesUpdate(enzymes);
     if (sequenceData?.id) {
       try {
         window.localStorage.setItem(
           `tgInitialCutsiteFilter-${sequenceData.id}`,
           JSON.stringify(
-            enzymes.map((e) => omit(e, "canBeHidden", "nameArray", "label"))
+            enzymes.map(e => omit(e, "canBeHidden", "nameArray", "label"))
           )
         );
       } catch (err) {
@@ -213,7 +213,7 @@ export function CutsiteFilter(props) {
   const userEnzymeGroups =
     enzymeGroupsOverride || window.getExistingEnzymeGroups();
   const options = [
-    ...map(specialCutsiteFilterOptions, (opt) => opt),
+    ...map(specialCutsiteFilterOptions, opt => opt),
     ...map(userEnzymeGroups, (nameArray, name) => {
       return {
         label: getUserGroupLabel({ nameArray, name }),
@@ -236,9 +236,9 @@ export function CutsiteFilter(props) {
           value: key
         };
       })
-  ].map((n) => addClickableLabel(n, { closeDropDown }));
+  ].map(n => addClickableLabel(n, { closeDropDown }));
 
-  const value = filteredRestrictionEnzymes.map((filteredOpt) => {
+  const value = filteredRestrictionEnzymes.map(filteredOpt => {
     let toRet;
     if (filteredOpt.cutsThisManyTimes || filteredOpt.isSpecialGroup) {
       toRet = filteredOpt;
@@ -314,7 +314,7 @@ export function CutsiteFilter(props) {
                   minimal
                   interactive
                   style={{ display: "flex", marginTop: 5 }}
-                  onClick={(e) => {
+                  onClick={e => {
                     e.stopPropagation();
                     isEnzymeFilterAndUpdate(!isEnzymeFilterAnd);
                   }}
@@ -359,7 +359,7 @@ export function CutsiteFilter(props) {
               }}
             ></NoResults>
           }
-          onInputChange={(queryTracker) => {
+          onInputChange={queryTracker => {
             setQueryTracker(queryTracker);
           }}
           placeholder="Filter cut sites..."
@@ -368,10 +368,10 @@ export function CutsiteFilter(props) {
           filteredRestrictionEnzymesUpdate={filteredRestrictionEnzymesUpdate}
           optionRenderer={renderOptions}
           isSimpleSearch
-          onChange={(filteredRestrictionEnzymes) => {
+          onChange={filteredRestrictionEnzymes => {
             onChangeHook && onChangeHook(filteredRestrictionEnzymes);
             filteredRestrictionEnzymesUpdate(
-              map(filteredRestrictionEnzymes, (r) => {
+              map(filteredRestrictionEnzymes, r => {
                 return omit(r, ["label"]);
               })
             );

package/src/DigestTool/AddLaddersDialog.js

@@ -42,7 +42,7 @@ export const AddLaddersDialog = compose(
         accept={[".json"]}
         readBeforeUpload
         style={{ maxWidth: 400 }}
-        beforeUpload={async (files) => {
+        beforeUpload={async files => {
           try {
             const newLadder = JSON.parse(files[0].parsedString);
             if (!newLadder) {

package/src/DigestTool/DigestTool.js

@@ -109,7 +109,7 @@ export class DigestTool extends React.Component {
         )}
         <Tabs
           selectedTabId={selectedTab}
-          onChange={(id) => {
+          onChange={id => {
             this.setState({ selectedTab: id });
           }}
         >
@@ -179,7 +179,7 @@ const schema = {
 
 export default compose(
   withEditorInteractions,
-  withProps((props) => {
+  withProps(props => {
     const {
       sequenceData,
       sequenceLength,
@@ -205,7 +205,7 @@ export default compose(
       computePartialDigestDisabled,
       computeDigestDisabled,
       lanes: [
-        fragments.map((f) => ({
+        fragments.map(f => ({
           ...f,
           onFragmentSelect: () => {
             selectionLayerUpdate({

package/src/DigestTool/Ladder.js

@@ -37,7 +37,7 @@ export default function Ladder({
         >
           {l.label}{" "}
           <Button
-            onClick={async (e) => {
+            onClick={async e => {
               e.preventDefault();
               e.stopPropagation();
               const confirm = await showConfirmationDialog({
@@ -52,7 +52,7 @@ export default function Ladder({
               }
               setSelectedLadder(ladders[0].value);
               setLadders(
-                filter(additionalLadders, (lad) => lad.value !== l.value)
+                filter(additionalLadders, lad => lad.value !== l.value)
               );
             }}
             intent="danger"
@@ -67,7 +67,7 @@ export default function Ladder({
   const [highlightedFragment, setHighlightedFragment] = useState();
   const [selectedLadder, setSelectedLadder] = useState(ladders[0].value);
   let ladderInfo;
-  laddersToUse.forEach((ladder) => {
+  laddersToUse.forEach(ladder => {
     if (ladder.value === selectedLadder)
       ladderInfo = {
         ...ladder,
@@ -88,7 +88,7 @@ export default function Ladder({
         <TgSelect
           className="tg-ladder-selector"
           value={selectedLadder}
-          onChange={(val) => setSelectedLadder(val.value)}
+          onChange={val => setSelectedLadder(val.value)}
           options={laddersToUse}
         />
         <Button
@@ -127,8 +127,8 @@ export default function Ladder({
               try {
                 html2canvas(
                   document.querySelector(".ve-digest-container")
-                ).then((canvas) => {
-                  canvas.toBlob((blob) =>
+                ).then(canvas => {
+                  canvas.toBlob(blob =>
                     navigator.clipboard.write([
                       new window.ClipboardItem({ "image/png": blob })
                     ])
@@ -210,7 +210,7 @@ export default function Ladder({
               <Lane
                 key={index}
                 {...{
-                  onMouseOver: (fragment) => setHighlightedFragment(fragment),
+                  onMouseOver: fragment => setHighlightedFragment(fragment),
                   onMouseOut: () => setHighlightedFragment(undefined),
                   digestLaneRightClicked,
                   laneNumber: index + 1,
@@ -263,7 +263,7 @@ function Lane({
             onClick={() => {
               fragment.onFragmentSelect();
             }}
-            onContextMenu={(e) => {
+            onContextMenu={e => {
               fragment.onFragmentSelect();
               digestLaneRightClicked(e);
             }}

package/src/DigestTool/ladderDefaults.js

@@ -11,8 +11,7 @@ export const ladderDefaults = [
     value: "geneRuler100BP",
     label: "GeneRuler 100bp + DNA 100-3000 bp",
     markings: [
-      3000, 2000, 1500, 1200, 1000, 900, 800, 700, 600, 500, 400, 300, 200,
-      100
+      3000, 2000, 1500, 1200, 1000, 900, 800, 700, 600, 500, 400, 300, 200, 100
     ]
   },
   {

package/src/Editor/CommandHotkeyHandler.js

@@ -14,7 +14,7 @@ class CommandHotkeyHandler extends React.Component {
     super(props);
     const commands = getCommands(this);
     // Don't bind clipboard shortcuts (use native ones directly)
-    ["cut", "copy", "paste"].forEach((cmdId) => delete commands[cmdId]);
+    ["cut", "copy", "paste"].forEach(cmdId => delete commands[cmdId]);
     this.hotkeyDefs = getCommandHotkeys(commands);
     this.handlers = getCommandHotkeyHandlers(commands);
 

package/src/Editor/DropHandler.js

@@ -4,7 +4,7 @@ import classNames from "classnames";
 import "./DropHandler.css";
 
 export default class DropHandler extends React.Component {
-  handleDrop = (files) => {
+  handleDrop = files => {
     if (!files || !files.length) {
       return window.toastr.warning("Unrecognized File Type");
     }
@@ -15,7 +15,7 @@ export default class DropHandler extends React.Component {
     return (
       <Dropzone
         disabled={disabled}
-        onClick={(evt) => evt.preventDefault()}
+        onClick={evt => evt.preventDefault()}
         multiple={false}
         accept={[
           ".gb",

package/src/Editor/index.js

@@ -132,14 +132,14 @@ export class Editor extends React.Component {
       !this.hasShownInitialAnnotationToEditDialog &&
       !this.inPreviewMode
     ) {
-      ["part", "feature", "primer"].forEach((type) => {
+      ["part", "feature", "primer"].forEach(type => {
         if (this.props.initialAnnotationToEdit.startsWith(type)) {
           const annid = this.props.initialAnnotationToEdit.replace(
             type + "-",
             ""
           );
           const anns = this.props.sequenceData[type + "s"];
-          const annotation = find(anns, (a) => a.id === annid);
+          const annotation = find(anns, a => a.id === annid);
           if (annotation) {
             showAddOrEditAnnotationDialog({ type, annotation });
             this.hasShownInitialAnnotationToEditDialog = true;
@@ -166,7 +166,7 @@ export class Editor extends React.Component {
   componentDidMount() {
     if (isMobile()) {
       let firstActivePanelId;
-      some(this.getPanelsToShow()[0], (panel) => {
+      some(this.getPanelsToShow()[0], panel => {
         if (panel.active) {
           firstActivePanelId = panel.id;
           return true;
@@ -221,7 +221,7 @@ export class Editor extends React.Component {
     this.setState({ tabDragging: true });
   };
 
-  onTabDragEnd = (result) => {
+  onTabDragEnd = result => {
     this.setState({ tabDragging: false });
     const { panelsShownUpdate, panelsShown } = this.props;
     // dropped outside the list
@@ -245,7 +245,7 @@ export class Editor extends React.Component {
         ) {
           //we're adding to this group
           return insertItem(
-            panelGroup.map((tabPanel) => ({ ...tabPanel, active: false })),
+            panelGroup.map(tabPanel => ({ ...tabPanel, active: false })),
             { ...panelToMove, active: true },
             result.destination.index
           );
@@ -288,7 +288,7 @@ export class Editor extends React.Component {
         return panelGroup;
       });
     }
-    filter(newPanelsShown, (panelGroup) => {
+    filter(newPanelsShown, panelGroup => {
       return panelGroup.length;
     });
     panelsShownUpdate(newPanelsShown);
@@ -300,7 +300,7 @@ export class Editor extends React.Component {
     return map(panelsShown);
   };
 
-  onPreviewModeButtonContextMenu = (event) => {
+  onPreviewModeButtonContextMenu = event => {
     const { previewModeButtonMenu } = this.props;
     event.preventDefault();
     if (previewModeButtonMenu) {
@@ -515,7 +515,7 @@ export class Editor extends React.Component {
 
     const panelsToShow = this.getPanelsToShow();
     this.hasFullscreenPanel = false;
-    map(panelsToShow, (panelGroup) => {
+    map(panelsToShow, panelGroup => {
       panelGroup.forEach(({ fullScreen }) => {
         if (fullScreen) this.hasFullscreenPanel = true;
       });
@@ -530,7 +530,7 @@ export class Editor extends React.Component {
       let activePanelType;
       let isFullScreen;
       let panelPropsToSpread = {};
-      panelGroup.forEach((panelProps) => {
+      panelGroup.forEach(panelProps => {
         const { type, id, active, fullScreen } = panelProps;
         if (fullScreen) isFullScreen = true;
         if (active) {
@@ -577,11 +577,11 @@ export class Editor extends React.Component {
               return acc;
             }, {}))}
           circ_rotationRadians={this.state.rotationRadians}
-          circ_setRotationRadians={(val) => {
+          circ_setRotationRadians={val => {
             this.setState({ rotationRadians: val });
           }}
           circ_zoomLevel={this.state.zoomLevel}
-          circ_setZoomLevel={(val) => {
+          circ_setZoomLevel={val => {
             this.setState({ zoomLevel: val });
           }}
           maxAnnotationsToDisplay={maxAnnotationsToDisplay}
@@ -681,7 +681,7 @@ export class Editor extends React.Component {
                         index={index}
                         draggableId={id}
                       >
-                        {(provided) => (
+                        {provided => (
                           <div
                             style={{
                               wordWrap: "normal",
@@ -694,7 +694,7 @@ export class Editor extends React.Component {
                             }}
                           >
                             <div
-                              onContextMenu={(e) => {
+                              onContextMenu={e => {
                                 showTabRightClickContextMenu(e, id);
                               }}
                               ref={provided.innerRef}
@@ -743,7 +743,7 @@ export class Editor extends React.Component {
                                       <Button
                                         minimal
                                         icon="minimize"
-                                        onClick={(e) => {
+                                        onClick={e => {
                                           e.stopPropagation();
                                           togglePanelFullScreen(activePanelId);
                                         }}

package/src/Editor/userDefinedHandlersAndOpts.js

@@ -20,6 +20,8 @@ export const userDefinedHandlersAndOpts = [
   "hideSingleImport",
   "beforeAnnotationCreate",
   "disableSetReadOnly",
+  "allowAnnotationEditLocking",
+  "disableBpEditing",
   "showReadOnly",
   "showCircularity",
   "onHiddenEnzymeAdd",

package/src/FindBar/index.js

@@ -88,7 +88,7 @@ export class FindBar extends React.Component {
         options={opts}
         name="dnaOrAA"
         value={dnaOrAA}
-        onChange={(e) => {
+        onChange={e => {
           updateDnaOrAA(e.target.value);
         }}
       />,
@@ -100,7 +100,7 @@ export class FindBar extends React.Component {
             { label: "Ambiguous", value: "AMBIGUOUS" }
           ]}
           value={ambiguousOrLiteral}
-          onChange={(e) => {
+          onChange={e => {
             updateAmbiguousOrLiteral(e.target.value);
           }}
         />
@@ -268,10 +268,10 @@ export class FindBar extends React.Component {
                 ...(!isInline && { width: 350, minHeight: 70 })
               }}
               className="tg-find-tool-input"
-              inputRef={(n) => {
+              inputRef={n => {
                 if (n) this.inputEl = n;
               }}
-              onKeyDown={(e) => {
+              onKeyDown={e => {
                 e.persist();
                 if (e.metaKey && e.keyCode === 70) {
                   //cmd-f
@@ -291,7 +291,7 @@ export class FindBar extends React.Component {
                 }
               }}
               rightElement={rightEl}
-              onChange={(e) => {
+              onChange={e => {
                 return updateSearchText(e.target.value.replace(/\s/g, ""));
               }}
               value={searchText}
@@ -302,7 +302,7 @@ export class FindBar extends React.Component {
           minimal
           isOpen={
             annotationSearchMatches &&
-            annotationSearchMatches.filter((m) => m.length).length
+            annotationSearchMatches.filter(m => m.length).length
           }
           content={
             <AnnotationSearchMatchComp

package/src/GlobalDialogUtils.js

@@ -63,6 +63,12 @@ export function showAddOrEditAnnotationDialog({
     overrideName: `AddOrEdit${nameUpper}DialogOverride`,
     dialogType,
     props: {
+      ...(annotation.isEditLocked && {
+        readOnly:
+          typeof annotation.isEditLocked === "string"
+            ? annotation.isEditLocked
+            : "This annotation is locked"
+      }),
       dialogProps: {
         title:
           annotation && annotation.id ? `Edit ${nameUpper}` : `New ${nameUpper}`

package/src/LinearView/ZoomLinearView.js

@@ -18,7 +18,7 @@ export function ZoomLinearView({
         onClick={() => {
           setTimeout(scrollToCaret, 0);
         }}
-        onChange={(zoomLvl) => {
+        onChange={zoomLvl => {
           //zoomLvl is in the range of 0 to 10
           const scaleFactor = Math.pow(12 / minCharWidth, 1 / 10);
           const newCharWidth = minCharWidth * Math.pow(scaleFactor, zoomLvl);

package/src/LinearView/index.js

@@ -218,14 +218,14 @@ class _LinearView extends React.Component {
       <Draggable
         enableUserSelectHack={false} //needed to prevent the input bubble from losing focus post user drag
         bounds={{ top: 0, left: 0, right: 0, bottom: 0 }}
-        onDrag={(event) => {
+        onDrag={event => {
           this.getNearestCursorPositionToMouseEvent(
             rowData,
             event,
             this.props.editorDragged || editorDragged
           );
         }}
-        onStart={(event) => {
+        onStart={event => {
           this.getNearestCursorPositionToMouseEvent(
             rowData,
             event,
@@ -235,7 +235,7 @@ class _LinearView extends React.Component {
         onStop={this.props.editorDragStopped || editorDragStopped}
       >
         <div
-          ref={(ref) => (this.linearView = ref)}
+          ref={ref => (this.linearView = ref)}
           className={classNames("veLinearView", className, {
             isLinViewZoomed
           })}
@@ -245,14 +245,14 @@ class _LinearView extends React.Component {
             paddingLeft: marginWidth / 2,
             ...(paddingBottom && { paddingBottom })
           }}
-          onContextMenu={(event) => {
+          onContextMenu={event => {
             this.getNearestCursorPositionToMouseEvent(
               rowData,
               event,
               backgroundRightClicked
             );
           }}
-          onClick={(event) => {
+          onClick={event => {
             this.getNearestCursorPositionToMouseEvent(
               rowData,
               event,
@@ -267,7 +267,7 @@ class _LinearView extends React.Component {
               minCharWidth={minCharWidth}
               smallSlider={smallSlider}
               editorName={editorName}
-              setCharWidth={(v) => {
+              setCharWidth={v => {
                 this.setState({
                   charWidthInLinearView: v === initialCharWidth ? undefined : v
                 });
@@ -354,7 +354,7 @@ class _LinearView extends React.Component {
   }
 }
 
-const WithAnnotationLimitsHoc = (Component) => (props) => {
+const WithAnnotationLimitsHoc = Component => props => {
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const [limits = {}] = useAnnotationLimits();
   return <Component limits={limits} {...props}></Component>;

package/src/MenuBar/index.js

@@ -7,7 +7,7 @@ import menuDef from "./defaultConfig";
 import getCommands from "../commands";
 import { Icon, Spinner } from "@blueprintjs/core";
 
-const ident = (x) => x;
+const ident = x => x;
 
 class OveMenuBar extends React.Component {
   constructor(props) {

package/src/MenuBar/viewSubmenu.js

@@ -64,7 +64,7 @@ export const featuresSubmenu = [
     shouldDismissPopover: false
   }
 ];
-export const partsSubmenu = (props) => {
+export const partsSubmenu = props => {
   return [
     {
       cmd: "toggleParts",

package/src/PCRTool/PCRTool.js

@@ -23,7 +23,7 @@ function PCRTool(props) {
     primerClicked
   } = props;
   const origSeqLen = sequenceData.sequence.length;
-  forEach(sequenceData.primers, (p) => (p.originalId = p.id));
+  forEach(sequenceData.primers, p => (p.originalId = p.id));
   const fPrimer = sequenceData.primers[forwardPrimer];
   const rPrimer = sequenceData.primers[reversePrimer];
   let seqBetween;
@@ -77,7 +77,7 @@ function PCRTool(props) {
     });
     seqBetween.name = `PCR Product from ${sequenceData.name} `;
   }
-  const getPrimers = (opts) => {
+  const getPrimers = opts => {
     return flatMap(
       sequenceData.primers,
       ({ name, id, forward, start, end }) => {
@@ -139,23 +139,23 @@ function PCRTool(props) {
       <div style={{ fontWeight: "600", fontSize: 13 }}>Output Product:</div>
       {seqBetween ? (
         <SimpleCircularOrLinearView
-            noWarnings
-            withZoomLinearView
-            withZoomCircularView
-            withChoosePreviewType
-            withDownload
-            smallSlider
-            withCaretEnabled
-            width={width - 50}
-            height={Math.max(height - 250, 400)}
-            sequenceData={seqBetween}
-            primerClicked={(args) => {
-              primerClicked({
-                ...args,
-                annotation: sequenceData.primers[args.annotation.originalId]
-              });
-            }}
-          ></SimpleCircularOrLinearView>
+          noWarnings
+          withZoomLinearView
+          withZoomCircularView
+          withChoosePreviewType
+          withDownload
+          smallSlider
+          withCaretEnabled
+          width={width - 50}
+          height={Math.max(height - 250, 400)}
+          sequenceData={seqBetween}
+          primerClicked={args => {
+            primerClicked({
+              ...args,
+              annotation: sequenceData.primers[args.annotation.originalId]
+            });
+          }}
+        ></SimpleCircularOrLinearView>
       ) : (
         <div style={{ marginTop: 5, fontStyle: "italic", color: "grey" }}>
           Please choose a forward and reverse primer to see the resulting PCR