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

@@ -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.
    */

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
 

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}

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%;
+      }
+    }
   }
 }