ts compliter fxs + UI legend

client/src/components/Graph.vue

@@ -1,5 +1,13 @@
 <template>
-  <div id="chart"></div>
+  <div>
+    <div id="chart"></div>
+    <div id="controls">
+      <div>
+        Hold <pre>ctrl</pre> to label patterns <br/>
+        Holde key <pre>D</pre> to delete patterns
+      </div>
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -99,4 +107,8 @@ export default defineComponent({
   width: 80%;
   height: 350px;
 }
+
+pre { 
+  display: inline;
+}
 </style>

client/src/types/segment_array.ts

@@ -17,7 +17,7 @@ export class SegmentArray<T extends Segment> implements SegmentsSet<T> {
     if(to === undefined) {
       to = Infinity;
     }
-    let result = [];
+    const result = [];
     for(let i = 0; i < this._segments.length; i++) {
       const s = this._segments[i];
       if(from <= s.from && s.to <= to) {
@@ -53,10 +53,10 @@ export class SegmentArray<T extends Segment> implements SegmentsSet<T> {
   }
 
   removeInRange(from: number, to: number): T[] {
-    let deleted = [];
-    let newSegments = [];
+    const deleted = [];
+    const newSegments = [];
     for(let i = 0; i < this._segments.length; i++) {
-      let s = this._segments[i];
+      const s = this._segments[i];
       if(from <= s.from && s.to <= to) {
         this._keyToSegment.delete(s.id);
         deleted.push(s);