Skip to content

Commit

Permalink
save dragged edits to json
Browse files Browse the repository at this point in the history
  • Loading branch information
KatrinaTurner committed Sep 21, 2021
1 parent e3dbb1c commit fc2d32d
Show file tree
Hide file tree
Showing 14 changed files with 151 additions and 123 deletions.
23 changes: 13 additions & 10 deletions dist/MANIFEST.txt
Original file line number Diff line number Diff line change
Expand Up @@ -8,33 +8,36 @@ Hash: SHA512
"signedByOrg": "netsage",
"signedByOrgName": "netsage",
"rootUrls": [
"https://dashboard.stardust.es.net/",
"http://localhost:3000/",
"http://localhost:3002/"
],
"plugin": "esnet-networkmap-panel",
"version": "1.0.0",
"time": 1631641291015,
"time": 1632247361618,
"keyId": "7e4d0c6a708866e7",
"files": {
"LICENSE": "c71d239df91726fc519c6eb72d318ec65820627232b2f796219e87dcf35d0ab4",
"CHANGELOG.md": "f039df40cb9e6dffcd8eb814227ba03e47f686d447bfb45e5eae8bdf83fa9465",
"module.js.LICENSE.txt": "95efede2671f7967592b43ec0b831fb12fd69783319585840b25f3f9d2076392",
"module.js.map": "2e315107a561da076f71cd1c2720052616ac9d1dee5f85ea27b334af783c536b",
"plugin.json": "008a1a31acbc79b0dd50a4e79033871688348630137a9cb34986d651467656c6",
"module.js.LICENSE.txt": "e68cc4291e057f6098c3d5cd0b3cf642d252ff9ac1751db360770a65314a4d81",
"module.js.map": "feee188a37088299c85cb9a4983a148ceaebb00fdcad415d95c39426cc425ea4",
"plugin.json": "3d5d6d9ee4ce75a1434025c463e2882a1f6a9318e938fd301f88d362bec52302",
"README.md": "3c5b18e53d2dbde492fe9c3c962895851aac4ac0dcb7bada0755e85a0ede2658",
"img/slopegraph.png": "6522086b5717c31d334a4562bbec047e3d0050ee81ac081f4b2ab4d12e6ab9f1",
"img/logo.svg": "1defc6f7e585c67657bcfd8fddc599ee7dfa82f8674413f49fa274c2cd453ec6",
"components/cr copy.json": "e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855",
"components/old.html": "290fbe64cf9b0054e5c017f8c212c3d1ad51405b10b932f419f095add1804738",
"components/cr.json": "f13b9c598213b13198de1486b4044e3c2ed2752a1060c9dd99400de2b7a9ba81",
"module.js": "227fe31311002f7120ccdc6cbf1c797aa4ea761aa70dd9ee8170b3aa219a60ab"
"module.js": "533253b1179bd19f0a245a8849767ff6ec560a1df7d065c11dbd8fb51e23b99c"
}
}
-----BEGIN PGP SIGNATURE-----
Version: OpenPGP.js v4.10.1
Comment: https://openpgpjs.org

wqEEARMKAAYFAmFA3ssACgkQfk0ManCIZueBYQIJAWNobO19GoQ+FqcBWRkC
5FJns9c3h5PMUpEO/n4WhP5wfyNlpKzEk0VTrip4rlmD9huScRCnm/aqSTCJ
lDFpWZ/VAgYxPA8igL2e0W1pefJt++CoPl2QU6wBHjFcVliuQ99bwf0aqfvp
Ynz55cw6/BAFh22A0MMjWC6mC6YK0fH+RHuRUg==
=y8rp
wqIEARMKAAYFAmFKHkEACgkQfk0ManCIZufJYQIJAZQ4mXm0G1EDiVMHiMfl
BEzLPOsglnj793bSyqv4F4mkEXPcYKznkRL+FFLC7QWB4E/a48T9YVHBpyJb
T+iOF+YeAgkBLn2qbVIoVBENyNLSCq722ikLxUW73crS8qvt19P7sLTUmJ6S
7CVB1QwoM0Cv4Cd3jTTagoVeCQ4ONK7y7Ps4xmQ=
=tYy1
-----END PGP SIGNATURE-----
Empty file added dist/components/cr copy.json
Empty file.
2 changes: 1 addition & 1 deletion dist/module.js

Large diffs are not rendered by default.

15 changes: 15 additions & 0 deletions dist/module.js.LICENSE.txt
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,18 @@
* Leaflet 1.7.1, a JS library for interactive maps. http://leafletjs.com
* (c) 2010-2019 Vladimir Agafonkin, (c) 2010-2011 CloudMade
*/

/*! *****************************************************************************
Copyright (c) Microsoft Corporation.

Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
2 changes: 1 addition & 1 deletion dist/module.js.map

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/plugin.json
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
}
],
"version": "1.0.0",
"updated": "2021-09-14"
"updated": "2021-09-21"
},
"dependencies": {
"grafanaDependency": ">=7.0.0",
Expand Down
75 changes: 48 additions & 27 deletions src/MapPanel.tsx
Original file line number Diff line number Diff line change
@@ -1,37 +1,58 @@
import React from 'react';
import React, { Component } from 'react';
import { PanelProps } from '@grafana/data';
import { MapOptions } from 'types';
import { parseData } from 'dataParser';
import { Canvas } from 'components/Canvas';

interface Props extends PanelProps<MapOptions> {}

export const MapPanel: React.FC<Props> = ({ options, data, width, height, id }) => {
let graphOptions = {
...options,
};
var colors = {
defaultColor: graphOptions.color,
nodeHighlight: graphOptions.nodeHighlight,
};
var fields = {
srcField: graphOptions.srcField,
dstField: graphOptions.dstField,
valField: graphOptions.valField,
endpointId: graphOptions.endpointId,
};
var parsedData = {};
var mapData;
try {
parsedData = parseData(data, graphOptions.mapjson, colors, fields);
mapData = parsedData[3];
} catch (error) {
console.error('Parsing error : ', error);
export class MapPanel extends Component<Props> {
//= ({ options, data, width, height, id }) =>
constructor(props: Props) {
super(props);
}

// return <div>Hello World</div>;
updateMapJson = (newData) => {
const { options } = this.props;
let { mapjson } = options;
// const { data } = this.props;
mapjson = JSON.stringify(newData);
this.props.onOptionsChange({ ...options, mapjson });
};

render() {
const { options, data, width, height, id } = this.props;
var colors = {
defaultColor: options.color,
nodeHighlight: options.nodeHighlight,
};
var fields = {
srcField: options.srcField,
dstField: options.dstField,
valField: options.valField,
endpointId: options.endpointId,
};
var parsedData = {};
var mapData;

return (
<Canvas height={height} width={width} panelId={id} options={graphOptions} data={parsedData} mapData={mapData} />
);
};
try {
parsedData = parseData(data, options.mapjson, colors, fields);
mapData = parsedData[3];
} catch (error) {
console.error('Parsing error : ', error);
}
return (
<Canvas
height={height}
width={width}
panelId={id}
options={options}
data={parsedData}
mapData={mapData}
updateMapJson={this.updateMapJson}
// json={json}
// setJson={setJson}
/>
);
}
}
23 changes: 13 additions & 10 deletions src/components/Canvas.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,22 @@ import '../css/esmap.css';
import '../css/leaflet.css';

export const Canvas = (props) => {
// var print = props.options.mapjson;
const panelId = props.panelId;
const data = props.data;
const mapData = props.mapData;
const options = props.options;
const updateMapJson = props.updateMapJson;
// const json = props.json;
// const setJson = props.setJson;

useEffect(() => {
const id = props.panelId;
const map = new NetworkMap('Map_' + id);
const map = new NetworkMap('Map_' + panelId);
var thisMap = map.renderMap(data, mapData, options, updateMapJson);

var thisMap = map.renderMap(
props.data,
props.mapData,
props.options.startLat,
props.options.startLng,
props.options.startZoom
);
// SUPER IMPORTANT!!! this removes the old map before rerendering
return () => {
// updateMapJson();
// SUPER IMPORTANT!!! this removes the old map before rerendering
if (thisMap) {
thisMap.off();
thisMap.remove();
Expand Down
103 changes: 41 additions & 62 deletions src/components/RenderMap.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import * as d3 from './d3.min.js';
import * as L from 'components/leaflet';
import * as es from './esmap.js';
import { urlUtil } from '@grafana/data';
import React from 'react';

export default class NetworkMap {
constructor(id) {
Expand All @@ -16,7 +17,7 @@ export default class NetworkMap {
* @param hoverColor - the color the lines will change to when hovering, set in options panel
*/

renderMap(parsedData, mapData, startLat, startLng, startZoom) {
renderMap(parsedData, mapData, options, updateMapJson) {
if (!parsedData || !mapData) {
return;
}
Expand All @@ -31,9 +32,13 @@ export default class NetworkMap {
.remove();
// ----------------------------------------------------------

// set variables
const dataPairs = parsedData[0];
const dataEnd1 = parsedData[1];
const dataEnd2 = parsedData[2];
const startLat = options.startLat;
const startLng = options.startLng;
const startZoom = options.startZoom;

var div = d3.select('body').append('div').attr('class', 'tooltip').style('opacity', 0);
//--- Create Leaflet Map with custom tile layer
Expand All @@ -59,12 +64,13 @@ export default class NetworkMap {
//--- note: 1 map could have multiple esmap svg layers
//--- this can be used to allow leaflet to turn on and off layers at
//--- different zoom levels in the future(imagine a regional and national map)
var nm = new es.EsMap(map, svg, div, d3.curveNatural);
var nm = new es.EsMap(map, svg, div, d3.curveNatural, options, updateMapJson);

const params = urlUtil.getUrlSearchParams();
if (params.editPanel != null) {
nm.editMode(1);
d3.select('button#edit_mode').style('visibility', 'visible');
// call update map?
} else {
nm.editMode(0);
d3.select('button#edit_mode').style('visibility', 'hidden');
Expand All @@ -85,69 +91,42 @@ export default class NetworkMap {

var edit_mode = d3.select('button#edit_mode').on('click', toggleEdit);

//--- test 1 loads data from inline json
// var map1 = {
// edges: [
// {
// name: 'CKT-BIG-A-Z',
// latLngs: [
// [50, -120],
// [55, -110],
// [45, -77],
// ],
// color: 'blue'
// },
// ],
// nodes: [
// { name: 'A', latLng: [50, -120], color: 'grey' },
// { name: 'Z', latLng: [45, -77], color: 'grey' },
// ],
// };
// var g = nm.addNetLayer('JohnNet', map1); // DO IT LIKE THISSSSS
var g2 = nm.addNetLayer('esnet', mapData); // DO IT LIKE THISSSSS
// twinkle(nm, g2, 'esnet');

//--- lets configure a popup to fire when a user clicks on CKT-BIG-A-Z
if (0) {
//--- this seems to mess with events destined to the lower z indexes even when opacity is 0
d3.select('div.tooltip')
.style('opacity', 0)
.style('position', 'absolute')
.style('width', '100px')
.style('height', '50px')
.style('background-color', '#eee')
.style('border', 'solid')
.style('border-width', '1px')
.style('border-radius', '5px')
.style('padding', '10px')
.style('z-index', 100);

function me(e, d) {
var tooltip = d3.select('div.tooltip');
tooltip
.html('this is a tool tip')
.style('opacity', 1)
.style('left', e.clientX + 'px')
.style('top', e.clientY + 'px');
}
function ml(e, d) {
var tooltip = d3.select('div.tooltip');
tooltip.style('opacity', 0);
}

//--- show the popup when mouse is over the circuit, not great for touch pads
//--- but shows what can be done
g.select('path.edge-az-CKT-BIG-A-Z').on('mouseenter', me).on('mouseleave', ml);
g.select('path.edge-za-CKT-BIG-A-Z').on('mouseenter', me).on('mouseleave', ml);
}

//--- test 2 loads data from web svc
// var map2 = d3.json(esnetjson).then(function (data) {
// console.log('test2');
// console.log(data);
// var g = nm.addNetLayer('esnet', data);
// twinkle(nm, g, 'esnet');
// });
// //--- lets configure a popup to fire when a user clicks on CKT-BIG-A-Z
// if (0) {
// //--- this seems to mess with events destined to the lower z indexes even when opacity is 0
// d3.select('div.tooltip')
// .style('opacity', 0)
// .style('position', 'absolute')
// .style('width', '100px')
// .style('height', '50px')
// .style('background-color', '#eee')
// .style('border', 'solid')
// .style('border-width', '1px')
// .style('border-radius', '5px')
// .style('padding', '10px')
// .style('z-index', 100);

// function me(e, d) {
// var tooltip = d3.select('div.tooltip');
// tooltip
// .html('this is a tool tip')
// .style('opacity', 1)
// .style('left', e.clientX + 'px')
// .style('top', e.clientY + 'px');
// }
// function ml(e, d) {
// var tooltip = d3.select('div.tooltip');
// tooltip.style('opacity', 0);
// }

// //--- show the popup when mouse is over the circuit, not great for touch pads
// //--- but shows what can be done
// g.select('path.edge-az-CKT-BIG-A-Z').on('mouseenter', me).on('mouseleave', ml);
// g.select('path.edge-za-CKT-BIG-A-Z').on('mouseenter', me).on('mouseleave', ml);
// }

//---- helper
function getRandomInt(min, max) {
Expand Down
Empty file added src/components/cr copy.json
Empty file.
Loading

0 comments on commit fc2d32d

Please sign in to comment.