Skip to content

Commit 4d0075a

Browse files
Gauss-Taylor-EulermartinRenougithub-actions[bot]
authored
Embed side panels in map view (#784)
* Embedded panels * Add shadow * Update packages/base/src/panelview/components/layers.tsx Co-authored-by: martinRenou <[email protected]> * Made suggested changes * Solve a bug with identify panel * Make suggested changes * Made suggested changes * Lint * Solve a bug and made suggested changes * Made suggested changes * Add panels to notebook view * Made suggested changes * Solve annotations tests * Update Playwright Snapshots * Update Playwright Snapshots * Solved integration tests * Update Playwright Snapshots --------- Co-authored-by: martinRenou <[email protected]> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
1 parent 5d0a85c commit 4d0075a

File tree

56 files changed

+669
-1087
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+669
-1087
lines changed

‎packages/base/src/annotations/components/Annotation.tsx‎

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,37 +9,25 @@ import { showDialog, Dialog } from '@jupyterlab/apputils';
99
import { Button } from '@jupyterlab/ui-components';
1010
import React, { useMemo, useState } from 'react';
1111

12-
import { IControlPanelModel } from '@/src/types';
1312
import { Message } from './Message';
1413

1514
export interface IAnnotationProps {
1615
itemId: string;
1716
annotationModel: IAnnotationModel;
18-
rightPanelModel?: IControlPanelModel;
17+
jgisModel?: IJupyterGISModel;
1918
children?: JSX.Element[] | JSX.Element;
2019
}
2120

2221
const Annotation: React.FC<IAnnotationProps> = ({
2322
itemId,
2423
annotationModel,
25-
rightPanelModel,
24+
jgisModel,
2625
children,
2726
}) => {
2827
const [messageContent, setMessageContent] = useState('');
29-
const [jgisModel, setJgisModel] = useState<IJupyterGISModel | undefined>(
30-
rightPanelModel?.jGISModel,
31-
);
32-
3328
const annotation = annotationModel.getAnnotation(itemId);
3429
const contents = useMemo(() => annotation?.contents ?? [], [annotation]);
3530

36-
/**
37-
* Update the model when it changes.
38-
*/
39-
rightPanelModel?.documentChanged.connect((_, widget) => {
40-
setJgisModel(widget?.model);
41-
});
42-
4331
const handleSubmit = () => {
4432
annotationModel.addContent(itemId, messageContent);
4533
setMessageContent('');
@@ -98,7 +86,7 @@ const Annotation: React.FC<IAnnotationProps> = ({
9886
<Button className="jp-mod-styled jp-mod-warn" onClick={handleDelete}>
9987
<FontAwesomeIcon icon={faTrash} />
10088
</Button>
101-
{rightPanelModel && (
89+
{jgisModel && (
10290
<Button
10391
className="jp-mod-styled jp-mod-accept"
10492
onClick={centerOnAnnotation}

‎packages/base/src/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ export * from './icons';
88
export * from './mainview';
99
export * from './menus';
1010
export * from './panelview';
11-
export * from './stacBrowser';
1211
export * from './store';
12+
export * from './stacBrowser';
1313
export * from './toolbar';
1414
export * from './tools';
1515
export * from './types';

‎packages/base/src/keybindings.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
{
3838
"command": "jupytergis:renameLayer",
3939
"keys": ["F2"],
40-
"selector": ".data-jgis-keybinding .jp-gis-layerItem"
40+
"selector": ".jp-gis-layerItem"
4141
},
4242
{
4343
"command": "jupytergis:removeGroup",
@@ -47,7 +47,7 @@
4747
{
4848
"command": "jupytergis:renameGroup",
4949
"keys": ["F2"],
50-
"selector": ".data-jgis-keybinding .jp-gis-layerGroupHeader"
50+
"selector": ".jp-gis-layerGroupHeader"
5151
},
5252
{
5353
"command": "jupytergis:executeConsole",

‎packages/base/src/mainview/mainView.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
import { MapChange } from '@jupyter/ydoc';
22
import {
33
IAnnotation,
4+
IAnnotationModel,
45
IDict,
56
IGeoTiffSource,
67
IHeatmapLayer,
78
IHillshadeLayer,
89
IImageLayer,
910
IImageSource,
1011
IJGISFilterItem,
12+
IJGISFormSchemaRegistry,
1113
IJGISLayer,
1214
IJGISLayerDocChange,
1315
IJGISLayerTreeDocChange,
@@ -34,6 +36,7 @@ import {
3436
import { showErrorMessage } from '@jupyterlab/apputils';
3537
import { IObservableMap, ObservableMap } from '@jupyterlab/observables';
3638
import { User } from '@jupyterlab/services';
39+
import { IStateDB } from '@jupyterlab/statedb';
3740
import { CommandRegistry } from '@lumino/commands';
3841
import { JSONValue, UUID } from '@lumino/coreutils';
3942
import { ContextMenu } from '@lumino/widgets';
@@ -90,6 +93,7 @@ import CollaboratorPointers, { ClientPointer } from './CollaboratorPointers';
9093
import { FollowIndicator } from './FollowIndicator';
9194
import TemporalSlider from './TemporalSlider';
9295
import { MainViewModel } from './mainviewmodel';
96+
import { LeftPanel, RightPanel } from '../panelview';
9397

9498
type OlLayerTypes =
9599
| TileLayer
@@ -102,6 +106,9 @@ type OlLayerTypes =
102106
| ImageLayer<any>;
103107
interface IProps {
104108
viewModel: MainViewModel;
109+
state?: IStateDB;
110+
formSchemaRegistry?: IJGISFormSchemaRegistry;
111+
annotationModel?: IAnnotationModel;
105112
}
106113

107114
interface IStates {
@@ -123,6 +130,11 @@ interface IStates {
123130
export class MainView extends React.Component<IProps, IStates> {
124131
constructor(props: IProps) {
125132
super(props);
133+
this._state = props.state;
134+
135+
this._formSchemaRegistry = props.formSchemaRegistry;
136+
137+
this._annotationModel = props.annotationModel;
126138

127139
// Enforce the map to take the full available width in the case of Jupyter Notebook viewer
128140
const el = document.getElementById('main-panel');
@@ -2220,6 +2232,21 @@ export class MainView extends React.Component<IProps, IStates> {
22202232
scale={this.state.scale}
22212233
/>
22222234
</div>
2235+
2236+
{this._state && (
2237+
<LeftPanel
2238+
model={this._model}
2239+
commands={this._mainViewModel.commands}
2240+
state={this._state}
2241+
></LeftPanel>
2242+
)}
2243+
{this._formSchemaRegistry && this._annotationModel && (
2244+
<RightPanel
2245+
model={this._model}
2246+
formSchemaRegistry={this._formSchemaRegistry}
2247+
annotationModel={this._annotationModel}
2248+
></RightPanel>
2249+
)}
22232250
</>
22242251
);
22252252
}
@@ -2240,4 +2267,7 @@ export class MainView extends React.Component<IProps, IStates> {
22402267
private _originalFeatures: IDict<Feature<Geometry>[]> = {};
22412268
private _highlightLayer: VectorLayer<VectorSource>;
22422269
private _updateCenter: CallableFunction;
2270+
private _state?: IStateDB;
2271+
private _formSchemaRegistry?: IJGISFormSchemaRegistry;
2272+
private _annotationModel?: IAnnotationModel;
22432273
}

‎packages/base/src/mainview/mainviewwidget.tsx‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,40 @@
1+
import { IAnnotationModel, IJGISFormSchemaRegistry } from '@jupytergis/schema';
12
import { ReactWidget } from '@jupyterlab/apputils';
3+
import { IStateDB } from '@jupyterlab/statedb';
24
import * as React from 'react';
35

46
import { MainView } from './mainView';
57
import { MainViewModel } from './mainviewmodel';
68

9+
export interface IOptions {
10+
mainViewModel: MainViewModel;
11+
state?: IStateDB;
12+
formSchemaRegistry?: IJGISFormSchemaRegistry;
13+
annotationModel?: IAnnotationModel;
14+
}
15+
716
export class JupyterGISMainViewPanel extends ReactWidget {
817
/**
918
* Construct a `JupyterGISPanel`.
1019
*/
11-
constructor(options: { mainViewModel: MainViewModel }) {
20+
constructor(options: IOptions) {
1221
super();
13-
this._mainViewModel = options.mainViewModel;
22+
this._state = options.state;
1423
this.addClass('jp-jupytergis-panel');
24+
this._options = options;
1525
}
1626

1727
render(): JSX.Element {
18-
return <MainView viewModel={this._mainViewModel} />;
28+
return (
29+
<MainView
30+
state={this._state}
31+
viewModel={this._options.mainViewModel}
32+
formSchemaRegistry={this._options.formSchemaRegistry}
33+
annotationModel={this._options.annotationModel}
34+
/>
35+
);
1936
}
2037

21-
private _mainViewModel: MainViewModel;
38+
private _state?: IStateDB;
39+
private _options: IOptions;
2240
}

‎packages/base/src/panelview/annotationPanel.tsx‎

Lines changed: 7 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
1-
import { IAnnotationModel } from '@jupytergis/schema';
2-
import { PanelWithToolbar, ReactWidget } from '@jupyterlab/ui-components';
1+
import { IAnnotationModel, IJupyterGISModel } from '@jupytergis/schema';
32
import React, { Component } from 'react';
43

54
import Annotation from '@/src/annotations/components/Annotation';
6-
import { IControlPanelModel } from '@/src/types';
75

86
interface IAnnotationPanelProps {
97
annotationModel: IAnnotationModel;
10-
rightPanelModel: IControlPanelModel;
8+
jgisModel: IJupyterGISModel;
119
}
1210

1311
export class AnnotationsPanel extends Component<IAnnotationPanelProps> {
@@ -19,20 +17,10 @@ export class AnnotationsPanel extends Component<IAnnotationPanelProps> {
1917
};
2018

2119
this._annotationModel = props.annotationModel;
22-
this._rightPanelModel = props.rightPanelModel;
20+
this._jgisModel = props.jgisModel;
2321

24-
this._annotationModel.modelChanged.connect(async () => {
25-
// await this._annotationModel?.context?.ready;
26-
27-
this._annotationModel?.model?.sharedMetadataChanged.disconnect(
28-
updateCallback,
29-
);
30-
this._annotationModel = props.annotationModel;
31-
this._annotationModel?.model?.sharedMetadataChanged.connect(
32-
updateCallback,
33-
);
34-
this.forceUpdate();
35-
});
22+
this._annotationModel?.model?.sharedMetadataChanged.connect(updateCallback);
23+
this.forceUpdate();
3624
}
3725

3826
render(): JSX.Element {
@@ -46,7 +34,7 @@ export class AnnotationsPanel extends Component<IAnnotationPanelProps> {
4634
return (
4735
<div>
4836
<Annotation
49-
rightPanelModel={this._rightPanelModel}
37+
jgisModel={this._jgisModel}
5038
annotationModel={this._annotationModel}
5139
itemId={id}
5240
/>
@@ -59,37 +47,5 @@ export class AnnotationsPanel extends Component<IAnnotationPanelProps> {
5947
}
6048

6149
private _annotationModel: IAnnotationModel;
62-
private _rightPanelModel: IControlPanelModel;
63-
}
64-
65-
export class Annotations extends PanelWithToolbar {
66-
constructor(options: Annotations.IOptions) {
67-
super({});
68-
69-
this.title.label = 'Annotations';
70-
this.addClass('jgis-scrollable');
71-
72-
this._annotationModel = options.annotationModel;
73-
this._rightPanelModel = options.rightPanelModel;
74-
75-
this._widget = ReactWidget.create(
76-
<AnnotationsPanel
77-
rightPanelModel={this._rightPanelModel}
78-
annotationModel={this._annotationModel}
79-
/>,
80-
);
81-
82-
this.addWidget(this._widget);
83-
}
84-
85-
private _widget: ReactWidget;
86-
private _annotationModel: IAnnotationModel;
87-
private _rightPanelModel: IControlPanelModel;
88-
}
89-
90-
export namespace Annotations {
91-
export interface IOptions {
92-
annotationModel: IAnnotationModel;
93-
rightPanelModel: IControlPanelModel;
94-
}
50+
private _jgisModel: IJupyterGISModel;
9551
}

0 commit comments

Comments
 (0)