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 { SynthetixUsing 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('synthetixioUsing 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!!
