Bump highlight.js from 9.18.1 to 9.18.5

package.json

@@ -5,15 +5,23 @@
     "serve": "vue-cli-service serve"
   },
   "dependencies": {
-    "axios": "^0.19.2",
+    "@asigloo/vue-dynamic-forms": "^3.14.0",
+    "axios": "^0.21.1",
     "bootstrap": "^4.5.0",
     "bootstrap-vue": "^2.15.0",
     "core-js": "^3.6.5",
+    "csv-parser": "^3.0.0",
+    "event-stream": "^4.0.1",
+    "get-line": "^0.1.2",
+    "perfect-scrollbar": "^1.5.0",
     "vue": "^2.6.11",
     "vue-axios": "^2.1.5",
     "vue-cookies": "^1.7.0",
     "vue-router": "^3.2.0",
-    "vuelidate": "^0.7.5"
+    "vue-sidebar-menu": "^4.7.4",
+    "vue2-transitions": "^0.3.0",
+    "vuelidate": "^0.7.5",
+    "vuesax": "^4.0.1-alpha.25"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.4.0",

src/App.vue

@@ -2,14 +2,17 @@
   <div id="app">
     <div id="nav">
       <NavBar> </NavBar>
-
+    </div>
+    <div>
+      <SideBar> </SideBar>
     </div>
     <router-view />
   </div>
 </template>
 
 <script>
 import NavBar from "./components/NavBar";
+import SideBar from "./components/SideBar"
 
 export default {
   name: "App",
@@ -25,6 +28,7 @@ export default {
   },
   components: {
     NavBar,
+    SideBar,
   }
 
 };
@@ -39,7 +43,7 @@ export default {
   -moz-osx-font-smoothing: grayscale;
   color: #2c3e50;
   min-height: 100vh;
-  background-image: url("./assets/pic5.jpg");
+  // background-image: url("./assets/pic5.jpg");
   background-size: 100% 100%;
 
 }

src/components/DatasetModelForm.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="container">
+    <div style="width: 1200px; position: absolute">
+      <h1>Evaluation and Explanation system</h1>
+      <h5>
+        In this system you will get an explanation and avaluation about those
+        explains.
+      </h5>
+      <h5>
+        Before you are using our system, we would like to ask you to get in
+        advance a dataset and the predict model that pretrained on it.
+      </h5>
+      <h5>
+        <b>Note:</b> The dataset must include the exact features that you have
+        trained in your predict model.
+      </h5>
+
+      <!-- Styled -->
+      <b-form @submit.prevent="onSubmit" @reset.prevent="onReset">
+        <b-col sm="5">
+          <h2>Choose a dataset</h2>
+
+          <b-form-file
+            size="sm"
+            accept=".csv"
+            v-model="form.dataset"
+            :state="validateState('dataset')"
+            placeholder="Choose a file or drop it here..."
+            drop-placeholder="Drop file here..."
+          ></b-form-file>
+          <b-form-invalid-feedback v-if="!$v.form.dataset.required"
+            >Dataset is required</b-form-invalid-feedback
+          >
+        </b-col>
+        <br />
+        <b-col sm="5">
+          <h2>Choose a predict model</h2>
+
+          <b-form-file
+            size="sm"
+            accept=".pkl"
+            v-model="form.predict_model"
+            :state="validateState('predict_model')"
+            placeholder="Choose a file or drop it here..."
+            drop-placeholder="Drop file here..."
+          ></b-form-file>
+          <b-form-invalid-feedback v-if="!$v.form.predict_model.required"
+            >Predict model is required</b-form-invalid-feedback
+          >
+        </b-col>
+        <br />
+        <b-button type="reset" style="width: 90px" variant="danger"
+          >Reset</b-button
+        >
+        <b-button
+          type="submit"
+          variant="primary"
+          style="width: 90px"
+          class="ml-5 w-10"
+          >Finish</b-button
+        >
+      </b-form>
+      <b-alert
+        class="mt-2"
+        v-if="form.submitError"
+        variant="warning"
+        dismissible
+        show
+        >Process failed: {{ form.submitError }}</b-alert
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  required,
+  minLength,
+  maxLength,
+  alpha,
+  sameAs,
+  email,
+} from "vuelidate/lib/validators";
+export default {
+  data() {
+    return {
+      form: {
+        dataset: null,
+        predict_model: null,
+        submitError:undefined
+      },
+    };
+  },
+  validations: {
+    form: {
+      dataset: {
+        required,
+      },
+      predict_model: {
+        required,
+      },
+    },
+  },
+  methods: {
+    onReset() {
+      this.form = {
+        dataset: null,
+        predict_model: null,
+      };
+      this.$refs.fileinput.reset();
+
+      this.$nextTick(() => {
+        this.$v.$reset();
+      });
+    },
+    onSubmit() {
+      this.$v.form.$touch();
+      if (this.$v.form.$anyError) {
+        return;
+      }
+      this.createExplanationValuation();
+    },
+    async createExplanationValuation() {
+      try {
+        const response = await this.axios.post(
+          "http://localhost:3000/evaluation", // to fix it
+          {
+            dataset: this.form.dataset,
+            predict_model: this.form.predict_model,
+          }
+        );
+        if (response.status == "201") {
+          this.$router.push("/evaluation");
+        }
+      } catch (err) {
+        this.form.submitError = err.response.data.message;
+      }
+    },
+    validateState(param) {
+      const { $dirty, $error } = this.$v.form[param];
+      return $dirty ? !$error : null;
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>

src/components/ExplainComponents/ExplainByErrors.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="container">
+    <h1>Explanation to be added</h1>
+
+    <b-button
+      @click="GetShapByErrors"
+      variant="primary"
+      style="width: 90px"
+      class="ml-5 w-10"
+      >Get graphs</b-button
+    >    
+
+  <!-- <b-card  no-body class="overflow-hidden" style="max-width: 1700px;" v-for="r in this.images" :key="r.details">
+    <b-row no-gutters>
+      <b-col md="6">
+        <b-card-img :src="r.url" alt="Image" class="rounded-0"></b-card-img>
+      </b-col>
+      <b-col md="6">
+        <b-card-body title="Horizontal Card">
+          <b-card-text>
+            This is a wider card with supporting text as a natural lead-in to additional content.
+            This content is a little bit longer.
+          </b-card-text>
+        </b-card-body>
+      </b-col>
+    </b-row>
+  </b-card> -->
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+        images:[],
+    };
+  },
+
+  methods: {
+    async test() {
+      let info = await this.axios.get(
+        "http://localhost:8080/shap/GetShapByErrors/"
+      );
+      errors_plot = [];
+      info.data.forEach((element) => {
+        errors_plot.push(element);
+      });
+
+      return newRecipes;
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>

src/components/ExplainComponents/ExplainFullData.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="container">
+  <h1>TEST </h1>
+  </div>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+
+    };
+  },
+
+  methods: {
+
+    async test() {
+      try {
+        const response = await this.axios.post(
+          "http://localhost:3000/evaluation", // to fix it
+          {
+            dataset: this.form.dataset,
+            predict_model: this.form.predict_model,
+          }
+        );
+        if (response.status == "201") {
+          this.$router.push("/evaluation");
+        }
+      } catch (err) {
+        this.form.submitError = err.response.data.message;
+      }
+    },
+
+  },
+};
+</script>
+
+<style scoped>
+</style>

src/components/ExplainComponents/ExplainSingleInstnace.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="container">
+  <h1>TESTttlololt </h1>
+  </div>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+
+    };
+  },
+
+  methods: {
+
+    async test() {
+      try {
+        const response = await this.axios.post(
+          "http://localhost:3000/evaluation", // to fix it
+          {
+            dataset: this.form.dataset,
+            predict_model: this.form.predict_model,
+          }
+        );
+        if (response.status == "201") {
+          this.$router.push("/evaluation");
+        }
+      } catch (err) {
+        this.form.submitError = err.response.data.message;
+      }
+    },
+
+  },
+};
+</script>
+
+<style scoped>
+</style>