[192-webreport] Reordered Overview view, app is working with local files now

report-viewer/src/components/ComparisonListElement.vue

@@ -1,15 +1,16 @@
 <template>
-  <div class="wrapper-list-element">
-    <p class="index">{{ index }}</p>
+  <div class="wrapper-list-element" @click="navigateToComparisonView(generateName(submission1, submission2))">
+      <p class="index">{{ index }}.</p>
       <p class="submission-id">{{ submission1 }}</p>
       <img src="@/assets/double_arrow_black_18dp.svg" alt=">>"/>
       <p class="submission-id">{{ submission2 }}</p>
-    <p class="match-percentage">{{ formattedMatchPercentage }}%</p>
+      <p class="match-percentage">{{ formattedMatchPercentage }}%</p>
   </div>
 </template>
 
 <script>
 import {defineComponent, ref } from "vue";
+import router from "@/router";
 
 export default defineComponent({
   name: "ComparisonListElement",
@@ -33,8 +34,22 @@ export default defineComponent({
   },
   setup(props) {
     let formattedMatchPercentage = props.matchPercentage.toFixed(2)
+
+    const navigateToComparisonView = (file) => {
+      import(`../files/${file}.json`).then( value => {
+        router.push({
+          name: "ComparisonView",
+          params: {str: JSON.stringify(value.default)}
+        })
+      })
+    }
+
+    const generateName = (sub1, sub2) => { return sub1.concat("-").concat(sub2) }
+
     return {
-      formattedMatchPercentage
+      formattedMatchPercentage,
+      navigateToComparisonView,
+      generateName
     }
   }
 })
@@ -47,7 +62,7 @@ export default defineComponent({
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  padding: 0 3%;
+  padding: 2% 3%;
   box-shadow: #777777 0 3px 3px;
   border-radius: 40px;
 }
@@ -57,13 +72,22 @@ export default defineComponent({
   margin-bottom: 0;
 }
 
+.wrapper-list-element:hover {
+  background: #FF5353;
+  cursor: pointer;
+}
+
+.wrapper-list-element:hover p {
+  color: white;
+}
+
 img {
   flex-shrink: 2;
 }
 
 p {
   font-weight: bold;
-  font-size: small;
+  font-size: large;
   text-align: center;
   text-anchor: middle;
 }

report-viewer/src/components/DistributionDiagram.vue

@@ -22,29 +22,27 @@ export default defineComponent({
     }
   },
   setup(props) {
+    let maxVal = ref(Math.max(...props.distribution));
     let chartData = ref( {
         labels: ['0-10%', '11-20%', '21-30%', '31-40%', '41-50%', '51-60%', '61-70%', '71-80%', '81-90%', '91-100%'],
         datasets: [{
           label: 'Count',
           data: props.distribution,
-          backgroundColor: '#BA1616'
+          backgroundColor: 'rgba(186,22,22,0.5)',
+          borderWidth: 2,
+          borderColor: 'rgba(186,22,22,1)'
         }]
     })
 
-    watch( () => props.distribution, (val, oldVal) => {
-      chartData.value = {
-        labels: ['0-10%', '11-20%', '21-30%', '31-40%', '41-50%', '51-60%', '61-70%', '71-80%', '81-90%', '91-100%'],
-        datasets: [{
-          label: 'Count',
-          data: val,
-          backgroundColor: '#BA1616'
-        }]
-      }
-    })
-
-    const options = {
+    const options = ref({
       responsive: true,
       maintainAspectRatio: false,
+      indexAxis: 'y',
+      scales: {
+        x: {
+          suggestedMax: maxVal.value + 5
+        }
+      },
       plugins : {
         datalabels: {
           color: '#000000',
@@ -59,7 +57,46 @@ export default defineComponent({
           display: false,
         }
       }
-    }
+    })
+
+    watch( () => props.distribution, (val, oldVal) => {
+      chartData.value = {
+        labels: ['0-10%', '11-20%', '21-30%', '31-40%', '41-50%', '51-60%', '61-70%', '71-80%', '81-90%', '91-100%'],
+        datasets: [{
+          label: 'Count',
+          data: val,
+          backgroundColor: 'rgba(186,22,22,0.5)',
+          borderWidth: 2,
+          borderColor: 'rgba(186,22,22,1)'
+        }]
+      }
+
+      maxVal.value = Math.max(...val)
+      options.value = {
+        responsive: true,
+        maintainAspectRatio: false,
+        indexAxis: 'y',
+        scales: {
+          x: {
+            suggestedMax: maxVal.value + 5
+          }
+        },
+        plugins: {
+          datalabels: {
+            color: '#000000',
+            font: {
+              weight: 'bold'
+            },
+            anchor: 'end',
+            align: 'end',
+            clamp: true
+          },
+          legend: {
+            display: false,
+          }
+        }
+      }
+    })
 
     return {
       chartData,
@@ -76,11 +113,11 @@ export default defineComponent({
   border-radius: 10px;
   box-shadow: #777777 2px 3px 3px;
   display: flex;
-  padding: 2%;
+  height: 100%;
 }
 
 .chart {
-  max-height: 200px;
   width: 100%;
+
 }
 </style>

report-viewer/src/components/MetricButton.vue

@@ -45,8 +45,8 @@ export default defineComponent({
   background: white;
   border-radius: 5px;
   box-shadow: #777777 2px 3px 3px;
-  padding: 5%;
-  width: 7vw;
+  padding: 1%;
+  margin-right: 1%;
 }
 
 
@@ -77,7 +77,7 @@ export default defineComponent({
 
 .selected {
   background: #FF5353;
-  box-shadow: #777777 0 0 0;
+  box-shadow: #777777 2px 3px 3px;
 }
 
 .selected p {

report-viewer/src/files/overview.json

@@ -0,0 +1,69 @@
+{
+    "submission_folder_path": "C:\\Uni\\PISE\\jplag-try-out\\src\\submission",
+    "base_code_folder_path": "",
+    "language": "Javac 1.9+ based AST plugin",
+    "file_extensions": [
+        ".java",
+        ".JAVA"
+    ],
+    "submission_ids": [
+        "sub2",
+        "sub1"
+    ],
+    "failed_submission_names": [],
+    "excluded_files": [],
+    "match_sensitivity": 9,
+    "date_of_execution": "29/11/21",
+    "execution_time": 47,
+    "comparison_names": [
+        "sub2-sub1"
+    ],
+    "metrics": [
+        {
+            "name": "AVG",
+            "threshold": 0.0,
+            "distribution": [
+                200,
+                124,
+                91,
+                23,
+                49,
+                72,
+                44,
+                65,
+                76,
+                40
+            ],
+            "topComparisons": [
+                {
+                    "first_submission": "sub2",
+                    "second_submission": "sub1",
+                    "match_percentage": 56.33163
+                }
+            ]
+        },
+        {
+            "name": "MAX",
+            "threshold": 0.0,
+            "distribution": [
+                0,
+                0,
+                7,
+                0,
+                0,
+                6,
+                0,
+                0,
+                1,
+                0
+            ],
+            "topComparisons": [
+                {
+                    "first_submission": "sub2",
+                    "second_submission": "sub1",
+                    "match_percentage": 74.6548
+                }
+            ]
+        }
+    ]
+}

report-viewer/src/files/sub2-sub1.json

@@ -0,0 +1,1334 @@
+{
+    "first_submission_id": "sub2",
+    "second_submission_id": "sub1",
+    "match_percentage": 56.33163,
+    "files_of_first_submission": [
+        {
+            "file_name": "Jumpbox12.java",
+            "lines": [
+                "package submission.sub2;",
+                "import submission.sub1.Jumpbox11;",
+                "",
+                "import java.util.*;",
+                "import java.awt.*;",
+                "",
+                "public class Jumpbox12 extends Frame implements Runnable {",
+                "",
+                "\tImage smile, nosmile, offImage;",
+                "\tGraphics offGraphics = null;",
+                "\tint sizeImg;",
+                "\tint nrChange = 0, xOldBox, yOldBox, xBox = 0, yBox = 0, typeBox, points = 0, cBox[] = new int[4];",
+                "\tLong gTime;",
+                "\tlong gameTime;",
+                "\tRandom rnd = new Random(System.currentTimeMillis());",
+                "\tThread animationThread;",
+                "\tboolean bSmile, threadRunning = false;",
+                "",
+                "\tpublic Jumpbox12(String title, String[] args) {",
+                "\t\tsuper(title);",
+                "\t\tif (args.length == 0) {",
+                "\t\t\tgameTime = 15;",
+                "\t\t\tgTime = new Long(15);",
+                "\t\t} else {",
+                "\t\t\ttry {",
+                "\t\t\t\tgTime = new Long(args[0]);",
+                "\t\t\t\tgameTime = gTime.longValue();",
+                "\t\t\t} catch (NumberFormatException ioe) {",
+                "\t\t\t\tSystem.out.println(\"Jumpbox: usage: Jumpbox <integer>\");",
+                "\t\t\t\tSystem.exit(0);",
+                "\t\t\t}",
+                "\t\t}",
+                "",
+                "\t\tgameTime = System.currentTimeMillis() + gameTime*1000;",
+                "",
+                "\t\tToolkit toolkit = Toolkit.getDefaultToolkit();",
+                "\t\tsmile = toolkit.getImage(\"smile.gif\");",
+                "\t\tnosmile = toolkit.getImage(\"wince.gif\");",
+                "",
+                "\t\trandomBoxColor();",
+                "\t\trandomBoxType();",
+                "\t\trandomBoxCoordinates();",
+                "\t}",
+                "",
+                "\tprivate void startThread() {",
+                "\t\tanimationThread = new Thread(this);",
+                "\t\tanimationThread.start();",
+                "\t}",
+                "",
+                "\tpublic void run() {",
+                "\t\tthreadRunning = true;",
+                "\t\tnrChange++;",
+                "\t\tif (nrChange >= 3) {",
+                "\t\t\tnrChange = 0;",
+                "\t\t\trandomBoxColor();",
+                "\t\t}",
+                "\t\tif (bSmile) { \t\t\t// SMILE",
+                "\t\t\tdrawSmile(this.getGraphics(), xBox, yBox);",
+                "\t\t\ttry {",
+                "\t\t\t\tanimationThread.sleep(500);",
+                "\t\t\t} catch (InterruptedException ignored) {",
+                "",
+                "\t\t\t}",
+                "\t\t\tpoints++;",
+                "\t\t} else { \t\t\t\t// NO SMILE",
+                "\t\t\tsizeImg = 26;",
+                "\t\t\twhile (sizeImg > 1) {",
+                "\t\t\t\tsizeImg--;",
+                "\t\t\t\trepaint();",
+                "\t\t\t\ttry {",
+                "\t\t\t\t\tanimationThread.sleep(40);",
+                "\t\t\t\t} catch (InterruptedException ignored) {",
+                "\t\t\t\t}",
+                "\t\t\t}",
+                "\t\t\tpoints--;",
+                "\t\t}",
+                "\t\trandomBoxCoordinates();",
+                "\t\trandomBoxType();",
+                "\t\tdrawLine(this.getGraphics(), xOldBox, yOldBox, xBox, yBox);",
+                "\t\ttry {",
+                "\t\t\tanimationThread.sleep(500);",
+                "\t\t} catch (InterruptedException ignored) {\t\t}",
+                "\t\tdeleteBox(this.getGraphics(), xOldBox, yOldBox);",
+                "\t\tdeleteLine(this.getGraphics(), xOldBox, yOldBox, xBox, yBox);",
+                "\t\tdrawBox(this.getGraphics(), xBox, yBox, cBox[typeBox]);",
+                "\t\tthreadRunning = false;",
+                "\t\trepaint();",
+                "\t\tanimationThread.yield();",
+                "\t}",
+                "",
+                "\tpublic void update(Graphics g) {",
+                "\t\tif (threadRunning) {",
+                "\t\t\tif (bSmile) {",
+                "\t\t\t\tpaint(g);",
+                "\t\t\t} else { // Animation NoSmile",
+                "\t\t\t\tif (offGraphics == null) {",
+                "\t\t\t\t\toffImage = createImage(50,50);",
+                "\t\t\t\t\toffGraphics = offImage.getGraphics();",
+                "\t\t\t\t}",
+                "\t\t\t\toffGraphics.setColor(getBackground());",
+                "\t\t\t\toffGraphics.fillRect(0,0,50,50);",
+                "\t\t\t\toffGraphics.drawImage(nosmile,25-sizeImg,25-sizeImg,sizeImg*2,sizeImg*2, this);",
+                "\t\t\t\tg.drawImage(offImage, xBox, yBox, this);",
+                "\t\t\t}",
+                "\t\t} else {",
+                "\t\t\tpaint(g);",
+                "\t\t}",
+                "\t}",
+                "",
+                "\tpublic void paint(Graphics g) {",
+                "\t\tg.setColor(number2color(cBox[0]));",
+                "\t\tg.fillRect(0,0,50,50);",
+                "\t\tg.setColor(number2color(cBox[1]));",
+                "\t\tg.fillRect(50,0,50,50);",
+                "\t\tg.setColor(number2color(cBox[2]));",
+                "\t\tg.fillRect(100,0,50,50);",
+                "\t\tg.setColor(number2color(cBox[3]));",
+                "\t\tg.fillRect(150,0,50,50);",
+                "",
+                "\t\tg.setColor(Color.black);",
+                "\t\tg.drawString(\"L\", 24, 27);",
+                "\t\tg.drawString(\"R\", 74, 27);",
+                "\t\tg.drawString(\"O\", 124, 27);",
+                "\t\tg.drawString(\"U\", 174, 27);",
+                "",
+                "\t\tg.setColor(Color.white);",
+                "\t\tg.drawRect(0,49,499,400-49);",
+                "",
+                "\t\tdrawBox(g, xBox, yBox, cBox[typeBox]);",
+                "\t}",
+                "",
+                "\tprivate boolean inBox(int x, int y) {",
+                "\t\tif ((x >= xBox) && (y >= yBox) && (x <= xBox+50) && (y <= yBox+50))",
+                "\t\t\treturn true;",
+                "\t\telse",
+                "\t\t\treturn false;",
+                "\t}",
+                "",
+                "\tprivate boolean inBigBox(int x, int y) {",
+                "\t\tif ((x >= xBox-50) && (y >= yBox-50) && (x <= xBox+100) && (y <= yBox+100))",
+                "\t\t\treturn true;",
+                "\t\telse",
+                "\t\t\treturn false;",
+                "\t}",
+                "",
+                "\tprivate boolean inEntre(int box, int x, int y) {",
+                "\t\tswitch(box) {",
+                "\t\t\tcase 0: if ((x < xBox) && !((y < yBox) || (y > yBox +50))) return true; break;",
+                "\t\t\tcase 1: if ((x > xBox + 50) && !((y < yBox) || (y > yBox +50))) return true; break;",
+                "\t\t\tcase 2: if ((y < yBox) && !((x < xBox) || (x > xBox +50))) return true; break;",
+                "\t\t\tcase 3: if ((y > yBox + 50) && !((x < xBox) || (x > xBox +50))) return true; break;",
+                "\t\t}",
+                "\t\treturn false;",
+                "\t}",
+                "",
+                "\tprivate void randomBoxCoordinates() {",
+                "\t\txOldBox = xBox;",
+                "\t\tyOldBox = yBox;",
+                "\t\txBox = (int)(rnd.nextFloat() * 449) + 1;",
+                "\t\tyBox = (int)(rnd.nextFloat() * 300) + 50;",
+                "\t\twhile ( ((xBox > xOldBox-50) && (xBox < xOldBox+100)) && ((yBox > yOldBox-50) && (yBox < yOldBox+100)) ) {",
+                "\t\t\txBox = (int)(rnd.nextFloat() * 449) + 1;",
+                "\t\t\tyBox = (int)(rnd.nextFloat() * 300) + 50;",
+                "\t\t}",
+                "\t}",
+                "",
+                "\tprivate void drawBox(Graphics g, int x, int y, int c) {",
+                "\t\tg.setColor(number2color(c));",
+                "\t\tg.fillRect(x, y, 50, 50);",
+                "\t}",
+                "",
+                "\tprivate void deleteBox(Graphics g, int x, int y) {",
+                "\t\tg.setColor(Color.gray);",
+                "\t\tg.fillRect(x, y, 50, 50);",
+                "\t}",
+                "",
+                "\tprivate void randomBoxType() {",
+                "\t\twhile ((typeBox = (int)(rnd.nextFloat()*4)) == 4) {}",
+                "\t}",
+                "",
+                "\tprivate void drawLine(Graphics g, int xOld, int yOld, int x, int y) {",
+                "\t\tg.setColor(Color.white);",
+                "\t\tg.drawLine(xOld + 25, yOld + 25, x + 25, y + 25);",
+                "\t}",
+                "",
+                "\tprivate void deleteLine(Graphics g, int xOld, int yOld, int x, int y) {",
+                "\t\tg.setColor(Color.gray);",
+                "\t\tg.drawLine(xOld + 25, yOld + 25, x + 25, y + 25);",
+                "\t}",
+                "",
+                "\tprivate void drawSmile(Graphics g, int xOld, int yOld) {",
+                "\t\tg.drawImage(smile, xOld, yOld, this);",
+                "\t}",
+                "",
+                "\tpublic boolean mouseDrag(Event evt, int x, int y) {",
+                "\t\treturn mouseMove(evt, x,y);",
+                "\t}",
+                "",
+                "\tpublic boolean mouseMove(Event evt, int x, int y) {",
+                "\t\tif (gameTime < System.currentTimeMillis()) {",
+                "\t\t\tSystem.out.println(\"Ergebnis: \" + points + \" Punkte in \" + gTime.longValue() + \" Sekunden.\");",
+                "\t\t\tSystem.exit(0);",
+                "\t\t\treturn true;",
+                "\t\t}",
+                "\t\tif (!threadRunning) {",
+                "\t\t\tif (inBox(x,y)) {",
+                "\t\t\t\tbSmile = true;",
+                "\t\t\t\tstartThread();",
+                "\t\t\t}",
+                "\t\t\telse if ((inBigBox(x,y)) && !(inEntre(typeBox, x, y))) {",
+                "\t\t\t\tbSmile = false;",
+                "\t\t\t\tstartThread();",
+                "\t\t\t}",
+                "\t\t}",
+                "\t\treturn true;",
+                "\t}",
+                "",
+                "\tpublic boolean handleEvent(Event e) {",
+                "\t\tswitch (e.id) {",
+                "\t\t\tcase Event.WINDOW_ICONIFY:",
+                "\t\t\t\tbreak;",
+                "\t\t\tcase Event.WINDOW_DEICONIFY:",
+                "\t\t\t\trepaint();",
+                "\t\t\t\tbreak;",
+                "\t\t\tcase Event.WINDOW_DESTROY:",
+                "\t\t\tSystem.exit(0);",
+                "\t\t\tbreak;",
+                "\t\t}",
+                "\t\treturn super.handleEvent(e);",
+                "\t}",
+                "",
+                "\tprivate Color number2color(int i) {",
+                "\t\tswitch(i) {",
+                "\t\t\tcase 1: return Color.blue;",
+                "\t\t\tcase 2: return Color.cyan;",
+                "\t\t\tcase 3: return Color.green;",
+                "\t\t\tcase 4: return Color.magenta;",
+                "\t\t\tcase 5: return Color.orange;",
+                "\t\t\tcase 6: return Color.pink;",
+                "\t\t\tcase 7: return Color.red;",
+                "\t\t\tcase 8: return Color.yellow;",
+                "\t\t}",
+                "\t\treturn Color.white;",
+                "\t}",
+                "",
+                "\tprivate void randomBoxColor() {",
+                "\t\tboolean cCorrect;",
+                "\t\tint i = 0, c;",
+                "\t\twhile (i < 4) {",
+                "\t\t\tc = (int)(rnd.nextFloat()*8 + 1);",
+                "\t\t\tcBox[i] = c;",
+                "\t\t\tcCorrect = true;",
+                "\t\t\tif (cBox[i] == 9)",
+                "\t\t\t\tcCorrect = false;",
+                "\t\t\telse {",
+                "\t\t\t\tfor (int j=0;j < i; j++) {",
+                "\t\t\t\t\tif (cBox[i] == cBox[j])",
+                "\t\t\t\t\t\tcCorrect = false;",
+                "\t\t\t\t}",
+                "\t\t\t}",
+                "\t\t\tif (cCorrect)",
+                "\t\t\t\ti++;",
+                "\t\t}",
+                "\t\t}",
+                "",
+                "\tstatic public void main(String[] args) {",
+                "\t\tFrame f = new Jumpbox11(\"Jumpbox - Xxxx Xxxxxx, #942261\", args);",
+                "\t\tf.setBackground(Color.gray);",
+                "\t\tf.resize(508,430);",
+                "\t\tf.show();",
+                "\t}",
+                "}"
+            ]
+        },
+        {
+            "file_name": "Jumpbox22.java",
+            "lines": [
+                "package submission.sub2;",
+                "/* Synchonisationen sind in diesem Applet nicht notwendig, da durch das",
+                " gegenseitige Warteverhalten sichergestellt ist, dass immer nur ein Thread",
+                " zeichnen kann.",
+                " */",
+                "",
+                "import java.awt.*;",
+                "import java.applet.*;",
+                "import java.util.*;",
+                "",
+                "public class Jumpbox22 extends Applet implements Runnable{",
+                "\tstatic boolean AppletCanStart=false;",
+                "\tstatic Image vImg=null;",
+                "\tstatic Graphics vG;",
+                "\tstatic Image GrinsAnim[]=new Image[1];",
+                "\tstatic Image GrummelAnim[]=new Image[25];",
+                "\tstatic Thread animThread;",
+                "\tstatic Color ColorList[]={Color.blue,Color.cyan,Color.green,Color.magenta,Color.orange,Color.pink,Color.red,Color.yellow};",
+                "\tstatic boolean boolColorListFlags[]=new boolean[ColorList.length];",
+                "\tstatic Color RBoxFarben[]=new Color[4];",
+                "\tstatic Random RND=new Random(System.currentTimeMillis());",
+                "\tstatic long StartTime;",
+                "\tstatic long EndTime=15000;",
+                "\tstatic String Zeit=\"15\";",
+                "\tstatic int Points=0;",
+                "\tstatic int DstXBox,DstYBox,DstRichtung;",
+                "\tstatic Applet applet;",
+                "\tstatic int AnimXPos,AnimYPos;",
+                "\tstatic Image Animation[];",
+                "\tstatic long AnimMSPF;",
+                "\tstatic boolean NoMouse=true;",
+                "\tstatic int LastXMouse=0,LastYMouse=0;",
+                "",
+                "\tpublic void init(){ // Init. fuer Hauptprogramm und animThread",
+                "\t\tanimThread=new Thread(this);",
+                "\t\tMediaTracker tracker=new MediaTracker(this);",
+                "\t\tGrinsAnim[0]=Toolkit.getDefaultToolkit().getImage(\"smile.gif\");",
+                "\t\ttracker.addImage(GrinsAnim[0],0);",
+                "\t\tfor(int i=0;i<25;i++){",
+                "\t\t\tGrummelAnim[i]=Toolkit.getDefaultToolkit().getImage(\"grumel\"+i+\".gif\");",
+                "\t\t\ttracker.addImage(GrummelAnim[i],0);",
+                "\t\t}",
+                "\t\ttry{",
+                "\t\t\ttracker.waitForID(0);",
+                "\t\t} catch (InterruptedException e){",
+                "\t\t}",
+                "\t}",
+                "",
+                "\tpublic Dimension preferredSize(){",
+                "\t\treturn new Dimension(500,400);",
+                "\t}",
+                "",
+                "\tprotected void mouseAction(int x,int y){",
+                "\t\tLastXMouse=x;",
+                "\t\tLastYMouse=y;",
+                "\t\tif (System.currentTimeMillis()>=EndTime)",
+                "\t\t\tsynchronized(applet){",
+                "\t\t\t\tapplet.notify();",
+                "\t\t\t}",
+                "\t\tif (NoMouse)",
+                "\t\t\treturn;",
+                "\t\tRectangle BBox=new Rectangle(DstXBox-50,DstYBox-50,150,150);",
+                "\t\tif (!BBox.inside(x,y))",
+                "\t\t\treturn;",
+                "\t\tBBox.reshape(DstXBox,DstYBox,50,50);",
+                "\t\tif (BBox.inside(x,y)){",
+                "\t\t\tNoMouse=true;",
+                "\t\t\tPoints++;",
+                "\t\t\tsetAnimParams(DstXBox,DstYBox,GrinsAnim,500);",
+                "\t\t\treturn;",
+                "\t\t}",
+                "\t\tBBox.move((DstRichtung<2)?DstXBox+DstRichtung*100-50:DstXBox,",
+                "\t\t\t\t(DstRichtung>1)?DstYBox+(DstRichtung-2)*100-50:DstYBox);",
+                "\t\tif (BBox.inside(x,y))",
+                "\t\t\treturn;",
+                "\t\tNoMouse=true;",
+                "\t\tPoints--;",
+                "\t\tsetAnimParams(DstXBox,DstYBox,GrummelAnim,40);",
+                "\t}",
+                "",
+                "\tpublic boolean mouseDrag(Event evt,int x,int y){ // Maus mit Taste",
+                "\t\tmouseAction(x,y);",
+                "\t\treturn true;",
+                "\t}",
+                "",
+                "\tpublic boolean mouseMove(Event evt,int x,int y){ // Maus ohne Taste",
+                "\t\tmouseAction(x,y);",
+                "\t\treturn true;",
+                "\t\t}",
+                "",
+                "\tpublic void MischeRichtungen(){",
+                "\t\tint i,idx;",
+                "\t\tfor(i=0;i<ColorList.length;i++)",
+                "\t\t\tboolColorListFlags[i]=false;",
+                "\t\tfor(i=0;i<4;i++){",
+                "\t\t\twhile(boolColorListFlags[idx=Math.abs(RND.nextInt())%ColorList.length]);",
+                "\t\t\tboolColorListFlags[idx]=true;",
+                "\t\t\tRBoxFarben[i]=ColorList[idx];",
+                "\t\t\tvG.setColor(ColorList[idx]);",
+                "\t\t\tvG.fillRect(i*50,0,50,50);",
+                "\t\t}",
+                "\t\tvG.setColor(Color.black);",
+                "\t\tvG.drawString(\"L\",17,28);",
+                "\t\tvG.drawString(\"R\",67,28);",
+                "\t\tvG.drawString(\"O\",117,28);",
+                "\t\tvG.drawString(\"U\",167,28);",
+                "\t}",
+                "",
+                "\tpublic void GenNewBox(){",
+                "\t\tDstRichtung=Math.abs(RND.nextInt())%4;",
+                "\t\tint MinX=50,MinY=100,MaxX=400,MaxY=300;",
+                "\t\tswitch(DstRichtung){",
+                "\t\t\tcase 0:",
+                "\t\t\t\tMinX+=50;",
+                "\t\t\t\tbreak;",
+                "\t\t\tcase 1:",
+                "\t\t\t\tMaxX-=50;",
+                "\t\t\t\tbreak;",
+                "\t\t\tcase 2:",
+                "\t\t\t\tMinY+=50;",
+                "\t\t\t\tbreak;",
+                "\t\t\tcase 3:",
+                "\t\t\t\tMaxY-=50;",
+                "\t\t\t\tbreak;",
+                "\t\t}",
+                "\t\tRectangle BBox=new Rectangle();",
+                "\t\tdo{",
+                "\t\t\tDstXBox=MinX+Math.abs(RND.nextInt())%(MaxX-MinX);",
+                "\t\t\tDstYBox=MinY+Math.abs(RND.nextInt())%(MaxY-MinY);",
+                "\t\t\tBBox.reshape(DstXBox-50,DstYBox-50,150,150);",
+                "\t\t} while (BBox.inside(LastXMouse,LastYMouse));",
+                "\t}",
+                "",
+                "\tprotected void Springe(){ // Springen der Box",
+                "\t\tint oldDstXBox=DstXBox,oldDstYBox=DstYBox;",
+                "\t\tGenNewBox();",
+                "\t\tvG.setColor(Color.white);",
+                "\t\tvG.drawLine(oldDstXBox+25,oldDstYBox+25,DstXBox+25,DstYBox+25);",
+                "\t\trepaint();",
+                "\t\ttry{",
+                "\t\t\tThread.sleep(500);",
+                "\t\t} catch (InterruptedException ie){",
+                "\t\t}",
+                "\t\tvG.setColor(Color.gray);",
+                "\t\tvG.fillRect(1,51,498,348);",
+                "\t}",
+                "",
+                "\tpublic void start(){ // Start von Hauptprogramm",
+                "\t\tStartTime=System.currentTimeMillis();",
+                "\t\tEndTime+=StartTime;",
+                "\t\tint Durchlauf=0;",
+                "\t\tdo{",
+                "\t\t\tif (Durchlauf%3==0)",
+                "\t\t\t\tMischeRichtungen();",
+                "\t\t\tif (Durchlauf>0){",
+                "\t\t\t\tSpringe();",
+                "\t\t\t} else",
+                "\t\t\t\tGenNewBox();",
+                "\t\t\tvG.setColor(RBoxFarben[DstRichtung]);",
+                "\t\t\tvG.fillRect(DstXBox,DstYBox,50,50);",
+                "\t\t\trepaint();",
+                "\t\t\tNoMouse=false;",
+                "\t\t\ttry{",
+                "\t\t\t\tsynchronized(applet){",
+                "\t\t\t\t\tapplet.wait();",
+                "\t\t\t\t}",
+                "\t\t\t} catch (InterruptedException ie){",
+                "\t\t\t}",
+                "\t\t\tDurchlauf++;",
+                "\t\t} while(System.currentTimeMillis()<EndTime);",
+                "\t\tSystem.out.println(\"Ergebnis: \"+Points+\" in \"+Zeit+\" Sekunden\");",
+                "\t\tSystem.exit(0);",
+                "\t}",
+                "",
+                "\tprotected void setAnimParams(int XPos,int YPos,Image Anim[],long MSPF){",
+                "\t\t// Setzt die Startwerte fuer die naechste Animation",
+                "\t\tAnimXPos=XPos;",
+                "\t\tAnimYPos=YPos;",
+                "\t\tAnimation=Anim;",
+                "\t\tAnimMSPF=MSPF;",
+                "\t\tsynchronized(animThread){",
+                "\t\t\tanimThread.notify();",
+                "\t\t}",
+                "\t}",
+                "",
+                "\tpublic void run(){ // Start von animThread",
+                "\t\tfor(;;){",
+                "\t\t\ttry{",
+                "\t\t\t\tsynchronized(animThread){",
+                "\t\t\t\t\tanimThread.wait();",
+                "\t\t\t\t}",
+                "\t\t\t} catch (InterruptedException ie){",
+                "\t\t\t}",
+                "\t\t\tint AnimPos=0;",
+                "\t\t\tlong EndPeriod=System.currentTimeMillis(),DiffPeriod;",
+                "\t\t\twhile (AnimPos<Animation.length){",
+                "\t\t\t\tEndPeriod+=AnimMSPF;",
+                "\t\t\t\tvG.drawImage(Animation[AnimPos++],AnimXPos,AnimYPos,this);",
+                "\t\t\t\trepaint(AnimXPos,AnimYPos,50,50);",
+                "\t\t\t\tDiffPeriod=EndPeriod-System.currentTimeMillis();",
+                "\t\t\t\tif (DiffPeriod>0)",
+                "\t\t\t\t\ttry{",
+                "\t\t\t\t\t\tThread.sleep(DiffPeriod);",
+                "\t\t\t\t\t} catch (InterruptedException ie){",
+                "\t\t\t\t\t}",
+                "\t\t\t}",
+                "\t\t\tsynchronized(applet){",
+                "\t\t\t\tapplet.notify();",
+                "\t\t\t}",
+                "\t\t}",
+                "\t}",
+                "",
+                "\tpublic void paint(Graphics g){ // Paint von Applet",
+                "\t\tupdate(g);",
+                "\t}",
+                "",
+                "\tpublic void update(Graphics g){ // Update von Applet",
+                "\t\tif (vImg==null){",
+                "\t\t\tvImg=createImage(500,400);",
+                "\t\t\tvG=vImg.getGraphics();",
+                "\t\t\tvG.setColor(Color.gray);",
+                "\t\t\tvG.fillRect(0,0,500,400);",
+                "\t\t\tvG.setColor(Color.white);",
+                "\t\t\tvG.drawRect(0,50,500-1,350-1);",
+                "\t\t\tAppletCanStart=true;",
+                "\t\t}",
+                "\t\tg.drawImage(vImg,0,0,this);",
+                "\t}",
+                "",
+                "\tpublic static void main(String args[]){ // Start von Jumpbox",
+                "\t\t// Kommandozeilen-Argumente auswerten",
+                "\t\tif (args.length>1){",
+                "\t\t\tSystem.out.println(\"Usage: java Jumpbox <Sec>\");",
+                "\t\t\tSystem.exit(0);",
+                "\t\t} else if (args.length==1){",
+                "\t\t\tZeit=args[0];",
+                "\t\t\tEndTime=(new Long(Zeit)).longValue()*1000;",
+                "\t\t}",
+                "\t\t// Applet ausfuehren",
+                "\t\tapplet=new Jumpbox22();",
+                "\t\tapplet.init();",
+                "\t\tFrame frame=new Frame(\"Xxxxxxx Xxxx, #791299\");",
+                "\t\tframe.setResizable(false);",
+                "\t\tframe.add(\"Center\",applet);",
+                "\t\tframe.pack();",
+                "\t\tframe.show();",
+                "\t\twhile (!AppletCanStart)",
+                "\t\t\ttry{",
+                "\t\t\t\tThread.sleep(100);",
+                "\t\t\t} catch (InterruptedException ie){",
+                "\t\t\t}",
+                "\t\tanimThread.start();",
+                "\t\tapplet.start();",
+                "\t}",
+                "",
+                "}"
+            ]
+        }
+    ],
+    "files_of_second_submission": [
+        {
+            "file_name": "Jumpbox11.java",
+            "lines": [
+                "package submission.sub1;",
+                "import java.util.*;",
+                "import java.awt.*;",
+                "",
+                "public class Jumpbox11 extends Frame implements Runnable {",
+                "",
+                "\tImage smile,wince,offImage;",
+                "\tint count = 0,size,xO,yO,xB,yB,currentBox,result=0,colors[]=new int[4];",
+                "\tLong tempTime;",
+                "\tlong gameTime;",
+                "\tRandom random = new Random();",
+                "\tThread animationThread;",
+                "\tGraphics offGraphics=null;",
+                "\tboolean happyFace,threadOn=false;",
+                "",
+                "\tpublic Jumpbox11(String title, String[] args) {",
+                "\t\tsuper(title);",
+                "",
+                "\t\tif (args.length == 0){",
+                "\t\t\ttempTime = new Long(\"15\");",
+                "\t\t\tgameTime = 15;",
+                "\t\t}",
+                "\t\telse {",
+                "\t\t\ttry {",
+                "\t\t\t\ttempTime = new Long(args[0]);",
+                "\t\t\t\tgameTime = tempTime.longValue();",
+                "\t\t\t} catch (NumberFormatException ioe) {",
+                "\t\t\t\tSystem.out.println(\"ERROR: usage: Jumpbox <integer>\");",
+                "\t\t\t\tSystem.exit(0);",
+                "\t\t\t}",
+                "\t\t}",
+                "",
+                "\t\tgameTime = System.currentTimeMillis() + gameTime*1000;",
+                "",
+                "\t\tToolkit toolkit = Toolkit.getDefaultToolkit();",
+                "\t\tsmile = toolkit.getImage(\"smile.gif\");",
+                "\t\twince = toolkit.getImage(\"wince.gif\");",
+                "",
+                "\t\tsetColors();",
+                "\t\trandomBox();",
+                "\t\trandomCoord();",
+                "\t}",
+                "",
+                "",
+                "\tpublic void run(){",
+                "\t\tthreadOn=true;",
+                "\t\tcount++;",
+                "\t\tif (happyFace){",
+                "\t\t\trepaint();",
+                "\t\t\ttry{",
+                "\t\t\t\tanimationThread.sleep(500);",
+                "\t\t\t} catch (InterruptedException e) {}",
+                "\t\t\tresult++;",
+                "\t\t}",
+                "\t\telse{",
+                "\t\t\tfor(size =25;size>0;size--){",
+                "\t\t\t\trepaint();",
+                "\t\t\t\ttry {",
+                "\t\t\t\t\tanimationThread.sleep(40);",
+                "\t\t\t\t} catch (InterruptedException e) {",
+                "\t\t\t\t\tcontinue;",
+                "\t\t\t\t}",
+                "\t\t\t}",
+                "\t\t\tresult--;",
+                "\t\t}",
+                "\t\trandomCoord();",
+                "\t\trandomBox();",
+                "\t\tdrawLine(this.getGraphics(), xO, yO, xB, yB);",
+                "\t\ttry {",
+                "\t\t\tanimationThread.sleep(500);",
+                "\t\t} catch (InterruptedException e) {}",
+                "\t\tdeleteBox(this.getGraphics(), xO, yO);",
+                "\t\tdeleteLine(this.getGraphics(),xO,yO,xB,yB);",
+                "\t\tif (count >= 3) {",
+                "\t\t\tcount = 0;",
+                "\t\t\tsetColors();",
+                "\t\t\trepaint(0,0,200,50);",
+                "\t\t}",
+                "\t\tdrawBox(this.getGraphics(), xB, yB, colors[currentBox]);",
+                "\t\tthreadOn=false;",
+                "\t\trepaint();",
+                "\t\tanimationThread.yield();",
+                "\t}",
+                "",
+                "\tpublic void update(Graphics g) {",
+                "\t\tif (offGraphics == null) {",
+                "\t\t\toffImage = createImage(50,50);",
+                "\t\t\toffGraphics = offImage.getGraphics();",
+                "\t\t}",
+                "\t\tif (threadOn) {",
+                "\t\t\tif (happyFace) {",
+                "\t\t\t\tg.drawImage(smile,xB,yB,this);",
+                "\t\t\t} else {",
+                "\t\t\t\toffGraphics.setColor(Color.gray);",
+                "\t\t\t\toffGraphics.fillRect(0,0,50,50);",
+                "\t\t\t\toffGraphics.drawImage(wince,25-size,25-size,size*2,size*2, this);",
+                "\t\t\t\tg.drawImage(offImage,xB,yB,this);",
+                "\t\t\t}",
+                "\t\t} else {",
+                "\t\t\tpaint(g);",
+                "\t\t}",
+                "\t}",
+                "",
+                "\tpublic void paint(Graphics g) {",
+                "\t\tg.setColor(returnColor(colors[0]));",
+                "\t\tg.fillRect(0,0,50,50);",
+                "\t\tg.setColor(returnColor(colors[1]));",
+                "\t\tg.fillRect(50,0,50,50);",
+                "\t\tg.setColor(returnColor(colors[2]));",
+                "\t\tg.fillRect(100,0,50,50);",
+                "\t\tg.setColor(returnColor(colors[3]));",
+                "\t\tg.fillRect(150,0,50,50);",
+                "",
+                "\t\tg.setColor(Color.black);",
+                "\t\tg.drawString(\"L\", 24, 27);",
+                "\t\tg.drawString(\"R\", 74, 27);",
+                "\t\tg.drawString(\"O\", 124, 27);",
+                "\t\tg.drawString(\"U\", 174, 27);",
+                "",
+                "\t\tg.setColor(Color.white);",
+                "\t\tg.drawRect(0,50,498,349);",
+                "",
+                "\t\tdrawBox(g, xB, yB, colors[currentBox]);",
+                "\t}",
+                "",
+                "\tpublic boolean inB(int x, int y) {",
+                "\t\tif ((x >= xB) && (y >= yB) && (x <= xB+50) && (y <= yB+50))",
+                "\t\t\treturn true;",
+                "\t\telse",
+                "\t\t\treturn false;",
+                "\t}",
+                "",
+                "\tpublic boolean inIntim(int x, int y) {",
+                "\t\tif ((x >= xB-50) && (y >= yB-50) && (x <= xB+100) && (y <= yB+100))",
+                "\t\t\treturn true;",
+                "\t\telse",
+                "\t\t\treturn false;",
+                "\t}",
+                "",
+                "\tpublic boolean rightIntim(int box, int x, int y) {",
+                "\t\tswitch(box) {",
+                "\t\t\tcase 0: if ((x < xB) && ((y > yB) && (y < yB +50)))",
+                "\t\t\t\treturn true;",
+                "\t\t\t\tbreak;",
+                "\t\t\tcase 1: if ((x > xB + 50) && ((y > yB) && (y < yB +50)))",
+                "\t\t\t\treturn true;",
+                "\t\t\t\tbreak;",
+                "\t\t\tcase 2: if ((y < yB) && ((x > xB) && (x < xB +50)))",
+                "\t\t\t\treturn true;",
+                "\t\t\t\tbreak;",
+                "\t\t\tcase 3: if ((y > yB + 50) && ((x > xB) && (x < xB +50)))",
+                "\t\t\t\treturn true;",
+                "\t\t\t\tbreak;",
+                "\t\t}",
+                "\t\treturn false;",
+                "\t}",
+                "",
+                "\tprivate void randomCoord() {",
+                "\t\txO = xB;",
+                "\t\tyO = yB;",
+                "",
+                "\t\t// Schleife so dass der neue Box nicht entsteht zu nah zu den alten.",
+                "",
+                "\t\twhile(((-50<xB-xO)&&(xB-xO<100))&&((-50<yB-yO)&&(yB-yO<100))){",
+                "\t\t\txB=(int)(random.nextFloat() * 449)+1;",
+                "\t\t\tyB=(int)(random.nextFloat() * 299)+51;",
+                "\t\t}",
+                "\t}",
+                "",
+                "\tpublic void drawBox(Graphics g, int x, int y, int c) {",
+                "\t\tg.setColor(returnColor(c));",
+                "\t\tg.fillRect(x, y, 50, 50);",
+                "\t}",
+                "",
+                "\tpublic void deleteBox(Graphics g, int x, int y) {",
+                "\t\tg.setColor(Color.gray);",
+                "\t\tg.fillRect(x, y, 50, 50);",
+                "\t}",
+                "",
+                "\tprivate void randomBox(){",
+                "\t\tcurrentBox=((int)(random.nextFloat()*4));",
+                "\t}",
+                "",
+                "\tpublic void drawLine(Graphics g, int xO, int yO, int x, int y) {",
+                "\t\tg.setColor(Color.black);",
+                "\t\tg.drawLine(xO + 25, yO + 25, x + 25, y + 25);",
+                "\t}",
+                "",
+                "\tprivate void deleteLine(Graphics g, int xOld, int yOld, int x, int y) {",
+                "\t\tg.setColor(Color.gray);",
+                "\t\tg.drawLine(xOld + 25, yOld + 25, x + 25, y + 25);",
+                "\t}",
+                "",
+                "\tpublic boolean mouseDrag(Event e, int x, int y) {",
+                "\t\treturn mouseMove(e,x,y);",
+                "\t}",
+                "",
+                "\tpublic boolean mouseMove(Event evt, int x, int y) {",
+                "\t\tif (gameTime < System.currentTimeMillis()) {",
+                "\t\t\tSystem.out.println(\"Ihr Ergebnis: \" + result + \" Punkte in \" + tempTime.longValue() + \" Sekunden.\");",
+                "\t\t\tSystem.exit(0);",
+                "\t\t\treturn true;",
+                "\t\t}",
+                "\t\tif (!threadOn){",
+                "\t\t\tif (inB(x,y)) {",
+                "\t\t\t\thappyFace=true;",
+                "\t\t\t\tanimationThread=new Thread(this);",
+                "\t\t\t\tanimationThread.start();",
+                "\t\t\t}",
+                "\t\t\telse if ((inIntim(x,y)) && !(rightIntim(currentBox,x,y))) {",
+                "\t\t\t\thappyFace=false;",
+                "\t\t\t\tanimationThread=new Thread(this);",
+                "\t\t\t\tanimationThread.start();",
+                "\t\t\t}",
+                "\t\t}",
+                "\t\treturn true;",
+                "\t}",
+                "",
+                "\tpublic boolean handleEvent(Event e) {",
+                "\t\tswitch (e.id) {",
+                "\t\t\tcase Event.WINDOW_DESTROY:",
+                "\t\t\tSystem.exit(0);",
+                "\t\t\tbreak;",
+                "\t\t}",
+                "\t\treturn super.handleEvent(e);",
+                "\t}",
+                "",
+                "\tprivate Color returnColor(int i) {",
+                "\t\tswitch(i) {",
+                "\t\t\tcase 1: return Color.blue;",
+                "\t\t\tcase 2: return Color.cyan;",
+                "\t\t\tcase 3: return Color.green;",
+                "\t\t\tcase 4: return Color.magenta;",
+                "\t\t\tcase 5: return Color.orange;",
+                "\t\t\tcase 6: return Color.pink;",
+                "\t\t\tcase 7: return Color.red;",
+                "\t\t\tcase 8: return Color.yellow;",
+                "\t\t}",
+                "\t\treturn Color.white;",
+                "\t}",
+                "",
+                "\tprivate void setColors() {",
+                "\t\tfor(int i=0;i<4;i++){",
+                "\t\t\tcolors[i]=(int)(random.nextFloat()*8);",
+                "\t\t\tfor(int j=0;j<i;j++){",
+                "\t\t\t\tif (colors[j]==colors[i]){",
+                "\t\t\t\t\ti--;",
+                "\t\t\t\t\tbreak;",
+                "\t\t\t\t}",
+                "\t\t\t}",
+                "\t\t}",
+                "\t}",
+                "",
+                "\tstatic public void main(String[] args) {",
+                "\t\tFrame f = new Jumpbox11(\"java Jumpbox von Xxxxxx Xxxxxx #943151\", args);",
+                "\t\tf.setBackground(Color.gray);",
+                "\t\tf.resize(508,428);",
+                "\t\tf.show();",
+                "\t}",
+                "}"
+            ]
+        },
+        {
+            "file_name": "Jumpbox21.java",
+            "lines": [
+                "package submission.sub1;",
+                "",
+                "import submission.sub2.Jumpbox12;",
+                "",
+                "import java.applet.*;",
+                "import java.awt.*;",
+                "import java.util.*;",
+                "",
+                "public class Jumpbox21 extends Applet implements Runnable {",
+                "",
+                "\tstatic Applet applet;     // applet to be created in main()",
+                "\tstatic boolean firstUpdateDone = false;",
+                "",
+                "    /*",
+                "     Main Application",
+                "     everything starts here",
+                "     */",
+                "",
+                "\tpublic static void main(String args[]) {",
+                "\t\tif (args.length==1) {",
+                "\t\t\ttry {",
+                "\t\t\t\tStopTime = (Long.valueOf(args[0])).longValue();",
+                "\t\t\t\tStopTime *= 1000;",
+                "\t\t\t} catch (NumberFormatException nfe) {",
+                "\t\t\t\tSystem.out.println(\"Illegal parameter\");",
+                "\t\t\t\tSystem.out.println(\"Usage: Jumpbox [secs]\");",
+                "\t\t\t\tSystem.out.println(\"using standard: 15 secs\");",
+                "\t\t\t\tStopTime = 15000;",
+                "\t\t\t}",
+                "\t\t} else StopTime = 15000;",
+                "\t\tFrame frame=new Frame(\"Xxxxx Xxxxxxx #861130\");",
+                "\t\tapplet=new Jumpbox21();",
+                "\t\tapplet.init();",
+                "\t\tframe.add(\"Center\",applet);",
+                "\t\tframe.resize(applet.size());",
+                "\t\t// frame.setResizable(false);",
+                "\t\tframe.show();",
+                "\t\tapplet.start();",
+                "\t}",
+                "",
+                "    /*",
+                "     function of Applet",
+                "     */",
+                "",
+                "\tstatic Image vI=null;",
+                "\tstatic Graphics vG;",
+                "",
+                "\tstatic Thread animThread;",
+                "\tstatic Image grinsAnim[] = new Image[1];",
+                "\tstatic Image grummAnim[] = new Image[25];",
+                "",
+                "\tPoint B_Box = new Point(0,0);       // Box B            +[ 50, 50]",
+                "\tPoint R_Box = new Point(0,0);       // Richtungs Box R  +[ 50, 50]",
+                "\tPoint I_Box = new Point(0,0);       // Intim Box I      +[150,150]",
+                "",
+                "\tstatic long StrtTime;",
+                "\tstatic long CurrTime;",
+                "\tstatic long StopTime;",
+                "",
+                "\tstatic boolean is_mouse_event;",
+                "\tstatic Point M_Point = new Point(0,0);",
+                "",
+                "\tstatic Color otherColorList[] = { Color.blue,Color.cyan,Color.green,Color.magenta,Color.orange,Color.pink,Color.red,Color.yellow };",
+                "\tstatic Color RBoxColors[] = new Color[4];",
+                "\tstatic boolean isColorUsed[] = new boolean[8];",
+                "",
+                "\tstatic Random RND=new Random(System.currentTimeMillis());",
+                "",
+                "\tstatic int Points=0;",
+                "",
+                "\tstatic int R_Direction;",
+                "",
+                "\tstatic boolean anim_ended = false;",
+                "\tstatic Point anim_pos = new Point(0,0);",
+                "\tstatic Image anim_images[] = new Image[25];    // all should fit",
+                "\tstatic int   anim_frames = 0;",
+                "\tstatic long  anim_time;",
+                "",
+                "\tpublic void update(Graphics g) {",
+                "\t\tif (!firstUpdateDone) {",
+                "\t\t\tvI=createImage(500,400);",
+                "\t\t\tvG=vI.getGraphics();",
+                "\t\t\tvG.setColor(Color.gray);",
+                "\t\t\tvG.fillRect(0,0,500-1,400-1);",
+                "\t\t\tvG.setColor(Color.white);",
+                "\t\t\tvG.drawRect(0,50,500-1,400-50-1);",
+                "\t\t\tfirstUpdateDone=true;",
+                "\t\t}",
+                "\t\tg.drawImage(vI,0,0,this);",
+                "\t}",
+                "",
+                "\tpublic void paint(Graphics g) {",
+                "\t\tupdate(g);",
+                "\t}",
+                "",
+                "",
+                "\tpublic void init() {",
+                "\t\tMediaTracker othertracker=new MediaTracker(this);",
+                "\t\tgrinsAnim[0] = Toolkit.getDefaultToolkit().getImage(\"smile.gif\");",
+                "\t\tothertracker.addImage(grinsAnim[0],0);",
+                "\t\tfor(int i=0; i<25; i++) {",
+                "\t\t\tgrummAnim[i]=Toolkit.getDefaultToolkit().getImage(\"grumm\"+i+\".gif\");",
+                "\t\t\tothertracker.addImage(grummAnim[i],0);",
+                "\t\t}",
+                "\t\ttry {",
+                "\t\t\tothertracker.waitForID(0);       // wait till all files are loaded",
+                "\t\t} catch (InterruptedException e) { }",
+                "\t\tanimThread = new Thread(this);",
+                "\t\tresize(550,450);",
+                "\t}",
+                "",
+                "\tpublic void start() {",
+                "\t\tboolean perform_sprung = false;",
+                "\t\tint loop_no;",
+                "",
+                "\t\t// wait till we are ready to go",
+                "\t\twhile (!firstUpdateDone) {",
+                "\t\t\ttry {",
+                "\t\t\t\tThread.sleep(200);",
+                "\t\t\t} catch (InterruptedException ie) { }",
+                "\t\t}",
+                "\t\t// start Animation Thread, which will wait for notify",
+                "\t\tanimThread.start();",
+                "",
+                "\t\tStrtTime = System.currentTimeMillis();",
+                "\t\tStopTime += StrtTime;",
+                "",
+                "\t\tloop_no =0;",
+                "\t\tNew_Box_B();",
+                "",
+                "\t\tdo {",
+                "\t\t\tif (loop_no%3 == 0)",
+                "\t\t\t\tNew_R_Colors();",
+                "",
+                "\t\t\tvG.setColor(Color.gray);",
+                "\t\t\tvG.fillRect(0,50,500-1,400-1);",
+                "\t\t\tvG.setColor(Color.white);",
+                "\t\t\tvG.drawRect(0,50,500-1,400-50-1);",
+                "",
+                "\t\t\tvG.setColor(RBoxColors[R_Direction]);",
+                "\t\t\tvG.fillRect(B_Box.x,B_Box.y,50-1,50-1);",
+                "",
+                "\t\t\trepaint();",
+                "",
+                "\t\t\twhile (true) {",
+                "\t\t\t\tsynchronized (this) {",
+                "\t\t\t\t\ttry {",
+                "\t\t\t\t\t\twait();",
+                "\t\t\t\t\t} catch (InterruptedException ie) { }",
+                "\t\t\t\t}",
+                "\t\t\t\tif (is_mouse_event) {",
+                "\t\t\t\t\tif        ( isInBox(M_Point, B_Box, 50) ) {",
+                "\t\t\t\t\t\tstartAnim( B_Box.x, B_Box.y, grinsAnim, 1, 500);",
+                "\t\t\t\t\t\tsynchronized (this) {",
+                "\t\t\t\t\t\t\ttry {",
+                "\t\t\t\t\t\t\t\tThread.sleep( 500 );",
+                "\t\t\t\t\t\t\t} catch (InterruptedException ie) { }",
+                "\t\t\t\t\t\t}",
+                "\t\t\t\t\t\tperform_sprung = true;",
+                "\t\t\t\t\t\tPoints++;",
+                "\t\t\t\t\t\tloop_no++;",
+                "\t\t\t\t\t} else if ( isInBox(M_Point, R_Box, 50) ) {",
+                "\t\t\t\t\t} else if ( isInBox(M_Point, I_Box, 150) ) {",
+                "\t\t\t\t\t\tstartAnim( B_Box.x, B_Box.y, grummAnim, 25, 1000);",
+                "\t\t\t\t\t\tsynchronized (this) {",
+                "\t\t\t\t\t\t\ttry {",
+                "\t\t\t\t\t\t\t\tThread.sleep( 500 );",
+                "\t\t\t\t\t\t\t} catch (InterruptedException ie) { }",
+                "\t\t\t\t\t\t}",
+                "\t\t\t\t\t\tperform_sprung = true;",
+                "\t\t\t\t\t\tPoints--;",
+                "\t\t\t\t\t}",
+                "\t\t\t\t\tis_mouse_event = false;",
+                "\t\t\t\t}",
+                "\t\t\t\tif (perform_sprung) {",
+                "\t\t\t\t\twhile (!anim_ended) {",
+                "\t\t\t\t\t\tsynchronized (this) {",
+                "\t\t\t\t\t\t\ttry {",
+                "\t\t\t\t\t\t\t\tThread.sleep( 10 );",
+                "\t\t\t\t\t\t\t} catch (InterruptedException ie) { }",
+                "\t\t\t\t\t\t}",
+                "\t\t\t\t\t}",
+                "\t\t\t\t\tint oldx = B_Box.x;",
+                "\t\t\t\t\tint oldy = B_Box.y;",
+                "\t\t\t\t\tNew_Box_B();",
+                "\t\t\t\t\tvG.setColor( Color.black );",
+                "\t\t\t\t\tvG.drawLine( oldx, oldy, B_Box.x, B_Box.y );",
+                "\t\t\t\t\trepaint();",
+                "\t\t\t\t\tsynchronized (this) {",
+                "\t\t\t\t\t\ttry {",
+                "\t\t\t\t\t\t\tThread.sleep( 500 );",
+                "\t\t\t\t\t\t} catch (InterruptedException ie) { }",
+                "\t\t\t\t\t}",
+                "\t\t\t\t\tperform_sprung = false;",
+                "\t\t\t\t\tbreak;",
+                "\t\t\t\t}",
+                "\t\t\t}",
+                "\t\t\tloop_no++;",
+                "\t\t} while (System.currentTimeMillis() < StopTime);",
+                "\t\tCurrTime = System.currentTimeMillis();",
+                "\t\tCurrTime = ( CurrTime - StrtTime ) / 1000;",
+                "\t\tSystem.out.println(\"Ergebnis: \"+Points+\" in \"+CurrTime+\" Sekunden\");",
+                "\t\tSystem.exit(0);",
+                "\t}",
+                "",
+                "\tboolean isInBox( Point M, Point B, int len ) {",
+                "\t\tif ( (M.x>=B.x) && (M.x<B.x+len) && (M.y>=B.y) && (M.y<B.y+len) )",
+                "\t\t\treturn true;",
+                "\t\telse",
+                "\t\t\treturn false;",
+                "\t}",
+                "",
+                "\tpublic void New_Box_B() {",
+                "\t\t// I supposed, that new IntimBox should fit also in (0,0)-(500,400)",
+                "",
+                "\t\tI_Box.move( Math.abs(RND.nextInt())%350, 50+Math.abs(RND.nextInt())%200 );",
+                "\t\tB_Box.move( 50+I_Box.x, 50+I_Box.y );",
+                "",
+                "\t\tR_Direction=Math.abs(RND.nextInt()) % 4;",
+                "\t\tswitch (R_Direction) {",
+                "\t\t\tcase 0:  R_Box.move( B_Box.x-50, B_Box.y );  break;  // \"L\"",
+                "\t\t\tcase 1:  R_Box.move( B_Box.x+50, B_Box.y );  break;  // \"R\"",
+                "\t\t\tcase 2:  R_Box.move( B_Box.x, B_Box.y-50 );  break;  // \"O\"",
+                "\t\t\tcase 3:  R_Box.move( B_Box.x, B_Box.y+50 );  break;  // \"U\"",
+                "\t\t\tdefault:",
+                "\t\t}",
+                "\t\t}",
+                "",
+                "\tpublic void New_R_Colors() {",
+                "\t\tint i,idx;",
+                "\t\tfor(i=0; i<otherColorList.length; i++)",
+                "\t\t\tisColorUsed[i]=false;",
+                "\t\tfor(i=0; i<4; i++) {",
+                "\t\t\tdo {",
+                "\t\t\t\tidx = Math.abs(RND.nextInt()) % otherColorList.length;",
+                "\t\t\t} while (isColorUsed[idx]);",
+                "\t\t\tisColorUsed[idx]=true;",
+                "\t\t\tRBoxColors[i]=otherColorList[idx];",
+                "\t\t\tvG.setColor(otherColorList[idx]);",
+                "\t\t\tvG.fillRect(i*50,0,50-1,50-1);",
+                "\t\t}",
+                "\t\tvG.setColor(Color.black);",
+                "\t\tvG.drawString(\"L\",25+  0,25);",
+                "\t\tvG.drawString(\"R\",25+ 50,25);",
+                "\t\tvG.drawString(\"O\",25+100,25);",
+                "\t\tvG.drawString(\"U\",25+150,25);",
+                "\t}",
+                "",
+                "\tpublic boolean mouseDrag(Event evt,int x,int y) {",
+                "\t\tsynchronized(applet) {",
+                "\t\t\tif (!is_mouse_event) {",
+                "\t\t\t\tM_Point.move(x,y);",
+                "\t\t\t\tis_mouse_event = true;",
+                "\t\t\t}",
+                "\t\t\tapplet.notify();",
+                "\t\t}",
+                "\t\treturn true;",
+                "\t}",
+                "",
+                "\tpublic boolean mouseMove(Event evt,int x,int y) {",
+                "\t\t// two time the same code, but we want to be fast here",
+                "\t\tsynchronized(applet) {",
+                "\t\t\tif (!is_mouse_event) {",
+                "\t\t\t\tM_Point.move(x,y);",
+                "\t\t\t\tis_mouse_event = true;",
+                "\t\t\t}",
+                "\t\t\tapplet.notify();",
+                "\t\t}",
+                "\t\treturn true;",
+                "\t}",
+                "",
+                "",
+                "\tprotected void startAnim(int XPos,int YPos,Image Animation[], int aframes, long time) {",
+                "\t\tanim_pos.move( XPos, YPos );",
+                "\t\tanim_frames = Animation.length;",
+                "\t\tanim_time   = time;",
+                "\t\tanim_frames = aframes;",
+                "\t\tanim_ended = false;",
+                "\t\tfor (int i=0; i<anim_frames; i++)",
+                "\t\t\tanim_images[i] = Animation[i];",
+                "\t\tsynchronized (animThread) {",
+                "\t\t\tanimThread.notify();",
+                "\t\t}",
+                "\t}",
+                "",
+                "    /*",
+                "     Animation Thread",
+                "    */",
+                "",
+                "\tpublic void run() {",
+                "\t\tlong AnimStartTime;",
+                "\t\tlong AnimFrameTime;",
+                "\t\tlong AnimDelayTime;",
+                "",
+                "\t\twhile (true) {",
+                "\t\t\ttry {",
+                "\t\t\t\tsynchronized(this) {",
+                "\t\t\t\t\twait();",
+                "\t\t\t\t}",
+                "\t\t\t} catch (InterruptedException ie) { }",
+                "\t\t\tif (anim_frames != 0) {",
+                "\t\t\t\t// start() seems to automatically call notify()",
+                "\t\t\t\t// so we check anim_frames != 0",
+                "\t\t\t\tAnimFrameTime = anim_time / anim_frames;",
+                "\t\t\t\tfor (int i=0; i<anim_frames; i++) {",
+                "\t\t\t\t\tAnimStartTime = System.currentTimeMillis();",
+                "\t\t\t\t\tvG.setColor(Color.gray);",
+                "\t\t\t\t\tvG.fillRect(anim_pos.x,anim_pos.y,50,50);",
+                "\t\t\t\t\tvG.drawImage(anim_images[i],anim_pos.x+i,anim_pos.y+i,this);",
+                "\t\t\t\t\trepaint();",
+                "\t\t\t\t\tAnimDelayTime = System.currentTimeMillis() - AnimStartTime;",
+                "\t\t\t\t\ttry {",
+                "\t\t\t\t\t\tThread.sleep( Math.max(0, AnimFrameTime-AnimDelayTime));",
+                "\t\t\t\t\t} catch (InterruptedException ie) { }",
+                "\t\t\t\t}",
+                "\t\t\t\tanim_frames = 0;",
+                "\t\t\t\tanim_ended = true;  // we want the applet to that we've finished",
+                "\t\t\t}",
+                "\t\t}",
+                "\t}",
+                "",
+                "}",
+                ""
+            ]
+        }
+    ],
+    "matches": [
+        {
+            "first_file_name": "Jumpbox12.java",
+            "second_file_name": "Jumpbox11.java",
+            "start_in_first": 100,
+            "end_in_first": 158,
+            "start_in_second": 94,
+            "end_in_second": 160
+        },
+        {
+            "first_file_name": "Jumpbox12.java",
+            "second_file_name": "Jumpbox11.java",
+            "start_in_first": 24,
+            "end_in_first": 46,
+            "start_in_second": 22,
+            "end_in_second": 46
+        },
+        {
+            "first_file_name": "Jumpbox12.java",
+            "second_file_name": "Jumpbox11.java",
+            "start_in_first": 225,
+            "end_in_first": 246,
+            "start_in_second": 221,
+            "end_in_second": 242
+        },
+        {
+            "first_file_name": "Jumpbox12.java",
+            "second_file_name": "Jumpbox11.java",
+            "start_in_first": 192,
+            "end_in_first": 207,
+            "start_in_second": 191,
+            "end_in_second": 206
+        },
+        {
+            "first_file_name": "Jumpbox12.java",
+            "second_file_name": "Jumpbox11.java",
+            "start_in_first": 161,
+            "end_in_first": 177,
+            "start_in_second": 164,
+            "end_in_second": 180
+        },
+        {
+            "first_file_name": "Jumpbox22.java",
+            "second_file_name": "Jumpbox21.java",
+            "start_in_first": 36,
+            "end_in_first": 46,
+            "start_in_second": 98,
+            "end_in_second": 107
+        },
+        {
+            "first_file_name": "Jumpbox22.java",
+            "second_file_name": "Jumpbox21.java",
+            "start_in_first": 217,
+            "end_in_first": 230,
+            "start_in_second": 79,
+            "end_in_second": 92
+        },
+        {
+            "first_file_name": "Jumpbox12.java",
+            "second_file_name": "Jumpbox11.java",
+            "start_in_first": 179,
+            "end_in_first": 187,
+            "start_in_second": 182,
+            "end_in_second": 190
+        },
+        {
+            "first_file_name": "Jumpbox12.java",
+            "second_file_name": "Jumpbox11.java",
+            "start_in_first": 76,
+            "end_in_first": 84,
+            "start_in_second": 65,
+            "end_in_second": 73
+        },
+        {
+            "first_file_name": "Jumpbox12.java",
+            "second_file_name": "Jumpbox11.java",
+            "start_in_first": 9,
+            "end_in_first": 15,
+            "start_in_second": 7,
+            "end_in_second": 11
+        },
+        {
+            "first_file_name": "Jumpbox22.java",
+            "second_file_name": "Jumpbox21.java",
+            "start_in_first": 18,
+            "end_in_first": 25,
+            "start_in_second": 63,
+            "end_in_second": 74
+        },
+        {
+            "first_file_name": "Jumpbox22.java",
+            "second_file_name": "Jumpbox21.java",
+            "start_in_first": 187,
+            "end_in_first": 193,
+            "start_in_second": 295,
+            "end_in_second": 300
+        },
+        {
+            "first_file_name": "Jumpbox22.java",
+            "second_file_name": "Jumpbox21.java",
+            "start_in_first": 97,
+            "end_in_first": 109,
+            "start_in_second": 237,
+            "end_in_second": 249
+        },
+        {
+            "first_file_name": "Jumpbox22.java",
+            "second_file_name": "Jumpbox21.java",
+            "start_in_first": 89,
+            "end_in_first": 95,
+            "start_in_second": 227,
+            "end_in_second": 233
+        },
+        {
+            "first_file_name": "Jumpbox12.java",
+            "second_file_name": "Jumpbox11.java",
+            "start_in_first": 264,
+            "end_in_first": 272,
+            "start_in_second": 252,
+            "end_in_second": 260
+        },
+        {
+            "first_file_name": "Jumpbox12.java",
+            "second_file_name": "Jumpbox11.java",
+            "start_in_first": 212,
+            "end_in_first": 219,
+            "start_in_second": 213,
+            "end_in_second": 220
+        },
+        {
+            "first_file_name": "Jumpbox12.java",
+            "second_file_name": "Jumpbox11.java",
+            "start_in_first": 58,
+            "end_in_first": 65,
+            "start_in_second": 49,
+            "end_in_second": 55
+        },
+        {
+            "first_file_name": "Jumpbox12.java",
+            "second_file_name": "Jumpbox11.java",
+            "start_in_first": 85,
+            "end_in_first": 92,
+            "start_in_second": 79,
+            "end_in_second": 86
+        },
+        {
+            "first_file_name": "Jumpbox12.java",
+            "second_file_name": "Jumpbox21.java",
+            "start_in_first": 70,
+            "end_in_first": 74,
+            "start_in_second": 118,
+            "end_in_second": 121
+        },
+        {
+            "first_file_name": "Jumpbox12.java",
+            "second_file_name": "Jumpbox11.java",
+            "start_in_first": 16,
+            "end_in_first": 22,
+            "start_in_second": 13,
+            "end_in_second": 20
+        },
+        {
+            "first_file_name": "Jumpbox22.java",
+            "second_file_name": "Jumpbox21.java",
+            "start_in_first": 248,
+            "end_in_first": 251,
+            "start_in_second": 166,
+            "end_in_second": 168
+        },
+        {
+            "first_file_name": "Jumpbox22.java",
+            "second_file_name": "Jumpbox21.java",
+            "start_in_first": 202,
+            "end_in_first": 205,
+            "start_in_second": 155,
+            "end_in_second": 157
+        },
+        {
+            "first_file_name": "Jumpbox22.java",
+            "second_file_name": "Jumpbox21.java",
+            "start_in_first": 181,
+            "end_in_first": 186,
+            "start_in_second": 281,
+            "end_in_second": 290
+        },
+        {
+            "first_file_name": "Jumpbox22.java",
+            "second_file_name": "Jumpbox21.java",
+            "start_in_first": 140,
+            "end_in_first": 143,
+            "start_in_second": 147,
+            "end_in_second": 149
+        }
+    ]
+}

report-viewer/src/router/index.ts

@@ -5,18 +5,18 @@ import ComparisonView from "@/views/ComparisonView.vue"
 
 const routes: Array<RouteRecordRaw> = [
   {
-    path: "/",
+    path: "/f",
     name: "FileUpload",
     component: FileUpload
   },
   {
-    path: "/overview",
+    path: "/",
     name: "Overview",
     component: Overview,
-    props: route => ({ jsonString : route.params.str })
+    //props: route => ({ jsonString : route.params.str })
   },
   {
-    path: "/c",
+    path: "/comparison",
     name: "ComparisonView",
     component: ComparisonView,
     props: route => ({ jsonString : route.params.str})

report-viewer/src/views/ComparisonView.vue

@@ -3,7 +3,7 @@
   <div id="leftPanel" v-bind:class="{hidden : hideLeftPanel}">
     <div class="logo-section">
       <img id="logo" src="@/assets/logo.png" alt="JPlag">
-      <button id="hide-button" @click="togglePanel"><img src="@/assets/double_arrow_white_24dp.svg" alt="hide"></button>
+      <button id="hide-button" @click="togglePanel" title="Hide sidebar"><img src="@/assets/double_arrow_white_24dp.svg" alt="hide"></button>
     </div>
     <TextInformation :has-additional-info="false" value="Matches Report" label=""/>
     <TextInformation label="First Submission:" :value="json.first_submission_id" :has-additional-info="false"/>
@@ -16,7 +16,7 @@
                 @match-selected="selectMatch"/>
   </div>
   <div id="rightPanel" v-bind:class="{extended : hideLeftPanel}">
-    <button id="show-button" v-bind:class="{hidden : !hideLeftPanel}" @click="togglePanel"><img src="@/assets/double_arrow_white_24dp.svg" alt="hide"></button>
+    <button id="show-button" v-bind:class="{hidden : !hideLeftPanel}" @click="togglePanel" title="Show sidebar"><img src="@/assets/double_arrow_white_24dp.svg" alt="hide"></button>
     <CodePanel id="codePanel1" :lines="filesOfFirst[selectedFileOfFirst]" :coloring="coloringFirst" panel-id="1"/>
     <CodePanel :lines="filesOfSecond[selectedFileOfSecond]"  :coloring="coloringSecond" panel-id="2"/>
   </div>
@@ -39,7 +39,10 @@ export default defineComponent({
     }
   },
   setup(props) {
+    console.log(props.jsonString)
     const json = JSON.parse(props.jsonString)
+    //const json = import(`../files/${props.jsonString}.json`)
+    console.log(json)
 
     const filesOfFirst = convertToFilesByName(json.files_of_first_submission)
     const filesOfSecond = convertToFilesByName(json.files_of_second_submission)

report-viewer/src/views/ComparisonViewV2.vue

@@ -1,117 +0,0 @@
-<template>
-  <div class="container">
-    <div class="left-drawers">
-      <div id="basicInfo" class="drawer">
-        <p class="drawer-title">Basic Info</p>
-      </div>
-      <div id="matches" class="drawer">
-        <p class="drawer-title">Matches</p>
-      </div>
-    </div>
-    <CodePanel :lines="filesOfFirst[selectedFileOfFirst]" :not-blurred="[]" panel-id="1"/>
-    <CodePanel :lines="filesOfSecond[selectedFileOfSecond]" :not-blurred="[]" panel-id="2"/>
-  </div>
-</template>
-
-<script>
-import {defineComponent, ref} from "vue";
-import CodePanel from "../components/CodePanel";
-import {convertToFilesByName} from "@/utils/Utils";
-
-export default defineComponent({
-  name: "ComparisonViewV2",
-  components: { CodePanel },
-  props: {
-    jsonString: {
-      type: String
-    }
-  },
-  setup(props) {
-    const json = JSON.parse(props.jsonString)
-    const selectedFileOfFirst = ref("Jumpbox12.java")
-    const selectedFileOfSecond = ref("Jumpbox21.java")
-
-    const filesOfFirst = convertToFilesByName(json.files_of_first_submission)
-    const filesOfSecond = convertToFilesByName(json.files_of_second_submission)
-
-    const generateColour = () => {
-      let color = "#";
-      for (let i = 0; i < 3; i++)
-        color += ("0" + Math.floor(((1 + Math.random()) * Math.pow(16, 2)) / 2).toString(16)).slice(-2);
-      return color;
-    }
-
-    const groupedMatches = ref(json.matches.reduce( (acc, val) => {
-          let name = val.first_file_name
-          let subname = val.second_file_name
-          if(!acc[name]) {
-            acc[name] = {}
-          }
-          if(!acc[name][subname]) {
-            acc[name][subname] = []
-          }
-          let newVal = {...val, color: generateColour()}
-          acc[name][subname].push(newVal)
-          return acc;
-        }, {})
-    )
-
-    return {
-      selectedFileOfFirst,
-      selectedFileOfSecond,
-      filesOfFirst,
-      filesOfSecond
-    }
-  }
-})
-</script>
-
-<style scoped>
-.container {
-  display: flex;
-  flex-wrap: nowrap;
-  align-items: stretch;
-  background: #ECECEC;
-  height: 100%;
-}
-
-.left-drawers {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap;
-  align-items: stretch;
-  height: 100%;
-}
-
-.drawer {
-  display: flex;
-  flex-wrap: nowrap;
-  border-top-right-radius: 10px;
-  border-bottom-right-radius: 10px;
-  padding-right: 5%;
-}
-
-.drawer-title {
-  writing-mode: vertical-lr;
-  text-align: center;
-  color: white;
-  padding: 0;
-  margin: 0;
-}
-
-#matches {
-  background: #777777;
-  height: 50%;
-}
-
-#basicInfo {
-  background: #FF5353;
-  height: 50%;
-}
-
-#basicInfo:hover {
-  position: absolute;
-  left: 0;
-  z-index: 1000;
-}
-</style>

report-viewer/src/views/FileUpload.vue

@@ -21,7 +21,7 @@ export default defineComponent({
 
     const navigateToOverview = (file) => {
       router.push({
-          name: "Overview",
+          name: "OverviewV2",
           params: {str: file},
       }
       )

report-viewer/src/views/Overview.vue

@@ -11,71 +11,84 @@
       <TextInformation label="Duration (in ms): " :value="json.execution_time" :has-additional-info="false"/>
     </div>
     <div id="rightPanel">
-      <div id="metricsButtons" class="section">
-        <p class="section-title">Metrics: </p>
-        <ul class="metrics-list" v-for="(metric, i) in json.metrics" :key="metric.name">
-          <li><MetricButton :id="metric.name"
-                            :metric-threshold="metric.threshold"
-                            :metric-name="metric.name"
-                            :is-selected="selectedMetric[i]"
-                            @click="selectMetric(i)"/></li>
-        </ul>
+      <div class="right-panel-section">
+        <div id="metrics">
+          <p class="section-title">Select Metric:</p>
+          <div id="metrics-list">
+            <MetricButton v-for="(metric, i) in json.metrics" :key="metric.name"
+                          :id="metric.name"
+                          :metric-threshold="metric.threshold"
+                          :metric-name="metric.name"
+                          :is-selected="selectedMetric[i]"
+                          @click="selectMetric(i)"/>
+          </div>
+        </div>
+        <div id="diagram">
+          <p class="section-title">Distribution:</p>
+          <DistributionDiagram :distribution="distributions[selectedMetricIndex]"/>
+        </div>
       </div>
-      <div id="distribution" class="section">
-        <p class="section-title ">Distribution:</p>
-        <DistributionDiagram :distribution="distributions[selectedMetricIndex]"/>
-      </div>
-      <div id="topComparisonsList" class="section">
-        <p class="section-title">Top comparisons:</p>
-        <p class="section-subtitle">(Top 25)</p>
-        <ComparisonsLists :comparisons="topComps[selectedMetricIndex]"/>
+      <div id="topComparisons" class="right-panel-section">
+        <p class="section-title">Top Comparisons:</p>
+        <p class="section-subtitle">(Top n comparisons)</p>
+        <ComparisonListElement v-for="(comparison, index) in topComps[selectedMetricIndex]"
+                               :key = "comparison.first_submission
+                                        + comparison.second_submission
+                                        + comparison.match_percentage"
+                               :index="index + 1"
+                               :submission1="comparison.first_submission"
+                               :submission2="comparison.second_submission"
+                               :match-percentage="comparison.match_percentage"
+        />
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import {defineComponent, ref, watchEffect} from "vue";
-import TextInformation from "@/components/TextInformation";
-import MetricButton from "@/components/MetricButton";
+import {defineComponent, ref} from "vue";
+import TextInformation from "../components/TextInformation";
 import DistributionDiagram from "@/components/DistributionDiagram";
-import ComparisonsLists from "@/components/ComparisonsLists";
+import MetricButton from "@/components/MetricButton";
+import ComparisonListElement from "@/components/ComparisonListElement";
+import Overview from "../files/overview.json"
 
 export default defineComponent({
-  name: "Overview",
-  components: {ComparisonsLists, DistributionDiagram, MetricButton, TextInformation},
+  name: "OverviewV2",
+  components: {ComparisonListElement, DistributionDiagram, MetricButton, TextInformation },
   props: {
     jsonString: {
       type: String,
-
     }
   },
   setup(props) {
-    const json = JSON.parse(props.jsonString)
+    const json = Overview
+
+    //Metrics
     let selectedMetric = ref(json.metrics.map( () => false ))
-    let distributions = ref(json.metrics.map( (m) =>  m.distribution ))
-    let topComps = ref(json.metrics.map((m) => m.topComparisons))
-    console.log(JSON.stringify(topComps.value))
-    let selectedMetricIndex = ref(0)
     selectedMetric.value[0] = true;
 
+    let selectedMetricIndex = ref(0)
+
     const selectMetric = (metric) => {
       selectedMetric.value = selectedMetric.value.map( () => { return false })
       selectedMetric.value[metric] = true
       selectedMetricIndex.value = metric
     }
 
-    watchEffect( () => {
-      console.log("Overview - selected dist " + JSON.stringify(distributions.value[selectedMetricIndex.value]))
-      console.log("Overview - selected topComp " + JSON.stringify(topComps.value[selectedMetricIndex.value]))
-    })
+    //Distribution
+    let distributions = ref(json.metrics.map( (m) =>  m.distribution ))
+
+    //Top Comparisons
+    let topComps = ref(json.metrics.map((m) => m.topComparisons))
 
     return {
       json,
-      selectedMetric,
       selectedMetricIndex,
+      selectedMetric,
       distributions,
       topComps,
+
       selectMetric
     }
   }
@@ -83,27 +96,31 @@ export default defineComponent({
 </script>
 
 <style scoped>
-.section {
-  display: flex;
-  flex-direction: column;
-  margin: 0;
-  padding: 0;
-}
-
 .container {
   display: flex;
   align-items: stretch;
   width: 100%;
   height: 100%;
   margin: 0;
+  overflow: auto;
+}
+
+.right-panel-section {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  width: 50%;
+  padding-left: 1%;
+  padding-top: 1%;
+  padding-bottom: 1%;
 }
 
 .section-title {
   font-size: x-large;
   font-weight: bold;
   text-align: start;
-  margin-top: 3%;
-  margin-bottom: 1%;
+  margin: 0;
+  padding: 0;
 }
 
 .section-subtitle {
@@ -134,32 +151,31 @@ export default defineComponent({
   width: 70%;
   background: #ECECEC;
   display: flex;
-  flex-direction: column;
   flex-wrap: nowrap;
-  padding: 1%;
+  padding: 0;
 }
 
-#metricsButtons {
-  flex-direction: row;
-  flex-shrink: 3;
-  align-items: flex-start;
+#metrics {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 3%;
 }
 
-#metricsButtons > * {
-  margin-right: 1%;
+#metrics-list {
+  display: flex;
 }
 
-#distribution {
-  flex-shrink: 2;
-  align-items: stretch;
+#diagram {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  height: 100%;
 }
 
-#topComparisonsList {
-  min-height: 0;
-  align-items: stretch;
+#topComparisons {
+  padding-right: 1%;
 }
 
-
 #logo {
   width: 40%;
   height: 20%;
@@ -167,6 +183,4 @@ export default defineComponent({
 }
 
 
-
-
 </style>