Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Upgrade to deck.gl v9 and typescript, add 2 packages dependancies network-map-layers and single-line-diagram-viewer #91

Draft
wants to merge 10 commits into
base: main
Choose a base branch
from
Draft

Upgrade to deck.gl v9 and typescript, add 2 packages dependancies network-map-layers and single-line-diagram-viewer #91

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
a2ea523
Upgrade deck.gl to v9.0
flomillot May 17, 2024
5c04d02
update to deck.glb9 and migrate to typescript
amarant Jul 8, 2024
0277b3c
fix remaining ts errors
amarant Jul 25, 2024
421d0c7
export layers to their own package
amarant Jul 26, 2024
8325785
move single-line-diagram-viewer in its own package
amarant Jul 26, 2024
0f501ef
fix selection regression in map
amarant Jul 26, 2024
5d014bc
remove svg type
amarant Jul 26, 2024
dd2696d
fix git ignore
amarant Jul 26, 2024
9173ca8
use pot texture
amarant Jul 30, 2024
e4edeef
fix type exports, deck/luma as peers, default fct
amarant Sep 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 11 additions & 3 deletions .eslintrc.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,20 @@ module.exports = {
'plugin:react-hooks/recommended',
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:prettier/recommended'
'plugin:prettier/recommended',
],
env: {
"browser": true
browser: true,
},
rules: {
"prettier/prettier": "warn",
'prettier/prettier': 'warn',
'@typescript-eslint/no-unused-vars': [
'error',
{
argsIgnorePattern: '^_',
varsIgnorePattern: '^_',
caughtErrorsIgnorePattern: '^_',
},
],
},
};
48 changes: 25 additions & 23 deletions .github/config/.licenserc.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,28 @@
header:
license:
spdx-id: MPL-2.0
pattern: |
Copyright copyright \d{4}, RTE \(http:\/\/www\.rte-france\.com\)
This Source Code Form is subject to the terms of the Mozilla Public
License, v\. 2\.0\. If a copy of the MPL was not distributed with this
file, You can obtain one at http:\/\/mozilla\.org\/MPL\/2\.0\/\.
license:
spdx-id: MPL-2.0
pattern: |
Copyright copyright \d{4}, RTE \(http:\/\/www\.rte-france\.com\)
This Source Code Form is subject to the terms of the Mozilla Public
License, v\. 2\.0\. If a copy of the MPL was not distributed with this
file, You can obtain one at http:\/\/mozilla\.org\/MPL\/2\.0\/\.

paths-ignore:
- 'dist'
- 'licenses'
- '**/*.md'
- 'LICENSE'
- 'NOTICE'
- 'Dockerfile'
- '**/.*'
- '**/*.txt'
- '**/*.json'
- '**/*.yaml'
- '**/*.yml'
- '**/*.svg'
- '**/*.css'
- '**/*.conf'
paths-ignore:
- 'dist'
- 'licenses'
- '**/*.md'
- 'LICENSE'
- 'NOTICE'
- 'Dockerfile'
- '**/.*'
- '**/*.txt'
- '**/*.json'
- '**/*.yaml'
- '**/*.yml'
- '**/*.svg'
- '**/*.css'
- '**/*.conf'
- '**/*.frag'
- '**/*.vert'

comment: on-failure
comment: on-failure
3 changes: 3 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,3 +19,6 @@
/demo/dist


# packages
/packages/*/node_modules
/packages/*/dist
49 changes: 25 additions & 24 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,29 +4,30 @@
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.
-->
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="network map viewer demo app"
/>
<title>SVG Viewers Examples</title>
<link rel="stylesheet" href="src/style.css" />
</head>
<body>
<div class="flex-container">
<div id="root"></div>
<div class="break"></div>
<div id="svg-container"></div>
<div id="svg-container-sld"></div>
<div id="svg-container-sld-with-callbacks"></div>
<div class="break"></div>
<div id="svg-container-sldsub-with-callbacks"></div>
</div>
<script type="module" src="/src/index.jsx"></script>
</body>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="network map viewer demo app" />
<!-- <script
src="https://greggman.github.io/webgl-lint/webgl-lint.js"
crossorigin
></script> -->
<title>SVG Viewers Examples</title>
<link rel="stylesheet" href="src/style.css" />
</head>
<body>
<div class="flex-container">
<div id="root"></div>
<div class="break"></div>
<div id="svg-container"></div>
<div id="svg-container-sld"></div>
<div id="svg-container-sld-with-callbacks"></div>
<div class="break"></div>
<div id="svg-container-sldsub-with-callbacks"></div>
</div>
<script type="module" src="/src/index.tsx"></script>
</body>
</html>
32 changes: 20 additions & 12 deletions demo/src/App.jsx → demo/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,23 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/

import React, { useEffect, useRef } from 'react';
import { NetworkMap, GeoData } from '../../src/';
import { GeoData, NetworkMap } from '@/index';
import {
createTheme,
ThemeProvider,
StyledEngineProvider,
ThemeProvider,
createTheme,
} from '@mui/material/styles';
import { useEffect, useRef } from 'react';

import DemoMapEquipments from './map-viewer/demo-map-equipments';

import sposdata from './map-viewer/data/spos.json';
import { NetworkMapRef } from '@/components/network-map-viewer/network/network-map';
import { Equipment } from '@powsybl/network-map-layers';
import { addNadToDemo, addSldToDemo } from './diagram-viewers/add-diagrams';
import lmapdata from './map-viewer/data/lmap.json';
import lposdata from './map-viewer/data/lpos.json';
import smapdata from './map-viewer/data/smap.json';
import lmapdata from './map-viewer/data/lmap.json';
import { addNadToDemo, addSldToDemo } from './diagram-viewers/add-diagrams';
import sposdata from './map-viewer/data/spos.json';

function App() {
const INITIAL_ZOOM = 9;
Expand All @@ -33,7 +35,12 @@ function App() {
}, []);

//called after a click (right mouse click) on an equipment (line or substation)
function showEquipmentMenu(equipment, x, y, type) {
function showEquipmentMenu(
equipment: Equipment,
x: number,
y: number,
type: string
) {
console.log(
'# Show equipment menu: ' +
JSON.stringify(equipment) +
Expand All @@ -46,6 +53,7 @@ function App() {
palette: {
mode: 'dark',
},
// @ts-expect-error: TODO not present in ThemeOptions
link: {
color: 'green',
},
Expand All @@ -69,7 +77,7 @@ function App() {
const mapEquipments = new DemoMapEquipments(smapdata, lmapdata);

useEffect(() => {
const handleContextmenu = (e) => {
const handleContextmenu = (e: MouseEvent) => {
e.preventDefault();
};
document.addEventListener('contextmenu', handleContextmenu);
Expand All @@ -78,7 +86,7 @@ function App() {
};
}, []);

const networkMapRef = useRef();
const networkMapRef = useRef<NetworkMapRef>(null);
const filteredNominalVoltages = [380.0, 225.0, 110.0];

return (
Expand Down Expand Up @@ -138,12 +146,12 @@ function App() {
onPolygonChanged={() => {
console.log(
'Selected Substations: ',
networkMapRef.current.getSelectedSubstations()
networkMapRef.current?.getSelectedSubstations()
.length
);
console.log(
'Selected Lines: ',
networkMapRef.current.getSelectedLines()
networkMapRef.current?.getSelectedLines()
.length
);
}}
Expand Down
67 changes: 45 additions & 22 deletions demo/src/diagram-viewers/add-diagrams.js → demo/src/diagram-viewers/add-diagrams.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,27 @@
*/

import NadSvgExample from './data/nad-example.svg';
import SldSvgExampleMeta from './data/sld-example-meta.json' assert { type: 'json' };
import SldSvgExample from './data/sld-example.svg';
import SldSvgExampleMeta from './data/sld-example-meta.json';
import SldSvgSubExampleMeta from './data/sld-sub-example-meta.json' assert { type: 'json' };
import SldSvgSubExample from './data/sld-sub-example.svg';
import SldSvgSubExampleMeta from './data/sld-sub-example-meta.json';

import { NetworkAreaDiagramViewer } from '../../../src/components/network-area-diagram-viewer/network-area-diagram-viewer';
import { SingleLineDiagramViewer } from '../../../src/components/single-line-diagram-viewer/single-line-diagram-viewer';
import { NetworkAreaDiagramViewer } from '@/components/network-area-diagram-viewer/network-area-diagram-viewer';
import {
HandleTogglePopoverType,
OnBreakerCallbackType,
OnBusCallbackType,
OnFeederCallbackType,
OnNextVoltageCallbackType,
SingleLineDiagramViewer,
} from '@powsybl/single-line-diagram-viewer';

export const addNadToDemo = () => {
fetch(NadSvgExample)
.then((response) => response.text())
.then((svgContent) => {
new NetworkAreaDiagramViewer(
document.getElementById('svg-container'),
document.getElementById('svg-container')!,
svgContent,
500,
600,
Expand All @@ -29,7 +36,7 @@ export const addNadToDemo = () => {

document
.getElementById('svg-container')
.getElementsByTagName('svg')[0]
?.getElementsByTagName('svg')[0]
.setAttribute('style', 'border:2px; border-style:solid;');
});
};
Expand All @@ -39,7 +46,7 @@ export const addSldToDemo = () => {
.then((response) => response.text())
.then((svgContent) => {
new SingleLineDiagramViewer(
document.getElementById('svg-container-sld'),
document.getElementById('svg-container-sld')!,
svgContent, //svg content
null, //svg metadata
'voltage-level',
Expand All @@ -57,15 +64,15 @@ export const addSldToDemo = () => {

document
.getElementById('svg-container-sld')
.getElementsByTagName('svg')[0]
?.getElementsByTagName('svg')[0]
.setAttribute('style', 'border:2px; border-style:solid;');
});

fetch(SldSvgExample)
.then((response) => response.text())
.then((svgContent) => {
new SingleLineDiagramViewer(
document.getElementById('svg-container-sld-with-callbacks'),
document.getElementById('svg-container-sld-with-callbacks')!,
svgContent, //svg content
SldSvgExampleMeta, //svg metadata
'voltage-level',
Expand All @@ -83,15 +90,15 @@ export const addSldToDemo = () => {

document
.getElementById('svg-container-sld-with-callbacks')
.getElementsByTagName('svg')[0]
?.getElementsByTagName('svg')[0]
.setAttribute('style', 'border:2px; border-style:solid;');
});

fetch(SldSvgSubExample)
.then((response) => response.text())
.then((svgContent) => {
new SingleLineDiagramViewer(
document.getElementById('svg-container-sldsub-with-callbacks'),
document.getElementById('svg-container-sldsub-with-callbacks')!,
svgContent, //svg content
SldSvgSubExampleMeta, //svg metadata
'substation',
Expand All @@ -109,28 +116,39 @@ export const addSldToDemo = () => {

document
.getElementById('svg-container-sldsub-with-callbacks')
.getElementsByTagName('svg')[0]
?.getElementsByTagName('svg')[0]
.setAttribute('style', 'border:2px; border-style:solid;');
});
};

const handleNextVL = (id) => {
const handleNextVL: OnNextVoltageCallbackType = (id: string) => {
const msg = 'Clicked on navigation arrow, dest VL is ' + id;
console.log(msg);
};

const handleSwitch = (id, switch_status, element) => {
const handleSwitch: OnBreakerCallbackType = (
id: string,
switch_status: boolean,
element: EventTarget | null
) => {
const msg =
'Clicked on switch: ' +
id +
', switch_status: ' +
(switch_status ? 'close' : 'open') +
'. elementId: ' +
element.id;
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- TODO no "id" prop existing
(element as any).id;
console.log(msg);
};

const handleFeeder = (id, feederType, svgId, x, y) => {
const handleFeeder: OnFeederCallbackType = (
id: string,
feederType: string | null,
svgId: string,
x: number,
y: number
) => {
const msg =
'Clicked on feeder: ' +
id +
Expand All @@ -145,17 +163,22 @@ const handleFeeder = (id, feederType, svgId, x, y) => {
console.log(msg);
};

const handleBus = (id, svgId, x, y) => {
const handleBus: OnBusCallbackType = (
id: string,
svgId: string,
x: number,
y: number
) => {
const msg =
'Clicked on bus: ' + id + ', svgId: ' + svgId + 'x: ' + x + ', y: ' + y;
console.log(msg);
};

const handleTogglePopover = (
shouldDisplay,
anchorEl,
equipmentId,
equipmentType
const handleTogglePopover: HandleTogglePopoverType = (
shouldDisplay: boolean,
anchorEl: EventTarget | null,
equipmentId: string,
equipmentType: string
) => {
if (shouldDisplay) {
const msg =
Expand Down
Loading