From 417a9e7bffe60b5c65a89a7cdc5a4665e8c2022b Mon Sep 17 00:00:00 2001 From: "tom.mansion" Date: Fri, 2 Aug 2024 18:35:40 +0200 Subject: [PATCH 01/19] Style OK --- .../widgets/SampleArray/SampleArray.vue | 121 ++++++++++-------- 1 file changed, 65 insertions(+), 56 deletions(-) diff --git a/frontend/src/components/debiai/dataAnalysis/widgets/SampleArray/SampleArray.vue b/frontend/src/components/debiai/dataAnalysis/widgets/SampleArray/SampleArray.vue index 4e613a901..7a59371b3 100644 --- a/frontend/src/components/debiai/dataAnalysis/widgets/SampleArray/SampleArray.vue +++ b/frontend/src/components/debiai/dataAnalysis/widgets/SampleArray/SampleArray.vue @@ -15,25 +15,44 @@ v-on:validate="columnsSelect" /> - + +
+ + + + + + + + + + + +
+ {{ column }} +
+ {{ cell }} +
+
- + From 1207309857b5eae4219aea06c585d220716bdcc6 Mon Sep 17 00:00:00 2001 From: "tom.mansion" Date: Fri, 2 Aug 2024 19:13:57 +0200 Subject: [PATCH 02/19] WPI pagination --- .../widgets/SampleArray/SampleArray.vue | 102 ++++++++++++++++-- 1 file changed, 92 insertions(+), 10 deletions(-) diff --git a/frontend/src/components/debiai/dataAnalysis/widgets/SampleArray/SampleArray.vue b/frontend/src/components/debiai/dataAnalysis/widgets/SampleArray/SampleArray.vue index 7a59371b3..4d07dcb21 100644 --- a/frontend/src/components/debiai/dataAnalysis/widgets/SampleArray/SampleArray.vue +++ b/frontend/src/components/debiai/dataAnalysis/widgets/SampleArray/SampleArray.vue @@ -42,6 +42,29 @@ + + + + + + +
+

No data to display

@@ -66,6 +89,9 @@ export default { arrayLabels: [], arrayData: null, + currentSamplePosition: 0, + dataPerPage: 0, + maxPage: 0, }; }, created() { @@ -76,28 +102,43 @@ export default { this.settings = !this.settings; }); this.$parent.$on("redraw", this.updateArray); + this.$parent.$parent.$on("GridStack_resizestop", () => { + this.updateArray(); + }); }, - mounted() {}, methods: { updateArray() { - const maxData = 10; + // Get the number of rows to display and the height of the div + const d = document.getElementById("SampleArray" + this.index) || null; + if (!d) return; + const rowHeight = 27; + this.dataPerPage = Math.floor(d.clientHeight / rowHeight) - 3; // Number of rows to display + + // Calculate the number of pages + this.maxPage = Math.ceil(this.data.selectedData.length / this.dataPerPage) - 1; + + // Get the labels of the columns this.selectedColumnsIds = this.selectedColumnsIds.filter((i) => this.data.columnExists(i)); - const selectedData = this.data.selectedData.slice(0, maxData); - const labels = this.selectedColumnsIds.map((i) => this.data.getColumn(i).label); - const nbRows = Math.min(selectedData.length, maxData); // Number of rows to display - const data = new Array(nbRows); - this.arrayLabels = labels; + this.arrayLabels = this.selectedColumnsIds.map((i) => this.data.getColumn(i).label); - for (let i = 0; i < data.length; i++) data[i] = new Array(this.selectedColumnsIds.length); // Number of columns + // Get the data to display + const selectedData = this.data.selectedData.slice( + this.currentSamplePosition, + this.currentSamplePosition + this.dataPerPage + ); + // Create the array of data + const nbRows = Math.min(selectedData.length, this.dataPerPage); // Number of rows to display + const data = new Array(nbRows); + for (let i = 0; i < data.length; i++) data[i] = new Array(this.selectedColumnsIds.length); this.selectedColumnsIds.forEach((columnIndex, i) => { const col = this.data.getColumn(columnIndex); selectedData.map((j, indRow) => (data[indRow][i] = col.values[j])); }); - this.settings = false; this.arrayData = data; + this.settings = false; this.$parent.$emit("drawn"); }, columnsSelect(columnIndexes) { @@ -106,11 +147,28 @@ export default { this.settings = false; this.updateArray(); }, + pageUp() { + this.currentSamplePosition += this.dataPerPage; + this.updateArray(); + }, + pageDown() { + if (this.currentSamplePosition > this.dataPerPage) { + this.currentSamplePosition -= this.dataPerPage; + this.updateArray(); + } else { + this.currentSamplePosition = 0; + this.updateArray(); + } + }, }, computed: { selectedDataUpdate() { return this.data.selectedData; }, + currentPage() { + if (this.dataPerPage === 0) return 0; + return Math.floor(this.currentSamplePosition / this.dataPerPage); + }, }, watch: { selectedDataUpdate() { @@ -128,9 +186,10 @@ table { th, td { border: 1px solid #ddd; - padding: 8px; text-align: left; max-width: 200px; + height: 25px; + padding-left: 3px; // make text wrap, not overflow overflow: hidden; text-overflow: ellipsis; @@ -145,4 +204,27 @@ table { background-color: #f2f2f2; } } + +.pagination { + display: flex; + justify-content: center; + margin-top: 10px; + + button { + background-color: #f2f2f2; + border: none; + color: black; + padding: 8px 16px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + cursor: pointer; + } + + span { + padding: 8px 16px; + font-size: 16px; + } +} From 5f5bc41b3853886a8cbf4bafee352a92492a2c7d Mon Sep 17 00:00:00 2001 From: "tom.mansion" Date: Mon, 19 Aug 2024 12:06:36 +0200 Subject: [PATCH 03/19] Temporary patch on local filters display error --- frontend/cspell.json | 4 ++-- .../dataFilters/filterTypes/FilterGenericData.vue | 8 +++++++- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/frontend/cspell.json b/frontend/cspell.json index a3fc19a39..b18ebe925 100644 --- a/frontend/cspell.json +++ b/frontend/cspell.json @@ -41,6 +41,7 @@ "ncontours", "parcats", "parcoords", + "psutil", "rangeslider", "relayout", "resizestop", @@ -80,8 +81,7 @@ "zeroline", "Zindex", "zmax", - "zmin", - "psutil" + "zmin" ], "flagWords": [], "ignorePaths": [ diff --git a/frontend/src/components/debiai/dataAnalysis/dataFilters/filterTypes/FilterGenericData.vue b/frontend/src/components/debiai/dataAnalysis/dataFilters/filterTypes/FilterGenericData.vue index fb036a047..909f571ef 100644 --- a/frontend/src/components/debiai/dataAnalysis/dataFilters/filterTypes/FilterGenericData.vue +++ b/frontend/src/components/debiai/dataAnalysis/dataFilters/filterTypes/FilterGenericData.vue @@ -11,7 +11,13 @@ :class="'aligned centered ' + (filter.type === 'intervals' ? 'intervalCol' : 'valueCol')" title="Column name" > - {{ filter.column.label }} + + {{ filter.column.label }} + + + Column not found + + From 51d2d2f5217c6db51bcb5d8668075dc72fbd8996 Mon Sep 17 00:00:00 2001 From: "tom.mansion" Date: Mon, 19 Aug 2024 13:31:01 +0200 Subject: [PATCH 04/19] Sample array widget pagination OK --- .../widgets/SampleArray/SampleArray.vue | 166 +++++++++++------- 1 file changed, 99 insertions(+), 67 deletions(-) diff --git a/frontend/src/components/debiai/dataAnalysis/widgets/SampleArray/SampleArray.vue b/frontend/src/components/debiai/dataAnalysis/widgets/SampleArray/SampleArray.vue index 4d07dcb21..e152ace85 100644 --- a/frontend/src/components/debiai/dataAnalysis/widgets/SampleArray/SampleArray.vue +++ b/frontend/src/components/debiai/dataAnalysis/widgets/SampleArray/SampleArray.vue @@ -1,7 +1,7 @@ @@ -96,7 +98,7 @@ export default { }, created() { // Select the 3 firsts columns - for (let i = 0; i < 3; i++) if (this.data.nbColumns > i) this.selectedColumnsIds.push(i); + this.selectedColumnsIds = this.data.columns.slice(0, 10).map((c) => c.index); this.$parent.$on("settings", () => { this.settings = !this.settings; @@ -108,11 +110,13 @@ export default { }, methods: { updateArray() { + if (this.data.selectedData.length === 0 || this.settings) return; + // Get the number of rows to display and the height of the div const d = document.getElementById("SampleArray" + this.index) || null; if (!d) return; const rowHeight = 27; - this.dataPerPage = Math.floor(d.clientHeight / rowHeight) - 3; // Number of rows to display + this.dataPerPage = Math.floor((d.clientHeight * 0.95) / rowHeight) - 3; // Number of rows to display // Calculate the number of pages this.maxPage = Math.ceil(this.data.selectedData.length / this.dataPerPage) - 1; @@ -122,6 +126,8 @@ export default { this.arrayLabels = this.selectedColumnsIds.map((i) => this.data.getColumn(i).label); // Get the data to display + this.adjustPagination(); + const selectedData = this.data.selectedData.slice( this.currentSamplePosition, this.currentSamplePosition + this.dataPerPage @@ -144,8 +150,10 @@ export default { columnsSelect(columnIndexes) { this.selectedColumnsIds = columnIndexes; - this.settings = false; - this.updateArray(); + if (this.selectedColumnsIds.length > 0) { + this.settings = false; + this.updateArray(); + } }, pageUp() { this.currentSamplePosition += this.dataPerPage; @@ -160,6 +168,17 @@ export default { this.updateArray(); } }, + adjustPagination() { + // If the currentSamplePosition is greater than the number of rows + if (this.currentSamplePosition >= this.data.selectedData.length) + this.currentSamplePosition = this.data.selectedData.length - this.dataPerPage; + + // After a resize, adjust the pagination to have the currentSamplePosition + // In the start of the page + this.currentSamplePosition = this.currentPage * this.dataPerPage; + if (this.currentSamplePosition >= this.data.selectedData.length) + this.currentSamplePosition = this.data.selectedData.length - this.dataPerPage; + }, }, computed: { selectedDataUpdate() { @@ -167,64 +186,77 @@ export default { }, currentPage() { if (this.dataPerPage === 0) return 0; - return Math.floor(this.currentSamplePosition / this.dataPerPage); + return Math.ceil(this.currentSamplePosition / this.dataPerPage); }, }, watch: { selectedDataUpdate() { this.$parent.selectedDataWarning = true; }, + settings() { + // If the settings are closed, update the array + setTimeout(() => { + if (!this.settings) this.updateArray(); + }, 30); + }, }, }; From af89eab059858b296df50b6e13555010f3394b10 Mon Sep 17 00:00:00 2001 From: "tom.mansion" Date: Mon, 19 Aug 2024 13:44:38 +0200 Subject: [PATCH 05/19] Removed settings closed on escape key press --- .../debiai/dataAnalysis/common/ColumnSelection.vue | 8 -------- 1 file changed, 8 deletions(-) diff --git a/frontend/src/components/debiai/dataAnalysis/common/ColumnSelection.vue b/frontend/src/components/debiai/dataAnalysis/common/ColumnSelection.vue index 39da26a4b..b844ac659 100644 --- a/frontend/src/components/debiai/dataAnalysis/common/ColumnSelection.vue +++ b/frontend/src/components/debiai/dataAnalysis/common/ColumnSelection.vue @@ -111,7 +111,6 @@ export default { } else { this.selectedColumns = this.defaultSelected; } - document.addEventListener("keydown", this.keyHandler); }, mounted() { // Set focus on search bar @@ -119,10 +118,6 @@ export default { }, methods: { - // Handles the keydown event and emits the "cancel" event when the Escape key is pressed - keyHandler(k) { - if (k.key == "Escape") this.$emit("cancel"); - }, // Handles the selection of a column and emits the "colSelect" event with the selected column index columnSelected(colIndex) { this.$emit("colSelect", colIndex); @@ -233,9 +228,6 @@ export default { if (this.defaultSelected) this.selectedColumns = this.defaultSelected; }, }, - beforeDestroy() { - document.removeEventListener("keydown", this.keyHandler); - }, }; From 566f184955b51b08a4e60542695313304fee576a Mon Sep 17 00:00:00 2001 From: "tom.mansion" Date: Mon, 19 Aug 2024 13:45:08 +0200 Subject: [PATCH 06/19] Added jump to page --- .../widgets/SampleArray/SampleArray.vue | 62 ++++++++++++++++++- 1 file changed, 59 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/debiai/dataAnalysis/widgets/SampleArray/SampleArray.vue b/frontend/src/components/debiai/dataAnalysis/widgets/SampleArray/SampleArray.vue index e152ace85..28295a2e2 100644 --- a/frontend/src/components/debiai/dataAnalysis/widgets/SampleArray/SampleArray.vue +++ b/frontend/src/components/debiai/dataAnalysis/widgets/SampleArray/SampleArray.vue @@ -49,7 +49,7 @@ + + + +
+

+ Jump to page + +

+
+ + +
+
+ @@ -94,6 +127,8 @@ export default { currentSamplePosition: 0, dataPerPage: 0, maxPage: 0, + + pageToJumpTo: null, }; }, created() { @@ -179,6 +214,14 @@ export default { if (this.currentSamplePosition >= this.data.selectedData.length) this.currentSamplePosition = this.data.selectedData.length - this.dataPerPage; }, + jumpToPage() { + if (this.pageToJumpTo <= 1) this.pageToJumpTo = 1; + if (this.pageToJumpTo > this.maxPage + 1) this.pageToJumpTo = this.maxPage + 1; + + this.currentSamplePosition = (this.pageToJumpTo - 1) * this.dataPerPage; + this.updateArray(); + this.pageToJumpTo = null; + }, }, computed: { selectedDataUpdate() { @@ -254,8 +297,21 @@ export default { } .pageDisplayer { + width: 80px; padding: 8px 16px; font-size: 16px; + cursor: pointer; + + &:hover { + background-color: #f2f2f2; + border-radius: 5px; + } + } + + span { + display: flex; + justify-content: center; + align-items: center; } } } From 78e647afa769900248126ec14d13a1fd169f631a Mon Sep 17 00:00:00 2001 From: "tom.mansion" Date: Mon, 19 Aug 2024 13:50:09 +0200 Subject: [PATCH 07/19] Fixed issue with array change when selected data changes --- .../widgets/SampleArray/SampleArray.vue | 29 +++++++++++-------- 1 file changed, 17 insertions(+), 12 deletions(-) diff --git a/frontend/src/components/debiai/dataAnalysis/widgets/SampleArray/SampleArray.vue b/frontend/src/components/debiai/dataAnalysis/widgets/SampleArray/SampleArray.vue index 28295a2e2..8df4865bd 100644 --- a/frontend/src/components/debiai/dataAnalysis/widgets/SampleArray/SampleArray.vue +++ b/frontend/src/components/debiai/dataAnalysis/widgets/SampleArray/SampleArray.vue @@ -119,6 +119,7 @@ export default { data() { return { selectedColumnsIds: [], + selectedDataIds: [], settings: true, columnsSelection: false, @@ -138,14 +139,21 @@ export default { this.$parent.$on("settings", () => { this.settings = !this.settings; }); - this.$parent.$on("redraw", this.updateArray); + this.$parent.$on("redraw", this.drawArray); this.$parent.$parent.$on("GridStack_resizestop", () => { this.updateArray(); }); }, methods: { + drawArray() { + // Copy the selected data array + this.selectedDataIds = this.data.selectedData.slice(); + this.updateArray(); + this.settings = false; + this.$parent.$emit("drawn"); + }, updateArray() { - if (this.data.selectedData.length === 0 || this.settings) return; + if (this.selectedDataIds.length === 0 || this.settings) return; // Get the number of rows to display and the height of the div const d = document.getElementById("SampleArray" + this.index) || null; @@ -154,7 +162,7 @@ export default { this.dataPerPage = Math.floor((d.clientHeight * 0.95) / rowHeight) - 3; // Number of rows to display // Calculate the number of pages - this.maxPage = Math.ceil(this.data.selectedData.length / this.dataPerPage) - 1; + this.maxPage = Math.ceil(this.selectedDataIds.length / this.dataPerPage) - 1; // Get the labels of the columns this.selectedColumnsIds = this.selectedColumnsIds.filter((i) => this.data.columnExists(i)); @@ -163,7 +171,7 @@ export default { // Get the data to display this.adjustPagination(); - const selectedData = this.data.selectedData.slice( + const selectedData = this.selectedDataIds.slice( this.currentSamplePosition, this.currentSamplePosition + this.dataPerPage ); @@ -178,16 +186,13 @@ export default { }); this.arrayData = data; - - this.settings = false; - this.$parent.$emit("drawn"); }, columnsSelect(columnIndexes) { this.selectedColumnsIds = columnIndexes; if (this.selectedColumnsIds.length > 0) { this.settings = false; - this.updateArray(); + this.drawArray(); } }, pageUp() { @@ -205,14 +210,14 @@ export default { }, adjustPagination() { // If the currentSamplePosition is greater than the number of rows - if (this.currentSamplePosition >= this.data.selectedData.length) - this.currentSamplePosition = this.data.selectedData.length - this.dataPerPage; + if (this.currentSamplePosition >= this.selectedDataIds.length) + this.currentSamplePosition = this.selectedDataIds.length - this.dataPerPage; // After a resize, adjust the pagination to have the currentSamplePosition // In the start of the page this.currentSamplePosition = this.currentPage * this.dataPerPage; - if (this.currentSamplePosition >= this.data.selectedData.length) - this.currentSamplePosition = this.data.selectedData.length - this.dataPerPage; + if (this.currentSamplePosition >= this.selectedDataIds.length) + this.currentSamplePosition = this.selectedDataIds.length - this.dataPerPage; }, jumpToPage() { if (this.pageToJumpTo <= 1) this.pageToJumpTo = 1; From bcf35d91cb952c1719040336ff0d45a7a48ad525 Mon Sep 17 00:00:00 2001 From: "tom.mansion" Date: Mon, 19 Aug 2024 13:55:04 +0200 Subject: [PATCH 08/19] Added button to first and last page --- .../widgets/SampleArray/SampleArray.vue | 44 ++++++++++++++++--- 1 file changed, 38 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/debiai/dataAnalysis/widgets/SampleArray/SampleArray.vue b/frontend/src/components/debiai/dataAnalysis/widgets/SampleArray/SampleArray.vue index 8df4865bd..1cebc9fa4 100644 --- a/frontend/src/components/debiai/dataAnalysis/widgets/SampleArray/SampleArray.vue +++ b/frontend/src/components/debiai/dataAnalysis/widgets/SampleArray/SampleArray.vue @@ -49,9 +49,20 @@ @@ -287,7 +309,8 @@ export default { .pagination { display: flex; justify-content: center; - margin: 10px 0px; + margin-bottom: 10px; + gap: 3px; button { background-color: #f2f2f2; @@ -313,10 +336,19 @@ export default { } } - span { + .buttons { display: flex; justify-content: center; align-items: center; + + width: 50px; + button { + width: 100%; + &:hover { + background-color: #f2f2f2; + border-radius: 5px; + } + } } } } From 36dff2572a39f52f64d5c7084130ad2e245e5ab1 Mon Sep 17 00:00:00 2001 From: "tom.mansion" Date: Mon, 19 Aug 2024 14:08:33 +0200 Subject: [PATCH 09/19] Sort by column values OK --- .../widgets/SampleArray/SampleArray.vue | 49 +++++++++++++++++-- 1 file changed, 44 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/debiai/dataAnalysis/widgets/SampleArray/SampleArray.vue b/frontend/src/components/debiai/dataAnalysis/widgets/SampleArray/SampleArray.vue index 1cebc9fa4..39b3e84dd 100644 --- a/frontend/src/components/debiai/dataAnalysis/widgets/SampleArray/SampleArray.vue +++ b/frontend/src/components/debiai/dataAnalysis/widgets/SampleArray/SampleArray.vue @@ -25,10 +25,15 @@ - {{ column }} + {{ column.label }} + + ▼ + ▲ @@ -48,7 +53,7 @@ -