Merge branch '203-display-selections-metadata' of https://github.com/…

…debiai/debiai into 203-display-selections-metadata

backend/swagger.yaml

@@ -1,6 +1,6 @@
 swagger: "2.0"
 info:
-  version: 0.27.1
+  version: 0.27.2
   title: DebiAI_BACKEND_API
   description: DebiAI backend api
   contact:

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "debiai_frontend",
-  "version": "0.27.1",
+  "version": "0.27.2",
   "description": "Frontend for Debiai, made with Vuejs",
   "license": "Apache-2.0",
   "scripts": {

frontend/src/components/common/DocumentationBlock .vue

@@ -3,64 +3,78 @@
     <div id="questionMark">
       <b
         id="i"
-        @mouseenter="show = true"
-        @mouseleave="show = false"
-        @mousemove="positionDocBlock"
+        ref="i"
+        @mouseover="showTooltip"
+        @mouseleave="hideTooltip"
         >i</b
       >
-      <transition name="fade">
-        <p
-          id="docBlock"
-          :class="{ top: top }"
-          @mouseenter="show = true"
-          @mouseleave="show = false"
-          v-show="show"
-        >
-          <slot />
-        </p>
-      </transition>
     </div>
+    <transition name="fade">
+      <p
+        id="docBlock"
+        ref="docBlock"
+        @mouseover="showTooltip"
+        @mouseleave="hideTooltip"
+        v-show="show"
+      >
+        <slot />
+      </p>
+    </transition>
   </div>
 </template>
 
 <script>
 export default {
   name: "DocumentationBlock",
-  props: {
-    followCursor: {
-      type: Boolean,
-      default: false,
-    },
-    top: {
-      type: Boolean,
-      default: false,
-    },
-  },
   data() {
     return {
       show: false,
     };
   },
   methods: {
-    positionDocBlock() {
-      const tooltip = this.$el.querySelector("#docBlock");
-      const questionMark = this.$el.querySelector("#i");
+    showTooltip() {
+      this.show = true;
+      this.$nextTick(this.adjustDockBlockPosition);
+      if (this.offTimeout) clearTimeout(this.offTimeout);
+    },
+    hideTooltip() {
+      if (this.offTimeout) clearTimeout(this.offTimeout);
+
+      this.offTimeout = setTimeout(() => {
+        this.show = false;
+      }, 100);
+    },
+    adjustDockBlockPosition(previousPosition) {
+      if (!this.show) return;
 
-      const questionMarkRect = questionMark.getBoundingClientRect();
-      const tooltipWidth = tooltip.offsetWidth;
-      const tooltipHeight = tooltip.offsetHeight;
+      const docBlock = this.$refs.docBlock;
+      const docBlockRect = docBlock.getBoundingClientRect();
+      const i = this.$refs.i;
+      const iRect = i.getBoundingClientRect();
+      let top = iRect.top + iRect.height;
+      let left = iRect.left;
 
-      // Calculate the position
-      let tooltipX = questionMarkRect.left - tooltipWidth - 10;
-      let tooltipY = questionMarkRect.top + questionMarkRect.height / 2 - tooltipHeight / 2 + 100;
+      // Check if the tooltip is out of the screen
+      if (left + docBlockRect.width > window.innerWidth) {
+        left = iRect.right - docBlockRect.width;
+      }
 
-      // Check if the tooltip is outside the screen
-      if (tooltipX < 0) {
-        tooltipX = questionMarkRect.right + 10;
+      if (top + docBlockRect.height > window.innerHeight) {
+        top = iRect.top - docBlockRect.height;
       }
 
-      tooltip.style.left = `${tooltipX}px`;
-      tooltip.style.top = `${tooltipY}px`;
+      // Offset by the scroll position
+      top += window.scrollY;
+      left += window.scrollX;
+
+      // Set the position
+      docBlock.style.top = `${top}px`;
+      docBlock.style.left = `${left}px`;
+
+      // Recursively call the function until the position is stable
+      if (!previousPosition || previousPosition.top !== top || previousPosition.left !== left) {
+        this.$nextTick(() => this.adjustDockBlockPosition({ top, left }));
+      }
     },
   },
 };
@@ -84,14 +98,7 @@ export default {
   font-size: initial;
 }
 
-/* #questionMark:hover > #docBlock {
-  visibility: visible;
-  opacity: 1;
-} */
-
 #docBlock {
-  /* opacity: 0; */
-  /* visibility: hidden; */
   position: absolute;
   padding: 20px;
   margin: 0px;
@@ -101,7 +108,6 @@ export default {
   background-color: rgb(213, 251, 255);
   text-align: left;
   z-index: 1000;
-  /* transition: visibility 0s, opacity 0.1s linear; */
   font-size: initial;
   text-decoration: none;
   align-self: flex-start;
@@ -111,10 +117,6 @@ export default {
   max-height: 500px;
   overflow-y: auto;
 }
-
-#docBlock.top {
-  transform: translateY(100%);
-}
 </style>
 
 <style>

frontend/src/components/debiai/dataAnalysis/algoProviders/Algorithm.vue

@@ -91,10 +91,7 @@
                 v-else
                 >{{ input.type }}</span
               >
-              <DocumentationBlock
-                :followCursor="true"
-                v-if="inputDetail(input)"
-              >
+              <DocumentationBlock v-if="inputDetail(input)">
                 <div v-html="inputDetail(input)"></div>
               </DocumentationBlock>
             </div>

frontend/src/components/debiai/dataAnalysis/algoProviders/Experiments.vue

@@ -130,10 +130,7 @@
             <h5 class="experiment-title">
               Experiment {{ experiment.nb }}
               <!-- Display Inputs -->
-              <DocumentationBlock
-                :followCursor="true"
-                v-if="experiment.inputs.length > 0"
-              >
+              <DocumentationBlock v-if="experiment.inputs.length > 0">
                 <span v-if="experiment.selectedData">
                   On {{ experiment.selectedData.length }} selected data.
                 </span>

frontend/src/components/debiai/dataAnalysis/widget/widgetConfiguration/WidgetConf.vue

@@ -11,7 +11,7 @@
 
       <div class="right">
         <!-- Configuration details -->
-        <DocumentationBlock :followCursor="true">
+        <DocumentationBlock>
           <h4>Configuration details</h4>
           <table class="confDetails">
             <tr

makefile

@@ -0,0 +1,44 @@
+.EXPORT_ALL_VARIABLES:
+
+# Install dependencies
+install:
+	cd backend && pip install -r requirements.txt
+	cd frontend && npm install
+
+# Run the application in development mode
+run_backend:
+	cd backend && python websrv.py
+
+run_frontend:
+	cd frontend && npm run serve
+
+start:
+	make run_backend & make run_frontend
+
+code:
+	code backend
+	code frontend
+
+
+# Code quality
+format:
+	# -----  Formatting Python code with Black
+	cd backend && black .
+
+	# -----  Formatting JavaScript code with Prettier
+	cd frontend && npm run prettier
+
+check:
+	# -----  Validating Black code style
+	cd backend && black --check --diff .
+
+	# -----  Validating Flake8 code style
+	cd backend && flake8 .
+
+	# -----  Validating Prettier code style
+	cd frontend && npm run prettier:check
+
+	# -----  Validating CSpell errors
+	cspell --no-progress .
+
+	# ----- The code is formatted correctly