From f3a7110c9cb4e6727f1455add88472f06d5a5826 Mon Sep 17 00:00:00 2001 From: Theo Sanderson Date: Sun, 15 Dec 2024 20:06:40 +0000 Subject: [PATCH] Arrows (#44) * feat: Convert feature rectangles to chevron-shaped arrows based on strand direction * feat: Update feature path drawing to correctly render reverse strand direction * feat: Modify feature path drawing to use blunt ends for row boundaries * feat: Add semi-blunt path ends for non-actual feature boundaries * refactor: Extract arrow point offsets into configurable constants * fix: Symmetrize blunt end offsets using BLUNT_POINT_OFFSET * update * feat: Add Roboto Condensed font for DNA text at higher zoom levels * add * style: Update font imports and styling for SingleRow component * feat: Switch font from Inter to Open Sans * feat: Add Open Sans Condensed font for DNA text at higher zoom levels * style: Configure Tailwind to use Open Sans as default font * refactor: Adjust font size and family based on updated zoom level conditions * style: Adjust font weight for Open Sans Condensed at lower zoom levels * style: Adjust font weight based on zoom level in SingleRow component * update * up --- gensplore-component/package.json | 9 ++- .../src/components/SingleRow.jsx | 55 ++++++++++++++++--- .../src/stories/Gensplore.stories.jsx | 6 ++ gensplore-component/tailwind.config.js | 4 +- gensplore-component/yarn.lock | 40 ++++++++++++++ 5 files changed, 104 insertions(+), 10 deletions(-) diff --git a/gensplore-component/package.json b/gensplore-component/package.json index ec5ec71..e20a3bc 100644 --- a/gensplore-component/package.json +++ b/gensplore-component/package.json @@ -86,5 +86,12 @@ "last 1 safari version" ] }, - "packageManager": "yarn@4.0.2+sha512.4e502bea682e7d8004561f916f1da2dfbe6f718024f6aa50bf8cd86f38ea3a94a7f1bf854a9ca666dd8eafcfb8d44baaa91bf5c7876e79a7aeac952c332f0e88" + "packageManager": "yarn@4.0.2+sha512.4e502bea682e7d8004561f916f1da2dfbe6f718024f6aa50bf8cd86f38ea3a94a7f1bf854a9ca666dd8eafcfb8d44baaa91bf5c7876e79a7aeac952c332f0e88", + "dependencies": { + "@fontsource/inter": "^5.1.0", + "@fontsource/inter-tight": "^5.1.0", + "@fontsource/open-sans": "^5.1.0", + "@fontsource/open-sans-condensed": "^4.5.5", + "@fontsource/roboto-condensed": "^5.1.0" + } } diff --git a/gensplore-component/src/components/SingleRow.jsx b/gensplore-component/src/components/SingleRow.jsx index 2369bb5..090b8d0 100644 --- a/gensplore-component/src/components/SingleRow.jsx +++ b/gensplore-component/src/components/SingleRow.jsx @@ -3,6 +3,13 @@ import { getReverseComplement, filterFeatures, } from "../utils"; import getColor from "../utils/getColor"; import codonToAminoAcid from "../utils/codonMapping"; import { toast } from "react-toastify"; +import '@fontsource/open-sans'; +import '@fontsource/open-sans-condensed'; + +// Arrow point configuration +const SHARP_POINT_OFFSET = 6; // Offset for actual feature ends (sharp points) +const BLUNT_POINT_OFFSET = 1; // Offset for row boundary ends (semi-blunt) + var colorHash = new ColorHash({ lightness: [0.75, 0.9, 0.7, 0.8] }); const SingleRow = ({ @@ -245,7 +252,9 @@ const SingleRow = ({ x={x} y={10} textAnchor="middle" - fontSize={zoomLevel < -0.5 ? "10" : "12"} + fontSize={zoomLevel < -1 ? "11" : "12"} + fontFamily={zoomLevel < -0.25 ? "Open Sans Condensed" : "sans-serif"} + fontWeight={zoomLevel < -0.25 ? "600" : "400"} fillOpacity={0.9} onMouseEnter={() => setHoveredInfo({ @@ -320,20 +329,50 @@ const SingleRow = ({ return ( {feature.blocks.map((block, j) => ( - handleFeatureClick(feature)} onMouseEnter={() => { diff --git a/gensplore-component/src/stories/Gensplore.stories.jsx b/gensplore-component/src/stories/Gensplore.stories.jsx index 98f382e..a53f47b 100644 --- a/gensplore-component/src/stories/Gensplore.stories.jsx +++ b/gensplore-component/src/stories/Gensplore.stories.jsx @@ -319,6 +319,12 @@ FEATURES Location/Qualifiers /product="leader protein" /note="nsp1; produced by both pp1a and pp1ab" /protein_id="YP_009725297.1" + CDS complement(266..805) + /gene="backwards" + /locus_tag="backwards" + /product="leader backwards" + /note="nsp1; produced by both pp1a and pp1ab" + /protein_id="YP_009725297.1" CDS 806..2719 /gene="nsp2" /locus_tag="GU280_gp01" diff --git a/gensplore-component/tailwind.config.js b/gensplore-component/tailwind.config.js index 690823d..45ad9bf 100644 --- a/gensplore-component/tailwind.config.js +++ b/gensplore-component/tailwind.config.js @@ -2,7 +2,9 @@ module.exports = { content: ["./src/**/*.{html,js,jsx}"], theme: { - extend: {}, + extend: { + + }, }, plugins: [], }; diff --git a/gensplore-component/yarn.lock b/gensplore-component/yarn.lock index 7d2d446..8c6b7c6 100644 --- a/gensplore-component/yarn.lock +++ b/gensplore-component/yarn.lock @@ -1968,6 +1968,41 @@ __metadata: languageName: node linkType: hard +"@fontsource/inter-tight@npm:^5.1.0": + version: 5.1.0 + resolution: "@fontsource/inter-tight@npm:5.1.0" + checksum: 596d73bae064517147a155ae8fccccf25105ec173fe6054964ddc5fa5ab3ade4bf6a6417bc2fe22494954788b7080fb20ecb0c8959e3079a26388373747b9fb6 + languageName: node + linkType: hard + +"@fontsource/inter@npm:^5.1.0": + version: 5.1.0 + resolution: "@fontsource/inter@npm:5.1.0" + checksum: 48c740b8a311908ca9527bf598e759bdfad6429f730450cc4904877915537e857a322db3ff7ade0bf731a3853ab34e611638d560529774a7e94ca2237735c86b + languageName: node + linkType: hard + +"@fontsource/open-sans-condensed@npm:^4.5.5": + version: 4.5.5 + resolution: "@fontsource/open-sans-condensed@npm:4.5.5" + checksum: df51c11e05c264f572ef43fdc96455eba4d16d1f5e183b50e4c36e096634d18750f3982db600f89b50fcb9f02125bb5437f964a2ba8b7fd050959f8689de749e + languageName: node + linkType: hard + +"@fontsource/open-sans@npm:^5.1.0": + version: 5.1.0 + resolution: "@fontsource/open-sans@npm:5.1.0" + checksum: 024ed724e45db2219383a919a55ccd8e2f1008ded3a706d0068caa827574147674e9ebb7e47b6de154f1dec330036c10bad0ac1078d25718bf396af517b1a0ed + languageName: node + linkType: hard + +"@fontsource/roboto-condensed@npm:^5.1.0": + version: 5.1.0 + resolution: "@fontsource/roboto-condensed@npm:5.1.0" + checksum: f9038fe9030589440e453876bdd0d1c69224f065c64410c77092b8a3dba5dfa31e26f372ba11a04575e24cb95e759394f511066e8a44cfa16a156cb092817e3e + languageName: node + linkType: hard + "@gmod/gff@npm:^1.2.1": version: 1.3.0 resolution: "@gmod/gff@npm:1.3.0" @@ -6838,6 +6873,11 @@ __metadata: version: 0.0.0-use.local resolution: "gensplore@workspace:." dependencies: + "@fontsource/inter": "npm:^5.1.0" + "@fontsource/inter-tight": "npm:^5.1.0" + "@fontsource/open-sans": "npm:^5.1.0" + "@fontsource/open-sans-condensed": "npm:^4.5.5" + "@fontsource/roboto-condensed": "npm:^5.1.0" "@headlessui/react": "npm:^1.7.16" "@storybook/addon-essentials": "npm:^7.5.3" "@storybook/addon-interactions": "npm:^7.5.3"