Upgrade annotation feature.

README.md

@@ -143,6 +143,35 @@ The name of the sequence/plasmid. Shown at the center of the circular viewer.
 
 An array of `Annotation`s to render. Each `Annotation` requires 0-based start (inclusive) and end (exclusive) indexes. `name`s are rendered on top of the annotations. Set the annotation's direction to `1` for forward arrows and `-1` for reverse arrows.
 
+Optional Parameters:
+ - Annotation border styling: `"dashed" | "dotted" | "bold"`
+ ```js
+annotations = [
+  { start: 0, end: 22, name: "Strong promoter", direction: 1, border: "dashed"},
+];
+```
+ - 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": "red"}},
+];
+```
+ - Adding an svg icon to annotation; the available icons are part of the SBOL library and can be viewed in the `assets` folder under `src/assets/`, the name of the desired icon must exactly match the filename of the icon in the `assets` folder:
+ ```js
+annotations = [
+  { start: 0, end: 22, name: "Strong promoter", direction: 1, border: "dashed", font: {"fontFamily": "Times New Roman", "fontWeight": 800, "fontSize": 17, "fontColor": "red"}},
+  svg: 'promoter'
+];
+```
+  here `promoter` matches the name of the promoter icon file `promoter.png`
+ - 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": "red"}},
+  svg: 'promoter', gradient: {start: 'lightblue', stop: 'green'}
+];
+```
+
 ```js
 annotations = [
   { start: 0, end: 22, name: "Strong promoter", direction: 1 }, // [0, 22)

src/Linear/Annotations.tsx

@@ -182,7 +182,10 @@ const SingleNamedElement = (props: {
   }
 
   // 0.591 is our best approximation of Roboto Mono's aspect ratio (width / height).
-  const fontSize = 12;
+  let fontSize = 12;
+  if (element.font?.fontSize) {
+    fontSize = element.font.fontSize;
+  }
   const annotationCharacterWidth = 0.591 * fontSize;
   const availableCharacters = Math.floor((width - 40) / annotationCharacterWidth);
 
@@ -198,10 +201,54 @@ const SingleNamedElement = (props: {
     }
   }
 
+  let strokeVal: string | null = null;
+  let strokeWidth: string | null = null;
+
+  if (element.border) {
+    switch (element.border) {
+      case "dashed":
+        strokeVal = "5, 5";
+        break;
+      case "dotted":
+        strokeVal = "1, 5";
+        break;
+      case "bold":
+        strokeWidth = "2";
+        break;
+    }
+  }
+
+  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;
+  }
+
+  let svg: any = null;
+  if (element.svg) {
+    svg = require(`../assets/${element.svg}.png`);
+  }
+
   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 +261,12 @@ const SingleNamedElement = (props: {
         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}
+        style={{ annotation }}
+        stroke-dasharray={strokeVal}
+        stroke-width={strokeWidth}
         onBlur={() => {
           // do nothing
         }}
@@ -227,13 +276,20 @@ const SingleNamedElement = (props: {
         onMouseOut={() => hoverOtherAnnotationRows(element.id, 0.7)}
         onMouseOver={() => hoverOtherAnnotationRows(element.id, 1.0)}
       />
+      <image
+        href={svg ? String(svg.default.src) : undefined}
+        x={width / 2 - (width / 2) * 0.6}
+        y={height / 2 - 8}
+        width="15px"
+        height="15px"
+      />
       <text
         className="la-vz-annotation-label"
         cursor="pointer"
         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,31 @@ export interface NameRange extends Range {
   color?: string;
   id: string;
   name: string;
+  border?: "dashed" | "dotted" | "bold";
+  font?: Font;
+  svg?: string;
+  gradient?: Gradient;
+}
+
+interface Font {
+  fontFamily?: string;
+  fontSize: number;
+  fontWeight: number;
+  fontColor: string;
+}
+
+interface Gradient {
+  start: string;
+  stop: string;
 }
 
 /** AnnotationProp is an annotation provided to SeqViz via the annotations prop. */
 export interface AnnotationProp {
   color?: string;
+  border?: "dashed" | "dotted" | "bold";
+  font?: Font;
+  svg?: string;
+  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,
+};