Expand annotation style customization options

README.md

@@ -153,6 +153,29 @@ annotations = [
 
 In the example above, the "Strong promoter" would span the first to twenty-second base pair.
 
+Optional Annotation Parameters:
+ - Annotation border styling; user can customize border style and border color:
+ ```js
+annotations = [
+  { start: 0, end: 22, name: "Strong promoter", direction: 1, border: {style: "dashed", borderColor: 'purple'},
+];
+```
+ - Annotation font styling; user can change font family, font weight, or font color:
+ ```js
+annotations = [
+  { start: 0, end: 22, name: "Strong promoter", direction: 1, border: "dashed", font: {fontFamily: "Times New Roman", fontWeight: 800, fontSize: 17, fontColor: 'blue'}},
+];
+```
+ - Adding an svg icon to annotation: WIP
+
+ - Annotation background color gradient. User can enter a starting color and stopping color:
+```js
+annotations = [
+  { start: 0, end: 22, name: "Strong promoter", direction: 1, border: "dashed", font: {fontFamily: "Times New Roman", fontWeight: 800, fontSize: 17, fontColor: 'blue'}},
+  svg: 'promoter', gradient: {start: 'lightblue', stop: 'green'}
+];
+```
+
 #### `primers (=[])`
 
 An array of `Primer`s to render. Each `Primer` requires 0-based start (inclusive) and end (exclusive) indexes. `name`s are rendered on top of the primers. Set the primer's direction to `1` for forward primer and `-1` for reverse primer.

src/Linear/Annotations.tsx

@@ -182,7 +182,15 @@
   }
 
   // 0.591 is our best approximation of Roboto Mono's aspect ratio (width / height).
-  const fontSize = 12;
+  let fontSize = 12;
+  if (element.font?.fontSize) {
+    // 19 is a subjective limit to fontSize that will fit inside bounds of annotation. If larger than 19, cap it.
+    if (element.font.fontSize > 19) {
+      fontSize = 19;
+    } else {
+      fontSize = element.font.fontSize;
+    }
+  }
   const annotationCharacterWidth = 0.591 * fontSize;
   const availableCharacters = Math.floor((width - 40) / annotationCharacterWidth);
 
@@ -198,10 +206,53 @@
     }
   }
 
+  let strokeVal: string | null = null;
+  let strokeWidth: string | null = null;
+
+  if (element.border?.style) {
+    switch (element.border.style) {
+      case "dashed":
+        strokeVal = "5, 5";
+        break;
+      case "dotted":
+        strokeVal = "1, 5";
+        break;
+      case "bold":
+        strokeWidth = "2";
+        break;
+    }
+  }
+  let borderColor: string | null = null;
+  if (element.border?.borderColor) {
+    borderColor = element.border.borderColor;
+  }
+
+  let fontFamily: string | undefined = undefined;
+  let fontWeight: number = 400;
+  let fontColor: string = "rgb(42, 42, 42)";
+
+  if (element.font?.fontFamily) {
+    fontFamily = element.font.fontFamily;
+  }
+  if (element.font?.fontWeight) {
+    fontWeight = element.font.fontWeight;
+  }
+  if (element.font?.fontColor) {
+    fontColor = element.font.fontColor;
+  }
+
   return (
     <g id={element.id} transform={`translate(${x}, ${0.1 * height})`}>
       {/* <title> provides a hover tooltip on most browsers */}
       <title>{name}</title>
+      {element.gradient && (
+        <defs>
+          <linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" stop-color={element.gradient.start} />
+            <stop offset="100%" stop-color={element.gradient.stop} />
+          </linearGradient>
+        </defs>
+      )}
       <path
         ref={inputRef(element.id, {
           end: end,
@@ -214,10 +265,12 @@
         className={`${element.id} la-vz-annotation`}
         cursor="pointer"
         d={linePath}
-        fill={color}
+        fill={element.gradient ? "url(#myGradient)" : color}
         id={element.id}
-        stroke={color ? COLOR_BORDER_MAP[color] || darkerColor(color) : "gray"}
-        style={annotation}
+        stroke={borderColor ? borderColor : color ? COLOR_BORDER_MAP[color] || darkerColor(color) : "gray"}
+        style={{ annotation }}
+        stroke-dasharray={strokeVal}
+        stroke-width={strokeWidth}
         onBlur={() => {
           // do nothing
         }}
@@ -233,7 +286,7 @@
         dominantBaseline="middle"
         fontSize={fontSize}
         id={element.id}
-        style={annotationLabel}
+        style={{ ...annotationLabel, fontFamily, fontWeight, fill: fontColor }}
         textAnchor="middle"
         x={width / 2}
         y={height / 2 + 1}

src/elements.ts

@@ -10,11 +10,34 @@ export interface NameRange extends Range {
   color?: string;
   id: string;
   name: string;
+  border?: Border;
+  font?: Font;
+  gradient?: Gradient;
+}
+
+interface Font {
+  fontFamily?: string;
+  fontSize?: number;
+  fontWeight?: number;
+  fontColor?: string;
+}
+
+interface Border {
+  style?: "dashed" | "dotted" | "bold";
+  borderColor?: string;
+}
+
+interface Gradient {
+  start: string;
+  stop: string;
 }
 
 /** AnnotationProp is an annotation provided to SeqViz via the annotations prop. */
 export interface AnnotationProp {
   color?: string;
+  border?: Border;
+  font?: Font;
+  gradient?: Gradient;
   direction?: number | string;
   end: number;
   name: string;

src/style.ts

@@ -24,7 +24,6 @@ export const svgText: CSS.Properties = {
   MozUserSelect: "none",
   WebkitUserSelect: "none",
   background: "none",
-  fill: "rgb(42, 42, 42)",
   fontFamily: "Roboto Mono, Monaco, monospace",
   msUserSelect: "none",
   userSelect: "none",
@@ -98,8 +97,6 @@ export const annotation: CSS.Properties = {
 
 export const annotationLabel: CSS.Properties = {
   ...svgText,
-  color: "rgb(42, 42, 42)",
-  fontWeight: 400,
   shapeRendering: "geometricPrecision",
   strokeLinejoin: "round",
   textRendering: "optimizeLegibility",
@@ -151,3 +148,9 @@ export const seqBlock: CSS.Properties = {
   padding: 0,
   width: "100%",
 };
+
+export const iconStyle: CSS.Properties = {
+  width: "25px",
+  height: "25px",
+  zIndex: 100,
+};

webpack.config.js

@@ -14,7 +14,7 @@ const cdnBuild = {
   module: {
     rules: [
       { test: /\.(t|j)sx?$/, loader: "ts-loader", exclude: /node_modules/ },
-      { test: /\.js$/, enforce: "pre", loader: "source-map-loader", exclude: /node_modules/ },
+      { test: /\.js$/, enforce: "pre", loader: "source-map-loader", exclude: /node_modules/ }
     ],
   },
   optimization: {