removed svg feature for annotions. Added borderColor parameter for an…

…notations, updated README and updated webpack since we won't need to import images anymore.
Lattice-Automation · Nov 29, 2023 · 728e854 · 728e854
1 parent 0224fb3
commit 728e854
Show file tree

Hide file tree

Showing 69 changed files with 29 additions and 49 deletions.
diff --git a/README.md b/README.md
@@ -154,10 +154,10 @@ annotations = [
 In the example above, the "Strong promoter" would span the first to twenty-second base pair.
 
 Optional Annotation Parameters:
- - Annotation border styling: `"dashed" | "dotted" | "bold"`
+ - Annotation border styling; user can customize border style and border color:
  ```js
 annotations = [
-  { start: 0, end: 22, name: "Strong promoter", direction: 1, border: "dashed"},
+  { 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:
@@ -166,13 +166,8 @@ 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; 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. In this example `promoter` matches the name of the promoter icon file `promoter.png`:
- ```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'
-];
-```
+ - Adding an svg icon to annotation: WIP
+
  - Annotation background color gradient. User can enter a starting color and stopping color:
 ```js
 annotations = [
@@ -181,15 +176,6 @@ annotations = [
 ];
 ```
 
-Example result of using optional annotation parameters:
-```js
-annotation['border'] = 'dashed';
-annotation['font'] = {fontFamily: "Times New Roman", fontWeight: 800, fontSize: 17, fontColor: 'blue'}
-annotation['svg'] = 'promoter'
-annotation['gradient'] = {start: 'lightblue', stop: 'green'}
-```
-<img src="./demo/public/annotations-example.png" width="500" />
-
 #### `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.

diff --git a/src/Linear/Annotations.tsx b/src/Linear/Annotations.tsx
@@ -184,7 +184,13 @@ const SingleNamedElement = (props: {
   // 0.591 is our best approximation of Roboto Mono's aspect ratio (width / height).
   let fontSize = 12;
   if (element.font?.fontSize) {
-    fontSize = 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);
@@ -204,8 +210,8 @@ const SingleNamedElement = (props: {
   let strokeVal: string | null = null;
   let strokeWidth: string | null = null;
 
-  if (element.border) {
-    switch (element.border) {
+  if (element.border?.style) {
+    switch (element.border.style) {
       case "dashed":
         strokeVal = "5, 5";
         break;
@@ -217,6 +223,10 @@ const SingleNamedElement = (props: {
         break;
     }
   }
+  let borderColor:string | null = null
+  if (element.border?.borderColor) {
+    borderColor = element.border.borderColor
+  }
 
   let fontFamily: string | undefined = undefined;
   let fontWeight: number = 400;
@@ -232,11 +242,6 @@ const SingleNamedElement = (props: {
     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 */}
@@ -263,7 +268,7 @@ const SingleNamedElement = (props: {
         d={linePath}
         fill={element.gradient ? "url(#myGradient)" : color}
         id={element.id}
-        stroke={color ? COLOR_BORDER_MAP[color] || darkerColor(color) : "gray"}
+        stroke={borderColor ? borderColor : color ? COLOR_BORDER_MAP[color] || darkerColor(color) : "gray"}
         style={{ annotation }}
         stroke-dasharray={strokeVal}
         stroke-width={strokeWidth}
@@ -276,13 +281,6 @@ 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"

diff --git a/src/assets/aptamer.png b/src/assets/aptamer.png
diff --git a/src/assets/assembly-scar.png b/src/assets/assembly-scar.png
diff --git a/src/assets/association.png b/src/assets/association.png
diff --git a/src/assets/blunt-restriction-site.png b/src/assets/blunt-restriction-site.png
diff --git a/src/assets/cds-arrow.png b/src/assets/cds-arrow.png
diff --git a/src/assets/cds.png b/src/assets/cds.png
diff --git a/src/assets/chromosomal-locus.png b/src/assets/chromosomal-locus.png
diff --git a/src/assets/circular-plasmid.png b/src/assets/circular-plasmid.png
diff --git a/src/assets/complex-sbgn.png b/src/assets/complex-sbgn.png
diff --git a/src/assets/composite.png b/src/assets/composite.png
diff --git a/src/assets/control.png b/src/assets/control.png
diff --git a/src/assets/degradation.png b/src/assets/degradation.png
diff --git a/src/assets/dissociation.png b/src/assets/dissociation.png
diff --git a/src/assets/dna-stability-element.png b/src/assets/dna-stability-element.png
diff --git a/src/assets/dsNA.png b/src/assets/dsNA.png
diff --git a/src/assets/engineered-region.png b/src/assets/engineered-region.png
diff --git a/src/assets/five-prime-overhang.png b/src/assets/five-prime-overhang.png
diff --git a/src/assets/five-prime-sticky-restriction-site.png b/src/assets/five-prime-sticky-restriction-site.png
diff --git a/src/assets/generic-sbgn.png b/src/assets/generic-sbgn.png
diff --git a/src/assets/halfround-rectangle.png b/src/assets/halfround-rectangle.png
diff --git a/src/assets/inert-dna-spacer.png b/src/assets/inert-dna-spacer.png
diff --git a/src/assets/inhibition.png b/src/assets/inhibition.png
diff --git a/src/assets/insulator.png b/src/assets/insulator.png
diff --git a/src/assets/intron.png b/src/assets/intron.png
diff --git a/src/assets/location-dna-no-top.png b/src/assets/location-dna-no-top.png
diff --git a/src/assets/location-dna.png b/src/assets/location-dna.png
diff --git a/src/assets/location-protein-no-top.png b/src/assets/location-protein-no-top.png
diff --git a/src/assets/location-protein.png b/src/assets/location-protein.png
diff --git a/src/assets/location-rna-no-top.png b/src/assets/location-rna-no-top.png
diff --git a/src/assets/location-rna.png b/src/assets/location-rna.png
diff --git a/src/assets/macromolecule.png b/src/assets/macromolecule.png
diff --git a/src/assets/na-sbgn.png b/src/assets/na-sbgn.png
diff --git a/src/assets/ncrna.png b/src/assets/ncrna.png
diff --git a/src/assets/no-glyph-assigned.png b/src/assets/no-glyph-assigned.png
diff --git a/src/assets/nuclease-site.png b/src/assets/nuclease-site.png
diff --git a/src/assets/omitted-detail.png b/src/assets/omitted-detail.png
diff --git a/src/assets/operator.png b/src/assets/operator.png
diff --git a/src/assets/origin-of-replication.png b/src/assets/origin-of-replication.png
diff --git a/src/assets/origin-of-transfer.png b/src/assets/origin-of-transfer.png
diff --git a/src/assets/polyA.png b/src/assets/polyA.png
diff --git a/src/assets/polypeptide-region.png b/src/assets/polypeptide-region.png
diff --git a/src/assets/primer-binding-site.png b/src/assets/primer-binding-site.png
diff --git a/src/assets/process.png b/src/assets/process.png
diff --git a/src/assets/promoter.png b/src/assets/promoter.png
diff --git a/src/assets/protease-site.png b/src/assets/protease-site.png
diff --git a/src/assets/protein-stability-element.png b/src/assets/protein-stability-element.png
diff --git a/src/assets/protein.png b/src/assets/protein.png
diff --git a/src/assets/replacement-glyph.png b/src/assets/replacement-glyph.png
diff --git a/src/assets/ribonuclease-site.png b/src/assets/ribonuclease-site.png
diff --git a/src/assets/ribosome-entry-site.png b/src/assets/ribosome-entry-site.png
diff --git a/src/assets/rna-stability-element.png b/src/assets/rna-stability-element.png
diff --git a/src/assets/signature.png b/src/assets/signature.png
diff --git a/src/assets/simple-chemical-circle.png b/src/assets/simple-chemical-circle.png
diff --git a/src/assets/simple-chemical-hexagon.png b/src/assets/simple-chemical-hexagon.png
diff --git a/src/assets/simple-chemical-pentagon.png b/src/assets/simple-chemical-pentagon.png
diff --git a/src/assets/simple-chemical-triangle.png b/src/assets/simple-chemical-triangle.png
diff --git a/src/assets/specific-recombination-site.png b/src/assets/specific-recombination-site.png
diff --git a/src/assets/ssNA.png b/src/assets/ssNA.png
diff --git a/src/assets/stimulation.png b/src/assets/stimulation.png
diff --git a/src/assets/terminator.png b/src/assets/terminator.png
diff --git a/src/assets/three-prime-overhang.png b/src/assets/three-prime-overhang.png
diff --git a/src/assets/three-prime-sticky-restriction-site.png b/src/assets/three-prime-sticky-restriction-site.png
diff --git a/src/assets/transcription-end.png b/src/assets/transcription-end.png
diff --git a/src/assets/translation-end.png b/src/assets/translation-end.png
diff --git a/src/assets/unspecified-glyph.png b/src/assets/unspecified-glyph.png
diff --git a/src/elements.ts b/src/elements.ts
@@ -10,17 +10,21 @@ export interface NameRange extends Range {
   color?: string;
   id: string;
   name: string;
-  border?: "dashed" | "dotted" | "bold";
+  border?: Border;
   font?: Font;
-  svg?: string;
   gradient?: Gradient;
 }
 
 interface Font {
   fontFamily?: string;
-  fontSize: number;
-  fontWeight: number;
-  fontColor: string;
+  fontSize?: number;
+  fontWeight?: number;
+  fontColor?: string;
+}
+
+interface Border {
+  style?: "dashed" | "dotted" | "bold"
+  borderColor?: string;
 }
 
 interface Gradient {
@@ -31,9 +35,8 @@ interface Gradient {
 /** AnnotationProp is an annotation provided to SeqViz via the annotations prop. */
 export interface AnnotationProp {
   color?: string;
-  border?: "dashed" | "dotted" | "bold";
+  border?: Border;
   font?: Font;
-  svg?: string;
   gradient?: Gradient;
   direction?: number | string;
   end: number;

diff --git a/webpack.config.js b/webpack.config.js
@@ -14,14 +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: /\.(png|jpe?g|gif|jp2|webp)$/,
-        loader: 'file-loader',
-        options: {
-          name: '[name].[ext]',
-        },
-      },
+      { test: /\.js$/, enforce: "pre", loader: "source-map-loader", exclude: /node_modules/ }
     ],
   },
   optimization: {