Merge branch 'master' into 1936-migrate-c-ramp

frontend/cypress/tests/chartView/chartView_zoomFeature.cy.js

@@ -281,15 +281,15 @@ describe('range changes in chartview should reflect in zoom', () => {
       .get('#summary-charts .summary-chart__ramp .ramp')
       .first()
       .click(120, 20)
-      .click(200, 20);
+      .click(185, 20);
 
     cy.get('#tab-zoom')
       .should('be.visible');
 
     cy.get('#tab-zoom .ramp .ramp__slice')
       .first()
       .invoke('attr', 'title')
-      .should('eq', '[2020-10-01]  [#1312] Conditional run for markbind to gh pages deployment (#1337): +1 -0 lines ');
+      .should('eq', '[2020-05-23] [#1241] Restore checked file types (#1256): +14 -1 lines ');
     cy.get('#tab-zoom .ramp .ramp__slice')
       .last()
       .invoke('attr', 'title')
@@ -306,7 +306,7 @@ describe('range changes in chartview should reflect in zoom', () => {
     cy.get('body').type(zoomKey, { release: false })
       .get('#summary-charts .summary-chart__ramp .ramp')
       .first()
-      .click(200, 20)
+      .click(185, 20)
       .click(250, 20);
 
     cy.get('#tab-zoom')
@@ -319,8 +319,7 @@ describe('range changes in chartview should reflect in zoom', () => {
     cy.get('#tab-zoom .ramp .ramp__slice')
       .last()
       .invoke('attr', 'title')
-      .should('eq', '[2020-11-21] [#1345] Authorship: Add last modified '
-      + 'date to each LoC if specified (#1348): +165 -76 lines ');
+      .should('eq', '[2020-09-27] Add optional check for quotes in diff file regex (#1330): +1 -1 lines ');
   });
 
   // Assumptions: Contributer 'jamessspanggg' is the first result,
@@ -334,7 +333,7 @@ describe('range changes in chartview should reflect in zoom', () => {
     cy.get('body').type(zoomKey, { release: false })
       .get('#summary-charts .summary-chart__ramp .ramp')
       .first()
-      .click(200, 20)
+      .click(185, 20)
       .click(225, 20);
 
     cy.get('#tab-zoom')
@@ -351,7 +350,6 @@ describe('range changes in chartview should reflect in zoom', () => {
     cy.get('#tab-zoom .ramp .ramp__slice')
       .last()
       .invoke('attr', 'title')
-      .should('eq', '[2020-11-21] [#1345] Authorship: Add last modified date '
-      + 'to each LoC if specified (#1348): +165 -76 lines ');
+      .should('eq', '[2020-09-27] Add optional check for quotes in diff file regex (#1330): +1 -1 lines ');
   });
 });

frontend/package.json

@@ -20,6 +20,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.0.0",
     "@fortawesome/vue-fontawesome": "^3.0.3",
     "@types/minimatch": "^5.1.2",
+    "@types/seedrandom": "^3.0.5",
     "core-js": "^3.6.5",
     "highlight.js": "^10.5.0",
     "jszip": "^3.5.0",
@@ -33,7 +34,7 @@
     "vue-observe-visibility": "^1.0.0",
     "vue-router": "^4.1.6",
     "vuex": "^4.0.2",
-    "zod": "^3.20.6"
+    "zod": "^3.22.3"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.17.0",

frontend/src/components/c-resizer.vue

@@ -21,24 +21,30 @@
     slot(name="right")
 </template>
 
-<script>
+<script lang='ts'>
 import { mapState } from 'vuex';
+import { defineComponent } from 'vue';
 
 const DRAG_BAR_WIDTH = 13.25;
 const SCROLL_BAR_WIDTH = 17;
 const GUIDE_BAR_WIDTH = 2;
 
-const throttledEvent = (delay, handler) => {
+/** The following eslint suppression suppresses a rare false positive case where event cannot be accessed due to
+ *  handler being a lambda function parameter. The explicit lambda function here allows us to easily discern handler's
+ *  parameters, i.e. an event of type MouseEvent.
+ */
+// eslint-disable-next-line no-unused-vars
+const throttledEvent = (delay: number, handler: (event: MouseEvent) => unknown) => {
   let lastCalled = 0;
-  return (...args) => {
+  return (event: MouseEvent) => {
     if (Date.now() - lastCalled > delay) {
       lastCalled = Date.now();
-      handler(...args);
+      handler(event);
     }
   };
 };
 
-export default {
+export default defineComponent({
   name: 'c-resizer',
 
   data() {
@@ -68,7 +74,7 @@ export default {
 
     mouseMove() {
       if (this.isResizing) {
-        return throttledEvent(25, (event) => {
+        return throttledEvent(25, (event: MouseEvent) => {
           this.guideWidth = (
             Math.min(
               Math.max(
@@ -102,5 +108,5 @@ export default {
       this.$store.commit('updateTabState', false);
     },
   },
-};
+});
 </script>

frontend/src/components/c-segment-collection.vue

@@ -4,17 +4,19 @@
     c-segment(v-bind:segment="segment", v-bind:path="path")
 </template>
 
-<script>
+<script lang='ts'>
+import { defineComponent } from 'vue';
 import cSegment from './c-segment.vue';
+import Segment from '../utils/segment';
 
-export default {
+export default defineComponent({
   name: 'c-segment-collection',
   components: {
     cSegment,
   },
   props: {
     segments: {
-      type: Array,
+      type: Array<Segment>,
       required: true,
     },
     path: {
@@ -28,11 +30,11 @@ export default {
     };
   },
   methods: {
-    visibilityChanged(isVisible) {
+    visibilityChanged(isVisible: boolean) {
       if (isVisible) {
         this.isRendered = true;
       }
     },
   },
-};
+});
 </script>

frontend/src/utils/random-color-generator.js → frontend/src/utils/random-color-generator.ts

@@ -8,7 +8,7 @@ function getRandomHex() {
   return `#${Math.round(randomGenerator() * maxHexColorValue + 1).toString(16).padStart(6, '0')}`;
 }
 
-function rgb2lab(rgb) {
+function rgb2lab(rgb: number[]) {
   let r = rgb[0] / 255;
   let g = rgb[1] / 255;
   let b = rgb[2] / 255;
@@ -29,7 +29,7 @@ function rgb2lab(rgb) {
 
 // this delta E (perceptual color distance) implementation taken from @antimatter15 from
 // github: https://github.com/antimatter15/rgb-lab
-function deltaE(rgbA, rgbB) {
+function deltaE(rgbA: number[], rgbB: number[]) {
   const labA = rgb2lab(rgbA);
   const labB = rgb2lab(rgbB);
   const deltaL = labA[0] - labB[0];
@@ -49,7 +49,7 @@ function deltaE(rgbA, rgbB) {
   return distance < 0 ? 0 : Math.sqrt(distance);
 }
 
-function hasSimilarExistingColors(existingColors, newHex) {
+function hasSimilarExistingColors(existingColors: string[], newHex: string) {
   const deltaEThreshold = 11;
   // the lower limit of delta E to be similar, more info at http://zschuessler.github.io/DeltaE/learn/
   return existingColors.some((existingHex) => {
@@ -59,7 +59,7 @@ function hasSimilarExistingColors(existingColors, newHex) {
   });
 }
 
-function getNonRepeatingColor(existingColors) {
+function getNonRepeatingColor(existingColors: string[]) {
   let generatedHex = getRandomHex();
   while (hasSimilarExistingColors(existingColors, generatedHex)) {
     generatedHex = getRandomHex();