From df9e712cac802d01db73470dda0376fc46027662 Mon Sep 17 00:00:00 2001
From: Stefano Ricci <1219739+SteRiccio@users.noreply.github.com>
Date: Wed, 22 May 2024 16:51:45 +0200
Subject: [PATCH] Fix records list layout (#3428)

* Data explorer / scatter plot: show record keys in tooltip

* solved deepscan issue

* show record editor on click

* download chart to PNG

* code cleanup

* code cleanup

* records list: layout adjustments

---------

Co-authored-by: Stefano Ricci <SteRiccio@users.noreply.github.com>
Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>
---
 server/db/massiveUpdate.js                             | 10 ++++++----
 .../DataQueryScatterChart/DataQueryScatterChart.js     |  6 +++---
 .../views/App/views/Data/Records/RecordOwnerColumn.js  |  3 ++-
 webapp/views/App/views/Data/Records/Records.scss       |  7 +++++++
 4 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/server/db/massiveUpdate.js b/server/db/massiveUpdate.js
index 8cb5fdd66c..b561396db7 100644
--- a/server/db/massiveUpdate.js
+++ b/server/db/massiveUpdate.js
@@ -5,11 +5,13 @@ const pgp = pgPromise()
 
 export default class MassiveUpdate {
   /**
-   * @class
+   * It manages updates in bulk using pgp.helpers.update.
    *
-   * @param {string} schema - The database schema name.
-   * @param {string} table - The  database table name.
-   * @param {object|pgp.helpers.Columns|Array} cols - The columns (see http://vitaly-t.github.io/pg-promise/helpers.ColumnSet.html).
+   * @param {!object} params - Parameters object.
+   * @param {!string} params.schema - The database schema name.
+   * @param {!string} params.table - The database table name.
+   * @param {object|pgp.helpers.Columns|Array} params.cols - The columns (see http://vitaly-t.github.io/pg-promise/helpers.ColumnSet.html).
+   * @param {string} params.where - The where condition (optional).
    * @param {pgPromise.IDatabase} [client=db] - The database client.
    * @param {number} [bufferSize=100000] - The size of the buffer.
    */
diff --git a/webapp/components/DataQuery/Visualizer/DataQueryChart/DataQueryScatterChart/DataQueryScatterChart.js b/webapp/components/DataQuery/Visualizer/DataQueryChart/DataQueryScatterChart/DataQueryScatterChart.js
index c97db95200..65a9df83c5 100644
--- a/webapp/components/DataQuery/Visualizer/DataQueryChart/DataQueryScatterChart/DataQueryScatterChart.js
+++ b/webapp/components/DataQuery/Visualizer/DataQueryChart/DataQueryScatterChart/DataQueryScatterChart.js
@@ -1,4 +1,5 @@
 import React, { useCallback } from 'react'
+import { useDispatch } from 'react-redux'
 import PropTypes from 'prop-types'
 
 import { Objects } from '@openforis/arena-core'
@@ -8,15 +9,14 @@ import * as NodeDef from '@core/survey/nodeDef'
 import * as Survey from '@core/survey/survey'
 import * as ObjectUtils from '@core/objectUtils'
 
+import { useRandomColors } from '@webapp/components/hooks/useRandomColors'
 import { ScatterChart } from '@webapp/charts/ScatterChart'
+import { DataExplorerActions } from '@webapp/store/dataExplorer'
 import { useSurvey, useSurveyPreferredLang } from '@webapp/store/survey'
 import { useI18n } from '@webapp/store/system'
 
 import { useDataQueryChartData } from '../useDataQueryChartData'
-import { useRandomColors } from '@webapp/components/hooks/useRandomColors'
 import { DataQueryScatterChartTooltip } from './DataQueryScatterChartTooltip'
-import { useDispatch } from 'react-redux'
-import { DataExplorerActions } from '@webapp/store/dataExplorer'
 
 const maxItems = 5000
 
diff --git a/webapp/views/App/views/Data/Records/RecordOwnerColumn.js b/webapp/views/App/views/Data/Records/RecordOwnerColumn.js
index c4be670d7f..6fe2301169 100644
--- a/webapp/views/App/views/Data/Records/RecordOwnerColumn.js
+++ b/webapp/views/App/views/Data/Records/RecordOwnerColumn.js
@@ -1,5 +1,6 @@
 import React, { useCallback, useState } from 'react'
 import { useDispatch } from 'react-redux'
+import classNames from 'classnames'
 import PropTypes from 'prop-types'
 
 import * as Record from '@core/record/record'
@@ -110,7 +111,7 @@ export const RecordOwnerColumn = (props) => {
 
   return (
     <div
-      className="width100"
+      className={classNames('record-owner-col', { editing })}
       onClick={onContainerClick}
       onFocus={onContainerFocus}
       onKeyDown={onContainerKeyDown}
diff --git a/webapp/views/App/views/Data/Records/Records.scss b/webapp/views/App/views/Data/Records/Records.scss
index 1c9c934abe..8b111119f8 100644
--- a/webapp/views/App/views/Data/Records/Records.scss
+++ b/webapp/views/App/views/Data/Records/Records.scss
@@ -22,5 +22,12 @@
       justify-content: flex-end;
       gap: 0.2rem;
     }
+    .record-owner-col {
+      width: fit-content;
+      margin: auto;
+      &.editing {
+        width: 100%;
+      }
+    }
   }
 }