From a89ecf2699e562aa79c61eebee3110a94f6ea448 Mon Sep 17 00:00:00 2001 From: Perch Date: Thu, 23 Dec 2021 23:25:13 +0400 Subject: [PATCH 01/36] visualizer new design, add reference profile in profile viewer --- examples/Dataset_Profiler_Viewer.ipynb | 89 +- src/whylogs/viewer/index-hbs-cdn-all-in.html | 802 +++++++++++++++---- src/whylogs/viz/browser_viz.py | 22 +- 3 files changed, 714 insertions(+), 199 deletions(-) diff --git a/examples/Dataset_Profiler_Viewer.ipynb b/examples/Dataset_Profiler_Viewer.ipynb index 48b2c8809b..768ba8de08 100644 --- a/examples/Dataset_Profiler_Viewer.ipynb +++ b/examples/Dataset_Profiler_Viewer.ipynb @@ -18,7 +18,7 @@ }, { "cell_type": "code", - "execution_count": null, + "execution_count": 1, "id": "1f0ab34a", "metadata": {}, "outputs": [], @@ -29,7 +29,7 @@ }, { "cell_type": "code", - "execution_count": null, + "execution_count": 2, "id": "fc04cc42", "metadata": {}, "outputs": [], @@ -59,7 +59,7 @@ }, { "cell_type": "code", - "execution_count": 14, + "execution_count": 4, "id": "7ebc0b5f", "metadata": {}, "outputs": [], @@ -86,22 +86,24 @@ }, { "cell_type": "code", - "execution_count": 17, + "execution_count": null, "id": "2e018520", "metadata": {}, "outputs": [], "source": [ "session = get_or_create_session()\n", - "with session.logger(\"mytestytest\",dataset_timestamp=datetime.datetime(2021, 6, 2)) as logger:\n", - " for _ in range(500):\n", - " logger.log({\"uniform_integers\": np.random.randint(0,50)})\n", - " logger.log({\"strings\": fake.name()})\n", - " logger.log({\"mixture_distribution\": np.random.choice(distribution, 1)[0]})\n", - " logger.log({\"nulls\": None})\n", - " logger.log({\"moah_data\":1})\n", - " logger.log({\"moah_data\":1})\n", - " logger.log({\"moah_data\":5})\n", - " profile=logger.profile" + "def profile_generator():\n", + " with session.logger(\"mytestytest\",dataset_timestamp=datetime.datetime(2021, 6, 2)) as logger:\n", + " for _ in range(500):\n", + " logger.log({\"uniform_integers\": np.random.randint(0,50)})\n", + " logger.log({\"strings\": fake.name()})\n", + " logger.log({\"mixture_distribution\": np.random.choice(distribution, 1)[0]})\n", + " logger.log({\"nulls\": None})\n", + " logger.log({\"moah_data\":1})\n", + " logger.log({\"moah_data\":1})\n", + " logger.log({\"moah_data\":5})\n", + " return logger.profile\n", + "profile=profile_generator()" ] }, { @@ -123,29 +125,54 @@ }, { "cell_type": "code", - "execution_count": 16, + "execution_count": null, "id": "e293634d", "metadata": {}, - "outputs": [ - { - "data": { - "text/plain": [ - "'/var/folders/pr/f715zv8x17b1v5vwydgv2gq40000gq/T/tmpabxku502.html'" - ] - }, - "execution_count": 16, - "metadata": {}, - "output_type": "execute_result" - } - ], + "outputs": [], "source": [ "profile_viewer(profiles=[profile], output_path=None)" ] }, + { + "cell_type": "markdown", + "id": "e9cebe5c", + "metadata": {}, + "source": [ + "### Logging reference profile" + ] + }, + { + "cell_type": "code", + "execution_count": 8, + "id": "d36563e9", + "metadata": {}, + "outputs": [], + "source": [ + "reference_profile=profile_generator() " + ] + }, + { + "cell_type": "markdown", + "id": "56dcaef9", + "metadata": {}, + "source": [ + "### Add reference profile to viewer and open" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "id": "6a4eb38c", + "metadata": {}, + "outputs": [], + "source": [ + "profile_viewer(profiles=[profile], reference_profiles=[reference_profile], output_path=None,)" + ] + }, { "cell_type": "code", "execution_count": null, - "id": "d09732c5", + "id": "1b1d89e2", "metadata": {}, "outputs": [], "source": [] @@ -153,9 +180,9 @@ ], "metadata": { "kernelspec": { - "display_name": "whylogs-dev", + "display_name": "Python 3", "language": "python", - "name": "whylogs-dev" + "name": "python3" }, "language_info": { "codemirror_mode": { @@ -167,7 +194,7 @@ "name": "python", "nbconvert_exporter": "python", "pygments_lexer": "ipython3", - "version": "3.9.6" + "version": "3.8.8" } }, "nbformat": 4, diff --git a/src/whylogs/viewer/index-hbs-cdn-all-in.html b/src/whylogs/viewer/index-hbs-cdn-all-in.html index 40141b4c37..e18aca1989 100644 --- a/src/whylogs/viewer/index-hbs-cdn-all-in.html +++ b/src/whylogs/viewer/index-hbs-cdn-all-in.html @@ -327,7 +327,6 @@ .wl-table-cell, .wl-table-head { - border-right: 1px solid var(--brandSecondary200); border-bottom: 1px solid var(--brandSecondary200); display: table-cell; padding: 12px 18px; @@ -438,7 +437,7 @@ } .wl-property-panel__chart--single { - padding-bottom: 30px; + padding-bottom: 17px; } .wl-property-panel__chart-title { @@ -666,6 +665,246 @@ color: var(--brandSecondary900); line-height: 1.5; } + + .wl__unlock-the-power { + padding: 15px; + position: fixed; + bottom: 0; + left: 0; + z-index: 999999; + background: #F1F6F6; + margin-bottom: 0 !important; + display: flex; + flex-direction: column; + align-items: center; + -webkit-box-shadow: 0px -6px 13px 0px rgba(0,0,0,0.32); + box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.05); + width: var(--SIDE-PANEL-WIDTH); + } + + .wl__btn-signup { + font-size: 13px; + } + + .wl__close-icon { + width: 15px; + height: 15px; + } + + .wl__close-icon img{ + width: 100%; + height: 100%; + cursor: pointer; + } + + .count-color { + color: black; + } + + .wl__burger_icon { + width: 18px; + height: 16px; + } + + .wl__burger_icon img{ + width: 100%; + height: 100%; + cursor: pointer; + } + + .space-between { + display: flex; + justify-content: space-between; + } + + .align-items { + display: flex; + align-items: center; + } + + .display-flex{ + display: flex; + } + + .feature-count-title { + font-size: 22px; + } + + .wl_filter-options { + background: rgba(255, 255, 255, 0.5); + border: 1px solid #DBE5E7; + box-sizing: border-box; + border-radius: 4px; + padding: 10px; + } + + .form-check-input:checked { + background-color: #0E7384; + border-color: #0E7384; + } + + .form-check-input[type=checkbox] { + border-radius: 1.25em; + } + + .not-clickable { + pointer-events: none; + } + + .wl_arrow-icon { + width: 15px; + height: 15px; + } + + .arrow-icon-container { + height: 100%; + cursor: pointer; + } + + .wl_list-item-dot { + background: #b0d2d7; + width: 8px; + height: 8px; + border-radius: 50px; + } + + .wl_filter-list-item { + display: flex; + align-items: center; + } + + .wl_filter-list-item>span{ + padding-left: 15px; + } + + .table-border-none { + border: none; + } + + .clickable-test-feature-wrap { + background: #F8FAFB; + } + + .clickable-test-feature-heading { + display: flex; + flex-direction: column; + } + + .clickable-test-feature-heading-wrap { + padding: 35px; + padding-bottom: 0; + border-bottom: 2px solid #EBF2F3; + } + + .pages-button-wrap { + display: flex; + align-items: flex-end; + } + + .page-button-wrap { + padding-right: 60px; + } + + .page-button{ + border: none; + background: no-repeat; + color: #6C757D; + font-weight: 600; + font-size: 16px; + letter-spacing: -0.01em; + padding-bottom: 25px; + } + + .activ-pages-button{ + color: #369BAC !important; + border-bottom: 4px solid #369BAC !important; + padding-bottom: 21px !important; + } + + .title p { + font-weight: 600; + font-size: 24px; + color: #313B3D; + } + + .info p { + font-weight: 600; + font-size: 12px; + color: #313B3D; + } + + .info div { + font-weight: 600; + font-size: 18px; + line-height: 20px; + color: #0E7384; + } + + .chart, .info { + display: flex; + flex-direction: column; + align-items: flex-end; + padding-right: 20px; + } + + .info:last-child { + padding: 0; + } + + .clickable-test-feature-body { + display: flex; + flex-direction: column; + } + + .chart-box-wrap { + display: flex; + justify-content: center; + } + + .chart-box { + width: 75%; + height: 310px; + border: 2px solid #EBF2F3; + background: #FFF; + border-radius: 4px; + } + + .chart-info-wrap { + display: flex; + align-items: flex-end; + } + + .chart-info { + display: flex; + align-items: flex-end; + } + + + @media only screen and (min-width: 1350px) { + .clickable-test-feature-body { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + row-gap: 20px; + column-gap: 20px; + } + + .chart-box-wrap { + width: 45%; + display: flex; + justify-content: center; + margin-bottom: 0 !important; + } + + .chart-box { + width: 100%; + height: 310px; + border: 2px solid #EBF2F3; + background: #FFF; + border-radius: 4px; + } + } @@ -689,12 +928,12 @@
Profile viewer for whylogs
rel="noreferrer noopener" > @@ -716,98 +955,163 @@
Profile viewer for whylogs
-
+
-
- Unlock the power of WhyLabs: -
    -
  • Generate an API token to upload and save profiles to the platform
    • -
  • Analyze and compare profiles to identify data drift and other anomalies
    • -
  • Turn on monitoring with a single click, no manual set up required!
    • -
  • Get alerted in real time when data and model health issues arise
    • -
- -
-
- Profile -
2020-02-26 12:23:32 PM PST
-
- -
- - -
- - Total features -

{{getTotalFeatureCount}}

- - Filter features by type -
- - -
- -
- - +
+
+
+ {{getTotalFeatureCount}} + features +
+
+ + +
+
-
- - +
+
+
+ Filter by type +
+ +
+
+
+ + +
+
+ + +
+
+ + +
- Feature list -

Click on features to scroll into view

-
-
    {{{getFeatureList}}}
+ +
+
+
    {{{getFeatureList}}}
+
+
+
+
+ - + +
+
+
+
+
+
+
+
+

Clickable test feature

+
+
+ +
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
Feature
+
+
Feature
+
Reference
+
Frequent items
Inf. feature type
Total count
@@ -824,26 +1128,29 @@

{{getTotalFeatureCount}}

Max
-
    {{#each this.columns}}
  • + >

    {{@key}}

    -
    -
    + >View details +
    +
    +
    {{{getGraphHtml this}}} -
    +
    +
    +
    {{{frequentItems this}}}
    {{@key}}
    • {{/each}}
-
@@ -903,7 +1209,6 @@
-

Hold on! :)

@@ -928,7 +1233,7 @@

Hold on! :)

return parseFloat(number).toFixed(decimals); } - function generateChart(data, height = 75, width = 350) { + function generateChart(data, height = 75, width = 350, referenceProfile = false) { const MARGIN = { TOP: 5, RIGHT: 5, @@ -955,10 +1260,12 @@

Hold on! :)

.range([CHART_HEIGHT, 0]); // Add the y Axis - svgEl - .append("g") - .attr("transform", "translate(" + MARGIN.LEFT + ", " + MARGIN.TOP + ")") - .call(d3.axisLeft(yScale).tickValues([0, maxYValue])); + if (!referenceProfile) { + svgEl + .append("g") + .attr("transform", "translate(" + MARGIN.LEFT + ", " + MARGIN.TOP + ")") + .call(d3.axisLeft(yScale).tickValues([0, maxYValue/2, maxYValue])); + } const gChart = svgEl.append("g"); gChart @@ -976,6 +1283,48 @@

Hold on! :)

return svgEl._groups[0][0].outerHTML; } + function graph(column, key, referenceColumn) { + let data = []; + const columnKey = key.data.key + let chartValue = false + if(!!referenceColumn){ + column = referenceColumn.columns[columnKey] + chartValue = true + } else if (referenceColumn === undefined) { + column = "" + } + + if (column.numberSummary) { + if (column.numberSummary.isDiscrete) { + column.frequentItems.items.forEach((item, index) => { + data.push({ + axisY: item.estimate, + axisX: index, + }); + }); + } else { + column.numberSummary.histogram.counts.slice(0, 30).forEach((count, index) => { + data.push({ + axisY: count, + axisX: index, + }); + }); + } + } else if (column.numberSummary === undefined && referenceColumn === null ) { + return 'No data to show the chart'; + } else if (referenceColumn === undefined) { + $(document).ready(function() { + $(".reference-table-head").addClass("d-none") + }); + return '' + } else if (referenceColumn.frequentItems === undefined){ + return ''; + } + return generateChart(data, ...[,,], chartValue); + } + + const profileFromCSVfile = {{{reference_profile}}} + Handlebars.registerHelper("json", function (context) { return JSON.stringify(context); }); @@ -1103,7 +1452,15 @@

Hold on! :)

} } - featureListHTML += `
  • ${feature[0]}
    • `; + featureListHTML += ` +
  • +
    +
    + +
    + ${feature[0]} +
    • + `; }); return featureListHTML; @@ -1142,42 +1499,31 @@

    Hold on! :)

    return count; }); - Handlebars.registerHelper("getGraphHtml", function (column) { - let data = []; + Handlebars.registerHelper("getGraphHtml",(column,key) => graph(column, key, null)); + Handlebars.registerHelper("getReferenceGraphHtml",(column,key) => graph(column, key, profileFromCSVfile)); - if (column.numberSummary) { - if (column.numberSummary.isDiscrete) { - column.frequentItems.items.forEach((item, index) => { - data.push({ - axisY: item.estimate, - axisX: index, - }); - }); - } else { - column.numberSummary.histogram.counts.slice(0, 30).forEach((count, index) => { - data.push({ - axisY: count, - axisX: index, - }); - }); - } - } else { - return 'No data to show the chart'; - } + Handlebars.registerHelper("getPropertyPanelGraphHtml", function (column, key) { + let chartString = ""; + const columnKey = key.data.key + let chartValue = false; + let chartHeight = 130; + let chartWidth = undefined; + const chartTitle = `
    Histogram Data
    ` + const freqData = []; + const histData = []; - return generateChart(data); - }); + if (!!profileFromCSVfile) { + column = profileFromCSVfile.columns[columnKey] + chartValue = true; + chartHeight = 50; + chartWidth = 280; + } - Handlebars.registerHelper("getPropertyPanelGraphHtml", function (column) { - let chartString = ""; const freqChart = (chart) => - `
    Frequent Items Data
    ${chart}
    `; + `
    ${!chartValue ? chartTitle : ""}${chart}
    `; const histChart = (chart) => `
    Histogram Data
    ${chart}
    `; - const freqData = []; - const histData = []; - if (column.numberSummary) { if (column.frequentItems && column.frequentItems.items) { column.frequentItems.items.forEach((item, index) => { @@ -1198,18 +1544,25 @@

    Hold on! :)

    } if (column.numberSummary.isDiscrete) { - if (freqData.length > 0) chartString += freqChart(generateChart(freqData, 130)); - if (histData.length > 0) chartString += histChart(generateChart(histData, 130)); + if (freqData.length > 0) chartString += freqChart(generateChart(freqData, chartHeight, chartWidth, chartValue)); + if (histData.length > 0 && !chartValue) chartString += histChart(generateChart(histData, 130)); } else { - if (histData.length > 0) chartString += histChart(generateChart(histData, 130)); - if (freqData.length > 0) chartString += freqChart(generateChart(freqData, 130)); + if (histData.length > 0 && !chartValue) chartString += histChart(generateChart(histData, 130)); + if (freqData.length > 0) chartString += freqChart(generateChart(freqData, chartHeight, chartWidth, chartValue)); } } - return chartString; }); } + function sidebarContentHeight(params) { + const $sidebarContentPadding = +$("#sidebar-content-single-profile").css("padding").replace('px','') * 2 + const $sidebarContentHeight = $("#sidebar-content-single-profile").height() + $sidebarContentPadding + const $sidebar = $(".sidebar") + + $sidebar.css("margin-bottom", `${$sidebarContentHeight}px`) + } + function initHandlebarsTemplate() { // Replace this context with JSON from .py file const context = {{{profile_from_whylogs}}}; @@ -1239,6 +1592,8 @@

    Hold on! :)

    }; let searchString = ""; + sidebarContentHeight() + function handleSearch() { const featureListChildren = $sidebarFeatureNameList.children; const tableBodyChildren = $tableBody.children; @@ -1339,12 +1694,117 @@

    Hold on! :)

    }); } - function openPropertyPanel(column, infType, chart) { - $("#wl-property-panel__chart").html(chart); + function openFilter() { + const $notClickableBurgerIcon = $("#not_clickable_burger_icon") + const $filterOptions = $(".filter-options"); + const $burgerIcon = $("#burger_icon") + + $filterOptions.removeClass("d-none"); + $burgerIcon.addClass("d-none"); + $notClickableBurgerIcon.removeClass("d-none"); + } + + function closeFilter() { + const $notClickableBurgerIcon = $("#not_clickable_burger_icon") + const $filterOptions = $(".filter-options"); + const $burgerIcon = $("#burger_icon") + + $filterOptions.addClass("d-none"); + $burgerIcon.removeClass("d-none"); + $notClickableBurgerIcon.addClass("d-none"); + } + + function closeSignUpText() { + const $signUpText = $(".sign-up-text") + + $signUpText.addClass("d-none"); + sidebarContentHeight() + } + + $(document).on("click", ".js-list-group-item span", function (e) { + const listItem = $("li>span"), + listItemIndex = listItem.index(e.target), + $listItemDot = $(".wl_list-item-dot")[listItemIndex], + $arrowIcon = $(".wl_arrow-icon")[listItemIndex] + + listItem.css("padding-left", "15px") + $(".wl_list-item-dot").removeClass("d-none") + $(".wl_arrow-icon").addClass("d-none") + $($arrowIcon).removeClass("d-none") + $($listItemDot).addClass("d-none") + $(listItem[listItemIndex]).css("padding-left", "8px") + }) + + function fixNumberTo(number, decimals = 3) { + return parseFloat(number).toFixed(decimals); + } + + const getReferenceProfile = () => { return {{{reference_profile}}} } + + function openReferencePropertyPanel( + chart, + propertyPanelData, + infType + ) { const $propertyPanelTitle = $(".wl-property-panel__title"); const $propertyPanelProfileName = $(".wl-property-panel__table-th-profile"); - const feature = JSON.parse(column); + const chipElement = (chip) => `${chip}`; + const chipElementTableData = (value) => `${chipElement(value)}`; + const chipElementEstimation = (count) => + `${count}`; + let chipString = "" + + $("#wl-property-panel__chart").html(chart); + propertyPanelData.forEach((item) => { + chipString += ` + + ${chipElementTableData(item.value)} + ${chipElementEstimation(item.count)} + `; + }); + $(".wl-property-panel__frequent-items").html(chipString); + + if (infType === "Non-discrete") { + $propertyPanelTitle.html("Histogram data:"); + $propertyPanelProfileName.html("Bin values"); + } else if (infType === "Discrete") { + $propertyPanelTitle.html("Frequent items:"); + $propertyPanelProfileName.html("Counts"); + } + + $(".wl-property-panel").addClass("wl-property-panel--open"); + $(".wl-table-wrap").addClass("wl-table-wrap--narrow"); + } + + function openProfilePropertyPanel(chart, feature) { + const chartInfoItem = (drift, driftName) => ` +
    +
    ${drift}
    +

    ${driftName}

    +
    + ` + const $tableContent = $("#table-content"); + const $clickableTestFeatureWrap = $(".clickable-test-feature-wrap"); + const $pagesButtons = $(".page-button"); + const $pagesButton = $pagesButtons[0]; + let chipString = ""; + + $pagesButtons.removeClass("activ-pages-button") + $($pagesButton).addClass("activ-pages-button") + $tableContent.addClass("d-none") + $clickableTestFeatureWrap.removeClass("d-none") + + $("#chart").html(chart); + chipString += ` + ${chartInfoItem(fixNumberTo(feature.numberSummary.stddev), "Drift from ref")} + ${chartInfoItem(feature.numberSummary.count.toString(), "Total Count")} + ${chartInfoItem(fixNumberTo(feature.numberSummary.mean), "Mean")} + ` + $(".chart-info").html(chipString); + } + + function getPropertyPanelData(feature) { let propertyPanelData = []; if (feature.numberSummary) { @@ -1366,33 +1826,49 @@

    Hold on! :)

    }, []); } } - let chipString = ""; - const chipElement = (chip) => `${chip}`; - const chipElementTableData = (value) => `${chipElement(value)}`; - const chipElementEstimation = (count) => - `${count}`; - - propertyPanelData.forEach((item) => { - chipString += ` - - ${chipElementTableData(item.value)} - ${chipElementEstimation(item.count)} - - `; - }); - $(".wl-property-panel__frequent-items").html(chipString); - if (infType === "Non-discrete") { - $propertyPanelTitle.html("Histogram data:"); - $propertyPanelProfileName.html("Bin values"); - } else if (infType === "Discrete") { - $propertyPanelTitle.html("Frequent items:"); - $propertyPanelProfileName.html("Counts"); + return propertyPanelData + } + + function openPropertyPanel(key, column, infType, chart) { + let profileColumns = null; + let feature = JSON.parse(column); + const profileFromCSVfile = getReferenceProfile(); + + if (profileFromCSVfile) { + profileColumns = profileFromCSVfile.columns[key] + feature = profileColumns + } + + let propertyPanelData = getPropertyPanelData(feature); + + if (profileFromCSVfile && feature.numberSummary) { + openProfilePropertyPanel(chart, feature) + } else { + openReferencePropertyPanel( + chart, + propertyPanelData, + infType + ) } + } + + function closeFeatureHeading() { + const $tableContent = $("#table-content") + const $clickableTestFeatureWrap = $(".clickable-test-feature-wrap") - $(".wl-property-panel").addClass("wl-property-panel--open"); - $(".wl-table-wrap").addClass("wl-table-wrap--narrow"); + $tableContent.removeClass("d-none") + $clickableTestFeatureWrap.addClass("d-none") } + $(document).on("click", ".page-button", function(e) { + const $pagesButtons = $(".page-button"), + $pagesButtonIndex = $pagesButtons.index(e.target), + $pagesButton = $(".page-button")[$pagesButtonIndex] + + $pagesButtons.removeClass("activ-pages-button") + $($pagesButton).addClass("activ-pages-button") + }) + function handleClosePropertyPanel() { $(".wl-property-panel").removeClass("wl-property-panel--open"); $(".wl-table-wrap").removeClass("wl-table-wrap--narrow"); @@ -1404,4 +1880,4 @@

    Hold on! :)

    initHandlebarsTemplate(); initWebsiteScripts(); - + \ No newline at end of file diff --git a/src/whylogs/viz/browser_viz.py b/src/whylogs/viz/browser_viz.py index a59244b5cf..e41f26959b 100644 --- a/src/whylogs/viz/browser_viz.py +++ b/src/whylogs/viz/browser_viz.py @@ -12,7 +12,7 @@ logger = logging.getLogger(__name__) -def profile_viewer(profiles: List[DatasetProfile] = None, output_path=None) -> str: +def profile_viewer(profiles: List[DatasetProfile] = None, reference_profiles: List[DatasetProfile] = None, output_path=None) -> str: """ open a profile viewer loader on your default browser """ @@ -21,7 +21,8 @@ def profile_viewer(profiles: List[DatasetProfile] = None, output_path=None) -> s except ImportError as e: Compiler = None logger.debug(str(e)) - logger.debug("Unable to load pybars; install pybars3 to load profile from directly from the current session ") + logger.debug( + "Unable to load pybars; install pybars3 to load profile from directly from the current session ") index_path = os.path.abspath(os.path.join(_MY_DIR, os.pardir, "viewer", "index.html")) webbrowser.open_new_tab(f"file:{index_path}#") @@ -30,14 +31,20 @@ def profile_viewer(profiles: List[DatasetProfile] = None, output_path=None) -> s # create json output from profiles if profiles: if len(profiles) > 1: - logger.warning("More than one profile not implemented yet, default to first profile in the list ") + logger.warning( + "More than one profile not implemented yet, default to first profile in the list ") profile_jsons = [message_to_json(each_prof.to_summary()) for each_prof in profiles] + if reference_profiles: + reference_profile_jsons = [message_to_json(each_prof.to_summary()) + for each_prof in reference_profiles] + else: index_path = os.path.abspath(os.path.join(_MY_DIR, os.pardir, "viewer", "index.html")) webbrowser.open_new_tab(f"file:{index_path}#") return None - index_path = os.path.abspath(os.path.join(_MY_DIR, os.pardir, "viewer", "index-hbs-cdn-all-in.html")) + index_path = os.path.abspath(os.path.join( + _MY_DIR, os.pardir, "viewer", "index-hbs-cdn-all-in.html")) with open(index_path, "r") as file_with_template: source = file_with_template.read() @@ -46,7 +53,12 @@ def profile_viewer(profiles: List[DatasetProfile] = None, output_path=None) -> s compiler = Compiler() template = compiler.compile(source) # replace handlebars for json profiles - output_index = template({"profile_from_whylogs": profile_jsons[0]}) + if reference_profiles: + output_index = template( + {"profile_from_whylogs": profile_jsons[0], "reference_profile": reference_profile_jsons[0]}) + else: + output_index = template( + {"profile_from_whylogs": profile_jsons[0]}) if not output_path: output_path = tempfile.mkstemp(suffix=".html")[1] From 4149338c054fc1a956897cb1bb6be0460ee32c50 Mon Sep 17 00:00:00 2001 From: Perch Date: Sun, 26 Dec 2021 19:49:30 +0400 Subject: [PATCH 02/36] add json reference profile button, add UI changes --- src/whylogs/viewer/css/whylogs-styles.css | 123 ++++++- src/whylogs/viewer/index.html | 261 +++++--------- src/whylogs/viewer/js/whylogs-script.js | 408 +++++++--------------- 3 files changed, 345 insertions(+), 447 deletions(-) diff --git a/src/whylogs/viewer/css/whylogs-styles.css b/src/whylogs/viewer/css/whylogs-styles.css index c7c41eea94..a78746751e 100644 --- a/src/whylogs/viewer/css/whylogs-styles.css +++ b/src/whylogs/viewer/css/whylogs-styles.css @@ -154,6 +154,7 @@ z-index: 1000; display: block; padding: 20px; + padding-bottom: 0; overflow-x: hidden; overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ background-color: var(--brandSecondary100); @@ -374,7 +375,6 @@ a .wl-table-row--bottom-shadow { .wl-table-cell, .wl-table-head { - border-right: 1px solid var(--brandSecondary200); border-bottom: 1px solid var(--brandSecondary200); display: table-cell; padding: 12px 18px; @@ -697,3 +697,124 @@ a .wl-table-row--bottom-shadow { color: var(--brandSecondary900); line-height: 1.5; } + +.wl-compare-profile { + position: sticky; + left: 0; + display: flex; + justify-content: space-between; + padding: 18px; +} + +.wl-select-reference-profile { + display: flex; + align-items: center; +} + +.wl__unlock-the-power { + padding: 15px; + position: fixed; + bottom: 0; + left: 0; + background: #F1F6F6; + margin-bottom: 0 !important; + display: flex; + flex-direction: column; + align-items: center; + -webkit-box-shadow: 0px -6px 13px 0px rgba(0,0,0,0.32); + box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.05); + width: calc(var(--SIDE-PANEL-WIDTH) - 17px); +} + +.wl__btn-signup { + font-size: 13px; +} + +.wl__close-icon { + width: 15px; + height: 15px; +} + +.wl__close-icon img{ + width: 100%; + height: 100%; + cursor: pointer; +} + +.count-color { + color: black; +} +.wl__burger_icon { + width: 18px; + height: 16px; +} + +.wl__burger_icon img{ + width: 100%; + height: 100%; + cursor: pointer; +} + +.space-between { + display: flex; + justify-content: space-between; +} + +.feature-count-title { + font-size: 22px; +} + +.wl_filter-options { + background: rgba(255, 255, 255, 0.5); + border: 1px solid #DBE5E7; + box-sizing: border-box; + border-radius: 4px; + padding: 10px; +} + +.form-check-input:checked { + background-color: #0E7384; + border-color: #0E7384; +} + +.form-check-input[type=checkbox] { + border-radius: 1.25em; +} + +.not-clickable { + pointer-events: none; +} + +.wl_arrow-icon { + width: 15px; + height: 15px; +} + +.arrow-icon-container { + height: 100%; + cursor: pointer; +} + +.wl_list-item-dot { + background: #b0d2d7; + width: 8px; + height: 8px; + border-radius: 50px; +} + +.wl_filter-list-item { + display: flex; + align-items: center; +} + +.wl_filter-list-item>span{ + padding-left: 15px; +} + +.display-flex{ + display: flex; +} + +.table-border-none { + border: none; +} \ No newline at end of file diff --git a/src/whylogs/viewer/index.html b/src/whylogs/viewer/index.html index 40e12ce9e2..62c6e45c2d 100644 --- a/src/whylogs/viewer/index.html +++ b/src/whylogs/viewer/index.html @@ -74,196 +74,117 @@
    Profile viewer for whylogs
    -
    - Unlock the power of WhyLabs: -
      -
    • Generate an API token to upload and save profiles to the platform
      • -
    • Analyze and compare profiles to identify data drift and other anomalies
      • -
    • Turn on monitoring with a single click, no manual set up required!
      • -
    • Get alerted in real time when data and model health issues arise
      • -
    - -
    -
    - Profile -
    2020-02-26 12:23:32 PM PST
    -
    -
    - Profiles -

    Select a profile from the dropdown below

    -
    -
    -
    -
    - - - -
    - -
    - +
    +
    +
    + 0 + features
    - -
    -
    -
    -
    - - - - -
    - -
    - +
    + +
    - -
    -
    -
    -
    - - - - -
    - -
    -
    - -
    - Total features -

    0

    - - -
    -
    - Filter features by type - -
    - - -
    -
    - - -
    -
    - - +
    +
    + Filter by type +
    + +
    +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    - Feature list -

    Click on features to scroll into view

    -
      +
        +
        +
        + +
        - +
        +
        +
        Compare profile to reference profile, such as training data
        +
        +
        +
        + + +
        +
        +
        +
        -
        Feature
        +
        +
        Feature
        +
        Reference
        +
        Frequent items
        Inf. feature type
        Total count
        diff --git a/src/whylogs/viewer/js/whylogs-script.js b/src/whylogs/viewer/js/whylogs-script.js index 6ff99fccd3..b335175a58 100644 --- a/src/whylogs/viewer/js/whylogs-script.js +++ b/src/whylogs/viewer/js/whylogs-script.js @@ -14,7 +14,15 @@ }; // HTML Elements - const $selectedProfile = $(".wl__selected-profile"); + const $filterListItem = $("#filter-list-item"); + const $notClickableBurgerIcon = $("#not_clickable_burger_icon"); + const $filterCloseIcon = $("#filter-close-icon"); + const $closeIcon = $("#close-icon"); + const $signUpText = $(".sign-up-text"); + const $burgerIcon = $("#burger_icon"); + const $referenceJsonForm = $("#reference-json-form"); + const $referencefileInput = $("#reference-file-input"); + const $compareProfile = $("#compare-profile"); const $featureCount = $(".wl__feature-count"); const $sidebarFeatureNameList = $(".wl__sidebar-feature-name-list"); const $featureCountDiscrete = $(".wl__feature-count--discrete"); @@ -28,15 +36,11 @@ const $tableContent = $("#table-content"); const $tableMessage = $("#table-message"); const $sidebarContent = $("#sidebar-content"); - const $singleProfileWrap = $("#sidebar-content-single-profile"); const $multiProfileWrap = $("#sidebar-content-multi-profile"); const $profileDropdown = $(".sidebar-content__profile-dropdown"); const $propertyPanelTitle = $(".wl-property-panel__title"); const $propertyPanelProfileName = $(".wl-property-panel__table-th-profile"); const $filterOptions = $(".filter-options"); - const $selectOptionFirstTime = $("#select-option-first-time"); - const $removeButton = $(`#remove-button-1`); - const $removeButton2 = $("#remove-button-2"); // Constants and variables let featureSearchValue = ""; @@ -44,6 +48,7 @@ let propertyPanelData = []; let profiles = []; let jsonData = {}; + let referenceJsonData = {}; let dataForRead = {}; let featureDataForTableForAllProfiles = {}; let numOfProfilesBasedOnType = {}; @@ -90,7 +95,7 @@ } } - if (!checkJSONValidityForMultiProfile(jsonData)) { + if (!checkJSONValidityForMultiProfile(jsonData) && checkJSONValidityForMultiProfile(jsonData)) { for (let i = 0; i < featureListChildren.length; i++) { const name = featureListChildren[i].dataset.featureName.toLowerCase(); const type = featureListChildren[i].dataset.inferredType.toLowerCase(); @@ -101,19 +106,6 @@ } } } - if (checkJSONValidityForMultiProfile(jsonData)) { - for (let i = 0; i < featureListChildren.length; i++) { - const name = featureListChildren[i].dataset.featureName.toLowerCase(); - const type = featureListChildren[i].dataset.inferredType.toLowerCase(); - - const typeOfFirst = type.split(",")[0]; - if (isActiveInferredType[typeOfFirst] && name.startsWith(featureSearchValue)) { - featureListChildren[i].style.display = ""; - } else { - featureListChildren[i].style.display = "none"; - } - } - } $featureCount.html(featureCount); } @@ -131,12 +123,6 @@ }; } - function formatLabelDate(timestamp) { - const date = new Date(timestamp); - const format = d3.timeFormat("%Y-%m-%d %I:%M:%S %p %Z"); - return format(date); - } - function scrollToFeatureName(event) { const TABLE_HEADER_OFFSET = 90; const $tableWrap = $(".wl-table-wrap"); @@ -156,7 +142,7 @@ const types = [infType, infTypeSecond]; $(".wl-property-panel__table-th-profile").addClass("d-none"); $("#property-panel-0").removeClass("d-none"); - if (!checkJSONValidityForMultiProfile(jsonData)) { + if (checkJSONValidityForMultiProfile(jsonData) || checkJSONValidityForSingleProfile(jsonData)) { if (items.length > 0 && items !== "undefined") { let chipString = ""; const chipElement = (chip) => `${chip}`; @@ -183,49 +169,6 @@ $(".wl-property-panel").addClass("wl-property-panel--open"); $(".wl-table-wrap").addClass("wl-table-wrap--narrow"); } - } else { - let chipString = ""; - $propertyPanelTitle.html(""); - const chipElement = (chip) => `${chip}`; - const chipElementTableData = (value) => `${chipElement(value)}`; - const chipElementEstimation = (count) => - `${count}`; - const columns = []; - let itemsLength = items[0].length; - selectedProfiles.forEach((selected, index) => { - if (selected !== null && items[parseInt(selected)].length > 0 && items !== "undefined") { - columns[index] = []; - items[parseInt(selected)].forEach((item, i) => { - columns[index][i] = ""; - - if (index === 0) { - columns[index][i] += `${chipElementTableData(item.value)}`; - } - let value = Number.isInteger(Number(item.count)) ? item.count : roundToThreeDecimals(item.count); - columns[index][i] += `${chipElementEstimation(value)}`; - }); - } else { - columns[index] = []; - for (let i = 0; i < itemsLength; i++) { - columns[index][i] = ""; - } - } - - $(`#property-panel-${index}`).html(`Profile ${index + 1}`); - $(`#property-panel-${index}`).removeClass("d-none"); - }); - for (let i = 0; i < items[0].length; i++) { - chipString += ` - `; - for (let j = 0; j < selectedProfiles.length; j++) { - chipString += columns[j][i]; - } - chipString += ``; - } - - $(".wl-property-panel").addClass("wl-property-panel--open"); - $(".wl-table-wrap").addClass("wl-table-wrap--narrow"); - $(".wl-property-panel__frequent-items").html(chipString); } } @@ -235,14 +178,8 @@ $(".wl-property-panel__frequent-items").html(""); } - function roundToThreeDecimals(str) { - let floatNum = parseFloat(str); - let floatRounded = floatNum.toFixed(3); - - return String(floatRounded); - } // Override and populate HTML element values - function updateHtmlElementValues(index) { + function updateHtmlElementValues() { $sidebarFeatureNameList.html(""); $tableMessage.addClass("d-none"); Object.entries(featureDataForTableForAllProfiles).forEach((feature) => { @@ -295,14 +232,22 @@ } // strings for tableToShow let tempChartDataString = ""; + let referenceTempChartDataString = ""; feature[1].chartData.forEach((chartData, index) => { if (selectedProfiles.includes(String(index))) { let profileSelected = selectedProfiles.indexOf(String(index)); tempChartDataString += `
        ${ chartData.length > 0 - ? getGraphHtml(chartData, profileSelected) + ? getGraphHtml(feature[1].chartData[0], profileSelected) : 'No data to show the chart' }
        `; + if (feature[1].chartData[1] && feature[1].chartData[1].length > 0) { + referenceTempChartDataString+= `
        ${ + chartData.length > 0 + ? getGraphHtml(feature[1].chartData[1], profileSelected) + : 'No data to show the chart' + }
        `; + } } }); @@ -406,7 +351,6 @@ const showButton = selectedProfiles.some( (profile) => profile !== null && feature[1].inferredType[profile].toLowerCase() !== "unknown", ); - const $tableRow = $( `

      • ${feature[0]}

        • -
        ` + - tempChartDataString + - `
        ` + +
        +
        ` + + tempChartDataString + + referenceTempChartDataString + + `
        +
        +
        ` + freaquentItemsElmString + `
        ` + inferredTypeString + @@ -450,35 +398,27 @@ quantilesMaxString + `
        `, ); - if (!checkJSONValidityForMultiProfile(jsonData)) { + if (checkJSONValidityForMultiProfile(jsonData) || checkJSONValidityForSingleProfile(jsonData)) { const $tableRowButton = $(``); - $tableRowButton.on( "click", openPropertyPanel.bind(this, propertyPanelData[feature[0]][0], feature[1].inferredType[0].toLowerCase()), ); $tableRow.find(".wl-table-cell__title-wrap").append($tableRowButton); - } else { - const $tableRowButton = $(``); - - let secondType = feature[1].inferredType[selectedProfiles[1]] || null; - if (typeof secondType === "string") secondType = secondType.toLowerCase(); - $tableRowButton.on( - "click", - openPropertyPanel.bind( - this, - propertyPanelData[feature[0]], - feature[1].inferredType[selectedProfiles[0]].toLowerCase(), - secondType, - ), - ); - $tableRow.find(".wl-table-cell__title-wrap").append($tableRowButton); } // Update data table rows/columns $tableBody.append($tableRow); $sidebarFeatureNameList.append( - `
      • ${feature[0]}
        • `, + ` +
      • +
        +
        + +
        + ${feature[0]} +
        • + `, ); }); if (!checkJSONValidityForMultiProfile(jsonData)) { @@ -498,7 +438,6 @@ $featureCountDiscrete.html(countDiscrete); $featureCountNonDiscrete.html(countNonDiscrete); $featureCountUnknown.html(countUnknown); - $selectedProfile.html(formatLabelDate(+dataForRead.properties.dataTimestamp)); } } @@ -530,103 +469,53 @@ $featureCount.html(featureCount); } - function renderProfileDropdown(id) { - $profileDropdown.html(""); - - $profileDropdown.append( - ``, - ); - for (let i = 0; i < profiles.length; i++) { - if (selectedProfiles.includes(String(i))) { - const option = ``; - $profileDropdown.append(option); - } else { - const option = ``; - $profileDropdown.append(option); - } + function getDataForRead(dataForRead, jsonData, referneceData) { + if (!dataForRead.properties) { + dataForRead.properties = []; } - } + dataForRead.properties.push(jsonData.properties); - function reRenderProfileDropdown(id) { - $(`#sidebar-content-multi-profile-dropdown-${id}`).html(""); - let selected = ""; - if (selectedProfiles[id] === null || selectedProfiles.length - 1 < id) { - selected = "selected"; - } - $(`#sidebar-content-multi-profile-dropdown-${id}`).append( - ``, - ); - for (let i = 0; i < profiles.length; i++) { - if (selectedProfiles.includes(String(i))) { - let selected = ""; - if (selectedProfiles[id] === String(i)) { - selected = "selected"; - } - const option = ``; - $(`#sidebar-content-multi-profile-dropdown-${id}`).append(option); - } else { - const option = ``; - $(`#sidebar-content-multi-profile-dropdown-${id}`).append(option); + Object.entries(jsonData.columns).forEach((feature) => { + let tempFeatureName = feature[0]; + if (!dataForRead.columns) { + dataForRead.columns = []; } - } - } - - function handleProfileChange(event) { - handleClosePropertyPanel(); - $tableContent.removeClass("d-none"); - $("#table-content-wrapper").removeClass("d-none"); - const value = event.target.value; - const id = event.target.dataset; - selectedProfiles[parseInt(id.id)] = value; - let addButton = $(`#add-profile-sidebar-button-${id.id}`); - addButton.attr("disabled", false); - for (let i = 0; i < selectedProfiles.length; i++) { - reRenderProfileDropdown(i); - } - $selectOptionFirstTime.addClass("d-none"); - $tableBody.html(""); - updateHtmlElementValues(); - renderList(); + if (!dataForRead.columns[tempFeatureName]) dataForRead.columns[tempFeatureName] = []; + dataForRead.columns[tempFeatureName].push(feature[1]); + if ( + referneceData && + referneceData.columns[tempFeatureName].numberSummary + ) { + const { + numberSummary, + frequentItems, + ...referenceDataForRead + } = dataForRead.columns[tempFeatureName][0] + dataForRead.columns[tempFeatureName].push({ + ...referenceDataForRead, + referenceNumberSummary: referneceData.columns[tempFeatureName].numberSummary, + referenceFrequentItems: referneceData.columns[tempFeatureName].frequentItems + }) + } + }); + return dataForRead } - function mapProfileDataToReadData(jsonData, dataForRead) { + function mapProfileDataToReadData(jsonData, dataForRead, referneceData) { if (checkJSONValidityForMultiProfile(jsonData)) { - Object.entries(jsonData).forEach((profile) => { - if (!dataForRead.properties) { - dataForRead.properties = []; - } - dataForRead.properties.push(profile[1].properties); - - Object.entries(profile[1].columns).forEach((feature) => { - let tempFeatureName = feature[0]; - if (!dataForRead.columns) { - dataForRead.columns = []; - } - if (!dataForRead.columns[tempFeatureName]) dataForRead.columns[tempFeatureName] = []; - dataForRead.columns[tempFeatureName].push(feature[1]); - }); - }); + const multiReferenceData = referneceData ? Object.values(referneceData)[0] : referneceData + dataForRead = getDataForRead(dataForRead, Object.values(jsonData)[0], multiReferenceData) } else { - if (!dataForRead.properties) { - dataForRead.properties = []; - } - dataForRead.properties.push(jsonData.properties); - - Object.entries(jsonData.columns).forEach((feature) => { - let tempFeatureName = feature[0]; - if (!dataForRead.columns) { - dataForRead.columns = []; - } - if (!dataForRead.columns[tempFeatureName]) dataForRead.columns[tempFeatureName] = []; - dataForRead.columns[tempFeatureName].push(feature[1]); - }); + dataForRead = getDataForRead(dataForRead, jsonData, referneceData) } + makeFeatureDataForAllProfilesToShowOnTable( featureDataForTableForAllProfiles, dataForRead, numOfProfilesBasedOnType, ); } + function makeFeatureDataForAllProfilesToShowOnTable( featureDataForTableForAllProfiles, @@ -652,6 +541,7 @@ mean: [], stddev: [], chartData: [], + refereneChartData: [], frequentItemsElemString: [], }; numOfProfilesBasedOnType[feature[0]] = { @@ -717,6 +607,14 @@ axisX: index, }); }); + if (tempFeatureValues.referenceFrequentItems) { + tempFeatureValues.referenceFrequentItems.items.forEach((item, index) => { + featureDataForTableForAllProfiles[feature[0]].chartData[1].push({ + axisY: item.estimate, + axisX: index, + }); + }); + } // Frequent item chips / bedge propertyPanelData[feature[0]][iteration] = tempFeatureValues.frequentItems.items.reduce((acc, item) => { @@ -737,7 +635,7 @@ // Chart if (tempFeatureValues.numberSummary) { // Histogram chips / bedge - propertyPanelData[feature[0]][iteration] = tempFeatureValues.numberSummary.histogram.counts.reduce( + propertyPanelData[feature[0]][0] = tempFeatureValues.numberSummary.histogram.counts.reduce( (acc, value, index) => { acc.push({ value: value, @@ -749,7 +647,7 @@ ); tempFeatureValues.numberSummary.histogram.counts.slice(0, 30).forEach((count, index) => { - featureDataForTableForAllProfiles[feature[0]].chartData[iteration].push({ + featureDataForTableForAllProfiles[feature[0]].chartData[0].push({ axisY: count, axisX: index, }); @@ -763,6 +661,14 @@ featureDataForTableForAllProfiles[feature[0]].chartData[iteration] = []; propertyPanelData[feature[0]] = []; } + if (tempFeatureValues.referenceNumberSummary) { + tempFeatureValues.referenceNumberSummary.histogram.counts.slice(0, 30).forEach((count, index) => { + featureDataForTableForAllProfiles[feature[0]].chartData[1].push({ + axisY: count, + axisX: index, + }); + }); + } } iteration += 1; }); @@ -774,14 +680,6 @@ $tableMessage.find("p").html(message); } - function collectProfilesFromJSON(data) { - return Object.keys(data).map((profile, i) => ({ - label: profile, - value: profile, - index: i, - })); - } - function compareArrays(array, target) { if (array.length !== target.length) return false; @@ -821,15 +719,17 @@ $tableMessage.addClass("d-none"); $sidebarContent.removeClass("d-none"); $tableContent.removeClass("d-none"); + $compareProfile.removeClass("d-none"); } function hideDataVisibility() { $tableMessage.removeClass("d-none"); $sidebarContent.addClass("d-none"); $tableContent.addClass("d-none"); + $compareProfile.removeClass("d-none"); } - function loadFile() { + function loadFile(inputId, jsonForm) { profiles = []; isActiveInferredType = {}; $featureFilterInput.html(""); @@ -845,7 +745,7 @@ numOfProfilesBasedOnType = {}; handleClosePropertyPanel(); - const input = document.getElementById("file-input"); + const input = document.getElementById(inputId); if (!input) { updateTableMessage(MESSAGES.error.noInputElementFound); } else if (!input.files) { @@ -855,53 +755,31 @@ } else { const file = input.files[0]; const fr = new FileReader(); - fr.onload = receivedText; + fr.onload = (e) => receivedText(e, jsonForm, inputId); fr.readAsText(file); } } - function receivedText(e) { + function receivedText(e, jsonForm, inputId) { const lines = e.target.result; - jsonData = JSON.parse(lines); - if (Object.keys(dataForRead).length !== 0) { - dataForRead = {}; - } - mapProfileDataToReadData(jsonData, dataForRead); - if (selectedProfiles.length > 0) { - selectedProfiles = []; + let data = JSON.parse(lines); + if (inputId === "file-input") { + jsonData = data; + referenceJsonData = undefined + } else { + referenceJsonData = data } - if (checkJSONValidityForMultiProfile(jsonData)) { - for (let i = 0; i < 2; i++) { - let addButton = $(`#add-profile-sidebar-button-${i}`); - addButton.removeClass("d-none"); - addButton.attr("disabled", true); - } - - profiles = collectProfilesFromJSON(jsonData); - renderProfileDropdown(); + mapProfileDataToReadData(jsonData, dataForRead, referenceJsonData); + if (checkJSONValidityForSingleProfile(data) || checkJSONValidityForMultiProfile(data)) { $(".compare-select").addClass("d-none"); - $tableMessage.removeClass("d-none"); - $tableContent.addClass("d-none"); - $("#table-content-wrapper").addClass("d-none"); - updateTableMessage(MESSAGES.error.noProfileSelected); $multiProfileWrap.removeClass("d-none"); - $singleProfileWrap.addClass("d-none"); - $filterOptions.addClass("d-none"); - $sidebarContent.removeClass("d-none"); - renderList(); - $jsonForm.trigger("reset"); - } else if (checkJSONValidityForSingleProfile(jsonData)) { - $(".compare-select").addClass("d-none"); - $multiProfileWrap.addClass("d-none"); - $singleProfileWrap.removeClass("d-none"); - $filterOptions.removeClass("d-none"); selectedProfiles[0] = "0"; $tableBody.html(""); updateHtmlElementValues(); renderList(); showDataVisibility(); - $jsonForm.trigger("reset"); + jsonForm.trigger("reset"); } else { $tableBody.html(""); updateTableMessage(MESSAGES.error.invalidJSONFile); @@ -910,60 +788,38 @@ } } - for (let i = 0; i < 2; i++) { - let addButton = $(`#add-profile-sidebar-button-${i}`); - - addButton.on("click", function () { - reRenderProfileDropdown(i + 1); - if ($(`#sidebar-content-multi-profile-dropdown-${i} option:selected`).text() !== "Select your profile") { - addButton.addClass("d-none"); + $burgerIcon.on("click", function () { + $filterOptions.removeClass("d-none"); + $burgerIcon.addClass("d-none"); + $notClickableBurgerIcon.removeClass("d-none"); + }); - $(`#add-profile-wrap-${i + 1}`).addClass("button-remove-select"); - $(`#add-profile-wrap-${i + 1}`).removeClass("d-none"); - $(`#remove-button-${i + 1}`).removeClass("d-none"); - } else { - } - }); - } + $filterCloseIcon.on("click", function () { + $filterOptions.addClass("d-none"); + $burgerIcon.removeClass("d-none"); + $notClickableBurgerIcon.addClass("d-none"); + }); - $removeButton.on("click", function () { - handleClosePropertyPanel(); - $(`#add-profile-wrap-1`).addClass("d-none"); - $("#sidebar-content-multi-profile-dropdown-1").val("none"); - $removeButton.addClass("d-none"); - let addButton = $(`#add-profile-sidebar-button-1`); - addButton.attr("disabled", true); - $(`#add-profile-wrap-0`).removeClass("button-remove-select"); - $(`#remove-button-0`).addClass("d-none"); - $(`#add-profile-sidebar-button-0`).removeClass("d-none"); - selectedProfiles[1] = null; - for (let i = 0; i < selectedProfiles.length; i++) { - reRenderProfileDropdown(i); - } - $tableBody.html(""); - updateHtmlElementValues(); - renderList(); + $closeIcon.on("click", function () { + $signUpText.addClass("d-none"); }); - $removeButton2.on("click", function () { - handleClosePropertyPanel(); - $(`#add-profile-wrap-2`).addClass("d-none"); - $("#sidebar-content-multi-profile-dropdown-1").val("none"); - $removeButton2.addClass("d-none"); - $(`#add-profile-wrap-1`).removeClass("button-remove-select"); - $(`#add-profile-sidebar-button-1`).removeClass("d-none"); - selectedProfiles[2] = null; - for (let i = 0; i < selectedProfiles.length; i++) { - reRenderProfileDropdown(i); - } - $tableBody.html(""); - updateHtmlElementValues(); - renderList(); + $(document).on("click", ".js-list-group-item span", function (e) { + const listItem = $("li>span"), + listItemIndex = listItem.index(e.target), + $listItemDot = $(".wl_list-item-dot")[listItemIndex], + $arrowIcon = $(".wl_arrow-icon")[listItemIndex]; + + $(".wl_list-item-dot").removeClass("d-none"); + $(".wl_arrow-icon").addClass("d-none"); + $($arrowIcon).removeClass("d-none"); + $($listItemDot).addClass("d-none"); }); + // Bind event listeners - $fileInput.on("change", loadFile); + $fileInput.on("change", () => loadFile("file-input", $jsonForm)); + $referencefileInput.on("change", () => loadFile("reference-file-input", $referenceJsonForm)); - $profileDropdown.on("change", handleProfileChange); $(document).on("click", ".js-list-group-item span", scrollToFeatureName); $featureSearch.on( "input", @@ -980,4 +836,4 @@ handleSearch(); }); $(".wl-property-panel__button").on("click", handleClosePropertyPanel); -})(); +})(); \ No newline at end of file From 1cfc2da17d1478417df26f6f45366fd0a3b2ef99 Mon Sep 17 00:00:00 2001 From: Perch Date: Tue, 28 Dec 2021 03:03:51 +0400 Subject: [PATCH 03/36] change view detail button position, change referenceProfilePanel chart view, add icons --- src/whylogs/viewer/index-hbs-cdn-all-in.html | 204 +++++++++++-------- 1 file changed, 114 insertions(+), 90 deletions(-) diff --git a/src/whylogs/viewer/index-hbs-cdn-all-in.html b/src/whylogs/viewer/index-hbs-cdn-all-in.html index e18aca1989..729e95325a 100644 --- a/src/whylogs/viewer/index-hbs-cdn-all-in.html +++ b/src/whylogs/viewer/index-hbs-cdn-all-in.html @@ -778,6 +778,7 @@ } .table-border-none { + padding: 0; border: none; } @@ -828,23 +829,27 @@ } .info p { - font-weight: 600; - font-size: 12px; - color: #313B3D; + font-weight: 600; + font-size: 12px; + color: #313B3D; } .info div { - font-weight: 600; - font-size: 18px; - line-height: 20px; - color: #0E7384; + font-weight: 600; + font-size: 18px; + line-height: 20px; + color: #0E7384; } .chart, .info { - display: flex; - flex-direction: column; - align-items: flex-end; - padding-right: 20px; + display: flex; + flex-direction: column; + align-items: flex-end; + padding-right: 20px; + } + + .chart { + margin-bottom: 1rem; } .info:last-child { @@ -879,7 +884,10 @@ align-items: flex-end; } - + .property-panel-close-icon { + cursor: pointer; + } + @media only screen and (min-width: 1350px) { .clickable-test-feature-body { display: flex; @@ -944,7 +952,7 @@
        Profile viewer for whylogs
        id="image0" width="400" height="59" - xlink:href="data:image/png;base64,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" + xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHYAAAASCAYAAACOwipdAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAARKSURBVHgB3VqBcdswDKSzQLVB2QmqEdQJ6k4QblB1AisTRJnAzgRJJpA2sDuBnAmcTICSEWVDEEhCdtK79u94UsAHCIAUBcpZAIBWShnbHheLxU4F4HmlbS+21Zb7kuDtLGdD+oy95F5/ryKwXGdD21YNY1lZZi8/bXumtiO+rL2dHzg+21fYy1LiS8C2UfJYtOpz8ilCe7attbbaiJ0hfue3ts39vfPtfqRryVvocfCKIaMNnFAJeQWSayRvVAS2f4m4NZIbJC9VApazQfxHJM+QfKtmwsUljYXxI4XbgA3t5yiGzrZ8UNhDIlkwnpQ3A0JeEUhGl0gEnsA1kpdI7oLUQhuj2KifaiZgvHhHcQr5KdwyNjqh7mFQqJCwCThWMQYKFU9mR/ounljft0V924A+Xd0t03+EmgESRzRvSKdB3AefT9q2xGaG9Jekr/Iy54tb7C3Q3NqbnChpxrEOpqgTAdSRhFwysXTSUqu7ozHBZRPbAI9CqGMivAPHg/GDtQ7oFp6n3d9XvqBoEccQBbdna8bWNeE5ToFEtfoA+ELlBolKGG/5KzX29+ac4oiDH6dAIlxsrtTl2Ak4r5zQFU62VUOsV17+hDjXRKckAw/VcEZWqcG890omB2vbLZoWid589IurQvI7SfU8A3jyNrb9Qn8XkHjXcvC7h2su7wXq2qN7fAK5jj311HgW2lbItua2yA23LVAeMwbeig9+ewq1jhuDSciwdZWMD+4+i+geoWQ5ou9W7eUNkoVqlIbLDYQLIlqfZDCtiIcclhApItn3IxNMBtMJcjLJe5orOiRYR3x2E5T7+1XKB6J3hBIAxvlZR+IqErrGy/JIzB1M6wI3Tuy4swUuZiBHCS8LPZ2jlzzhtYHEvPvEItua6FRz+AL77NOK+hvU1zD6uN8E5BRdwO8NxLGiSvRxpytkibg1DgQS2zCTHGfXRBq7oCKJx/48CPhzJ7ah/rgrhFFE9E1knDJmB/HcXC19nrrU+E7hEXVihdiZlCL0XnuX406AjxdCJeCLJ5aJVcN0h6BoiI0G9ZnEeM2cWJCPHc7ZFeHgI4pG9y0m+W+S3LfiTegb8j+MUSXsqn1f8e8jOi7RWp2H15n8YT7wEfDLFUPgJuaekd0xsif1HwGm59Zj8myuvtjLN9JaxJ19rvXjfUeinZffDk9iZMF8VQnjNdlWQt+FcwkPOz2D+1e3Yr+NcS34WVIQIwB/JDpExpvkE6ZH0becwOmToruuSL+ROFdHAmnwYDOC/siJlfzqk3pHciiUAMC8I2H+jwBu8vOAzRQ6CD3VcFo9qV9QcBWnEwFnyG6d4OZwelqMSgD6idpB/zFcC/jYFwmSiwvZxgvYeFk5YywXQ87YrQQ+d4PuIuCcVn3xtEsVQ97QXlI0ebtZ7Af9c7jnAPrqPRdQX+b6wPkOsid+H/sUC6fv8Ub18/NZ9TXRb9W/34//APEHP1OPMOvpfaEAAAAASUVORK5CYII=" /> @@ -967,9 +975,12 @@
        Profile viewer for whylogs
        features
        - -
        @@ -979,7 +990,10 @@
        Profile viewer for whylogs
        Filter by type
        - +
        @@ -1039,7 +1053,10 @@
        Profile viewer for whylogs
        Unlock the power of WhyLabs:
        - +
          @@ -1066,8 +1083,10 @@
          Profile viewer for whylogs

          Clickable test feature

          -
          - +
          +
          @@ -1086,7 +1105,7 @@
          Profile viewer for whylogs
        -
        +
        @@ -1227,12 +1246,12 @@

        Hold on! :)

        - diff --git a/src/whylogs/viewer/js/whylogs-script.js b/src/whylogs/viewer/js/whylogs-script.js index b335175a58..3d703a9a42 100644 --- a/src/whylogs/viewer/js/whylogs-script.js +++ b/src/whylogs/viewer/js/whylogs-script.js @@ -14,7 +14,6 @@ }; // HTML Elements - const $filterListItem = $("#filter-list-item"); const $notClickableBurgerIcon = $("#not_clickable_burger_icon"); const $filterCloseIcon = $("#filter-close-icon"); const $closeIcon = $("#close-icon"); @@ -37,7 +36,6 @@ const $tableMessage = $("#table-message"); const $sidebarContent = $("#sidebar-content"); const $multiProfileWrap = $("#sidebar-content-multi-profile"); - const $profileDropdown = $(".sidebar-content__profile-dropdown"); const $propertyPanelTitle = $(".wl-property-panel__title"); const $propertyPanelProfileName = $(".wl-property-panel__table-th-profile"); const $filterOptions = $(".filter-options"); @@ -46,7 +44,7 @@ let featureSearchValue = ""; let isActiveInferredType = {}; let propertyPanelData = []; - let profiles = []; + let referencePropertyPanelData = []; let jsonData = {}; let referenceJsonData = {}; let dataForRead = {}; @@ -56,11 +54,6 @@ selectedProfiles.push("0"); // Util functions - const colors = { - 0: "#0e7384", - 1: "#2683c9", - 2: "#44c0e7", - }; function debounce(func, wait, immediate) { let timeout; @@ -138,36 +131,132 @@ ); } - function openPropertyPanel(items, infType, infTypeSecond = null) { - const types = [infType, infTypeSecond]; - $(".wl-property-panel__table-th-profile").addClass("d-none"); - $("#property-panel-0").removeClass("d-none"); + function getGraphHtml(data, height = 75, width = 350, referenceProfile = false) { + const MARGIN = { + TOP: 5, + RIGHT: 5, + BOTTOM: 5, + LEFT: 55, + }; + const SVG_WIDTH = width; + const SVG_HEIGHT = height; + const CHART_WIDTH = SVG_WIDTH - MARGIN.LEFT - MARGIN.RIGHT; + const CHART_HEIGHT = SVG_HEIGHT - MARGIN.TOP - MARGIN.BOTTOM; + let PRIMARY_COLOR_HEX = "#369BAC"; + + const svgEl = d3.create("svg").attr("width", SVG_WIDTH).attr("height", SVG_HEIGHT); + + const maxYValue = d3.max(data, (d) => Math.abs(d.axisY)); + + const xScale = d3 + .scaleBand() + .domain(data.map((d) => d.axisX)) + .range([MARGIN.LEFT, MARGIN.LEFT + CHART_WIDTH]); + const yScale = d3 + .scaleLinear() + .domain([0, maxYValue * 1.02]) // so that chart's height has 102% height of the maximum value + .range([CHART_HEIGHT, 0]); + + // Add the y Axis + if (!referenceProfile) { + svgEl + .append("g") + .attr("transform", "translate(" + MARGIN.LEFT + ", " + MARGIN.TOP + ")") + .call(d3.axisLeft(yScale).tickValues([0, maxYValue/2, maxYValue])); + } else { + PRIMARY_COLOR_HEX = '#2683C9' + } + + const gChart = svgEl.append("g"); + gChart + .selectAll(".bar") + .data(data) + .enter() + .append("rect") + .classed("bar", true) + .attr("width", xScale.bandwidth() - 1) + .attr("height", (d) => CHART_HEIGHT - yScale(d.axisY)) + .attr("x", (d) => xScale(d.axisX)) + .attr("y", (d) => yScale(d.axisY) + MARGIN.TOP) + .attr("fill", PRIMARY_COLOR_HEX); + + return svgEl._groups[0][0].outerHTML; + } + + function openReferencePropertyPanel(items, chart) { + + const chartInfoItem = (drift, driftName) => ` +
        +
        ${drift}
        +

        ${driftName}

        +
        + ` + const $tableContent = $("#table-content"); + const $clickableTestFeatureWrap = $(".clickable-test-feature-wrap"); + const $pagesButtons = $(".page-button"); + const $pagesButton = $pagesButtons[0]; + let chipString = ""; + + $pagesButtons.removeClass("activ-pages-button") + $($pagesButton).addClass("activ-pages-button") + $tableContent.addClass("d-none") + $clickableTestFeatureWrap.removeClass("d-none") + + $("#chart").html(chart); + chipString += ` + ${chartInfoItem(fixNumberTo(items.numberSummary.stddev), "Drift from ref")} + ${chartInfoItem(items.numberSummary.count.toString(), "Total Count")} + ${chartInfoItem(fixNumberTo(items.numberSummary.mean), "Mean")} + ` + $(".chart-info").html(chipString); + } + + function openProfilePropertyPanel(items, infType, chart) { + $("#wl-property-panel__chart").html(chart); + let chipString = ""; + const chipElement = (chip) => `${chip}`; + const chipElementTableData = (value) => `${chipElement(value)}`; + const chipElementEstimation = (count) => + `${count}`; + items.forEach((item) => { + chipString += ` + + ${chipElementTableData(item.value)} + ${chipElementEstimation(item.count)} + + `; + }); + $(".wl-property-panel__frequent-items").html(chipString); + if (infType === "non-discrete") { + $propertyPanelTitle.html("Histogram data:"); + $propertyPanelProfileName.html("Bin values"); + } else if (infType === "discrete") { + $propertyPanelTitle.html("Frequent items:"); + $propertyPanelProfileName.html("Counts"); + } + + $(".wl-property-panel").addClass("wl-property-panel--open"); + $(".wl-table-wrap").addClass("wl-table-wrap--narrow"); + } + + function openPropertyPanel(items, infType, feature) { + let getGraph = null; + + if (referencePropertyPanelData[feature[0]][0]) { + items = referencePropertyPanelData[feature[0]][0] + getGraph = getGraphHtml(feature[1].chartData[1], 50, 280, true) + } + const getPropertyPanelGraph = getPropertyPanelGraphHtml(jsonData.columns[feature[0]], feature[0]) + if (checkJSONValidityForMultiProfile(jsonData) || checkJSONValidityForSingleProfile(jsonData)) { if (items.length > 0 && items !== "undefined") { - let chipString = ""; - const chipElement = (chip) => `${chip}`; - const chipElementTableData = (value) => `${chipElement(value)}`; - const chipElementEstimation = (count) => - `${count}`; - items.forEach((item) => { - chipString += ` - - ${chipElementTableData(item.value)} - ${chipElementEstimation(item.count)} - - `; - }); - $(".wl-property-panel__frequent-items").html(chipString); - if (infType === "non-discrete") { - $propertyPanelTitle.html("Histogram data:"); - $propertyPanelProfileName.html("Bin values"); - } else if (infType === "discrete") { - $propertyPanelTitle.html("Frequent items:"); - $propertyPanelProfileName.html("Counts"); + if (referencePropertyPanelData[feature[0]][0]) { + openReferencePropertyPanel(referenceJsonData.columns[feature[0]], getGraph) + } else { + openProfilePropertyPanel(items, infType, getPropertyPanelGraph) } - - $(".wl-property-panel").addClass("wl-property-panel--open"); - $(".wl-table-wrap").addClass("wl-table-wrap--narrow"); + } else { + } } } @@ -178,73 +267,73 @@ $(".wl-property-panel__frequent-items").html(""); } + function getPropertyPanelGraphHtml (column) { + let chartString = ""; + const freqData = []; + const histData = []; + + const freqChart = (chart) => + `
        Frequent Items Data
        ${chart}
        `; + const histChart = (chart) => + `
        Histogram Data
        ${chart}
        `; + + if (column.numberSummary) { + if (column.frequentItems && column.frequentItems.items) { + column.frequentItems.items.forEach((item, index) => { + freqData.push({ + axisY: item.estimate, + axisX: index, + }); + }); + } + + if (column.numberSummary.histogram && column.numberSummary.histogram.counts) { + column.numberSummary.histogram.counts.slice(0, 30).forEach((count, index) => { + histData.push({ + axisY: count, + axisX: index, + }); + }); + } + if (column.numberSummary.isDiscrete) { + if (freqData.length > 0) chartString += freqChart(getGraphHtml(freqData, 130)); + if (histData.length > 0) chartString += histChart(getGraphHtml(histData, 130)); + } else { + if (histData.length > 0) chartString += histChart(getGraphHtml(histData, 130)); + if (freqData.length > 0) chartString += freqChart(getGraphHtml(freqData, 130)); + } + } + return chartString; + } + + function sidebarContentHeight() { + const $sidebarContentPadding = +$("#sidebar-content-single-profile").css("padding").replace('px','') * 2 + const $sidebarContentHeight = $("#sidebar-content-single-profile").height() + $sidebarContentPadding + const $sidebar = $(".sidebar") + + $sidebar.css("margin-bottom", `${$sidebarContentHeight}px`) + } + // Override and populate HTML element values function updateHtmlElementValues() { + sidebarContentHeight() $sidebarFeatureNameList.html(""); $tableMessage.addClass("d-none"); Object.entries(featureDataForTableForAllProfiles).forEach((feature) => { - function getGraphHtml(data, index) { - const SINGLE_PROFILE_JSON = !profiles.length; - const MARGIN = { - TOP: 5, - RIGHT: 5, - BOTTOM: 5, - LEFT: 55, - }; - const SVG_WIDTH = 350; - const SVG_HEIGHT = SINGLE_PROFILE_JSON ? 75 : 35; - const CHART_WIDTH = SVG_WIDTH - MARGIN.LEFT - MARGIN.RIGHT; - const CHART_HEIGHT = SVG_HEIGHT - MARGIN.TOP - MARGIN.BOTTOM; - - const svgEl = d3.create("svg").attr("width", SVG_WIDTH).attr("height", SVG_HEIGHT); - - const maxYValue = d3.max(data, (d) => Math.abs(d.axisY)); - - const xScale = d3 - .scaleBand() - .domain(data.map((d) => d.axisX)) - .range([MARGIN.LEFT, MARGIN.LEFT + CHART_WIDTH]); - const yScale = d3 - .scaleLinear() - .domain([0, maxYValue * 1.02]) // so that chart's height has 102% height of the maximum value - .range([CHART_HEIGHT, 0]); - - // Add the y Axis - svgEl - .append("g") - .attr("transform", "translate(" + MARGIN.LEFT + ", " + MARGIN.TOP + ")") - .call(d3.axisLeft(yScale).tickValues([0, maxYValue])); - - const gChart = svgEl.append("g"); - gChart - .selectAll(".bar") - .data(data) - .enter() - .append("rect") - .classed("bar", true) - .attr("width", xScale.bandwidth() - 1) - .attr("height", (d) => CHART_HEIGHT - yScale(d.axisY)) - .attr("x", (d) => xScale(d.axisX)) - .attr("y", (d) => yScale(d.axisY) + MARGIN.TOP) - .attr("fill", colors[index]); - - return svgEl._groups[0][0].outerHTML; - } // strings for tableToShow let tempChartDataString = ""; let referenceTempChartDataString = ""; feature[1].chartData.forEach((chartData, index) => { if (selectedProfiles.includes(String(index))) { - let profileSelected = selectedProfiles.indexOf(String(index)); tempChartDataString += `
        ${ chartData.length > 0 - ? getGraphHtml(feature[1].chartData[0], profileSelected) + ? getGraphHtml(feature[1].chartData[0]) : 'No data to show the chart' }
        `; if (feature[1].chartData[1] && feature[1].chartData[1].length > 0) { referenceTempChartDataString+= `
        ${ chartData.length > 0 - ? getGraphHtml(feature[1].chartData[1], profileSelected) + ? getGraphHtml(feature[1].chartData[1], ...[,,], true) : 'No data to show the chart' }
        `; } @@ -402,7 +491,12 @@ const $tableRowButton = $(``); $tableRowButton.on( "click", - openPropertyPanel.bind(this, propertyPanelData[feature[0]][0], feature[1].inferredType[0].toLowerCase()), + openPropertyPanel.bind( + this, + propertyPanelData[feature[0]][0], + feature[1].inferredType[0].toLowerCase(), + feature + ), ); $tableRow.find(".wl-table-cell__title-wrap").append($tableRowButton); } @@ -414,7 +508,10 @@
      • - +
        ${feature[0]}
        • @@ -450,7 +547,6 @@ }); for (let i = 0; i < tableBodyChildrens.length; i++) { - const name = tableBodyChildrens[i].dataset.featureName.toLowerCase(); const type = tableBodyChildrens[i].dataset.inferredType.toLowerCase(); if (isActiveInferredType[type]) { @@ -459,7 +555,6 @@ } } for (let i = 0; i < featureListChildren.length; i++) { - const name = featureListChildren[i].dataset.featureName.toLowerCase(); const type = featureListChildren[i].dataset.inferredType.toLowerCase(); if (isActiveInferredType[type]) { @@ -550,6 +645,7 @@ unknown: [], }; propertyPanelData[feature[0]] = []; + referencePropertyPanelData[feature[0]] = []; } let iteration = 0; feature[1].forEach((tempFeatureValues) => { @@ -662,6 +758,17 @@ propertyPanelData[feature[0]] = []; } if (tempFeatureValues.referenceNumberSummary) { + referencePropertyPanelData[feature[0]][0] = tempFeatureValues.referenceNumberSummary.histogram.counts.reduce( + (acc, value, index) => { + acc.push({ + value: value, + count: tempFeatureValues.referenceNumberSummary.histogram.bins[index], + }); + return acc; + }, + [], + ); + tempFeatureValues.referenceNumberSummary.histogram.counts.slice(0, 30).forEach((count, index) => { featureDataForTableForAllProfiles[feature[0]].chartData[1].push({ axisY: count, @@ -691,7 +798,6 @@ return false; } } - return true; } @@ -730,7 +836,6 @@ } function loadFile(inputId, jsonForm) { - profiles = []; isActiveInferredType = {}; $featureFilterInput.html(""); $sidebarFeatureNameList.html(""); @@ -766,8 +871,10 @@ if (inputId === "file-input") { jsonData = data; referenceJsonData = undefined + $(".reference-table-head").addClass("d-none") } else { referenceJsonData = data + $(".reference-table-head").removeClass("d-none") } mapProfileDataToReadData(jsonData, dataForRead, referenceJsonData); @@ -788,6 +895,23 @@ } } + $(document).on("click", ".page-button", function(e) { + const $pagesButtons = $(".page-button"), + $pagesButtonIndex = $pagesButtons.index(e.target), + $pagesButton = $(".page-button")[$pagesButtonIndex] + + $pagesButtons.removeClass("activ-pages-button") + $($pagesButton).addClass("activ-pages-button") + }) + + $("#property-panel-close-icon").on("click", function (e) { + const $tableContent = $("#table-content") + const $clickableTestFeatureWrap = $(".clickable-test-feature-wrap") + + $tableContent.removeClass("d-none") + $clickableTestFeatureWrap.addClass("d-none") + }); + $burgerIcon.on("click", function () { $filterOptions.removeClass("d-none"); $burgerIcon.addClass("d-none"); @@ -802,18 +926,21 @@ $closeIcon.on("click", function () { $signUpText.addClass("d-none"); + sidebarContentHeight() }); $(document).on("click", ".js-list-group-item span", function (e) { const listItem = $("li>span"), listItemIndex = listItem.index(e.target), $listItemDot = $(".wl_list-item-dot")[listItemIndex], - $arrowIcon = $(".wl_arrow-icon")[listItemIndex]; - - $(".wl_list-item-dot").removeClass("d-none"); - $(".wl_arrow-icon").addClass("d-none"); - $($arrowIcon).removeClass("d-none"); - $($listItemDot).addClass("d-none"); + $arrowIcon = $(".wl_arrow-icon")[listItemIndex] + + listItem.css("padding-left", "15px") + $(".wl_list-item-dot").removeClass("d-none") + $(".wl_arrow-icon").addClass("d-none") + $($arrowIcon).removeClass("d-none") + $($listItemDot).addClass("d-none") + $(listItem[listItemIndex]).css("padding-left", "8px") }); // Bind event listeners From 0341dc0269ac5beec461d02d66103c98188ed0fb Mon Sep 17 00:00:00 2001 From: Perch Date: Tue, 28 Dec 2021 19:31:01 +0400 Subject: [PATCH 05/36] add the notification sign of filter button --- src/whylogs/viewer/index-hbs-cdn-all-in.html | 81 ++++++++++++++++---- 1 file changed, 67 insertions(+), 14 deletions(-) diff --git a/src/whylogs/viewer/index-hbs-cdn-all-in.html b/src/whylogs/viewer/index-hbs-cdn-all-in.html index 729e95325a..40430566f4 100644 --- a/src/whylogs/viewer/index-hbs-cdn-all-in.html +++ b/src/whylogs/viewer/index-hbs-cdn-all-in.html @@ -701,16 +701,43 @@ color: black; } - .wl__burger_icon { - width: 18px; - height: 16px; - } - - .wl__burger_icon img{ + .wl__burger_icon_container { + width: 18px; + height: 16px; + } + + .wl__burger_icon_container img{ width: 100%; height: 100%; cursor: pointer; } + + .wl__burger_icon { + position: relative; + } + + .notif-circle-container { + position: absolute; + top: 7px; + right: -5px; + padding: 5.3px; + border-radius: 50%; + background-color: var(--brandSecondary100); + cursor: pointer; + } + + .notif-circle { + position: absolute; + top: 2px; + right: 2px; + padding: 3.3px; + border-radius: 50%; + background-color: #F2994A; + } + + .not-clickable-notif { + background: #FAC79A; + } .space-between { display: flex; @@ -974,14 +1001,23 @@
        Profile viewer for whylogs
        {{getTotalFeatureCount}} features
        -
        - - +
        +
        + + + + +
        +
        + + + + +
        @@ -1000,6 +1036,7 @@
        Profile viewer for whylogs
        Profile viewer for whylogs Profile viewer for whylogs Hold on! :) target.innerHTML = html; } + function filterNotification() { + const $notifCircleContainer = $(".notif-circle-container") + const $boxes = $('.wl_filter-options>.form-check>input[name=checkbox]:checked'); + const item = Object.values($boxes).find(function(value) { return $(value)[0] === undefined}); + if (item === undefined) { + $notifCircleContainer.removeClass("d-none") + } else { + $notifCircleContainer.addClass("d-none") + } + } + function initWebsiteScripts() { // Target HTML elements const $discrete = document.getElementById("inferredDiscrete"); @@ -1698,6 +1748,7 @@

        Hold on! :)

        activeTypes["discrete"] = false; } handleSearch(); + filterNotification() }); $nonDiscrete.addEventListener("change", (event) => { @@ -1707,6 +1758,7 @@

        Hold on! :)

        activeTypes["non-discrete"] = false; } handleSearch(); + filterNotification() }); $unknown.addEventListener("change", (event) => { @@ -1716,6 +1768,7 @@

        Hold on! :)

        activeTypes["unknown"] = false; } handleSearch(); + filterNotification() }); $sidebarFeatureNameList.addEventListener("click", (event) => { From 9e98586f5832bcef8f430a2494d4f1a6ac926f86 Mon Sep 17 00:00:00 2001 From: Perch2005 Date: Tue, 28 Dec 2021 20:33:28 +0400 Subject: [PATCH 06/36] change the chart color at referenceProfilePanel --- src/whylogs/viewer/index-hbs-cdn-all-in.html | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/whylogs/viewer/index-hbs-cdn-all-in.html b/src/whylogs/viewer/index-hbs-cdn-all-in.html index 40430566f4..0fc3382fe2 100644 --- a/src/whylogs/viewer/index-hbs-cdn-all-in.html +++ b/src/whylogs/viewer/index-hbs-cdn-all-in.html @@ -1291,7 +1291,8 @@

        Hold on! :)

        function registerHandlebarHelperFunctions() { //helper fun - function generateChart(data, height = 75, width = 350, referenceProfile = false) { + function generateChart(data, height = 75, width = 350, index = 0, referenceProfile = false) { + const color = ["#369BAC", '#2683C9'] const MARGIN = { TOP: 5, RIGHT: 5, @@ -1302,7 +1303,6 @@

        Hold on! :)

        const SVG_HEIGHT = height; const CHART_WIDTH = SVG_WIDTH - MARGIN.LEFT - MARGIN.RIGHT; const CHART_HEIGHT = SVG_HEIGHT - MARGIN.TOP - MARGIN.BOTTOM; - let PRIMARY_COLOR_HEX = "#369BAC"; const svgEl = d3.create("svg").attr("width", SVG_WIDTH).attr("height", SVG_HEIGHT); @@ -1323,9 +1323,7 @@

        Hold on! :)

        .append("g") .attr("transform", "translate(" + MARGIN.LEFT + ", " + MARGIN.TOP + ")") .call(d3.axisLeft(yScale).tickValues([0, maxYValue/2, maxYValue])); - } else { - PRIMARY_COLOR_HEX = '#2683C9' - } + } const gChart = svgEl.append("g"); gChart @@ -1338,7 +1336,7 @@

        Hold on! :)

        .attr("height", (d) => CHART_HEIGHT - yScale(d.axisY)) .attr("x", (d) => xScale(d.axisX)) .attr("y", (d) => yScale(d.axisY) + MARGIN.TOP) - .attr("fill", PRIMARY_COLOR_HEX); + .attr("fill", color[index]); return svgEl._groups[0][0].outerHTML; } @@ -1367,9 +1365,11 @@

        Hold on! :)

        let data = []; const columnKey = key.data.key let chartValue = false + let chartColor = undefined if(!!referenceColumn){ column = referenceColumn.columns[columnKey] chartValue = true + chartColor = 1 } else if (referenceColumn === undefined) { column = "" } @@ -1386,7 +1386,7 @@

        Hold on! :)

        } else if (referenceColumn.frequentItems === undefined){ return ''; } - return generateChart(data, ...[,,], chartValue); + return generateChart(data, ...[,,], chartColor, chartValue); } const profileFromCSVfile = {{{reference_profile}}} @@ -1610,15 +1610,15 @@

        Hold on! :)

        } if (column.numberSummary.isDiscrete) { - if (freqData.length > 0) chartString += freqChart(generateChart(freqData, chartHeight, chartWidth, chartValue)); + if (freqData.length > 0) chartString += freqChart(generateChart(freqData, chartHeight, chartWidth, undefined, chartValue)); if (histData.length > 0 && !chartValue) chartString += histChart(generateChart(histData, 130)); } else { if (histData.length > 0 && !chartValue) chartString += histChart(generateChart(histData, 130)); - if (freqData.length > 0) chartString += freqChart(generateChart(freqData, chartHeight, chartWidth, chartValue)); + if (freqData.length > 0) chartString += freqChart(generateChart(freqData, chartHeight, chartWidth, undefined, chartValue)); } if (!!profileFromCSVfile) { chartString = ''; - chartString += generateChart(data, 50, 280, true); + chartString += generateChart(data, 50, 280, 0, true); } } return chartString; From de420939bbed4408270aedf674add0fa6610e357 Mon Sep 17 00:00:00 2001 From: Perch2005 Date: Tue, 28 Dec 2021 20:43:50 +0400 Subject: [PATCH 07/36] add the notification sign of filter button --- src/whylogs/viewer/css/whylogs-styles.css | 32 +++++++++++++++++++++-- src/whylogs/viewer/index.html | 27 ++++++++++++++----- src/whylogs/viewer/js/whylogs-script.js | 8 ++++++ 3 files changed, 58 insertions(+), 9 deletions(-) diff --git a/src/whylogs/viewer/css/whylogs-styles.css b/src/whylogs/viewer/css/whylogs-styles.css index a5aaaf4cf4..bbda48f94d 100644 --- a/src/whylogs/viewer/css/whylogs-styles.css +++ b/src/whylogs/viewer/css/whylogs-styles.css @@ -758,17 +758,45 @@ a .wl-table-row--bottom-shadow { .count-color { color: black; } -.wl__burger_icon { + +.wl__burger_icon_container { width: 18px; height: 16px; } -.wl__burger_icon img{ +.wl__burger_icon_container img{ width: 100%; height: 100%; cursor: pointer; } +.wl__burger_icon { + position: relative; +} + +.notif-circle-container { + position: absolute; + top: 7px; + right: -5px; + padding: 5.3px; + border-radius: 50%; + background-color: var(--brandSecondary100); + cursor: pointer; +} + +.notif-circle { + position: absolute; + top: 2px; + right: 2px; + padding: 3.3px; + border-radius: 50%; + background-color: #F2994A; +} + +.not-clickable-notif { + background: #FAC79A; +} + .space-between { display: flex; justify-content: space-between; diff --git a/src/whylogs/viewer/index.html b/src/whylogs/viewer/index.html index a287ce2117..0e1c86f71a 100644 --- a/src/whylogs/viewer/index.html +++ b/src/whylogs/viewer/index.html @@ -81,13 +81,23 @@
        Profile viewer for whylogs
        0 features
        -
        - - +
        +
        + + + + +
        +
        + + + + +
        @@ -105,6 +115,7 @@
        Profile viewer for whylogs
        Profile viewer for whylogs Profile viewer for whylogs { + const item = Object.values($boxes).find(function(value) { return $('#' + $(value)[0].id).is(":checked") }); + if (item) { + $notifCircleContainer.removeClass("d-none") + } else { + $notifCircleContainer.addClass("d-none") + } const filterType = event.target.value.toLowerCase(); const isChecked = event.target.checked; From 6b911f934467cefcec1756145d2650db840c8cfe Mon Sep 17 00:00:00 2001 From: Perch2005 Date: Tue, 28 Dec 2021 20:48:24 +0400 Subject: [PATCH 08/36] add the notification sign of filter button --- src/whylogs/viewer/js/whylogs-script.js | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/src/whylogs/viewer/js/whylogs-script.js b/src/whylogs/viewer/js/whylogs-script.js index a40f6d5dbe..671efe3661 100644 --- a/src/whylogs/viewer/js/whylogs-script.js +++ b/src/whylogs/viewer/js/whylogs-script.js @@ -133,7 +133,8 @@ ); } - function getGraphHtml(data, height = 75, width = 350, referenceProfile = false) { + function getGraphHtml(data, height = 75, width = 350, index = 0, referenceProfile = false) { + const color = ["#369BAC", '#2683C9'] const MARGIN = { TOP: 5, RIGHT: 5, @@ -144,7 +145,6 @@ const SVG_HEIGHT = height; const CHART_WIDTH = SVG_WIDTH - MARGIN.LEFT - MARGIN.RIGHT; const CHART_HEIGHT = SVG_HEIGHT - MARGIN.TOP - MARGIN.BOTTOM; - let PRIMARY_COLOR_HEX = "#369BAC"; const svgEl = d3.create("svg").attr("width", SVG_WIDTH).attr("height", SVG_HEIGHT); @@ -165,8 +165,6 @@ .append("g") .attr("transform", "translate(" + MARGIN.LEFT + ", " + MARGIN.TOP + ")") .call(d3.axisLeft(yScale).tickValues([0, maxYValue/2, maxYValue])); - } else { - PRIMARY_COLOR_HEX = '#2683C9' } const gChart = svgEl.append("g"); @@ -180,7 +178,7 @@ .attr("height", (d) => CHART_HEIGHT - yScale(d.axisY)) .attr("x", (d) => xScale(d.axisX)) .attr("y", (d) => yScale(d.axisY) + MARGIN.TOP) - .attr("fill", PRIMARY_COLOR_HEX); + .attr("fill", color[index]); return svgEl._groups[0][0].outerHTML; } @@ -246,7 +244,7 @@ if (referencePropertyPanelData[feature[0]][0]) { items = referencePropertyPanelData[feature[0]][0] - getGraph = getGraphHtml(feature[1].chartData[1], 50, 280, true) + getGraph = getGraphHtml(feature[1].chartData[1], 50, 280, 0, true) } const getPropertyPanelGraph = getPropertyPanelGraphHtml(jsonData.columns[feature[0]], feature[0]) @@ -335,7 +333,7 @@ if (feature[1].chartData[1] && feature[1].chartData[1].length > 0) { referenceTempChartDataString+= `
        ${ chartData.length > 0 - ? getGraphHtml(feature[1].chartData[1], ...[,,], true) + ? getGraphHtml(feature[1].chartData[1], ...[,,], 1, true) : 'No data to show the chart' }
        `; } From 054f9387dd4c3491cbbc2b3d44aa3bd1719b76d2 Mon Sep 17 00:00:00 2001 From: Perch2005 Date: Thu, 30 Dec 2021 19:40:00 +0400 Subject: [PATCH 09/36] add selected file name --- src/whylogs/viewer/css/whylogs-styles.css | 9 ++++++++ src/whylogs/viewer/index.html | 26 ++++++----------------- src/whylogs/viewer/js/whylogs-script.js | 8 +++++++ 3 files changed, 24 insertions(+), 19 deletions(-) diff --git a/src/whylogs/viewer/css/whylogs-styles.css b/src/whylogs/viewer/css/whylogs-styles.css index bbda48f94d..706a1daf96 100644 --- a/src/whylogs/viewer/css/whylogs-styles.css +++ b/src/whylogs/viewer/css/whylogs-styles.css @@ -972,6 +972,15 @@ a .wl-table-row--bottom-shadow { padding-right: 30px; } +.flex-direction-colum { + display: flex; + flex-direction: column; +} + +.feature-file-name { + font-size: 17px; + color: #6C757D; +} @media only screen and (min-width: 1350px) { .clickable-test-feature-body { display: flex; diff --git a/src/whylogs/viewer/index.html b/src/whylogs/viewer/index.html index 0e1c86f71a..4d49b1decf 100644 --- a/src/whylogs/viewer/index.html +++ b/src/whylogs/viewer/index.html @@ -77,26 +77,14 @@
        Profile viewer for whylogs
        -
        - 0 - features -
        -
        -
        - - - - +
        +
        + 0 + features
        -
        - - - - +
        + file +
        diff --git a/src/whylogs/viewer/js/whylogs-script.js b/src/whylogs/viewer/js/whylogs-script.js index 671efe3661..86d7c2cf72 100644 --- a/src/whylogs/viewer/js/whylogs-script.js +++ b/src/whylogs/viewer/js/whylogs-script.js @@ -14,6 +14,7 @@ }; // HTML Elements + const $featureFileName = $(".feature-file-name") const $notifCircleContainer = $(".notif-circle-container") const $boxes = $('input[name=checkbox]:checked'); const $notClickableBurgerIcon = $("#not_clickable_burger_icon"); @@ -835,6 +836,13 @@ $compareProfile.removeClass("d-none"); } + function addFileName() { + const fileName = $fileInput.val().split('\\').pop(); + if (fileName) { + $featureFileName.html(fileName.split('.json')) + } + } + function loadFile(inputId, jsonForm) { isActiveInferredType = {}; $featureFilterInput.html(""); From af917f762cdc00433db25f339238f0740c569e71 Mon Sep 17 00:00:00 2001 From: Perch2005 Date: Thu, 30 Dec 2021 20:01:37 +0400 Subject: [PATCH 10/36] use addFileName() function when the file is load --- src/whylogs/viewer/js/whylogs-script.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/whylogs/viewer/js/whylogs-script.js b/src/whylogs/viewer/js/whylogs-script.js index 86d7c2cf72..9faee46ca3 100644 --- a/src/whylogs/viewer/js/whylogs-script.js +++ b/src/whylogs/viewer/js/whylogs-script.js @@ -849,6 +849,7 @@ $sidebarFeatureNameList.html(""); $tableBody.html(""); $(".form-check-input").prop("checked", true); + addFileName() if (typeof window.FileReader !== "function") { updateTableMessage(MESSAGES.error.fileAPINotSupported); return; From 438175193740d4bf81fe4e726d9927daa8e7fa5d Mon Sep 17 00:00:00 2001 From: Perch2005 Date: Thu, 30 Dec 2021 21:17:49 +0400 Subject: [PATCH 11/36] add "Filter by type" design changes, add "Quick search" design changes. --- src/whylogs/viewer/css/whylogs-styles.css | 50 ++++++++++ src/whylogs/viewer/index.html | 110 +++++++++++++--------- src/whylogs/viewer/js/whylogs-script.js | 43 +++++---- 3 files changed, 139 insertions(+), 64 deletions(-) diff --git a/src/whylogs/viewer/css/whylogs-styles.css b/src/whylogs/viewer/css/whylogs-styles.css index 706a1daf96..9a9fe97917 100644 --- a/src/whylogs/viewer/css/whylogs-styles.css +++ b/src/whylogs/viewer/css/whylogs-styles.css @@ -981,6 +981,56 @@ a .wl-table-row--bottom-shadow { font-size: 17px; color: #6C757D; } + +.dropdown-container { + background: rgba(255, 255, 255, 0.5) !important; + padding: 10px !important; + border: none !important; +} + +.dropdown { + align-items: center; +} + +.align-items { + align-items: center; +} + +.dropdown p { + font-family: Asap; + font-size: 15px; + line-height: 150%; + margin: 0; +} +.dropdown img { + height: 10px; + cursor: pointer; +} + +.search-input{ + padding-top: 0 !important; + padding-bottom: 0 !important; +} + +.search-input input{ + border: none; + background: none; + width: 100%; + outline: none; + height: 40px; + width: 100%; +} + +.search-input img{ + height: 19px; + pointer-events: none; +} + + +input::placeholder { + color: var(--secondaryLight1000);; +} + @media only screen and (min-width: 1350px) { .clickable-test-feature-body { display: flex; diff --git a/src/whylogs/viewer/index.html b/src/whylogs/viewer/index.html index 4d49b1decf..0630b2cd3f 100644 --- a/src/whylogs/viewer/index.html +++ b/src/whylogs/viewer/index.html @@ -90,56 +90,74 @@
        Profile viewer for whylogs
        -
        -
        - Filter by type -
        - -
        -
        -
        - - -
        -
        - +
        + + -
        -
        - - +
        + + + +
        -
          diff --git a/src/whylogs/viewer/js/whylogs-script.js b/src/whylogs/viewer/js/whylogs-script.js index 9faee46ca3..7e36f7773e 100644 --- a/src/whylogs/viewer/js/whylogs-script.js +++ b/src/whylogs/viewer/js/whylogs-script.js @@ -17,11 +17,9 @@ const $featureFileName = $(".feature-file-name") const $notifCircleContainer = $(".notif-circle-container") const $boxes = $('input[name=checkbox]:checked'); - const $notClickableBurgerIcon = $("#not_clickable_burger_icon"); - const $filterCloseIcon = $("#filter-close-icon"); const $closeIcon = $("#close-icon"); const $signUpText = $(".sign-up-text"); - const $burgerIcon = $("#burger_icon"); + const $dropdownArrowIcon = $("#dropdown-arrow-icon"); const $referenceJsonForm = $("#reference-json-form"); const $referencefileInput = $("#reference-file-input"); const $compareProfile = $("#compare-profile"); @@ -904,6 +902,17 @@ } } + function checkedBoxes() { + const item = Object.values($boxes).find( + function(value) { + return $('#' + $(value)[0].id).is(":checked") + } + ); + + if (item) { + $notifCircleContainer.removeClass("d-none") + } + } $(document).on("click", ".page-button", function(e) { const $pagesButtons = $(".page-button"), $pagesButtonIndex = $pagesButtons.index(e.target), @@ -921,16 +930,20 @@ $clickableTestFeatureWrap.addClass("d-none") }); - $burgerIcon.on("click", function () { - $filterOptions.removeClass("d-none"); - $burgerIcon.addClass("d-none"); - $notClickableBurgerIcon.removeClass("d-none"); - }); + $dropdownArrowIcon.on("click", function () { + const filterClass = $filterOptions.attr("class"); - $filterCloseIcon.on("click", function () { - $filterOptions.addClass("d-none"); - $burgerIcon.removeClass("d-none"); - $notClickableBurgerIcon.addClass("d-none"); + if (filterClass.indexOf("d-none") > 0) { + $notifCircleContainer.addClass("d-none") + $filterOptions.removeClass("d-none"); + $("#dropdown-container").css("background-color", '#FFF') + $dropdownArrowIcon.css("transform","rotate(180deg)") + } else { + $filterOptions.addClass("d-none"); + checkedBoxes() + $("#dropdown-container").css("background-color", 'none') + $dropdownArrowIcon.css("transform","rotate(0)") + } }); $closeIcon.on("click", function () { @@ -965,12 +978,6 @@ }, 300), ); $featureFilterInput.on("change", (event) => { - const item = Object.values($boxes).find(function(value) { return $('#' + $(value)[0].id).is(":checked") }); - if (item) { - $notifCircleContainer.removeClass("d-none") - } else { - $notifCircleContainer.addClass("d-none") - } const filterType = event.target.value.toLowerCase(); const isChecked = event.target.checked; From 7c314eff3305ce856afc1c9baff99f16172dc102 Mon Sep 17 00:00:00 2001 From: Perch2005 Date: Thu, 30 Dec 2021 21:32:00 +0400 Subject: [PATCH 12/36] add delete and edit buttons for reference profile. --- src/whylogs/viewer/css/whylogs-styles.css | 32 +++++++++++++++++++++++ src/whylogs/viewer/index.html | 26 ++++++++++++++++++ src/whylogs/viewer/js/whylogs-script.js | 29 +++++++++++++++++--- 3 files changed, 83 insertions(+), 4 deletions(-) diff --git a/src/whylogs/viewer/css/whylogs-styles.css b/src/whylogs/viewer/css/whylogs-styles.css index 9a9fe97917..5eee116ca6 100644 --- a/src/whylogs/viewer/css/whylogs-styles.css +++ b/src/whylogs/viewer/css/whylogs-styles.css @@ -1026,6 +1026,38 @@ a .wl-table-row--bottom-shadow { pointer-events: none; } +.reference-profile-buttons { + padding-left: 20px; +} + +.edit-button-wrap { + padding-right: 5px; + cursor: pointer; +} + +.edit-button { + border: 1px solid #369BAC; + box-sizing: border-box; + border-radius: 3px; + width: 33px; + text-align: center; +} + +.edit-button label{ + color: #369BAC; + font-family: Asap; + font-weight: 500; + line-height: 11px; + cursor: pointer; +} + +.remove-reference-profile-button { + border: 1px solid #6C757D; + border-radius: 3px; + text-align: center; + width: 20px; + cursor: pointer; +} input::placeholder { color: var(--secondaryLight1000);; diff --git a/src/whylogs/viewer/index.html b/src/whylogs/viewer/index.html index 0630b2cd3f..d8f2c24940 100644 --- a/src/whylogs/viewer/index.html +++ b/src/whylogs/viewer/index.html @@ -254,6 +254,32 @@
          Compare profile to reference p
          +
          +
          Reference profile
          +
          +
          +
          +
          +
          +
          + + +
          +
          +
          +
          +
          +
          +
          + +
          +
          +
          +
          diff --git a/src/whylogs/viewer/js/whylogs-script.js b/src/whylogs/viewer/js/whylogs-script.js index 7e36f7773e..ac6e99fb6d 100644 --- a/src/whylogs/viewer/js/whylogs-script.js +++ b/src/whylogs/viewer/js/whylogs-script.js @@ -14,6 +14,7 @@ }; // HTML Elements + const $removeReferenceProfileButton = $("#remove-reference-profile-button") const $featureFileName = $(".feature-file-name") const $notifCircleContainer = $(".notif-circle-container") const $boxes = $('input[name=checkbox]:checked'); @@ -190,7 +191,6 @@

          ${driftName}

          ` - const $tableContent = $("#table-content"); const $clickableTestFeatureWrap = $(".clickable-test-feature-wrap"); const $pagesButtons = $(".page-button"); const $pagesButton = $pagesButtons[0]; @@ -824,7 +824,6 @@ $tableMessage.addClass("d-none"); $sidebarContent.removeClass("d-none"); $tableContent.removeClass("d-none"); - $compareProfile.removeClass("d-none"); } function hideDataVisibility() { @@ -879,9 +878,13 @@ jsonData = data; referenceJsonData = undefined $(".reference-table-head").addClass("d-none") + $(".wl-selected-profile").addClass("d-none") + $compareProfile.removeClass("d-none"); } else { referenceJsonData = data - $(".reference-table-head").removeClass("d-none") + $(".reference-table-head").removeClass("d-none") + $(".wl-selected-profile").removeClass("d-none") + $(".wl-compare-profile").addClass("d-none") } mapProfileDataToReadData(jsonData, dataForRead, referenceJsonData); @@ -913,6 +916,24 @@ $notifCircleContainer.removeClass("d-none") } } + + $removeReferenceProfileButton.on("click", function () { + referenceJsonData = undefined + dataForRead = {}; + featureDataForTableForAllProfiles = {}; + numOfProfilesBasedOnType = {}; + + $(".reference-table-head").addClass("d-none") + + mapProfileDataToReadData(jsonData, dataForRead, referenceJsonData); + $tableBody.html(""); + updateHtmlElementValues(); + renderList(); + $(".wl-selected-profile").addClass("d-none") + $(".wl-compare-profile").removeClass("d-none") + + }) + $(document).on("click", ".page-button", function(e) { const $pagesButtons = $(".page-button"), $pagesButtonIndex = $pagesButtons.index(e.target), @@ -923,7 +944,6 @@ }) $("#property-panel-close-icon").on("click", function (e) { - const $tableContent = $("#table-content") const $clickableTestFeatureWrap = $(".clickable-test-feature-wrap") $tableContent.removeClass("d-none") @@ -950,6 +970,7 @@ $signUpText.addClass("d-none"); sidebarContentHeight() }); + $(document).on("click", ".js-list-group-item span", function (e) { const listItem = $("li>span"), From 5e26dda4f4693798380a549b8b6ba04006a65cee Mon Sep 17 00:00:00 2001 From: Perch2005 Date: Thu, 30 Dec 2021 21:42:44 +0400 Subject: [PATCH 13/36] add blue notification sign for opening the text of sign up --- src/whylogs/viewer/css/whylogs-styles.css | 28 +++++++++++++++++++---- src/whylogs/viewer/index.html | 23 +++++++++++++------ src/whylogs/viewer/js/whylogs-script.js | 13 +++++++++++ 3 files changed, 52 insertions(+), 12 deletions(-) diff --git a/src/whylogs/viewer/css/whylogs-styles.css b/src/whylogs/viewer/css/whylogs-styles.css index 5eee116ca6..f8228fc404 100644 --- a/src/whylogs/viewer/css/whylogs-styles.css +++ b/src/whylogs/viewer/css/whylogs-styles.css @@ -742,6 +742,9 @@ a .wl-table-row--bottom-shadow { .wl__btn-signup { font-size: 13px; + padding: 13px; + padding-left: 20px; + padding-right: 20px; } .wl__close-icon { @@ -759,24 +762,24 @@ a .wl-table-row--bottom-shadow { color: black; } -.wl__burger_icon_container { +.wl__dropdown_arrow-icon_container { width: 18px; height: 16px; } -.wl__burger_icon_container img{ +.wl__dropdown_arrow-icon_container img{ width: 100%; height: 100%; cursor: pointer; } -.wl__burger_icon { +.wl__dropdown_arrow-icon, .open-sign-up-text{ position: relative; } -.notif-circle-container { +.notif-circle-container, .open-sign-up-text-notif-container{ position: absolute; - top: 7px; + top: -5px; right: -5px; padding: 5.3px; border-radius: 50%; @@ -784,6 +787,10 @@ a .wl-table-row--bottom-shadow { cursor: pointer; } +.open-sign-up-text-notif-container { + padding: 10.3px; +} + .notif-circle { position: absolute; top: 2px; @@ -793,6 +800,17 @@ a .wl-table-row--bottom-shadow { background-color: #F2994A; } +.open-sign-up-text-notif { + display: flex; + position: absolute; + top: 2px; + right: 2px; + padding: 2.5px 6px; + color: #FFF; + border-radius: 50%; + background-color: #5CAEBC; +} + .not-clickable-notif { background: #FAC79A; } diff --git a/src/whylogs/viewer/index.html b/src/whylogs/viewer/index.html index d8f2c24940..572f511178 100644 --- a/src/whylogs/viewer/index.html +++ b/src/whylogs/viewer/index.html @@ -182,13 +182,22 @@
          Profile viewer for whylogs
        • Get alerted in real time when data and model health issues arise
          • - +
          diff --git a/src/whylogs/viewer/js/whylogs-script.js b/src/whylogs/viewer/js/whylogs-script.js index ac6e99fb6d..0d2774180d 100644 --- a/src/whylogs/viewer/js/whylogs-script.js +++ b/src/whylogs/viewer/js/whylogs-script.js @@ -19,6 +19,7 @@ const $notifCircleContainer = $(".notif-circle-container") const $boxes = $('input[name=checkbox]:checked'); const $closeIcon = $("#close-icon"); + const $openSignUpText = $("#open-sign-up-text") const $signUpText = $(".sign-up-text"); const $dropdownArrowIcon = $("#dropdown-arrow-icon"); const $referenceJsonForm = $("#reference-json-form"); @@ -943,6 +944,11 @@ $($pagesButton).addClass("activ-pages-button") }) + $(document).ready(function() { + $signUpText.addClass("d-none"); + sidebarContentHeight() + }) + $("#property-panel-close-icon").on("click", function (e) { const $clickableTestFeatureWrap = $(".clickable-test-feature-wrap") @@ -969,6 +975,13 @@ $closeIcon.on("click", function () { $signUpText.addClass("d-none"); sidebarContentHeight() + $(".open-sign-up-text-notif-container").removeClass("d-none") + }); + + $openSignUpText.on("click", function () { + $signUpText.removeClass("d-none"); + sidebarContentHeight() + $(".open-sign-up-text-notif-container").addClass("d-none") }); From 7c68bd6d2e168dadde1620467f71b8a8e5ebbff1 Mon Sep 17 00:00:00 2001 From: Perch2005 Date: Mon, 3 Jan 2022 18:04:54 +0400 Subject: [PATCH 14/36] add blue notification sign for opening the text of sign up --- src/whylogs/viewer/index-hbs-cdn-all-in.html | 137 ++++++++++++------- 1 file changed, 89 insertions(+), 48 deletions(-) diff --git a/src/whylogs/viewer/index-hbs-cdn-all-in.html b/src/whylogs/viewer/index-hbs-cdn-all-in.html index 0fc3382fe2..d56918a933 100644 --- a/src/whylogs/viewer/index-hbs-cdn-all-in.html +++ b/src/whylogs/viewer/index-hbs-cdn-all-in.html @@ -684,6 +684,9 @@ .wl__btn-signup { font-size: 13px; + padding: 13px; + padding-left: 20px; + padding-right: 20px; } .wl__close-icon { @@ -701,49 +704,60 @@ color: black; } - .wl__burger_icon_container { - width: 18px; - height: 16px; - } - - .wl__burger_icon_container img{ - width: 100%; - height: 100%; - cursor: pointer; - } - - .wl__burger_icon { - position: relative; - } - - .notif-circle-container { - position: absolute; - top: 7px; - right: -5px; - padding: 5.3px; - border-radius: 50%; - background-color: var(--brandSecondary100); - cursor: pointer; - } - - .notif-circle { - position: absolute; - top: 2px; - right: 2px; - padding: 3.3px; - border-radius: 50%; - background-color: #F2994A; - } - - .not-clickable-notif { - background: #FAC79A; - } - - .space-between { - display: flex; - justify-content: space-between; - } - + .wl__dropdown_arrow-icon_container { + width: 18px; + height: 16px; + } + + .wl__dropdown_arrow-icon_container img{ + width: 100%; + height: 100%; + cursor: pointer; + } + + .wl__dropdown_arrow-icon, .open-sign-up-text{ + position: relative; + } + + .notif-circle-container, .open-sign-up-text-notif-container{ + position: absolute; + top: -5px; + right: -5px; + padding: 5.3px; + border-radius: 50%; + background-color: var(--brandSecondary100); + cursor: pointer; + } + + .open-sign-up-text-notif-container { + padding: 10.3px; + } + + .notif-circle { + position: absolute; + top: 2px; + right: 2px; + padding: 3.3px; + border-radius: 50%; + background-color: #F2994A; + } + + .open-sign-up-text-notif { + display: flex; + position: absolute; + top: 2px; + right: 2px; + padding: 2.5px 6px; + color: #FFF; + border-radius: 50%; + background-color: #5CAEBC; + } + + .space-between { + display: flex; + justify-content: space-between; + } + .align-items { display: flex; align-items: center; @@ -1105,12 +1119,25 @@
          Profile viewer for whylogs
        • Get alerted in real time when data and model health issues arise
          • - + + +
          @@ -1803,7 +1830,21 @@

          Hold on! :)

          $signUpText.addClass("d-none"); sidebarContentHeight() + $(".open-sign-up-text-notif-container").removeClass("d-none") } + + function openSignUpText() { + const $signUpText = $(".sign-up-text"); + $signUpText.removeClass("d-none"); + sidebarContentHeight() + $(".open-sign-up-text-notif-container").addClass("d-none") + }; + + $(document).ready(function() { + const $signUpText = $(".sign-up-text"); + $signUpText.addClass("d-none"); + sidebarContentHeight() + }) $(document).on("click", ".js-list-group-item span", function (e) { const listItem = $("li>span"), From ec209480bdfeed2ca2f9a1a15c21aa8505024850 Mon Sep 17 00:00:00 2001 From: Perch2005 Date: Mon, 3 Jan 2022 18:06:29 +0400 Subject: [PATCH 15/36] add "Filter by type" design changes, add "Quick search" design changes. --- src/whylogs/viewer/index-hbs-cdn-all-in.html | 229 ++++++++++++------- 1 file changed, 151 insertions(+), 78 deletions(-) diff --git a/src/whylogs/viewer/index-hbs-cdn-all-in.html b/src/whylogs/viewer/index-hbs-cdn-all-in.html index d56918a933..ca568057ed 100644 --- a/src/whylogs/viewer/index-hbs-cdn-all-in.html +++ b/src/whylogs/viewer/index-hbs-cdn-all-in.html @@ -928,6 +928,64 @@ .property-panel-close-icon { cursor: pointer; } + + .flex-direction-colum { + display: flex; + flex-direction: column; + } + + .feature-file-name { + font-size: 17px; + color: #6C757D; + } + + .dropdown-container { + background: rgba(255, 255, 255, 0.5) !important; + padding: 10px !important; + border: none !important; + } + + .dropdown { + align-items: center; + } + + .align-items { + align-items: center; + } + + .dropdown p { + font-family: Asap; + font-size: 15px; + line-height: 150%; + margin: 0; + } + .dropdown img { + height: 10px; + cursor: pointer; + } + + .search-input{ + padding-top: 0 !important; + padding-bottom: 0 !important; + } + + .search-input input{ + border: none; + background: none; + outline: none; + height: 40px; + width: 100%; + font-size: 17px; + } + + .search-input img{ + height: 19px; + pointer-events: none; + } + + input::placeholder { + color: var(--secondaryLight1000); + } @media only screen and (min-width: 1350px) { .clickable-test-feature-body { @@ -1015,80 +1073,76 @@
          Profile viewer for whylogs
          {{getTotalFeatureCount}} features
          -
          -
          - - - - -
          -
          - - - - -
          -
          -
          -
          -
          - Filter by type -
          - -
          -
          -
          - +
          +
          + + -
          -
          - - -
          -
          - - +
          + + + +
          @@ -1805,23 +1859,42 @@

          Hold on! :)

          }); } + function checkedBoxes() { + const $boxes = $('input[name=checkbox]:checked'); + const $notifCircleContainer = $(".notif-circle-container") + + if ($boxes.length) { + $notifCircleContainer.removeClass("d-none") + } + } + function openFilter() { - const $notClickableBurgerIcon = $("#not_clickable_burger_icon") + const $notClickableBurgerIcon = $("#not_clickable_dropdown_arrow-icon") const $filterOptions = $(".filter-options"); - const $burgerIcon = $("#burger_icon") + const $dropdownArrowIcon = $("#dropdown-arrow-icon") + const $notifCircleContainer = $(".notif-circle-container") + const filterClass = $filterOptions.attr("class"); - $filterOptions.removeClass("d-none"); - $burgerIcon.addClass("d-none"); - $notClickableBurgerIcon.removeClass("d-none"); + if (filterClass.indexOf("d-none") > 0) { + $notifCircleContainer.addClass("d-none") + $filterOptions.removeClass("d-none"); + $("#dropdown-container").css("background-color", '#FFF') + $dropdownArrowIcon.css("transform","rotate(180deg)") + } else { + $filterOptions.addClass("d-none"); + $("#dropdown-container").css("background-color", 'none') + $dropdownArrowIcon.css("transform","rotate(0)") + checkedBoxes() + } } function closeFilter() { - const $notClickableBurgerIcon = $("#not_clickable_burger_icon") + const $notClickableBurgerIcon = $("#not_clickable_dropdown_arrow-icon") const $filterOptions = $(".filter-options"); - const $burgerIcon = $("#burger_icon") + const $dropdownArrowIcon = $("#dropdown-arrow-icon") $filterOptions.addClass("d-none"); - $burgerIcon.removeClass("d-none"); + $dropdownArrowIcon.removeClass("d-none"); $notClickableBurgerIcon.addClass("d-none"); } From d30aeab9384f75edf9cc2427b523e028287ea0aa Mon Sep 17 00:00:00 2001 From: Perch2005 Date: Mon, 3 Jan 2022 18:07:44 +0400 Subject: [PATCH 16/36] add "Quick search" input. --- src/whylogs/viewer/index-hbs-cdn-all-in.html | 1 - 1 file changed, 1 deletion(-) diff --git a/src/whylogs/viewer/index-hbs-cdn-all-in.html b/src/whylogs/viewer/index-hbs-cdn-all-in.html index ca568057ed..3a9d5efae9 100644 --- a/src/whylogs/viewer/index-hbs-cdn-all-in.html +++ b/src/whylogs/viewer/index-hbs-cdn-all-in.html @@ -1145,7 +1145,6 @@
          Profile viewer for whylogs
          -
            Date: Mon, 3 Jan 2022 18:11:10 +0400 Subject: [PATCH 17/36] count of types in "filter by type" dropdown --- src/whylogs/viewer/index.html | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/src/whylogs/viewer/index.html b/src/whylogs/viewer/index.html index 572f511178..c5a9e5ada5 100644 --- a/src/whylogs/viewer/index.html +++ b/src/whylogs/viewer/index.html @@ -114,11 +114,10 @@
            Profile viewer for whylogs
            name="checkbox" value="Discrete" id="inferredDiscrete" - onclick="changeDiscreteValue()" checked />
          @@ -128,13 +127,10 @@
          Profile viewer for whylogs
          name="checkbox" value="Non-discrete" id="inferredNonDiscrete" - onclick="changeNonDiscreteValue()" checked />
          @@ -144,11 +140,10 @@
          Profile viewer for whylogs
          name="checkbox" value="Unknown" id="inferredUnknown" - onclick="changeUnknwonValue()" checked />
          From 876561e0838433abbdfe37b0d9b36726638d7b26 Mon Sep 17 00:00:00 2001 From: Perch2005 Date: Mon, 3 Jan 2022 18:18:28 +0400 Subject: [PATCH 18/36] position of edit, delete buttons sticky. --- src/whylogs/viewer/css/whylogs-styles.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/whylogs/viewer/css/whylogs-styles.css b/src/whylogs/viewer/css/whylogs-styles.css index f8228fc404..79bd3a3d9b 100644 --- a/src/whylogs/viewer/css/whylogs-styles.css +++ b/src/whylogs/viewer/css/whylogs-styles.css @@ -811,10 +811,6 @@ a .wl-table-row--bottom-shadow { background-color: #5CAEBC; } -.not-clickable-notif { - background: #FAC79A; -} - .space-between { display: flex; justify-content: space-between; @@ -1033,7 +1029,6 @@ a .wl-table-row--bottom-shadow { .search-input input{ border: none; background: none; - width: 100%; outline: none; height: 40px; width: 100%; @@ -1078,7 +1073,12 @@ a .wl-table-row--bottom-shadow { } input::placeholder { - color: var(--secondaryLight1000);; + color: var(--secondaryLight1000); +} + +.wl-selected-profile { + position: sticky; + left: 0; } @media only screen and (min-width: 1350px) { From 88e984c532505eba97b544c89e10f25d4de5c3e7 Mon Sep 17 00:00:00 2001 From: Perch2005 Date: Tue, 4 Jan 2022 19:16:08 +0400 Subject: [PATCH 19/36] add double histogram chart in reference profile panel. --- src/whylogs/viewer/css/whylogs-styles.css | 3 + src/whylogs/viewer/index.html | 2 +- src/whylogs/viewer/js/whylogs-script.js | 81 ++++++++++++++++++++++- 3 files changed, 82 insertions(+), 4 deletions(-) diff --git a/src/whylogs/viewer/css/whylogs-styles.css b/src/whylogs/viewer/css/whylogs-styles.css index 79bd3a3d9b..7d356d119d 100644 --- a/src/whylogs/viewer/css/whylogs-styles.css +++ b/src/whylogs/viewer/css/whylogs-styles.css @@ -961,6 +961,9 @@ a .wl-table-row--bottom-shadow { } .chart-box { + display: flex; + align-items: center; + justify-content: center; width: 75%; height: 310px; border: 2px solid #EBF2F3; diff --git a/src/whylogs/viewer/index.html b/src/whylogs/viewer/index.html index c5a9e5ada5..2fef924cac 100644 --- a/src/whylogs/viewer/index.html +++ b/src/whylogs/viewer/index.html @@ -229,7 +229,7 @@
          Profile viewer for whylogs
          -
          +
          diff --git a/src/whylogs/viewer/js/whylogs-script.js b/src/whylogs/viewer/js/whylogs-script.js index 0d2774180d..97a56cacb0 100644 --- a/src/whylogs/viewer/js/whylogs-script.js +++ b/src/whylogs/viewer/js/whylogs-script.js @@ -184,7 +184,79 @@ return svgEl._groups[0][0].outerHTML; } - function openReferencePropertyPanel(items, chart) { + function generateDoubleHistogramChart(histogramData, overlappedHistogramData) { + // set the dimensions and margins of the graph + var margin = {top: 10, right: 30, bottom: 30, left: 40}, + width = 650 - margin.left - margin.right, + height = 300 - margin.top - margin.bottom; + + // append the svg object to the body of the page + var svg = d3.select("#chart-box") + .append("svg") + .attr("width", width + margin.left + margin.right) + .attr("height", height + margin.top + margin.bottom) + .append("g") + .attr("transform", + "translate(" + margin.left + "," + margin.top + ")"); + + // X axis: scale and draw: + var x = d3.scaleLinear() + .domain([-1, 35]) // can use this instead of 1000 to have the max of data: d3.max(data, function(d) { return +d.price }) + .range([0, width]); + svg.append("g") + .attr("transform", "translate(0," + height + ")") + .call(d3.axisBottom(x)); + + // set the parameters for the histogram + var histogram = d3.histogram() + .value(function(d) { return +d.value; }) // I need to give the vector of value + .domain(x.domain()) // then the domain of the graphic + .thresholds(x.ticks(40)); // then the numbers of bins + + // And apply twice this function to data to get the bins. + var bins1 = histogram(histogramData.map(({axisY, axisX}) => { return {type: "variable 1", value: axisY} })); + var bins2 = histogram(overlappedHistogramData.map(({axisY, axisX}) => { return {type: "variable 2", value: axisY} })); + console.log(histogramData, overlappedHistogramData); + // Y axis: scale and draw: + var y = d3.scaleLinear() + .range([height, 0]); + y.domain([0, d3.max(bins1, function(d) { return d.length; })]); // d3.hist has to be called before the Y axis obviously + svg.append("g") + .call(d3.axisLeft(y)); + + // append the bars for series 1 + svg.selectAll("rect") + .data(bins1) + .enter() + .append("rect") + .attr("x", 1) + .attr("transform", function(d) { return "translate(" + x(d.x0) + "," + y(d.length) + ")"; }) + .attr("width", function(d) { return x(d.x1) - x(d.x0); }) + .attr("height", function(d) { return height - y(d.length); }) + .style("fill", "#369BAC") + .style("opacity", 0.6) + + // append the bars for series 2 + svg.selectAll("rect2") + .data(bins2) + .enter() + .append("rect") + .attr("x", 1) + .attr("transform", function(d) { return "translate(" + x(d.x0) + "," + y(d.length) + ")"; }) + .attr("width", function(d) { return x(d.x1) - x(d.x0); }) + .attr("height", function(d) { console.log(d, d.length, y(d.length)); return height - y(d.length); }) + .style("fill", "#2683C9") + .style("opacity", 0.6) + + // Handmade legend + svg.append("circle").attr("cx",500).attr("cy",30).attr("r", 6).style("fill", "#369BAC") + svg.append("circle").attr("cx",500).attr("cy",60).attr("r", 6).style("fill", "#2683C9") + svg.append("text").attr("x", 520).attr("y", 30).text("Current").style("font-size", "15px").attr("alignment-baseline","middle") + svg.append("text").attr("x", 520).attr("y", 60).text("Reference").style("font-size", "15px").attr("alignment-baseline","middle") + + } + + function openReferencePropertyPanel(items, chart, getDoubleHistogramChart) { const chartInfoItem = (drift, driftName) => `
          @@ -203,6 +275,7 @@ $clickableTestFeatureWrap.removeClass("d-none") $("#chart").html(chart); + // $("#chart-box").html(getDoubleHistogramChart); chipString += ` ${chartInfoItem(fixNumberTo(items.numberSummary.stddev), "Drift from ref")} ${chartInfoItem(items.numberSummary.count.toString(), "Total Count")} @@ -240,18 +313,20 @@ } function openPropertyPanel(items, infType, feature) { - let getGraph = null; + let getGraph = null, + getDoubleHistogramChart = null; if (referencePropertyPanelData[feature[0]][0]) { items = referencePropertyPanelData[feature[0]][0] getGraph = getGraphHtml(feature[1].chartData[1], 50, 280, 0, true) + getDoubleHistogramChart = generateDoubleHistogramChart(feature[1].chartData[0], feature[1].chartData[1]) } const getPropertyPanelGraph = getPropertyPanelGraphHtml(jsonData.columns[feature[0]], feature[0]) if (checkJSONValidityForMultiProfile(jsonData) || checkJSONValidityForSingleProfile(jsonData)) { if (items.length > 0 && items !== "undefined") { if (referencePropertyPanelData[feature[0]][0]) { - openReferencePropertyPanel(referenceJsonData.columns[feature[0]], getGraph) + openReferencePropertyPanel(referenceJsonData.columns[feature[0]], getGraph, getDoubleHistogramChart) } else { openProfilePropertyPanel(items, infType, getPropertyPanelGraph) } From ff7434568c5fac186440cddf2350ff71a86bbb56 Mon Sep 17 00:00:00 2001 From: Perch2005 Date: Tue, 4 Jan 2022 19:21:11 +0400 Subject: [PATCH 20/36] "Sign up for a free WhyLabs account" button disappears when screen with less than 1000px. --- src/whylogs/viewer/css/whylogs-styles.css | 23 +++++++++++++---------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/src/whylogs/viewer/css/whylogs-styles.css b/src/whylogs/viewer/css/whylogs-styles.css index 7d356d119d..a2388a8cc6 100644 --- a/src/whylogs/viewer/css/whylogs-styles.css +++ b/src/whylogs/viewer/css/whylogs-styles.css @@ -668,15 +668,6 @@ a .wl-table-row--bottom-shadow { justify-content: center; } -@media screen and (min-width: 1000px) { - .desktop-content { - display: block; - } - .no-responsive { - display: none; - } -} - .no-responsive__content { max-width: 600px; width: 100%; @@ -729,7 +720,7 @@ a .wl-table-row--bottom-shadow { position: fixed; bottom: 0; left: 0; - z-index: 999999; + z-index: 0; background: #F1F6F6; margin-bottom: 0 !important; display: flex; @@ -1084,6 +1075,18 @@ input::placeholder { left: 0; } +@media screen and (min-width: 1000px) { + .desktop-content { + display: block; + } + .no-responsive { + display: none; + } + .wl__unlock-the-power { + z-index: 999999; + } +} + @media only screen and (min-width: 1350px) { .clickable-test-feature-body { display: flex; From d89347653c82d316d5282e450bf2c3ff97e528dd Mon Sep 17 00:00:00 2001 From: ssxcho Date: Mon, 10 Jan 2022 04:19:22 +0400 Subject: [PATCH 21/36] add reference profile charts, add profile name and time stamp --- src/whylogs/viewer/index-hbs-cdn-all-in.html | 828 +++++++++++++++---- 1 file changed, 688 insertions(+), 140 deletions(-) diff --git a/src/whylogs/viewer/index-hbs-cdn-all-in.html b/src/whylogs/viewer/index-hbs-cdn-all-in.html index 3a9d5efae9..22ac7b2f3c 100644 --- a/src/whylogs/viewer/index-hbs-cdn-all-in.html +++ b/src/whylogs/viewer/index-hbs-cdn-all-in.html @@ -677,7 +677,7 @@ display: flex; flex-direction: column; align-items: center; - -webkit-box-shadow: 0px -6px 13px 0px rgba(0,0,0,0.32); + -webkit-box-shadow: 0px -6px 13px 0px rgba(0,0,0,0.32); box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.05); width: var(--SIDE-PANEL-WIDTH); } @@ -693,32 +693,32 @@ width: 15px; height: 15px; } - + .wl__close-icon img{ width: 100%; height: 100%; cursor: pointer; } - + .count-color { color: black; } - + .wl__dropdown_arrow-icon_container { width: 18px; height: 16px; } - + .wl__dropdown_arrow-icon_container img{ width: 100%; height: 100%; cursor: pointer; } - + .wl__dropdown_arrow-icon, .open-sign-up-text{ position: relative; } - + .notif-circle-container, .open-sign-up-text-notif-container{ position: absolute; top: -5px; @@ -728,11 +728,11 @@ background-color: var(--brandSecondary100); cursor: pointer; } - + .open-sign-up-text-notif-container { padding: 10.3px; } - + .notif-circle { position: absolute; top: 2px; @@ -741,7 +741,7 @@ border-radius: 50%; background-color: #F2994A; } - + .open-sign-up-text-notif { display: flex; position: absolute; @@ -752,25 +752,25 @@ border-radius: 50%; background-color: #5CAEBC; } - + .space-between { display: flex; justify-content: space-between; } - + .align-items { display: flex; align-items: center; } - + .display-flex{ display: flex; } - + .feature-count-title { font-size: 22px; - } - + } + .wl_filter-options { background: rgba(255, 255, 255, 0.5); border: 1px solid #DBE5E7; @@ -778,75 +778,75 @@ border-radius: 4px; padding: 10px; } - + .form-check-input:checked { background-color: #0E7384; border-color: #0E7384; } - + .form-check-input[type=checkbox] { border-radius: 1.25em; } - + .not-clickable { pointer-events: none; } - + .wl_arrow-icon { width: 15px; height: 15px; } - + .arrow-icon-container { height: 100%; cursor: pointer; } - + .wl_list-item-dot { background: #b0d2d7; width: 8px; height: 8px; border-radius: 50px; } - + .wl_filter-list-item { display: flex; align-items: center; } - + .wl_filter-list-item>span{ padding-left: 15px; } - + .table-border-none { padding: 0; border: none; } - + .clickable-test-feature-wrap { background: #F8FAFB; } - + .clickable-test-feature-heading { display: flex; flex-direction: column; } - + .clickable-test-feature-heading-wrap { padding: 35px; padding-bottom: 0; border-bottom: 2px solid #EBF2F3; } - + .pages-button-wrap { display: flex; align-items: flex-end; } - + .page-button-wrap { padding-right: 60px; } - + .page-button{ border: none; background: no-repeat; @@ -856,32 +856,32 @@ letter-spacing: -0.01em; padding-bottom: 25px; } - + .activ-pages-button{ color: #369BAC !important; border-bottom: 4px solid #369BAC !important; padding-bottom: 21px !important; } - + .title p { font-weight: 600; font-size: 24px; color: #313B3D; } - + .info p { font-weight: 600; font-size: 12px; color: #313B3D; } - + .info div { font-weight: 600; font-size: 18px; line-height: 20px; color: #0E7384; } - + .chart, .info { display: flex; flex-direction: column; @@ -892,39 +892,56 @@ .chart { margin-bottom: 1rem; } - + .info:last-child { padding: 0; } - + .clickable-test-feature-body { display: flex; flex-direction: column; } - + .chart-box-wrap { display: flex; justify-content: center; } - + .chart-box { - width: 75%; - height: 310px; - border: 2px solid #EBF2F3; - background: #FFF; - border-radius: 4px; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + width: 75%; + height: 310px; + border: 2px solid #EBF2F3; + background: #FFF; + border-radius: 4px; + } + + .chart-box-title { + width: 80%; + justify-content: space-between; + } + + .chart-box-title p{ + font-family: Asap; + font-weight: bold; + font-size: 18px; + line-height: 16px; + color: #4F595B; } - + .chart-info-wrap { display: flex; align-items: flex-end; } - + .chart-info { display: flex; align-items: flex-end; } - + .property-panel-close-icon { cursor: pointer; } @@ -933,42 +950,43 @@ display: flex; flex-direction: column; } - + .feature-file-name { font-size: 17px; + font-weight: 900; color: #6C757D; } - + .dropdown-container { background: rgba(255, 255, 255, 0.5) !important; padding: 10px !important; border: none !important; } - + .dropdown { align-items: center; } - + .align-items { align-items: center; } - + .dropdown p { font-family: Asap; font-size: 15px; - line-height: 150%; + line-height: 150%; margin: 0; } .dropdown img { height: 10px; cursor: pointer; } - + .search-input{ padding-top: 0 !important; padding-bottom: 0 !important; } - + .search-input input{ border: none; background: none; @@ -977,16 +995,116 @@ width: 100%; font-size: 17px; } - + .search-input img{ height: 19px; pointer-events: none; } - + input::placeholder { color: var(--secondaryLight1000); } - + + .wl-selected-profile { + position: sticky; + left: 0; + } + + .circle-color { + display: inline-block; + padding: 5px; + border-radius: 50px; + } + + .colors-for-distingushing-charts { + padding-right: 10px; + } + + .summary-statistic { + padding-right: 20px; + } + + .summary { + font-family: Asap; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 16px; + color: #6C757D; + padding-right: 10px; + } + + .summary-title { + font-family: Asap; + font-weight: normal; + font-size: 15px; + line-height: 14px; + color: #6C757D; + } + + .wl-selected-reference-profile { + font-weight: 900; + } + + .reference-profile-time-stamp{ + padding-left: 20px; + } + + .reference-profile-time-stamp>strong{ + font-size: 1rem; + } + + .bar.positive { + fill: #369BACB2; + } + + .bar.negative { + fill: #2683C9E5; + } + + .frequent-item-box { + width: 90%; + height: 50px; + align-items: flex-start; + display: flex; + justify-content: center; + flex-direction: column; + border: 2px solid #EBF2F3; + background: #FFF; + border-radius: 4px; + } + + .frequent-item-box-wrap { + display: flex; + justify-content: center; + } + + .frequent-item-box-to-title { + padding-left: 20px; + font-family: Asap; + font-weight: bold; + font-size: 16px; + line-height: 16px; + color: #4F595B; + } + + .frequent-items-body { + display: flex; + flex-direction: column; + } + + @media screen and (min-width: 1000px) { + .desktop-content { + display: block; + } + .no-responsive { + display: none; + } + .wl__unlock-the-power { + z-index: 999999; + } + } + @media only screen and (min-width: 1350px) { .clickable-test-feature-body { display: flex; @@ -996,14 +1114,14 @@ row-gap: 20px; column-gap: 20px; } - + .chart-box-wrap { width: 45%; display: flex; justify-content: center; margin-bottom: 0 !important; } - + .chart-box { width: 100%; height: 310px; @@ -1011,7 +1129,8 @@ background: #FFF; border-radius: 4px; } - } + } + @@ -1069,9 +1188,19 @@
          Profile viewer for whylogs
          -
          - {{getTotalFeatureCount}} - features +
          +
          + {{getTotalFeatureCount}} + features +
          +
          + Currently selected profile: + {{getProfileTimeStamp this}} +
          +
          + Currently selected reference profile: + {{getReferenceProfileTimeStamp}} +
          @@ -1079,16 +1208,15 @@
          Profile viewer for whylogs
          -
          @@ -93,7 +97,7 @@
          Profile viewer for whylogs
          -
          @@ -101,7 +105,7 @@
          Profile viewer for whylogs
          -
          -
          -
          -
          -
          -
          -
          -
          -
          -
          -
          -
          -
          -
          -
          +
          +
          +
          @@ -277,12 +269,16 @@
          Reference profile
          -
          +
          + Reference profile time stamp: +
          2020-02-26 12:23:32 PM PST
          +
          diff --git a/src/whylogs/viewer/js/whylogs-script.js b/src/whylogs/viewer/js/whylogs-script.js index 97a56cacb0..2691dbe02a 100644 --- a/src/whylogs/viewer/js/whylogs-script.js +++ b/src/whylogs/viewer/js/whylogs-script.js @@ -14,8 +14,10 @@ }; // HTML Elements + const $selectedReferenceProfile = $(".wl__selected-reference-profile"); + const $selectedProfile = $(".wl__selected-profile"); const $removeReferenceProfileButton = $("#remove-reference-profile-button") - const $featureFileName = $(".feature-file-name") + const $featureFileName = $(".wl__feature-file-name") const $notifCircleContainer = $(".notif-circle-container") const $boxes = $('input[name=checkbox]:checked'); const $closeIcon = $("#close-icon"); @@ -119,6 +121,12 @@ }; } + function formatLabelDate(timestamp) { + const date = new Date(timestamp); + const format = d3.timeFormat("%Y-%m-%d %I:%M:%S %p %Z"); + return format(date); + } + function scrollToFeatureName(event) { const TABLE_HEADER_OFFSET = 90; const $tableWrap = $(".wl-table-wrap"); @@ -134,31 +142,69 @@ ); } + const chartBoxElement = (chartTitle, chart) => ` +
          +
          +
          ${chartTitle}
          +
          ${chart}
          +
          +
          + ` + + const frequentItemBoxElement = (chartTitle) => ` +
          +
          +
          ${chartTitle}
          +
          +
          + ` + + const colorsForDistingushingCharts = (color, text) => ` +
          +
          + ${text} +
          + ` + + class GenerateChartParams { + constructor(height, width, data, bottomMargin=20) { + this.MARGIN = { + TOP: 5, + RIGHT: 5, + BOTTOM: bottomMargin, + LEFT: 55, + }; + this.SVG_WIDTH = width; + this.SVG_HEIGHT = height; + this.CHART_WIDTH = this.SVG_WIDTH - this.MARGIN.LEFT - this.MARGIN.RIGHT; + this.CHART_HEIGHT = this.SVG_HEIGHT - this.MARGIN.TOP - this.MARGIN.BOTTOM; + this.svgEl = d3.create("svg").attr("width", this.SVG_WIDTH).attr("height", this.SVG_HEIGHT); + this.maxYValue = d3.max(data, (d) => Math.abs(d.axisY)); + this.xScale = d3 + .scaleBand() + .domain(data.map((d) => d.axisX)) + .range([this.MARGIN.LEFT, this.MARGIN.LEFT + this.CHART_WIDTH]); + this.yScale = d3 + .scaleLinear() + .domain([0, this.maxYValue * 1.02]) + .range([this.CHART_HEIGHT, 0]); + } + } + function getGraphHtml(data, height = 75, width = 350, index = 0, referenceProfile = false) { + const sizes = new GenerateChartParams(height, width, data, 5) + const { + MARGIN, + SVG_WIDTH, + SVG_HEIGHT, + CHART_WIDTH, + CHART_HEIGHT, + svgEl, + maxYValue, + xScale, + yScale + } = sizes const color = ["#369BAC", '#2683C9'] - const MARGIN = { - TOP: 5, - RIGHT: 5, - BOTTOM: 5, - LEFT: 55, - }; - const SVG_WIDTH = width; - const SVG_HEIGHT = height; - const CHART_WIDTH = SVG_WIDTH - MARGIN.LEFT - MARGIN.RIGHT; - const CHART_HEIGHT = SVG_HEIGHT - MARGIN.TOP - MARGIN.BOTTOM; - - const svgEl = d3.create("svg").attr("width", SVG_WIDTH).attr("height", SVG_HEIGHT); - - const maxYValue = d3.max(data, (d) => Math.abs(d.axisY)); - - const xScale = d3 - .scaleBand() - .domain(data.map((d) => d.axisX)) - .range([MARGIN.LEFT, MARGIN.LEFT + CHART_WIDTH]); - const yScale = d3 - .scaleLinear() - .domain([0, maxYValue * 1.02]) // so that chart's height has 102% height of the maximum value - .range([CHART_HEIGHT, 0]); // Add the y Axis if (!referenceProfile) { @@ -185,80 +231,265 @@ } function generateDoubleHistogramChart(histogramData, overlappedHistogramData) { - // set the dimensions and margins of the graph - var margin = {top: 10, right: 30, bottom: 30, left: 40}, - width = 650 - margin.left - margin.right, - height = 300 - margin.top - margin.bottom; - - // append the svg object to the body of the page - var svg = d3.select("#chart-box") - .append("svg") - .attr("width", width + margin.left + margin.right) - .attr("height", height + margin.top + margin.bottom) - .append("g") - .attr("transform", - "translate(" + margin.left + "," + margin.top + ")"); - - // X axis: scale and draw: - var x = d3.scaleLinear() - .domain([-1, 35]) // can use this instead of 1000 to have the max of data: d3.max(data, function(d) { return +d.price }) - .range([0, width]); - svg.append("g") - .attr("transform", "translate(0," + height + ")") - .call(d3.axisBottom(x)); - - // set the parameters for the histogram - var histogram = d3.histogram() - .value(function(d) { return +d.value; }) // I need to give the vector of value - .domain(x.domain()) // then the domain of the graphic - .thresholds(x.ticks(40)); // then the numbers of bins - - // And apply twice this function to data to get the bins. - var bins1 = histogram(histogramData.map(({axisY, axisX}) => { return {type: "variable 1", value: axisY} })); - var bins2 = histogram(overlappedHistogramData.map(({axisY, axisX}) => { return {type: "variable 2", value: axisY} })); - console.log(histogramData, overlappedHistogramData); - // Y axis: scale and draw: - var y = d3.scaleLinear() - .range([height, 0]); - y.domain([0, d3.max(bins1, function(d) { return d.length; })]); // d3.hist has to be called before the Y axis obviously - svg.append("g") - .call(d3.axisLeft(y)); - - // append the bars for series 1 - svg.selectAll("rect") - .data(bins1) - .enter() - .append("rect") - .attr("x", 1) - .attr("transform", function(d) { return "translate(" + x(d.x0) + "," + y(d.length) + ")"; }) - .attr("width", function(d) { return x(d.x1) - x(d.x0); }) - .attr("height", function(d) { return height - y(d.length); }) - .style("fill", "#369BAC") - .style("opacity", 0.6) - - // append the bars for series 2 - svg.selectAll("rect2") - .data(bins2) + let yFormat, + xFormat; + const sizes = new GenerateChartParams(230, 600, histogramData) + const { + MARGIN, + SVG_WIDTH, + SVG_HEIGHT, + CHART_WIDTH, + CHART_HEIGHT, + svgEl, + maxYValue, + xScale, + yScale + } = sizes + + const xAxis = d3.axisBottom(xScale).ticks(SVG_WIDTH / 80, xFormat).tickSizeOuter(0); + const yAxis = d3.axisLeft(yScale).ticks(SVG_HEIGHT / 40, yFormat); + yFormat = yScale.tickFormat(100, yFormat); + + svgEl.append("g") + .attr("transform", `translate(${MARGIN.LEFT},0)`) + .call(yAxis) + .call(g => g.select(".domain").remove()) + .call(g => g.selectAll(".tick line") + .attr("x2", CHART_WIDTH) + .attr("stroke-opacity", 0.1)) + .call(g => g.append("text") + .attr("x", -MARGIN.LEFT) + .attr("y", 10) + .attr("fill", "currentColor") + .attr("text-anchor", "start")); + + svgEl.append("g") + .attr("transform", `translate(0,${SVG_HEIGHT - MARGIN.BOTTOM})`) + .call(xAxis) + .call(g => g.select(".domain").remove()) + .call(g => g.selectAll(".tick line").remove()) + .call(g => g.append("text") + .attr("x", SVG_WIDTH - MARGIN.RIGHT) + .attr("y", 27) + .attr("fill", "currentColor") + .attr("text-anchor", "end")); + + const gChart = svgEl.append("g"); + gChart + .selectAll(".bar") + .data(histogramData) .enter() .append("rect") - .attr("x", 1) - .attr("transform", function(d) { return "translate(" + x(d.x0) + "," + y(d.length) + ")"; }) - .attr("width", function(d) { return x(d.x1) - x(d.x0); }) - .attr("height", function(d) { console.log(d, d.length, y(d.length)); return height - y(d.length); }) - .style("fill", "#2683C9") - .style("opacity", 0.6) - - // Handmade legend - svg.append("circle").attr("cx",500).attr("cy",30).attr("r", 6).style("fill", "#369BAC") - svg.append("circle").attr("cx",500).attr("cy",60).attr("r", 6).style("fill", "#2683C9") - svg.append("text").attr("x", 520).attr("y", 30).text("Current").style("font-size", "15px").attr("alignment-baseline","middle") - svg.append("text").attr("x", 520).attr("y", 60).text("Reference").style("font-size", "15px").attr("alignment-baseline","middle") + .classed("bar", true) + .attr("width", xScale.bandwidth()) + .attr("height", (d) => CHART_HEIGHT - yScale(d.axisY)) + .attr("x", (d) => xScale(d.axisX)) + .attr("y", (d) => yScale(d.axisY) + MARGIN.TOP) + .attr("fill", "#369BAC") + .style("opacity","0.6"); + + const gChart1 = svgEl.append("g"); + gChart1 + .selectAll(".bar") + .data(overlappedHistogramData) + .enter() + .append("rect") + .classed("bar", true) + .attr("width", xScale.bandwidth()) + .attr("height", (d) => CHART_HEIGHT - yScale(d.axisY)) + .attr("x", (d) => xScale(d.axisX)) + .attr("y", (d) => yScale(d.axisY) + MARGIN.TOP) + .attr("fill", "#2683C9") + .style("opacity", "0.6"); + return svgEl._groups[0][0].outerHTML; } - function openReferencePropertyPanel(items, chart, getDoubleHistogramChart) { + function generateBarChart(histogramData, overlappedHistogramData) { + let yFormat, + xFormat; + const data = histogramData.map((profile, index) => { + return { + group: index, + profile: profile.axisY, + reference_profile: overlappedHistogramData[index].axisY + } + }).slice(0, 20) + + const sizes = new GenerateChartParams(230, 600, histogramData) + const { + MARGIN, + SVG_WIDTH, + SVG_HEIGHT, + CHART_WIDTH, + CHART_HEIGHT, + svgEl, + maxYValue, + xScale, + yScale + } = sizes + + const groups = d3.map(data, function(d){return(d.group)}).keys() + const subgroups = ['profile', 'reference_profile'] + + xScale.padding([0.3]) + + const xAxis = d3.axisBottom(xScale).ticks(SVG_WIDTH / 80, xFormat).tickSizeOuter(0); + const yAxis = d3.axisLeft(yScale).ticks(SVG_HEIGHT / 40, yFormat); + yFormat = yScale.tickFormat(100, yFormat); + + svgEl.append("g") + .attr("transform", `translate(${MARGIN.LEFT},0)`) + .call(yAxis) + .call(g => g.select(".domain").remove()) + .call(g => g.selectAll(".tick line") + .attr("x2", CHART_WIDTH) + .attr("stroke-opacity", 0.1)) + .call(g => g.append("text") + .attr("x", -MARGIN.LEFT) + .attr("y", 10) + .attr("fill", "currentColor") + .attr("text-anchor", "start")); + + svgEl.append("g") + .attr("transform", `translate(0,${SVG_HEIGHT - MARGIN.BOTTOM})`) + .call(xAxis) + .call(g => g.select(".domain").remove()) + .call(g => g.selectAll(".tick line").remove()) + .call(g => g.append("text") + .attr("x", SVG_WIDTH - MARGIN.RIGHT) + .attr("y", 27) + .attr("fill", "currentColor") + .attr("text-anchor", "end")); + // Another scale for subgroup position? + const xSubgroup = d3.scaleBand() + .domain(subgroups) + .range([0, xScale.bandwidth()]) + + // color palette = one color per subgroup + const color = d3.scaleOrdinal() + .domain(subgroups) + .range(['#369BAC', '#2683C9']) + + svgEl.append("g") + .selectAll("g") + // Enter in data = loop group per group + .data(data) + .enter() + .append("g") + .attr("transform", function(d) { return "translate(" + xScale(d.group) + ",0)"; }) + .selectAll("rect") + .data(function(d) { return subgroups.map(function(key) { return {key: key, value: d[key]}; }); }) + .enter().append("rect") + .attr("x", function(d) { return xSubgroup(d.key); }) + .attr("y", function(d) { return yScale(d.value); }) + .attr("width", xSubgroup.bandwidth()) + .attr("height", function(d) { return (CHART_HEIGHT - yScale(d.value)); }) + .attr("fill", function(d) { return color(d.key); }) + .style("opacity", "0.6"); + + + return svgEl._groups[0][0].outerHTML; + } - const chartInfoItem = (drift, driftName) => ` + function generatePositiveNegativeChart(histogramData, overlappedHistogramData) { + const data = histogramData.map((value, index) => { + const difference = value.axisY - overlappedHistogramData[index].axisY + const negativeValues = difference < 0 ? difference : 0 + return [+value.axisY, negativeValues] + }).slice(0, 20).flat() + + let yFormat, + xFormat; + + const sizes = new GenerateChartParams(230, 600, data) + const { + MARGIN, + SVG_WIDTH, + SVG_HEIGHT, + CHART_WIDTH, + CHART_HEIGHT, + svgEl + } = sizes + + const y0 = Math.max(Math.abs(d3.min(data)), Math.abs(d3.max(data))); + + const yScale = d3.scaleLinear() + .domain([-y0, y0]) + .range([CHART_HEIGHT,0]) + + const xScale = d3.scaleBand() + .domain(d3.range(data.length)) // so that chart's height has 102% height of the maximum value + .rangeRound([MARGIN.LEFT, SVG_WIDTH]) + .padding([0.1]); + + const xAxis = d3.axisBottom(xScale).ticks(SVG_WIDTH / 80, xFormat).tickSizeOuter(0); + const yAxis = d3.axisLeft(yScale).ticks(SVG_HEIGHT / 40, yFormat); + yFormat = yScale.tickFormat(100, yFormat); + + svgEl.append("g") + .attr("transform", `translate(${MARGIN.LEFT},0)`) + .call(yAxis) + .call(g => g.select(".domain").remove()) + .call(g => g.selectAll(".tick line") + .attr("x2", CHART_WIDTH ) + .attr("stroke-opacity", 0.1)) + .call(g => g.append("text") + .attr("x", - MARGIN.LEFT) + .attr("y", 10) + .attr("fill", "currentColor") + .attr("text-anchor", "start")); + + svgEl + .append("g") + .attr("transform", `translate(0,${SVG_HEIGHT - MARGIN.BOTTOM})`) + .call(xAxis) + .call(g => g.select(".domain").remove()) + .call(g => g.selectAll(".tick>line").remove()) + .call(g => g.append("text") + .attr("x", SVG_WIDTH - MARGIN.RIGHT) + .attr("y", 27) + .attr("fill", "currentColor") + .attr("text-anchor", "end")); + + svgEl.selectAll(".bar") + .data(data) + .enter().append("rect") + .attr("class", function(d) { return d < 0 ? "bar negative" : "bar positive"; }) + .attr("y", function(d) { return yScale(Math.max(0, d)); }) + .attr("x", function(d, i) { return xScale(i); }) + .attr("height", function(d) { return Math.abs(yScale(d) - yScale(0)); }) + .attr("width", xScale.bandwidth()); + + return svgEl._groups[0][0].outerHTML; + } + + function numericalDriftChart(getDoubleHistogramChart) { + let colorsForDistingushingChartHTMLElement = ''; + + colorsForDistingushingChartHTMLElement +=` +

          Data Distribution Chart

          +
          + ${colorsForDistingushingCharts("#369BAC", "Current")} + ${colorsForDistingushingCharts("#2683C9", "Reference")} +
          + ` + $(".clickable-test-feature-body").html(` + ${chartBoxElement(colorsForDistingushingChartHTMLElement, getDoubleHistogramChart)} + ${chartBoxElement('', '')} + `); + } + + function categoricalDriftChart(getBarChart, getPositiveNegative) { + $(".clickable-test-feature-body").html(` + ${chartBoxElement('

          Bar Chart

          ', getBarChart)} + ${chartBoxElement('

          Difference Bar Chart

          ', getPositiveNegative)} + `); + } + + function openReferencePropertyPanel(items, key, chart, getDoubleHistogramChart, getBarChart, getPositiveNegative) { + + const chartInfoItem = (drift, driftName) => `
          ${drift}

          ${driftName}

          @@ -268,14 +499,35 @@ const $pagesButtons = $(".page-button"); const $pagesButton = $pagesButtons[0]; let chipString = ""; - + $pagesButtons.removeClass("activ-pages-button") $($pagesButton).addClass("activ-pages-button") $tableContent.addClass("d-none") $clickableTestFeatureWrap.removeClass("d-none") + $("#page-button").on("click", function () { + if (jsonData.columns[key].numberSummary.isDiscrete) { + $("#page-button").text("Categorical Data") + categoricalDriftChart(getBarChart, getPositiveNegative) + } else { + $("#page-button").text("Numerical Data") + numericalDriftChart(getDoubleHistogramChart) + } + + $(".frequent-items-body").html(``); + }) + + if (jsonData.columns[key].numberSummary.isDiscrete) { + $("#page-button").text("Categorical Data") + categoricalDriftChart(getBarChart, getPositiveNegative) + } else { + $("#page-button").text("Numerical Data") + numericalDriftChart(getDoubleHistogramChart) + } + $(".frequent-items-body").html(``); + $("#chart").html(chart); - // $("#chart-box").html(getDoubleHistogramChart); + chipString += ` ${chartInfoItem(fixNumberTo(items.numberSummary.stddev), "Drift from ref")} ${chartInfoItem(items.numberSummary.count.toString(), "Total Count")} @@ -314,24 +566,28 @@ function openPropertyPanel(items, infType, feature) { let getGraph = null, - getDoubleHistogramChart = null; + getDoubleHistogramChart = null, + getBarChart = null, + getPositiveNegative = null; if (referencePropertyPanelData[feature[0]][0]) { items = referencePropertyPanelData[feature[0]][0] getGraph = getGraphHtml(feature[1].chartData[1], 50, 280, 0, true) getDoubleHistogramChart = generateDoubleHistogramChart(feature[1].chartData[0], feature[1].chartData[1]) + getBarChart = generateBarChart(feature[1].chartData[0], feature[1].chartData[1]), + getPositiveNegative = generatePositiveNegativeChart(feature[1].chartData[0], feature[1].chartData[1]) } const getPropertyPanelGraph = getPropertyPanelGraphHtml(jsonData.columns[feature[0]], feature[0]) if (checkJSONValidityForMultiProfile(jsonData) || checkJSONValidityForSingleProfile(jsonData)) { if (items.length > 0 && items !== "undefined") { if (referencePropertyPanelData[feature[0]][0]) { - openReferencePropertyPanel(referenceJsonData.columns[feature[0]], getGraph, getDoubleHistogramChart) + openReferencePropertyPanel(referenceJsonData.columns[feature[0]], feature[0], getGraph, getDoubleHistogramChart, getBarChart, getPositiveNegative) } else { openProfilePropertyPanel(items, infType, getPropertyPanelGraph) } } else { - + } } } @@ -385,12 +641,28 @@ const $sidebarContentPadding = +$("#sidebar-content-single-profile").css("padding").replace('px','') * 2 const $sidebarContentHeight = $("#sidebar-content-single-profile").height() + $sidebarContentPadding const $sidebar = $(".sidebar") - + $sidebar.css("margin-bottom", `${$sidebarContentHeight}px`) } + function checkCurrentProfile(item, referenceItem) { + if (referenceJsonData && Object.values(referenceJsonData)) { + return referenceItem + } else { + return item + } + } + // Override and populate HTML element values function updateHtmlElementValues() { + $notifCircleContainer.addClass("d-none") + $dropdownArrowIcon.css("transform","rotate(180deg)") + $filterOptions.removeClass("d-none"); + + checkCurrentProfile(true, false) ? + $("#dif-from-ref").addClass("d-none"): + $("#dif-from-ref").removeClass("d-none") + sidebarContentHeight() $sidebarFeatureNameList.html(""); $tableMessage.addClass("d-none"); @@ -415,6 +687,13 @@ } }); + let diffFromRef = ""; + feature[1].frequentItemsElemString.forEach((frequentItemElemString, index) => { + if (selectedProfiles.includes(String(index))) { + diffFromRef += `
          ${Math.floor(Math.random() * 10)}
          `; + } + }); + let freaquentItemsElmString = ""; feature[1].frequentItemsElemString.forEach((frequentItemElemString, index) => { if (selectedProfiles.includes(String(index))) { @@ -515,6 +794,7 @@ const showButton = selectedProfiles.some( (profile) => profile !== null && feature[1].inferredType[profile].toLowerCase() !== "unknown", ); + const $tableRow = $( `
        • ` + +
          ` + + checkCurrentProfile(``, diffFromRef) + + `
          ` + freaquentItemsElmString + `
          ` + inferredTypeString + @@ -567,9 +849,9 @@ $tableRowButton.on( "click", openPropertyPanel.bind( - this, + this, propertyPanelData[feature[0]][0], - feature[1].inferredType[0].toLowerCase(), + feature[1].inferredType[0].toLowerCase(), feature ), ); @@ -583,8 +865,8 @@
        • -
          @@ -610,6 +892,10 @@ $featureCountDiscrete.html(countDiscrete); $featureCountNonDiscrete.html(countNonDiscrete); $featureCountUnknown.html(countUnknown); + $selectedProfile.html(formatLabelDate(+dataForRead.properties[0].dataTimestamp)); + if (checkCurrentProfile(false, true)) { + $selectedReferenceProfile.html(formatLabelDate(+dataForRead.properties[1].dataTimestamp)) + } } } @@ -653,15 +939,16 @@ if (!dataForRead.columns[tempFeatureName]) dataForRead.columns[tempFeatureName] = []; dataForRead.columns[tempFeatureName].push(feature[1]); if ( - referneceData && + referneceData && referneceData.columns[tempFeatureName].numberSummary ) { + dataForRead.properties.push(referenceJsonData.properties) const { - numberSummary, + numberSummary, frequentItems, ...referenceDataForRead } = dataForRead.columns[tempFeatureName][0] - dataForRead.columns[tempFeatureName].push({ + dataForRead.columns[tempFeatureName].push({ ...referenceDataForRead, referenceNumberSummary: referneceData.columns[tempFeatureName].numberSummary, referenceFrequentItems: referneceData.columns[tempFeatureName].frequentItems @@ -685,7 +972,7 @@ numOfProfilesBasedOnType, ); } - + function makeFeatureDataForAllProfilesToShowOnTable( featureDataForTableForAllProfiles, @@ -778,7 +1065,9 @@ axisX: index, }); }); + console.log("FrequentItems", tempFeatureValues); if (tempFeatureValues.referenceFrequentItems) { + console.log("referenceFrequentItems"); tempFeatureValues.referenceFrequentItems.items.forEach((item, index) => { featureDataForTableForAllProfiles[feature[0]].chartData[1].push({ axisY: item.estimate, @@ -850,8 +1139,19 @@ axisX: index, }); }); - } + } } + if(tempFeatureValues.referenceFrequentItems && + featureDataForTableForAllProfiles[feature[0]].inferredType[0] === "Discrete" + ){ + featureDataForTableForAllProfiles[feature[0]].chartData[1] = [] + tempFeatureValues.referenceFrequentItems.items.forEach((item, index) => { + featureDataForTableForAllProfiles[feature[0]].chartData[1].push({ + axisY: item.estimate, + axisX: index, + }); + }); + } iteration += 1; }); }); @@ -954,12 +1254,12 @@ jsonData = data; referenceJsonData = undefined $(".reference-table-head").addClass("d-none") - $(".wl-selected-profile").addClass("d-none") + $(".wl-selected-profile").addClass("d-none") $compareProfile.removeClass("d-none"); } else { referenceJsonData = data - $(".reference-table-head").removeClass("d-none") - $(".wl-selected-profile").removeClass("d-none") + $(".reference-table-head").removeClass("d-none") + $(".wl-selected-profile").removeClass("d-none") $(".wl-compare-profile").addClass("d-none") } @@ -983,8 +1283,8 @@ function checkedBoxes() { const item = Object.values($boxes).find( - function(value) { - return $('#' + $(value)[0].id).is(":checked") + function(value) { + return $('#' + $(value)[0].id).is(":checked") } ); @@ -993,6 +1293,28 @@ } } + $( window ).resize(function() { + const windowHeight = $(window).width() + console.log(windowHeight); + if (windowHeight < 1350 || windowHeight > 1680) { + $(".chart-box-chart > svg").css("width", 600) + } + if (windowHeight < 1680) { + $(".chart-box-chart > svg").css("width", 450) + } + }); + + $("#frequent-item-button").on("click", function () { + $(".frequent-items-body").html(` + ${frequentItemBoxElement('item')} + ${frequentItemBoxElement('item')} + ${frequentItemBoxElement('item')} + ${frequentItemBoxElement('item')} + `); + + $(".clickable-test-feature-body").html(``); + }) + $removeReferenceProfileButton.on("click", function () { referenceJsonData = undefined dataForRead = {}; @@ -1005,7 +1327,7 @@ $tableBody.html(""); updateHtmlElementValues(); renderList(); - $(".wl-selected-profile").addClass("d-none") + $(".wl-selected-profile").addClass("d-none") $(".wl-compare-profile").removeClass("d-none") }) @@ -1052,20 +1374,20 @@ sidebarContentHeight() $(".open-sign-up-text-notif-container").removeClass("d-none") }); - + $openSignUpText.on("click", function () { $signUpText.removeClass("d-none"); sidebarContentHeight() $(".open-sign-up-text-notif-container").addClass("d-none") }); - + $(document).on("click", ".js-list-group-item span", function (e) { const listItem = $("li>span"), listItemIndex = listItem.index(e.target), $listItemDot = $(".wl_list-item-dot")[listItemIndex], $arrowIcon = $(".wl_arrow-icon")[listItemIndex] - + listItem.css("padding-left", "15px") $(".wl_list-item-dot").removeClass("d-none") $(".wl_arrow-icon").addClass("d-none") @@ -1094,4 +1416,4 @@ handleSearch(); }); $(".wl-property-panel__button").on("click", handleClosePropertyPanel); -})(); \ No newline at end of file +})(); From da0dbf23bd30d298f30c3b817f7fbbbd9d1bf1f7 Mon Sep 17 00:00:00 2001 From: ssxcho Date: Mon, 10 Jan 2022 18:18:28 +0400 Subject: [PATCH 23/36] add diff from ref when reference profile consists. --- src/whylogs/viewer/index-hbs-cdn-all-in.html | 43 ++++++++++++++++---- 1 file changed, 34 insertions(+), 9 deletions(-) diff --git a/src/whylogs/viewer/index-hbs-cdn-all-in.html b/src/whylogs/viewer/index-hbs-cdn-all-in.html index 22ac7b2f3c..7908f08fb6 100644 --- a/src/whylogs/viewer/index-hbs-cdn-all-in.html +++ b/src/whylogs/viewer/index-hbs-cdn-all-in.html @@ -1198,7 +1198,7 @@
          Profile viewer for whylogs
          {{getProfileTimeStamp this}}
          • - Currently selected reference profile: + Currently selected reference profile: {{getReferenceProfileTimeStamp}}
          @@ -1283,7 +1283,7 @@
          Profile viewer for whylogs
          - +
          {{{getDiffFromRef this}}}
          {{{frequentItems this}}}
          {{{frequentItems this}}}
          {{inferredType this}}
          Hold on! :) histogramData = chartData(data) overlappedHistogramData = chartData(referenceData.columns[key.data.key]) } - console.log(histogramData); let yFormat, xFormat; const sizes = new GenerateChartParams(230, 600, histogramData) @@ -1680,7 +1684,6 @@

          Hold on! :)

          histogramData = chartData(datas) overlappedHistogramData = chartData(referenceData.columns[key.data.key]) } - console.log(histogramData); let yFormat, xFormat; const data = histogramData.map((profile, index) => { @@ -1778,7 +1781,6 @@

          Hold on! :)

          histogramData = chartData(datas) overlappedHistogramData = chartData(referenceData.columns[key.data.key]) } - console.log(histogramData); const data = histogramData.map((value, index) => { const difference = value.axisY - overlappedHistogramData[index].axisY const negativeValues = difference < 0 ? difference : 0 @@ -1890,6 +1892,12 @@

          Hold on! :)

          return JSON.stringify(context); }); + Handlebars.registerHelper("getDiffFromRef", function () { + if (profileFromCSVfile && profileFromCSVfile.columns) { + return Math.floor(Math.random() * 10) + } + }); + Handlebars.registerHelper("getReferenceProfileTimeStamp", function () { if (profileFromCSVfile && profileFromCSVfile.properties) { return formatLabelDate(+profileFromCSVfile.properties.dataTimestamp) @@ -2176,6 +2184,7 @@

          Hold on! :)

          const $referencefileInput = $("#reference-file-input"); const $filterOptions = $(".filter-options"); const $dropdownArrowIcon = $("#dropdown-arrow-icon") + const $notifCircleContainer = $(".notif-circle-container") // Global variables const activeTypes = { @@ -2188,6 +2197,7 @@

          Hold on! :)

          sidebarContentHeight() $filterOptions.removeClass("d-none"); $dropdownArrowIcon.css("transform","rotate(180deg)") + $notifCircleContainer.addClass("d-none") function handleSearch() { const featureListChildren = $sidebarFeatureNameList.children; @@ -2246,12 +2256,29 @@

          Hold on! :)

          500, ); } + const getReferenceProfile = () => { return {{{reference_profile}}} } + function checkCurrentProfile(item, referenceItem) { + const refData = getReferenceProfile() + if (refData && Object.values(refData)) { + return referenceItem + } else { + return item + } + } + if(checkCurrentProfile(true, false)) { + $("#diff-from-ref").addClass("d-none") + $(".diff-from-ref-table-cell").addClass("d-none") + $("#reference-profile-time-stamp").addClass("d-none"); + } else { + $("#diff-from-ref").removeClass("d-none") + $(".diff-from-ref-table-cell").removeClass("d-none") + $("#reference-profile-time-stamp").removeClass("d-none"); + } $( window ).resize(function() { const windowHeight = $(window).width() - console.log(windowHeight); if (windowHeight < 1350 || windowHeight > 1680) { $(".chart-box-chart > svg").css("width", 600) } @@ -2372,7 +2399,6 @@

          Hold on! :)

          $(document).ready(function() { const $signUpText = $(".sign-up-text"); - $signUpText.addClass("d-none"); sidebarContentHeight() }) @@ -2513,7 +2539,6 @@

          Hold on! :)

          $("#page-button").text("Categorical Data") categoricalDriftChart(getBarChart, getPositiveNegativeChart) } else { - console.log(getPositiveNegativeChart); $("#page-button").text("Numerical Data") numericalDriftChart(getDoubleHistogramChart) } From 8ea2d0ca8a257330eba3572af089ddfcc83612aa Mon Sep 17 00:00:00 2001 From: ssxcho Date: Mon, 10 Jan 2022 18:19:51 +0400 Subject: [PATCH 24/36] add diff from ref when reference profile consists. --- src/whylogs/viewer/index.html | 5 +++-- src/whylogs/viewer/js/whylogs-script.js | 6 +----- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/src/whylogs/viewer/index.html b/src/whylogs/viewer/index.html index 30c7870628..4e96ab1bb8 100644 --- a/src/whylogs/viewer/index.html +++ b/src/whylogs/viewer/index.html @@ -165,8 +165,8 @@
          2020-02-26 12:23:32 PM P
          - From 63a65dcfc4b10fea5b2ffe48fb631a2e9ba349a8 Mon Sep 17 00:00:00 2001 From: ssxcho Date: Tue, 11 Jan 2022 01:55:02 +0400 Subject: [PATCH 26/36] fix multi profile logic, fix css --- src/whylogs/viewer/css/whylogs-styles.css | 14 ++++--- src/whylogs/viewer/index-hbs-cdn-all-in.html | 43 +++++++++++++------- src/whylogs/viewer/index.html | 26 +++++++++++- src/whylogs/viewer/js/whylogs-script.js | 40 +++++++++++------- 4 files changed, 86 insertions(+), 37 deletions(-) diff --git a/src/whylogs/viewer/css/whylogs-styles.css b/src/whylogs/viewer/css/whylogs-styles.css index b62498e9e9..f0486f441e 100644 --- a/src/whylogs/viewer/css/whylogs-styles.css +++ b/src/whylogs/viewer/css/whylogs-styles.css @@ -452,6 +452,7 @@ a .wl-table-row--bottom-shadow { white-space: nowrap; overflow: hidden; font-style: italic; + text-align: center; color: var(--brandSecondary400); } .wl-table-cell__bedge { @@ -1048,10 +1049,6 @@ a .wl-table-row--bottom-shadow { pointer-events: none; } -.reference-profile-buttons { - padding-left: 20px; -} - .edit-button-wrap { padding-right: 5px; cursor: pointer; @@ -1074,13 +1071,18 @@ a .wl-table-row--bottom-shadow { } .remove-reference-profile-button { + display: flex; + align-items: center; + justify-content: center; border: 1px solid #6C757D; border-radius: 3px; - text-align: center; - width: 20px; cursor: pointer; } +.remove-reference-profile-button img { + padding: 3px +} + input::placeholder { color: var(--secondaryLight1000); } diff --git a/src/whylogs/viewer/index-hbs-cdn-all-in.html b/src/whylogs/viewer/index-hbs-cdn-all-in.html index 7908f08fb6..3d6e141b40 100644 --- a/src/whylogs/viewer/index-hbs-cdn-all-in.html +++ b/src/whylogs/viewer/index-hbs-cdn-all-in.html @@ -404,6 +404,7 @@ white-space: nowrap; overflow: hidden; font-style: italic; + text-align: center; color: var(--brandSecondary400); } .wl-table-cell__bedge { @@ -436,6 +437,15 @@ margin-bottom: 60px; } + .wl-compare-profile { + position: sticky; + left: 0; + display: flex; + padding: 18px; + justify-content: flex-end; + flex-direction: row-reverse; + } + .wl-property-panel__chart--single { padding-bottom: 17px; } @@ -1194,13 +1204,9 @@
          Profile viewer for whylogs
          features
          - Currently selected profile: + Profile time stamp: {{getProfileTimeStamp this}}
          -
          - Currently selected reference profile: - {{getReferenceProfileTimeStamp}} -
          @@ -1357,6 +1363,12 @@
          Profile viewer for whylogs
          +
          +
          +
          +
          Reference profile time stamp:
          + {{getReferenceProfileTimeStamp}} +
          @@ -1503,9 +1515,9 @@

          Hold on! :)

          //helper fun class GenerateChartParams { - constructor(height, width, data, bottomMargin=20) { + constructor(height, width, data, bottomMargin=20, topMargin=5) { this.MARGIN = { - TOP: 5, + TOP: topMargin, RIGHT: 5, BOTTOM: bottomMargin, LEFT: 55, @@ -1622,7 +1634,7 @@

          Hold on! :)

          yFormat = yScale.tickFormat(100, yFormat); svgEl.append("g") - .attr("transform", `translate(${MARGIN.LEFT},0)`) + .attr("transform", `translate(${MARGIN.LEFT}, ${MARGIN.TOP})`) .call(yAxis) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line") @@ -1694,7 +1706,7 @@

          Hold on! :)

          } }).slice(0, 20) - const sizes = new GenerateChartParams(230, 600, histogramData) + const sizes = new GenerateChartParams(230, 600, histogramData, undefined, 1) const { MARGIN, SVG_WIDTH, @@ -1720,7 +1732,7 @@

          Hold on! :)

          yFormat = yScale.tickFormat(100, yFormat); svgEl.append("g") - .attr("transform", `translate(${MARGIN.LEFT},0)`) + .attr("transform", `translate(${MARGIN.LEFT}, ${MARGIN.TOP})`) .call(yAxis) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line") @@ -1790,7 +1802,7 @@

          Hold on! :)

          let yFormat, xFormat; - const sizes = new GenerateChartParams(230, 600, data) + const sizes = new GenerateChartParams(230, 600, histogramData, undefined, 1) const { MARGIN, SVG_WIDTH, @@ -1803,7 +1815,7 @@

          Hold on! :)

          const y0 = Math.max(Math.abs(d3.min(data)), Math.abs(d3.max(data))); const yScale = d3.scaleLinear() - .domain([-y0, y0]) + .domain([-y0 * 1.02, y0 * 1.02]) .range([CHART_HEIGHT,0]) const xScale = d3.scaleBand() @@ -1816,7 +1828,7 @@

          Hold on! :)

          yFormat = yScale.tickFormat(100, yFormat); svgEl.append("g") - .attr("transform", `translate(${MARGIN.LEFT},0)`) + .attr("transform", `translate(${MARGIN.LEFT}, ${MARGIN.TOP})`) .call(yAxis) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line") @@ -2001,7 +2013,7 @@

          Hold on! :)

          }); Handlebars.registerHelper("thirdQuantile", function (column) { - if (column.numberSummary && column.numberSummary.quantiles.quantileValues) { + if (column.numberSummary && column.numberSummary.quantiles.quantileValueregisterHandlebarHelperFunctionss) { return fixNumberTo(column.numberSummary.quantiles.quantileValues[5]); } return "-"; @@ -2271,10 +2283,12 @@

          Hold on! :)

          $("#diff-from-ref").addClass("d-none") $(".diff-from-ref-table-cell").addClass("d-none") $("#reference-profile-time-stamp").addClass("d-none"); + $("#compare-profile").addClass("d-none"); } else { $("#diff-from-ref").removeClass("d-none") $(".diff-from-ref-table-cell").removeClass("d-none") $("#reference-profile-time-stamp").removeClass("d-none"); + $("#compare-profile").removeClass("d-none"); } $( window ).resize(function() { @@ -2518,6 +2532,7 @@

          Hold on! :)

          const $pagesButton = $pagesButtons[0]; let chipString = ""; + $(".clickable-test-feature-wrap").css("height", $( window ).height()) $pagesButtons.removeClass("activ-pages-button") $($pagesButton).addClass("activ-pages-button") $tableContent.addClass("d-none") diff --git a/src/whylogs/viewer/index.html b/src/whylogs/viewer/index.html index 819b5b3389..e6b83d99df 100644 --- a/src/whylogs/viewer/index.html +++ b/src/whylogs/viewer/index.html @@ -86,6 +86,10 @@
          Profile viewer for whylogs
          Profile time stamp:
          2020-02-26 12:23:32 PM PST
          +
          + Currently selected profile: + +
          @@ -246,9 +250,11 @@
          Compare profile to reference p
          -
          +
          +
          +
          Reference profile
          -
          +
          @@ -271,10 +277,26 @@
          Reference profile
          +
          Reference profile time stamp:
          2020-02-26 12:23:32 PM PST
          +
          +
          +
          +

          58

          +

          Summary

          +
          +
          +

          54

          +

          Summary

          +
          +
          +

          131

          +

          Summary

          +
          +
          diff --git a/src/whylogs/viewer/js/whylogs-script.js b/src/whylogs/viewer/js/whylogs-script.js index 71a6aff615..0e2391f54d 100644 --- a/src/whylogs/viewer/js/whylogs-script.js +++ b/src/whylogs/viewer/js/whylogs-script.js @@ -167,9 +167,9 @@ ` class GenerateChartParams { - constructor(height, width, data, bottomMargin=20) { + constructor(height, width, data, bottomMargin=20, topMargin=5) { this.MARGIN = { - TOP: 5, + TOP: topMargin, RIGHT: 5, BOTTOM: bottomMargin, LEFT: 55, @@ -247,11 +247,11 @@ } = sizes const xAxis = d3.axisBottom(xScale).ticks(SVG_WIDTH / 80, xFormat).tickSizeOuter(0); - const yAxis = d3.axisLeft(yScale).ticks(SVG_HEIGHT / 40, yFormat); + const yAxis = d3.axisLeft(yScale).ticks(CHART_HEIGHT / 40, yFormat); yFormat = yScale.tickFormat(100, yFormat); svgEl.append("g") - .attr("transform", `translate(${MARGIN.LEFT},0)`) + .attr("transform", `translate(${MARGIN.LEFT}, ${MARGIN.TOP})`) .call(yAxis) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line") @@ -316,7 +316,7 @@ } }).slice(0, 20) - const sizes = new GenerateChartParams(230, 600, histogramData) + const sizes = new GenerateChartParams(230, 600, histogramData, undefined, 1) const { MARGIN, SVG_WIDTH, @@ -339,7 +339,7 @@ yFormat = yScale.tickFormat(100, yFormat); svgEl.append("g") - .attr("transform", `translate(${MARGIN.LEFT},0)`) + .attr("transform", `translate(${MARGIN.LEFT}, ${MARGIN.TOP})`) .call(yAxis) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line") @@ -397,12 +397,12 @@ const difference = value.axisY - overlappedHistogramData[index].axisY const negativeValues = difference < 0 ? difference : 0 return [+value.axisY, negativeValues] - }).slice(0, 20).flat() + }).flat().slice(0, 20) let yFormat, xFormat; - const sizes = new GenerateChartParams(230, 600, data) + const sizes = new GenerateChartParams(230, 600, histogramData, undefined, 1) const { MARGIN, SVG_WIDTH, @@ -415,7 +415,7 @@ const y0 = Math.max(Math.abs(d3.min(data)), Math.abs(d3.max(data))); const yScale = d3.scaleLinear() - .domain([-y0, y0]) + .domain([-y0 * 1.02, y0 * 1.02]) .range([CHART_HEIGHT,0]) const xScale = d3.scaleBand() @@ -424,11 +424,11 @@ .padding([0.1]); const xAxis = d3.axisBottom(xScale).ticks(SVG_WIDTH / 80, xFormat).tickSizeOuter(0); - const yAxis = d3.axisLeft(yScale).ticks(SVG_HEIGHT / 40, yFormat); + const yAxis = d3.axisLeft(yScale).ticks(CHART_HEIGHT / 40, yFormat); yFormat = yScale.tickFormat(100, yFormat); svgEl.append("g") - .attr("transform", `translate(${MARGIN.LEFT},0)`) + .attr("transform", `translate(${MARGIN.LEFT}, ${MARGIN.TOP})`) .call(yAxis) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line") @@ -568,7 +568,8 @@ let getGraph = null, getDoubleHistogramChart = null, getBarChart = null, - getPositiveNegative = null; + getPositiveNegative = null, + getPropertyPanelGraph = null; if (referencePropertyPanelData[feature[0]][0]) { items = referencePropertyPanelData[feature[0]][0] @@ -577,7 +578,8 @@ getBarChart = generateBarChart(feature[1].chartData[0], feature[1].chartData[1]), getPositiveNegative = generatePositiveNegativeChart(feature[1].chartData[0], feature[1].chartData[1]) } - const getPropertyPanelGraph = getPropertyPanelGraphHtml(jsonData.columns[feature[0]], feature[0]) + + getPropertyPanelGraph = getPropertyPanelGraphHtml(jsonData.columns[feature[0]], feature[0]) if (checkJSONValidityForMultiProfile(jsonData) || checkJSONValidityForSingleProfile(jsonData)) { if (items.length > 0 && items !== "undefined") { @@ -1249,13 +1251,21 @@ const lines = e.target.result; let data = JSON.parse(lines); if (inputId === "file-input") { - jsonData = data; + if (checkJSONValidityForMultiProfile(data)) { + jsonData = data[Object.keys(data)[0]] + } else { + jsonData = data; + } referenceJsonData = undefined $(".reference-table-head").addClass("d-none") $(".wl-selected-profile").addClass("d-none") $compareProfile.removeClass("d-none"); } else { - referenceJsonData = data + if (checkJSONValidityForMultiProfile(data)) { + referenceJsonData = data[Object.keys(data)[0]] + } else { + referenceJsonData = data; + } $(".reference-table-head").removeClass("d-none") $(".wl-selected-profile").removeClass("d-none") $(".wl-compare-profile").addClass("d-none") From b7f5aa19f362b782a48ca4cec6da98875666bcf8 Mon Sep 17 00:00:00 2001 From: Perch2005 Date: Tue, 11 Jan 2022 19:11:31 +0300 Subject: [PATCH 27/36] fix data of Frequent items table cell --- src/whylogs/viewer/css/whylogs-styles.css | 5 +++++ src/whylogs/viewer/index-hbs-cdn-all-in.html | 5 +++++ src/whylogs/viewer/index.html | 2 +- src/whylogs/viewer/js/whylogs-script.js | 5 +++-- 4 files changed, 14 insertions(+), 3 deletions(-) diff --git a/src/whylogs/viewer/css/whylogs-styles.css b/src/whylogs/viewer/css/whylogs-styles.css index f0486f441e..5facb8f92f 100644 --- a/src/whylogs/viewer/css/whylogs-styles.css +++ b/src/whylogs/viewer/css/whylogs-styles.css @@ -1175,6 +1175,11 @@ input::placeholder { flex-direction: column; } + +.text-align-center { + text-align: center; +} + @media screen and (min-width: 1000px) { .desktop-content { display: block; diff --git a/src/whylogs/viewer/index-hbs-cdn-all-in.html b/src/whylogs/viewer/index-hbs-cdn-all-in.html index 3d6e141b40..5790d56bd7 100644 --- a/src/whylogs/viewer/index-hbs-cdn-all-in.html +++ b/src/whylogs/viewer/index-hbs-cdn-all-in.html @@ -1103,6 +1103,11 @@ flex-direction: column; } + + .text-align-center { + text-align: center; + } + @media screen and (min-width: 1000px) { .desktop-content { display: block; diff --git a/src/whylogs/viewer/index.html b/src/whylogs/viewer/index.html index e6b83d99df..fd58b3ee18 100644 --- a/src/whylogs/viewer/index.html +++ b/src/whylogs/viewer/index.html @@ -306,7 +306,7 @@
          2020-02-26 12:
          Reference
          Diff from ref
          -
          Frequent items
          +
          Frequent items
          Inf. feature type
          Total count
          Null fraction
          diff --git a/src/whylogs/viewer/js/whylogs-script.js b/src/whylogs/viewer/js/whylogs-script.js index 0e2391f54d..ed5d26e5e2 100644 --- a/src/whylogs/viewer/js/whylogs-script.js +++ b/src/whylogs/viewer/js/whylogs-script.js @@ -500,6 +500,7 @@ const $pagesButton = $pagesButtons[0]; let chipString = ""; + $(".clickable-test-feature-wrap").css("height", $( window ).height()) $pagesButtons.removeClass("activ-pages-button") $($pagesButton).addClass("activ-pages-button") $tableContent.addClass("d-none") @@ -699,7 +700,7 @@ let freaquentItemsElmString = ""; feature[1].frequentItemsElemString.forEach((frequentItemElemString, index) => { if (selectedProfiles.includes(String(index))) { - freaquentItemsElmString += `
          ${frequentItemElemString}
          `; + freaquentItemsElmString += `
          ${frequentItemElemString}
          `; } }); let inferredTypeString = ""; @@ -816,7 +817,7 @@
          ` + checkCurrentProfile(``, diffFromRef) + - `
          ` + + `
          ` + freaquentItemsElmString + `
          ` + inferredTypeString + From c736a77bdf608d19f25421a50730fb47c01e249b Mon Sep 17 00:00:00 2001 From: Perch2005 Date: Wed, 12 Jan 2022 18:48:25 +0300 Subject: [PATCH 28/36] Shows alert when the key of profile data is not matched to reference profile data. --- src/whylogs/viewer/js/whylogs-script.js | 113 +++++++++++------------- 1 file changed, 53 insertions(+), 60 deletions(-) diff --git a/src/whylogs/viewer/js/whylogs-script.js b/src/whylogs/viewer/js/whylogs-script.js index ed5d26e5e2..89dbc63d1c 100644 --- a/src/whylogs/viewer/js/whylogs-script.js +++ b/src/whylogs/viewer/js/whylogs-script.js @@ -93,7 +93,7 @@ } } - if (!checkJSONValidityForMultiProfile(jsonData) && checkJSONValidityForMultiProfile(jsonData)) { + if (jsonData) { for (let i = 0; i < featureListChildren.length; i++) { const name = featureListChildren[i].dataset.featureName.toLowerCase(); const type = featureListChildren[i].dataset.inferredType.toLowerCase(); @@ -165,6 +165,7 @@ ${text}
          ` + let chartWidth = 600; class GenerateChartParams { constructor(height, width, data, bottomMargin=20, topMargin=5) { @@ -233,7 +234,8 @@ function generateDoubleHistogramChart(histogramData, overlappedHistogramData) { let yFormat, xFormat; - const sizes = new GenerateChartParams(230, 600, histogramData) + + const sizes = new GenerateChartParams(230, chartWidth, histogramData) const { MARGIN, SVG_WIDTH, @@ -316,7 +318,7 @@ } }).slice(0, 20) - const sizes = new GenerateChartParams(230, 600, histogramData, undefined, 1) + const sizes = new GenerateChartParams(230, chartWidth, histogramData, undefined, 1) const { MARGIN, SVG_WIDTH, @@ -402,7 +404,7 @@ let yFormat, xFormat; - const sizes = new GenerateChartParams(230, 600, histogramData, undefined, 1) + const sizes = new GenerateChartParams(230, chartWidth, histogramData, undefined, 1) const { MARGIN, SVG_WIDTH, @@ -582,7 +584,7 @@ getPropertyPanelGraph = getPropertyPanelGraphHtml(jsonData.columns[feature[0]], feature[0]) - if (checkJSONValidityForMultiProfile(jsonData) || checkJSONValidityForSingleProfile(jsonData)) { + if (jsonData) { if (items.length > 0 && items !== "undefined") { if (referencePropertyPanelData[feature[0]][0]) { openReferencePropertyPanel(referenceJsonData.columns[feature[0]], feature[0], getGraph, getDoubleHistogramChart, getBarChart, getPositiveNegative) @@ -847,7 +849,8 @@ quantilesMaxString + `
          `, ); - if (checkJSONValidityForMultiProfile(jsonData) || checkJSONValidityForSingleProfile(jsonData)) { + + if (jsonData) { const $tableRowButton = $(``); $tableRowButton.on( "click", @@ -878,7 +881,8 @@ `, ); }); - if (!checkJSONValidityForMultiProfile(jsonData)) { + + if (jsonData) { const countDiscrete = Object.values(numOfProfilesBasedOnType).reduce( (acc, feature) => (acc += feature.discrete.length), 0, @@ -896,7 +900,7 @@ $featureCountNonDiscrete.html(countNonDiscrete); $featureCountUnknown.html(countUnknown); $selectedProfile.html(formatLabelDate(+dataForRead.properties[0].dataTimestamp)); - if (checkCurrentProfile(false, true)) { + if (checkCurrentProfile(false, true) && dataForRead.properties[1]) { $selectedReferenceProfile.html(formatLabelDate(+dataForRead.properties[1].dataTimestamp)) } } @@ -941,34 +945,33 @@ } if (!dataForRead.columns[tempFeatureName]) dataForRead.columns[tempFeatureName] = []; dataForRead.columns[tempFeatureName].push(feature[1]); - if ( - referneceData && - referneceData.columns[tempFeatureName].numberSummary - ) { - dataForRead.properties.push(referenceJsonData.properties) - const { - numberSummary, - frequentItems, - ...referenceDataForRead - } = dataForRead.columns[tempFeatureName][0] - dataForRead.columns[tempFeatureName].push({ - ...referenceDataForRead, - referenceNumberSummary: referneceData.columns[tempFeatureName].numberSummary, - referenceFrequentItems: referneceData.columns[tempFeatureName].frequentItems - }) - } + if ( + referneceData && + referneceData.columns[tempFeatureName].numberSummary + ) { + dataForRead.properties.push(referenceJsonData.properties) + const { + numberSummary, + frequentItems, + ...referenceDataForRead + } = dataForRead.columns[tempFeatureName][0] + dataForRead.columns[tempFeatureName].push({ + ...referenceDataForRead, + referenceNumberSummary: referneceData.columns[tempFeatureName].numberSummary, + referenceFrequentItems: referneceData.columns[tempFeatureName].frequentItems + }) + } }); return dataForRead } function mapProfileDataToReadData(jsonData, dataForRead, referneceData) { - if (checkJSONValidityForMultiProfile(jsonData)) { - const multiReferenceData = referneceData ? Object.values(referneceData)[0] : referneceData - dataForRead = getDataForRead(dataForRead, Object.values(jsonData)[0], multiReferenceData) - } else { + try { dataForRead = getDataForRead(dataForRead, jsonData, referneceData) + } catch (e) { + alert("You selected wrong reference profile. Please select again.") + removeReferenceProfile() } - makeFeatureDataForAllProfilesToShowOnTable( featureDataForTableForAllProfiles, dataForRead, @@ -1217,6 +1220,22 @@ } } + function removeReferenceProfile() { + referenceJsonData = undefined + dataForRead = {}; + featureDataForTableForAllProfiles = {}; + numOfProfilesBasedOnType = {}; + + $(".reference-table-head").addClass("d-none") + + mapProfileDataToReadData(jsonData, dataForRead, referenceJsonData); + $tableBody.html(""); + updateHtmlElementValues(); + renderList(); + $(".wl-selected-profile").addClass("d-none") + $(".wl-compare-profile").removeClass("d-none") + } + function loadFile(inputId, jsonForm) { isActiveInferredType = {}; $featureFilterInput.html(""); @@ -1253,17 +1272,17 @@ let data = JSON.parse(lines); if (inputId === "file-input") { if (checkJSONValidityForMultiProfile(data)) { - jsonData = data[Object.keys(data)[0]] + jsonData = Object.values(data)[0] } else { jsonData = data; } - referenceJsonData = undefined + removeReferenceProfile() $(".reference-table-head").addClass("d-none") $(".wl-selected-profile").addClass("d-none") $compareProfile.removeClass("d-none"); } else { if (checkJSONValidityForMultiProfile(data)) { - referenceJsonData = data[Object.keys(data)[0]] + referenceJsonData = Object.values(data)[0] } else { referenceJsonData = data; } @@ -1271,9 +1290,8 @@ $(".wl-selected-profile").removeClass("d-none") $(".wl-compare-profile").addClass("d-none") } - mapProfileDataToReadData(jsonData, dataForRead, referenceJsonData); - if (checkJSONValidityForSingleProfile(data) || checkJSONValidityForMultiProfile(data)) { + if (data) { $(".compare-select").addClass("d-none"); $multiProfileWrap.removeClass("d-none"); selectedProfiles[0] = "0"; @@ -1302,16 +1320,6 @@ } } - $( window ).resize(function() { - const windowHeight = $(window).width() - if (windowHeight < 1350 || windowHeight > 1680) { - $(".chart-box-chart > svg").css("width", 600) - } - if (windowHeight < 1680) { - $(".chart-box-chart > svg").css("width", 450) - } - }); - $("#frequent-item-button").on("click", function () { $(".frequent-items-body").html(` ${frequentItemBoxElement('item')} @@ -1323,22 +1331,7 @@ $(".clickable-test-feature-body").html(``); }) - $removeReferenceProfileButton.on("click", function () { - referenceJsonData = undefined - dataForRead = {}; - featureDataForTableForAllProfiles = {}; - numOfProfilesBasedOnType = {}; - - $(".reference-table-head").addClass("d-none") - - mapProfileDataToReadData(jsonData, dataForRead, referenceJsonData); - $tableBody.html(""); - updateHtmlElementValues(); - renderList(); - $(".wl-selected-profile").addClass("d-none") - $(".wl-compare-profile").removeClass("d-none") - - }) + $removeReferenceProfileButton.on("click", removeReferenceProfile) $(document).on("click", ".page-button", function(e) { const $pagesButtons = $(".page-button"), From 392e868eda2375da1588902434990d6cebba9e00 Mon Sep 17 00:00:00 2001 From: Perch2005 Date: Tue, 25 Jan 2022 16:39:19 +0300 Subject: [PATCH 29/36] add frequent items in reference property panel --- src/whylogs/viewer/css/whylogs-styles.css | 35 +++- src/whylogs/viewer/index-hbs-cdn-all-in.html | 210 +++++++++++++------ src/whylogs/viewer/js/whylogs-script.js | 152 ++++++++++---- 3 files changed, 291 insertions(+), 106 deletions(-) diff --git a/src/whylogs/viewer/css/whylogs-styles.css b/src/whylogs/viewer/css/whylogs-styles.css index 5facb8f92f..f5c06a4119 100644 --- a/src/whylogs/viewer/css/whylogs-styles.css +++ b/src/whylogs/viewer/css/whylogs-styles.css @@ -456,6 +456,8 @@ a .wl-table-row--bottom-shadow { color: var(--brandSecondary400); } .wl-table-cell__bedge { + display: flex; + align-items: center; height: 24px; margin: 1px; padding: 2px 8px; @@ -1145,8 +1147,8 @@ input::placeholder { } .frequent-item-box { + padding: 20px; width: 90%; - height: 50px; align-items: flex-start; display: flex; justify-content: center; @@ -1157,12 +1159,14 @@ input::placeholder { } .frequent-item-box-wrap { + width: 100%; display: flex; justify-content: center; } .frequent-item-box-to-title { - padding-left: 20px; + margin-left: 30px; + margin-bottom: 20px; font-family: Asap; font-weight: bold; font-size: 16px; @@ -1175,11 +1179,36 @@ input::placeholder { flex-direction: column; } - .text-align-center { text-align: center; } +.fequent-items-wrap { + width: 100%; +} + +.svg-container { + display: inline-block; + position: relative; + width: 85%; + padding-bottom: 34%; + vertical-align: top; + overflow: hidden; +} +.svg-content-responsive { + display: inline-block; + position: absolute; + left: 0; +} + +.graph-svg-container { + padding-bottom: 12%; +} + +.reference-table-head { + min-width: 305px; +} + @media screen and (min-width: 1000px) { .desktop-content { display: block; diff --git a/src/whylogs/viewer/index-hbs-cdn-all-in.html b/src/whylogs/viewer/index-hbs-cdn-all-in.html index 5790d56bd7..94aa4a62d7 100644 --- a/src/whylogs/viewer/index-hbs-cdn-all-in.html +++ b/src/whylogs/viewer/index-hbs-cdn-all-in.html @@ -1108,6 +1108,47 @@ text-align: center; } + .frequent-item-box { + padding: 20px; + width: 90%; + align-items: flex-start; + display: flex; + justify-content: center; + flex-direction: column; + border: 2px solid #EBF2F3; + background: #FFF; + border-radius: 4px; + } + + .frequent-item-box-wrap { + width: 100%; + display: flex; + justify-content: center; + } + + .frequent-item-box-to-title { + margin-left: 30px; + margin-bottom: 20px; + font-family: Asap; + font-weight: bold; + font-size: 16px; + line-height: 16px; + color: #4F595B; + } + + .frequent-items-body { + display: flex; + flex-direction: column; + } + + .text-align-center { + text-align: center; + } + + .fequent-items-wrap { + width: 100%; + } + @media screen and (min-width: 1000px) { .desktop-content { display: block; @@ -1363,7 +1404,7 @@
          Profile viewer for whylogs
          -
          +
          @@ -1380,7 +1421,7 @@
          Referenc
          -
          Feature
          +
          Feature
          Reference
          Diff from ref
          @@ -1426,8 +1467,8 @@

          {{@key}}

          - {{{getGraphHtml this}}} - {{{getReferenceGraphHtml this}}} + {{{getGraphHtml this}}} + {{{getReferenceGraphHtml this}}}
          @@ -2120,7 +2161,6 @@

          Hold on! :)

          `
          ${!chartValue ? chartTitle : ""}${chart}
          `; const histChart = (chart) => `
          Histogram Data
          ${chart}
          `; - if (column.numberSummary) { if (column.frequentItems && column.frequentItems.items) { column.frequentItems.items.forEach((item, index) => { @@ -2296,27 +2336,6 @@

          Hold on! :)

          $("#compare-profile").removeClass("d-none"); } - $( window ).resize(function() { - const windowHeight = $(window).width() - if (windowHeight < 1350 || windowHeight > 1680) { - $(".chart-box-chart > svg").css("width", 600) - } - if (windowHeight < 1680) { - $(".chart-box-chart > svg").css("width", 450) - } - }); - - $("#frequent-item-button").on("click", function () { - $(".frequent-items-body").html(` - ${frequentItemBoxElement('item')} - ${frequentItemBoxElement('item')} - ${frequentItemBoxElement('item')} - ${frequentItemBoxElement('item')} - `); - - $(".clickable-test-feature-body").html(``); - }) - $featureSearch.addEventListener( "keyup", debounce((event) => { @@ -2435,22 +2454,27 @@

          Hold on! :)

          $(listItem[listItemIndex]).css("padding-left", "8px") }) + const chipElement = (chip) => `${chip}`; + const chipElementTableData = (value) => `${chipElement(value)}`; + const chartBoxElement = (chartTitle, chart) => `
          ${chartTitle}
          -
          ${chart}
          +
          ${chart}
          ` - const frequentItemBoxElement = (chartTitle) => ` -
          -
          -
          ${chartTitle}
          + const frequentItemBoxElement = (chartTitle, items) => ` +
          +
          + + ${items} +
          -
          - ` +
          + ` const colorsForDistingushingCharts = (color, text) => `
          @@ -2471,7 +2495,6 @@

          Hold on! :)

          ` $(".clickable-test-feature-body").html(` ${chartBoxElement(colorsForDistingushingChartHTMLElement, getDoubleHistogramChart)} - ${chartBoxElement('', '')} `); } @@ -2484,7 +2507,17 @@

          Hold on! :)

          const getReferenceProfile = () => { return {{{reference_profile}}} } - function openReferencePropertyPanel( + function getProfileCharts(jsonData, key, getDoubleHistogramChart, getBarChart, getPositiveNegative) { + if (jsonData.numberSummary.isDiscrete) { + $("#page-button").text("Categorical Data") + categoricalDriftChart(getBarChart, getPositiveNegative) + } else { + $("#page-button").text("Numerical Data") + numericalDriftChart(getDoubleHistogramChart) + } + } + + function openProfilePropertyPanel( chart, propertyPanelData, infType @@ -2518,12 +2551,29 @@

          Hold on! :)

          $(".wl-table-wrap").addClass("wl-table-wrap--narrow"); } - function openProfilePropertyPanel( + function sortWithIndeces(toSort) { + for (let i = 0; i < toSort.length; i++) { + toSort[i] = [toSort[i], i]; + } + toSort.sort((left, right) => { + return right[0] < left[0] ? -1 : 1; + }); + toSort.sortIndices = []; + for (let j = 0; j < toSort.length; j++) { + toSort.sortIndices.push(toSort[j][1]); + toSort[j] = toSort[j][0]; + } + return toSort; + } + getBarChart, getPositiveNegativeChart, getDoubleHistogramChart, chart, - feature + feature, + items, + referenceItems, + key ) { const chartInfoItem = (drift, driftName) => `
          @@ -2535,38 +2585,70 @@

          Hold on! :)

          const $clickableTestFeatureWrap = $(".clickable-test-feature-wrap"); const $pagesButtons = $(".page-button"); const $pagesButton = $pagesButtons[0]; - let chipString = ""; + let chipString = "", + frequentItemString = "", + referenceFrequentItemString = ""; - $(".clickable-test-feature-wrap").css("height", $( window ).height()) $pagesButtons.removeClass("activ-pages-button") $($pagesButton).addClass("activ-pages-button") $tableContent.addClass("d-none") $clickableTestFeatureWrap.removeClass("d-none") + const sortedItems = items.map((item) => +Object.values(item)[0]) + sortWithIndeces(sortedItems).sortIndices.forEach( + (item) => { + frequentItemString += ` + ${frequentItemBoxElement('',chipElementTableData(items[item].value))} + ` + referenceFrequentItemString += ` + ${frequentItemBoxElement('',chipElementTableData(referenceItems[item].value))} + ` + } + ); + $("#page-button").on("click", function () { - if (feature.numberSummary.isDiscrete) { - $("#page-button").text("Categorical Data") - categoricalDriftChart(getBarChart, getPositiveNegativeChart) - } else { - $("#page-button").text("Numerical Data") - numericalDriftChart(getDoubleHistogramChart) - } + getProfileCharts( + feature, + feature[0], + getDoubleHistogramChart, + getBarChart, + getPositiveNegativeChart + ) $(".frequent-items-body").html(``); }) - if (feature.numberSummary.isDiscrete) { - $("#page-button").text("Categorical Data") - categoricalDriftChart(getBarChart, getPositiveNegativeChart) - } else { - $("#page-button").text("Numerical Data") - numericalDriftChart(getDoubleHistogramChart) - } + getProfileCharts( + feature, + feature[0], + getDoubleHistogramChart, + getBarChart, + getPositiveNegativeChart + ) $(".frequent-items-body").html(``); + $("#frequent-item-button").on("click", function () { + $(".frequent-items-body").html(` +
          +
          +
          + items +
          + ${frequentItemString} +
          +
          +
          + reference profile items +
          + ${referenceFrequentItemString} +
          +
          + `); + + $(".clickable-test-feature-body").html(``); + }) $("#chart").html(chart); chipString += ` - ${chartInfoItem(fixNumberTo(feature.numberSummary.stddev), "Drift from ref")} ${chartInfoItem(feature.numberSummary.count.toString(), "Total Count")} ${chartInfoItem(fixNumberTo(feature.numberSummary.mean), "Mean")} ` @@ -2607,27 +2689,32 @@

          Hold on! :)

          getBarChart, getPositiveNegativeChart ) { + $("#compare-profile").addClass("d-none") let profileColumns = null; let feature = JSON.parse(column); + let referenceFeature, + referencePropertyPanelData; const profileFromCSVfile = getReferenceProfile(); if (profileFromCSVfile) { - profileColumns = profileFromCSVfile.columns[key] - feature = profileColumns + referenceFeature = profileFromCSVfile.columns[key] + referencePropertyPanelData = getPropertyPanelData(referenceFeature); } let propertyPanelData = getPropertyPanelData(feature); - if (profileFromCSVfile && feature.numberSummary) { - openProfilePropertyPanel( + openReferencePropertyPanel( getBarChart, getPositiveNegativeChart, getDoubleHistogramChart, chart, - feature + feature, + propertyPanelData, + referencePropertyPanelData, + key ) } else { - openReferencePropertyPanel( + openProfilePropertyPanel( chart, propertyPanelData, infType @@ -2638,7 +2725,8 @@

          Hold on! :)

          function closeFeatureHeading() { const $tableContent = $("#table-content") const $clickableTestFeatureWrap = $(".clickable-test-feature-wrap") - + + $("#compare-profile").remove("d-none") $tableContent.removeClass("d-none") $clickableTestFeatureWrap.addClass("d-none") } diff --git a/src/whylogs/viewer/js/whylogs-script.js b/src/whylogs/viewer/js/whylogs-script.js index 89dbc63d1c..a74ffcd04e 100644 --- a/src/whylogs/viewer/js/whylogs-script.js +++ b/src/whylogs/viewer/js/whylogs-script.js @@ -142,20 +142,25 @@ ); } + const chipElement = (chip) => `${chip}`; + const chipElementTableData = (value) => `${chipElement(value)}`; + const chartBoxElement = (chartTitle, chart) => `
          ${chartTitle}
          -
          ${chart}
          +
          ${chart}
          ` - const frequentItemBoxElement = (chartTitle) => ` + const frequentItemBoxElement = (chartTitle, items) => `
          -
          -
          ${chartTitle}
          -
          +
          + + ${items} + +
          ` @@ -489,8 +494,32 @@ `); } - function openReferencePropertyPanel(items, key, chart, getDoubleHistogramChart, getBarChart, getPositiveNegative) { + function sortWithIndeces(toSort) { + for (let i = 0; i < toSort.length; i++) { + toSort[i] = [toSort[i], i]; + } + toSort.sort((left, right) => { + return right[0] < left[0] ? -1 : 1; + }); + toSort.sortIndices = []; + for (let j = 0; j < toSort.length; j++) { + toSort.sortIndices.push(toSort[j][1]); + toSort[j] = toSort[j][0]; + } + return toSort; + } + const getProfileCharts = (key, getDoubleHistogramChart, getBarChart, getPositiveNegative) => { + if (jsonData.columns[key].numberSummary.isDiscrete) { + $("#page-button").text("Categorical Data") + categoricalDriftChart(getBarChart, getPositiveNegative) + } else { + $("#page-button").text("Numerical Data") + numericalDriftChart(getDoubleHistogramChart) + } + } + + function openReferencePropertyPanel(referenceItems, items, profileItems, key, chart, getDoubleHistogramChart, getBarChart, getPositiveNegative) { const chartInfoItem = (drift, driftName) => `
          ${drift}
          @@ -500,35 +529,74 @@ const $clickableTestFeatureWrap = $(".clickable-test-feature-wrap"); const $pagesButtons = $(".page-button"); const $pagesButton = $pagesButtons[0]; - let chipString = ""; - - $(".clickable-test-feature-wrap").css("height", $( window ).height()) + let chipString = "", + frequentItemString = "", + referenceFrequentItemString = ""; + $pagesButtons.removeClass("activ-pages-button") $($pagesButton).addClass("activ-pages-button") $tableContent.addClass("d-none") $clickableTestFeatureWrap.removeClass("d-none") - $("#page-button").on("click", function () { - if (jsonData.columns[key].numberSummary.isDiscrete) { - $("#page-button").text("Categorical Data") - categoricalDriftChart(getBarChart, getPositiveNegative) - } else { - $("#page-button").text("Numerical Data") - numericalDriftChart(getDoubleHistogramChart) + // frequentItemString += `${items.forEach((item) => {chipElementTableData(item.value)})}` + const sortedItems = items.map((item) => +Object.values(item)[0]) + // .sort((a,b) => +b.value - (+a.value)) + sortWithIndeces(sortedItems).sortIndices.forEach( + (item) => { + frequentItemString += ` + ${frequentItemBoxElement('',chipElementTableData(items[item].value))} + ` + referenceFrequentItemString += ` + ${frequentItemBoxElement('',chipElementTableData(referenceItems[item].value))} + ` } + ); + $("#page-button").on("click", function () { + getProfileCharts( + key, + getDoubleHistogramChart, + getBarChart, + getPositiveNegative + ) + $(".clickable-test-feature-body").removeClass("d-none"); $(".frequent-items-body").html(``); + referenceProfilePanelHeight() }) - if (jsonData.columns[key].numberSummary.isDiscrete) { - $("#page-button").text("Categorical Data") - categoricalDriftChart(getBarChart, getPositiveNegative) - } else { - $("#page-button").text("Numerical Data") - numericalDriftChart(getDoubleHistogramChart) - } + getProfileCharts( + key, + getDoubleHistogramChart, + getBarChart, + getPositiveNegative + ) + $(".clickable-test-feature-body").removeClass("d-none"); $(".frequent-items-body").html(``); + $("#frequent-item-button").on("click", function () { + $(".frequent-items-body").html(` +
          +
          +
          + items +
          + ${frequentItemString} +
          +
          +
          + reference profile items +
          + ${referenceFrequentItemString} +
          +
          + `); + + $(".clickable-test-feature-body").addClass("d-none"); + + referenceProfilePanelHeight() + }) + + $("#chart").html(chart); chipString += ` @@ -542,8 +610,6 @@ function openProfilePropertyPanel(items, infType, chart) { $("#wl-property-panel__chart").html(chart); let chipString = ""; - const chipElement = (chip) => `${chip}`; - const chipElementTableData = (value) => `${chipElement(value)}`; const chipElementEstimation = (count) => `${count}`; items.forEach((item) => { @@ -567,12 +633,15 @@ $(".wl-table-wrap").addClass("wl-table-wrap--narrow"); } - function openPropertyPanel(items, infType, feature) { + function openPropertyPanel(referenceItems, items, infType, feature) { let getGraph = null, - getDoubleHistogramChart = null, - getBarChart = null, - getPositiveNegative = null, - getPropertyPanelGraph = null; + getPropertyPanelGraph = null, + getDoubleHistogramChart, + getBarChart, + getPositiveNegative, + currentWidth = 600, + propertyPanelGraph = true; + if (referencePropertyPanelData[feature[0]][0]) { items = referencePropertyPanelData[feature[0]][0] @@ -587,7 +656,16 @@ if (jsonData) { if (items.length > 0 && items !== "undefined") { if (referencePropertyPanelData[feature[0]][0]) { - openReferencePropertyPanel(referenceJsonData.columns[feature[0]], feature[0], getGraph, getDoubleHistogramChart, getBarChart, getPositiveNegative) + openReferencePropertyPanel( + referenceItems, + items, + referenceJsonData.columns[feature[0]], + feature[0], + getGraph, + getDoubleHistogramChart, + getBarChart, + getPositiveNegative + ) } else { openProfilePropertyPanel(items, infType, getPropertyPanelGraph) } @@ -856,6 +934,7 @@ "click", openPropertyPanel.bind( this, + referencePropertyPanelData[feature[0]][0], propertyPanelData[feature[0]][0], feature[1].inferredType[0].toLowerCase(), feature @@ -1320,17 +1399,6 @@ } } - $("#frequent-item-button").on("click", function () { - $(".frequent-items-body").html(` - ${frequentItemBoxElement('item')} - ${frequentItemBoxElement('item')} - ${frequentItemBoxElement('item')} - ${frequentItemBoxElement('item')} - `); - - $(".clickable-test-feature-body").html(``); - }) - $removeReferenceProfileButton.on("click", removeReferenceProfile) $(document).on("click", ".page-button", function(e) { From e960f5dde33a4a0bd86dcd09ef995505009af176 Mon Sep 17 00:00:00 2001 From: Perch2005 Date: Tue, 25 Jan 2022 17:17:51 +0300 Subject: [PATCH 30/36] responsiveness of chart text fixed. Add responsiveness to numerical and categorical charts of reference profile panel. --- src/whylogs/viewer/index-hbs-cdn-all-in.html | 107 ++++++++++++++----- src/whylogs/viewer/js/whylogs-script.js | 69 +++++++----- 2 files changed, 126 insertions(+), 50 deletions(-) diff --git a/src/whylogs/viewer/index-hbs-cdn-all-in.html b/src/whylogs/viewer/index-hbs-cdn-all-in.html index 94aa4a62d7..a897945f6e 100644 --- a/src/whylogs/viewer/index-hbs-cdn-all-in.html +++ b/src/whylogs/viewer/index-hbs-cdn-all-in.html @@ -408,6 +408,7 @@ color: var(--brandSecondary400); } .wl-table-cell__bedge { + display: flex; height: 24px; margin: 1px; padding: 2px 8px; @@ -923,7 +924,7 @@ justify-content: center; flex-direction: column; width: 75%; - height: 310px; + height: 340px; border: 2px solid #EBF2F3; background: #FFF; border-radius: 4px; @@ -1149,6 +1150,29 @@ width: 100%; } + .svg-container { + display: inline-block; + position: relative; + width: 85%; + padding-bottom: 34%; + vertical-align: top; + overflow: hidden; + } + + .graph-svg-container { + padding-bottom: 13%; + } + + .svg-content-responsive { + display: inline-block; + position: absolute; + left: 0; + } + + .reference-table-head { + min-width: 305px; + } + @media screen and (min-width: 1000px) { .desktop-content { display: block; @@ -1585,7 +1609,7 @@

          Hold on! :)

          } } - function generateChart(data, height = 75, width = 350, index = 0, referenceProfile = false) { + function generateChart(data, height = 75, width = 350, index = 0, referenceProfile = false, propertyPanelGraph = false) { const sizes = new GenerateChartParams(height, width, data, 5) const { MARGIN, @@ -1593,17 +1617,26 @@

          Hold on! :)

          SVG_HEIGHT, CHART_WIDTH, CHART_HEIGHT, - svgEl, maxYValue, xScale, yScale } = sizes const color = ["#369BAC", '#2683C9'] + let svgEl = d3.create("svg") + .attr("preserveAspectRatio", "xMinYMin meet") + .attr("viewBox", "30 0 320 400") + .classed("svg-content-responsive", true) + + if (propertyPanelGraph) { + svgEl = d3.create("svg").attr("width", width).attr("height", height); + } + // Add the y Axis if (!referenceProfile) { svgEl .append("g") + .style("font-size", "12") .attr("transform", "translate(" + MARGIN.LEFT + ", " + MARGIN.TOP + ")") .call(d3.axisLeft(yScale).tickValues([0, maxYValue/2, maxYValue])); } @@ -1652,7 +1685,7 @@

          Hold on! :)

          } } - function generateDoubleHistogramChart(key, data, referenceData) { + function generateDoubleHistogramChart(currentWidth, key, data, referenceData) { let histogramData = [], overlappedHistogramData = []; @@ -1660,21 +1693,29 @@

          Hold on! :)

          histogramData = chartData(data) overlappedHistogramData = chartData(referenceData.columns[key.data.key]) } - let yFormat, - xFormat; - const sizes = new GenerateChartParams(230, 600, histogramData) + + let yFormat, + xFormat, + sizes; + + sizes = new GenerateChartParams(230, currentWidth, histogramData) + const { MARGIN, SVG_WIDTH, SVG_HEIGHT, CHART_WIDTH, CHART_HEIGHT, - svgEl, maxYValue, xScale, yScale } = sizes + this.svgEl = d3.create("svg") + .attr("preserveAspectRatio", "xMinYMin meet") + .attr("viewBox", "0 0 600 400") + .classed("svg-content-responsive", true) + const xAxis = d3.axisBottom(xScale).ticks(SVG_WIDTH / 80, xFormat).tickSizeOuter(0); const yAxis = d3.axisLeft(yScale).ticks(SVG_HEIGHT / 40, yFormat); yFormat = yScale.tickFormat(100, yFormat); @@ -1734,7 +1775,7 @@

          Hold on! :)

          return svgEl._groups[0][0].outerHTML; } - function generateBarChart(key, datas, referenceData) { + function generateBarChart(currentWidth, key, datas, referenceData) { let histogramData = [], overlappedHistogramData = []; @@ -1752,18 +1793,22 @@

          Hold on! :)

          } }).slice(0, 20) - const sizes = new GenerateChartParams(230, 600, histogramData, undefined, 1) + const sizes = new GenerateChartParams(230, currentWidth, histogramData, undefined, 1) const { MARGIN, SVG_WIDTH, SVG_HEIGHT, CHART_WIDTH, CHART_HEIGHT, - svgEl, maxYValue, yScale } = sizes + this.svgEl = d3.create("svg") + .attr("preserveAspectRatio", "xMinYMin meet") + .attr("viewBox", "0 0 600 400") + .classed("svg-content-responsive", true) + const groups = d3.map(data, function(d){return(d.group)}).keys() const subgroups = ['profile', 'reference_profile'] @@ -1831,7 +1876,7 @@

          Hold on! :)

          return svgEl._groups[0][0].outerHTML; } - function generatePositiveNegativeChart(key, datas, referenceData) { + function generatePositiveNegativeChart(currentWidth, key, datas, referenceData) { let histogramData = [], overlappedHistogramData = []; @@ -1848,16 +1893,20 @@

          Hold on! :)

          let yFormat, xFormat; - const sizes = new GenerateChartParams(230, 600, histogramData, undefined, 1) + const sizes = new GenerateChartParams(230, currentWidth, histogramData, undefined, 1) const { MARGIN, SVG_WIDTH, SVG_HEIGHT, CHART_WIDTH, - CHART_HEIGHT, - svgEl + CHART_HEIGHT } = sizes + this.svgEl = d3.create("svg") + .attr("preserveAspectRatio", "xMinYMin meet") + .attr("viewBox", "0 0 600 400") + .classed("svg-content-responsive", true) + const y0 = Math.max(Math.abs(d3.min(data)), Math.abs(d3.max(data))); const yScale = d3.scaleLinear() @@ -1935,7 +1984,11 @@

          Hold on! :)

          } else if (referenceColumn.frequentItems === undefined){ return ''; } - return generateChart(data, ...[,,], chartColor, chartValue); + return ` +
          + ${generateChart(data, ...[,,], chartColor, chartValue)} +
          + `; } function formatLabelDate(timestamp) { @@ -2142,9 +2195,9 @@

          Hold on! :)

          Handlebars.registerHelper("getGraphHtml",(column,key) => graph(column, key, null)); Handlebars.registerHelper("getReferenceGraphHtml",(column,key) => graph(column, key, profileFromCSVfile)); - Handlebars.registerHelper("getDoubleHistogramChart",(column,key) => generateDoubleHistogramChart(key, column, profileFromCSVfile)); - Handlebars.registerHelper("getBarChart",(column,key) => generateBarChart(key, column, profileFromCSVfile)); - Handlebars.registerHelper("getPositiveNegativeChart",(column,key) => generatePositiveNegativeChart(key, column, profileFromCSVfile)); + Handlebars.registerHelper("getDoubleHistogramChart",(column,key) => generateDoubleHistogramChart(600, key, column, profileFromCSVfile)); + Handlebars.registerHelper("getBarChart",(column,key) => generateBarChart(600, key, column, profileFromCSVfile)); + Handlebars.registerHelper("getPositiveNegativeChart",(column,key) => generatePositiveNegativeChart(600, key, column, profileFromCSVfile)); Handlebars.registerHelper("getPropertyPanelGraphHtml", function (column, key) { let chartString = ""; @@ -2179,20 +2232,21 @@

          Hold on! :)

          }); }); } - if (!!profileFromCSVfile) { + if (profileFromCSVfile) { data = chartData(profileFromCSVfile.columns[columnKey]) } if (column.numberSummary.isDiscrete) { - if (freqData.length > 0) chartString += freqChart(generateChart(freqData, chartHeight, chartWidth, undefined, chartValue)); - if (histData.length > 0 && !chartValue) chartString += histChart(generateChart(histData, 130)); + if (freqData.length > 0) chartString += freqChart(generateChart(freqData, chartHeight, chartWidth, undefined, chartValue, true)); + if (histData.length > 0 && !chartValue) chartString += histChart(generateChart(histData, 130, ...[,,,], true)); } else { - if (histData.length > 0 && !chartValue) chartString += histChart(generateChart(histData, 130)); - if (freqData.length > 0) chartString += freqChart(generateChart(freqData, chartHeight, chartWidth, undefined, chartValue)); + if (histData.length > 0 && !chartValue) chartString += histChart(generateChart(histData, 130, ...[,,,], true)); + if (freqData.length > 0) chartString += freqChart(generateChart(freqData, chartHeight, chartWidth, undefined, chartValue, true)); } - if (!!profileFromCSVfile) { + if (profileFromCSVfile && Object.values(profileFromCSVfile)) { chartString = ''; - chartString += generateChart(data, 50, 280, 0, true); + let propertyPanelGraph = true; + chartString += generateChart(data, 50, 280, 0, true, propertyPanelGraph); } } return chartString; @@ -2325,6 +2379,7 @@

          Hold on! :)

          } if(checkCurrentProfile(true, false)) { + $(".svg-container").css("padding-bottom", "27%") $("#diff-from-ref").addClass("d-none") $(".diff-from-ref-table-cell").addClass("d-none") $("#reference-profile-time-stamp").addClass("d-none"); diff --git a/src/whylogs/viewer/js/whylogs-script.js b/src/whylogs/viewer/js/whylogs-script.js index a74ffcd04e..fe44dc9a2d 100644 --- a/src/whylogs/viewer/js/whylogs-script.js +++ b/src/whylogs/viewer/js/whylogs-script.js @@ -170,7 +170,6 @@ ${text}
          ` - let chartWidth = 600; class GenerateChartParams { constructor(height, width, data, bottomMargin=20, topMargin=5) { @@ -197,13 +196,19 @@ } } - function getGraphHtml(data, height = 75, width = 350, index = 0, referenceProfile = false) { + const referenceProfilePanelHeight = () => { + const pageHeight = $(document).height() - 48; + if ($(".clickable-test-feature-wrap").height() <= pageHeight) { + $(".clickable-test-feature-wrap").css("height", pageHeight) + } else { + $(".clickable-test-feature-wrap").css("height", "auto") + } + } + + function getGraphHtml(data, height = 75, width = 350, index = 0, referenceProfile = false, propertyPanelGraph = false) { const sizes = new GenerateChartParams(height, width, data, 5) - const { + let { MARGIN, - SVG_WIDTH, - SVG_HEIGHT, - CHART_WIDTH, CHART_HEIGHT, svgEl, maxYValue, @@ -212,6 +217,10 @@ } = sizes const color = ["#369BAC", '#2683C9'] + if (propertyPanelGraph) { + svgEl = d3.create("svg").attr("width", width).attr("height", height); + } + // Add the y Axis if (!referenceProfile) { svgEl @@ -236,22 +245,26 @@ return svgEl._groups[0][0].outerHTML; } - function generateDoubleHistogramChart(histogramData, overlappedHistogramData) { + function generateDoubleHistogramChart(currentWidth, histogramData, overlappedHistogramData) { let yFormat, xFormat; - const sizes = new GenerateChartParams(230, chartWidth, histogramData) - const { + const sizes = new GenerateChartParams(230, currentWidth, histogramData) + let { MARGIN, SVG_WIDTH, SVG_HEIGHT, CHART_WIDTH, CHART_HEIGHT, svgEl, - maxYValue, xScale, yScale } = sizes + + svgEl = d3.create("svg") + .attr("preserveAspectRatio", "xMinYMin meet") + .attr("viewBox", "0 0 600 400") + .classed("svg-content-responsive", true) const xAxis = d3.axisBottom(xScale).ticks(SVG_WIDTH / 80, xFormat).tickSizeOuter(0); const yAxis = d3.axisLeft(yScale).ticks(CHART_HEIGHT / 40, yFormat); @@ -270,7 +283,7 @@ .attr("fill", "currentColor") .attr("text-anchor", "start")); - svgEl.append("g") + svgEl.append("g").append("g") .attr("transform", `translate(0,${SVG_HEIGHT - MARGIN.BOTTOM})`) .call(xAxis) .call(g => g.select(".domain").remove()) @@ -312,7 +325,7 @@ return svgEl._groups[0][0].outerHTML; } - function generateBarChart(histogramData, overlappedHistogramData) { + function generateBarChart(currentWidth, histogramData, overlappedHistogramData) { let yFormat, xFormat; const data = histogramData.map((profile, index) => { @@ -323,20 +336,23 @@ } }).slice(0, 20) - const sizes = new GenerateChartParams(230, chartWidth, histogramData, undefined, 1) - const { + const sizes = new GenerateChartParams(230, currentWidth, histogramData, undefined, 1) + let { MARGIN, SVG_WIDTH, SVG_HEIGHT, CHART_WIDTH, CHART_HEIGHT, svgEl, - maxYValue, xScale, yScale } = sizes - const groups = d3.map(data, function(d){return(d.group)}).keys() + svgEl = d3.create("svg") + .attr("preserveAspectRatio", "xMinYMin meet") + .attr("viewBox", "0 0 600 400") + .classed("svg-content-responsive", true) + const subgroups = ['profile', 'reference_profile'] xScale.padding([0.3]) @@ -399,7 +415,7 @@ return svgEl._groups[0][0].outerHTML; } - function generatePositiveNegativeChart(histogramData, overlappedHistogramData) { + function generatePositiveNegativeChart(currentWidth, histogramData, overlappedHistogramData) { const data = histogramData.map((value, index) => { const difference = value.axisY - overlappedHistogramData[index].axisY const negativeValues = difference < 0 ? difference : 0 @@ -409,8 +425,8 @@ let yFormat, xFormat; - const sizes = new GenerateChartParams(230, chartWidth, histogramData, undefined, 1) - const { + const sizes = new GenerateChartParams(230, currentWidth, histogramData, undefined, 1) + let { MARGIN, SVG_WIDTH, SVG_HEIGHT, @@ -419,6 +435,11 @@ svgEl } = sizes + svgEl = d3.create("svg") + .attr("preserveAspectRatio", "xMinYMin meet") + .attr("viewBox", "0 0 600 400") + .classed("svg-content-responsive", true) + const y0 = Math.max(Math.abs(d3.min(data)), Math.abs(d3.max(data))); const yScale = d3.scaleLinear() @@ -483,7 +504,6 @@ ` $(".clickable-test-feature-body").html(` ${chartBoxElement(colorsForDistingushingChartHTMLElement, getDoubleHistogramChart)} - ${chartBoxElement('', '')} `); } @@ -605,6 +625,7 @@ ${chartInfoItem(fixNumberTo(items.numberSummary.mean), "Mean")} ` $(".chart-info").html(chipString); + referenceProfilePanelHeight() } function openProfilePropertyPanel(items, infType, chart) { @@ -644,11 +665,11 @@ if (referencePropertyPanelData[feature[0]][0]) { + getDoubleHistogramChart = generateDoubleHistogramChart(currentWidth, feature[1].chartData[0], feature[1].chartData[1]) + getBarChart = generateBarChart(currentWidth, feature[1].chartData[0], feature[1].chartData[1]) + getPositiveNegative = generatePositiveNegativeChart(currentWidth, feature[1].chartData[0], feature[1].chartData[1]) items = referencePropertyPanelData[feature[0]][0] - getGraph = getGraphHtml(feature[1].chartData[1], 50, 280, 0, true) - getDoubleHistogramChart = generateDoubleHistogramChart(feature[1].chartData[0], feature[1].chartData[1]) - getBarChart = generateBarChart(feature[1].chartData[0], feature[1].chartData[1]), - getPositiveNegative = generatePositiveNegativeChart(feature[1].chartData[0], feature[1].chartData[1]) + getGraph = getGraphHtml(feature[1].chartData[1], 50, 280, 0, true, propertyPanelGraph) } getPropertyPanelGraph = getPropertyPanelGraphHtml(jsonData.columns[feature[0]], feature[0]) From cfb63f49988f2955bcb0494c7fe2534b017b3eda Mon Sep 17 00:00:00 2001 From: Perch2005 Date: Tue, 25 Jan 2022 17:41:47 +0300 Subject: [PATCH 31/36] fix reference profile panel height --- src/whylogs/viewer/index-hbs-cdn-all-in.html | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/whylogs/viewer/index-hbs-cdn-all-in.html b/src/whylogs/viewer/index-hbs-cdn-all-in.html index a897945f6e..bccad836dc 100644 --- a/src/whylogs/viewer/index-hbs-cdn-all-in.html +++ b/src/whylogs/viewer/index-hbs-cdn-all-in.html @@ -409,6 +409,7 @@ } .wl-table-cell__bedge { display: flex; + align-items: center; height: 24px; margin: 1px; padding: 2px 8px; @@ -2621,6 +2622,16 @@

          Hold on! :)

          return toSort; } + function referenceProfilePanelHeight() { + const pageHeight = $(document).height() - 48; + if ($(".clickable-test-feature-wrap").height() <= pageHeight) { + $(".clickable-test-feature-wrap").css("height", pageHeight) + } else { + $(".clickable-test-feature-wrap").css("height", "auto") + } + } + + function openReferencePropertyPanel( getBarChart, getPositiveNegativeChart, getDoubleHistogramChart, @@ -2671,6 +2682,7 @@

          Hold on! :)

          ) $(".frequent-items-body").html(``); + referenceProfilePanelHeight() }) getProfileCharts( @@ -2701,6 +2713,7 @@

          Hold on! :)

          `); $(".clickable-test-feature-body").html(``); + referenceProfilePanelHeight() }) $("#chart").html(chart); chipString += ` @@ -2708,6 +2721,7 @@

          Hold on! :)

          ${chartInfoItem(fixNumberTo(feature.numberSummary.mean), "Mean")} ` $(".chart-info").html(chipString); + referenceProfilePanelHeight() } function getPropertyPanelData(feature) { From e68dcb4fac99655ee12233e63ec89f324500b646 Mon Sep 17 00:00:00 2001 From: Perch2005 Date: Tue, 25 Jan 2022 17:43:10 +0300 Subject: [PATCH 32/36] delete Drift from ref --- src/whylogs/viewer/js/whylogs-script.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/whylogs/viewer/js/whylogs-script.js b/src/whylogs/viewer/js/whylogs-script.js index fe44dc9a2d..0415398a8e 100644 --- a/src/whylogs/viewer/js/whylogs-script.js +++ b/src/whylogs/viewer/js/whylogs-script.js @@ -620,9 +620,8 @@ $("#chart").html(chart); chipString += ` - ${chartInfoItem(fixNumberTo(items.numberSummary.stddev), "Drift from ref")} - ${chartInfoItem(items.numberSummary.count.toString(), "Total Count")} - ${chartInfoItem(fixNumberTo(items.numberSummary.mean), "Mean")} + ${chartInfoItem(profileItems.numberSummary.count.toString(), "Total Count")} + ${chartInfoItem(fixNumberTo(profileItems.numberSummary.mean), "Mean")} ` $(".chart-info").html(chipString); referenceProfilePanelHeight() From 53ed5cb604e46536f490b4d1f8fef6557cbc59e1 Mon Sep 17 00:00:00 2001 From: Perch2005 Date: Tue, 25 Jan 2022 17:50:11 +0300 Subject: [PATCH 33/36] fix table head position of histograms --- src/whylogs/viewer/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/whylogs/viewer/index.html b/src/whylogs/viewer/index.html index fd58b3ee18..50dbd7bf77 100644 --- a/src/whylogs/viewer/index.html +++ b/src/whylogs/viewer/index.html @@ -302,8 +302,8 @@
          2020-02-26 12:
          -
          Feature
          -
          Reference
          +
          Feature
          +
          Reference
          Diff from ref
          Frequent items
          From de0c653c85783cf869fc3dfb8ba1c74d6630d749 Mon Sep 17 00:00:00 2001 From: Jirayr-Solvee Date: Tue, 8 Feb 2022 21:49:56 +0400 Subject: [PATCH 34/36] indentation fixes --- src/whylogs/viz/browser_viz.py | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/whylogs/viz/browser_viz.py b/src/whylogs/viz/browser_viz.py index e41f26959b..385e2b71e4 100644 --- a/src/whylogs/viz/browser_viz.py +++ b/src/whylogs/viz/browser_viz.py @@ -35,8 +35,9 @@ def profile_viewer(profiles: List[DatasetProfile] = None, reference_profiles: Li "More than one profile not implemented yet, default to first profile in the list ") profile_jsons = [message_to_json(each_prof.to_summary()) for each_prof in profiles] if reference_profiles: - reference_profile_jsons = [message_to_json(each_prof.to_summary()) - for each_prof in reference_profiles] + reference_profile_jsons = [ + message_to_json(each_prof.to_summary()) for each_prof in reference_profiles + ] else: index_path = os.path.abspath(os.path.join(_MY_DIR, os.pardir, "viewer", "index.html")) @@ -54,8 +55,10 @@ def profile_viewer(profiles: List[DatasetProfile] = None, reference_profiles: Li template = compiler.compile(source) # replace handlebars for json profiles if reference_profiles: - output_index = template( - {"profile_from_whylogs": profile_jsons[0], "reference_profile": reference_profile_jsons[0]}) + output_index = template({ + "profile_from_whylogs": profile_jsons[0], + "reference_profile": reference_profile_jsons[0] + }) else: output_index = template( {"profile_from_whylogs": profile_jsons[0]}) From 255923916031d6827427dfacc0d0812635fcc99b Mon Sep 17 00:00:00 2001 From: Jirayr-Solvee Date: Tue, 8 Feb 2022 23:40:50 +0400 Subject: [PATCH 35/36] formating fixes --- src/whylogs/viz/browser_viz.py | 21 ++++++--------------- 1 file changed, 6 insertions(+), 15 deletions(-) diff --git a/src/whylogs/viz/browser_viz.py b/src/whylogs/viz/browser_viz.py index 385e2b71e4..fea9b80393 100644 --- a/src/whylogs/viz/browser_viz.py +++ b/src/whylogs/viz/browser_viz.py @@ -21,8 +21,7 @@ def profile_viewer(profiles: List[DatasetProfile] = None, reference_profiles: Li except ImportError as e: Compiler = None logger.debug(str(e)) - logger.debug( - "Unable to load pybars; install pybars3 to load profile from directly from the current session ") + logger.debug("Unable to load pybars; install pybars3 to load profile from directly from the current session ") index_path = os.path.abspath(os.path.join(_MY_DIR, os.pardir, "viewer", "index.html")) webbrowser.open_new_tab(f"file:{index_path}#") @@ -31,21 +30,17 @@ def profile_viewer(profiles: List[DatasetProfile] = None, reference_profiles: Li # create json output from profiles if profiles: if len(profiles) > 1: - logger.warning( - "More than one profile not implemented yet, default to first profile in the list ") + logger.warning("More than one profile not implemented yet, default to first profile in the list ") profile_jsons = [message_to_json(each_prof.to_summary()) for each_prof in profiles] if reference_profiles: - reference_profile_jsons = [ - message_to_json(each_prof.to_summary()) for each_prof in reference_profiles - ] + reference_profile_jsons = [message_to_json(each_prof.to_summary()) for each_prof in reference_profiles] else: index_path = os.path.abspath(os.path.join(_MY_DIR, os.pardir, "viewer", "index.html")) webbrowser.open_new_tab(f"file:{index_path}#") return None - index_path = os.path.abspath(os.path.join( - _MY_DIR, os.pardir, "viewer", "index-hbs-cdn-all-in.html")) + index_path = os.path.abspath(os.path.join(_MY_DIR, os.pardir, "viewer", "index-hbs-cdn-all-in.html")) with open(index_path, "r") as file_with_template: source = file_with_template.read() @@ -55,13 +50,9 @@ def profile_viewer(profiles: List[DatasetProfile] = None, reference_profiles: Li template = compiler.compile(source) # replace handlebars for json profiles if reference_profiles: - output_index = template({ - "profile_from_whylogs": profile_jsons[0], - "reference_profile": reference_profile_jsons[0] - }) + output_index = template({"profile_from_whylogs": profile_jsons[0], "reference_profile": reference_profile_jsons[0]}) else: - output_index = template( - {"profile_from_whylogs": profile_jsons[0]}) + output_index = template({"profile_from_whylogs": profile_jsons[0]}) if not output_path: output_path = tempfile.mkstemp(suffix=".html")[1] From a3b879bc843f29d29e199a9c5dcdac7a44ff8215 Mon Sep 17 00:00:00 2001 From: Jirayr-Solvee Date: Wed, 9 Feb 2022 00:09:46 +0400 Subject: [PATCH 36/36] add test for viewer --- tests/unit/viz/test_profile_viewer.py | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/tests/unit/viz/test_profile_viewer.py b/tests/unit/viz/test_profile_viewer.py index 66d76b7c5e..24162aef98 100644 --- a/tests/unit/viz/test_profile_viewer.py +++ b/tests/unit/viz/test_profile_viewer.py @@ -8,7 +8,7 @@ from whylogs.viz import profile_viewer -def test_profile_viewer(tmpdir, local_config_path): +def test_profile_viewer_without_reference(tmpdir, local_config_path): config = load_config(local_config_path) session = session_from_config(config) @@ -22,3 +22,19 @@ def test_profile_viewer(tmpdir, local_config_path): result = profile_viewer(profiles=[profile], output_path=tmpdir + "my_test.html") assert os.path.exists(tmpdir + "my_test.html") assert result == tmpdir + "my_test.html" + + +def test_profile_viewer_with_reference(tmpdir, local_config_path): + + config = load_config(local_config_path) + session = session_from_config(config) + + with session.logger("mytestytest", dataset_timestamp=datetime.datetime(2021, 6, 2)) as logger: + for _ in range(5): + logger.log({"uniform_integers": np.random.randint(0, 50)}) + logger.log({"nulls": None}) + + profile = logger.profile + result = profile_viewer(profiles=[profile], reference_profiles=[profile], output_path=tmpdir + "my_test_ref.html") + assert os.path.exists(tmpdir + "my_test_ref.html") + assert result == tmpdir + "my_test_ref.html"