Improve Read Cycle Layout

src/components/ExampleSelectButtons.js

@@ -80,6 +80,24 @@ class ExampleSelectButtons extends Component {
         >
           Alignments to Reverse Nodes
         </Button>
+        <Button
+          color="primary"
+          id="example8"
+          onClick={() =>
+            this.handleClick(dataOriginTypes.EXAMPLE_8, "plainColors")
+          }
+        >
+          Multiple Nodes Cycle 1
+        </Button>
+        <Button
+          color="primary"
+          id="example9"
+          onClick={() =>
+            this.handleClick(dataOriginTypes.EXAMPLE_9, "plainColors")
+          }
+        >
+          Multiple Nodes Cycle 2
+        </Button>
       </Form>
     );
   }

src/components/TubeMapContainer.js

@@ -272,6 +272,32 @@ class TubeMapContainer extends Component {
           0,
           1 // Examples always have reads as track 1
         );
+        break;
+      case dataOriginTypes.EXAMPLE_8:
+        vg = data.cycleGraph;
+        nodes = tubeMap.vgExtractNodes(vg);
+        tracks = tubeMap.vgExtractTracks(vg, 0, 0); // Examples have paths and haplotypes as track 0.
+        reads = tubeMap.vgExtractReads(
+          nodes,
+          tracks,
+          data.cycleReads,
+          0,
+          1 // Examples always have reads as track 1
+        );
+
+        break;
+      case dataOriginTypes.EXAMPLE_9:
+        vg = data.cycle2Graph;
+        nodes = tubeMap.vgExtractNodes(vg);
+        tracks = tubeMap.vgExtractTracks(vg, 0, 0); // Examples have paths and haplotypes as track 0.
+        reads = tubeMap.vgExtractReads(
+          nodes,
+          tracks,
+          data.cycle2Reads,
+          0,
+          1 // Examples always have reads as track 1
+        );
+
         break;
       case dataOriginTypes.NO_DATA:
         // Leave the data empty.

src/enums.js

@@ -7,5 +7,7 @@ export const dataOriginTypes = {
   EXAMPLE_5: "example 5",
   EXAMPLE_6: "example 6",
   EXAMPLE_7: "example 7",
+  EXAMPLE_8: "example 8",
+  EXAMPLE_9: "example 9",
   NO_DATA: "no data",
 };