Skip to content

Commit

Permalink
Grafana changes to match options refactor
Browse files Browse the repository at this point in the history
  • Loading branch information
@jkafader-esnet
jkafader-esnet committed Oct 18, 2023
1 parent 96f6cc9 commit fbbc286
Show file tree
Hide file tree
Showing 7 changed files with 103 additions and 90 deletions.
96 changes: 55 additions & 41 deletions src/MapPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export class MapPanel extends Component<Props> {
L2: {},
L3: {},
};
this.lastOptions = this.props.options;
this.lastOptions = {...this.props.options};
this.theme = createTheme();
PubSub.subscribe('returnMapCenterAndZoom', this.updateCenter);
PubSub.subscribe('returnMapViewport', this.updateMapViewport);
Expand All @@ -34,21 +34,21 @@ export class MapPanel extends Component<Props> {
return function (event) {
let setLocation = {};
for (let i = 0; i < LAYER_LIMIT; i++) {
const srcVar = 'var-' + self.props.options.layer[i]['dashboardEdgeSrcVar'];
const dstVar = 'var-' + self.props.options.layer[i]['dashboardEdgeDstVar'];
const nodeVar = 'var-' + self.props.options.layer[i]['dashboardNodeVar'];
const srcVar = 'var-' + self.props.options.layers[i]['dashboardEdgeSrcVar'];
const dstVar = 'var-' + self.props.options.layers[i]['dashboardEdgeDstVar'];
const nodeVar = 'var-' + self.props.options.layers[i]['dashboardNodeVar'];
setLocation[srcVar] = null;
setLocation[dstVar] = null;
setLocation[nodeVar] = null;
}
if (event && event.nodeA && event.nodeZ) {
const srcVariable = 'var-' + self.props.options.layer[event.layer]['dashboardEdgeSrcVar'];
const srcVariable = 'var-' + self.props.options.layers[event.layer]['dashboardEdgeSrcVar'];
setLocation[srcVariable] = event.nodeA;
const dstVariable = 'var-' + self.props.options.layer[event.layer]['dashboardEdgeDstVar'];
const dstVariable = 'var-' + self.props.options.layers[event.layer]['dashboardEdgeDstVar'];
setLocation[dstVariable] = event.nodeZ;
}
if (event && event.type === 'node') {
const dashboardVariable = 'var-' + self.props.options.layer[event.layer]['dashboardNodeVar'];
const dashboardVariable = 'var-' + self.props.options.layers[event.layer]['dashboardNodeVar'];
setLocation[dashboardVariable] = event.selection.name;
}

Expand All @@ -57,7 +57,7 @@ export class MapPanel extends Component<Props> {
}

updateCenter = (centerData) => {
let viewport = {
let viewport = {
"zoom": centerData.zoom,
"center": {
"lat": centerData.center.lat,
Expand All @@ -83,22 +83,24 @@ export class MapPanel extends Component<Props> {
// A function to update the map jsons in the Edit panel based on the current map state
// Used in esmap.js
updateMapJson = (mapData) => {
debugger;
const { options } = this.props;
let [ mapjsonL1, mapjsonL2, mapjsonL3 ] = options;
if (mapData.layer1 != null) {
mapjsonL1 = JSON.stringify(sanitizeTopology(mapData.layer1));
let update = { ...options }
if(!update.layers){
update.layers = [];
}
if (mapData.layer2 != null) {
mapjsonL2 = JSON.stringify(sanitizeTopology(mapData.layer2));
}
if (mapData.layer3 != null) {
mapjsonL3 = JSON.stringify(sanitizeTopology(mapData.layer3));
let layerUpdates = [
options.layers[0].mapjson,
options.layers[1].mapjson,
options.layers[2].mapjson,
];
for(let i=0; i<LAYER_LIMIT; i++){
if (mapData[i] != null) {
layerUpdates[i] = JSON.stringify(sanitizeTopology(mapData[i]));
}
if(update.layers[i]){
update.layers[i].mapjson = layerUpdates[i];
}
}
let update = { ...this.props.options }
update.layers[0].mapjson = mapjsonL1;
update.layers[1].mapjson = mapjsonL2;
update.layers[2].mapjson = mapjsonL3;
this.props.onOptionsChange(update);
};

Expand Down Expand Up @@ -127,12 +129,13 @@ export class MapPanel extends Component<Props> {
'resolvedLat',
'resolvedLng',
];
for(i=0; i<LAYER_LIMIT; i++){
for(let i=0; i<LAYER_LIMIT; i++){
optionsToWatch.push(`layers[${i}].visible`);
optionsToWatch.push(`layers[${i}].color`);
optionsToWatch.push(`layers[${i}].endpointId`);
optionsToWatch.push(`layers[${i}].nodeHighlight`);
optionsToWatch.push(`layers[${i}].nodeWidth`);
optionsToWatch.push(`layers[${i}].mapjson`);
optionsToWatch.push(`layers[${i}].edgeWidth`);
optionsToWatch.push(`layers[${i}].pathOffset`);
optionsToWatch.push(`layers[${i}].name`);
Expand All @@ -142,13 +145,23 @@ export class MapPanel extends Component<Props> {
optionsToWatch.push(`layers[${i}].dataFieldLabel`);
}
optionsToWatch.forEach((option) => {
let lastValue = resolvePath(lastOptions, option);
let currentValue = resolvePath(options, option);
let lastValue = resolvePath(this.lastOptions, option);
let currentValue = resolvePath(this.props.options, option);
if(option === 'thresholds'){
// test these for relative equality; this object memory ref changes on each option change.
lastValue = JSON.stringify(lastValue);
currentValue = JSON.stringify(currentValue);
}
if (lastValue !== currentValue) {
if (option === 'background') {
this.props.options.background = this.theme.visualization.getColorByName(this.props.options.background);
}
setPath(this.lastOptions, option, this.props.options[option]);
if(Array.isArray(this.props.options[option])){
let newOption = [...resolvePath(this.props.options, option)];
setPath(this.lastOptions, option, newOption);
} else {
setPath(this.lastOptions, option, resolvePath(this.props.options, option));
}
changed.push(option);
}
});
Expand All @@ -158,18 +171,9 @@ export class MapPanel extends Component<Props> {
// A function to turn layers on or off. Takes in the layer and boolean value
// Used in SideBar.tsx
toggleLayer = (layer, value) => {
const { options } = this.props;
let { layer1, layer2, layer3 } = options;
if (layer === 'layer1') {
layer1 = value;
}
if (layer === 'layer2') {
layer2 = value;
}
if (layer === 'layer3') {
layer3 = value;
}
this.props.onOptionsChange({ ...options, layer1, layer2, layer3 });
let update = { ...this.props.options };
update.layers[layer].visible = value;
this.props.onOptionsChange(update);
};

resolveLatLngFromVars(options, data, replaceVariables) {
Expand Down Expand Up @@ -266,9 +270,10 @@ export class MapPanel extends Component<Props> {
this.mapCanvas.current.setAttribute('startlat', latLng['resolvedLat']);
this.mapCanvas.current.setAttribute('startlng', latLng['resolvedLng']);

let colors = [];
let fields = [];
let colors: any[] = [];
let fields: any[] = [];
for(let i=0; i<LAYER_LIMIT; i++){
if(!options.layers[i]){ continue; }
colors.push({
defaultColor: options.layers[i].color,
nodeHighlight: options.layers[i].nodeHighlight,
Expand All @@ -295,8 +300,17 @@ export class MapPanel extends Component<Props> {
this.resolveMapData(2, replaceVariables),
]).then((topologyData) => {
for(let i=0; i<LAYER_LIMIT; i++){
let parsedData = parseData(data, topologyData[i], colorsL1, fieldsL1, 1);
topology[i] = parsedData[3];
try {
let parsedData = parseData(data, topologyData[i], colors[i], fields[i], i);
topology[i] = parsedData[3];
} catch(e) {
if(!this.mapCanvas.jsonResults){
this.mapCanvas.jsonResults = [];
}
// @ts-ignore
topology[i] = topologyData[i];
console.error(e);
}
}
this.mapCanvas.current.updateMapTopology(topology);
this.mapCanvas.current.updateMapDimensions({ width: width, height: height });
Expand Down
20 changes: 10 additions & 10 deletions src/components/MapCanvas.component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -330,8 +330,8 @@ export class MapCanvas extends BindableHTMLElement {
})
} else {
this.jsonResults = [];
for(i=0; i<utils.LAYER_LIMIT; i++){
this.jsonResults.push({"valid": false, "errorDetails": "No Topology data available."});
for(let i=0; i<utils.LAYER_LIMIT; i++){
this.jsonResults.push([false, "No Topology data available."]);
}
}
this.sideBar && this.sideBar.render();
Expand Down Expand Up @@ -385,8 +385,8 @@ export class MapCanvas extends BindableHTMLElement {
}
getCurrentLeafletMap(){
if(!this.leafletMap){
var centerCoords = [this.startlat || this._options.viewport.center.lat, this.startlng || this._options.viewport.center.lng];
var startZoom = this._options.viewport.zoom;
var centerCoords = [this.startlat || this._options?.viewport?.center?.lat, this.startlng || this._options?.viewport?.center?.lng];
var startZoom = this._options?.viewport?.zoom || 3;
if(window[this.id + "mapPosition"] && window[this.id + "mapPosition"].center){
centerCoords = window[this.id + "mapPosition"].center;
}
Expand All @@ -401,8 +401,8 @@ export class MapCanvas extends BindableHTMLElement {
scrollWheelZoom: false,
doubleClickZoom: false,
keyboard: false,
dragging: this._options.enableScrolling,
zoomControl: this._options.showViewControls,
dragging: this._options?.enableScrolling,
zoomControl: this._options?.showViewControls,
}).setView(centerCoords, startZoom);
if(this._options.tileset.geographic){
L.tileLayer(
Expand Down Expand Up @@ -476,8 +476,8 @@ export class MapCanvas extends BindableHTMLElement {
})
} else {
this.jsonResults = [];
for(i=0; i<utils.LAYER_LIMIT; i++){
this.jsonResults.push({"valid": false, "errorDetails": "No Topology data available."});
for(let i=0; i<utils.LAYER_LIMIT; i++){
this.jsonResults[i] = [false, "No Topology data available."];
}
return;
}
Expand All @@ -496,7 +496,7 @@ export class MapCanvas extends BindableHTMLElement {

let zIndexBase = this.options.zIndexBase ? this.options.zIndexBase : 50;
let zIndexLayers = [];
for(var i=0; i<=10; i++){
for(let i=0; i<=10; i++){
zIndexLayers.push(zIndexBase + (i * 10));
}

Expand Down Expand Up @@ -627,7 +627,7 @@ export class MapCanvas extends BindableHTMLElement {
if(this.options.customLegend){
output += this.options.customLegendValue;
} else {
for(var i=0; i<thresholds.length; i++){
for(let i=0; i<thresholds.length; i++){
if(i % columnLength == 0){
columns.push([]);
}
Expand Down
4 changes: 2 additions & 2 deletions src/components/NetworkMap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ export default class NetworkMap {
}
let l = 0;
this.mapCanvas.topology.forEach((layer)=>{
if(!layer) return
if(!layer || typeof(layer) == "string") return
for(var e=0; e<layer.edges.length; e++){
var endpointId = `endpointId`;
var edge = layer.edges[e];
Expand All @@ -124,7 +124,7 @@ export default class NetworkMap {
for(let i=0; i<LAYER_LIMIT; i++){
emptyTopology.push(emptyLayer);
let layer = emptyLayer;
if(this.mapCanvas.topology[i]){
if(this.mapCanvas.topology[i] && typeof(this.mapCanvas.topology[i]) != "string"){
layer = this.mapCanvas.topology[i];
}
this.groups.push(this.esmap.addNetLayer(i, layer));
Expand Down
6 changes: 3 additions & 3 deletions src/components/SideBar.component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ class SideBar extends BindableHTMLElement {
let sidebarContent = '';

for(let i=0; i<utils.LAYER_LIMIT; i++){
if(!this.mapCanvas.options.layers || !this.mapCanvas.jsonResults){
if(!this.mapCanvas.options.layers || !this.mapCanvas.options.layers[i] || !this.mapCanvas.jsonResults){
continue;
}
sidebarContent += `<div class='toggle container' ${ !this.mapCanvas.options.layers[i].legend && "style='display: none;'" }>
Expand All @@ -68,7 +68,7 @@ class SideBar extends BindableHTMLElement {
</label>
<text class="legend-text">${ this.mapCanvas.options.layers[i].name || "Layer " + (i+1) }</text>
<div class="legend-text small" style="${this.mapCanvas.editingInterface && !this.mapCanvas.editingInterface.editMode ? 'display: none' : "" }">
JSON Schema: ${ (this.mapCanvas.jsonResults && this.mapCanvas.jsonResults[i] && this.mapCanvas.jsonResults[i]["valid"] ) ? "valid" : "invalid" }
JSON Schema: ${ (this.mapCanvas.jsonResults && this.mapCanvas.jsonResults[i] && this.mapCanvas.jsonResults[i][0] ) ? "valid" : `invalid${this.mapCanvas.jsonResults?.[i]?.[1] ? ": " + this.mapCanvas.jsonResults[i][1] : "" }` }
</div>
</div>`

Expand Down Expand Up @@ -122,7 +122,7 @@ class SideBar extends BindableHTMLElement {

var bindings = {}
for(let i=0; i<utils.LAYER_LIMIT; i++){
if(!this.mapCanvas.options.layers){
if(!this.mapCanvas.options.layers || !this.mapCanvas.options.layers[i]){
continue;
}
let selector = `#sidebar-layer-${i}@onchange`;
Expand Down
9 changes: 3 additions & 6 deletions src/components/lib/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ const validateArray = function(itemSchema, data){
// main JSON validation function: heavily recursive
const validate = function(schema, data){
// do type check
var output = { "valid": true, "errorDetails": {} }
var output = { "valid": true, "errorDetails": "" }
const typeCheckers = {
'object': (data)=>{ return typeof(data) === "object"; },
'number': (data)=>{ return typeof(data) === "number" },
Expand All @@ -85,19 +85,17 @@ const validate = function(schema, data){
'array': Array.isArray
}
if(!typeCheckers[schema['type']](data)){
var before = output['valid'];
output["valid"] = false;
output.errorDetails[''] = "type check failed."
output.errorDetails += "Type check failed.<br>"
return output;
}
// recursive call for each property listed above
var props = schema.properties ? Object.keys(schema.properties) : [];
for(var i=0; i<props.length; i++){
var propName = props[i];
if(!data[propName] && schema.required.indexOf(propName)>=0){
var before = output['valid'];
output['valid'] = false;
output['errorDetails'][propName] = "required property '"+propName+"' is not set";
output['errorDetails'] = "required property '"+propName+"' is not set<br>";
return output;
}
}
Expand All @@ -115,7 +113,6 @@ const validate = function(schema, data){
valid = interimOutput['valid'];
errorDetails = interimOutput['errorDetails'];
}
var before = output['valid'];
output['valid'] = !!(valid && output['valid']);
Object.keys(errorDetails).forEach((childProp)=>{
var accessor = childProp == "" ? propName : propName + "." + childProp;
Expand Down
12 changes: 7 additions & 5 deletions src/module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ let layerOptions = {
"layers[${i}].mapjson": {
name: 'Layer ${i+1} Map data (json)',
category: "Layer Options",
showIf: { "layers[${i}].visible": true, "layers[${i}].jsonFromUrl": false },
showIf: { "layers[${i}].visible": true, "layers[${i}].jsonFromUrl": [false, undefined, null] },
description: 'JSON with edges and nodes of network map',
defaultValue: '{"edges":[], "nodes":[]}',
settings: { useTextarea: true, rows: 10 },
Expand Down Expand Up @@ -290,26 +290,29 @@ let layerOptions = {
name: 'Layer ${i+1} Display Name',
category: "Sidebar Options",
showIf: {"showSidebar": true},
defaultValue: 'layer ${i+1}',
defaultValue: 'Layer ${i+1}',
},

"layers[${i}].dashboardNodeVar": {
editor: "text",
name: 'Binding: Node Layer ${i+1}',
description: "On node click, set this dashboard variable to the name of the selected node.",
showIf: {"layers[${i}].visible": true},
category: "Variable Bindings",
defaultValue: 'node',
},
"layers[${i}].dashboardEdgeSrcVarL1": {
"layers[${i}].dashboardEdgeSrcVar": {
editor: "text",
name: 'Binding: Edge "Source" Layer ${i+1}',
description: "On edge click, set this dashboard variable to the 'source' of the selected edge.",
showIf: {"layers[${i}].visible": true},
category: "Variable Bindings",
defaultValue: 'source',
},
"layers[${i}].dashboardEdgeDstVarL1": {
"layers[${i}].dashboardEdgeDstVar": {
editor: "text",
name: 'Binding: Edge "Destination" Layer ${i+1}',
description: "On edge click, set this dashboard variable to the 'destination' of the selected edge.",
showIf: {"layers[${i}].visible": true},
category: "Variable Bindings",
defaultValue: 'dest',
Expand Down Expand Up @@ -569,7 +572,6 @@ const options = {
},
}

// assuming 3 layers here
for(let i=0; i<LAYER_LIMIT; i++){
// copy all of the options for each layer
for(let optionName in layerOptions){
Expand Down
Loading

0 comments on commit fbbc286

Please sign in to comment.