Handle when gene width is smaller that arrow width

src/scripts/component/sequence/gene-shapes.ts

-import { GeneData } from "./gene";
-import { ScaleLinear } from "d3-scale";
-
-export function arrowShape(data: GeneData, xScale: ScaleLinear<number, number>, geneHeight: number) {
-    const geneWidth = xScale(data.length);
-    return "M 0 0 V " + (-geneHeight) + " H " + geneWidth + " V " + geneHeight + " H " + (-geneWidth) + " Z";
+import { GeneData, PositionedGeneData } from "./gene";
+import { path } from "d3-path";
+export function arrowShape(
+    data: PositionedGeneData,
+    geneHeight: number,
+    arrowWidth: number = 20
+) {
+    const { position: { x, y, width } } = data;
+    const genePath = path();
+    if (width < arrowWidth) {
+        genePath.moveTo(0, geneHeight / 2);
+        genePath.lineTo(width, geneHeight);
+        genePath.lineTo(width, 0);
+        genePath.closePath();
+    }
+    else {
+        genePath.moveTo(0, geneHeight / 2);
+        genePath.lineTo(arrowWidth, geneHeight);
+        genePath.lineTo(width, geneHeight);
+        genePath.lineTo(width, 0);
+        genePath.lineTo(arrowWidth, 0);
+        genePath.closePath();
+    }
+    return genePath.toString();
 }
\ No newline at end of file