feat(Visualization): Added warning for data visualization size limit

OpenSILEX/opensilex-dev!1204
OpenSILEX · May 13, 2024 · a181b05 · a181b05
1 parent e2f1afd
commit a181b05
Show file tree

Hide file tree

Showing 9 changed files with 45 additions and 119 deletions.
diff --git a/opensilex-front/front/src/components/devices/DeviceVisualizationTab.vue b/opensilex-front/front/src/components/devices/DeviceVisualizationTab.vue
@@ -335,7 +335,7 @@ export default class DeviceVisualizationTab extends Vue {
             undefined,  // operators
             ["date=asc"], //order by
             0,
-            50000
+            this.$store.state.graphDataLimit
         )
       .then((http: HttpResponse<OpenSilexResponse<Array<DataGetDTO>>>) => {
         const data = http.response.result as Array<DataGetDTO>;
@@ -348,15 +348,6 @@ export default class DeviceVisualizationTab extends Vue {
 
         if (dataLength >= 0) {
           const cleanData = HighchartsDataTransformer.transformDataForHighcharts(data);
-          if (dataLength > 50000) {
-            this.$opensilex.showInfoToast(
-              this.$i18n.t("DeviceDataTab.limitSizeMessageA") +
-                " " +
-                dataLength +
-                " " +
-                this.$i18n.t("DeviceDataTab.limitSizeMessageB")
-            );
-          }
 
           return {
             name: this.selectedVariable.name,

diff --git a/opensilex-front/front/src/components/experiments/views/ExperimentDataVisualisationView.vue b/opensilex-front/front/src/components/experiments/views/ExperimentDataVisualisationView.vue
@@ -431,7 +431,7 @@ export default class ExperimentDataVisualisationView extends Vue {
               undefined,
               ["date=asc"],
               0,
-              50000
+              this.$store.state.graphDataLimit
           );
 
       const data = http.response.result as Array<DataGetDTO>;
@@ -448,17 +448,7 @@ export default class ExperimentDataVisualisationView extends Vue {
           imageData
         } = await this.transformDataWithImages(data, {scientificObjectUri: concernedItem.id});
         // const cleanData = HighchartsDataTransformer.transformDataForHighcharts(data, {scientificObjectUri: concernedItem.id});
-        if (dataLength > 50000) {
-          this.$opensilex.showInfoToast(
-              this.$i18n.t("ExperimentDataVisualisationView.limitSizeMessageA") +
-              " " +
-              dataLength +
-              " " +
-              this.$i18n.t("ExperimentDataVisualisationView.limitSizeMessageB") +
-              concernedItem.label +
-              this.$i18n.t("ExperimentDataVisualisationView.limitSizeMessageC")
-          );
-        }
+
         const dataAndImage = [];
 
         let name = this.multipleVariables ? concernedItem.label + " / " + selectedVariable.name : concernedItem.label

diff --git a/opensilex-front/front/src/components/home/dashboard/Histogram.vue b/opensilex-front/front/src/components/home/dashboard/Histogram.vue
@@ -343,7 +343,7 @@ export default class Histogram extends Vue {
         undefined,
         ["date=asc"],
         0,
-        50000,
+          this.$store.state.graphDataLimit,
       )
       .then((http: HttpResponse<OpenSilexResponse<Array<DataGetDTO>>>) => {
         const data = http.response.result as Array<DataGetDTO>;
@@ -352,7 +352,7 @@ export default class Histogram extends Vue {
         if (dataLength >= 0) {
           const cleanData = HighchartsDataTransformer.transformDataForHighcharts(data, {deviceUri: device.uri});
 
-          if (dataLength > 50000) {
+          if (dataLength > this.$store.state.graphDataLimit) {
             this.$opensilex.showErrorToast(
               this.$i18n.t("Histogram.limitSizeMessageA") +
               " " +

diff --git a/opensilex-front/front/src/components/scientificObjects/ScientificObjectVisualizationTab.vue b/opensilex-front/front/src/components/scientificObjects/ScientificObjectVisualizationTab.vue
@@ -385,7 +385,7 @@ export default class ScientificObjectVisualizationTab extends Vue {
               undefined,
               ["date=asc"],
               0,
-              50000
+              this.$store.state.graphDataLimit
           );
 
       const data = http.response.result as Array<DataGetDTO>;
@@ -399,20 +399,8 @@ export default class ScientificObjectVisualizationTab extends Vue {
 
       if (dataLength >= 0) {
         const {cleanData, imageData} = await this.transformDataWithImages(data);
-        if (dataLength > 50000) {
-                this.$opensilex.showInfoToast(
-                    this.$i18n.t(
-                        "ScientificObjectVisualizationTab.limitSizeMessageA"
-                    ) +
-                    " " +
-                    dataLength +
-                    " " +
-                    this.$i18n.t(
-                        "ScientificObjectVisualizationTab.limitSizeMessageB"
-                    )
-                );
-              }
-              const dataAndImage = [];
+
+        const dataAndImage = [];
 
         const dataSerie = {
           name: this.scientificObject.name,

diff --git a/opensilex-front/front/src/components/variables/views/VariableVisualizationTab.vue b/opensilex-front/front/src/components/variables/views/VariableVisualizationTab.vue
@@ -436,7 +436,7 @@ export default class VariableVisualizationTab extends Vue {
             undefined,
             ["date=asc"],
             0,
-            50000
+            this.$store.state.graphDataLimit
         )
         .then((http: HttpResponse<OpenSilexResponse<Array<DataGetDTO>>>) => {
           const data = http.response.result as Array<DataGetDTO>;
@@ -449,17 +449,6 @@ export default class VariableVisualizationTab extends Vue {
 
           if (dataLength >= 0) {
             const cleanData = HighchartsDataTransformer.transformDataForHighcharts(data, {deviceUri: concernedItem.uri});
-            if (dataLength > 50000) {
-              this.$opensilex.showInfoToast(
-                  this.$i18n.t("DeviceDataTab.limitSizeMessageA") +
-                  " " +
-                  dataLength +
-                  " " +
-                  this.$i18n.t("DeviceDataTab.limitSizeMessageB") +
-                  concernedItem.name +
-                  this.$i18n.t("DeviceDataTab.limitSizeMessageC")
-              );
-            }
 
             let name = concernedItem.name ? concernedItem.name : concernedItem.uri
             return {

diff --git a/opensilex-front/front/src/components/variables/views/VariableVisualizationTile.vue b/opensilex-front/front/src/components/variables/views/VariableVisualizationTile.vue
@@ -411,7 +411,7 @@ export default class VariableVisualizationTile extends Vue {
 
     if (dataLength >= 0) {
       const cleanData = HighchartsDataTransformer.transformSimpleDataForHighcharts(data, dataSerie.provenance);
-      if (dataLength > 50000) {
+      if (dataLength > this.$store.state.graphDataLimit) {
         this.$opensilex.showInfoToast(
             this.$t("VariableVisualizationTile.limitSizeMessage", {count: dataLength }).toString()
         );

diff --git a/opensilex-front/front/src/components/visualization/DataVisuGraphic.vue b/opensilex-front/front/src/components/visualization/DataVisuGraphic.vue
@@ -129,6 +129,7 @@ import {DataService} from "opensilex-core/api/data.service";
 import {AnnotationsService} from "opensilex-core/api/annotations.service";
 import {EventsService} from "opensilex-core/api/events.service";
 import {VariableGetDTO} from "opensilex-core/model/variableGetDTO";
+import {OpenSilexStore} from "../../models/Store";
 
 /**
  * Custom type for highcharts options. The event 'contextmenu', corresponding to the
@@ -160,6 +161,7 @@ exportingInit(Highcharts);
 })
 export default class DataVisuGraphic extends Vue {
   $opensilex: OpenSilexVuePlugin;
+  $store: OpenSilexStore;
 
   @Ref("helpModal") readonly helpModal!: any;
   @Ref("contextMenu") readonly contextMenu!: any;
@@ -625,6 +627,22 @@ export default class DataVisuGraphic extends Vue {
     if (series.length > 0) {
       this.yAxis = this.buildYAxis(this.showEvents);
     }
+
+    // If numpber of data is this.$store.state.graphDataLimit -> data was truncated -> warn user
+    series.forEach((serie) => {
+      if (serie.data.length == this.$store.state.graphDataLimit) {
+        console.log(serie.data[-1])
+        this.$opensilex.showWarningToast(
+            this.$i18n.t("DataVisuGraphic.dataLimit", {
+              dataLimit: this.$store.state.graphDataLimit,
+              //@ts-ignore
+              finalDate: serie.data[serie.data.length - 1].data.date,
+              variable: serie.name
+            }).toString()
+        )
+      }
+    })
+
     this.series = series;
     this.linkToCorrectAxis();
   }
@@ -938,6 +956,7 @@ fr:
     download : Télecharger l'image
     rightClick : click droit sur un point pour ajouter un evénement ou une annotation
     name: Nom
+    dataLimit: Seules les {dataLimit} premières données de '{variable}' ont été chargées. La date finale a été reculée à '{finalDate}'. Vous pouvez mettre à jour la date de début pour charger des données ultérieures.
 
 en:
   DataVisuGraphic:
@@ -951,4 +970,5 @@ en:
     download : Download image
     rightClick : right click on a point to add event or annotation
     name: Name
+    dataLimit: Only the first {dataLimit} data of '{variable}' were loaded. The final date was moved back to '{finalDate}'. You can update your starting date to load later data.
 </i18n>
diff --git a/opensilex-front/front/src/models/Store.ts b/opensilex-front/front/src/models/Store.ts
@@ -116,6 +116,7 @@ let store = new Vuex.Store({
     search: {
       experiments: new SearchStore()
     },
+    graphDataLimit: 50000,
     credentials: {
       CREDENTIAL_EXPERIMENT_MODIFICATION_ID: "experiment-modification",
       CREDENTIAL_EXPERIMENT_DELETE_ID: "experiment-delete",

diff --git a/opensilex-front/front/yarn.lock b/opensilex-front/front/yarn.lock
@@ -2631,11 +2631,6 @@
   dependencies:
     "@types/node" "*"
 
-"@types/dashify@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@types/dashify/-/dashify-1.0.0.tgz#19ade107e1e330344a65ad65f0e7e1875483d2e9"
-  integrity sha512-uyYom3SM48jvowobcby+1z3r/sDX+5N8lAdPoNLKYMhF819pNjV6K5g8lAUGrwj80n+P7Qf10GcA9h7aIO2GJw==
-
 "@types/express-serve-static-core@*", "@types/express-serve-static-core@^4.17.18":
   version "4.17.18"
   resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.17.18.tgz#8371e260f40e0e1ca0c116a9afcd9426fa094c40"
@@ -2680,18 +2675,6 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.7.tgz#98a993516c859eb0d5c4c8f098317a9ea68db9ad"
   integrity sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA==
 
-"@types/lodash.mergewith@^4.6.6":
-  version "4.6.6"
-  resolved "https://registry.yarnpkg.com/@types/lodash.mergewith/-/lodash.mergewith-4.6.6.tgz#c4698f5b214a433ff35cb2c75ee6ec7f99d79f10"
-  integrity sha512-RY/8IaVENjG19rxTZu9Nukqh0W2UrYgmBj5sdns4hWRZaV8PqR7wIKHFKzvOTjo4zVRV7sVI+yFhAJql12Kfqg==
-  dependencies:
-    "@types/lodash" "*"
-
-"@types/lodash@*":
-  version "4.14.168"
-  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.168.tgz#fe24632e79b7ade3f132891afff86caa5e5ce008"
-  integrity sha512-oVfRvqHV/V6D1yifJbVRU3TMp8OT6o6BG+U9MkwuJ3U8/CsDHvalRpsxBqivn71ztOFZBTfJMvETbqHiaNSj7Q==
-
 "@types/mime@^1":
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/@types/mime/-/mime-1.3.2.tgz#93e25bf9ee75fe0fd80b594bc4feb0e862111b5a"
@@ -2755,15 +2738,10 @@
   resolved "https://registry.yarnpkg.com/@types/source-list-map/-/source-list-map-0.1.2.tgz#0078836063ffaf17412349bba364087e0ac02ec9"
   integrity sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==
 
-"@types/tabulator-tables@4.8.0":
-  version "4.8.0"
-  resolved "https://registry.yarnpkg.com/@types/tabulator-tables/-/tabulator-tables-4.8.0.tgz#fe169eb98bf32a1a4f3370b69ea5ab103d334d7a"
-  integrity sha512-Caf++b/FQBXVMHWIuAoQhJBiX3MxppG7ZC89WnJxVWQIv4CSN5Y9KIIh+glTaqInqG5niWNQmeHgEl//TehGRQ==
-
-"@types/tabulator-tables@^4.6.0":
-  version "4.9.1"
-  resolved "https://registry.yarnpkg.com/@types/tabulator-tables/-/tabulator-tables-4.9.1.tgz#4fbc5465960598308260f50f840d610bcc8ffa3a"
-  integrity sha512-BfHDeVDfLF5H0HYFQ3ZEfv7J43sD8dw8fhci8juRB5uc0xQWboDd6f1hgLOwQioYhO9vWZEAWfuD6c1wl9qzmw==
+"@types/tabulator-tables@5.6.0":
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/@types/tabulator-tables/-/tabulator-tables-5.6.0.tgz#4eb77373688c435177527b076e44c84acb60ca8d"
+  integrity sha512-si5S49dCsVgUhLS2PIP93xXZtdrZEPldWDXzCTMtCgmoKP7rTM6eQOpeR+EW5YtyNDS2vAqQPlQ1ddBoFKIbAQ==
 
 "@types/tapable@^1":
   version "1.0.8"
@@ -4666,16 +4644,16 @@ core-js@^3.15.2:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.21.1.tgz#f2e0ddc1fc43da6f904706e8e955bc19d06a0d94"
   integrity sha512-FRq5b/VMrWlrmCzwRrpDYNxyHP9BcAZC+xHJaqTgIE5091ZV1NTmyh0sGOg5XqpnHvR0svdy0sv1gWA1zmhxig==
 
-core-js@^3.3.6, core-js@^3.6.5:
-  version "3.9.0"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.9.0.tgz#790b1bb11553a2272b36e2625c7179db345492f8"
-  integrity sha512-PyFBJaLq93FlyYdsndE5VaueA9K5cNB7CGzeCj191YYLhkQM0gdZR2SKihM70oF0wdqKSKClv/tEBOpoRmdOVQ==
-
 core-js@^3.6.0:
   version "3.15.2"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.15.2.tgz#740660d2ff55ef34ce664d7e2455119c5bdd3d61"
   integrity sha512-tKs41J7NJVuaya8DxIOCnl8QuPHx5/ZVbFo1oKgVl1qHFBBrDctzQGtuLjPpRdNTWmKPH6oEvgN/MUID+l485Q==
 
+core-js@^3.6.5:
+  version "3.9.0"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.9.0.tgz#790b1bb11553a2272b36e2625c7179db345492f8"
+  integrity sha512-PyFBJaLq93FlyYdsndE5VaueA9K5cNB7CGzeCj191YYLhkQM0gdZR2SKihM70oF0wdqKSKClv/tEBOpoRmdOVQ==
+
 core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -5238,11 +5216,6 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
-dashify@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/dashify/-/dashify-2.0.0.tgz#fff270ca2868ca427fee571de35691d6e437a648"
-  integrity sha512-hpA5C/YrPjucXypHPPc0oJ1l9Hf6wWbiOL7Ik42cxnsUOhWiCB/fylKbKqqJalW9FgkNQCw16YO8uW9Hs0Iy1A==
-
 date-fns-tz@^1.1.4:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/date-fns-tz/-/date-fns-tz-1.2.2.tgz#89432b54ce3fa7d050a2039e997e5b6a96df35dd"
@@ -7766,11 +7739,6 @@ lodash.memoize@^4.1.2:
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
   integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
 
-lodash.mergewith@^4.6.2:
-  version "4.6.2"
-  resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.2.tgz#617121f89ac55f59047c7aec1ccd6654c6590f55"
-  integrity sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==
-
 lodash.pick@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.pick/-/lodash.pick-4.4.0.tgz#52f05610fff9ded422611441ed1fc123a03001b3"
@@ -10686,10 +10654,10 @@ svgo@^1.0.0:
     unquote "~1.1.1"
     util.promisify "~1.0.0"
 
-tabulator-tables@4.9.3:
-  version "4.9.3"
-  resolved "https://registry.yarnpkg.com/tabulator-tables/-/tabulator-tables-4.9.3.tgz#89ea8f9bffc11ba9a789369b5165ac82da26f4f0"
-  integrity sha512-iwwQqAEGGxlgrBpcmJJvMJrfjGLcCXOB3AOb/DGkXqBy1YKoYA36hIl7qXGp6Jo8dSkzFAlDT6pKLZgyhs9OnQ==
+tabulator-tables@5.6.1:
+  version "5.6.1"
+  resolved "https://registry.yarnpkg.com/tabulator-tables/-/tabulator-tables-5.6.1.tgz#ffd9ca7f730f3e7ec58e7dfffc91ee58e2b7fcc9"
+  integrity sha512-DsmaZqEmlQS/NL5ZJbVtoaeYjJgofEFp+2er7+uwKerGwd/E2rZbeQgux4+Ab1dxNJcbptiX7oUiTwogOnUdgQ==
 
 tapable@^1.0.0, tapable@^1.1.3:
   version "1.1.3"
@@ -11261,7 +11229,7 @@ vue-async-computed@^3.8.3:
   resolved "https://registry.yarnpkg.com/vue-async-computed/-/vue-async-computed-3.9.0.tgz#af3181c25168bfe9d86d8ffbc7033bf9e484fe84"
   integrity sha512-ac6m/9zxHHNGGKNOU1en8qNk+fAmEbJLuWL7qyQTFuH3vjv3V4urv//QHcVzCobROM6btnaDG2b+XYMncF/ETA==
 
-vue-class-component@^7.1.0, vue-class-component@^7.2.5:
+vue-class-component@^7.2.5:
   version "7.2.6"
   resolved "https://registry.yarnpkg.com/vue-class-component/-/vue-class-component-7.2.6.tgz#8471e037b8e4762f5a464686e19e5afc708502e4"
   integrity sha512-+eaQXVrAm/LldalI272PpDe3+i4mPis0ORiMYxF6Ae4hyuCh15W8Idet7wPUEs4N4YptgFHGys4UrgNQOMyO6w==
@@ -11408,13 +11376,6 @@ vue-papa-parse@2.0.0:
     papaparse "^5.3.0"
     vue "^2.6.12"
 
-vue-property-decorator@^8.3.0:
-  version "8.5.1"
-  resolved "https://registry.yarnpkg.com/vue-property-decorator/-/vue-property-decorator-8.5.1.tgz#571a91cf8d2b507f537d79bf8275af3184572fff"
-  integrity sha512-O6OUN2OMsYTGPvgFtXeBU3jPnX5ffQ9V4I1WfxFQ6dqz6cOUbR3Usou7kgFpfiXDvV7dJQSFcJ5yUPgOtPPm1Q==
-  dependencies:
-    vue-class-component "^7.1.0"
-
 vue-scrollbar-live@^5.7.1:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/vue-scrollbar-live/-/vue-scrollbar-live-5.7.1.tgz#192a344f885a5762ef5acf639e72dad736c3a819"
@@ -11444,20 +11405,6 @@ vue-style-loader@^4.1.2:
     hash-sum "^1.0.2"
     loader-utils "^1.0.2"
 
-vue-tabulator@1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/vue-tabulator/-/vue-tabulator-1.3.0.tgz#cda456a84110596883e714bd15e043b4fa31ddda"
-  integrity sha512-5eyW5naC85OpCohURjjAILzYF4HvLahEdyHX/y7d+5L+jjwynlcQT3GbMW9jjc6xVmxa7eE7q4FwUdI2MkYGCA==
-  dependencies:
-    "@types/dashify" "^1.0.0"
-    "@types/lodash.mergewith" "^4.6.6"
-    "@types/tabulator-tables" "4.8.0"
-    core-js "^3.3.6"
-    dashify "^2.0.0"
-    lodash.mergewith "^4.6.2"
-    vue-class-component "^7.1.0"
-    vue-property-decorator "^8.3.0"
-
 vue-template-es2015-compiler@^1.9.0:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"