Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
@theosanderson
theosanderson committed Feb 14, 2023
1 parent cedc8db commit 4ea01a4
Show file tree
Hide file tree
Showing 3 changed files with 83 additions and 28 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
"bio-parsers": "^9.3.0",
"postcss": "^8.4.21",
"react": "^18.2.0",
"react-debounce-input": "^3.3.0",
"react-dom": "^18.2.0",
"react-icons": "^4.7.1",
"react-scripts": "5.0.1",
Expand Down
100 changes: 73 additions & 27 deletions src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import './App.css';
import { genbankToJson } from "bio-parsers";
import { useMeasure } from 'react-use'; // or just 'react-use-measure'
import {FaSearch,FaTimes} from 'react-icons/fa';

import {DebounceInput} from 'react-debounce-input';

const Tooltip = ({ hoveredInfo }) => {
const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
Expand Down Expand Up @@ -193,7 +193,14 @@ const codonToAminoAcid = (codon) => {
}
};

const SingleRow = ({ parsedSequence, rowStart, rowEnd, setHoveredInfo, rowId }) => {
const SingleRow = ({ parsedSequence, rowStart, rowEnd, setHoveredInfo, rowId, searchInput }) => {

const isSelected = searchInput>=rowStart && searchInput<=rowEnd;
if(isSelected){
console.log("selected");
}



const fullSequence = parsedSequence.sequence;
const rowSequence = fullSequence.slice(rowStart, rowEnd);
Expand Down Expand Up @@ -389,10 +396,31 @@ const SingleRow = ({ parsedSequence, rowStart, rowEnd, setHoveredInfo, rowId })
);
});

// create a tick specifically at searchInput
let searchTick = null;
if (searchInput != null && searchInput >= rowStart && searchInput <= rowEnd) {
searchTick = (
<g key={-1}>
<line x1={(searchInput-rowStart)*10} y1={0} x2={(searchInput-rowStart)*10} y2={10} stroke="red" />
{//rect behind tick
}
<rect x={(searchInput-rowStart)*10-30} y={0} width={60} height={30} fill="#ffffee" zIndex={-1} />
<text x={(searchInput-rowStart)*10} y={20} textAnchor="middle" fontSize="10"
fill="red"
>
{searchInput+1}
</text>
</g>
);
}


// Concatenate sequence characters and ticks with SVG
return (
<div style={{ position: "relative", height: `${height}px` }} id={`row-${rowId}`}>
<div style={{ position: "relative", height: `${height}px`,
...(isSelected? {backgroundColor: "#ffffee"} : {})

}} id={`row-${rowId}`}>
<svg
width={width+40}
height={height - 20}
Expand All @@ -401,35 +429,39 @@ const SingleRow = ({ parsedSequence, rowStart, rowEnd, setHoveredInfo, rowId })
<g
fillOpacity={0.7}
>
<g transform={`translate(${extraPadding}, ${height-40})`}>{ticks}</g>
<g transform={`translate(${extraPadding}, ${height-40})`} zIndex={-5}>{ticks}</g>
{searchTick && <g transform={`translate(${extraPadding}, ${height-40})`}>{searchTick}</g>
}
{// line above ticks
}
<line x1={0+extraPadding} y1={height-40} x2={width+extraPadding+0} y2={height-40}

stroke="black" />
</g>

<g transform={`translate(${extraPadding}, ${height-55})`}>{chars}</g>
<g transform={`translate(${extraPadding}, 5)`}>{featureBlocksSVG}</g>
</svg>
</div>
);
};

function SearchPanel({ goToNucleotide,searchPanelOpen,setSearchPanelOpen }) {
function SearchPanel({ searchPanelOpen,setSearchPanelOpen,searchInput,setSearchInput }) {

const [inputValue, setInputValue] = useState("");

const handleInputChange = (event) => {
setInputValue(event.target.value);
goToNucleotide(event.target.value);
setSearchInput(event.target.value);

};

return (
<div className="bg-gray-100 p-1 text-sm">
{searchPanelOpen ? ((<>
<input
<DebounceInput
minLength={2}
debounceTimeout={300}
type="text"
value={inputValue}
value={searchInput}
onChange={handleInputChange}
placeholder="nuc index"
id="search-input"
Expand Down Expand Up @@ -482,6 +514,11 @@ function App() {
//console.log("width", width);
const [hoveredInfo, setHoveredInfo] = useState(null);
const [genbankData, setGenbankData] = useState(null);
const [searchInput, setSearchInput] = useState(null);

// safely convert searchInput to int
const intSearchInput = parseInt(searchInput);



useEffect(() => {
Expand All @@ -501,15 +538,34 @@ function App() {
loadGenbankFile();
}, []);

if (!genbankData ) {
return <div>Loading...</div>;
}

let rowWidth= Math.floor(width*.0965);
// rowWidth minimum 50
if (rowWidth < 50) {
rowWidth = 50;
}


// useEffect
useEffect(() => {
if(!intSearchInput) return;
const row = Math.floor(intSearchInput / rowWidth);
console.log("row", row);

const rowElement = document.getElementById(`row-${row}`);
const yPos = rowElement.getBoundingClientRect().top;
setTimeout(() => {
window.scrollTo({
top: yPos,
behavior: "smooth"
});
}, 100);
}, [intSearchInput, rowWidth]);

if (!genbankData ) {
return <div>Loading...</div>;
}

const rowData = [];
const fullSequence = genbankData.parsedSequence.sequence;
const sequenceLength = fullSequence.length;
Expand All @@ -535,22 +591,11 @@ function App() {
{true && (
<div className="fixed top-0 right-0 z-10">
<SearchPanel
searchInput = {searchInput}
setSearchInput = {setSearchInput}
searchPanelOpen={searchPanelOpen}
setSearchPanelOpen={setSearchPanelOpen}
goToNucleotide={(nucleotide) => {
const row = Math.floor(nucleotide / rowWidth);
console.log("row", row);

const rowElement = document.getElementById(`row-${row}`);
const yPos = rowElement.getBoundingClientRect().top;
setTimeout(() => {
window.scrollTo({
top: yPos,
behavior: "smooth"
});
}, 100);
}
}

/>
</div>
)}
Expand All @@ -576,6 +621,7 @@ function App() {
rowWidth={rowWidth}
setHoveredInfo={setHoveredInfo}
rowId={index}
searchInput={intSearchInput-1}
/>
))}
</div>
Expand Down
10 changes: 9 additions & 1 deletion yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6250,7 +6250,7 @@ locate-path@^6.0.0:
dependencies:
p-locate "^5.0.0"

lodash.debounce@^4.0.8:
lodash.debounce@^4, lodash.debounce@^4.0.8:
version "4.0.8"
resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
Expand Down Expand Up @@ -7610,6 +7610,14 @@ react-app-polyfill@^3.0.0:
regenerator-runtime "^0.13.9"
whatwg-fetch "^3.6.2"

react-debounce-input@^3.3.0:
version "3.3.0"
resolved "https://registry.yarnpkg.com/react-debounce-input/-/react-debounce-input-3.3.0.tgz#85e3ebcaa41f2016e50613134a1ec9fe3cdb422e"
integrity sha512-VEqkvs8JvY/IIZvh71Z0TC+mdbxERvYF33RcebnodlsUZ8RSgyKe2VWaHXv4+/8aoOgXLxWrdsYs2hDhcwbUgA==
dependencies:
lodash.debounce "^4"
prop-types "^15.8.1"

react-dev-utils@^12.0.1:
version "12.0.1"
resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-12.0.1.tgz#ba92edb4a1f379bd46ccd6bcd4e7bc398df33e73"
Expand Down

1 comment on commit 4ea01a4

@vercel
Copy link

@vercel vercel bot commented on 4ea01a4 Feb 14, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

genbank-view – ./

genbank-view-git-main-theosanderson.vercel.app
genbank-view.vercel.app
genbank-view-theosanderson.vercel.app
gensplore.theo.io

Please sign in to comment.