@*******************************************************************************************************
//  GraphMeasurements.cshtml - Gbtc
//
//  Copyright © 2016, Grid Protection Alliance.  All Rights Reserved.
//
//  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
//  the NOTICE file distributed with this work for additional information regarding copyright ownership.
//  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
//  file except in compliance with the License. You may obtain a copy of the License at:
//
//      http://opensource.org/licenses/MIT
//
//  Unless agreed to in writing, the subject software distributed under the License is distributed on an
//  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
//  License for the specific language governing permissions and limitations.
//
//  Code Modification History:
//  ----------------------------------------------------------------------------------------------------
//  01/15/2016 - J. Ritchie Carroll
//       Generated original version of source code.
//
//******************************************************************************************************
//  To use in an ASP.NET project, include a GraphMeasurements.cshtml view with following content:
//
//  @using GSF.Web
//  @section StyleSheets{@Html.Raw(ViewBag.StyleSheetsSection?.ToString())}
//  @Html.RenderResource("GSF.Web.Shared.Views.GraphMeasurements.cshtml")
//  @section Scripts{@Html.Raw(ViewBag.ScriptsSection?.ToString())}
//
//******************************************************************************************************
//  To use in a self-hosted web project, include a GraphMeasurements.cshtml view with following content:
//
//  @using GSF.Web.Model
//  @using <MyAppNameSpace>.Model
//  @inherits ExtendedTemplateBase<AppModel>
//  @section StyleSheets{@Html.Raw(ViewBag.StyleSheetsSection.ToString())}
//  @{Layout = "Layout.cshtml";}
//  @Html.RenderResource("GSF.Web.Shared.Views.GraphMeasurements.cshtml")
//  @section Scripts{@Html.Raw(ViewBag.ScriptsSection.ToString())}
//*****************************************************************************************************@
@* ReSharper disable RedundantUsingDirective *@
@* ReSharper disable Html.PathError *@
@* ReSharper disable InlineOutVariableDeclaration *@
@* ReSharper disable UnknownCssClass *@
@* ReSharper disable CoercedEqualsUsing *@
@using System.Collections.Generic
@using System.Net.Http
@using GSF
@using GSF.Web
@using GSF.Web.Model
@using GSF.Web.Shared
@inherits ExtendedTemplateBase
@{
    //Layout = "Layout.cshtml";
    ViewBag.Title = "Graph Measurements";
    ViewBag.SetFullWidth = true;

    HttpRequestMessage request = ViewBag.Request;
    Dictionary<string, string> parameters = request.QueryParameters();

    string showMenu;
    parameters.TryGetValue("ShowMenu", out showMenu);

    if (string.IsNullOrEmpty(showMenu))
    {
        showMenu = "true";
    }

    ViewBag.ShowMenu = showMenu.ParseBoolean();
}
@section StyleSheets {
    <link href="@Resources.Root/Shared/Content/jquery-ui.css" rel="stylesheet">
    <style>
        html {
            overflow-x: hidden;
            height: 100%;
        }

        body {
            overflow-x: hidden;
            overflow-y: hidden;
            height: 100%;
        }

        .list-group {
            padding-left: 0;
            margin-left: 0;
        }

        .list-group-item {
            padding-left: 0;
            margin-left: 0;
        }

        .panel-body {
            padding: 0;
        }

        .panel-heading {
            padding: 0;
        }

        ul.nowrap {
            overflow: auto;
        }

        li.nowrap {
            white-space: nowrap;
        }

        #messageBlock {
            width: 300px;
            margin: 0 auto;
            text-align: center
        }

        .ui-resizable-e {
            right: 2px;
            border-left-width: 8px;
            border-left-style: double;
            border-left-color: #C8C8C8;
        }

        .modal-dialog {
            width: 850px;
            margin: 2rem auto;
        }

        /* Collapsible button style */
        .btn-collapsible.btn {
            color: rgb(255, 255, 255);
            padding-bottom: 0;
            margin-left: -8px;
            font-family: "Glyphicons Halflings";
            font-size: 8pt;
            height: 22px;
        }

        /* Collapsible button icon when content is shown - arrow down */
        .btn-collapsible.btn:after {
            content: "\e114";
        }

        /* Collapsible button icon when content is hidden - arrow right */
        .btn-collapsible.btn.collapsed:after {
            content: "\e080";
        }

        .glyphicon-spin {
            -webkit-animation: spin 1.25s infinite linear;
            -moz-animation: spin 1.25s infinite linear;
            -o-animation: spin 1.25s infinite linear;
            animation: spin 1.25s infinite linear;
        }

        @@-moz-keyframes spin {
            0% {
                -moz-transform: rotate(0);
            }

            100% {
                -moz-transform: rotate(359deg);
            }
        }

        @@-webkit-keyframes spin {
            0% {
                -webkit-transform: rotate(0);
            }

            100% {
                -webkit-transform: rotate(359deg);
            }
        }

        @@-o-keyframes spin {
            0% {
                -o-transform: rotate(0);
            }

            100% {
                -o-transform: rotate(359deg);
            }
        }

        @@keyframes spin {
            0% {
                -webkit-transform: rotate(0);
                transform: rotate(0);
            }

            100% {
                -webkit-transform: rotate(359deg);
                transform: rotate(359deg);
            }
        }
    </style>
}
@section Scripts {
    <script src="@Resources.Root/Shared/Scripts/jquery-ui.js"></script>
    <script src="@Resources.Root/Shared/Scripts/jquery.subscriber.js"></script>
    <script src="@Resources.Root/Shared/Scripts/flot/jquery.flot.min.js"></script>
    <script src="@Resources.Root/Shared/Scripts/flot/jquery.flot.crosshair.min.js"></script>
    <script src="@Resources.Root/Shared/Scripts/flot/jquery.flot.navigate.min.js"></script>
    <script src="@Resources.Root/Shared/Scripts/flot/jquery.flot.resize.min.js"></script>
    <script src="@Resources.Root/Shared/Scripts/flot/jquery.flot.selection.min.js"></script>
    <script src="@Resources.Root/Shared/Scripts/flot/jquery.flot.time.min.js"></script>
    <script src="@Resources.Root/Shared/Scripts/flot/jquery.flot.axislabels.min.js"></script>
    <script src="@Resources.Root/Shared/Scripts/angular.js"></script>
    <script src="@Resources.Root/Shared/Scripts/jstorage.js"></script>
    <script>
        // Need to define a global function to reset the filter so
        // that it can be called by the click handler for a global button
        var resetFilter;

        (function ($) {
            var plot;
            var plotData = [];
            const graphMeasurements = angular.module('GraphMeasurements', []);
            var root = "@Resources.Root";

            // Logs messages to an array so they can be
            // observed on demand in the JavaScript console
            function log(obj) {
                const max = 500;

                if (window.log === undefined)
                    window.log = [];

                window.log.push(obj);

                if (window.log.length > max)
                    window.log.splice(0, window.log.length - max);
            }

            // Removes invalid characters from an identifier
            // so it can be used as an ID in HTML
            function cleanIdentifier(identifier) {
                if (identifier == null)
                    return "";

                return identifier.replace(/[!"#$%&'()*+,.\/:;<=>?@@[\\\]^`{|}~]/g, "-");
            }

            // Builds the plot upon which the chart will be displayed
            function buildPlot() {
                plot = $.plot("#placeholder", plotData, {
                    series: {
                        shadowSize: 0
                    },
                    yaxes: [
                        {
                            show: true,
                            position: "left",
                            axisLabel: "Frequency"
                        },
                        {
                            show: true,
                            position: "left",
                            axisLabel: "Voltage"
                        },
                        {
                            show: true,
                            position: "right",
                            axisLabel: "Current"
                        },
                        {
                            show: true,
                            position: "right",
                            axisLabel: "Angle"
                        },
                        {
                            show: true,
                            position: "right",
                            axisLabel: "Analog Data"
                        }
                    ],
                    xaxis: {
                        mode: "time",
                        timeformat: "%H:%M:%S",
                        timezone: "browser"
                    },
                    legend: {
                        show: true,
                        container: $('#legend'),
                        noColumns: 1,
                        margin: 5
                    }
                });
            }

            // Builds the stats modal for the device with the given acronym
            function buildModal(acronym) {
                $("#modals").append('<div id="' + acronym + '"></div>');

                let html = '<div id="mod' + acronym + '" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="confirm-modal" aria-hidden="true">';
                html += '<div class="modal-dialog">';
                html += '<div class="modal-content">';
                html += '<div class="modal-header">';
                html += '<a class="close" data-dismiss="modal">×</a>';
                html += '<h4>' + acronym + ' Statistics</h4>';
                html += '</div>';
                html += '<div class="modal-body" style="height: 300px; overflow-y: scroll" >';
                html += '<table id="stat' + acronym + '" class="table" style="font-size: x-small">';
                html += '<thead>Run-time Statistics:<thead />';
                html += '<tr><th style="text-align: center; white-space: nowrap">Stat ID</th><th>Statistic</th><th style="text-align: center">Value</th><th>TimeTag</th></tr>';
                html += '</table>';
                html += '</div>';
                html += '<div class="modal-footer">';
                html += '<span class="btn" data-dismiss="modal">Close</span>'; // close button
                html += '</div>';  // footer
                html += '</div>';  // modalWindow

                $('#' + acronym).html(html);
                $("#mod" + acronym).modal({ 'show': false });
            }

            // Explicitly sets heights of various components on
            // the page to take up available screen space
            function resizeElements() {
                const sidebar = $("#sidebar");
                const sidebarExpanded = sidebar.hasClass("in");
                const sidebarHeight = $(window).innerHeight() - sidebar.offset().top - 20;
                const chartHeight = sidebarExpanded ? sidebarHeight - 40 : $(window).innerHeight() - 180;

                if (!sidebar.hasClass("init-width")) {
                    sidebar.addClass("init-width");
                    sidebar.width($(window).innerWidth() * 0.20);
                }

                sidebar.height(sidebarHeight);
                $("#placeholder").height(chartHeight);
                $("#graphContainer").css({ "top": (sidebarExpanded ? -sidebar.height() : 0) + "px" });
                $("#graphContainer").css({ "left": (sidebarExpanded ? sidebar.width() + 30 : 0) + "px" });
                $("#graphContainer").width($(window).innerWidth() - (sidebarExpanded ? sidebar.width() + 80 : $("#collapseSidebarBtn").outerWidth() + 20));
                $(".ui-resizable-e").height(sidebar.prop("scrollHeight"));
            }

            // Loads settings from local storage and prepares
            // callback functions for the initial page load
            function loadSettings($scope) {
                $scope.dataPoints = 300;
                $scope.selections = [];

                if ($.jStorage.get("dataPoints") !== null)
                    $scope.dataPoints = $.jStorage.get("dataPoints");

                if ($.jStorage.get("selections") !== null)
                    $scope.selections = $.jStorage.get("selections");

                $scope.deviceCallbacks = {};
                $scope.measurementCallbacks = {};

                $.each($scope.selections, function (_, selection) {
                    $scope.deviceCallbacks[selection.device] = function (deviceMetadata) {
                        const identifier = cleanIdentifier(deviceMetadata.acronym);
                        $("#dd" + identifier).removeClass("collapse");
                        deviceMetadata.updateMeasurements();
                    }

                    $scope.measurementCallbacks[selection.signalid] = function (measurementMetadata) {
                        const cleanID = cleanIdentifier(measurementMetadata.id);
                        $("#cb" + cleanID).prop("checked", true);
                        updateFilter($scope, true, measurementMetadata);
                    }
                });

                $('#datapoints').val($scope.dataPoints);
            }

            function measurementChecked($scope, signalID) {
                if (signalID) {
                    const selections = $.jStorage.get("selections");

                    if (selections) {
                        for (let i = 0; i < selections.length; i++) {
                            if (selections[i].signalid == signalID)
                                return true;
                        }
                    }
                }

                return false;
            }

            // Updates the subscription filter for the data subscriber
            function updateFilter($scope, checked, measurementMetadata) {
                if (!hubIsConnected)
                    return;

                if (checked) {
                    $scope.selectedMeasurements[measurementMetadata.signalid] = {
                        selection: {
                            device: measurementMetadata.deviceacronym,
                            signalid: measurementMetadata.signalid
                        },
                        plotData: {
                            label: measurementMetadata.pointtag + " - " + measurementMetadata.signalacronym,
                            yaxis: measurementMetadata.YAxis,
                            data: []
                        }
                    };
                }
                else {
                    delete $scope.selectedMeasurements[measurementMetadata.signalid];
                }

                const selectedIDs = Object.keys($scope.selectedMeasurements);

                if (selectedIDs.length > 0) {
                    const filterStr = selectedIDs.join(";");
                    $scope.dataSubscriber.subscribe({ FilterExpression: filterStr });
                } else {
                    $scope.dataSubscriber.unsubscribe();
                }

                plotData = Object.keys($scope.selectedMeasurements)
                    .map(function (key) { return $scope.selectedMeasurements[key].plotData; });

                plot.setData(plotData);
                plot.setupGrid();
                plot.draw();

                $scope.selections = Object.keys($scope.selectedMeasurements)
                    .map(function (key) { return $scope.selectedMeasurements[key].selection; });

                $.jStorage.set("selections", $scope.selections);
            }

            // Queries metadata for the measurements associated with the given device
            function getMeasurements($scope, deviceMetadata) {
                if (!hubIsConnected)
                    return;

                $scope.dataSubscriber.getMetadata("MeasurementDetail", "DeviceAcronym = '" + deviceMetadata.acronym + "' AND SignalAcronym <> 'STAT'")
                    .fail(e => showErrorMessage(e, null, true))
                    .done(function (data) {
                        data.sort(function (m1, m2) {
                            function signalIndex (measurementMetadata) {
                                const matches = measurementMetadata.signalreference.match(/[0-9]+$/);

                                if (matches === null)
                                    return 0;

                                return Number(matches[0]);
                            }

                            function pointID (measurementMetadata) {
                                return Number(measurementMetadata.id.split(':')[1]);
                            }

                            const comparisons = [];
                            comparisons.push({ m1: m1.signalacronym, m2: m2.signalacronym });
                            comparisons.push({ m1: signalIndex(m1), m2: signalIndex(m2) });
                            comparisons.push({ m1: pointID(m1), m2: pointID(m2) });

                            for (let i = 0; i < comparisons.length; i++) {
                                const comparison = comparisons[i];

                                if (comparison.m1 < comparison.m2)
                                    return -1;

                                if (comparison.m1 > comparison.m2)
                                    return 1;
                            }

                            return 0;
                        });

                        $.each(data, function (_, measurementMetadata) {
                            if (measurementMetadata.signalacronym === "FREQ")
                                measurementMetadata.YAxis = 1;
                            else if (measurementMetadata.signalacronym === "VPHM")
                                measurementMetadata.YAxis = 2;
                            else if (measurementMetadata.signalacronym === "IPHM")
                                measurementMetadata.YAxis = 3;
                            else if (measurementMetadata.signalacronym.endsWith("PHA"))
                                measurementMetadata.YAxis = 4;
                            else
                                measurementMetadata.YAxis = 5;
                        });

                        deviceMetadata.measurements = data;
                        $scope.$apply();

                        // Handle the callbacks for automatic measurement auto-selection
                        $.each(data, function (_, measurementMetadata) {
                            const callback = $scope.measurementCallbacks[measurementMetadata.signalid];

                            if (callback !== undefined)
                                callback(measurementMetadata);
                        });
                    });
            }

            // Queries metadata for all statistics and
            // the modals to display stat information
            function getStatistics($scope) {
                $scope.dataSubscriber.getMetadata("MeasurementDetail", "SignalAcronym = 'STAT'")
                    .fail(e => showErrorMessage(e, null, true))
                    .done(function (data) {
                        data.sort(function (m1, m2) {
                            function category(measurementMetadata) {
                                const matches = measurementMetadata.signalreference.match(/!([^-]+)-ST[0-9]+$/);

                                if (matches === null)
                                    return null;

                                return matches[1];
                            }

                            function signalIndex(measurementMetadata) {
                                const matches = measurementMetadata.signalreference.match(/[0-9]+$/);

                                if (matches === null)
                                    return null;

                                return Number(matches[0]);
                            }

                            const comparisons = [];
                            comparisons.push({ m1: category(m1), m2: category(m2) });
                            comparisons.push({ m1: signalIndex(m1), m2: signalIndex(m2) });

                            for (let i = 0; i < comparisons.length; i++) {
                                const comparison = comparisons[i];

                                if (comparison.m1 < comparison.m2)
                                    return -1;

                                if (comparison.m1 > comparison.m2)
                                    return 1;
                            }

                            return 0;
                        });

                        $.each(data, function (_, measurementMetadata) {
                            if (measurementMetadata.enabled == true) {
                                const stat = {
                                    deviceAcronym: measurementMetadata.deviceacronym,
                                    id: measurementMetadata.signalid,
                                    signalReference: measurementMetadata.signalreference,
                                    value: null,
                                    timestamp: null,
                                    description: measurementMetadata.description
                                };

                                $scope.statLookup[measurementMetadata.signalid] = stat;

                                if (measurementMetadata.deviceacronym !== null) {
                                    const splitSignalReference = measurementMetadata.signalreference.split("!");
                                    const statIdentifier = splitSignalReference[splitSignalReference.length - 1];
                                    $('#stat' + $scope.cleanIdentifier(measurementMetadata.deviceacronym)).append('<tr><td style="text-align: center">' + statIdentifier + '</td><td id="des' + measurementMetadata.signalid + '">' + measurementMetadata.description + '</td><td style="text-align: center"><span id="val' + measurementMetadata.signalid + '" >' + stat.value + '</span></td><td style="white-space: nowrap"><span id="time' + measurementMetadata.signalid + '" >' + stat.timestamp + '</span></td></tr>');
                                }
                            }
                        });

                        $scope.$apply();
                        $("#imgDIRECT_CONNECTED").hide();
                        $("#btnDIRECT_CONNECTED").hide();
                        $scope.statSubscriber.connect();

                        // Handle the callbacks for automatic measurement auto-selection
                        $.each($scope.deviceData, function (_, parent) {
                            $.each(parent.devices, function (_, deviceMetadata) {
                                const callback = $scope.deviceCallbacks[deviceMetadata.acronym];

                                if (callback !== undefined)
                                    callback(deviceMetadata);
                            });
                        });
                    });
            }

            // Queries metadata for all devices to fill in the measurement
            // selection control on the left side of the page
            function getDevices($scope) {
                $scope.dataSubscriber.getMetadata("DeviceDetail", null, "Acronym")
                    .fail(e => showErrorMessage(e, null, true))
                    .done(function (data) {
                        var parents = {};
                        var parentAcronyms = [];

                        $.each(data, function (_, deviceMetadata) {
                            var parentAcronym = deviceMetadata.parentacronym;

                            if (parentAcronym === "")
                                parentAcronym = "DIRECT_CONNECTED";

                            var parent = parents[parentAcronym];

                            if (parent == null) {
                                parent = parents[parentAcronym] = {
                                    parent: parentAcronym,
                                    devices: []
                                };

                                if (parentAcronym !== "DIRECT_CONNECTED")
                                    parentAcronyms.push(parentAcronym);

                                buildModal(parentAcronym);
                            }

                            deviceMetadata.updateMeasurements = function () {
                                if (deviceMetadata.measurements != null)
                                    return;

                                getMeasurements($scope, deviceMetadata);
                            }

                            if (parent != null)
                                parent.devices.push(deviceMetadata);

                            buildModal($scope.cleanIdentifier(deviceMetadata.acronym));
                        });

                        parentAcronyms.sort();

                        if (parents["DIRECT_CONNECTED"] !== undefined)
                            parentAcronyms.splice(0, 0, "DIRECT_CONNECTED");

                        $scope.deviceData = parentAcronyms.map(function (acronym) { return parents[acronym]; });

                        getStatistics($scope);

                        showGraphMessage("Metadata load succeeded for " + data.length + " devices.", false, 10000);
                    });
            }

            // Updates the plot data to display the latest values in the chart
            function updatePlotData($scope, measurements) {
                $.each(measurements, function (_, measurement) {
                    const selectedMeasurement = $scope.selectedMeasurements[measurement.signalid];

                    if (selectedMeasurement == null)
                        return;

                    selectedMeasurement.plotData.data.push([measurement.timestamp, measurement.value]);
                });

                $.each(plotData, function (_, plotData) {
                    const data = plotData.data;

                    if (data.length > $scope.dataPoints)
                        data.splice(0, data.length - $scope.dataPoints);
                });

                plot.setData(plotData);
                plot.setupGrid();
                plot.draw();
            }

            // Updates the stat data to display the latest values in the modals
            function updateStatData($scope, measurements) {
                $.each(measurements, function (_, measurement) {
                    const stat = $scope.statLookup[measurement.signalid];

                    if (stat == null)
                        return;

                    stat.value = measurement.value;
                    stat.timestamp = measurement.timestamp;

                    if (stat.deviceAcronym !== null) {
                        if ($('#des' + measurement.signalid).text().indexOf("Boolean") >= 0)
                            $('#val' + measurement.signalid).text(Boolean(measurement.value));
                        else
                            $('#val' + measurement.signalid).text(measurement.value);

                        $('#time' + measurement.signalid).text(new Date(measurement.timestamp).formatDate(DateTimeFormat));

                        if (/!(IS-ST8|SUB-ST1|PMU-ST4)$/.test(stat.signalReference)) {
                            if (stat.value !== null && (stat.value === true || stat.value !== 0))
                                $('#img' + cleanIdentifier(stat.deviceAcronym)).attr("src", root + "/Shared/Images/StatusLights/Small/greenlight.png");
                            else
                                $('#img' + cleanIdentifier(stat.deviceAcronym)).attr("src", root + "/Shared/Images/StatusLights/Small/redlight.png");
                        }
                    }
                });

                $scope.$apply();
            }

            // Resets subscription state and initializes the subscribers from scratch -
            // this happens every time the SignalR hub reconnects so we can refresh our state
            function initializeSubscribers($scope) {
                loadSettings($scope);

                $scope.dataSubscriber = $.subscriber();
                $scope.statSubscriber = $.subscriber();
                $scope.selectedMeasurements = {};
                $scope.statLookup = {};

                $scope.measurementChecked = function (signalID) {
                    return measurementChecked($scope, signalID);
                }

                $scope.updateFilter = function (checked, measurementMetadata) {
                    updateFilter($scope, checked, measurementMetadata);
                }

                $scope.dataSubscriber.connectionEstablished = function () {
                    showGraphMessage("Loading subscription metadata...", true);

                    $scope.dataSubscriber.sendCommand("MetadataRefresh")
                        .fail(e => showErrorMessage(e, null, true));
                }

                $scope.dataSubscriber.metadataReceived = function () {
                    getDevices($scope);
                }

                $scope.dataSubscriber.newMeasurements = function (measurements) {
                    updatePlotData($scope, measurements);
                }

                $scope.dataSubscriber.statusMessage = function (message) {
                    log("Data subscription: " + message);
                }

                $scope.dataSubscriber.processException = function (exception) {
                    showErrorMessage("Data subscription: " + exception.Message);
                }

                $scope.statSubscriber.connectionEstablished = function () {
                    $scope.statSubscriber.subscribe({ FilterExpression: "FILTER ActiveMeasurements WHERE SignalType = 'STAT'" });
                }

                $scope.statSubscriber.newMeasurements = function (measurements) {
                    updateStatData($scope, measurements);
                }

                $scope.statSubscriber.statusMessage = function (message) {
                    log("Stat subscription: " + message);
                }

                $scope.statSubscriber.processException = function (exception) {
                    showErrorMessage("Stat subscription: " + exception.Message);
                }

                $scope.dataSubscriber.connect();
            }

            // Sets ups the angular controller for the graph measurements page
            // ReSharper disable once UnusedLocals
            const MeasurementsCtrl = graphMeasurements.controller("MeasurementsCtrl", function ($scope) {
                resetFilter = function () {
                    $("input[type=checkbox]").prop("checked", false);
                    $scope.selectedMeasurements = {};
                    $scope.dataSubscriber.unsubscribe();

                    plotData = [];
                    plot.setData(plotData);
                    plot.setupGrid();
                    plot.draw();

                    $scope.selections = [];
                    $.jStorage.set("selections", null);
                }

                $scope.cleanIdentifier = function (identifier) {
                    return cleanIdentifier(identifier);
                }

                $scope.cleanPointTag = function (metadata) {
                    return cleanIdentifier(metadata.pointtag);
                }

                // function called to update settings on change from the inputs
                $scope.updateDataPoints = function () {
                    $.jStorage.set("dataPoints", $scope.dataPoints);
                };

                $scope.formatDate = function (date) {
                    return new Date(date).formatDate(DateTimeFormat);
                }

                $(window).on("hubConnected", function (event) {
                    initializeSubscribers($scope);
                });

                if (hubIsConnected)
                    initializeSubscribers($scope);
            });

            // Fix heights when error messages are displayed
            $(window).on("messageVisibiltyChanged", function (event) {
                setTimeout(function () {
                    resizeElements();
                }, 200);
            });

            function showGraphMessage(message, showWorkingIcon, timeout) {
                if (isEmpty(message)) {
                    $("#message").text("");
                    $("#workingIcon").hide();
                }
                else {
                    $("#message").text(message);

                    if (showWorkingIcon !== undefined) {
                        if (showWorkingIcon)
                            $("#workingIcon").show();
                        else
                            $("#workingIcon").hide();
                    }
                }

                if (timeout !== undefined)
                    setTimeout(() => showGraphMessage(""), timeout);
            }

            // Handles initial page load
            $(document).ready(function () {
                // Set heights before we build the plot
                // so that we don't attempt to place a
                // chart in an element with zero height
                resizeElements();
                buildPlot();

                $(window).resize(resizeElements);

                const sidebar = $("#sidebar");

                sidebar.resizable({
                    handles: "e"
                });

                $(".ui-resizable-e").height(sidebar.prop("title", "Resize areas"));

                new ResizeObserver(function () {
                    resizeElements();
                }).observe(sidebar[0]);

                sidebar.on("shown.bs.collapse", function () {
                    resizeElements();
                    $("#collapseSidebarBtn").prop("title", "Expand measurement selection section...");
                });

                sidebar.on("hidden.bs.collapse",  function () {
                    resizeElements();
                    $("#collapseSidebarBtn").prop("title", "Collapse measurement selection section...");
                });
            });
        })(jQuery);
    </script>
}
<span class="glyphicon glyphicon-refresh pre-cache"></span>
<div class="container-fluid">
    <div class="row">
        <div ng-app="GraphMeasurements" ng-controller="MeasurementsCtrl">
            <div id="sidebar" class="col-md-3 collapse in" style="overflow-x: auto; resize: horizontal " role="navigation">
                <div class="panel-group">
                    <div class="panel panel-default">
                        <div class="panel-heading" style="padding: 5px">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" href="#collapse1">Settings</a>
                            </h4>
                        </div>
                        <div id="collapse1" class="panel-collapse collapse" style="margin: 5px">
                            <label for="datapoints">Number of Data Points to Plot:</label>
                            <input type="number" id="datapoints" ng-model="dataPoints" ng-change="updateDataPoints()" class="form-control" />
                        </div>
                    </div>
                </div>
                <div class="panel-group">
                    <div class="panel panel-default">
                        <div class="panel-heading" style="padding: 5px">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" href="#collapse2">Legend</a>
                            </h4>
                        </div>
                        <div id="collapse2" class="panel-collapse collapse" style="margin: 5px">
                            <div id="legend" style="overflow-y: scroll">
                                <table>
                                    <tr ng-repeat="x in legend"><td>{{x}}</td></tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div ng-repeat="parentDevice in deviceData" class="panel-group">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <div class="panel-title">
                                <img id="img{{parentDevice.parent}}" src="@Resources.Root/Shared/Images/StatusLights/Small/greylight.png" style="padding-left: 6px" />
                                <button class="btn btn-link btn-sm" style="font-size: x-small;" data-toggle="collapse" data-parent="#devicelist" data-target="#dd{{parentDevice.parent}}">{{parentDevice.parent}}</button>
                                <button id="btn{{parentDevice.parent}}" class="btn btn-xs badge pull-right" data-toggle="modal" data-target="#mod{{parentDevice.parent}}" style="font-size: xx-small; margin: 5px 15px 0 0">Stats</button>
                            </div>
                        </div>
                        <div class="panel-body">
                            <div id="dd{{parentDevice.parent}}" class="panel-collapse collapse in">
                                <ul class="list-group nowrap" id="parent{{parentDevice.parent}}">
                                    <li class="list-group-item nowrap" ng-repeat="deviceMetadata in parentDevice.devices">
                                        <img id="img{{cleanIdentifier(deviceMetadata.acronym)}}" src="@Resources.Root/Shared/Images/StatusLights/Small/greylight.png" style="padding-left: 5px" />
                                        <button class="btn btn-link btn-sm" style="font-size: x-small;" title="{{deviceMetadata.name}}" data-toggle="collapse" data-target="#dd{{cleanIdentifier(deviceMetadata.acronym)}}" ng-click="deviceMetadata.updateMeasurements()">{{deviceMetadata.acronym}}</button>
                                        <button id="btn{{cleanIdentifier(deviceMetadata.acronym)}}" class="btn btn-xs badge" data-toggle="modal" data-target="#mod{{cleanIdentifier(deviceMetadata.acronym)}}" style="font-size: xx-small;">Stats</button>
                                        <div id="dd{{cleanIdentifier(deviceMetadata.acronym)}}" class="collapse">
                                            <table class="table" style="width: 15%; font-size: x-small;" id="tb{{cleanIdentifier(deviceMetadata.acronym)}}">
                                                <tr><th></th><th>ID</th><th>Stream</th><th>Signal</th><th></th></tr>
                                                <tr title="{{measurementMetadata.description}}" ng-repeat="measurementMetadata in deviceMetadata.measurements">
                                                    <td>
                                                        <input type="checkbox" id="cb{{cleanIdentifier(measurementMetadata.id)}}" value="{{measurementMetadata.id}}#{{measurementMetadata.signalid}}" ng-model="checked" ng-init="checked=measurementChecked(measurementMetadata.signalid)" ng-change="updateFilter(checked, measurementMetadata)" />
                                                    </td>
                                                    <td>{{measurementMetadata.id.split(':')[1]}}</td>
                                                    <td>{{cleanPointTag(measurementMetadata)}}</td>
                                                    <td>{{measurementMetadata.signalacronym}}</td>
                                                </tr>
                                            </table>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div id="graphContainer" class="col-md-9 content" style="height: 100%">
            <div class="pull-left">
                <button id="collapseSidebarBtn" type="button" class="btn btn-primary btn-xs btn-collapsible" data-toggle="collapse" data-target="#sidebar" title="Collapse measurement selection section..."></button>
                <button type="button" class="btn btn-primary btn-xs" onclick="resetFilter()">Clear Signals</button>
            </div>
            <div id="messageBlock">
                <span id="message">Initializing data subscriptions...</span>&nbsp;&nbsp;<span id="workingIcon" class="glyphicon glyphicon-refresh glyphicon-spin"></span>
            </div>
            <br />
            <div id="graphWrapper" class="text-center" style="height: 100%">
                <div id="placeholder" style="width: 100%; height: 100px"></div>
            </div>
        </div>
    </div>
</div>
<div id="modals">
</div>
@{
    ViewBag.StyleSheetsSection = RenderSection("StyleSheets").ToString();
    ViewBag.ScriptsSection = RenderSection("Scripts").ToString();
}