修改问题

src/views/plots/js/magnifier.js

+import {AbstractTool} from '@int/geotoolkit/controls/tools/AbstractTool';
+import {Dimension} from '@int/geotoolkit/util/Dimension';
+import {Rectangle} from '@int/geotoolkit/scene/shapes/Rectangle';
+import {getAbsolutePosition, createCanvasElement} from '@int/geotoolkit/dom';
+import '../styles/magnifier.css';
+
+const addEventListener = function (target, eventName, eventHandler) {
+    AbstractTool.getNativeEventName(eventName).forEach((event) => {
+        target.addEventListener(event, eventHandler, true);
+    });
+};
+
+const removeEventListener = function (target, eventName, eventHandler) {
+    AbstractTool.getNativeEventName(eventName).forEach((event) => {
+        target.removeEventListener(event, eventHandler, true);
+    });
+};
+
+const getClientPosition = function (eventArgs) {
+    let clientX = 0, clientY = 0;
+    if (eventArgs.touches != null && eventArgs.touches.length > 0) {
+        // touch events
+        clientX = eventArgs.touches[0].screenX;
+        clientY = eventArgs.touches[0].screenY;
+    } else {
+        // click events
+        clientX = eventArgs.screenX;
+        clientY = eventArgs.screenY;
+    }
+    return {
+        x: clientX,
+        y: clientY
+    };
+};
+
+export class Magnifier {
+    constructor () {
+        this._visible = false;
+        this._canvas = null;
+        this._size = 20;
+        this._x = 0;
+        this._y = 0;
+        this._lastPickTime = 0;
+
+        this.initializeUI();
+    }
+
+    initializeUI () {
+        this._magnifierDialog = document.createElement('div');
+        this._magnifierDialog.classList.add('magnifier-dialog');
+        this._magnifierDialog.style.display = 'none';
+        this._magnifierDialog.style.zIndex = 1003;
+
+        document.body.appendChild(this._magnifierDialog);
+
+        this._canvas = createCanvasElement(256, 256);
+        this._canvas.id = 'magnifier-canvas';
+        this._magnifierDialog.appendChild(this._canvas);
+
+        this._onWindowMouseMove = this.onWindowMouseMove.bind(this);
+        this._onWindowMouseUp = this.onWindowMouseUp.bind(this);
+
+        const onMouseDown = (eventArgs) => {
+            this.start(eventArgs);
+        };
+        addEventListener(this._magnifierDialog, 'pointerdown', onMouseDown);
+        addEventListener(this._canvas, 'pointerdown', onMouseDown);
+    }
+
+    start (eventArgs) {
+        if (this._position != null) return;
+        eventArgs.stopPropagation();
+        eventArgs.cancelBubble = true;
+
+        addEventListener(window, 'pointermove', this._onWindowMouseMove);
+        addEventListener(window, 'pointerup', this._onWindowMouseUp);
+
+        this._position = getAbsolutePosition(this._magnifierDialog);
+        this._mousePosition = getClientPosition(eventArgs);
+    }
+
+    stop () {
+        removeEventListener(window, 'pointermove', this._onWindowMouseMove);
+        removeEventListener(window, 'pointerup', this._onWindowMouseUp);
+
+        this._position = null;
+        this._mousePosition = null;
+    }
+
+    onWindowMouseMove (eventArgs) {
+        if (eventArgs.buttons === 0) { // bug in IE11: pointer up events can't be caught outside iframe
+            this.onWindowMouseUp();
+            return;
+        }
+        eventArgs.preventDefault();
+        eventArgs.stopPropagation();
+        eventArgs.cancelBubble = true;
+
+        const mousePosition = getClientPosition(eventArgs);
+        this._position.x += mousePosition.x - this._mousePosition.x;
+        this._position.y += mousePosition.y - this._mousePosition.y;
+
+        this._magnifierDialog.style.left = this._position.x + 'px';
+        this._magnifierDialog.style.top = this._position.y + 'px';
+        this._mousePosition = mousePosition;
+    }
+
+    onWindowMouseUp (eventArgs) {
+        this.stop();
+    }
+
+    getVisible () {
+        return this._visible;
+    }
+
+    setVisible (visible) {
+        if (this._visible === visible) return this;
+        this._visible = visible;
+
+        if (this._visible === true) {
+            this._magnifierDialog.style.display = '';
+        } else {
+            this._magnifierDialog.style.display = 'none';
+        }
+        this._magnifierFrame.setVisible(this._visible);
+        return this;
+    }
+
+    setPipeline (pipeline, manipulatorLayer) {
+        this._pipeline = pipeline;
+        if (this._manipulatorLayer != null) return this;
+
+        this._manipulatorLayer = manipulatorLayer;
+        this._magnifierFrame = new Rectangle(0, 0, 0, 0)
+            .setVisible(false)
+            .setLineStyle({
+                'pixelsnapmode': true
+            })
+            .setFillStyle('rgba(255,0,0,0.1)');
+        this._manipulatorLayer.addChild(this._magnifierFrame);
+        return this;
+    }
+
+    setFrame (x, y, size) {
+        const visualLayer = this._manipulatorLayer;
+        if (!(size instanceof Dimension)) {
+            size = new Dimension(size, size);
+        }
+
+        size = visualLayer.getSceneTransform().inverseTransformDimension(size, size);
+
+        this._magnifierFrame.setRect(x - size.width / 2, y - size.height / 2, x + size.width / 2, y + size.height / 2)
+            .setVisible(true);
+    }
+
+    pickFrame (x, y) {
+        if (!Number.isFinite(x) || !Number.isFinite(y)) {
+            this._canvas.getContext('2d').clearRect(0, 0, this._canvas.width, this._canvas.height);
+            return;
+        }
+        const pickTime = Date.now();
+        this._lastPickTime = pickTime;
+        this.setFrame(x, y, this._size);
+        this._pipeline.exportToImage(this._magnifierFrame.getBounds(), this._canvas, null, 0, 0, null,
+            () => (pickTime === this._lastPickTime));
+    }
+
+    dispose () {
+        if (this._position != null) {
+            this.stop();
+        }
+        this._magnifierDialog.removeChild(this._canvas);
+        this._canvas = null;
+        document.body.removeChild(this._magnifierDialog);
+        this._magnifierDialog.classList.remove('magnifier-dialog');
+        this._magnifierDialog = null;
+    }
+}

src/views/plots/js/nodeserverdataprovider.js

+import {implementsInterface} from '@int/geotoolkit/base';
+import {HttpClient} from '@int/geotoolkit/http/HttpClient';
+import {HttpCancel} from '@int/geotoolkit/http/HttpCancel';
+import {Promise} from '@int/geotoolkit/util/Promise';
+import {RemoteReaderDataProvider} from '@int/geotoolkit/seismic/data/RemoteReaderDataProvider';
+import {IServerSideRenderingProvider} from '@int/geotoolkit/seismic/data/IServerSideRenderingProvider';
+import {RemoteReaderDataProviderRegistry} from '@int/geotoolkit/seismic/data/RemoteReaderDataProviderRegistry';
+import {ErrorCodes} from '@int/geotoolkit/http/ErrorCodes';
+import {obfuscate} from '@int/geotoolkit/lib';
+import {log} from '@int/geotoolkit/base';
+export class NodeServerDataProvider extends RemoteReaderDataProvider {
+    constructor (options) {
+        super(options);
+        this.options = options;
+        this.http = HttpClient.getInstance().getHttp();
+        this.token = null;
+        this.fileName = '';
+    }
+
+    createInstance (options) {
+        return new NodeServerDataProvider(options);
+    }
+
+    open (fileName) {
+        this.fileName = fileName;
+        return this.http.get('seismicdata/' + encodeURIComponent(fileName), {
+            'responseType': 'json',
+            'baseURL': this.options['host']
+        }).then((response) => {
+            if (response['data'] && response['data']['version']) {
+                return response['data'];
+            }
+            return Promise.reject('Server error');
+        }, () => Promise.reject('Cannot connect to the server! Run node server.js!'));
+    }
+
+    queryTraces (fileName, query) {
+        const token = new HttpCancel();
+        return this.http.get('seismicquery/' + encodeURIComponent(fileName), {
+            'responseType': 'json',
+            'baseURL': this.options['host'],
+            'cancel': token
+        }).then((response) => {
+            if (response['data'] && response['data']['version']) {
+                return response['data'];
+            }
+            return Promise.reject('Server error');
+        }, (error) => {
+            if (token.isCanceled()) {
+                return Promise.reject(error);
+            }
+            return Promise.reject('Cannot connect to the server! Run node server.js!');
+        });
+    }
+
+    readTraces (fileName, options) {
+        if (options && !Array.isArray(options['traceIndexes'])) {
+            options['traceIndexes'] = [];
+            for (let i = options['from']; i <= options['to']; ++i) {
+                options['traceIndexes'].push(i);
+            }
+        }
+        return this.http.request({
+            'url': 'enumeratedtraces',
+            'baseURL': this.options['host'],
+            'method': 'POST',
+            'responseType': 'arraybuffer',
+            'headers': {
+                'Content-Type': 'application/json'
+            },
+            'data': {
+                'file': fileName,
+                'byteOrder': options['byteOrder'],
+                'query': options['query'],
+                'data': {
+                    'byteOrder': options['byteOrder'],
+                    'samples': options['samples'] === true,
+                    'headers': options['headers'] === true,
+                    'traceIndexes': options['traceIndexes']
+                }
+            },
+            'transformResponse': (response) => response['data']
+        });
+    }
+
+    pickSample (x, y, target, callback) {
+        const self = this;
+        if (this.token) {
+            this.token.cancel();
+        }
+        this.token = new HttpCancel();
+        this.http.get('samples', {
+            'responseType': 'json',
+            'baseURL': this.options['host'],
+            'cancel': self.token,
+            'params': {
+                'json': JSON.stringify({
+                    x: x,
+                    y: y,
+                    file: this.fileName
+                })
+            }
+        }).then((response) => {
+            self.token = null;
+            callback.call(target, response['data']);
+        }).catch((error) => {
+            if (this.token && !this.token.isCanceled() && error.code !== ErrorCodes.Aborted) {
+                log(error);
+            }
+        });
+    }
+    getTileURLFormatter () {
+        return (data) => encodeURI(this.options['host'] + 'seismicimage?json=' + JSON.stringify({
+            'width': data['deviceArea'].getWidth(),
+            'height': data['deviceArea'].getHeight(),
+            'options': data['options'],
+            'limits': {
+                'starttrace': data['tileRect'].getX(),
+                'startsample': data['tileRect'].getY(),
+                'traceend': data['tileRect'].getRight(),
+                'sampleend': data['tileRect'].getBottom()
+            },
+            'file': this.fileName
+        }));
+    }
+    getTileLoader () {
+        return (data, callback) => {
+            const token = new HttpCancel();
+            this.http.get(data['url'], {
+                'responseType': null,
+                'cancel': token
+            }).then((response) => {
+                if (response['data']) {
+                    callback(null, response['data']);
+                } else {
+                    callback('Server error');
+                }
+            }).catch((error) => {
+                if (!token.isCanceled() && error['code'] !== ErrorCodes.Aborted) {
+                    callback(error);
+                }
+            });
+            return token;
+        };
+    }
+}
+implementsInterface(NodeServerDataProvider, IServerSideRenderingProvider);
+obfuscate(NodeServerDataProvider);
+RemoteReaderDataProviderRegistry.getInstance().register('node', new NodeServerDataProvider());

src/views/plots/styles/magnifier.css

+.magnifier-dialog {
+    position:absolute;
+    z-index: 100;
+    left:50px;
+    top:100px;
+    width:270px;
+    height:270px;
+    background-color: #F9F9F9;
+    border: 1px solid #ddd;
+    border-radius:4px;
+}
+
+#magnifier-canvas {
+    position:absolute;
+    left:5px;
+    top:5px;
+    right:5px;
+    bottom:5px;
+    background-color: white;
+    border: 1px solid #ddd;
+    border-radius:2px;
+}

src/views/plots/styles/toolbar.css

+/* Default Toolbar CSS */
+/* font-awesome for button icons */
+/*@import 'font-awesome.css';*/
+/* toolbar container for canvas + all toolbars */
+.cg-toolbar-container {
+    background-color: white;
+    position: relative;
+}
+.cg-toolbar-container > canvas {
+    margin: 0;
+}
+/* toolbar classes: */
+.cg-toolbar-left, .cg-toolbar-top, .cg-toolbar-right, .cg-toolbar-bottom {
+    display: flex;
+    pointer-events: none;
+}
+
+/* toolbar directions: */
+.cg-toolbar-left, .cg-toolbar-right {
+    flex-direction: column;
+}
+
+.cg-toolbar-top, .cg-toolbar-bottom {
+    flex-direction: row;
+}
+
+/* snap items to the right/bottom: */
+.cg-toolbar-right, .cg-toolbar-bottom {
+    align-items: flex-end;
+}
+
+/* group of buttons class: */
+.cg-toolbar-group {
+    display: flex;
+    flex-direction: inherit;
+    align-items: inherit;
+    border-radius: inherit;
+}
+
+/* gap between groups */
+.cg-toolbar-left .cg-toolbar-group + .cg-toolbar-group,
+.cg-toolbar-right .cg-toolbar-group + .cg-toolbar-group {
+    margin-top: 15px;
+}
+
+.cg-toolbar-top .cg-toolbar-group + .cg-toolbar-group,
+.cg-toolbar-bottom .cg-toolbar-group + .cg-toolbar-group {
+    margin-left: 15px;
+}
+
+/* single button class: */
+.cg-toolbar-button {
+    height: auto;
+    text-align: center;
+    cursor: pointer;
+    color: black;
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
+    pointer-events: all;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+/* checkbox class: */
+.cg-toolbar-checkbox {
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+/* checkbox inner text class: */
+.cg-toolbar-checkbox-text {
+    display: inline-block;
+}
+
+span + .cg-toolbar-checkbox-text {
+    margin-left: 3px;
+}
+
+/* dropdown button class: */
+.cg-toolbar-dropdown {
+    display: flex;
+    border-radius: inherit;
+}
+
+/* dropdown directions: */
+.cg-toolbar-left .cg-toolbar-dropdown {
+    flex-direction: row;
+}
+
+.cg-toolbar-top .cg-toolbar-dropdown {
+    flex-direction: column;
+}
+
+.cg-toolbar-right .cg-toolbar-dropdown {
+    flex-direction: row-reverse;
+}
+
+.cg-toolbar-bottom .cg-toolbar-dropdown {
+    flex-direction: column-reverse;
+}
+
+/* first (dropdown) button inherits size from dropdown: */
+.cg-toolbar-dropdown > :first-child {
+    width: inherit;
+    min-width: inherit;
+    height: inherit;
+    min-height: inherit;
+    line-height: inherit;
+}
+
+/* dropdown over the other buttons: */
+.cg-toolbar-dropdown > :not(:first-child) {
+    z-index: 1;
+}
+
+/* hide dropdown buttons if not hover: */
+.cg-toolbar-dropdown:not(:hover):not(.cg-toolbar-checked) > :not(:first-child) {
+    display: none;
+}
+
+/* checked style for checkboxes (doesn't affect dropdowns): */
+.cg-toolbar-checked:not(.cg-toolbar-dropdown) {
+    background-color: rgb(0, 195, 0) !important;
+    color: white;
+}
+
+/* buttons highlight on hover: */
+.cg-toolbar-button.cg-toolbar-checked:hover > :not(.cg-toolbar-button),
+.cg-toolbar-button:not(.cg-toolbar-checked):not(:hover) > :not(.cg-toolbar-button) {
+    opacity: 0.7;
+}
+
+/* gap between buttons: */
+.cg-toolbar-gap {
+    pointer-events: none;
+    cursor: pointer;
+}
+
+.cg-toolbar-top .cg-toolbar-dropdown > .cg-toolbar-gap, .cg-toolbar-bottom .cg-toolbar-dropdown > .cg-toolbar-gap {
+    pointer-events: all;
+    width: 100% !important;
+}
+
+.cg-toolbar-left .cg-toolbar-dropdown > .cg-toolbar-gap, .cg-toolbar-right .cg-toolbar-dropdown > .cg-toolbar-gap {
+    pointer-events: all;
+    height: 100% !important;
+}
+
+/* buttons border-radius (inherit from toolbar defined by user): */
+.cg-toolbar-left .cg-toolbar-dropdown:first-child > :first-child,
+.cg-toolbar-right .cg-toolbar-dropdown:first-child > :first-child,
+.cg-toolbar-bottom .cg-toolbar-dropdown > :last-child,
+.cg-toolbar-left .cg-toolbar-group > :first-child,
+.cg-toolbar-right .cg-toolbar-group > :first-child {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+}
+
+.cg-toolbar-left .cg-toolbar-dropdown:last-child > :first-child,
+.cg-toolbar-right .cg-toolbar-dropdown:last-child > :first-child,
+.cg-toolbar-top .cg-toolbar-dropdown > :last-child,
+.cg-toolbar-left .cg-toolbar-group > :last-child,
+.cg-toolbar-right .cg-toolbar-group > :last-child {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+}
+
+.cg-toolbar-top .cg-toolbar-dropdown:first-child > :first-child,
+.cg-toolbar-bottom .cg-toolbar-dropdown:first-child > :first-child,
+.cg-toolbar-right .cg-toolbar-dropdown > :last-child,
+.cg-toolbar-top .cg-toolbar-group > :first-child,
+.cg-toolbar-bottom .cg-toolbar-group > :first-child {
+    border-top-left-radius: inherit;
+    border-bottom-left-radius: inherit;
+}
+
+.cg-toolbar-top .cg-toolbar-dropdown:last-child > :first-child,
+.cg-toolbar-bottom .cg-toolbar-dropdown:last-child > :first-child,
+.cg-toolbar-left .cg-toolbar-dropdown > :last-child,
+.cg-toolbar-top .cg-toolbar-group > :last-child,
+.cg-toolbar-bottom .cg-toolbar-group > :last-child {
+    border-top-right-radius: inherit;
+    border-bottom-right-radius: inherit;
+}
+
+.cg-toolbar-left .cg-toolbar-dropdown.cg-toolbar-checked > :first-child,
+.cg-toolbar-left .cg-toolbar-dropdown:hover > :first-child {
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+}
+
+.cg-toolbar-right .cg-toolbar-dropdown.cg-toolbar-checked > :first-child,
+.cg-toolbar-right .cg-toolbar-dropdown:hover > :first-child {
+    border-top-left-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+}
+
+.cg-toolbar-top .cg-toolbar-dropdown.cg-toolbar-checked > :first-child,
+.cg-toolbar-top .cg-toolbar-dropdown:hover > :first-child {
+    border-bottom-left-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+}
+
+.cg-toolbar-bottom .cg-toolbar-dropdown.cg-toolbar-checked > :first-child,
+.cg-toolbar-bottom .cg-toolbar-dropdown:hover > :first-child {
+    border-top-left-radius: 0 !important;
+    border-top-right-radius: 0 !important;
+}
+
+/* maplayers dropdown: */
+.cg-toolbar-maplayers {
+    border-radius: inherit;
+    font-size: 16px;
+}
+
+.cg-toolbar-maplayers > .cg-toolbar-gap {
+    pointer-events: all;
+    width: 100% !important;
+}
+
+.cg-toolbar-maplayers > .cg-toolbar-checkbox {
+    text-align: left;
+}
+
+/* maplayers subscript index */
+.cg-toolbar-maplayers {
+    counter-reset: layer-index;
+}
+
+.cg-toolbar-maplayers .cg-toolbar-button > span:after{
+    content: counter(layer-index);
+    vertical-align: sub;
+    font-size: x-small;
+    counter-increment: layer-index;
+    margin-left: 1px;
+}
+
+/* maplayers dropdown border-radius: */
+.cg-toolbar-left .cg-toolbar-maplayers > :first-child {
+    border-top-right-radius: inherit;
+}
+
+.cg-toolbar-right .cg-toolbar-maplayers > :first-child {
+    border-top-left-radius: inherit;
+}
+
+.cg-toolbar-top .cg-toolbar-maplayers > :first-child {
+    border-top-right-radius: inherit;
+}
+
+.cg-toolbar-bottom .cg-toolbar-maplayers > :last-child {
+    border-bottom-right-radius: inherit;
+}
+
+.cg-toolbar-top .cg-toolbar-maplayers > :last-child {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+}
+
+.cg-toolbar-left .cg-toolbar-maplayers > :last-child,
+.cg-toolbar-right .cg-toolbar-maplayers > :last-child:not(:first-child) {
+    border-bottom-right-radius: inherit;
+}
+
+.cg-toolbar-left .cg-toolbar-maplayers > :last-child:not(:first-child),
+.cg-toolbar-right .cg-toolbar-maplayers > :last-child {
+    border-bottom-left-radius: inherit;
+}
+
+.cg-toolbar-bottom .cg-toolbar-maplayers > :first-child {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+}

src/views/plots/ui/DialogPropertyUtils.js

+import {Units as AGCUnits, NoiseReductionMode} from '@int/geotoolkit/seismic/pipeline/processor/AGC';
+import {MementoDeserializationContext} from '@int/geotoolkit/persistence/MementoDeserializationContext';
+import {MementoSerializationContext} from '@int/geotoolkit/persistence/MementoSerializationContext';
+import {UIRegistry} from '@int/geotoolkit/persistence/UIRegistry';
+import {createAjv as create} from 'jsonforms-core';
+import cloneDeep from 'lodash/cloneDeep';
+import schemas from '@int/geotoolkit/resources/schema';
+import set from 'lodash/set';
+import {InterpolationType} from '@int/geotoolkit/seismic/pipeline/InterpolationType';
+import {NormalizationType} from '@int/geotoolkit/seismic/pipeline/NormalizationType';
+import {SeismicColors} from '@int/geotoolkit/seismic/util/SeismicColors';
+import {MathUtil} from '@int/geotoolkit/util/MathUtil';
+
+const registry = new UIRegistry();
+const colorMaps = SeismicColors.getDefault().listNameColorMaps();
+const InterpolationTypeKeys = Object.keys(InterpolationType);
+const NormalizationTypeKeys = Object.keys(NormalizationType);
+const AGCUnitsKeys = Object.keys(AGCUnits);
+const noiseReductionKeys = Object.keys(NoiseReductionMode);
+const noiseReductionKey = (value) => noiseReductionKeys.find((key) => NoiseReductionMode[key] === value);
+
+const getAjv = (options) => {
+    const createAjv = (patch) => {
+        let schema = JSON.parse(JSON.stringify(schemas));
+        patch = JSON.parse(JSON.stringify(patch));
+        const modify = (schema, patch) => {
+            for (const id in patch) {
+                if (schema['id'] === id || schema['$id'] === id) {
+                    for (const key in patch[id]) {
+                        const value = patch[id][key];
+                        if (value != null) {
+                            set(schema, key, value);
+                        } else {
+                            delete schema[key];
+                        }
+                    }
+                }
+            }
+            for (const key in schema) {
+                if (typeof schema[key] === 'object' && schema[key] != null) {
+                    schema[key] = modify(schema[key], patch);
+                }
+            }
+            return schema;
+        };
+        if (patch) {
+            schema = modify(schema, patch);
+        }
+        const ajv = create({
+            multipleOfPrecision: 3,
+            addUsedSchema: false
+        });
+        ajv.addFormat('color', /^((0x){0,1}|#{0,1})([0-9A-F]{8}|[0-9A-F]{6})$/i);
+        ajv.addSchema(schema);
+        return ajv;
+    };
+    return createAjv({
+        '/geotoolkit.seismic.widgets.SeismicWidget': {
+            'charts': {
+                'type': 'array',
+                'items': {
+                    'type': 'object',
+                    'properties': {
+                        'linestyle': {
+                            'type': 'string',
+                            'label': 'Color',
+                            'format': 'color'
+                        },
+                        'name': {
+                            'type': 'string',
+                            'label': 'Chart name',
+                            'enum': options.chartNames
+                        }
+                    }
+                }
+            },
+            'headers': {
+                'type': 'array',
+                'items': {
+                    'type': 'object',
+                    'properties': {
+                        'color': {
+                            'type': 'string',
+                            'label': 'Color',
+                            'format': 'color'
+                        },
+                        'name': {
+                            'type': 'string',
+                            'label': 'Chart name',
+                            'enum': options.chartNames
+                        }
+                    }
+                }
+            }
+        },
+        '/geotoolkit.seismic.pipeline.SeismicPipeline/properties/normalization/properties/scale': {
+            'minimum': 0.1,
+            'maximum': 5,
+            'multipleOf': 0.1,
+            'default': 0.3
+        },
+        '/geotoolkit.seismic.pipeline.SeismicPipeline/properties/colors/properties/colorMap': {
+            'type': 'string',
+            'enum': colorMaps
+        },
+        '/geotoolkit.seismic.pipeline.processor.AGC/properties/units': {
+            'type': 'string',
+            'enum': AGCUnitsKeys
+        },
+        '/geotoolkit.seismic.pipeline.processor.AGC/properties/noiseReduction': {
+            'type': 'string',
+            'enum': noiseReductionKeys
+        }
+    });
+};
+
+const getNodeProps = (node) => {
+    const context = new MementoSerializationContext(null, registry);
+    const widget = node.getWidget();
+    context.setObject(widget);
+    const props = context.getMemento();
+    props.scale.tracescale = MathUtil.round(props.scale.tracescale, 10);
+    props.scale.samplescale = MathUtil.round(props.scale.samplescale, 100);
+    props.pipeline.interpolation.traces.type = InterpolationTypeKeys[props.pipeline.interpolation.traces.type - 1];
+    props.pipeline.interpolation.samples.type = InterpolationTypeKeys[props.pipeline.interpolation.samples.type - 1];
+    props.pipeline.normalization.type = NormalizationTypeKeys[props.pipeline.normalization.type];
+    props.pipeline.normalization.limits.low = MathUtil.round(props.pipeline.normalization.limits.low, 100);
+    props.pipeline.normalization.limits.high = MathUtil.round(props.pipeline.normalization.limits.high, 100);
+    props.isServerRendering = true;
+    if (props.pipeline.dataProcessors.AGC != null) {
+        props.isServerRendering = false;
+        props.pipeline.dataProcessors.AGC.units = AGCUnitsKeys[props.pipeline.dataProcessors.AGC.units];
+    }
+    props.charts = props.auxiliarychart.charts.map((chart) => ({
+        linestyle: chart.linestyle,
+        name: chart.name
+    }));
+    const headers = [];
+    props.axes.headers.fields.forEach((field) => {
+        if (field.visible) {
+            headers.push({
+                color: field.color,
+                name: field.name
+            });
+        }
+    });
+    props.headers = headers;
+    const agcProcess = props.pipeline.processes.find((process) => process.name === 'AGC');
+    if (agcProcess) {
+        agcProcess.units = AGCUnitsKeys[agcProcess.units];
+        agcProcess.noiseReduction = noiseReductionKey(agcProcess.noiseReduction);
+    }
+    return props;
+};
+const setNodeProps = (node, props) => {
+    props = cloneDeep(props);
+    const widget = node.getWidget();
+    const headerNames = node.getChartNames();
+    props.pipeline.interpolation.traces.type = InterpolationType[props.pipeline.interpolation.traces.type];
+    props.pipeline.interpolation.samples.type = InterpolationType[props.pipeline.interpolation.samples.type];
+    props.pipeline.normalization.type = NormalizationType[props.pipeline.normalization.type];
+    if (!props.isServerRendering) {
+        props.pipeline.dataProcessors.AGC.units = AGCUnits[props.pipeline.dataProcessors.AGC.units];
+    }
+
+    const charts = [];
+    props.charts.forEach((chart) => {
+        if (chart.name !== '') {
+            charts.push({
+                linestyle: chart.linestyle,
+                name: chart.name,
+                visible: true
+            });
+        }
+    });
+    props.auxiliarychart.charts = charts;
+    const fields = headerNames.map((name) => {
+        const index = props.headers.findIndex((header) => header.name === name);
+        const color = index !== -1 ? props.headers[index].color || 'black' : 'black';
+        const visible = index !== -1;
+        return {color, name, visible};
+    });
+    props.axes.headers.fields = fields;
+
+    const context = new MementoDeserializationContext(props, registry);
+    const deserializer = context.getRegistry().getSerializer(widget.getClassName());
+    if (deserializer != null) {
+        deserializer.load(context, widget);
+        widget.invalidate();
+    }
+    return props;
+};
+export {getAjv, getNodeProps, setNodeProps};

src/views/plots/ui/PathToSeismicDialog.vue

+
+<template>
+  <v-dialog
+    v-model="showDialog"
+    persistent
+    :max-width="480"
+  >
+    <v-card>
+      <v-text-field
+        v-model="seismicPath"
+        label="Path to seismic for server"
+        outlined
+        dense
+        :max-width="200"
+        class="pt-6 pl-2 pr-2"
+      />
+      <v-btn
+        class="ma-2"
+        @click="$emit('cancel')"
+      >
+        Cancel
+      </v-btn>
+      <v-btn
+        class="primary ma-2"
+        @click="$emit('apply', seismicPath)"
+      >
+        Ok
+      </v-btn>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+import {VDialog, VCard, VTextField, VBtn} from 'vuetify/lib';
+
+export default {
+    name: 'PathToSeismicDialog',
+    components: {VDialog, VCard, VTextField, VBtn},
+    props: {
+        showDialog: Boolean,
+        path: String
+    },
+    data () {
+        return {
+            seismicPath: this.path
+        };
+    },
+    watch: {
+        path (val) {
+            this.path = val;
+        }
+    },
+    methods: {
+
+    }
+};
+</script>
+
+<style scoped>
+
+</style>

src/views/plots/ui/PropertiesDialog.vue

+<template>
+  <v-dialog
+    v-model="showDialog"
+    max-width="720px"
+    persistent
+    style="z-index: 1005;"
+    @keydown.esc="onClose"
+  >
+    <v-card
+      min-height="700px"
+      class="d-flex flex-column"
+    >
+      <v-card-title
+        class="headline pb-0"
+      >
+        Seismic properties
+      </v-card-title>
+      <v-card-text class="pb-0">
+        <v-container>
+          <JsonForms
+            :schema="schema"
+            :ajv="ajv"
+            :uischema="uischema"
+            :data="nodeProps"
+            :renderers="materialRenderers"
+            :on-change="applyProperties"
+          />
+        </v-container>
+      </v-card-text>
+      <v-spacer />
+      <v-card-actions>
+        <v-spacer />
+        <v-btn
+          text
+          @click="onApply"
+        >
+          Ok
+        </v-btn>
+        <v-btn
+          text
+          @click="onClose"
+        >
+          Close
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+<script>
+import {JsonForms} from 'jsonforms-vue';
+import {materialRenderers} from 'jsonforms-vue-material';
+import {VContainer, VDialog} from 'vuetify/lib';
+import {uischema} from './uischema.js';
+
+export default {
+    name: 'SeismicPropertiesDialog',
+    components: {VContainer, VDialog, JsonForms},
+    props: {
+        showDialog: Boolean,
+        nodeProps: {
+            type: Object,
+            default: () => {}
+        },
+        ajv: {
+            type: Object,
+            default: () => {}
+        },
+        schema: {
+            type: Object,
+            default: () => {}
+        }
+    },
+    data: function () {
+        return {
+            uischema: uischema,
+            materialRenderers: [],
+            propertiesData: null
+        };
+    },
+    created () {
+        this.materialRenderers = [...materialRenderers];
+    },
+    methods: {
+        onClose () {
+            this.$emit('close');
+        },
+        applyProperties (value) {
+            const {errors, data} = value;
+            this.propertiesData = errors.length > 0 ? null : data;
+        },
+        onApply () {
+            this.$emit('close', this.propertiesData);
+        }
+    }
+};
+</script>
+