diff --git a/src/SeqViz/Circular/Circular.tsx b/src/SeqViz/Circular/Circular.tsx index 5430d0bdd..7eaa2ac04 100644 --- a/src/SeqViz/Circular/Circular.tsx +++ b/src/SeqViz/Circular/Circular.tsx @@ -3,17 +3,17 @@ import * as React from "react"; import { Annotation, Coor, ICutSite, ISize, InputRefFuncType, Primer, Ranged } from "../../elements"; import bindingSites from "../../utils/bindingSites"; import isEqual from "../../utils/isEqual"; -import { HighlightRegion } from "../Linear/SeqBlock/LinearFind"; +import { HighlightRegion } from "../Linear/SeqBlock/Find"; import { stackElements } from "../elementsToRows"; import withViewerHOCs from "../handlers"; import CentralIndexContext from "../handlers/centralIndex"; import { SeqVizSelection } from "../handlers/selection"; import Annotations from "./Annotations"; -import { CircularFind } from "./CircularFind"; -import Selection from "./CircularSelection"; import CutSites from "./CutSites"; +import { Find } from "./Find"; import Index from "./Index"; import Labels, { ILabel } from "./Labels"; +import Selection from "./Selection"; // this will need to change whenever the css of the plasmid viewer text changes // just divide the width of some rectangular text by it's number of characters @@ -355,7 +355,7 @@ class Circular extends React.Component { totalRows={totalRows} yDiff={yDiff} /> - { recogHighlightArc = (c: ICutSite) => { if (c.highlightColor) { return ( - Coor; generateArc: (args: { @@ -30,11 +30,11 @@ interface CircularFindProps { totalRows: number; } -export const CircularFind = (props: CircularFindProps) => { +export const Find = (props: FindProps) => { const { generateArc, getRotation, highlightedRegions, inputRef, lineHeight, radius, search, seqLength } = props; const threshold = seqLength >= 200 ? search.length / seqLength <= 0.02 : true; const searchArcs = search.map(s => ( - { )); const highlightArcs = highlightedRegions.map(({ color, end, start }) => ( - { /** * Create an SVG `path` element that highlights the search result */ -export const CircularFindArc = (props: { +export const FindArc = (props: { direction: -1 | 1; end: number; fillStyle: string; diff --git a/src/SeqViz/Circular/CircularSelection.tsx b/src/SeqViz/Circular/Selection.tsx similarity index 97% rename from src/SeqViz/Circular/CircularSelection.tsx rename to src/SeqViz/Circular/Selection.tsx index 41cfd035c..0099e3e89 100644 --- a/src/SeqViz/Circular/CircularSelection.tsx +++ b/src/SeqViz/Circular/Selection.tsx @@ -36,7 +36,7 @@ interface CircularSelectionProps { * if nothing is selected, it should just be the single cursor * without a middle highlighted region */ -export default class CircularSelection extends React.PureComponent { +export default class Selection extends React.PureComponent { static contextType = SelectionContext; declare context: React.ContextType; diff --git a/src/SeqViz/Linear/Linear.tsx b/src/SeqViz/Linear/Linear.tsx index aecb68674..2553254d3 100644 --- a/src/SeqViz/Linear/Linear.tsx +++ b/src/SeqViz/Linear/Linear.tsx @@ -8,7 +8,7 @@ import { createMultiRows, createSingleRows, stackElements } from "../elementsToR import withViewerHOCs from "../handlers"; import { SeqVizSelection } from "../handlers/selection"; import InfiniteScroll from "./InfiniteScroll"; -import { HighlightRegion } from "./SeqBlock/LinearFind"; +import { HighlightRegion } from "./SeqBlock/Find"; import SeqBlock from "./SeqBlock/SeqBlock"; export interface LinearProps { diff --git a/src/SeqViz/Linear/SeqBlock/LinearFind.tsx b/src/SeqViz/Linear/SeqBlock/Find.tsx similarity index 95% rename from src/SeqViz/Linear/SeqBlock/LinearFind.tsx rename to src/SeqViz/Linear/SeqBlock/Find.tsx index acf01ef3e..2a7ba9ddf 100644 --- a/src/SeqViz/Linear/SeqBlock/LinearFind.tsx +++ b/src/SeqViz/Linear/SeqBlock/Find.tsx @@ -26,7 +26,7 @@ interface FindProps { /** * Render rectangles around Search results. */ -export default function LinearFind(props: FindProps) { +export default function Find(props: FindProps) { const { compYDiff, filteredRows: searchRows, @@ -45,7 +45,7 @@ export default function LinearFind(props: FindProps) { {/* We use two LinearFindBlocks here because we want to span both the top and bottom strand for a highlight */} {highlightedRegions.map(({ color, end, start }) => ( - - ))} {searchRows.map(s => ( - { lastBase={lastBase} selectEdgeHeight={selectEdgeHeight} /> - { ) : null} -