Best JavaScript code snippet using synthetixio-synpress
dataview.js
Source:dataview.js
1var DATA_TABLE_MAX_LENGTH = 200;2document.getElementById('files').addEventListener('change', getFileInfos, false);3document.getElementById('nodeTableUpload').addEventListener('change', uploadNodeTable, false);4document.getElementById('linkTableUpload').addEventListener('change', uploadLinkTable, false);5var SESSION_NAME = utils.getUrlVars()['session'];6storage.saveSessionId(SESSION_NAME);7var tables = storage.getUserTables(SESSION_NAME);8var currentNetwork;9var visualizations = [10 ['Node Link', 'nodelink'],11 ['Adjacency Matrix', 'matrix'],12 ['Time Arcs', 'dynamicego'],13 ['Map', 'map'],14];15var messages = [];16init();17function init() {18 loadVisualizationList();19 loadNetworkList();20 loadTableList();21 var networkids = storage.getNetworkIds(SESSION_NAME);22 if (networkids.length > 0)23 showNetwork(networkids[0]);24}25function loadVisualizationList() {26 visualizations.forEach(function (v) {27 $('#visualizationList')28 .append('<li class="visLink" title="Show ' + v[0] + ' visualization.">\29 <button onclick="loadVisualization(\'' + v[1] + '\')" class="visbutton hastooltip">\30 <img src="figures/' + v[1] + '.png" class="visicon"/>\31 <p>' + v[0] + '</p>\32 </button>\33 </li>');34 });35 $('#visualizationList')36 .append('<li class="visLink" title="Show matrix and node-link split-view.">\37 <button onclick="loadVisualization(\'mat-nl\')" class="visbutton hastooltip">\38 <img src="figures/nl+mat.png" class="visicon"/><p>Matrix + Node Link</p>\39 </button></li>');40 $('#visualizationList')41 .append('<li class="visLink" title="Show all visualizations.">\42 <button onclick="loadVisualization(\'tileview\')" class="visbutton hastooltip">\43 <img src="figures/all.png" class="visicon"/><p>All</p>\44 </button></li>');45}46function loadTableList() {47 $('#tableList').empty();48 var tableNames = storage.getTableNames(SESSION_NAME);49 tableNames.forEach(function (t) {50 var shownName = t;51 if (t.length > 30)52 shownName = t.substring(0, 30) + '..';53 $('#tableList').append('<li>\54 <a onclick="showSingleTable(\'' + t + '\')" class="underlined">' + shownName + '.csv</a>\55 <img class="controlIcon" title="Delete this table." src="logos/delete.png" onclick="removeTable(\'' + t + '\')"/>\56 </li>');57 });58}59function loadNetworkList() {60 $('#networkList').empty();61 var networkNames = storage.getNetworkIds(SESSION_NAME);62 var network;63 networkNames.forEach(function (t) {64 network = storage.getNetwork(t, SESSION_NAME);65 $('#networkList').append('\66 <li>\67 <a onclick="showNetwork(\'' + network.id + '\')" class="underlined">' + network.name + '</a>\68 <img class="controlIcon" title="Delete this network." src="logos/delete.png" onclick="removeNetwork(\'' + network.id + '\')"/>\69 <img class="controlIcon" title="Download this network in .vistorian format." src="logos/download.png" onclick="exportNetwork(\'' + network.id + '\')"/>\70 </li>');71 });72}73function loadVisualization(visType) {74 trace.event("system", "ts_" + visType, "CCC", "DDD");75 window.open('sites/' + visType + '.html?session=' + SESSION_NAME + '&datasetName=' + currentNetwork.name);76}77function createNetwork() {78 var networkIds = storage.getNetworkIds(SESSION_NAME);79 var id = new Date().getTime();80 currentNetwork = new vistorian.Network(id);81 currentNetwork.name = 'Network-' + currentNetwork.id;82 storage.saveNetwork(currentNetwork, SESSION_NAME);83 showNetwork(currentNetwork.id);84 loadNetworkList();85}86function setNodeTable(list) {87 var tableName = list.value;88 if (tableName != '---') {89 var table = storage.getUserTable(tableName, SESSION_NAME);90 currentNetwork.userNodeTable = table;91 showTable(table, '#nodeTableDiv', false, currentNetwork.userNodeSchema);92 }93 else {94 unshowTable('#nodeTableDiv');95 currentNetwork.userNodeTable = undefined;96 }97}98function setLinkTable(list) {99 var tableName = list.value;100 if (tableName != '---') {101 var table = storage.getUserTable(tableName, SESSION_NAME);102 currentNetwork.userLinkTable = table;103 showTable(table, '#linkTableDiv', false, currentNetwork.userLinkSchema);104 }105 else {106 unshowTable('#linkTableDiv');107 currentNetwork.userLinkTable = undefined;108 }109}110function setLocationTable(list) {111 var tableName = list.value;112 if (tableName != '---') {113 var table = storage.getUserTable(tableName, SESSION_NAME);114 currentNetwork.userLocationTable = table;115 currentNetwork.userLocationSchema = new networkcube.LocationSchema(0, 1, 2, 3, 4);116 showTable(table, '#locationTableDiv', true, currentNetwork.userLocationSchema);117 }118 else {119 unshowTable('#locationTableDiv');120 currentNetwork.userLocationTable = undefined;121 }122}123function saveCurrentNetwork(failSilently) {124 saveCellChanges();125 currentNetwork.name = $('#networknameInput').val();126 if (currentNetwork.userNodeSchema.time != -1) {127 currentNetwork.timeFormat = $('#timeFormatInput_' + currentNetwork.userNodeSchema.name).val();128 }129 if (currentNetwork.userLinkSchema.time != -1) {130 currentNetwork.timeFormat = $('#timeFormatInput_' + currentNetwork.userLinkSchema.name).val();131 }132 checkTimeFormatting(currentNetwork);133 storage.saveNetwork(currentNetwork, SESSION_NAME);134 if (!currentNetwork.userNodeTable && !currentNetwork.userLinkTable) {135 if (!failSilently)136 showMessage("Cannot save without a Node table or a Link Table", 2000);137 return;138 }139 var dataset = vistorian.importIntoNetworkcube(currentNetwork, SESSION_NAME, failSilently);140 updateNetworkStatusIndication();141 if (dataset142 && !currentNetwork.userLocationTable && dataset.locationTable && dataset.locationTable.length > 0) {143 currentNetwork.userLocationTable = new vistorian.VTable('userLocationTable', dataset.locationTable);144 currentNetwork.userLocationTable.data.splice(0, 0, ['Id', 'User Name', 'Geoname', 'Longitude', 'Latitude']);145 currentNetwork.userLocationSchema = dataset.locationSchema;146 storage.saveUserTable(currentNetwork.userLocationTable, SESSION_NAME);147 showTable(currentNetwork.userLocationTable, '#locationTableDiv', true, currentNetwork.userLocationSchema);148 $('#locationtableSelect')149 .append('<option value="userLocationTable">User Location Table</option>');150 $('#locationtableSelect').val('userLocationTable');151 loadTableList();152 storage.saveNetwork(currentNetwork, SESSION_NAME);153 }154 loadNetworkList();155}156function deleteCurrentNetwork() {157 storage.deleteNetwork(currentNetwork, SESSION_NAME);158 networkcube.deleteData(currentNetwork.name);159 unshowNetwork();160 loadNetworkList();161}162function showNetwork(networkId) {163 unshowNetwork();164 currentNetwork = storage.getNetwork(networkId, SESSION_NAME);165 if (currentNetwork == null)166 return;167 $('#individualTables').css('display', 'none');168 $('#networkTables').css('display', 'inline');169 $('#networknameInput').val(currentNetwork.name);170 var tables = storage.getUserTables(SESSION_NAME);171 $('#nodetableSelect').append('<option class="tableSelection">---</option>');172 $('#linktableSelect').append('<option class="tableSelection">---</option>');173 $('#locationtableSelect').append('<option class="tableSelection">---</option>');174 $('#nodeTableContainer').css('display', 'inline');175 $('#linkTableContainer').css('display', 'inline');176 if (currentNetwork.networkConfig.indexOf('node') > -1) {177 $('#linkTableContainer').css('display', 'none');178 }179 if (currentNetwork.networkConfig.indexOf('link') > -1) {180 $('#nodeTableContainer').css('display', 'none');181 }182 if (currentNetwork.networkConfig == undefined) {183 $('#linkTableContainer').css('display', 'none');184 $('#nodeTableContainer').css('display', 'none');185 }186 tables.forEach(function (t) {187 $('#nodetableSelect')188 .append('<option value="' + t.name + '">' + t.name + '</option>');189 $('#linktableSelect')190 .append('<option value="' + t.name + '">' + t.name + '</option>');191 $('#locationtableSelect')192 .append('<option value="' + t.name + '">' + t.name + '</option>');193 });194 if (currentNetwork.userNodeTable) {195 showTable(currentNetwork.userNodeTable, '#nodeTableDiv', false, currentNetwork.userNodeSchema);196 $('#nodetableSelect').val(currentNetwork.userNodeTable.name);197 }198 if (currentNetwork.userLinkTable) {199 showTable(currentNetwork.userLinkTable, '#linkTableDiv', false, currentNetwork.userLinkSchema);200 $('#linktableSelect').val(currentNetwork.userLinkTable.name);201 }202 if (currentNetwork.userLocationTable) {203 showTable(currentNetwork.userLocationTable, '#locationTableDiv', true, currentNetwork.userLocationSchema);204 $('#locationtableSelect').val(currentNetwork.userLocationTable.name);205 }206 $('#tileViewLink').attr('href', 'sites/tileview.html?session=' + SESSION_NAME + '&datasetName=' + currentNetwork.name.split(' ').join('___'));207 $('#mat-nlViewLink').attr('href', 'sites/mat-nl.html?session=' + SESSION_NAME + '&datasetName=' + currentNetwork.name.split(' ').join('___'));208 updateNetworkStatusIndication();209}210function updateNetworkStatusIndication() {211 if (currentNetwork.ready) {212 $('#networkStatus')213 .text('Ready for visualization. Select a visualization from the menu on the top.')214 .css('color', '#fff')215 .css('background', '#2b0');216 }217 else {218 $('#networkStatus')219 .text('Network not ready for visualization. Table or Schema specifications missing.')220 .css('background', '#f63')221 .css('color', '#fff');222 }223}224function unshowNetwork() {225 $('#nodetableSelect').empty();226 $('#linktableSelect').empty();227 $('#locationtableSelect').empty();228 unshowTable('#linkTableDiv');229 unshowTable('#nodeTableDiv');230 unshowTable('#locationTableDiv');231 $('#networkTables').css('display', 'none');232 $('#tileViewLink').attr('href', 'tileview.html?session=' + SESSION_NAME);233 $('#mat-nlViewLink').attr('href', 'mat-nl.html?session=' + SESSION_NAME);234}235function unshowTable(elementName) {236 $(elementName).empty();237}238var currentTable;239function showSingleTable(tableName) {240 currentTable = storage.getUserTable(tableName, SESSION_NAME);241 showTable(currentTable, '#individualTable', false);242 $('#individualTables').css('display', 'inline');243 $('#networkTables').css('display', 'none');244}245var currentTableId;246var currentCell;247function showTable(table, elementName, isLocationTable, schema) {248 var tHead, tBody;249 currentTable = table;250 $(elementName).empty();251 var tableId = 'datatable_' + table.name;252 currentTableId = tableId;253 $('#' + tableId).remove();254 var tableDiv = $('<div id="div_' + tableId + '"></div>');255 $(elementName).append(tableDiv);256 var tableMenu = $(elementName).prev();257 tableMenu.find('.tableMenuButton').remove();258 var data = table.data;259 if (data.length > DATA_TABLE_MAX_LENGTH) {260 var info = $('<p>Table shows first 200 rows out of ' + data.length + ' rows in total.</p>');261 tableDiv.append(info);262 }263 var csvExportButton = $('<button class="tableMenuButton" onclick="exportCurrentTableCSV(\'' + table.name + '\')">Export as CSV</button>');264 tableMenu.append(csvExportButton);265 var tab = $('<table id="' + tableId + '">');266 tableDiv.append(tab);267 tab.addClass('datatable stripe hover cell-border and order-column compact');268 tHead = $('<thead>');269 tab.append(tHead);270 var tr = $('<tr></tr>').addClass('tableheader');271 tHead.append(tr);272 for (var c = 0; c < data[0].length; c++) {273 var td = $('<th></th>').addClass('th').attr('contenteditable', 'false');274 tr.append(td);275 td.html(data[0][c]);276 }277 tBody = $('<tbody></tbody>');278 tab.append(tBody);279 for (var r = 1; r < Math.min(data.length, DATA_TABLE_MAX_LENGTH); r++) {280 tr = $('<tr></tr>').addClass('tablerow');281 tBody.append(tr);282 for (var c = 0; c < data[r].length; c++) {283 td = $('<td></td>').attr('contenteditable', 'true');284 td.data('row', r);285 td.data('column', c);286 td.data('table', table);287 tr.append(td);288 td.html(data[r][c]);289 td.blur(function () {290 if ($(this).html().length == 0) {291 $(this).addClass('emptyTableCell');292 }293 else {294 $(this).removeClass('emptyTableCell');295 }296 });297 td.focusin(function (e) {298 saveCellChanges();299 currentCell = $(this);300 });301 td.focusout(function (e) {302 saveCellChanges();303 });304 if (typeof data[r][c] == 'string' && data[r][c].trim().length == 0)305 td.addClass('emptyTableCell');306 }307 }308 var dtable = $('#' + tableId).DataTable({309 "autoWidth": true310 });311 dtable.columns.adjust().draw();312 if (schema) {313 var schemaRow = $('<tr class="schemaRow"></tr>');314 $('#' + tableId + ' > thead').append(schemaRow);315 var select, cell, option, timeFormatInput;316 for (var i = 0; i < table.data[0].length; i++) {317 cell = $('<th class="schemaCell" id="schemaCell_' + schema.name + '_' + i + '"></th>');318 schemaRow.append(cell);319 select = $('<select class="schemaSelection" onchange="schemaSelectionChanged(this.value, ' + i + ' , \'' + schema.name + '\')"></select>');320 cell.append(select);321 select.append('<option>(Not visualized)</option>');322 for (var field in schema) {323 if (field == 'name'324 || field == 'constructor'325 || field == 'timeFormat')326 continue;327 var fieldName = '';328 switch (field) {329 case 'source':330 fieldName = 'Source Node';331 break;332 case 'target':333 fieldName = 'Target Node';334 break;335 case 'source_location':336 fieldName = 'Source Node Location';337 break;338 case 'target_location':339 fieldName = 'Target Node Location';340 break;341 case 'linkType':342 fieldName = 'Link Type';343 break;344 case 'location':345 fieldName = 'Node Location';346 break;347 case 'label':348 fieldName = 'Node';349 break;350 default:351 fieldName = field;352 fieldName = fieldName.charAt(0).toUpperCase() + fieldName.slice(1);353 }354 option = $('<option value=' + field + '>' + fieldName + '</option>');355 select.append(option);356 if (i == 0 && field == 'id') {357 $(option).attr('selected', 'selected');358 schema[field] = 0;359 }360 if (schema[field] == i) {361 $(option).attr('selected', 'selected');362 if (field == 'time') {363 var val = '';364 if (currentNetwork.hasOwnProperty('timeFormat')) {365 val = "value='" + currentNetwork.timeFormat + "'";366 }367 timeFormatInput = $('<span class="nobr"><input title="Enter a date pattern" type="text" size="12" id="timeFormatInput_' + schema.name + '" placeholder="DD/MM/YYYY" ' + val + ' onkeyup="timeFormatChanged()"></input><a href="http://momentjs.com/docs/#/parsing/string-format/" target="_blank" title="Details of the date pattern syntax"><img src="logos/help.png" class="inlineicon"/></a></span>');368 cell.append(timeFormatInput);369 }370 }371 if (field == 'relation') {372 for (var k = 0; k < schema.relation.length; k++) {373 if (schema.relation[k] == i) {374 $(option).attr('selected', 'selected');375 }376 }377 }378 }379 }380 }381}382function timeFormatChanged() {383 currentNetwork.timeFormat = $('#timeFormatInput_' + currentNetwork.userNodeSchema.name).val();384 saveCurrentNetwork(false);385}386function deleteCurrentTable() {387 storage.deleteTable(currentTable, SESSION_NAME);388 $('#individualTables').css('display', 'none');389 loadTableList();390}391function schemaSelectionChanged(field, columnNumber, schemaName, parent) {392 for (var field2 in currentNetwork[schemaName]) {393 if (field2 == 'relation' && currentNetwork[schemaName][field2].indexOf(columnNumber) > -1) {394 if (field == '(Not visualized)') {395 currentNetwork[schemaName][field2].splice(currentNetwork[schemaName][field2].indexOf(columnNumber), 1);396 }397 else {398 var arr = currentNetwork[schemaName][field];399 currentNetwork[schemaName][field2].slice(arr.indexOf(columnNumber), 0);400 }401 }402 else {403 if (currentNetwork[schemaName][field2] == columnNumber) {404 currentNetwork[schemaName][field2] = -1;405 }406 }407 }408 if (field == 'relation') {409 currentNetwork[schemaName][field].push(columnNumber);410 }411 else if (field != '---') {412 currentNetwork[schemaName][field] = columnNumber;413 }414 saveCurrentNetwork(false);415 showNetwork(currentNetwork.id);416}417function checkTimeFormatting(network) {418 var corruptedNodeTimes = [];419 if (network.userNodeTable && network.userNodeTable && network.userNodeSchema && network.userNodeSchema['timeFormat']) {420 corruptedNodeTimes = vistorian.checkTime(network.userNodeTable, network.userNodeSchema['time'], network.userNodeSchema['timeFormat']);421 }422 var corruptedLinkTimes = [];423 if (network.userLinkTable && network.userLinkSchema && network.userLinkSchema['timeFormat']) {424 corruptedLinkTimes = vistorian.checkTime(network.userLinkTable, network.userLinkSchema['time'], network.userLinkSchema['timeFormat']);425 }426 return false;427}428function removeRow(row) {429}430var filesToUpload = [];431function getFileInfos(e) {432 filesToUpload = [];433 var files = e.target.files;434 var output = [];435 for (var i = 0, f; f = files[i]; i++) {436 if (f.name.split('.')[1] != 'csv') {437 showMessage("Uploaded file is not a .csv file. Please chose another file.", 4000);438 return;439 }440 else {441 filesToUpload.push(f);442 }443 }444 uploadFiles(loadTableList);445}446function uploadNodeTable(e) {447 filesToUpload = [e.target.files[0]];448 uploadFiles(function () {449 var tables = storage.getUserTables(SESSION_NAME);450 var lastTable = tables[tables.length - 1];451 $('#nodetableSelect').append('<option value="' + lastTable.name + '">' + lastTable.name + '</option>');452 $('#nodetableSelect').val(lastTable.name);453 setNodeTable({ value: lastTable.name });454 showTable(currentNetwork.userNodeTable, '#nodeTableDiv', false, currentNetwork.userNodeSchema);455 saveCurrentNetwork(false);456 loadTableList();457 });458}459function uploadLinkTable(e) {460 filesToUpload = [e.target.files[0]];461 uploadFiles(function () {462 var tables = storage.getUserTables(SESSION_NAME);463 var lastTable = tables[tables.length - 1];464 $('#linktableSelect').append('<option value="' + lastTable.name + '">' + lastTable.name + '</option>');465 $('#linktableSelect').val(lastTable.name);466 setLinkTable({ value: lastTable.name });467 showTable(currentNetwork.userLinkTable, '#linkTableDiv', false, currentNetwork.userLinkSchema);468 saveCurrentNetwork(false);469 var element = document.getElementById('leaveCode');470 loadTableList();471 });472}473function uploadFiles(handler) {474 vistorian.loadCSV(filesToUpload, function () {475 handler();476 }, SESSION_NAME);477}478function exportCurrentTableCSV(tableName) {479 saveCellChanges();480 var table = null;481 if (tableName) {482 if (currentNetwork.userLinkTable && currentNetwork.userLinkTable.name == tableName)483 table = currentNetwork.userLinkTable;484 else if (currentNetwork.userNodeTable && currentNetwork.userNodeTable.name == tableName)485 table = currentNetwork.userNodeTable;486 else if (currentNetwork.userLocationTable && currentNetwork.userLocationTable.name == tableName)487 table = currentNetwork.userLocationTable;488 }489 if (!table) {490 table = currentTable;491 }492 vistorian.exportTableCSV(table);493}494function replaceCellContents(tableId) {495 var replace_pattern = $('#div_' + tableId + ' #replace_pattern').val();496 var replace_value = $('#div_' + tableId + ' #replace_value').val();497 var arr;498 if (tableId.startsWith('datatable_'))499 tableId = tableId.slice(10, tableId.length);500 var table = storage.getUserTable(tableId, SESSION_NAME);501 if (table == undefined) {502 table = currentNetwork.userLocationTable;503 }504 if (table.data) {505 arr = table.data;506 }507 else {508 arr = table;509 }510 var replaceCount = 0;511 for (var i = 0; i < arr.length; i++) {512 for (var j = 0; j < arr[i].length; j++) {513 if (isNaN(arr[i][j])) {514 if (arr[i][j].indexOf(replace_pattern) > -1) {515 arr[i][j] = arr[i][j].replace(replace_pattern, replace_value).trim();516 replaceCount++;517 }518 }519 else {520 if (arr[i][j] == replace_pattern) {521 arr[i][j] = replace_value;522 replaceCount++;523 }524 }525 }526 }527 table.data = arr;528 saveCellChanges();529 saveCurrentNetwork(false);530 showMessage('Replaced ' + replaceCount + ' occurrences of ' + replace_pattern + ' with ' + replace_value + '.', 2000);531}532function extractLocations() {533 showMessage('Extracting locations...', false);534 if (currentNetwork.userLocationTable == undefined) {535 var tableName = currentNetwork.name.replace(/ /g, "_");536 currentNetwork.userLocationTable = new vistorian.VTable(tableName + '-locations', []);537 currentNetwork.userLocationSchema = new networkcube.LocationSchema(0, 1, 2, 3, 4);538 currentNetwork.userLocationTable.data.push(['Id', 'User Label', 'Geo Name', 'Longitude', 'Latitude']);539 storage.saveUserTable(currentNetwork.userLocationTable, SESSION_NAME);540 tables = storage.getUserTables(SESSION_NAME);541 }542 var locationTable = currentNetwork.userLocationTable;543 var locationSchema = currentNetwork.userLocationSchema;544 if (locationTable.data.length == 0) {545 var schemaStrings = [];546 locationTable.data.push(['Id', 'User Label', 'Geoname', 'Longitude', 'Latitude']);547 }548 var locationsFound = 0;549 if (networkcube.isValidIndex(currentNetwork.userNodeSchema.location)) {550 var nodeTable = currentNetwork.userNodeTable.data;551 if (nodeTable != undefined) {552 for (var i = 1; i < nodeTable.length; i++) {553 createLocationEntry(linkTable[i][currentNetwork.userNodeSchema.location], locationTable.data);554 }555 }556 }557 if (networkcube.isValidIndex(currentNetwork.userLinkSchema.location_source)) {558 var linkTable = currentNetwork.userLinkTable.data;559 if (linkTable != undefined) {560 for (var i = 1; i < linkTable.length; i++) {561 createLocationEntry(linkTable[i][currentNetwork.userLinkSchema.location_target], locationTable.data);562 }563 }564 }565 if (networkcube.isValidIndex(currentNetwork.userLinkSchema.location_target)) {566 if (linkTable != undefined) {567 for (var i = 1; i < linkTable.length; i++) {568 createLocationEntry(linkTable[i][currentNetwork.userLinkSchema.location_target], locationTable.data);569 }570 }571 }572 locationsFound = locationTable.data.length;573 saveCurrentNetwork(false);574 showNetwork(currentNetwork.id);575 if (locationsFound > 0)576 showMessage(locationsFound + ' locations found.', 2000);577 else {578 updateLocations();579 }580}581function createLocationEntry(name, rows) {582 if (name == undefined583 || name.length == 0)584 return;585 for (var i = 0; i < rows.length; i++) {586 if (rows[i][1].length == name.length587 && rows[i][1].indexOf(name) > -1)588 return;589 }590 rows.push([rows.length - 1, name, name, undefined, undefined]);591}592function updateLocations() {593 showMessage('Retrieving and updating location coordinates...', false);594 vistorian.updateLocationTable(currentNetwork.userLocationTable, currentNetwork.userLocationSchema, function (nothingImportant) {595 saveCurrentNetwork(false);596 showNetwork(currentNetwork.id);597 showMessage('Locations updated successfully!', 2000);598 });599}600var msgBox;601function showMessage(message, timeout) {602 if ($('.messageBox'))603 $('.messageBox').remove();604 msgBox = $('<div class="messageBox"></div>');605 msgBox.append('<div><p>' + message + '</p></div>');606 $('body').append(msgBox);607 msgBox.click(function () {608 $('.messageBox').remove();609 });610 if (timeout) {611 window.setTimeout(function () {612 $('.messageBox').fadeOut(1000);613 }, timeout);614 }615}616function saveCellChanges() {617 if (currentCell == undefined)618 return;619 var selectedCell_row = currentCell.data('row'), selectedCell_col = currentCell.data('column'), data = currentCell.data('table').data, value;620 if (selectedCell_row != undefined && selectedCell_col != undefined) {621 value = currentCell.text().trim();622 data[selectedCell_row][selectedCell_col] = value;623 }624 currentCell = undefined;625}626function clearCache() {627 unshowNetwork();628 localStorage.clear();629 location.reload();630}631function removeNetwork(networkId) {632 currentNetwork = storage.getNetwork(networkId, SESSION_NAME);633 deleteCurrentNetwork();634}635function removeTable(tableId) {636 console.log('>> REMOVE TABLE');637 var table = storage.getUserTable(tableId, SESSION_NAME);638 unshowTable('#individualTables');639 if (currentNetwork.userNodeTable != undefined640 && currentNetwork.userNodeTable.name == table.name) {641 currentNetwork.userNodeTable = undefined;642 currentNetwork.userNodeSchema = undefined;643 $('#nodetableSelect').val(0);644 $("#nodetableSelect option[value='" + table.name + "']").remove();645 $('#nodeTableDiv').empty();646 }647 if (currentNetwork.userLinkTable648 && currentNetwork.userLinkTable.name == table.name) {649 currentNetwork.userLinkTable = undefined;650 currentNetwork.userLinkSchema = undefined;651 $('#linktableSelect').val(0);652 $("#linktableSelect option[value='" + table.name + "']").remove();653 $('#linkTableDiv').empty();654 }655 if (currentNetwork.userLocationTable != undefined656 && currentNetwork.userLocationTable.name == table.name) {657 currentNetwork.userLocationTable = undefined;658 currentNetwork.userLinkSchema = undefined;659 $('#locationtableSelect').val(0);660 $("#locationtableSelect option[value='" + table.name + "']").remove();661 $('#locationTableDiv').empty();662 }663 storage.deleteTable(table, SESSION_NAME);664 loadTableList();665 saveCurrentNetwork(true);666}667function exportNetwork(networkId) {668 vistorian.exportNetwork(storage.getNetwork(networkId, SESSION_NAME));669}670function setNetworkConfig(string) {671 currentNetwork.networkConfig = string;672 storage.saveNetwork(currentNetwork, SESSION_NAME);673 loadNetworkList();674 showNetwork(currentNetwork.id);...
NavPane.js
Source:NavPane.js
1import React from 'react';2import { css } from 'glamor';3import { transition } from '../styles/animations';4import { radios } from '../lib/constants';5import { Link } from 'react-router-dom';6import { push } from 'react-router-redux';7import { Network, Board, Plus } from './Icons';8const breakpoint = '@media(max-width: 500px)';9const styles = {10 networkChooser: css({11 padding: '30px 10px 10px',12 fontSize: 14,13 color: '#999',14 transition,15 '& select': {16 display: 'block',17 width: '100%',18 fontSize: 12,19 color: '#999'20 },21 '&:hover': {22 color: '#111',23 '& select': {24 color: '#111'25 }26 }27 }),28 networkContents: css({29 listStyle: 'none',30 margin: 0,31 padding: 0,32 paddingLeft: 10,33 '& .heading': {34 textTransform: 'uppercase',35 fontSize: 10,36 padding: '15px 0 5px',37 color: '#999'38 },39 '& .section': {40 [breakpoint]: {41 marginRight: 1042 }43 },44 '& .section a': {45 textDecoration: 'none',46 color: '#aaa',47 padding: '10px 7px',48 border: '1px solid transparent',49 borderRight: 0,50 display: 'block',51 transition,52 borderTopLeftRadius: 5,53 borderBottomLeftRadius: 5,54 '&:not(.selected):hover': {55 color: '#666'56 },57 [breakpoint]: {58 border: '1px solid transparent',59 borderRadius: 5,60 }61 },62 '& .section a.selected': {63 borderColor: '#ddd',64 background: '#fff',65 borderRight: '1px solid white',66 marginRight: -1,67 color: '#111',68 boxShadow: '-5px 2px 5px #eee',69 [breakpoint]: {70 border: '1px solid #ddd',71 boxShadow: '0 0 5px #eee'72 }73 },74 '& .fakeTab': {75 display: 'flex'76 },77 '& .icon': {78 width: 24,79 paddingTop: 280 },81 '& strong': {82 fontWeight: 'normal'83 },84 '& .info': {85 margin: 0,86 fontSize: 12,87 paddingTop: 3,88 color: '#999'89 },90 '& .addNode': {91 border: 0,92 background: 'none',93 fontSize: 11,94 display: 'inline-block',95 marginTop: 15,96 cursor: 'pointer',97 color: '#aaa',98 '&:hover': {99 color: '#333'100 }101 }102 })103};104export default ({ networks, router, match, dispatch, ...props }) => {105 if(!networks.length) return <div>No networks found</div>106 const currentNetwork = networks.find(n => router.location.pathname.indexOf(`/networks/${n.id}`) === 0);107 const addNode = props.addNode ? props.addNode : props.createHandlers(currentNetwork.id).addNode;108 const onNetworkChange = networkId => {109 if(networkId === 'create') return dispatch(push('/networks/create'));110 return dispatch(push(`/networks/${networkId}`))111 }112 return (113 <nav>114 <div className={styles.networkChooser}>115 Select a network:116 <select onChange={e => onNetworkChange(e.target.value)}117 value={currentNetwork.id}>118 {119 networks.map(network => (120 <option key={network.id} value={network.id}>121 {network.radio}122 </option>123 ))124 }125 <option disabled>â</option>126 <option value='create'>Create a new network...</option>127 </select>128 </div>129 <div className={styles.networkContents}>130 <div className='section'>131 <div className='heading'>Network</div>132 <Link to={`/networks/${currentNetwork.id}`} className={router.location.pathname === `/networks/${currentNetwork.id}` ? 'selected' : ''}>133 <div className='fakeTab'>134 <div className='icon'>135 <Network size={16} />136 </div>137 <div className='label'>138 <strong>{currentNetwork.radio}</strong>139 <p className='info'>140 {141 radios142 .find(r => r.name === currentNetwork.radio)143 .frequencies144 .find(f => (currentNetwork.radio === 'NRF24L01+' ? currentNetwork.nrfChannel : currentNetwork.rfmFrequency) === f.value)145 .display146 }147 </p>148 </div>149 </div>150 </Link>151 </div>152 <div className='section'>153 <div className='heading'>Nodes</div>154 <Link to={`/networks/${currentNetwork.id}/gateway`} className={router.location.pathname.indexOf(`/networks/${currentNetwork.id}/gateway`) === 0 ? 'selected': ''}>155 <div className='fakeTab'>156 <div className='icon'>157 <Board size={16} />158 </div>159 <div className='label'>160 <strong>Gateway</strong>161 <p className='info'>162 {({serial: 'Serial', esp8266: 'ESP8266', ethernet: 'Ethernet'})[currentNetwork.nodes.find(n => n.type === 'gateway').gatewayType]} gateway163 </p>164 </div>165 </div>166 </Link>167 {168 currentNetwork169 .nodes170 .filter(n => n.type !== 'gateway')171 .sort((a, b) => b.name - a.name)172 .map(node => (173 <Link key={node.id} to={`/networks/${currentNetwork.id}/${node.id}`} className={router.location.pathname.indexOf(`/networks/${currentNetwork.id}/${node.id}`) === 0 ? 'selected': ''}>174 <div className='fakeTab'>175 <div className='icon'>176 <Board size={16} />177 </div>178 <div className='label'>179 <strong>{node.name}</strong>180 <p className='info'>181 {node.sensors.length} sensor{node.sensors.length === 1 ? '' : 's'}182 </p>183 </div>184 </div>185 </Link>186 ))187 }188 <button className='addNode' onClick={e => addNode(currentNetwork.id)}>189 <Plus size={10} /> Add a new node190 </button>191 </div>192 </div>193 </nav>194 )...
index.stories.js
Source:index.stories.js
1import React from 'react';2import { storiesOf } from '@storybook/react';3import NetworkIndicator from '@rimble/network-indicator';4import { withKnobs, object } from '@storybook/addon-knobs';5storiesOf('NetworkIndicator/CurrentNetwork', module)6 .addDecorator(withKnobs) // enable knobs7 .add('connected', () => {8 const props = object('props', { currentNetwork: 1 });9 return (10 <div>11 <NetworkIndicator currentNetwork={props.currentNetwork} />12 </div>13 );14 })15 .add('not connected', () => {16 const props = object('props', { currentNetwork: null });17 return (18 <div>19 <NetworkIndicator currentNetwork={props.currentNetwork} />20 </div>21 );22 })23 .add('connected - custom message', () => {24 const props = object('props', { currentNetwork: 1 });25 return (26 <div>27 <NetworkIndicator currentNetwork={props.currentNetwork}>28 {{29 onNetworkMessage: 'You are connected',30 }}31 </NetworkIndicator>32 </div>33 );34 })35 .add('not connected - custom message', () => {36 const props = object('props', { currentNetwork: null });37 return (38 <div>39 <NetworkIndicator currentNetwork={props.currentNetwork}>40 {{41 noNetworkMessage: 'Not connected to anything',42 }}43 </NetworkIndicator>44 </div>45 );46 });47storiesOf('NetworkIndicator/RequiredNetwork', module)48 .add('matching networks', () => {49 const props = object('props', { currentNetwork: 1, requiredNetwork: 1 });50 return (51 <div>52 <NetworkIndicator53 currentNetwork={props.currentNetwork}54 requiredNetwork={props.requiredNetwork}55 />56 </div>57 );58 })59 .add('on wrong network', () => {60 const props = object('props', { currentNetwork: 4, requiredNetwork: 1 });61 return (62 <div>63 <NetworkIndicator64 currentNetwork={props.currentNetwork}65 requiredNetwork={props.requiredNetwork}66 />67 </div>68 );69 })70 .add('no current network', () => {71 const props = object('props', { currentNetwork: null, requiredNetwork: 1 });72 return (73 <div>74 <NetworkIndicator75 currentNetwork={props.currentNetwork}76 requiredNetwork={props.requiredNetwork}77 />78 </div>79 );80 })81 .add('matching networks - custom message', () => {82 const props = object('props', { currentNetwork: 1, requiredNetwork: 1 });83 return (84 <div>85 <NetworkIndicator86 currentNetwork={props.currentNetwork}87 requiredNetwork={props.requiredNetwork}88 >89 {{90 onNetworkMessage: 'Connected to correct network',91 }}92 </NetworkIndicator>93 </div>94 );95 })96 .add('on wrong network - custom message', () => {97 const props = object('props', { currentNetwork: 4, requiredNetwork: 1 });98 return (99 <div>100 <NetworkIndicator101 currentNetwork={props.currentNetwork}102 requiredNetwork={props.requiredNetwork}103 >104 {{105 onWrongNetworkMessage: 'Wrong network',106 }}107 </NetworkIndicator>108 </div>109 );110 })111 .add('no current network - custom message', () => {112 const props = object('props', { currentNetwork: null, requiredNetwork: 1 });113 return (114 <div>115 <NetworkIndicator116 currentNetwork={props.currentNetwork}117 requiredNetwork={props.requiredNetwork}118 >119 {{120 noNetworkMessage: 'Not connected to anything',121 }}122 </NetworkIndicator>123 </div>124 );...
Using AI Code Generation
1const { SynthetixJs } = require('synthetixio-synpress');2const { SynthetixJs } = require('synthetixio-synpress');3const { SynthetixJs } = require('synthetixio-synpress');4const { SynthetixJs } = require('synthetixio-synpress');5const { SynthetixJs } = require('synthetixio-synpress');6const { SynthetixJs } = require('synthetixio-synpress');7const { SynthetixJs } = require('synthetixio-synpress');8const { SynthetixJs } = require('synthetixio-synpress');9const { SynthetixJs } = require('synthetixio-synpress');10const { SynthetixJs } = require('synthetixio-synpress');11const { SynthetixJs } = require('synthetixio-synpress');12const { SynthetixJs } = require('synthetixio-synpress');13const { SynthetixJs } = require('synthetixio-synpress');14const { SynthetixJs } = require('synthetixio-synpress');
Using AI Code Generation
1const { currentNetwork } = require("synthetixio-synpress");2const { getSynthetixJs } = require("synthetixio-synpress");3const { getSynthetixJs } = require("synthetixio-synpress");4const { getSynthetixJs } = require("synthetixio-synpress");5const { getSynthetixJs } = require("synthetixio-synpress");6const { getSynthetixJs } = require("synthetixio-synpress");7const { getSynthetixJs } = require("synthetixio-synpress");8const { getSynthetixJs } = require("synthetixio-synpress");9const { getSynthetixJs } = require("synthetixio-synpress");10const { getSynthetixJs } = require("synthetixio-synpress");11const { getSynthetixJs } = require("synthetixio-synpress");12const { getSynthetixJs } = require("synthetixio-synpress");13const { getSynthetixJs } =
Using AI Code Generation
1const { SynthetixJs } = require('synthetix-js');2const { Synpress } = require('synthetixio-synpress');3const synpress = new Synpress();4async function test2() {5 const synthetixJs = new SynthetixJs({ networkId: 1 });6 const currentNetwork = await synpress.currentNetwork(synthetixJs);7 console.log(currentNetwork);8}9test2();10const { SynthetixJs } = require('synthetix-js');11const { Synpress } = require('synthetixio-synpress');12const synpress = new Synpress();13async function test3() {14 const synthetixJs = new SynthetixJs({ networkId: 42 });15 const currentNetwork = await synpress.currentNetwork(synthetixJs);16 console.log(currentNetwork);17}18test3();19const { SynthetixJs } = require('synthetix-js');20const { Synpress } = require('synthetixio-synpress');21const synpress = new Synpress();22async function test4() {23 const synthetixJs = new SynthetixJs({ networkId: 3 });24 const currentNetwork = await synpress.currentNetwork(synthetixJs);25 console.log(currentNetwork);26}27test4();28const { SynthetixJs } = require('synthetix-js');29const { Synpress } = require('synthetixio-synpress');30const synpress = new Synpress();31async function test5() {32 const synthetixJs = new SynthetixJs({ networkId: 4 });33 const currentNetwork = await synpress.currentNetwork(synthetixJs);34 console.log(currentNetwork);35}36test5();37const { Synthetix
Using AI Code Generation
1const synthetixio = require('synthetixio-synpress');2const currentNetwork = synthetixio.currentNetwork();3console.log(currentNetwork);4const synthetixio = require('synthetixio-synpress');5const currentNetwork = synthetixio.currentNetwork();6console.log(currentNetwork);7const synthetixio = require('synthetixio-synpress');8const currentNetwork = synthetixio.currentNetwork();9console.log(currentNetwork);10const synthetixio = require('synthetixio-synpress');11const currentNetwork = synthetixio.currentNetwork();12console.log(currentNetwork);13const synthetixio = require('synthetixio-synpress');14const currentNetwork = synthetixio.currentNetwork();15console.log(currentNetwork);16const synthetixio = require('synthetixio-synpress');17const currentNetwork = synthetixio.currentNetwork();18console.log(currentNetwork);19const synthetixio = require('synthetixio-synpress');20const currentNetwork = synthetixio.currentNetwork();21console.log(currentNetwork);22const synthetixio = require('synthetixio-synpress');23const currentNetwork = synthetixio.currentNetwork();24console.log(currentNetwork);
Using AI Code Generation
1const { currentNetwork } = require('synthetixio-synpress');2module.exports = async function () {3 const networkId = await currentNetwork();4 console.log(networkId);5};6const { currentNetwork } = require('synthetixio-synpress');7module.exports = async function () {8 const networkId = await currentNetwork();9 console.log(networkId);10};11const { currentNetwork } = require('synthetixio-synpress');12module.exports = async function () {13 const networkId = await currentNetwork();14 console.log(networkId);15};16const { currentNetwork } = require('synthetixio-synpress');17module.exports = async function () {18 const networkId = await currentNetwork();19 console.log(networkId);20};21const { currentNetwork } = require('synthetixio-synpress');22module.exports = async function () {23 const networkId = await currentNetwork();24 console.log(networkId);25};26const { currentNetwork } = require('synthetixio-synpress');27module.exports = async function () {28 const networkId = await currentNetwork();29 console.log(networkId);30};31const { currentNetwork } = require('synthetixio-synpress');32module.exports = async function () {33 const networkId = await currentNetwork();34 console.log(networkId);35};
Using AI Code Generation
1const { currentNetwork } = require('synthetixio-synpress');2const currentNetwork = currentNetwork();3console.log(currentNetwork);4const { currentNetwork } = require('synthetixio-synpress');5const currentNetwork = currentNetwork();6console.log(currentNetwork);7const { currentNetwork } = require('synthetixio-synpress');8const currentNetwork = currentNetwork();9console.log(currentNetwork);10const { currentNetwork } = require('synthetixio-synpress');11const currentNetwork = currentNetwork();12console.log(currentNetwork);13const { currentNetwork } = require('synthetixio-synpress');14const currentNetwork = currentNetwork();15console.log(currentNetwork);16const { currentNetwork } = require('synthetixio-synpress');17const currentNetwork = currentNetwork();18console.log(currentNetwork);19const { currentNetwork } = require('synthetixio-synpress');20const currentNetwork = currentNetwork();21console.log(currentNetwork);22const { currentNetwork } = require('synthetixio-synpress');23const currentNetwork = currentNetwork();24console.log(currentNetwork);25const { currentNetwork } = require('synthetixio-synpress');26const currentNetwork = currentNetwork();27console.log(currentNetwork);28const { currentNetwork } = require('synthetixio-synpress');29const currentNetwork = currentNetwork();30console.log(currentNetwork);31const { currentNetwork } = require('synthetixio
Using AI Code Generation
1const Synthetix = require('synthetixio-synpress');2const synthetix = new Synthetix();3synthetix.currentNetwork().then((result) => {4 console.log('current network is', result);5});6const Synthetix = require('synthetixio-synpress');7const synthetix = new Synthetix();8synthetix.currentNetwork().then((result) => {9 console.log('current network is', result);10});11const Synthetix = require('synthetixio-synpress');12const synthetix = new Synthetix();13synthetix.currentNetwork().then((result) => {14 console.log('current network is', result);15});16const Synthetix = require('synthetixio-synpress');17const synthetix = new Synthetix();18synthetix.currentNetwork().then((result) => {19 console.log('current network is', result);20});21const Synthetix = require('synthetixio-synpress');22const synthetix = new Synthetix();23synthetix.currentNetwork().then((result) => {24 console.log('current network is', result);25});26const Synthetix = require('
Using AI Code Generation
1const { SynthetixJs } = require('synthetix-js');2const { currentNetwork } = require('synthetix-synpress');3const network = currentNetwork();4const synthetix = new SynthetixJs({ networkId: network.id });5module.exports = {6 'SynthetixJs should be able to use currentNetwork': async (browser) => {7 const currentSynthetix = await synthetix.currentSynthetix();8 console.log(currentSynthetix);9 },10};
Using AI Code Generation
1const { SynthetixJs } = require('synthetix-js');2const SynthetixJs = require('synthetix-js');3const { SynthetixJs } = require('synthetix-js');4const SynthetixJs = require('synthetix-js');5const snxjs = new SynthetixJs({ networkId: 1 });6const network = snxjs.currentNetwork;7console.log(network);8const networkId = snxjs.currentNetworkId;9console.log(networkId);10const networkName = snxjs.currentNetworkName;11console.log(networkName);12const networkUrl = snxjs.currentNetworkUrl;13console.log(networkUrl);14const networkProvider = snxjs.currentNetworkProvider;15console.log(networkProvider);16const networkSigner = snxjs.currentNetworkSigner;17console.log(networkSigner);
Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.
You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.
Get 100 minutes of automation test minutes FREE!!