Add an advanced mode to vega / vega lite chart

cypress/integration/graph_page.spec.js

@@ -6,6 +6,13 @@ import * as searchDrawer from '../support/searchDrawer';
 
 describe('Graph Page', () => {
     beforeEach(() => {
+        // ResizeObserver doesn't like when the app has to many renders / re-renders
+        // and throws an exception to say, "I wait for the next paint"
+        // https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver#observation_errors
+        cy.on('uncaught:exception', error => {
+            return !error.message.includes('ResizeObserver');
+        });
+
         teardown();
         menu.openAdvancedDrawer();
         menu.goToAdminDashboard();

cypress/integration/model.spec.js

@@ -7,6 +7,13 @@ import * as searchDrawer from '../support/searchDrawer';
 describe('Model Page', () => {
     describe('handling old models', () => {
         beforeEach(() => {
+            // ResizeObserver doesn't like when the app has to many renders / re-renders
+            // and throws an exception to say, "I wait for the next paint"
+            // https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver#observation_errors
+            cy.on('uncaught:exception', error => {
+                return !error.message.includes('ResizeObserver');
+            });
+
             teardown();
             menu.openAdvancedDrawer();
             menu.goToAdminDashboard();

src/app/custom/translations.tsv

@@ -958,3 +958,6 @@
 "r-sub-resources-co-occurrences_description" 	"Identifies sub-resources that co-occur with a given sub-resource and calculates the number of these co-occurrences." 	"Identifie les sous-ressources co-occurrentes avec une sous-ressource donnée et calcule le nombre de ces co-occurrences."
 "r-close-by_title" 	"close-by" 	"close-by"
 "r-close-by_description" 	"Is used to create the graph aster plot." 	"Est utilisée pour créer le graphique aster plot."
+regenerate_vega_lite_spec	Regenerate Vega Lite specifications	Régénérer la spécification Vega Lite
+regenerate_vega_spec	Regenerate Vega specifications	Régénérer la spécification Vega
+vega_json_error	The json syntax of Vega Lite specification is wrong!	La syntaxe json de la spécification Vega Lite est erronée !

src/app/js/formats/chartsUtils.js

@@ -73,3 +73,19 @@ export const lodexOrderToIdOrder = orderBy => {
             return INVALID_VALUE;
     }
 };
+
+/**
+ * Convert text value to code value
+ * @param direction{'vertical' | 'horizontal'}
+ * @returns {number}
+ */
+export const lodexDirectionToIdDirection = direction => {
+    switch (direction) {
+        case 'vertical':
+            return AXIS_VERTICAL;
+        case 'horizontal':
+            return AXIS_HORIZONTAL;
+        default:
+            return INVALID_VALUE;
+    }
+};

src/app/js/formats/shared/VegaAdvancedMode.js

@@ -0,0 +1,150 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import translate from 'redux-polyglot/translate';
+import PropTypes from 'prop-types';
+import { Button, TextField, Tooltip } from '@mui/material';
+import ReportProblemIcon from '@mui/icons-material/ReportProblem';
+import CachedIcon from '@mui/icons-material/Cached';
+import isEqual from 'lodash.isequal';
+
+import { polyglot as polyglotPropTypes } from '../../propTypes';
+
+const styles = {
+    error: {
+        container: {
+            marginLeft: 'auto',
+            marginRight: '24px',
+            color: 'red',
+        },
+        message: {
+            container: {
+                display: 'flex',
+                flexDirection: 'row',
+            },
+            icon: {
+                marginTop: 'auto',
+                marginBottom: 'auto',
+                marginRight: '10px',
+            },
+            message: {
+                borderLeft: 'solid 1px red',
+                paddingLeft: '10px',
+            },
+        },
+    },
+};
+
+const VegaAdvancedMode = ({ p, value, onChange, onClear }) => {
+    const [currentValue, setCurrentValue] = useState(value || '{}');
+    const [error, setError] = useState(null);
+
+    const valueObject = useMemo(() => {
+        try {
+            const json = JSON.parse(value);
+            setError(null);
+            return json;
+        } catch (e) {
+            setError(e);
+            return null;
+        }
+    }, [value]);
+
+    const currentValueObject = useMemo(() => {
+        try {
+            const json = JSON.parse(currentValue);
+            setError(null);
+            return json;
+        } catch (e) {
+            setError(e);
+            return null;
+        }
+    }, [currentValue]);
+
+    useEffect(() => {
+        if (!isEqual(currentValueObject, valueObject)) {
+            onChange(currentValue);
+        }
+    }, [currentValueObject, valueObject]);
+
+    const handleChange = event => {
+        setCurrentValue(event.target.value);
+    };
+
+    return (
+        <>
+            <div
+                style={{
+                    display: 'flex',
+                    flexDirection: 'row',
+                    flex: 1,
+                }}
+            >
+                <div>
+                    <Button
+                        onClick={onClear}
+                        color="primary"
+                        variant="contained"
+                    >
+                        <CachedIcon
+                            sx={{
+                                marginRight: '10px',
+                            }}
+                        />
+                        {p.t('regenerate_vega_lite_spec')}
+                    </Button>
+                </div>
+                <div
+                    style={{
+                        marginLeft: 'auto',
+                        marginRight: 'auto',
+                    }}
+                >
+                    {error ? (
+                        <Tooltip
+                            title={
+                                <div>
+                                    <p>{p.t('vega_json_error')}</p>
+                                    <p>{error.message}</p>
+                                </div>
+                            }
+                        >
+                            <ReportProblemIcon
+                                fontSize="large"
+                                sx={{
+                                    color: 'red',
+                                }}
+                            />
+                        </Tooltip>
+                    ) : null}
+                </div>
+            </div>
+            <TextField
+                onChange={handleChange}
+                value={currentValue}
+                fullWidth
+                multiline
+            />
+            {error ? (
+                <div style={styles.error.container}>
+                    <div style={styles.error.message.container}>
+                        <div style={styles.error.message.icon}>
+                            <ReportProblemIcon fontSize="large" />
+                        </div>
+                        <div style={styles.error.message.message}>
+                            <p>{p.t('vega_json_error')}</p>
+                            <p>{error.message}</p>
+                        </div>
+                    </div>
+                </div>
+            ) : null}
+        </>
+    );
+};
+
+VegaAdvancedMode.propTypes = {
+    p: polyglotPropTypes.isRequired,
+    value: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+    onClear: PropTypes.func.isRequired,
+};
+
+export default translate(VegaAdvancedMode);