From a89ecf2699e562aa79c61eebee3110a94f6ea448 Mon Sep 17 00:00:00 2001 From: Perch Date: Thu, 23 Dec 2021 23:25:13 +0400 Subject: [PATCH 001/119] 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 002/119] 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 003/119] 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,iVBORw0KGgoAAAANSUhEUgAAAZAAAAA7CAYAAABVE9xVAAAgAElEQVR4Ae1dCZhcVZX+/9fVnR0BUUyCCiOyhi29jI6OQFjCIi6QbkICKmCnwyIIDqCo2MAggg5iJEtXgDBAIOnOAIqCKJuMw0C6E3YEB5XRsMkge9bu+uc7leqmutZ7X72q7iR1vq+/qrr33HPvPVX9zl3O+Q9RpaoGtlANSPo0gHMB/BOAMQCeBXAdgLkkN2yhaqlOexPUQH3HTbsxiH2GYCOAnQnuBGkrAWOT0yHfpfAOgFWA/gzhDwkllge9ax9efvqXXws7ZfY3lBQAOBzAFADvA/A/ALpI/qmfpxKvkmoAzARwqikCgH1+CcBiAFeRfLMS47A+JB0M4EsAdgWSyv8tgA6Sr5QyBkkmz+ZXn5rfUwCuIfnfpcgtpW3GXNcBeCil77/4yhVA3I/pEI4FMBHESxB+jldxPVuw3ldeOfglnQfgUthYs8m+5yNIrs6uKlxS33HTdgxqTwuEzwgcR+p59WFJ9+zmW+0nVbj18K1tjC/bE9IpJOsBmc4e7e3lvJWnTnt8qEe9Y/uikR+YMPYkAkeImMCNz4zohyUK0Fsi32ACzySolX1rdc8jZ7S8Gn1nxSXWdyz5GIPYiYE0A+ROxVvk4RAeE/AzIHFr96yWR/Nw5SxO/vNI+rgZCwD7ZHD1ArgMwHdJU155SdJ4AL8EsF+ensxSHlXuB62kEamV6PQc43jLDBzJX+SoK1ok6asA5gOI5WC+lOT5OcrLVpRaOHQAsHFlkj1ATyB5S2ZFvs+6D2NB/AeAQ3PwdGMtDuNh+HuOuooVSfpy6vst1OcikicVYsisq+/o/HQQBLcReH9mnaRfvPSOWlad3bIms264f26ILzspADrAzN+s+hIJnNbT1my/nyGhfeffvGNdrPYOALsPyQCgPgj39ElzVrS12LOr7GRzro3F2gkcD9AW2JGRoEeUQMfqXi1++rQW27EUJEraBsBjAD5cgPMikt8rUF9yVepB9iCAfywizB4+k0jarqQsJGkOgK8VEL7Wdg8kny7Ak1Ul6RAAvwJgu718dBrJefkqoy6XdCGACwrItR3DJ0muLMAzUKV7cRMCHDdQkP3mXtyPQ9iORHZV+Usk7QagJ3VkVahDG99HSa4qxNRfV9/R+ZEgCB4jsHV/WdarcMPyWdNsR7vJUMOCzkOCmuDXBQcsHbV8VnOoBVVBuUUq92jvrBs7MbAV8xAZj8EDFLQ8keg7ZUXbdKf/lcGt3T41Lug6kTX8CYBxbi1Cc70taNH6Xl3+2CktL+STYg8y28oXMh7W9puSJuYTElH5FxyMh3W1bercOqJuB4uR9FEApwwuzfo0EkAYg3pJEeNhHV0kqTarxzIUpBYPdgdQiOoAmJEpSroPuxUxHiZjCvbHOUWFlYFBkn1vSx2Mh/Vu/xufch1GDXl+QeNhgogT6js693KVOeR87e1BEPDKYuMQ+RN7mBfji7p+zITAdpLDwnjY3Ag2Bax5qKmj89tRz9XEN8WX/ZQ1vLYCxsOGP47gGXU1wR8b4l3z97tqsT0Xs8j+SaZllWYX2I/jxOziSEtyHaHk6+CEMj5kv5LneClzLEdkFhT6LMnuleyCqxjZ8ce+xZgiqrdLZHuoFqODijEk64kDHfku1r3J+x8n9giZ7GG4t4c8u1h3JE51YQzoxuciq9w8TeMnnQByj2L9EPiHMRPo8/9bTKRTPZnc0TvxVoqJZC2C4F+b4suur+/oiGwh2LiwKw7i9ErNo78fEiMCcnasbsTTDQs7T+4v7381A1Js99HPe0L/m6hfJX0oz5l5vq7sIfvZfJUllh/v2H6sJJ9V13aOco3tAx68pbC69jNK0kZvjkK9Kbk7LMTRX1cLYrFux+j+gnK/SmoG0ObZzzPu/NrehZfiB134hpynvT0m4ruu4yBwvl1mu/JHwSdh+OqSOCEI3m8efbmcNLym3xjvPJOovIFOHySJ0USwsCG+9Jj0cjMgL6YXFHi/i6RPFKgvpcq8rnwvgyI/S5ZkRxbm+eVCq0j6eBSZrl3Jh9dVZi4+nx+3C+/zuTrJWUbsinH4cc66iAslmYfKQk+xdr/l7BUn0Ok7U5D0dvQcSuXZGybucRKJjzn3TE7cbuLY2c78UTCSLr/JKHoKJYPAjMZ4p7MRztVJY7xzXyL4Ua66SpcRIBFcgfb2AQcg+9GbB4MrRf7QTnUcZndzhKQsbxfXieTh85nfbXlkbMnF5oViXmquNEv34vOuzGH4Ukeddu9hR4iu1AdgViU8D10HVEk+u8+g6H2OHwDfrO/oqNiuspI6CdsXEXx38sJOc9cPRckHdpb3WyhRkTQi+ZGmD+0xcBRvBuQGD8nHeh7bFBUtyVyHM92Hi7YDYMdHudxsXdpm8aRcd1uyKvIXXJ+/asus4YF4Awl8y2v2xNX6Fcx9u1z0A8e7p/T+LyD5X+kFW9L70eOTxvMj/nPm9sS2FT+n9x9nBVsQsRgYys3ZPODgeq9YwSklAg5cqAckLWDMggZdyDygor578Fn1Z46xlLaZsj6HQi6Yg7mfJdk9uKj6yTTAKTAXZPddLbEdRuK6ZPBhxCqUdCSAszzF3g3AjM4WSTtc0TmKDELHIjHgubtedk25XUw3se+G9U3xLu/nJgO/OKR+pQh6EdKvJVynhOZKmifgJkl3SviDRUP284Z5ld6L4+o/y7LV9MWOwsx1zjmwrJDMVNT5jEI8ReqaLKqbpEFQlEo+xujfS+1ss27fi5MQg0Uou15yHor78XUcEN2dSMrt3L4nn3NyQxg4nuSQxKgMh9/E+DE8lQy/I7Qgyq223urrHs+Tsk9bgAUgW3Br6SRtTWIyQNe70mSfIkwnzrEye8ztHEt4HO8KvaLmJRIb5q9om1HQ+cMM/FbvG7sfguAwEs1ec5HeWdMri9dLUr8BudHiDxz/2Q6XtB3J/+sXUsKrRSubB1YpZAYt9IrJOpZk3kiHOQ7CrLfBqlQpjwZ4MF7RvTgJgfs/DIRLdTfu4cFJw5NHsltxamFyE3JEhBeQYEbDjEdJMDUF5A/7qr1/eP0YBMm4sNLGGvDsfX+86KePnnXiG6UJiqi19NfuWc2+HngFO7fjJdbwOoITCjKmKgkcMOnKm7Z/8usznH5fI+vQBHCUi2wAFvR3WHdr88CDvVC7Z887+W0AD6T+zm+Md+5P8HQQXywW2Z4QLk6PUE96jpA07xnD/3Eh820uFGnsIqOfx2fV398m83WmlMTmySz3+WxeYP3GtFi7+0h640MVE7q51XMKfglhrvO8iBGowU26zykupZhYC/L8TDGmjHqDkbHjqy2W6rYeZe6irq7defVkAZW1Y8Z+Iy/DZlDRM7vlN33rtT8kR6cR1owaWWdIFE4UUxIU0Yk3kdA53bPcjEcugd2zWn67fFZzszas30XQ1ZJyAokKmtPT1vzDdBnproc+l8IlP/glbQWfLVr6qAe/t8s+twC2we3SP/nMp3p8la65Qu9fTUacu8O9EHsCGPQDLSQ+V50kAwP19SD6XUhkgVxD2CTLdp5z41aB8C9RDZ7kmU1X/XvUXpJRDS8SOStPa3lOSp7cOMljoMlOjBtRN10RC95+Y91LFm9SMnWfOvNP3a3Nrb3r13/c5iXoN5IeNEgT9fXt393afGYmIGj6qtvOCG3F6LJtapC0O8nflzBq83hy6culCzMA97owZvJIsodWPvDGTHYDF4zk/idT8Ob4mS1Yo3sxAwGWp7zmik+TOF334A4ehDuLMw/msKNVAHYcm74wGsyU/cnOx48jaa67WyxtM3LkN0AYLl5UNA61YwwmqRhUTlT9DYmc3nW6PjaKP7QYiWIDED3uTeh2fyjooefOOMPQsyOjR06f+b+uC6qBfzSSthUzyGlX8lm155JZavt0mcdICut/bncorvQfJIsiVLoK2xL4OAWPebv2Bliku9z+gTJ0eDXgfQH8FVfAxIy+NpuPe17RuS0hu+SNlEScZuf+kQodZsIMyp3Q31yGxY3AtS6s5ifleJTIP7sJLA/XgAFJifc5xjo+haDrPTJJOwIwHKaoyGA2jvYVlhq/3X+4ko9+XGVu/nxT8GMI7vcLxPaog4HGOZOk1hBHoleEheV3HtgmwDh6LM8FaUfKTiTJyUvN4C9Gja7ziwtyGsGmySSvnTEdF8QyZPAho0wDYv/krjDpO5Rw92C7j6JbPk+thNnRWMIoJy8KAAZpHOqYzHMemx07bT21AV+Gku6UbvMjjtS9yaRbRflT+Wx8YVEsjuebRYVv5gx7z7/+gz4gfYJu4cZjQifNkGrbZ35nuZG8ncZSDiZLICY44puRPpn/XBPn2RH8kNEgA5I6B/ZxUfU5/kmfpA90ievZ9EEhIOd9jM6NW3J8QPqXF+Y9D8WLSMB2Ce5EXK57UPDhI8nu8ezewwM5F/bPOb2athYYEYz6FkEn3VkAmnr7vtenvosgWLI5B+LIuljg69TgIHd4sASMzXS5/7DRUnLFHTRmR2PDKY3xJQPQIpXWyiADkurc55jmaElOP77+iUmy/NOuQTimxMLJbPoFb9weuiLpWuyHHXt98b3mRd/5QL4UFbYlMvAg3IqEB6ghMQZEFoR0hu4sGVZTRlmxj62VTtVcbEBDUb/fT2+ewADOAIiUlvScMv3JFW3T/yjKw/NHJ+fLJzEU846qT5sT4ZFoTx4pq4VHXMaZBDhkze2l4G259JOPJ8uAkHwCcBt8atU3CN43X0dp5T6r/iUAfNxmfXY2Bu/teM6IFSQtb3mVStXAhiS0yB+cxSSjfnNzS/pkiCDSBSQtffMWT7GRtd8B6AjBrr5EbzJ7ZVJviYQuFuSERk2wrraurlDWy03uu5i8cMknakeM+C1IZ8+19YkNrrF2QEIW6OdI3D4GPtwY75pr6W4dG0XClu7Gmy7QdiGurq1mEJx2LSEBC82gmYeYyyXfnpIs1eyK9Mnkee9jyHyMWJ7uqsWmAU7Fu7oPM0FY1GzxhDtEziPM1A7SdoU+aQAMXsUXG2uz/OI27gh0sutVpIAbe05tGYAMWtHW8pfGeNfVoNs9FcAvTZ7beanFTgx3hTbGl+0JJIMEBz1zFDAIhO0A2sLFK7WFgAcePeU453QH3S8/fXfThEl/g6M7r0WQkzi1LhZra1y47A4hcf3Lb+OXq85uWVNOfeczIDenArry1aeP6UBJOzi6QhpgoavFNsBCix+w46ZOAK4Zz8wwFDQgkiz4cP/0SRR4b2e9thOqJE2Sc4RrScPapaTWIRvzQPTo/mRK4O8XFZF/K2+X5u75KoB3ARxLcki9VorOt0IMG3cEdEuIZvcdvesN6mgQ9a7rvaR2ZOwkp10MEaupSx73+JwSDOqv3B/2mrd4m1GxukWgYVBtzH6R3mfS6yes609fwkBG3am9vRfxrusAesbRsIbAUURw1ISxWjM+3nUPoLt7E4n7H3n5mSfQ3u7kQec60JwGwvCAJN0FwNBMi5Edg9ndgwuCadhVv+1wXA3IcZK+QbLQJZ/9iF1/CneQfLWYEiKuvzRiecNP3P24DPtjKljQkK9GAosyBy/JFiKuv4f+5qeSLAgy18+4ub9Ontu5s+0IXOcp4lqLUs7kf+Rrx73Y2NG1gEESKDCzOvuzMGPy3CXfX3na9FICkLPlRlBiKMQja3kPQNeTF49etaL75af9j03Xr75cdaPbSPrksnlvXOQoJtHT+dnamgBNEye9rfiyhyE9oETi3p5Xfv8wzFCVQFl3IGmynI6lUvxFf4wlAhYa1IRrwIwF4ByeNo9cb31WQT56yNVXtSyHBtiOBNbhOAi5t/W26hVO5kFJ9+kBCZIM4dc3u+D1JKvfY0qLyZ2AY5Iiu+dIJBKXDHwBGW/WrNnwAwmG0FCUSAY1tTXtRRmHgGH8WJzDMhgP81zrRd/pYVb+y0//8muif2KvAuobR+JgBrwoiNX8rmnCnq81xbu6GhcsO96gbAq0y1tVyID8HEi6O+ZtnFaxu6SGtM+53hpse84dTw7mQYCFqcxwPl5QeQ2apH8EsGuOPnMVve4DwZxLQLUsvwZ4GF7CGjQldxlCeoT/gxAO4IE5jw7NeLjCxFvndm5/av5RbFk1k+cu2R2CcwoFinG778inJUOXJXRVvvqscrJ58rxle2eVD3EBETh7cPoMlUJfLBFzfd5kie5pnTbXYm+yKqIosOBRchprcMO2o0a80hjvWtq4oOsgH9F5DUjqrNjuHlypWExI3od6jg5yrRZ9DMhRyg8b4DOOpSQjxZnJMdctuohH4FVOwUnJuzHhw1iN9/EAfIpTkJURUNKJAOz4ypXsvqOFpN1/VMlWcHU1F9pOwEkZ0po+rSl+T7V+9eUGKe4i024WYjFl3ae4tC0zz05lkW87vQDXNXV0hd55vfrCOzMl2JVCGYkjSbawhnc3xZc96poAq9gPycf7aHoq/3TWJFOAha5IlLYdzkr+QtK8N7IeKlmdbSwYYRemmXWpdLw+aXBzGbJMsdXPEWiAB6KXB2IVj8idU12SpdG80rOrs0ia51WVzK1ywZJ9BE5zVYaIeSvaTiiKTJE8apF+4ioX5OeHKm4h7xjpCsueV0LhioDfa4x3hYJ1eb79xLWvr33x85ZhsHAnEdUS+4C8vTG+7FeN8xb/QyGpBQ1IKi901uVZHoGGhHpEnjqfVf8tBQALfR7oufq0tJKWlteFniM9An9cJFZ5Qmkgle/FsLF8zmm7SC4I1eFm2igW1FzkGjUt6N3eNbrMVRUb3n3n3wQ4J5CqEV0zoLoOoVS+e0oVUKw9ye+7ruwzZRnibvesaScmkPiqew6STCl+n0lMRWzEE03xrq/lczoqaEBS3ZX00I4YsNCO1FyPlD4pKTPiPZdRyadVn91XPhnV8mg0cAoAy/PhSuZw4Qeb4ip5E+UzuAuS7sd/whxDmnWdbjL7YEJXuPKTPLxpQafFUwwL6rPASDk/W0KPWeR1SfyxkBJ6WluuWct1eyZznJeY29xlCAaICXJO48JlP6vv6MzyBnMxID53D5+VlLnCN8DCgnhGaRMxwMK8KwGStsKxy31XGjAYkiy5Tb4dUqY8S1tr+EpVGmINpI6unFfCACybmsV7uILRDfEMK9V9zH3FL721+h39yHdkb73x1pWp/ONuTQP+qxtj+blWtLU8QSSOg1TWwDvLGV9XM+rCUmb0eOvxq7pbp81MJBL7bMwg6OYFV0qfFlsSBMHvDDwyXU5RA5LCDDI3WheywKTMu4eBh7iDABfAQp8d0Qlp6W4tDW/xyOeNg3wglebXYchVljJr4KcADLfMlb5J0pB2q5TSQMP8pZ9KHkc4aiRBXPHU2S1/z8e+Y/uikbteds24zL8kv1caY05pmN91QL5+Kl2+fFbLrX3q20vSPElPSPij/UH6s6S/QHrB3M5TZeahGYoCorVx7s0fDtU4rZEZPcsg+O6GxPYJYIakW11dqtPEOL8lMCkIan9tMTP9jVzdau2h7Zq/wwzGfOugTICFvwJgCVxcXDkNF+afU8njfQyZj5Hq12X1NWINSLILvKM8xP4CgC+su4f4TZOVscBjpa+/v7FmXZYO6ztuGE+OvCAAj3aH1yiur6AGtjOy/9FhQQYUCeA0l8FY5PqI2tqDCJ5M8DCXNht5WKO62jYA33Fvk5/z6dNazAXe0ENutof79mMwJQAPB3kY6YXWkL+TVI3Fyowfi5+sAmZZkasBsbuHOQBcgNc+IWkXkgaYZx4fkQIWWoS5JFOW5ed1oS9JyYxhrpDHtoVd5iK4jDyGQJv3KC/Cfm236HM8FGHXTqJcvzMTtgqAZRe048cqpTQweWHnFILOq3wJP3rujOMNe26AkthQ1N0EPzRQGNUb8tP1HV2HrmhrdkXdjqrnkuU8cepM24XYs2JZU0fXVxFggWFSuQimYN6gkRiQ9P4M+2oV8Ets/IOBK8ZiNQcRwRRABxB0zX+ULnbwe/KrTQs6Fy2f3fLfTgbEzpMl2d2D5TF3IVvtm3LKteq3HYKrATHU3bzb8RyTuS2V3jdHVcWK/kbS8hKXlSTXnANlHUYh4T7pUE+mX8KeQv1uNnVJbydH0B5Br657c40tFAdoj/bOOlK3oRzGI9VLECR3IZucARlQEoDlbc1XN3YsG80ATu7MtjPYd8Hijz86e+b/pMuJ+n0KwPEaAPYHCyQN6mqmUjzSACNJuh7rDwwt6ckX0OJapha9Axlo5QerbuluDbDQdeVjeCy2q3AikisBuMKrm+unBaq5UvX4ylVT5edzWs2lhuEOEV/+cQ+LHhriXYeTtPw7TkTpB4+f86VBQZejJwbHAMz0ZnSS58pEsKlxwVKfo0pX0RXl626bNgfSw66dxoK6elfeqPgMh6yntfnK7lnTDlnbu377REKzBQ2gLLv2I/IQixHxMSC2QnjFsQML+vpuPt/hHDLuDAFY6ONmax5YLmRBU79xYazyVEQD1eOoEtQcMLmyd5Ig4aUX39l4d5negIJB/5SfagLzTHLcK5V/OGF7SJBOOxCTHwi7he0ninZ2BNfT1tzR3dq8u/pwgk8cTxKrOFZ3pLMBSaHb3uQxcDs6cqUwq35LvRspNDGAxam0vq7jrvKVVwNVAxJSv/UdS78A0HmFKyW+nzt3hLyPOMIM2S5nG+JLjw7Tdji1UWLN/a7jSdA5qNlVZFg+dc+edmPvunX7QnraQ8hnnA1ISqjPgz4r6CTPwOwi6vY8dXmLSVp+4bvzMoSr8Il5CddDtZWPBqoGxEdb7/EyYOCMNyXgr6tfQvy95oPeuR4VD2oU5gNRcyHa232fSWG6KlubFXePMA9RJyIx4A7r1KDMTI+cPvN/+9T3OdeASoG7e31ZJB8FYBkCo6RSAAt9DFqxMT9axU0qpqKK11cNSAiVNy7oNADJvZybChc/3d6SMz0t169eKqkiQZkk9myYOCkzjsx5GsOBsf7gXteEeZA4yNttOIzf3JjJpMNU0eEQmuBlQFISo3xom8hS5N3qigJaVBuljcNBfJUlhAaiPqIMMYRNrElzZw2CwBn5VcCfEnotL0ifASUShoKsnKmFo9YOhXbYHDZRImPOTgvg8PSCVMJ1k8BxYQyI3T1E9WMqCbCQZE7k3hC/PZuPz/1OiC6qTUJooLoD8VRaw6GcSbpfzgq6cEVbm8G/5CWL0FYfpobx1skrNE8FiV0aD4FPwrc8koamOACTAXaOvRc8Hqzv6BjdFF86tXFB14kN8c7P7fvjRVs7yi2JjW7xfhCw3ikOJH00JF+SZHcPU9PLQ74vZffR36XJ+Er/h5Cvd1ka35Btq83Kp4GqAfHRbXt7jEjmHXdqZQah59eyBWFR6p7dbIGtuzXMXzIpqKnZEfC7XBcDQwKeVLSjpCsWL6jv6FhczLC5yKokT1NH5wzQ4ivcaD3WrcjHmQxMJC4HuY2FJhJE3ZixaxrjXVeue3PNJZnu1vnkhClXwL1c3OEIve5tQFIDMhfaUg2IPRyiuLQ2rwfLmGZxJ2EpCkMWtu9qu/waqBqQ/LrJqmmcMOlEAgXzN6Q3kh0XdbV4nSb0nDL9SQD250VN8U6AgVtmPXInchtLHpbvYt+r70ow13d0Hgmyw70vPW6giLn4m+KdZ4P8t6y6jTnOvzVy69EzGhZ2ndnT2vyzLJ4SC/aZ3zkR0FRHj+pVYY6wbIi3RXD38J9RABaGSHebqWK7IIz8i8jspPo5lAaqBsRRbRYxDsgZGkPAkz0vPuWTcdRxJLnZls9quU3QI7lrs0uJ4Ds7z5ljieGGNe131eKPNsS75gRBcDtIZ9BPCV25Jrb3ws6dBP4gV11a2UcD8LbGeNf9kULit7cHI2JBnKCB4hYlCT2hdiAk10gyBfhEeGcOKMpVv+1kvp3ZgePnzlT6Xkf2KlsFNbD5GRChuTG+bJ/odagJJN134X36HtrbK+mkIAoXgG4u+wQ+vPWID1lOF/d863mUSvJjll0vT3WoYgL2kN1BxM6uSbre60hr16zesPC9z++9GyFOd4UXIbk/avhgU3zZfYCuWP4b3em7o+zvee8fXj9mxPtGXe2R8gIK+F+hDEiqUzMAYQ2IARbmtMD9E/J5JfmsNkIIhImajdKQ+Qy7yltcA5udAUk95N0f9MV1lOJwObXeyCphZffsZvNgrCgtn9X8i8aFXcsNusSlYzI4f4crOq/JHeDoImGAZ5wPnP1AK4c37lp/T5iEa5/8+ozcd67Eru9xOr4jDgR4YNMhXIVDuroSffj5y2v0sIveUojCzRS/7bMAMdj49W+u/nkpBuQBAAb4Z7AlvlQOwEIzBL4GxNL1uuZZ951jlb90DVRyhVz6aDcRCQklLrBsC0MxXFrfrHHaDZAYP34MT10FZN8HDMXgI+hT0v9x/WrTf25K4B2EvVggdgB4VhDDWRPGsnd8vOtJgH8k9JcE8SYSWEOijsA4gOMFWazQngRrvUFkqC67yA87VJR491COVf8SADmDoXJ/U8nSG6rw3wW0M/RVQ/KQG/ppl3EEwkMr2loM7ntIaPmsY++Sz6ItwNmbclxIppJFnmGxNZnl/Z8JPdj/vqRXIkZyXxLHgDwrANuDgJeRvBjkuSBO2Fjvj8YLobdvvZI5ZkIbkNTkwhiCl8sBWEjSINt9/zGi8AIr6XuuNi6oAZ8FQcFYhoK9bEGVQp+BnA4p9SG5A3Iag+WvqD84aHBiHuZMCeGKntZpBVHH//bSu7cAem6YT2XBytNakmMsyYCQNCz7hzwnW07AQp97lb+StOxjlSKDrHclH15Xmbn4fFw4fXhz9RWmzPUfyTKy5T5TDtNruDZDoR+vkQp4oHvWsVHjx3mNwZhXtrbcK+m3rg1rmMiZBImKLKDZdSjh+aSbe1588pxiAp5vP3GtpGYomXW1GHvF6yU806fXzuvvuCQDkhLiA6tuTcLsWvrHW+zVsoO5nps7/4CLdepYbw8414fMC44yS2Vz7eeNVLHo/JwAAAPbSURBVNR/qf35tl8OwCXPx80ptGhf+ZHxE3DVZWR9egvqG/rdR/+Y+5hM99D/seCrkDvIV9Tw13nysklzls9qnunq9dY9q+XRtVxbrxAgswUVWWql9Lr6eptXtLUZAkiSojAgSwEMSkLTLzzH60PlBCwkaccYBeEBUmOys3XLP1AxSj2AXVZ/fw4TqBVyIr9zzNZo2SgrTiRtMWCefusKdP48gG8VqK9MlZKxUZXpK0QvEu7qnn2sOb4MC1rZ2vyfku4sNhhBL3e/+JQtJLKpDxX3JMseRIGS5AM3Mb27tdmyp3rd51mQYXfrtM+pT8cYWnKBXipTJb0l9E1NBZIO9FmyASFpcOyXD0jM/8aOZc7OXx1ZzfEOK/07SLoej0Q2MADnAhiw3jkE24/sjEpd7Fs8D4Bi22q78MvvNZJjElEWkTQvOUM9MEORSYZC8Jlhkcp2w7uXSTJEhGFHligooYQPRlNF5pDQ2pMBFUw3LeEstLfnPNLtnt18C6RhlwpX0gYB8Q3reid1z26xBXZosjm++sLbuyQSOs8n4VPoDnM0NMgbgf/UPWt6d2Z1GDfmTBmQZOiZFvAzO6tyY4HBFs8g6XvJnUdc4WJJnwdgX1xmJKs9oO8heUhhCeWrlWRpfm1sH8zoxXZxs0nemFFe9o+SbIVki4DMCFRz0z46lUK47OMo1IEkczmfAsBcD+1y/UGSebGECskqV93kuZ0719QFt7piPpVrHIPkCs8LiS/ascig8mHyob6jc6+Awa2WI3zwkLQ2AZ3Z09pSEM4kFQBn3pRfHNx+KD7pOQlL1lHXPt7aYicJkZLFbIysqTsdAb5G8AORCs8hTIAFf1775utvnvXseSe/nYPF2/s3l4yBMkmfBmArHXu1h7ed+5vXQQdZWex7SfYwtKQ6tnq1xC124X8JSd9L/4H5RfVG0jgA0y3HPQB7MNqxm53jD9lFcCqHvY1pl9SRkempqxql7/mtt7fHGibu8QWC/wzh/ebv7ikhNLsSGokABnNRK8Gik7vffVFd+XJ9hO4o4ob1HR215LbHBEATwK0k/X59QkseO6XF+Y7DID1EHkzy4yLKDwev5CLmTSDxd0FPrSdXlsNo5FL1Dld0jpowhjMV4CSCn8zFU3KZ/X4SOHf57Gk9hWRV7MddaBDVuqoGqhqoaqCqAX8NNMzr3BW1PIbgEYQ+ARh2b1jSKwnhVknzVrS1OCUOrBqQsLqutqtqoKqBqgaGkQZ2nnPjVlvXjpjMAPUIsKchlFP8iKBtAI6GpdC1nRPxDoW3xSSK+TOCft/X13ffI7OnP+572f//C7quNxuC3dAAAAAASUVORK5CYII=" + 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 005/119] 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 006/119] 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 007/119] 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 008/119] 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 009/119] 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 010/119] 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 011/119] 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 012/119] 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 013/119] 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 014/119] 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 015/119] 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 016/119] 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 017/119] 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 018/119] 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 019/119] 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 020/119] "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 021/119] 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 023/119] 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 024/119] 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 026/119] 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 027/119] 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 028/119] 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 35fafd6c73e5ae2552a06be87381008091e768db Mon Sep 17 00:00:00 2001 From: Perch2005 Date: Mon, 17 Jan 2022 01:20:40 +0300 Subject: [PATCH 029/119] histograms visualisation in jupyter notebook --- ...x-hbs-cdn-all-in-for-jupyter-notebook.html | 788 ++++++++++++++++++ 1 file changed, 788 insertions(+) create mode 100644 src/whylogs/viewer/index-hbs-cdn-all-in-for-jupyter-notebook.html diff --git a/src/whylogs/viewer/index-hbs-cdn-all-in-for-jupyter-notebook.html b/src/whylogs/viewer/index-hbs-cdn-all-in-for-jupyter-notebook.html new file mode 100644 index 0000000000..46925b1741 --- /dev/null +++ b/src/whylogs/viewer/index-hbs-cdn-all-in-for-jupyter-notebook.html @@ -0,0 +1,788 @@ + + + + + + + + + + Profile Viewer | whylogs + + + + + + + + + + + + + + + + + + + + + + + From abb57407d871fa3288c0d0b36b44752891c940ff Mon Sep 17 00:00:00 2001 From: ssxcho Date: Mon, 17 Jan 2022 02:45:53 +0400 Subject: [PATCH 030/119] add backend for jupyter notebook vizualisation, add jupyter notebook to display profile data in the notebook --- examples/Profile_Viewer_In_Notebook.ipynb | 193 ++++++++++++++++++++++ src/whylogs/viz/__init__.py | 3 +- src/whylogs/viz/browser_viz.py | 2 +- src/whylogs/viz/jupyter_notebook_viz.py | 63 +++++++ 4 files changed, 259 insertions(+), 2 deletions(-) create mode 100644 examples/Profile_Viewer_In_Notebook.ipynb create mode 100644 src/whylogs/viz/jupyter_notebook_viz.py diff --git a/examples/Profile_Viewer_In_Notebook.ipynb b/examples/Profile_Viewer_In_Notebook.ipynb new file mode 100644 index 0000000000..5470afd215 --- /dev/null +++ b/examples/Profile_Viewer_In_Notebook.ipynb @@ -0,0 +1,193 @@ +{ + "cells": [ + { + "cell_type": "markdown", + "id": "6b36ea8e", + "metadata": {}, + "source": [ + "# Profiler Viewer In Notebook" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "id": "5d40e474", + "metadata": {}, + "outputs": [], + "source": [ + "import numpy as np\n", + "import datetime" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "id": "2c3ff3a2", + "metadata": {}, + "outputs": [], + "source": [ + "from whylogs import get_or_create_session\n", + "from whylogs.core import DatasetProfile\n", + "from whylogs.viz import display_profile" + ] + }, + { + "cell_type": "markdown", + "id": "272f6054", + "metadata": {}, + "source": [ + "## Data for Logging" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "id": "29e48da5", + "metadata": {}, + "outputs": [], + "source": [ + "!pip install faker" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "id": "41f8a0f9", + "metadata": {}, + "outputs": [], + "source": [ + "from collections import OrderedDict\n", + "from faker import Faker\n", + "\n", + "locales = OrderedDict([\n", + " ('en-US', 1),\n", + " ('fr-FR', 2),\n", + " ('ja_JP', 2),\n", + "])\n", + "fake= Faker(locales)\n", + "distribution = np.concatenate((np.random.normal(0.1, 0.1, 500), np.random.normal(0.6, 0.2, 500)))" + ] + }, + { + "cell_type": "markdown", + "id": "200841f2", + "metadata": {}, + "source": [ + "### 📝 Log it\n" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "id": "ea4ce6a6", + "metadata": {}, + "outputs": [], + "source": [ + "session = get_or_create_session()\n", + "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()" + ] + }, + { + "cell_type": "markdown", + "id": "8390f360", + "metadata": {}, + "source": [ + "## 👀 open viewer" + ] + }, + { + "cell_type": "markdown", + "id": "650d44c4", + "metadata": {}, + "source": [ + "By calling `display_profile`, it will display a summary of your profiled dataset." + ] + }, + { + "cell_type": "code", + "execution_count": null, + "id": "7dbff14f", + "metadata": {}, + "outputs": [], + "source": [ + "display_profile(profiles=[profile])\n" + ] + }, + { + "cell_type": "markdown", + "id": "9908a9f9", + "metadata": {}, + "source": [ + "### Logging reference profile" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "id": "911147eb", + "metadata": {}, + "outputs": [], + "source": [ + "reference_profile=profile_generator() " + ] + }, + { + "cell_type": "markdown", + "id": "2768a074", + "metadata": {}, + "source": [ + "### Add reference profile to viewer and open" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "id": "250bb662", + "metadata": {}, + "outputs": [], + "source": [ + "display_profile(profiles=[profile], reference_profiles=[reference_profile])" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "id": "2ab7221d", + "metadata": {}, + "outputs": [], + "source": [] + } + ], + "metadata": { + "kernelspec": { + "display_name": "Python 3 (ipykernel)", + "language": "python", + "name": "python3" + }, + "language_info": { + "codemirror_mode": { + "name": "ipython", + "version": 3 + }, + "file_extension": ".py", + "mimetype": "text/x-python", + "name": "python", + "nbconvert_exporter": "python", + "pygments_lexer": "ipython3", + "version": "3.9.7" + } + }, + "nbformat": 4, + "nbformat_minor": 5 +} diff --git a/src/whylogs/viz/__init__.py b/src/whylogs/viz/__init__.py index a536267476..23f3f6eff0 100644 --- a/src/whylogs/viz/__init__.py +++ b/src/whylogs/viz/__init__.py @@ -1,4 +1,5 @@ from .browser_viz import profile_viewer +from .jupyter_notebook_viz import display_profile from .visualizer import BaseProfileVisualizer, ProfileVisualizer -__ALL__ = [ProfileVisualizer, BaseProfileVisualizer, profile_viewer] +__ALL__ = [ProfileVisualizer, BaseProfileVisualizer, profile_viewer, display_profile] diff --git a/src/whylogs/viz/browser_viz.py b/src/whylogs/viz/browser_viz.py index e41f26959b..b31c92738a 100644 --- a/src/whylogs/viz/browser_viz.py +++ b/src/whylogs/viz/browser_viz.py @@ -36,7 +36,7 @@ def profile_viewer(profiles: List[DatasetProfile] = None, reference_profiles: Li 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] + for each_prof in reference_profiles] else: index_path = os.path.abspath(os.path.join(_MY_DIR, os.pardir, "viewer", "index.html")) diff --git a/src/whylogs/viz/jupyter_notebook_viz.py b/src/whylogs/viz/jupyter_notebook_viz.py new file mode 100644 index 0000000000..f2db0f6c5f --- /dev/null +++ b/src/whylogs/viz/jupyter_notebook_viz.py @@ -0,0 +1,63 @@ +import logging +import os +import tempfile +import webbrowser +from typing import List +import html +import IPython + +from whylogs.core import DatasetProfile +from whylogs.util.protobuf import message_to_json + + +_MY_DIR = os.path.realpath(os.path.dirname(__file__)) + +logger = logging.getLogger(__name__) + + +def display_profile(profiles: List[DatasetProfile] = None, reference_profiles: List[DatasetProfile] = None) -> str: + """ + display profile in jupyter notebook + """ + try: + from pybars import Compiler + 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 ") + + # 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 ") + 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: + logger.warning( + "Got no profile data, make sure you pass data correctly ") + return None + + index_path = os.path.abspath(os.path.join( + _MY_DIR, os.pardir, "viewer", "index-hbs-cdn-all-in-for-jupyter-notebook.html")) + + with open(index_path, "r") as file_with_template: + source = file_with_template.read() + + # compile templated files + compiler = Compiler() + 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]}) + else: + output_index = template( + {"profile_from_whylogs": profile_jsons[0]}) + + iframe = f'''''' + return IPython.display.HTML(iframe) From e9ebadf1dd9c004858023fe768248d12122752dd Mon Sep 17 00:00:00 2001 From: ssxcho Date: Mon, 17 Jan 2022 03:58:27 +0400 Subject: [PATCH 031/119] change histogram windowssizing --- ...dex-hbs-cdn-all-in-for-jupyter-notebook.html | 17 ++++------------- src/whylogs/viz/jupyter_notebook_viz.py | 2 +- 2 files changed, 5 insertions(+), 14 deletions(-) diff --git a/src/whylogs/viewer/index-hbs-cdn-all-in-for-jupyter-notebook.html b/src/whylogs/viewer/index-hbs-cdn-all-in-for-jupyter-notebook.html index 46925b1741..fd1537a71e 100644 --- a/src/whylogs/viewer/index-hbs-cdn-all-in-for-jupyter-notebook.html +++ b/src/whylogs/viewer/index-hbs-cdn-all-in-for-jupyter-notebook.html @@ -163,7 +163,7 @@ .wl-table-head { position: sticky; top: 0; - min-width: 130px; + min-width: 100px; background-color: var(--white); border-bottom: 2px solid var(--brandSecondary100); font-size: 12px; @@ -242,15 +242,6 @@ 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%; @@ -406,7 +397,7 @@ margin-right: 5px; } - .drift-detection-search-input input::placeholder { + .drift-detection-search-input input::placeholder { font-family: Arial; font-weight: normal; font-size: 17px; @@ -423,7 +414,7 @@ width: 0; } - @media screen and (min-width: 1000px) { + @media screen and (min-width: 500px) { .desktop-content { display: block; } @@ -592,7 +583,7 @@

          Hold on! :)

          } } - function generateChart(data, height = 75, width = 350, index = 0, referenceProfile = false) { + function generateChart(data, height = 70, width = 250, index = 0, referenceProfile = false) { const sizes = new GenerateChartParams(height, width, data, 5) const { MARGIN, diff --git a/src/whylogs/viz/jupyter_notebook_viz.py b/src/whylogs/viz/jupyter_notebook_viz.py index f2db0f6c5f..48f30004b0 100644 --- a/src/whylogs/viz/jupyter_notebook_viz.py +++ b/src/whylogs/viz/jupyter_notebook_viz.py @@ -59,5 +59,5 @@ def display_profile(profiles: List[DatasetProfile] = None, reference_profiles: L output_index = template( {"profile_from_whylogs": profile_jsons[0]}) - iframe = f'''''' + iframe = f'''''' return IPython.display.HTML(iframe) From 4585e3e6eeaab1c87d88051fb61d7a9f50d69a1f Mon Sep 17 00:00:00 2001 From: ssxcho Date: Mon, 17 Jan 2022 03:58:27 +0400 Subject: [PATCH 032/119] change histogram windows sizing --- ...dex-hbs-cdn-all-in-for-jupyter-notebook.html | 17 ++++------------- src/whylogs/viz/jupyter_notebook_viz.py | 2 +- 2 files changed, 5 insertions(+), 14 deletions(-) diff --git a/src/whylogs/viewer/index-hbs-cdn-all-in-for-jupyter-notebook.html b/src/whylogs/viewer/index-hbs-cdn-all-in-for-jupyter-notebook.html index 46925b1741..fd1537a71e 100644 --- a/src/whylogs/viewer/index-hbs-cdn-all-in-for-jupyter-notebook.html +++ b/src/whylogs/viewer/index-hbs-cdn-all-in-for-jupyter-notebook.html @@ -163,7 +163,7 @@ .wl-table-head { position: sticky; top: 0; - min-width: 130px; + min-width: 100px; background-color: var(--white); border-bottom: 2px solid var(--brandSecondary100); font-size: 12px; @@ -242,15 +242,6 @@ 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%; @@ -406,7 +397,7 @@ margin-right: 5px; } - .drift-detection-search-input input::placeholder { + .drift-detection-search-input input::placeholder { font-family: Arial; font-weight: normal; font-size: 17px; @@ -423,7 +414,7 @@ width: 0; } - @media screen and (min-width: 1000px) { + @media screen and (min-width: 500px) { .desktop-content { display: block; } @@ -592,7 +583,7 @@

          Hold on! :)

          } } - function generateChart(data, height = 75, width = 350, index = 0, referenceProfile = false) { + function generateChart(data, height = 70, width = 250, index = 0, referenceProfile = false) { const sizes = new GenerateChartParams(height, width, data, 5) const { MARGIN, diff --git a/src/whylogs/viz/jupyter_notebook_viz.py b/src/whylogs/viz/jupyter_notebook_viz.py index f2db0f6c5f..48f30004b0 100644 --- a/src/whylogs/viz/jupyter_notebook_viz.py +++ b/src/whylogs/viz/jupyter_notebook_viz.py @@ -59,5 +59,5 @@ def display_profile(profiles: List[DatasetProfile] = None, reference_profiles: L output_index = template( {"profile_from_whylogs": profile_jsons[0]}) - iframe = f'''''' + iframe = f'''''' return IPython.display.HTML(iframe) From b3a3dac9f63b050ff3213f96e77a4dc36b141ae3 Mon Sep 17 00:00:00 2001 From: ssxcho Date: Thu, 20 Jan 2022 18:42:56 +0400 Subject: [PATCH 033/119] change vizualisation stucture, add download and view feature double histogram --- src/whylogs/viz/__init__.py | 5 +- src/whylogs/viz/jupyter_notebook_viz.py | 174 +++++++++++++++++------- 2 files changed, 131 insertions(+), 48 deletions(-) diff --git a/src/whylogs/viz/__init__.py b/src/whylogs/viz/__init__.py index 23f3f6eff0..ccb1633ded 100644 --- a/src/whylogs/viz/__init__.py +++ b/src/whylogs/viz/__init__.py @@ -1,5 +1,6 @@ from .browser_viz import profile_viewer -from .jupyter_notebook_viz import display_profile +from .jupyter_notebook_viz import DisplayProfile + from .visualizer import BaseProfileVisualizer, ProfileVisualizer -__ALL__ = [ProfileVisualizer, BaseProfileVisualizer, profile_viewer, display_profile] +__ALL__ = [ProfileVisualizer, BaseProfileVisualizer, DisplayProfile, profile_viewer] diff --git a/src/whylogs/viz/jupyter_notebook_viz.py b/src/whylogs/viz/jupyter_notebook_viz.py index 48f30004b0..f4338b8b00 100644 --- a/src/whylogs/viz/jupyter_notebook_viz.py +++ b/src/whylogs/viz/jupyter_notebook_viz.py @@ -2,10 +2,12 @@ import os import tempfile import webbrowser +import sys +import json from typing import List import html -import IPython +from IPython.core.display import display, HTML from whylogs.core import DatasetProfile from whylogs.util.protobuf import message_to_json @@ -15,49 +17,129 @@ logger = logging.getLogger(__name__) -def display_profile(profiles: List[DatasetProfile] = None, reference_profiles: List[DatasetProfile] = None) -> str: - """ - display profile in jupyter notebook - """ - try: - from pybars import Compiler - 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 ") - - # create json output from profiles - if profiles: - if len(profiles) > 1: +class DisplayProfile: + + def __init__(self, profiles: List[DatasetProfile] = None, reference_profiles: List[DatasetProfile] = None): + + self.profiles = profiles + self.reference_profiles = reference_profiles + + def __display_html(self, output_index, width_height): + # convert html to iframe and return it wrapped in Ipython...HTML() + iframe = f'''''' + return HTML(iframe) + + def __iframe_output_sizing(self, html): + # add all required heights and widths for individual HTMLs to be displayed in notebook + sizes = {'index-hbs-cdn-all-in-for-jupyter-notebook.html': 'width=960px height=1000px', + 'index-hbs-cdn-all-in-jupyter-distribution-chart.html': 'width=960px height=277px' + } + return str(sizes.get(html)) + + def summary(self) -> str: + """ + create profile html + """ + try: + from pybars import Compiler + 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 ") + # create json output from profiles + if self.profiles: + if len(self.profiles) > 1: + 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 self.profiles] + + if self.reference_profiles: + reference_profile_jsons = [message_to_json(each_prof.to_summary()) + for each_prof in self.reference_profiles] + + else: 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: - logger.warning( - "Got no profile data, make sure you pass data correctly ") - return None - - index_path = os.path.abspath(os.path.join( - _MY_DIR, os.pardir, "viewer", "index-hbs-cdn-all-in-for-jupyter-notebook.html")) - - with open(index_path, "r") as file_with_template: - source = file_with_template.read() - - # compile templated files - compiler = Compiler() - 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]}) - else: - output_index = template( - {"profile_from_whylogs": profile_jsons[0]}) - - iframe = f'''''' - return IPython.display.HTML(iframe) + "Got no profile data, make sure you pass data correctly ") + return None + index_path = os.path.abspath(os.path.join( + _MY_DIR, os.pardir, "viewer", "index-hbs-cdn-all-in-for-jupyter-notebook.html")) + + html_file = self.__iframe_output_sizing("index-hbs-cdn-all-in-for-jupyter-notebook.html") + with open(index_path, "r") as file_with_template: + source = file_with_template.read() + # compile templated files + compiler = Compiler() + template = compiler.compile(source) + # replace handlebars for json profiles + if self.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]}) + return self.__display_html(output_index, html_file) + + def download(self, html, path=None): + # code to write html arg to file and generate name using TimeStamp + if path: + output_path = os.path.abspath(os.path.expanduser(path)) + else: + output_path = 'html_reports/' + + name_of_file = "test" + + completeName = os.path.join(output_path, name_of_file+".html") + + file1 = open(completeName, "w") + + file1.write(html.data) + + file1.close() + + def feature(self, name): + print(self.profiles[0].dataset_timestamp) + """ + create profile html + """ + try: + from pybars import Compiler + 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 ") + # create json output from profiles + if self.profiles: + if len(self.profiles) > 1: + 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 self.profiles] + + if self.reference_profiles: + reference_profile_jsons = [message_to_json(each_prof.to_summary()) + for each_prof in self.reference_profiles] + + else: + logger.warning( + "Got no profile data, make sure you pass data correctly ") + return None + index_path = os.path.abspath(os.path.join( + _MY_DIR, os.pardir, "viewer", "index-hbs-cdn-all-in-jupyter-distribution-chart.html")) + + html_file = self.__iframe_output_sizing( + "index-hbs-cdn-all-in-jupyter-distribution-chart.html") + with open(index_path, "r") as file_with_template: + source = file_with_template.read() + # compile templated files + compiler = Compiler() + template = compiler.compile(source) + # replace handlebars for json profiles + if self.reference_profiles: + profile_feature = json.loads(profile_jsons[0]) + reference_profile_feature = json.loads(reference_profile_jsons[0]) + output_index = template( + {"profile_from_whylogs": json.dumps(profile_feature.get('columns').get(name)), "reference_profile": json.dumps(reference_profile_feature.get('columns').get(name))}) + return self.__display_html(output_index, html_file) From ff3f20d907ea9b4e894d2dd8451ee91d730b70e7 Mon Sep 17 00:00:00 2001 From: ssxcho Date: Thu, 20 Jan 2022 19:28:21 +0400 Subject: [PATCH 034/119] add double histogram visualization --- ...cdn-all-in-jupyter-distribution-chart.html | 287 ++++++++++++++++++ 1 file changed, 287 insertions(+) create mode 100644 src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-distribution-chart.html diff --git a/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-distribution-chart.html b/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-distribution-chart.html new file mode 100644 index 0000000000..851860a165 --- /dev/null +++ b/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-distribution-chart.html @@ -0,0 +1,287 @@ + + + + + + + + + + Profile Viewer | whylogs + + + + + + + + + + + + + + + + + + + + + + From b67527860f878e6de45d734b13f6fdf7ea86d41c Mon Sep 17 00:00:00 2001 From: Perch2005 Date: Thu, 20 Jan 2022 23:16:50 +0300 Subject: [PATCH 035/119] responsive distribution chart --- ...cdn-all-in-jupyter-distribution-chart.html | 32 +++++++++++++++---- 1 file changed, 26 insertions(+), 6 deletions(-) diff --git a/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-distribution-chart.html b/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-distribution-chart.html index 851860a165..62f33c2cfa 100644 --- a/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-distribution-chart.html +++ b/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-distribution-chart.html @@ -77,6 +77,21 @@ line-height: 1.5; } + .svg-container { + display: inline-block; + position: relative; + width: 100%; + padding-bottom: 100%; + vertical-align: top; + overflow: hidden; + } + + .svg-content-responsive { + display: inline-block; + position: absolute; + left: 0; + } + @media screen and (min-width: 500px) { .desktop-content { display: block; @@ -93,7 +108,9 @@ + + + + + + + + + + + + From e83513b1577d62cb4ceb3bff3a9011eb7fe688ab Mon Sep 17 00:00:00 2001 From: Perch2005 Date: Mon, 31 Jan 2022 17:29:24 +0300 Subject: [PATCH 051/119] add Feature Summary Statistics visualisation --- ...in-jupyter-feature-summary-statistics.html | 463 ++++++++++++++++++ 1 file changed, 463 insertions(+) create mode 100644 src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-feature-summary-statistics.html diff --git a/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-feature-summary-statistics.html b/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-feature-summary-statistics.html new file mode 100644 index 0000000000..30367ad622 --- /dev/null +++ b/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-feature-summary-statistics.html @@ -0,0 +1,463 @@ + + + + + + + + + + Profile Viewer | whylogs + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file From 085ae1269a62fd07d30d1304305d0655ea64ad3e Mon Sep 17 00:00:00 2001 From: Perch2005 Date: Mon, 31 Jan 2022 19:44:40 +0300 Subject: [PATCH 052/119] Add filter next to search input --- ...x-hbs-cdn-all-in-for-jupyter-notebook.html | 191 +++++++++++++++++- 1 file changed, 182 insertions(+), 9 deletions(-) diff --git a/src/whylogs/viewer/index-hbs-cdn-all-in-for-jupyter-notebook.html b/src/whylogs/viewer/index-hbs-cdn-all-in-for-jupyter-notebook.html index 85a339ef8f..3899ea314d 100644 --- a/src/whylogs/viewer/index-hbs-cdn-all-in-for-jupyter-notebook.html +++ b/src/whylogs/viewer/index-hbs-cdn-all-in-for-jupyter-notebook.html @@ -99,6 +99,10 @@ */ .main { position: relative; + background: #FFFFFF; + border: 1px solid #DBE5E7; + box-sizing: border-box; + border-radius: 4px; } .main .page-header { margin-top: 0; @@ -221,10 +225,11 @@ /* Property side panel */ .wl-compare-profile { - position: sticky; + position: relative; left: 0; padding: 18px; - background: #F8FAFB; + background: var(--white);; + border-bottom: 1px solid var(--brandSecondary200); } /* Screen on smaller screens */ @@ -388,9 +393,12 @@ .drift-detection-search-input { display: flex; align-items: center; + background: rgba(255, 255, 255, 0.7); border: 1px solid #DBE5E7; + box-sizing: border-box; + border-radius: 4px; + width: 240px; padding-left: 10px; - background: #FFF; } .drift-detection-search-input img{ @@ -400,12 +408,56 @@ .drift-detection-search-input input::placeholder { font-family: Arial; font-weight: normal; - font-size: 17px; + font-size: 13px; line-height: 16px; - color: #9FA9AB; - padding-left: 10px; + color: #313B3D; + } + + .close-filter-button { + display: flex; + justify-content: center; + align-items: center; + background: rgba(255, 255, 255, 0.7); + border: 1px solid #369BAC; + box-sizing: border-box; + border-radius: 4px; + width: 40px; + height: 40px; + cursor: pointer; + margin-left: 10px; + } + + .filter-options-title { + width: 240px; + } + + .filter-options-title p { + margin: 0; + } + + .dropdown-container { + position: absolute; + right: 18px; + z-index: 999; + background: #FFFFFF; + border: 1px solid #DBE5E7; + box-sizing: border-box; + box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.05); + border-radius: 4px; + padding: 10px !important; + border: none !important; + } + + .form-check-input:checked { + background-color: #0E7384; + border-color: #0E7384; + } + + .form-check-input[type=checkbox] { + border-radius: 1.25em; } + .justify-content-center { justify-content: center; } @@ -492,14 +544,73 @@
          -
          +
          - - + + +
          +
          +
          + +
          +
          + +
          +
          @@ -796,9 +907,14 @@

          Hold on! :)

          target.innerHTML = html; } + + function initWebsiteScripts() { const $featureSearch = document.getElementById("wl__feature-search"); const $tableBody = document.getElementById("table-body"); + const $discrete = document.getElementById("inferredDiscrete"); + const $nonDiscrete = document.getElementById("inferredNonDiscrete"); + const $unknown = document.getElementById("inferredUnknown"); const activeTypes = { discrete: true, @@ -808,6 +924,8 @@

          Hold on! :)

          const getReferenceProfile = () => { return {{{reference_profile}}} } + let searchString = ""; + function debounce(func, wait, immediate) { let timeout; @@ -826,6 +944,17 @@

          Hold on! :)

          }; } + 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 handleSearch() { const tableBodyChildren = $tableBody.children; @@ -849,6 +978,36 @@

          Hold on! :)

          }, 100), ); + $discrete.addEventListener("change", (event) => { + if (event.currentTarget.checked) { + activeTypes["discrete"] = true; + } else { + activeTypes["discrete"] = false; + } + handleSearch(); + filterNotification() + }); + + $nonDiscrete.addEventListener("change", (event) => { + if (event.currentTarget.checked) { + activeTypes["non-discrete"] = true; + } else { + activeTypes["non-discrete"] = false; + } + handleSearch(); + filterNotification() + }); + + $unknown.addEventListener("change", (event) => { + if (event.currentTarget.checked) { + activeTypes["unknown"] = true; + } else { + activeTypes["unknown"] = false; + } + handleSearch(); + filterNotification() + }); + function checkCurrentProfile(item, referenceItem) { const refData = getReferenceProfile() if (refData && Object.values(refData)) { @@ -868,6 +1027,20 @@

          Hold on! :)

          } } + function openFilter() { + const $filterOptions = $(".dropdown-container"); + const filterClass = $filterOptions.attr("class"); + + if (filterClass.indexOf("d-none") > 0) { + $filterOptions.removeClass("d-none"); + $(".filter-icon").addClass("d-none") + $(".close-filter-icon").removeClass("d-none") + } else { + $filterOptions.addClass("d-none"); + $(".close-filter-icon").addClass("d-none") + $(".filter-icon").removeClass("d-none") + } + } // Invoke functions -- keep in mind invokation order registerHandlebarHelperFunctions(); From 57534b315dba6431a92540068215c35c13878397 Mon Sep 17 00:00:00 2001 From: Perch2005 Date: Mon, 31 Jan 2022 23:41:17 +0300 Subject: [PATCH 053/119] add ability to add multiple features in double histogram. --- ...cdn-all-in-jupyter-distribution-chart.html | 77 +++++++++++++++---- 1 file changed, 63 insertions(+), 14 deletions(-) diff --git a/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-distribution-chart.html b/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-distribution-chart.html index 226584f099..8606fe763f 100644 --- a/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-distribution-chart.html +++ b/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-distribution-chart.html @@ -24,9 +24,6 @@ > @@ -203,45 +170,37 @@
          -
          - Profile Summary: {{getProfileName this}}_{{getProfileTimeStamp this}} -
          -
          -
          -
          Observations
          -
          {{{observations}}}
          -
          -
          -
          Missing Cells
          -
          - {{{missingCells}}} -
          (8.1%)
          -
          +
          + Profile Summary: {{getProfileName this}}_{{getProfileTimeStamp this}} +
          +
          +
          +
          Observations
          +
          {{{observations}}}
          +
          +
          +
          Missing Cells
          +
          + {{{missingCells}}} +
          (8.1%)
          -
          -
          Duplicate Rows
          -
          - {{{duplicateRows}}} -
          (0%)
          -
          +
          +
          +
          Duplicate Rows
          +
          + {{{duplicateRows}}} +
          (0%)
          -
          -
          Total Size
          - {{{totalSize}}} -
          -
          -
          Average record size
          - {{{averageRecordSize}}} -
          -
          -
          - -
          -
          -
          32
          -
          -
          -
          +
          +
          +
          Total Size
          + {{{totalSize}}} +
          +
          +
          Average record size
          + {{{averageRecordSize}}} +
          +
          @@ -344,7 +303,6 @@

          Hold on! :)

          return formatLabelDate(+properties.properties.dataTimestamp) }); - Handlebars.registerHelper("getProfileName", function (properties) { return properties.properties.tags.name }); @@ -363,13 +321,8 @@

          Hold on! :)

          target.innerHTML = html; } - function initWebsiteScripts() { - // Target HTML elements - } - // Invoke functions -- keep in mind invokation order registerHandlebarHelperFunctions(); initHandlebarsTemplate(); - initWebsiteScripts(); From 36c13acc7ae387d836649bc1843621566216e626 Mon Sep 17 00:00:00 2001 From: Perch2005 Date: Wed, 2 Feb 2022 16:47:59 +0300 Subject: [PATCH 057/119] remove the red color of statistics --- ...dex-hbs-cdn-all-in-jupyter-feature-summary-statistics.html | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-feature-summary-statistics.html b/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-feature-summary-statistics.html index 30367ad622..fb8973ccad 100644 --- a/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-feature-summary-statistics.html +++ b/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-feature-summary-statistics.html @@ -112,10 +112,6 @@ width: 49% ; } - .statistic-item:nth-child(1) > .statistic-number-title, .statistic-item:nth-child(1) > .statistic-number { - color: #E4593A; - } - .notif-circle-container{ position: absolute; top: -8px; From 7caf36e88011512a8cbe23ecf5f8a0e99b1ac078 Mon Sep 17 00:00:00 2001 From: Perch2005 Date: Wed, 2 Feb 2022 16:49:35 +0300 Subject: [PATCH 058/119] code cleaning --- ...x-hbs-cdn-all-in-for-jupyter-notebook.html | 403 ++++++++++-------- ...cdn-all-in-jupyter-distribution-chart.html | 4 +- ...in-jupyter-feature-summary-statistics.html | 269 ++++++------ 3 files changed, 349 insertions(+), 327 deletions(-) diff --git a/src/whylogs/viewer/index-hbs-cdn-all-in-for-jupyter-notebook.html b/src/whylogs/viewer/index-hbs-cdn-all-in-for-jupyter-notebook.html index 3899ea314d..110b92b5ad 100644 --- a/src/whylogs/viewer/index-hbs-cdn-all-in-for-jupyter-notebook.html +++ b/src/whylogs/viewer/index-hbs-cdn-all-in-for-jupyter-notebook.html @@ -273,68 +273,68 @@ justify-content: space-between; } - .align-items { - display: flex; - align-items: center; - } - - .display-flex{ - display: flex; - } - - .table-border-none { - padding: 0; - border: none; - } - - .flex-direction-colum { - display: flex; - flex-direction: column; - } - - .align-items { - align-items: center; - } - - .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: 14px; - } - - .search-input img{ - height: 19px; - pointer-events: none; - } - - input::placeholder { - color: var(--secondaryLight1000); - } - - .bar.positive { - fill: #369BACB2; - } - - .bar.negative { - fill: #2683C9E5; - } + .align-items { + display: flex; + align-items: center; + } - .text-align-center { - text-align: center; - } + .display-flex{ + display: flex; + } + + .table-border-none { + padding: 0; + border: none; + } + + .flex-direction-colum { + display: flex; + flex-direction: column; + } + + .align-items { + align-items: center; + } + + .search-input{ + padding-top: 0 !important; + padding-bottom: 0 !important; + } - .drift-detection { - justify-content: space-between; - align-items: center; - } + .search-input input{ + border: none; + background: none; + outline: none; + height: 40px; + width: 100%; + font-size: 14px; + } + + .search-input img{ + height: 19px; + pointer-events: none; + } + + input::placeholder { + color: var(--secondaryLight1000); + } + + .bar.positive { + fill: #369BACB2; + } + + .bar.negative { + fill: #2683C9E5; + } + + .text-align-center { + text-align: center; + } + + .drift-detection { + justify-content: space-between; + align-items: center; + } .drift-detection-info-circle { width: 15px; @@ -457,16 +457,15 @@ border-radius: 1.25em; } + .justify-content-center { + justify-content: center; + } + + .wl-table-cell__graph-wrap { + width: 0; + } - .justify-content-center { - justify-content: center; - } - - .wl-table-cell__graph-wrap { - width: 0; - } - - .svg-container { + .svg-container { display: inline-block; position: relative; width: 85%; @@ -474,6 +473,7 @@ vertical-align: top; overflow: hidden; } + .svg-content-responsive { display: inline-block; position: absolute; @@ -484,14 +484,14 @@ min-width: 250px; } - @media screen and (min-width: 500px) { - .desktop-content { - display: block; - } - .no-responsive { - display: none; - } - } + @media screen and (min-width: 500px) { + .desktop-content { + display: block; + } + .no-responsive { + display: none; + } + } @@ -504,113 +504,113 @@
          -
          -
          -
          -
          -
          -

          - Drift detected in 65 of 131 features -

          -
          -
          -
          -
          -
          -

          {{severeDrift}}

          -

          Severe drift

          -
          -
          -
          -
          -
          -

          {{moderateDrift}}

          -

          Moderate drift

          -
          -
          -
          -
          -
          -

          {{mildDrift}}

          -

          Mild drift

          -
          -
          -
          -
          -
          -

          {{minimalDrift}}

          -

          Minimal drift

          -
          -
          -
          -
          -
          -
          - - -
          -
          -
          - -
          -
          - -
          -
          -
          -
          -
          - +
          +
          +
          +
          +
          +

          + Drift detected in 65 of 131 features +

          +
          +
          +
          +
          +
          +

          {{severeDrift}}

          +

          Severe drift

          +
          +
          +
          +
          +
          +

          {{moderateDrift}}

          +

          Moderate drift

          +
          +
          +
          +
          +
          +

          {{mildDrift}}

          +

          Mild drift

          +
          +
          +
          +
          +
          +

          {{minimalDrift}}

          +

          Minimal drift

          +
          +
          +
          +
          +
          +
          + + +
          +
          +
          + +
          +
          + +
          +
          +
          +
          +
          +
          @@ -894,6 +894,39 @@

          Hold on! :)

          Handlebars.registerHelper("getGraphHtml",(column,key) => graph(column, key, null)); Handlebars.registerHelper("getReferenceGraphHtml",(column,key) => graph(column, key, profileFromCSVfile)); + + Handlebars.registerHelper("getDiscreteTypeCount", function () { + let count = 0; + + Object.entries(this.columns).forEach((feature) => { + if (feature[1].numberSummary && feature[1].numberSummary.isDiscrete === true) { + count++; + } + }); + return count.toString(); + }); + + Handlebars.registerHelper("getNonDiscreteTypeCount", function () { + let count = 0; + + Object.entries(this.columns).forEach((feature) => { + if (feature[1].numberSummary && feature[1].numberSummary.isDiscrete === false) { + count++; + } + }); + return count; + }); + + Handlebars.registerHelper("getUnknownTypeCount", function () { + let count = 0; + + Object.entries(this.columns).forEach((feature) => { + if (!feature[1].numberSummary) { + count++; + } + }); + return count; + }); } function initHandlebarsTemplate() { @@ -907,8 +940,6 @@

          Hold on! :)

          target.innerHTML = html; } - - function initWebsiteScripts() { const $featureSearch = document.getElementById("wl__feature-search"); const $tableBody = document.getElementById("table-body"); diff --git a/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-distribution-chart.html b/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-distribution-chart.html index 8606fe763f..946e9b2241 100644 --- a/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-distribution-chart.html +++ b/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-distribution-chart.html @@ -125,7 +125,6 @@ color: #4F595B; } - @media screen and (min-width: 500px) { .desktop-content { display: block; @@ -134,7 +133,6 @@ display: none; } } - @@ -347,7 +345,7 @@

          Hold on! :)

          // Config handlebars and pass data to HBS template const source = document.getElementById("entry-template").innerHTML; const template = Handlebars.compile(source); - const html = template(context.columns); + const html = template(context); const target = document.getElementById("generated-html"); target.innerHTML = html; } diff --git a/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-feature-summary-statistics.html b/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-feature-summary-statistics.html index fb8973ccad..04cdb665a7 100644 --- a/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-feature-summary-statistics.html +++ b/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-feature-summary-statistics.html @@ -160,16 +160,14 @@ padding-right: 30px; } - @media screen and (min-width: 500px) { - .desktop-content { - display: block; - } - .no-responsive { - display: none; - } - } - - + @media screen and (min-width: 500px) { + .desktop-content { + display: block; + } + .no-responsive { + display: none; + } + } @@ -180,143 +178,143 @@
          -
          - {{featureName this}}: Summary Statistics {{getProfileName this}}_{{getProfileTimeStamp this}} +
          + {{featureName this}}: Summary Statistics {{getProfileName this}}_{{getProfileTimeStamp this}} +
          +
          +
          +
          +
          Distinct (%)
          +
          {{distinct}}
          +
          +
          +
          Missing
          +
          {{missing}}
          +
          +
          +
          Infinite
          +
          {{infinite}}
          +
          +
          +
          Mean
          +
          {{mean this}}
          +
          +
          +
          Minimum
          +
          {{minimum this}}
          +
          +
          +
          Maximum
          +
          {{maximum this}}
          +
          +
          +
          Zeros
          +
          {{zeros}}
          +
          +
          +
          Negative
          +
          {{negative}}
          +
          +
          +
          Memory size
          +
          {{memorySize}}
          +
          -
          -
          -
          -
          Distinct (%)
          -
          {{distinct}}
          -
          -
          -
          Missing
          -
          {{missing}}
          -
          -
          -
          Infinite
          -
          {{infinite}}
          -
          -
          -
          Mean
          -
          {{mean this}}
          -
          -
          -
          Minimum
          -
          {{minimum this}}
          -
          -
          -
          Maximum
          -
          {{maximum this}}
          +
          +
          +
          +
          +
          +
          + Quantile statistics
          -
          -
          Zeros
          -
          {{zeros}}
          -
          -
          -
          Negative
          -
          {{negative}}
          -
          -
          -
          Memory size
          -
          {{memorySize}}
          -
          -
          -
          -
          -
          -
          -
          - Quantile statistics +
          +
          Minimum
          +
          {{minimum this}}
          +
          +
          +
          5-th percentile
          +
          45.5
          +
          +
          +
          Q1
          +
          223.5
          +
          +
          +
          median
          +
          {{median this}}
          +
          +
          +
          Q3
          +
          668.5
          +
          +
          +
          95-th percentile
          +
          846.5
          +
          +
          +
          Maximum
          +
          {{maximum this}}
          +
          +
          +
          Range
          +
          890
          -
          -
          -
          Minimum
          -
          {{minimum this}}
          -
          -
          -
          5-th percentile
          -
          45.5
          -
          -
          -
          Q1
          -
          223.5
          -
          -
          -
          median
          -
          {{median this}}
          -
          -
          -
          Q3
          -
          668.5
          -
          -
          -
          95-th percentile
          -
          846.5
          -
          -
          -
          Maximum
          -
          {{maximum this}}
          -
          -
          -
          Range
          -
          890
          -
          -
          -
          Interquartile range (IQR)
          -
          445
          -
          +
          +
          Interquartile range (IQR)
          +
          445
          -
          +
          +
          +
          +
          + Descriptive statistics +
          -
          - Descriptive statistics +
          +
          Standard deviation
          +
          247.353842
          +
          +
          +
          Coefficient of variation (CV)
          +
          0.5770265516
          +
          +
          +
          Kurtosis
          +
          -1.2
          +
          +
          +
          Mean
          +
          446
          +
          +
          +
          Median Absolute Deviation (MAD)
          +
          223
          -
          -
          -
          Standard deviation
          -
          247.353842
          -
          -
          -
          Coefficient of variation (CV)
          -
          0.5770265516
          -
          -
          -
          Kurtosis
          -
          -1.2
          -
          -
          -
          Mean
          -
          446
          -
          -
          -
          Median Absolute Deviation (MAD)
          -
          223
          -
          -
          -
          Skewness
          -
          0
          -
          -
          -
          Sum
          -
          397386
          -
          -
          -
          Variance
          -
          66231
          -
          -
          -
          Monotonicity
          -
          Strictly increasing
          -
          +
          +
          Skewness
          +
          0
          +
          +
          +
          Sum
          +
          397386
          +
          +
          +
          Variance
          +
          66231
          +
          +
          +
          Monotonicity
          +
          Strictly increasing
          +
          @@ -447,13 +445,8 @@

          Hold on! :)

          target.innerHTML = html; } - function initWebsiteScripts() { - // Target HTML elements - } - // Invoke functions -- keep in mind invokation order registerHandlebarHelperFunctions(); initHandlebarsTemplate(); - initWebsiteScripts(); \ No newline at end of file From 4eb42298875fe5cf2575f2b8277532eda8bd139e Mon Sep 17 00:00:00 2001 From: ssxcho Date: Wed, 2 Feb 2022 22:36:07 +0400 Subject: [PATCH 059/119] add ability for user to choose html template height, code cleaning --- src/whylogs/viz/jupyter_notebook_viz.py | 136 ++++++++++++++---------- 1 file changed, 82 insertions(+), 54 deletions(-) diff --git a/src/whylogs/viz/jupyter_notebook_viz.py b/src/whylogs/viz/jupyter_notebook_viz.py index 3d8ff288ab..2efb1d2212 100644 --- a/src/whylogs/viz/jupyter_notebook_viz.py +++ b/src/whylogs/viz/jupyter_notebook_viz.py @@ -39,21 +39,21 @@ def __init__(self, profiles: List[DatasetProfile] = None, reference_profiles: Li "Got no profile data, make sure you pass data correctly ") return None - def __display_html(self, output_index, height): + def __display_html(self, template, height): # convert html to iframe and return it wrapped in Ipython...HTML() - iframe = f'''''' + iframe = f'''''' return HTML(iframe) - def __iframe_output_height(self, html_frame_height): + def __get_iframe_output_height(self, html_frame_height): # add all required heights and widths for individual HTMLs to be displayed in notebook - sizes = {'index-hbs-cdn-all-in-for-jupyter-notebook.html': 'height=1000px', - 'index-hbs-cdn-all-in-jupyter-distribution-chart.html': 'height=277px', - 'index-hbs-cdn-all-in-jupyter-full-summary-statistics.html': 'height=250px', - 'index-hbs-cdn-all-in-jupyter-feature-summary-statistics.html': 'height=650px', + sizes = {'index-hbs-cdn-all-in-for-jupyter-notebook.html': '1000px', + 'index-hbs-cdn-all-in-jupyter-distribution-chart.html': '277px', + 'index-hbs-cdn-all-in-jupyter-full-summary-statistics.html': '250px', + 'index-hbs-cdn-all-in-jupyter-feature-summary-statistics.html': '650px', } return str(sizes.get(html_frame_height)) - def __html_template_data(self, index_path): + def __compile_html_template(self, template_path): # bind profile jsons to html template try: from pybars import Compiler @@ -63,7 +63,7 @@ def __html_template_data(self, index_path): logger.debug( "Unable to load pybars; install pybars3 to load profile from directly from the current session " ) - with open(index_path, "r") as file_with_template: + with open(template_path, "r") as file_with_template: source = file_with_template.read() # compile templated files compiler = Compiler() @@ -77,29 +77,44 @@ def __extract_feature_data(self, profile_jsons, feature_name): feature_data[feature_name] = profile_features.get('columns').get(feature_name) return feature_data - def summary(self): - index_path = os.path.abspath(os.path.join( - _MY_DIR, os.pardir, "viewer", - "index-hbs-cdn-all-in-for-jupyter-notebook.html") + def __create_template_path(self, html_file_name): + template_path = os.path.abspath( + os.path.join( + _MY_DIR, os.pardir, "viewer", html_file_name + ) + ) + return template_path + + def summary(self, frame_height=None): + if frame_height: + html_frame_height = frame_height + else: + html_frame_height = self.__get_iframe_output_height( + "index-hbs-cdn-all-in-for-jupyter-notebook.html" + ) + template = self.__compile_html_template( + self.__create_template_path( + "index-hbs-cdn-all-in-for-jupyter-notebook.html" + ) ) - html_frame_height = self.__iframe_output_height( - "index-hbs-cdn-all-in-for-jupyter-notebook.html") - template = self.__html_template_data(index_path) if self.reference_profiles: - output_index = template( + profiles_summary = template( {"profile_from_whylogs": self.profile_jsons[0], "reference_profile": self.reference_profile_jsons[0]} ) + return self.__display_html(profiles_summary, html_frame_height) else: - output_index = template( + target_profile_summary = template( {"profile_from_whylogs": self.profile_jsons[0]} ) - return self.__display_html(output_index, html_frame_height) + return self.__display_html(target_profile_summary, html_frame_height) def download(self, html, path=None, html_file_name=None): # code to write html arg to file and generate name using TimeStamp if path: - output_path = os.path.abspath(os.path.expanduser(path)) + output_path = os.path.abspath( + os.path.expanduser(path) + ) else: output_path = os.path.abspath( os.path.join( @@ -119,16 +134,18 @@ def download(self, html, path=None, html_file_name=None): saved_html.write(html.data) saved_html.close() - def feature(self, names): - index_path = os.path.abspath(os.path.join( - _MY_DIR, os.pardir, "viewer", - "index-hbs-cdn-all-in-jupyter-distribution-chart.html") - ) - - html_frame_height = self.__iframe_output_height( - "index-hbs-cdn-all-in-jupyter-distribution-chart.html" + def feature(self, names, frame_height=None): + if frame_height: + html_frame_height = frame_height + else: + html_frame_height = self.__get_iframe_output_height( + "index-hbs-cdn-all-in-jupyter-distribution-chart.html" + ) + template = self.__compile_html_template( + self.__create_template_path( + "index-hbs-cdn-all-in-jupyter-distribution-chart.html" + ) ) - template = self.__html_template_data(index_path) # replace handlebars for json profiles if self.reference_profiles: profile_feature = json.loads(self.profile_jsons[0]) @@ -138,52 +155,59 @@ def feature(self, names): for name in names: profile_from_whylogs[name] = profile_feature.get('columns').get(name) reference_profile[name] = reference_profile_feature.get('columns').get(name) - output_index = template( + distribution_chart = template( {"profile_from_whylogs": json.dumps(profile_from_whylogs), "reference_profile": json.dumps(reference_profile)} ) - return self.__display_html(output_index, html_frame_height) + return self.__display_html(distribution_chart, html_frame_height) else: logger.warning( "This method has to get both target and reference profiles, with valid feature title" ) return None - def summary_statistics(self, profile): - index_path = os.path.abspath(os.path.join( - _MY_DIR, os.pardir, "viewer", - "index-hbs-cdn-all-in-jupyter-full-summary-statistics.html") + def summary_statistics(self, profile, frame_height=None): + if frame_height: + html_frame_height = frame_height + else: + html_frame_height = self.__get_iframe_output_height( + "index-hbs-cdn-all-in-jupyter-full-summary-statistics.html" + ) + template = self.__compile_html_template( + self.__create_template_path( + "index-hbs-cdn-all-in-jupyter-full-summary-statistics.html" + ) ) - html_frame_height = self.__iframe_output_height( - "index-hbs-cdn-all-in-jupyter-full-summary-statistics.html") - template = self.__html_template_data(index_path) if self.reference_profiles and profile == 'Reference': - output_index = template( + reference_summary_statistics = template( {"reference_profile": self.reference_profile_jsons[0]} ) + return self.__display_html(reference_summary_statistics, html_frame_height) elif profile == 'Target': - output_index = template( + target_profile_statistics = template( {"profile_from_whylogs": self.profile_jsons[0]} ) + return self.__display_html(target_profile_statistics, html_frame_height) else: logger.warning( "Please select from available options, 'Target' or 'Reference'" ) - return self.__display_html(output_index, html_frame_height) - - def feature_summary_statistics(self, feature_name, profile): - index_path = os.path.abspath(os.path.join( - _MY_DIR, os.pardir, "viewer", - "index-hbs-cdn-all-in-jupyter-feature-summary-statistics.html") - ) - html_frame_height = self.__iframe_output_height( - "index-hbs-cdn-all-in-jupyter-feature-summary-statistics.html" + def feature_summary_statistics(self, feature_name, profile, frame_height=None): + if frame_height: + html_frame_height = frame_height + else: + html_frame_height = self.__get_iframe_output_height( + "index-hbs-cdn-all-in-jupyter-feature-summary-statistics.html" + ) + template = self.__compile_html_template( + self.__create_template_path( + "index-hbs-cdn-all-in-jupyter-feature-summary-statistics.html" + ) ) - template = self.__html_template_data(index_path) # replace handlebars for json profiles if self.reference_profiles and profile == 'Reference': - output_index = template( + reference_feature_summary_statistics = template( { "reference_profile": json.dumps( __extract_feature_data( @@ -192,9 +216,11 @@ def feature_summary_statistics(self, feature_name, profile): ) } ) - return self.__display_html(output_index, html_frame_height) + return self.__display_html( + reference_feature_summary_statistics, html_frame_height + ) elif self.profiles and profile == 'Target': - output_index = template( + target_feature_summary_statistics = template( { "profile_from_whylogs": json.dumps( __extract_feature_data( @@ -203,7 +229,9 @@ def feature_summary_statistics(self, feature_name, profile): ) } ) - return self.__display_html(output_index, html_frame_height) + return self.__display_html( + target_feature_summary_statistics, html_frame_height + ) else: logger.warning( "Make sure you have profile logged in and pass a valid feature name" From 1ac37449cecfd995bb1825322932398f346dc995 Mon Sep 17 00:00:00 2001 From: Jirayr-Solvee Date: Sun, 6 Feb 2022 06:58:12 +0400 Subject: [PATCH 060/119] code clearing, better naming --- ...x-hbs-cdn-all-in-for-jupyter-notebook.html | 32 +- ...cdn-all-in-jupyter-distribution-chart.html | 14 +- ...in-jupyter-feature-summary-statistics.html | 22 +- ...ll-in-jupyter-full-summary-statistics.html | 34 +-- src/whylogs/viz/jupyter_notebook_viz.py | 281 +++++++----------- 5 files changed, 162 insertions(+), 221 deletions(-) diff --git a/src/whylogs/viewer/index-hbs-cdn-all-in-for-jupyter-notebook.html b/src/whylogs/viewer/index-hbs-cdn-all-in-for-jupyter-notebook.html index 110b92b5ad..fbd9762e06 100644 --- a/src/whylogs/viewer/index-hbs-cdn-all-in-for-jupyter-notebook.html +++ b/src/whylogs/viewer/index-hbs-cdn-all-in-for-jupyter-notebook.html @@ -281,21 +281,21 @@ .display-flex{ display: flex; } - + .table-border-none { padding: 0; border: none; } - + .flex-direction-colum { display: flex; flex-direction: column; } - + .align-items { align-items: center; } - + .search-input{ padding-top: 0 !important; padding-bottom: 0 !important; @@ -309,28 +309,28 @@ width: 100%; font-size: 14px; } - + .search-input img{ height: 19px; pointer-events: none; } - + input::placeholder { color: var(--secondaryLight1000); } - + .bar.positive { fill: #369BACB2; } - + .bar.negative { fill: #2683C9E5; } - + .text-align-center { text-align: center; } - + .drift-detection { justify-content: space-between; align-items: center; @@ -405,7 +405,7 @@ margin-right: 5px; } - .drift-detection-search-input input::placeholder { + .drift-detection-search-input input::placeholder { font-family: Arial; font-weight: normal; font-size: 13px; @@ -460,7 +460,7 @@ .justify-content-center { justify-content: center; } - + .wl-table-cell__graph-wrap { width: 0; } @@ -551,7 +551,7 @@
          - +
          @@ -818,7 +818,7 @@

          Hold on! :)

          const randomNumbers = (range) => Math.floor(Math.random() * range) - const profileFromCSVfile = {{{reference_profile}}} + const profileFromCSVfile = {{{reference_profile_from_whylogs}}} Handlebars.registerHelper("severeDrift", function () { return randomNumbers(50); @@ -953,7 +953,7 @@

          Hold on! :)

          unknown: true, }; - const getReferenceProfile = () => { return {{{reference_profile}}} } + const getReferenceProfile = () => { return {{{reference_profile_from_whylogs}}} } let searchString = ""; @@ -1058,7 +1058,7 @@

          Hold on! :)

          } } - function openFilter() { + function openFilter() { const $filterOptions = $(".dropdown-container"); const filterClass = $filterOptions.attr("class"); diff --git a/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-distribution-chart.html b/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-distribution-chart.html index 946e9b2241..d82461b52b 100644 --- a/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-distribution-chart.html +++ b/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-distribution-chart.html @@ -27,10 +27,10 @@ :root { /** Branded colors */ - --brandSecondary900: #4f595b; + --brandSecondary900: #4f595b; --secondaryLight1000: #313b3d; /** Purpose colors */ - --tealBackground: #eaf2f3; + --tealBackground: #eaf2f3; } /* RESET STYLE */ @@ -41,7 +41,7 @@ padding: 0; box-sizing: border-box; } - + /* Screen on smaller screens */ .no-responsive { display: none; @@ -142,7 +142,7 @@
          {{#each this}}
          -
          +

          {{@key}}

          @@ -247,7 +247,7 @@

          Hold on! :)

          histogramData = chartData(data) overlappedHistogramData = chartData(referenceData) } - + let yFormat, xFormat; const sizes = new GenerateChartParams($(window).height()-32, $(window).width(), histogramData) @@ -322,13 +322,13 @@

          Hold on! :)

          return svgEl._groups[0][0].outerHTML; } - const profileFromCSVfile = {{{reference_profile}}} + const profileFromCSVfile = {{{reference_profile_from_whylogs}}} Handlebars.registerHelper("getDoubleHistogramChart",(column,key) => { const columnKey = key.data.key if (profileFromCSVfile) { return generateDoubleHistogramChart ( - column, + column, profileFromCSVfile[columnKey] ) } diff --git a/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-feature-summary-statistics.html b/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-feature-summary-statistics.html index 04cdb665a7..d06b807416 100644 --- a/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-feature-summary-statistics.html +++ b/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-feature-summary-statistics.html @@ -43,7 +43,7 @@ @media screen and (min-width: 1000px) { .desktop-content { display: block; - } + } .no-responsive { display: none; } @@ -163,7 +163,7 @@ @media screen and (min-width: 500px) { .desktop-content { display: block; - } + } .no-responsive { display: none; } @@ -349,19 +349,19 @@

          Hold on! :)

          } const randomNumbers = (range) => Math.floor(Math.random() * range) - + Handlebars.registerHelper("distinct", function () { return randomNumbers(50); }); - + Handlebars.registerHelper("missing", function () { return randomNumbers(50); }); - + Handlebars.registerHelper("infinite", function () { return randomNumbers(50); }); - + Handlebars.registerHelper("mean", function (column) { const feture = Object.values(column)[1] if (feture.numberSummary) { @@ -405,7 +405,7 @@

          Hold on! :)

          } return "-"; }); - + Handlebars.registerHelper("zeros", function () { return randomNumbers(50); }); @@ -434,9 +434,9 @@

          Hold on! :)

          function initHandlebarsTemplate() { // Replace this context with JSON from .py file - const targetedProfile = () => { return {{{profile_from_whylogs}}} } - const profileFromCSVfile = () => { return {{{reference_profile}}} } - const context = profileFromCSVfile() ? profileFromCSVfile() : targetedProfile(); + // const targetedProfile = () => { return {{{profile_from_whylogs}}} } + // const profileFromCSVfile = () => { return {{{profile_feature_summary_statistics_from_whylogs}}} } + const context = {{{profile_feature_summary_statistics_from_whylogs}}}; // Config handlebars and pass data to HBS template const source = document.getElementById("entry-template").innerHTML; const template = Handlebars.compile(source); @@ -449,4 +449,4 @@

          Hold on! :)

          registerHandlebarHelperFunctions(); initHandlebarsTemplate(); - \ No newline at end of file + diff --git a/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-full-summary-statistics.html b/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-full-summary-statistics.html index f2d750ecd6..fcc31b8090 100644 --- a/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-full-summary-statistics.html +++ b/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-full-summary-statistics.html @@ -43,7 +43,7 @@ @media screen and (min-width: 1000px) { .desktop-content { display: block; - } + } .no-responsive { display: none; } @@ -107,7 +107,7 @@ position: relative; display: inline-block; } - + .tooltip-full-number .tooltiptext { visibility: hidden; background-color: #0E7384; @@ -126,7 +126,7 @@ font-weight: normal; line-height: 100%; } - + .tooltip-full-number:hover .tooltiptext { visibility: visible; opacity: 1; @@ -155,7 +155,7 @@ @media screen and (min-width: 500px) { .desktop-content { display: block; - } + } .no-responsive { display: none; } @@ -181,20 +181,20 @@
          Missing Cells
          - {{{missingCells}}} + {{{missingCells}}}
          (8.1%)
          Duplicate Rows
          - {{{duplicateRows}}} + {{{duplicateRows}}}
          (0%)
          Total Size
          - {{{totalSize}}} + {{{totalSize}}}
          Average record size
          @@ -253,18 +253,18 @@

          Hold on! :)

          let newValue, suffixe = "" if (bytes === 0) return '0 Bytes'; - + const k = 1024; const dm = decimals < 0 ? 0 : decimals; const sizes = ['Bytes', 'KiB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; - + const i = Math.floor(Math.log(bytes) / Math.log(k)); newValue = parseFloat((bytes / Math.pow(k, i)).toFixed(dm)); suffixe = sizes[i] return {bytes, newValue, suffixe}; } - const numberWithSuffixe = (number, newNumber, suffixe) => + const numberWithSuffixe = (number, newNumber, suffixe) => `
          ${newNumber}
          ${suffixe}
          @@ -273,22 +273,22 @@

          Hold on! :)

          ` const randomNumbers = (range) => Math.floor(Math.random() * range) - + Handlebars.registerHelper("observations", function () { const {value, newValue, suffixe} = abbreviateNumber(randomNumbers(900000000)) return numberWithSuffixe(value, newValue, suffixe); }); - + Handlebars.registerHelper("missingCells", function () { const {value, newValue, suffixe} = abbreviateNumber(randomNumbers(90000)) return numberWithSuffixe(value, newValue, suffixe); }); - + Handlebars.registerHelper("duplicateRows", function () { const {value, newValue, suffixe} = abbreviateNumber(randomNumbers(90000)) return numberWithSuffixe(value, newValue, suffixe); }); - + Handlebars.registerHelper("averageRecordSize", function () { const {bytes, newValue, suffixe} = formatBytes(randomNumbers(900000)) return numberWithSuffixe(bytes, newValue, suffixe); @@ -310,9 +310,9 @@

          Hold on! :)

          function initHandlebarsTemplate() { // Replace this context with JSON from .py file - const targetedProfile = () => { return {{{profile_from_whylogs}}} } - const profileFromCSVfile = () => { return {{{reference_profile}}} } - const context = profileFromCSVfile() ? profileFromCSVfile() : targetedProfile(); + // const targetedProfile = () => { return } + // const profileFromCSVfile = () => { return {{{reference_profile}}} } + const context = {{{profile_summary_statistics_from_whylogs}}} // Config handlebars and pass data to HBS template const source = document.getElementById("entry-template").innerHTML; const template = Handlebars.compile(source); diff --git a/src/whylogs/viz/jupyter_notebook_viz.py b/src/whylogs/viz/jupyter_notebook_viz.py index 2efb1d2212..56d67a6d83 100644 --- a/src/whylogs/viz/jupyter_notebook_viz.py +++ b/src/whylogs/viz/jupyter_notebook_viz.py @@ -1,7 +1,5 @@ import logging import os -import tempfile -import webbrowser import sys import json import html @@ -18,43 +16,48 @@ class DisplayProfile: - - def __init__(self, profiles: List[DatasetProfile] = None, reference_profiles: List[DatasetProfile] = None): - self.profiles = profiles + SUMMARY_REPORT_TEMPLATE_NAME = 'index-hbs-cdn-all-in-for-jupyter-notebook.html' + SUMMARY_STATISTICS_TEMPLATE_NAME = 'index-hbs-cdn-all-in-jupyter-full-summary-statistics.html' + DOUBLE_HISTOGRAM_TEMPLATE_NAME = 'index-hbs-cdn-all-in-jupyter-distribution-chart.html' + FEATURE_STATISTICS_TEMPLATE_NAME = 'index-hbs-cdn-all-in-jupyter-feature-summary-statistics.html' + PAGE_SIZES = { + SUMMARY_REPORT_TEMPLATE_NAME: '1000px', + DOUBLE_HISTOGRAM_TEMPLATE_NAME: '277px', + SUMMARY_STATISTICS_TEMPLATE_NAME: '250px', + FEATURE_STATISTICS_TEMPLATE_NAME: '650px', + } + + def __init__(self, target_profiles: List[DatasetProfile] = None, reference_profiles: List[DatasetProfile] = None): + self.target_profiles = target_profiles self.reference_profiles = reference_profiles # create json output from profiles - if self.profiles: - if len(self.profiles) > 1: + if self.target_profiles: + if len(self.target_profiles) > 1: logger.warning( "More than one profile not implemented yet, default to first profile in the list " ) - self.profile_jsons = [message_to_json(each_prof.to_summary()) - for each_prof in self.profiles] + self.target_profile_jsons = [ + message_to_json(each_prof.to_summary()) for each_prof in self.target_profiles + ] if self.reference_profiles: - self.reference_profile_jsons = [message_to_json(each_prof.to_summary()) - for each_prof in self.reference_profiles] - + self.reference_profile_jsons = [ + message_to_json(each_prof.to_summary()) for each_prof in self.reference_profiles + ] else: logger.warning( "Got no profile data, make sure you pass data correctly ") return None - def __display_html(self, template, height): - # convert html to iframe and return it wrapped in Ipython...HTML() - iframe = f'''''' - return HTML(iframe) + def __get_template_path(self, html_file_name): + template_path = os.path.abspath( + os.path.join( + _MY_DIR, os.pardir, "viewer", html_file_name + ) + ) + return template_path - def __get_iframe_output_height(self, html_frame_height): - # add all required heights and widths for individual HTMLs to be displayed in notebook - sizes = {'index-hbs-cdn-all-in-for-jupyter-notebook.html': '1000px', - 'index-hbs-cdn-all-in-jupyter-distribution-chart.html': '277px', - 'index-hbs-cdn-all-in-jupyter-full-summary-statistics.html': '250px', - 'index-hbs-cdn-all-in-jupyter-feature-summary-statistics.html': '650px', - } - return str(sizes.get(html_frame_height)) - - def __compile_html_template(self, template_path): - # bind profile jsons to html template + def __get_compiled_template(self, template_name): + template_path = self.__get_template_path(template_name) try: from pybars import Compiler except ImportError as e: @@ -70,170 +73,108 @@ def __compile_html_template(self, template_path): template = compiler.compile(source) return template - def __extract_feature_data(self, profile_jsons, feature_name): + def __pull_feature_data(self, profile_jsons, feature_name): profile_features = json.loads(profile_jsons[0]) feature_data = {} feature_data['properties'] = profile_features.get('properties') feature_data[feature_name] = profile_features.get('columns').get(feature_name) return feature_data - def __create_template_path(self, html_file_name): - template_path = os.path.abspath( - os.path.join( - _MY_DIR, os.pardir, "viewer", html_file_name - ) - ) - return template_path + # rename + def __display_rendered_template(self, template, template_name, height): + if not height: + height = self.PAGE_SIZES[template_name] + # convert html to iframe and return it wrapped in Ipython...HTML() + iframe = f'''''' + return HTML(iframe) def summary(self, frame_height=None): - if frame_height: - html_frame_height = frame_height - else: - html_frame_height = self.__get_iframe_output_height( - "index-hbs-cdn-all-in-for-jupyter-notebook.html" - ) - template = self.__compile_html_template( - self.__create_template_path( - "index-hbs-cdn-all-in-for-jupyter-notebook.html" - ) - ) + template = self.__get_compiled_template(self.SUMMARY_REPORT_TEMPLATE_NAME) + profiles_summary = {"profile_from_whylogs": self.target_profile_jsons[0]} if self.reference_profiles: - profiles_summary = template( - {"profile_from_whylogs": self.profile_jsons[0], - "reference_profile": self.reference_profile_jsons[0]} - ) - return self.__display_html(profiles_summary, html_frame_height) - else: - target_profile_summary = template( - {"profile_from_whylogs": self.profile_jsons[0]} - ) - return self.__display_html(target_profile_summary, html_frame_height) - - def download(self, html, path=None, html_file_name=None): - # code to write html arg to file and generate name using TimeStamp - if path: - output_path = os.path.abspath( - os.path.expanduser(path) - ) - else: - output_path = os.path.abspath( - os.path.join( - os.pardir, "html_reports" - ) - ) - data_timestamp = '' - if html_file_name: - file_name = html_file_name - elif self.reference_profiles: - data_timestamp = self.reference_profiles[0].dataset_timestamp - else: - data_timestamp = self.profiles[0].dataset_timestamp - - full_path = os.path.join(output_path, str(data_timestamp)+".html") - with open(full_path, "w") as saved_html: - saved_html.write(html.data) - saved_html.close() - - def feature(self, names, frame_height=None): - if frame_height: - html_frame_height = frame_height - else: - html_frame_height = self.__get_iframe_output_height( - "index-hbs-cdn-all-in-jupyter-distribution-chart.html" - ) - template = self.__compile_html_template( - self.__create_template_path( - "index-hbs-cdn-all-in-jupyter-distribution-chart.html" - ) + profiles_summary["reference_profile_from_whylogs"] = self.reference_profile_jsons[0] + return self.__display_rendered_template( + template(profiles_summary), + self.SUMMARY_REPORT_TEMPLATE_NAME, + frame_height ) - # replace handlebars for json profiles + + def feature(self, feature_names, frame_height=None): + if type(feature_names) is not list: + feature_names = [feature_names] + template = self.__get_compiled_template(self.DOUBLE_HISTOGRAM_TEMPLATE_NAME) if self.reference_profiles: - profile_feature = json.loads(self.profile_jsons[0]) - reference_profile_feature = json.loads(self.reference_profile_jsons[0]) - profile_from_whylogs = {} - reference_profile = {} - for name in names: - profile_from_whylogs[name] = profile_feature.get('columns').get(name) - reference_profile[name] = reference_profile_feature.get('columns').get(name) - distribution_chart = template( - {"profile_from_whylogs": json.dumps(profile_from_whylogs), - "reference_profile": json.dumps(reference_profile)} + target_profile_columns = json.loads(self.target_profile_jsons[0]).get('columns') + reference_profile_columns = json.loads(self.reference_profile_jsons[0]).get('columns') + target_profile_features, reference_profile_features = {}, {} + for feature_name in feature_names: + target_profile_features[feature_name] = target_profile_columns.get(feature_name) + reference_profile_features[feature_name] = reference_profile_columns.get( + feature_name + ) + distribution_chart = template({ + "profile_from_whylogs": json.dumps(target_profile_features), + "reference_profile_from_whylogs": json.dumps(reference_profile_features) + }) + return self.__display_rendered_template( + distribution_chart, + self.DOUBLE_HISTOGRAM_TEMPLATE_NAME, + frame_height ) - return self.__display_html(distribution_chart, html_frame_height) else: logger.warning( "This method has to get both target and reference profiles, with valid feature title" ) return None - def summary_statistics(self, profile, frame_height=None): - if frame_height: - html_frame_height = frame_height + def summary_statistics(self, profile_name=None, frame_height=None): + template = self.__get_compiled_template(self.SUMMARY_STATISTICS_TEMPLATE_NAME) + if self.reference_profiles: + if not profile_name or profile_name.lower() == 'reference': + profile_statistics = self.reference_profile_jsons[0] else: - html_frame_height = self.__get_iframe_output_height( - "index-hbs-cdn-all-in-jupyter-full-summary-statistics.html" - ) - template = self.__compile_html_template( - self.__create_template_path( - "index-hbs-cdn-all-in-jupyter-full-summary-statistics.html" - ) + profile_statistics = self.target_profile_jsons[0] + rendered_template = template({ + "profile_summary_statistics_from_whylogs": profile_statistics + }) + return self.__display_rendered_template( + rendered_template, + self.SUMMARY_STATISTICS_TEMPLATE_NAME, + frame_height ) - if self.reference_profiles and profile == 'Reference': - reference_summary_statistics = template( - {"reference_profile": self.reference_profile_jsons[0]} - ) - return self.__display_html(reference_summary_statistics, html_frame_height) - elif profile == 'Target': - target_profile_statistics = template( - {"profile_from_whylogs": self.profile_jsons[0]} - ) - return self.__display_html(target_profile_statistics, html_frame_height) - else: - logger.warning( - "Please select from available options, 'Target' or 'Reference'" - ) - def feature_summary_statistics(self, feature_name, profile, frame_height=None): - if frame_height: - html_frame_height = frame_height + def feature_summary_statistics(self, feature_name, profile_name, frame_height=None): + template = self.__get_compiled_template(self.FEATURE_STATISTICS_TEMPLATE_NAME) + if self.reference_profiles and (not profile_name or profile_name.lower() == 'reference'): + selected_profile = self.reference_profile_jsons else: - html_frame_height = self.__get_iframe_output_height( - "index-hbs-cdn-all-in-jupyter-feature-summary-statistics.html" - ) - template = self.__compile_html_template( - self.__create_template_path( - "index-hbs-cdn-all-in-jupyter-feature-summary-statistics.html" - ) + selected_profile = self.target_profile_jsons + + rendered_template = template({ + "profile_feature_summary_statistics_from_whylogs": json.dumps( + self.__pull_feature_data(selected_profile, feature_name) + )} ) - # replace handlebars for json profiles - if self.reference_profiles and profile == 'Reference': - reference_feature_summary_statistics = template( - { - "reference_profile": json.dumps( - __extract_feature_data( - self, self.reference_profile_jsons, feature_name - ) - ) - } - ) - return self.__display_html( - reference_feature_summary_statistics, html_frame_height - ) - elif self.profiles and profile == 'Target': - target_feature_summary_statistics = template( - { - "profile_from_whylogs": json.dumps( - __extract_feature_data( - self, self.profile_jsons, feature_name - ) - ) - } - ) - return self.__display_html( - target_feature_summary_statistics, html_frame_height - ) + return self.__display_rendered_template( + rendered_template, + self.FEATURE_STATISTICS_TEMPLATE_NAME, + frame_height + ) + + def download(self, html, prefered_path=None, html_file_name=None): + if not html_file_name: + if self.reference_profiles: + html_file_name = self.reference_profiles[0].dataset_timestamp + else: + html_file_name = self.target_profiles[0].dataset_timestamp + + if prefered_path: + path = os.path.expanduser(prefered_path) else: - logger.warning( - "Make sure you have profile logged in and pass a valid feature name" - ) - return None + path = os.path.join(os.pardir, "html_reports", str(html_file_name)+".html") + + full_path = os.path.abspath(path) + with open(full_path, "w") as saved_html: + saved_html.write(html.data) + saved_html.close() + return None From 30c9f6b5a2bebadbdf02ba200f25fee3a54ccaef Mon Sep 17 00:00:00 2001 From: Jirayr-Solvee Date: Sun, 6 Feb 2022 07:10:19 +0400 Subject: [PATCH 061/119] remove comment whitespaces --- src/whylogs/viz/jupyter_notebook_viz.py | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/whylogs/viz/jupyter_notebook_viz.py b/src/whylogs/viz/jupyter_notebook_viz.py index 56d67a6d83..90f0f53ce9 100644 --- a/src/whylogs/viz/jupyter_notebook_viz.py +++ b/src/whylogs/viz/jupyter_notebook_viz.py @@ -80,7 +80,6 @@ def __pull_feature_data(self, profile_jsons, feature_name): feature_data[feature_name] = profile_features.get('columns').get(feature_name) return feature_data - # rename def __display_rendered_template(self, template, template_name, height): if not height: height = self.PAGE_SIZES[template_name] @@ -149,7 +148,6 @@ def feature_summary_statistics(self, feature_name, profile_name, frame_height=No selected_profile = self.reference_profile_jsons else: selected_profile = self.target_profile_jsons - rendered_template = template({ "profile_feature_summary_statistics_from_whylogs": json.dumps( self.__pull_feature_data(selected_profile, feature_name) @@ -167,12 +165,10 @@ def download(self, html, prefered_path=None, html_file_name=None): html_file_name = self.reference_profiles[0].dataset_timestamp else: html_file_name = self.target_profiles[0].dataset_timestamp - if prefered_path: path = os.path.expanduser(prefered_path) else: path = os.path.join(os.pardir, "html_reports", str(html_file_name)+".html") - full_path = os.path.abspath(path) with open(full_path, "w") as saved_html: saved_html.write(html.data) From 1ae6c0838414554763fda2e50e7d72dc9683971a Mon Sep 17 00:00:00 2001 From: Jirayr-Solvee Date: Mon, 7 Feb 2022 09:16:09 +0400 Subject: [PATCH 062/119] add documentation in notebook, naming fixes --- examples/Profile_Viewer_In_Notebook.ipynb | 214 +++++++++++++++++----- src/whylogs/viz/__init__.py | 4 +- src/whylogs/viz/jupyter_notebook_viz.py | 31 ++-- 3 files changed, 185 insertions(+), 64 deletions(-) diff --git a/examples/Profile_Viewer_In_Notebook.ipynb b/examples/Profile_Viewer_In_Notebook.ipynb index 7e69ca7a47..35798b9b21 100644 --- a/examples/Profile_Viewer_In_Notebook.ipynb +++ b/examples/Profile_Viewer_In_Notebook.ipynb @@ -5,7 +5,26 @@ "id": "6b36ea8e", "metadata": {}, "source": [ - "# Profiler Viewer In Notebook" + "# 📈 Whylogs Profile Vizualization\n", + "### gives you various ways to simplify the proccess of detecting dataset drift. Bellow you can see the instructions for creating dummy dataset and list of currently available visual reports." + ] + }, + { + "cell_type": "markdown", + "id": "be56fca7", + "metadata": {}, + "source": [ + "### 🗂️Install dependencies and make imports" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "id": "29e48da5", + "metadata": {}, + "outputs": [], + "source": [ + "!pip install faker" ] }, { @@ -16,7 +35,9 @@ "outputs": [], "source": [ "import numpy as np\n", - "import datetime" + "import datetime\n", + "from collections import OrderedDict\n", + "from faker import Faker" ] }, { @@ -27,8 +48,7 @@ "outputs": [], "source": [ "from whylogs import get_or_create_session\n", - "from whylogs.core import DatasetProfile\n", - "from whylogs.viz import DisplayProfile\n" + "from whylogs.viz import NotebookProfileViewer" ] }, { @@ -36,17 +56,7 @@ "id": "272f6054", "metadata": {}, "source": [ - "## Data for Logging" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "id": "29e48da5", - "metadata": {}, - "outputs": [], - "source": [ - "!pip install faker" + "### ♻️Create dummy data" ] }, { @@ -56,15 +66,12 @@ "metadata": {}, "outputs": [], "source": [ - "from collections import OrderedDict\n", - "from faker import Faker\n", - "\n", "locales = OrderedDict([\n", " ('en-US', 1),\n", " ('fr-FR', 2),\n", " ('ja_JP', 2),\n", "])\n", - "fake= Faker(locales)\n", + "fake = Faker(locales)\n", "distribution = np.concatenate((np.random.normal(0.1, 0.1, 500), np.random.normal(0.6, 0.2, 500)))" ] }, @@ -85,17 +92,19 @@ "source": [ "session = get_or_create_session()\n", "def profile_generator():\n", - " with session.logger(\"mytestytest\",dataset_timestamp=datetime.datetime(2021, 6, 2)) as logger:\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", + " 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()" + "\n", + "target_profile = profile_generator()\n", + "reference_profile = profile_generator() " ] }, { @@ -103,15 +112,16 @@ "id": "8390f360", "metadata": {}, "source": [ - "## 👀 data visualization" + "## ✨ Vizualize profiles with Whylogs" ] }, { "cell_type": "markdown", - "id": "650d44c4", + "id": "562fbacf", "metadata": {}, "source": [ - "Pass profile data to `DisplayProfile` and show histogram data by calling `summary()` method, it will display a summary of your profiled dataset." + "### Initialization\n", + "initialize Profile viewer by passing profiles for which you want to get the visualizations" ] }, { @@ -121,8 +131,17 @@ "metadata": {}, "outputs": [], "source": [ - "visualization=DisplayProfile([profile])\n", - "visualization.summary()\n" + "# should we allow multiple profiles?\n", + "visualization = NotebookProfileViewer(target_profiles=[target_profile], reference_profiles=[reference_profile])" + ] + }, + { + "cell_type": "markdown", + "id": "87ea53b6", + "metadata": {}, + "source": [ + "###### `*target_profiles`: Profiled dataset which will be reffered as `target`\n", + "###### `*reference_profiles`: Profiled dataset which will be reffered as `reference`" ] }, { @@ -130,7 +149,15 @@ "id": "9908a9f9", "metadata": {}, "source": [ - "### Logging reference profile" + "### Summary Drift Report" + ] + }, + { + "cell_type": "markdown", + "id": "650d44c4", + "metadata": {}, + "source": [ + "You can get summary drift report for `target` and `reference` profiles features" ] }, { @@ -140,15 +167,31 @@ "metadata": {}, "outputs": [], "source": [ - "reference_profile=profile_generator() " + "visualization.summary_drift_report(preferred_cell_height=\"1000px\")" + ] + }, + { + "cell_type": "markdown", + "id": "c4be405d", + "metadata": {}, + "source": [ + "###### `preferred_cell_height`: height in `px` for generated vizualization cell " ] }, { "cell_type": "markdown", - "id": "2768a074", + "id": "4dd9e690", "metadata": {}, "source": [ - "### Add reference profile to viewer and open" + "### Double histogram" + ] + }, + { + "cell_type": "markdown", + "id": "28b512ca", + "metadata": {}, + "source": [ + "You can get double histogram for any of your features" ] }, { @@ -158,34 +201,87 @@ "metadata": {}, "outputs": [], "source": [ - "visualization=DisplayProfile([profile], [reference_profile])\n", - "visualization.summary()" + "visualization.double_histogram(feature_names=\"uniform_integers\")" ] }, { "cell_type": "markdown", - "id": "4dd9e690", + "id": "af84a332", "metadata": {}, "source": [ - "### Display double histogram of a feature" + "###### `*feature_names`: string or list of strings containing name of the features for which you want to see double histogram\n", + "###### `preferred_cell_height`: height in `px` for generated vizualization cell " ] }, { "cell_type": "markdown", - "id": "28b512ca", + "id": "d318761d", + "metadata": {}, + "source": [ + "### Summary Statistics" + ] + }, + { + "cell_type": "markdown", + "id": "32974704", + "metadata": {}, + "source": [ + "You can get set of useful statistics for both `target` and `reference` by passing the name" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "id": "d68c5e6a", + "metadata": {}, + "outputs": [], + "source": [ + "visualization.summary_statistics(profile=\"target\")" + ] + }, + { + "cell_type": "markdown", + "id": "2fc9c79e", + "metadata": {}, + "source": [ + "###### `profile_name`: `\"target\"` or `\"reference\"`\n", + "###### `prefered_cell_height`: height in `px` for generated vizualization cell " + ] + }, + { + "cell_type": "markdown", + "id": "78db1538", + "metadata": {}, + "source": [ + "### Feature Summary Statistics" + ] + }, + { + "cell_type": "markdown", + "id": "4dc0e3f6", "metadata": {}, "source": [ - "Both target profile and reference profile must be passed to `DisplayProfile`. By calling `feature()` method with your preferred feature title (`feature(\"title\")`) detailed double histogram will be displayed bellow." + "You can get set of useful statistics for features by passing the profile and feature names" ] }, { "cell_type": "code", "execution_count": null, - "id": "02f38de0", + "id": "fb77bcd5", "metadata": {}, "outputs": [], "source": [ - "visualization.feature(\"uniform_integers\")" + "visualization.feature_summary_statistics(feature_name\"uniform_integers\", profile=\"reference\")" + ] + }, + { + "cell_type": "markdown", + "id": "8b483a1d", + "metadata": {}, + "source": [ + "###### `*feature_name`: Any feature name from your profiled dataset\n", + "###### `profile_name`: `\"target\"` or `\"reference\"`\n", + "###### `prefered_cell_height`: height in `px` for generated vizualization cell " ] }, { @@ -196,6 +292,24 @@ "### Download prefered cell output" ] }, + { + "cell_type": "markdown", + "id": "2015ff5d", + "metadata": {}, + "source": [ + "You can also download any of those visualisation in `HTML` format for further analysys, by passing the vizualization name" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "id": "980d7236", + "metadata": {}, + "outputs": [], + "source": [ + "visualization.download(html=visualization.summary_drift_report(), html_file_name='example')" + ] + }, { "cell_type": "markdown", "id": "01fbed2c", @@ -208,20 +322,28 @@ "If name of the file is not passed it will be name of the dataset followed by timestamp of the profile by default. " ] }, + { + "cell_type": "markdown", + "id": "7ffc293c", + "metadata": {}, + "source": [ + "###### `*feature_name`: Any feature name from your profiled dataset\n", + "###### `preferred_path`: save path `default:` `/html_reports` located in whylogs directory\n", + "###### `html_file_name`: name of the file `default:` name of the dataset followed by timestamp of the profile" + ] + }, { "cell_type": "code", "execution_count": null, - "id": "980d7236", + "id": "8eaac410", "metadata": {}, "outputs": [], - "source": [ - "visualization.download(visualization.summary(), html_file_name='example')" - ] + "source": [] } ], "metadata": { "kernelspec": { - "display_name": "Python 3 (ipykernel)", + "display_name": "Python 3", "language": "python", "name": "python3" }, diff --git a/src/whylogs/viz/__init__.py b/src/whylogs/viz/__init__.py index ccb1633ded..50f3404926 100644 --- a/src/whylogs/viz/__init__.py +++ b/src/whylogs/viz/__init__.py @@ -1,6 +1,6 @@ from .browser_viz import profile_viewer -from .jupyter_notebook_viz import DisplayProfile +from .jupyter_notebook_viz import NotebookProfileViewer from .visualizer import BaseProfileVisualizer, ProfileVisualizer -__ALL__ = [ProfileVisualizer, BaseProfileVisualizer, DisplayProfile, profile_viewer] +__ALL__ = [ProfileVisualizer, BaseProfileVisualizer, NotebookProfileViewer, profile_viewer] diff --git a/src/whylogs/viz/jupyter_notebook_viz.py b/src/whylogs/viz/jupyter_notebook_viz.py index 90f0f53ce9..d49e63624b 100644 --- a/src/whylogs/viz/jupyter_notebook_viz.py +++ b/src/whylogs/viz/jupyter_notebook_viz.py @@ -15,7 +15,7 @@ logger = logging.getLogger(__name__) -class DisplayProfile: +class NotebookProfileViewer: SUMMARY_REPORT_TEMPLATE_NAME = 'index-hbs-cdn-all-in-for-jupyter-notebook.html' SUMMARY_STATISTICS_TEMPLATE_NAME = 'index-hbs-cdn-all-in-jupyter-full-summary-statistics.html' DOUBLE_HISTOGRAM_TEMPLATE_NAME = 'index-hbs-cdn-all-in-jupyter-distribution-chart.html' @@ -87,7 +87,7 @@ def __display_rendered_template(self, template, template_name, height): iframe = f'''''' return HTML(iframe) - def summary(self, frame_height=None): + def summary_drift_report(self, preferred_cell_height=None): template = self.__get_compiled_template(self.SUMMARY_REPORT_TEMPLATE_NAME) profiles_summary = {"profile_from_whylogs": self.target_profile_jsons[0]} if self.reference_profiles: @@ -95,10 +95,10 @@ def summary(self, frame_height=None): return self.__display_rendered_template( template(profiles_summary), self.SUMMARY_REPORT_TEMPLATE_NAME, - frame_height + preferred_cell_height ) - def feature(self, feature_names, frame_height=None): + def double_histogram(self, feature_names, preferred_cell_height=None): if type(feature_names) is not list: feature_names = [feature_names] template = self.__get_compiled_template(self.DOUBLE_HISTOGRAM_TEMPLATE_NAME) @@ -118,7 +118,7 @@ def feature(self, feature_names, frame_height=None): return self.__display_rendered_template( distribution_chart, self.DOUBLE_HISTOGRAM_TEMPLATE_NAME, - frame_height + preferred_cell_height ) else: logger.warning( @@ -126,11 +126,10 @@ def feature(self, feature_names, frame_height=None): ) return None - def summary_statistics(self, profile_name=None, frame_height=None): + def summary_statistics(self, profile='reference', preferred_cell_height=None): template = self.__get_compiled_template(self.SUMMARY_STATISTICS_TEMPLATE_NAME) - if self.reference_profiles: - if not profile_name or profile_name.lower() == 'reference': - profile_statistics = self.reference_profile_jsons[0] + if self.reference_profiles and profile.lower() == 'reference': + profile_statistics = self.reference_profile_jsons[0] else: profile_statistics = self.target_profile_jsons[0] rendered_template = template({ @@ -139,12 +138,12 @@ def summary_statistics(self, profile_name=None, frame_height=None): return self.__display_rendered_template( rendered_template, self.SUMMARY_STATISTICS_TEMPLATE_NAME, - frame_height + preferred_cell_height ) - def feature_summary_statistics(self, feature_name, profile_name, frame_height=None): + def feature_summary_statistics(self, feature_name, profile='reference', preferred_cell_height=None): template = self.__get_compiled_template(self.FEATURE_STATISTICS_TEMPLATE_NAME) - if self.reference_profiles and (not profile_name or profile_name.lower() == 'reference'): + if self.reference_profiles and profile.lower() == 'reference': selected_profile = self.reference_profile_jsons else: selected_profile = self.target_profile_jsons @@ -156,17 +155,17 @@ def feature_summary_statistics(self, feature_name, profile_name, frame_height=No return self.__display_rendered_template( rendered_template, self.FEATURE_STATISTICS_TEMPLATE_NAME, - frame_height + preferred_cell_height ) - def download(self, html, prefered_path=None, html_file_name=None): + def download(self, html, preferred_path=None, html_file_name=None): if not html_file_name: if self.reference_profiles: html_file_name = self.reference_profiles[0].dataset_timestamp else: html_file_name = self.target_profiles[0].dataset_timestamp - if prefered_path: - path = os.path.expanduser(prefered_path) + if preferred_path: + path = os.path.expanduser(preferred_path) else: path = os.path.join(os.pardir, "html_reports", str(html_file_name)+".html") full_path = os.path.abspath(path) From 695a31b191f512daa1e54bc84d46382a4f286793 Mon Sep 17 00:00:00 2001 From: Jirayr-Solvee Date: Mon, 7 Feb 2022 18:45:57 +0400 Subject: [PATCH 063/119] small notebook fixes --- examples/Profile_Viewer_In_Notebook.ipynb | 24 ++++++++--------------- 1 file changed, 8 insertions(+), 16 deletions(-) diff --git a/examples/Profile_Viewer_In_Notebook.ipynb b/examples/Profile_Viewer_In_Notebook.ipynb index 35798b9b21..02bdd50ea9 100644 --- a/examples/Profile_Viewer_In_Notebook.ipynb +++ b/examples/Profile_Viewer_In_Notebook.ipynb @@ -5,7 +5,7 @@ "id": "6b36ea8e", "metadata": {}, "source": [ - "# 📈 Whylogs Profile Vizualization\n", + "# 📈 Whylogs Profile Visualization\n", "### gives you various ways to simplify the proccess of detecting dataset drift. Bellow you can see the instructions for creating dummy dataset and list of currently available visual reports." ] }, @@ -121,7 +121,7 @@ "metadata": {}, "source": [ "### Initialization\n", - "initialize Profile viewer by passing profiles for which you want to get the visualizations" + "Initialize Profile viewer by passing profiles for which you want to get the visualizations" ] }, { @@ -175,7 +175,7 @@ "id": "c4be405d", "metadata": {}, "source": [ - "###### `preferred_cell_height`: height in `px` for generated vizualization cell " + "###### `preferred_cell_height`: height in `px` for generated visualization cell " ] }, { @@ -209,8 +209,8 @@ "id": "af84a332", "metadata": {}, "source": [ - "###### `*feature_names`: string or list of strings containing name of the features for which you want to see double histogram\n", - "###### `preferred_cell_height`: height in `px` for generated vizualization cell " + "###### `*feature_names`: string or list of strings containing names of the features for which you want to see double histogram\n", + "###### `preferred_cell_height`: height in `px` for generated visualization cell " ] }, { @@ -245,7 +245,7 @@ "metadata": {}, "source": [ "###### `profile_name`: `\"target\"` or `\"reference\"`\n", - "###### `prefered_cell_height`: height in `px` for generated vizualization cell " + "###### `prefered_cell_height`: height in `px` for generated visualization cell " ] }, { @@ -281,7 +281,7 @@ "source": [ "###### `*feature_name`: Any feature name from your profiled dataset\n", "###### `profile_name`: `\"target\"` or `\"reference\"`\n", - "###### `prefered_cell_height`: height in `px` for generated vizualization cell " + "###### `prefered_cell_height`: height in `px` for generated visualization cell " ] }, { @@ -297,7 +297,7 @@ "id": "2015ff5d", "metadata": {}, "source": [ - "You can also download any of those visualisation in `HTML` format for further analysys, by passing the vizualization name" + "You can also download any of those visualisation in `HTML` format for further analysys, by passing the visualization name" ] }, { @@ -331,14 +331,6 @@ "###### `preferred_path`: save path `default:` `/html_reports` located in whylogs directory\n", "###### `html_file_name`: name of the file `default:` name of the dataset followed by timestamp of the profile" ] - }, - { - "cell_type": "code", - "execution_count": null, - "id": "8eaac410", - "metadata": {}, - "outputs": [], - "source": [] } ], "metadata": { From 57cd18ce7642af80bda2131bee7a86d085d2069e Mon Sep 17 00:00:00 2001 From: Jirayr-Solvee Date: Tue, 8 Feb 2022 18:11:13 +0400 Subject: [PATCH 064/119] add empty folder and gitignore, notebook fixes --- examples/Profile_Viewer_In_Notebook.ipynb | 5 +++-- html_reports/.gitignore | 1 + 2 files changed, 4 insertions(+), 2 deletions(-) create mode 100644 html_reports/.gitignore diff --git a/examples/Profile_Viewer_In_Notebook.ipynb b/examples/Profile_Viewer_In_Notebook.ipynb index 02bdd50ea9..340ad82476 100644 --- a/examples/Profile_Viewer_In_Notebook.ipynb +++ b/examples/Profile_Viewer_In_Notebook.ipynb @@ -24,7 +24,8 @@ "metadata": {}, "outputs": [], "source": [ - "!pip install faker" + "!pip install faker\n", + "!pip install pybars3" ] }, { @@ -271,7 +272,7 @@ "metadata": {}, "outputs": [], "source": [ - "visualization.feature_summary_statistics(feature_name\"uniform_integers\", profile=\"reference\")" + "visualization.feature_summary_statistics(feature_name=\"uniform_integers\", profile=\"reference\")" ] }, { diff --git a/html_reports/.gitignore b/html_reports/.gitignore new file mode 100644 index 0000000000..2d19fc766d --- /dev/null +++ b/html_reports/.gitignore @@ -0,0 +1 @@ +*.html From 39df1efa7f73742f993abd799967e47289b8af39 Mon Sep 17 00:00:00 2001 From: Perch2005 Date: Tue, 8 Feb 2022 21:49:21 +0300 Subject: [PATCH 065/119] make filter checkboxes square --- .../viewer/index-hbs-cdn-all-in-for-jupyter-notebook.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/whylogs/viewer/index-hbs-cdn-all-in-for-jupyter-notebook.html b/src/whylogs/viewer/index-hbs-cdn-all-in-for-jupyter-notebook.html index fbd9762e06..c9174eb939 100644 --- a/src/whylogs/viewer/index-hbs-cdn-all-in-for-jupyter-notebook.html +++ b/src/whylogs/viewer/index-hbs-cdn-all-in-for-jupyter-notebook.html @@ -454,7 +454,7 @@ } .form-check-input[type=checkbox] { - border-radius: 1.25em; + border-radius: 2px; } .justify-content-center { From c71575ec0a62bdb9a35cd7dc807b23397f4e38dd Mon Sep 17 00:00:00 2001 From: Perch2005 Date: Tue, 8 Feb 2022 21:56:02 +0300 Subject: [PATCH 066/119] code cleaning --- ...ex-hbs-cdn-all-in-for-jupyter-notebook.html | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/src/whylogs/viewer/index-hbs-cdn-all-in-for-jupyter-notebook.html b/src/whylogs/viewer/index-hbs-cdn-all-in-for-jupyter-notebook.html index c9174eb939..a98c1932ae 100644 --- a/src/whylogs/viewer/index-hbs-cdn-all-in-for-jupyter-notebook.html +++ b/src/whylogs/viewer/index-hbs-cdn-all-in-for-jupyter-notebook.html @@ -680,6 +680,9 @@

          Hold on! :)

          - + \ No newline at end of file From 17e0cd0f14d4ab853dd6e1b15269217593aa6a75 Mon Sep 17 00:00:00 2001 From: Perch2005 Date: Sun, 13 Feb 2022 21:57:35 +0300 Subject: [PATCH 073/119] fix the position of the distribution chart title --- ...dex-hbs-cdn-all-in-jupyter-distribution-chart.html | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-distribution-chart.html b/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-distribution-chart.html index 76950bad14..62492518c2 100644 --- a/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-distribution-chart.html +++ b/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-distribution-chart.html @@ -111,6 +111,9 @@ display: flex; } + .align-items-flex-end { + align-items: flex-end; + } .chart-box-title { width: 98%; @@ -118,6 +121,8 @@ } .chart-box-title p{ + margin-bottom: 0; + margin-top: 1rem; font-family: Asap; font-weight: bold; font-size: 18px; @@ -142,7 +147,7 @@
          {{#each this}}
          -
          +

          {{@key}}

          @@ -176,10 +181,6 @@

          Hold on! :)

          + + + + + + + + + + + + + + From 8291b3521e2b1ef1d0ad14c33b3b2180aebff417 Mon Sep 17 00:00:00 2001 From: ssxcho Date: Wed, 16 Feb 2022 04:57:56 +0400 Subject: [PATCH 082/119] add constraints report backend, add constraints report in notebook --- examples/Profile_Viewer_In_Notebook.ipynb | 113 +++++++++++++++++++++- src/whylogs/viz/jupyter_notebook_viz.py | 13 +++ 2 files changed, 121 insertions(+), 5 deletions(-) diff --git a/examples/Profile_Viewer_In_Notebook.ipynb b/examples/Profile_Viewer_In_Notebook.ipynb index 340ad82476..8bf6036019 100644 --- a/examples/Profile_Viewer_In_Notebook.ipynb +++ b/examples/Profile_Viewer_In_Notebook.ipynb @@ -36,6 +36,7 @@ "outputs": [], "source": [ "import numpy as np\n", + "import pandas as pd\n", "import datetime\n", "from collections import OrderedDict\n", "from faker import Faker" @@ -49,7 +50,19 @@ "outputs": [], "source": [ "from whylogs import get_or_create_session\n", - "from whylogs.viz import NotebookProfileViewer" + "from whylogs.viz import NotebookProfileViewer\n", + "from whylogs.core.statistics.constraints import (\n", + " columnValuesInSetConstraint,\n", + " containsEmailConstraint,\n", + " minBetweenConstraint,\n", + " maxLessThanEqualConstraint,\n", + " parametrizedKSTestPValueGreaterThanConstraint,\n", + " columnsMatchSetConstraint,\n", + " columnPairValuesInSetConstraint,\n", + " sumOfRowValuesOfMultipleColumnsEqualsConstraint,\n", + " columnValuesUniqueWithinRow,\n", + " DatasetConstraints\n", + ")" ] }, { @@ -102,8 +115,9 @@ " logger.log({\"moah_data\": 1})\n", " logger.log({\"moah_data\": 1})\n", " logger.log({\"moah_data\": 5})\n", - " return logger.profile\n", "\n", + " return logger.profile\n", + " \n", "target_profile = profile_generator()\n", "reference_profile = profile_generator() " ] @@ -272,7 +286,7 @@ "metadata": {}, "outputs": [], "source": [ - "visualization.feature_summary_statistics(feature_name=\"uniform_integers\", profile=\"reference\")" + "visualization.feature_summary_statistics(feature_name=\"mixture_distribution\", profile=\"reference\")" ] }, { @@ -285,6 +299,87 @@ "###### `prefered_cell_height`: height in `px` for generated visualization cell " ] }, + { + "cell_type": "markdown", + "id": "a3469ba2", + "metadata": {}, + "source": [ + "### Generate constraints" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "id": "dafab41d", + "metadata": {}, + "outputs": [], + "source": [ + "def get_sample_dataset_constraints():\n", + " cvisc = columnValuesInSetConstraint(value_set={2, 5, 8})\n", + " email_constraint = containsEmailConstraint()\n", + "\n", + " min_gt_constraint = minBetweenConstraint(lower_value=1, upper_value=5)\n", + " max_le_constraint = maxLessThanEqualConstraint(value=100)\n", + "\n", + " distribution = np.random.normal(0, 1, 50)\n", + "\n", + " ks_test_p_value_constraint = parametrizedKSTestPValueGreaterThanConstraint(\n", + " distribution,\n", + " p_value=0.5,\n", + " name=\"has a standard normal distribution\"\n", + " )\n", + "\n", + " set1 = set([\"col1\", \"col2\"])\n", + " columns_match_constraint = columnsMatchSetConstraint(set1)\n", + "\n", + " val_set = {(1, 2), (3, 5)}\n", + " col_set = [\"A\", \"B\"]\n", + " mcv_constraints = [\n", + " columnPairValuesInSetConstraint(column_A=\"A\", column_B=\"B\", value_set=val_set),\n", + " sumOfRowValuesOfMultipleColumnsEqualsConstraint(columns=col_set, value=100),\n", + " columnValuesUniqueWithinRow(column_A=\"A\", verbose=True),\n", + " ]\n", + "\n", + " return DatasetConstraints(\n", + " None,\n", + " value_constraints={\"A\": [cvisc], \"users\": [email_constraint]},\n", + " summary_constraints={\"B\": [max_le_constraint, min_gt_constraint], \"value\": [ks_test_p_value_constraint]},\n", + " table_shape_constraints=[columns_match_constraint],\n", + " multi_column_value_constraints=mcv_constraints,\n", + " )\n", + "\n", + "data = pd.DataFrame({\n", + " \"A\": [1, 2, 2, 5, 7, 6],\n", + " \"B\": [5, 4, 5, 1, 6, 0],\n", + " \"users\": [\"john\", \"jane@example.com\", \"alex\", \"bob\", \"anna@example.com\", \"dave\"],\n", + " \"value\": [23.4, 123.2, 423.3, 32.1, 42.2, 344.2],\n", + "})\n", + "\n", + "dc = get_sample_dataset_constraints()\n", + "constraints_profile = session.log_dataframe(data, \"test.data\", constraints=dc)\n", + "constraints_profile.apply_summary_constraints()\n", + "constraints_profile.apply_table_shape_constraints()\n", + "session.close()" + ] + }, + { + "cell_type": "markdown", + "id": "17ac9327", + "metadata": {}, + "source": [ + "### Constraints report" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "id": "4a2786f8", + "metadata": {}, + "outputs": [], + "source": [ + "visualization.constraints_report(dc)" + ] + }, { "cell_type": "markdown", "id": "b04f735b", @@ -332,11 +427,19 @@ "###### `preferred_path`: save path `default:` `/html_reports` located in whylogs directory\n", "###### `html_file_name`: name of the file `default:` name of the dataset followed by timestamp of the profile" ] + }, + { + "cell_type": "code", + "execution_count": null, + "id": "6d3bf231", + "metadata": {}, + "outputs": [], + "source": [] } ], "metadata": { "kernelspec": { - "display_name": "Python 3", + "display_name": "Python 3 (ipykernel)", "language": "python", "name": "python3" }, @@ -350,7 +453,7 @@ "name": "python", "nbconvert_exporter": "python", "pygments_lexer": "ipython3", - "version": "3.9.7" + "version": "3.8.10" } }, "nbformat": 4, diff --git a/src/whylogs/viz/jupyter_notebook_viz.py b/src/whylogs/viz/jupyter_notebook_viz.py index e213419866..142ae0b8ad 100644 --- a/src/whylogs/viz/jupyter_notebook_viz.py +++ b/src/whylogs/viz/jupyter_notebook_viz.py @@ -26,11 +26,13 @@ class NotebookProfileViewer: SUMMARY_STATISTICS_TEMPLATE_NAME = 'index-hbs-cdn-all-in-jupyter-full-summary-statistics.html' DOUBLE_HISTOGRAM_TEMPLATE_NAME = 'index-hbs-cdn-all-in-jupyter-distribution-chart.html' FEATURE_STATISTICS_TEMPLATE_NAME = 'index-hbs-cdn-all-in-jupyter-feature-summary-statistics.html' + CONSTRAINTS_REPORT_TEMPLATE_NAME = 'index-hbs-cdn-all-in-jupyter-constraints-report.html' PAGE_SIZES = { SUMMARY_REPORT_TEMPLATE_NAME: '1000px', DOUBLE_HISTOGRAM_TEMPLATE_NAME: '277px', SUMMARY_STATISTICS_TEMPLATE_NAME: '250px', FEATURE_STATISTICS_TEMPLATE_NAME: '650px', + CONSTRAINTS_REPORT_TEMPLATE_NAME: '750PX' } def __init__(self, target_profiles: List[DatasetProfile] = None, reference_profiles: List[DatasetProfile] = None): @@ -203,3 +205,14 @@ def download(self, html, preferred_path=None, html_file_name=None): saved_html.write(html.data) saved_html.close() return None + + def constraints_report(self, constraints, preferred_cell_height=None): + template = self.__get_compiled_template(self.CONSTRAINTS_REPORT_TEMPLATE_NAME) + rendered_template = template({ + "constraints_report": json.dumps(constraints.report())} + ) + return self.__display_rendered_template( + rendered_template, + self.CONSTRAINTS_REPORT_TEMPLATE_NAME, + preferred_cell_height + ) From 7f9671d71079b6591ffbf61f8d8af8cd85eadaf9 Mon Sep 17 00:00:00 2001 From: ssxcho Date: Wed, 16 Feb 2022 05:29:09 +0400 Subject: [PATCH 083/119] constraints report with real values --- ...cdn-all-in-jupyter-constraints-report.html | 179 ++++++++++-------- 1 file changed, 100 insertions(+), 79 deletions(-) diff --git a/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-constraints-report.html b/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-constraints-report.html index b46e9c288a..bd111a3d0d 100644 --- a/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-constraints-report.html +++ b/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-constraints-report.html @@ -43,7 +43,7 @@ @media screen and (min-width: 1000px) { .desktop-content { display: block; - } + } .no-responsive { display: none; } @@ -148,7 +148,7 @@ margin-right: 5px; } - .drift-detection-search-input input::placeholder { + .drift-detection-search-input input::placeholder { font-family: Arial; font-weight: normal; font-size: 13px; @@ -286,7 +286,7 @@ line-height: 140%; color: #FFFFFF; } - + .turquoise-background-color { background-color: #369BAC; } @@ -295,28 +295,6 @@ background-color: #C6462A; } - .notif-circle-container{ - position: absolute; - top: -8px; - right: -8px; - padding: 5.3px; - border-radius: 50%; - background-color: var(--brandSecondary100); - cursor: pointer; - } - - .notif-circle { - position: absolute; - top: 2px; - right: 2px; - height: 16px; - width: 16px; - border-radius: 50%; - font-size: 10px; - color: #fff; - background-color: #ECB100; - } - .border-solid-gray { border: 1px solid #CED4DA; border-radius: 4px; @@ -346,10 +324,29 @@ padding-right: 30px; } - @media screen and (min-width: 1000px) { + .notif-circle-container{ + position: absolute; + top: 25px; + right: 25px; + padding: 5.3px; + border-radius: 50%; + background-color: white; + cursor: pointer; + } + + .notif-circle { + position: absolute; + top: 2px; + right: 2px; + padding: 3.3px; + border-radius: 50%; + background-color: #F2994A; + } + + @media screen and (min-width: 500px) { .desktop-content { display: block; - } + } .no-responsive { display: none; } @@ -394,18 +391,23 @@
          -
          -
          - +
          +
          +
          +
          -
          +
          -
          +
          + + + +
          -
          - {{{alertLIst}}} + {{{alertLIst this}}}
          @@ -498,7 +500,7 @@

          Hold on! :)

          const findFetureWithNumberSummary = (column) => { const fetureIndex = Object.values(column.columns) - .findIndex((feture) => feture.numberSummary) + .findIndex((feture) => feture.numberSummary) return Object.keys(column.columns)[fetureIndex] } @@ -515,7 +517,7 @@

          Hold on! :)

          const firstWord = text.split(' ')[0] const newText = text.split(' ').slice(1).join(' ') return ( - `
          @@ -540,37 +542,7 @@

          Hold on! :)

          ) } - const datas = [ - {text: "Dataset has 2687 (14.4%) missing values", status: true}, - {text: "Sit mean is less than 0.0065", status: true}, - {text: "Sit has 177 (19.9%) missing values", status: true}, - {text: "Sit mean is greater than Lorem mean", status: true}, - {text: "Sit is uniformly distributed", status: true}, - {text: "Lorem has 177 (19.9%) missing values", status: false}, - {text: "Lorem mean is less than Dolor mean", status: false}, - {text: "Lorem is uniformly distributed", status: false}, - {text: "Lorem has a high cardinality: 1346 distinct values", status: false}, - {text: "Lectus has a high cardinality: 891 distinct values", status: false}, - {text: "Lectus is uniformly distributed", status: true}, - {text: "Lectus has 273 (23.4%) missing values", status: true}, - {text: "Dolor has a high cardinality: 891 distinct values", status: true}, - {text: "Dolor mean is less than 0.0065", status: true}, - {text: "Dolor is uniformly distributed", status: true}, - ] - - const profileFromCSVfile = {{{reference_profile}}} - - Handlebars.registerHelper("getFailedConstraints", function (column) { - return datas.filter(({status}) => status === false).length - }); - - Handlebars.registerHelper("getPassedConstraints", function (column) { - return datas.filter(({status}) => status === true).length - }); - - Handlebars.registerHelper("getAllConstraints", function (column) { - return datas.length - }); + let failedConstraints = 0; Handlebars.registerHelper("getProfileTimeStamp", function (column) { return formatLabelDate(+column.properties.dataTimestamp) @@ -581,13 +553,26 @@

          Hold on! :)

          }); Handlebars.registerHelper("alertLIst", function (column) { - console.log(datas.map(({text, status}) => alertListElement(text, status))); - let alertListItem = datas.map(({text, status}) => alertListElement(text, status)) - console.log(alertListItem); + let alertListItem = column.map((value) => { + if (value[1][0]) { + return alertListElement(`${value[0]} ${value[1][0][0]}`, value[1][0][value[1][0].length - 1] === 0 || (failedConstraints++, false)) + } else { + return alertListElement(value[0], value[value.length - 1] === 0 || (failedConstraints++, false)) + } + }) + $(document).ready(() => { + $(".wl__feature-count--discrete").append(failedConstraints) + $(".wl__feature-count--non-discrete").append(column.length - failedConstraints) + $(".wl__feature-count--unknown").append(column.length) + }) return alertListItem.join(' ') }); + Handlebars.registerHelper("getPassedConstraints", function (column) { + // return datas.filter(({status}) => status === true).length + }); + Handlebars.registerHelper("columnsWithConstraints", function () { return randomNumbers(200); }); @@ -597,7 +582,7 @@

          Hold on! :)

          }); } - function openFilter() { + function openFilter() { const $filterOptions = $(".dropdown-container"); const filterClass = $filterOptions.attr("class"); @@ -614,7 +599,7 @@

          Hold on! :)

          function initHandlebarsTemplate() { // Replace this context with JSON from .py file - const context = {{{profile_from_whylogs}}}; + const context = {{{constraints_report}}}; // Config handlebars and pass data to HBS template const source = document.getElementById("entry-template").innerHTML; const template = Handlebars.compile(source); @@ -622,7 +607,7 @@

          Hold on! :)

          const target = document.getElementById("generated-html"); target.innerHTML = html; } - + function initWebsiteScripts() { const $featureSearch = document.getElementById("wl__feature-search"); const $alertList = document.getElementById("alert-list"); @@ -635,8 +620,6 @@

          Hold on! :)

          failed: true }; - const getReferenceProfile = () => { return {{{reference_profile}}} } - let searchString = ""; function debounce(func, wait, immediate) { @@ -657,6 +640,17 @@

          Hold on! :)

          }; } + 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 handleSearch() { const tableBodyChildren = $alertList.children; @@ -696,7 +690,7 @@

          Hold on! :)

          $($(".form-check-input")[$(".form-check-input").length - 1]).prop( "checked", false ); } handleSearch(); - + }); $nonDiscrete.addEventListener("change", (event) => { @@ -725,6 +719,33 @@

          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 $filterOptions = $(".dropdown-container"); + const $notifCircleContainer = $(".notif-circle-container") + const filterClass = $filterOptions.attr("class"); + + if (filterClass.indexOf("d-none") > 0) { + $notifCircleContainer.addClass("d-none") + $filterOptions.removeClass("d-none"); + $(".filter-icon").addClass("d-none") + $(".close-filter-icon").removeClass("d-none") + } else { + $filterOptions.addClass("d-none"); + $(".close-filter-icon").addClass("d-none") + $(".filter-icon").removeClass("d-none") + checkedBoxes() + } + } + // Invoke functions -- keep in mind invokation order registerHandlebarHelperFunctions(); initHandlebarsTemplate(); From 3e5880b2a8581b969f4151194587ffbb191aea3b Mon Sep 17 00:00:00 2001 From: ssxcho Date: Wed, 16 Feb 2022 05:31:29 +0400 Subject: [PATCH 084/119] fix vertical scroll --- ...-hbs-cdn-all-in-jupyter-distribution-chart.html | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-distribution-chart.html b/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-distribution-chart.html index 7f77bb5390..ad13dc50f3 100644 --- a/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-distribution-chart.html +++ b/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-distribution-chart.html @@ -40,6 +40,7 @@ margin: 0; padding: 0; box-sizing: border-box; + overflow-y: hidden; } /* Screen on smaller screens */ @@ -119,7 +120,8 @@ width: 98%; justify-content: space-between; margin: 10px; - margin-top: 20px; + margin-top: 15px; + bottom: 0; } .chart-box-title p{ @@ -199,7 +201,7 @@

          Hold on! :)

          this.CHART_HEIGHT = this.SVG_HEIGHT - this.MARGIN.TOP - this.MARGIN.BOTTOM; this.svgEl = d3.create("svg") .attr("preserveAspectRatio", "xMinYMin meet") - .attr("viewBox", `20 0 ${$(window).width()} ${$(window).height()-50}`) + .attr("viewBox", `20 0 ${$(window).width()} ${$(window).height()-55}`) .classed("svg-content-responsive", true) this.maxYValue = d3.max(data, (d) => Math.abs(d.axisY)); this.xScale = d3 @@ -208,8 +210,8 @@

          Hold on! :)

          .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]); + .domain([0, this.maxYValue * 1.4]) + .range([this.SVG_HEIGHT, 0]); } } @@ -252,7 +254,7 @@

          Hold on! :)

          let yFormat, xFormat; - const sizes = new GenerateChartParams($(window).height()-50, $(window).width(), histogramData) + const sizes = new GenerateChartParams($(window).height()-55, $(window).width(), histogramData) const { MARGIN, SVG_WIDTH, @@ -324,7 +326,7 @@

          Hold on! :)

          return svgEl._groups[0][0].outerHTML; } - const profileFromCSVfile = {{{reference_profile_from_whylogs}}} + const profileFromCSVfile = {{{reference_profile_from_whylogs}}} Handlebars.registerHelper("getDoubleHistogramChart",(column,key) => { const columnKey = key.data.key From 9f2af1f332bf57e383f56d427241035ab15aa249 Mon Sep 17 00:00:00 2001 From: Jirayr-Solvee Date: Wed, 16 Feb 2022 05:48:10 +0400 Subject: [PATCH 085/119] remove hardcoded values, connect summary to statistics --- examples/Profile_Viewer_In_Notebook.ipynb | 57 +-- ...x-hbs-cdn-all-in-for-jupyter-notebook.html | 222 +++++++++++- ...cdn-all-in-jupyter-constraints-report.html | 40 +-- ...in-jupyter-feature-summary-statistics.html | 38 +- ...ll-in-jupyter-full-summary-statistics.html | 328 ------------------ src/whylogs/viz/jupyter_notebook_viz.py | 17 - .../viz/utils/profile_viz_calculations.py | 15 + 7 files changed, 244 insertions(+), 473 deletions(-) delete mode 100644 src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-full-summary-statistics.html diff --git a/examples/Profile_Viewer_In_Notebook.ipynb b/examples/Profile_Viewer_In_Notebook.ipynb index 8bf6036019..b961a5e873 100644 --- a/examples/Profile_Viewer_In_Notebook.ipynb +++ b/examples/Profile_Viewer_In_Notebook.ipynb @@ -110,7 +110,7 @@ " 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({\"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", @@ -119,7 +119,8 @@ " return logger.profile\n", " \n", "target_profile = profile_generator()\n", - "reference_profile = profile_generator() " + "\n", + "reference_profile = profile_generator()" ] }, { @@ -213,7 +214,9 @@ "cell_type": "code", "execution_count": null, "id": "250bb662", - "metadata": {}, + "metadata": { + "scrolled": true + }, "outputs": [], "source": [ "visualization.double_histogram(feature_names=\"uniform_integers\")" @@ -263,42 +266,6 @@ "###### `prefered_cell_height`: height in `px` for generated visualization cell " ] }, - { - "cell_type": "markdown", - "id": "78db1538", - "metadata": {}, - "source": [ - "### Feature Summary Statistics" - ] - }, - { - "cell_type": "markdown", - "id": "4dc0e3f6", - "metadata": {}, - "source": [ - "You can get set of useful statistics for features by passing the profile and feature names" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "id": "fb77bcd5", - "metadata": {}, - "outputs": [], - "source": [ - "visualization.feature_summary_statistics(feature_name=\"mixture_distribution\", profile=\"reference\")" - ] - }, - { - "cell_type": "markdown", - "id": "8b483a1d", - "metadata": {}, - "source": [ - "###### `*feature_name`: Any feature name from your profiled dataset\n", - "###### `profile_name`: `\"target\"` or `\"reference\"`\n", - "###### `prefered_cell_height`: height in `px` for generated visualization cell " - ] - }, { "cell_type": "markdown", "id": "a3469ba2", @@ -427,19 +394,11 @@ "###### `preferred_path`: save path `default:` `/html_reports` located in whylogs directory\n", "###### `html_file_name`: name of the file `default:` name of the dataset followed by timestamp of the profile" ] - }, - { - "cell_type": "code", - "execution_count": null, - "id": "6d3bf231", - "metadata": {}, - "outputs": [], - "source": [] } ], "metadata": { "kernelspec": { - "display_name": "Python 3 (ipykernel)", + "display_name": "Python 3", "language": "python", "name": "python3" }, @@ -453,7 +412,7 @@ "name": "python", "nbconvert_exporter": "python", "pygments_lexer": "ipython3", - "version": "3.8.10" + "version": "3.9.7" } }, "nbformat": 4, diff --git a/src/whylogs/viewer/index-hbs-cdn-all-in-for-jupyter-notebook.html b/src/whylogs/viewer/index-hbs-cdn-all-in-for-jupyter-notebook.html index f5925cb852..7eccaa127a 100644 --- a/src/whylogs/viewer/index-hbs-cdn-all-in-for-jupyter-notebook.html +++ b/src/whylogs/viewer/index-hbs-cdn-all-in-for-jupyter-notebook.html @@ -91,7 +91,6 @@ padding: 0; box-sizing: border-box; font-family: "Asap", Arial, Helvetica, sans-serif; - color: var(--secondaryLight1000); } /* @@ -503,6 +502,93 @@ background-color: #F2994A; } + + .header-title { + font-size: 26px; + font-weight: 700; + color: #444444; + } + + .statistic-number-title { + font-family: Arial; + font-weight: normal; + font-size: 14px; + line-height: 20px; + color: #6C757D; + } + + .statistic-number { + font-family: Arial; + font-weight: bold; + font-size: 20px; + line-height: 140%; + display: flex; + align-items: center; + color: #0E7384; + } + + .statistic-measurement { + font-size: 15px !important; + margin-left: 3px; + } + + .statistic-measurement-percent { + font-size: 15px !important; + } + + .tooltip-full-number { + position: relative; + display: inline-block; + } + + .tooltip-full-number .tooltiptext { + visibility: hidden; + background-color: #0E7384; + color: #fff; + text-align: center; + border-radius: 6px; + padding: 3px; + position: absolute; + z-index: 1; + top: 0; + left: 100%; + margin-left: 5px; + opacity: 0; + transition: opacity 0.5s; + font-size: 13px; + font-weight: normal; + line-height: 100%; + } + + .tooltip-full-number:hover .tooltiptext { + visibility: visible; + opacity: 1; + } + + .display-flex { + display: flex; + } + + .justify-content-space-between { + justify-content: space-between; + } + + .justify-content-center { + justify-content: center; + } + + .align-items-center { + align-items: center; + } + + .padding-right-30 { + padding-right: 30px; + } + + .text-color { + color: var(--secondaryLight1000); + } + @media screen and (min-width: 500px) { .desktop-content { display: block; @@ -521,6 +607,26 @@ {{{{raw}}}}
          +
          +
          +
          + Profile Summary: {{getProfileName this}}_{{getProfileTimeStamp this}} +
          +
          +
          +
          Observations
          +
          {{{observations this}}}
          +
          +
          +
          Missing Cells
          +
          + {{{missingCells this}}} +
          {{{missingCellsPercentage this}}}
          +
          +
          +
          +
          +
          @@ -529,7 +635,11 @@

          - Drift detected in 65 of 131 features + Drift detected in + + of + + features

          @@ -678,7 +788,6 @@

          Hold on! :)

          - \ No newline at end of file + diff --git a/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-constraints-report.html b/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-constraints-report.html index bd111a3d0d..069cd2f21f 100644 --- a/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-constraints-report.html +++ b/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-constraints-report.html @@ -374,16 +374,7 @@ Constraints Report

          -
          -
          -
          Columns with constraints
          -
          {{columnsWithConstraints this}}
          -
          -
          -
          Columns without constraints
          -
          {{columnsWithoutConstraints this}}
          -
          -
          +
          @@ -513,9 +504,8 @@

          Hold on! :)

          } } - const alertListElement = (text, status) => { - const firstWord = text.split(' ')[0] - const newText = text.split(' ').slice(1).join(' ') + const alertListElement = (name, text, status) => { + return ( `
          Hold on! :) >
          ${ + name && alertListItemStatus( status, - `${firstWord}`, - `${firstWord}` + `${name}`, + `${name}` ) } - ${newText} + ${text}
          ${ alertListItemStatus( @@ -554,11 +545,10 @@

          Hold on! :)

          Handlebars.registerHelper("alertLIst", function (column) { let alertListItem = column.map((value) => { - if (value[1][0]) { - return alertListElement(`${value[0]} ${value[1][0][0]}`, value[1][0][value[1][0].length - 1] === 0 || (failedConstraints++, false)) + return alertListElement(value[0], value[1][0][0], value[1][0][value[1][0].length - 1] === 0 || (failedConstraints++, false)) } else { - return alertListElement(value[0], value[value.length - 1] === 0 || (failedConstraints++, false)) + return alertListElement('', value[0], value[value.length - 1] === 0 || (failedConstraints++, false)) } }) $(document).ready(() => { @@ -568,18 +558,6 @@

          Hold on! :)

          }) return alertListItem.join(' ') }); - - Handlebars.registerHelper("getPassedConstraints", function (column) { - // return datas.filter(({status}) => status === true).length - }); - - Handlebars.registerHelper("columnsWithConstraints", function () { - return randomNumbers(200); - }); - - Handlebars.registerHelper("columnsWithoutConstraints", function () { - return randomNumbers(200); - }); } function openFilter() { diff --git a/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-feature-summary-statistics.html b/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-feature-summary-statistics.html index 5b5b607b29..00946c9849 100644 --- a/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-feature-summary-statistics.html +++ b/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-feature-summary-statistics.html @@ -191,10 +191,6 @@
          Missing
          {{missing this}}
          -
          -
          Infinite
          -
          {{infinite}}
          -
          Mean
          {{mean this}}
          @@ -207,18 +203,6 @@
          Maximum
          {{maximum this}}
          -
          -
          Zeros
          -
          {{zeros}}
          -
          -
          -
          Negative
          -
          {{negative}}
          -
          -
          -
          Memory size
          -
          {{memorySize}}
          -
          @@ -324,8 +308,6 @@

          Hold on! :)

          return parseFloat(number).toFixed(decimals); } - const randomNumbers = (range) => Math.floor(Math.random() * range) - Handlebars.registerHelper("variance", function (column) { const feture = Object.values(column)[1] if (feture.variance) { @@ -359,7 +341,7 @@

          Hold on! :)

          } return "0"; }); - + Handlebars.registerHelper("ninetyFifthPercentile", function (column) { const feture = Object.values(column)[1] @@ -404,7 +386,7 @@

          Hold on! :)

          } return "0"; }); - + Handlebars.registerHelper("distinct", function (column) { const feture = Object.values(column)[1] @@ -423,10 +405,6 @@

          Hold on! :)

          return "0"; }); - Handlebars.registerHelper("infinite", function () { - return randomNumbers(50); - }); - Handlebars.registerHelper("mean", function (column) { const feture = Object.values(column)[1] @@ -463,18 +441,6 @@

          Hold on! :)

          return "0"; }); - Handlebars.registerHelper("zeros", function () { - return randomNumbers(50); - }); - - Handlebars.registerHelper("negative", function () { - return randomNumbers(50); - }); - - Handlebars.registerHelper("memorySize", function () { - return randomNumbers(50); - }); - Handlebars.registerHelper("getProfileTimeStamp", function (column) { return formatLabelDate(+column.properties.dataTimestamp) }); diff --git a/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-full-summary-statistics.html b/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-full-summary-statistics.html deleted file mode 100644 index fcc31b8090..0000000000 --- a/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-full-summary-statistics.html +++ /dev/null @@ -1,328 +0,0 @@ - - - - - - - - - - Profile Viewer | whylogs - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/whylogs/viz/jupyter_notebook_viz.py b/src/whylogs/viz/jupyter_notebook_viz.py index 142ae0b8ad..552b4579de 100644 --- a/src/whylogs/viz/jupyter_notebook_viz.py +++ b/src/whylogs/viz/jupyter_notebook_viz.py @@ -23,14 +23,12 @@ class NotebookProfileViewer: SUMMARY_REPORT_TEMPLATE_NAME = 'index-hbs-cdn-all-in-for-jupyter-notebook.html' - SUMMARY_STATISTICS_TEMPLATE_NAME = 'index-hbs-cdn-all-in-jupyter-full-summary-statistics.html' DOUBLE_HISTOGRAM_TEMPLATE_NAME = 'index-hbs-cdn-all-in-jupyter-distribution-chart.html' FEATURE_STATISTICS_TEMPLATE_NAME = 'index-hbs-cdn-all-in-jupyter-feature-summary-statistics.html' CONSTRAINTS_REPORT_TEMPLATE_NAME = 'index-hbs-cdn-all-in-jupyter-constraints-report.html' PAGE_SIZES = { SUMMARY_REPORT_TEMPLATE_NAME: '1000px', DOUBLE_HISTOGRAM_TEMPLATE_NAME: '277px', - SUMMARY_STATISTICS_TEMPLATE_NAME: '250px', FEATURE_STATISTICS_TEMPLATE_NAME: '650px', CONSTRAINTS_REPORT_TEMPLATE_NAME: '750PX' } @@ -152,21 +150,6 @@ def double_histogram(self, feature_names, preferred_cell_height=None): ) return None - def summary_statistics(self, profile='reference', preferred_cell_height=None): - template = self.__get_compiled_template(self.SUMMARY_STATISTICS_TEMPLATE_NAME) - if self.reference_profiles and profile.lower() == 'reference': - profile_statistics = self.reference_profile_jsons[0] - else: - profile_statistics = self.target_profile_jsons[0] - rendered_template = template({ - "profile_summary_statistics_from_whylogs": profile_statistics - }) - return self.__display_rendered_template( - rendered_template, - self.SUMMARY_STATISTICS_TEMPLATE_NAME, - preferred_cell_height - ) - def feature_summary_statistics(self, feature_name, profile='reference', preferred_cell_height=None): template = self.__get_compiled_template(self.FEATURE_STATISTICS_TEMPLATE_NAME) if self.reference_profiles and profile.lower() == 'reference': diff --git a/src/whylogs/viz/utils/profile_viz_calculations.py b/src/whylogs/viz/utils/profile_viz_calculations.py index 1ac90a5912..62ab0e732b 100644 --- a/src/whylogs/viz/utils/profile_viz_calculations.py +++ b/src/whylogs/viz/utils/profile_viz_calculations.py @@ -21,8 +21,16 @@ def add_drift_val_to_ref_profile_json(target_profile, reference_profile, referen reference_profile_json : Reference profile summary serialized json with drift value for every feature """ # QUESTION: Should this function need to change behaviour to add drift into target profile? + observations = 0 + missing_cells = 0 + total_count = 0 for target_col_name in target_profile.columns.keys(): target_col = target_profile.columns[target_col_name] + observations += target_col.counters.to_protobuf().count + null_count = target_col.to_summary().counters.null_count.value + missing_cells += null_count if null_count else 0 + total_count += target_col.to_summary().counters.count + if target_col_name in reference_profile.columns: ref_col = reference_profile.columns[target_col_name] target_type = target_col.schema_tracker.to_summary().inferred_type.type @@ -53,6 +61,13 @@ def add_drift_val_to_ref_profile_json(target_profile, reference_profile, referen reference_profile_json['columns'][target_col_name]['drift_from_ref'] = chi_squared_p_value.chi_squared_test else: reference_profile_json['columns'][target_col_name]['drift_from_ref'] = None + reference_profile_json['properties']['observations'] = observations + reference_profile_json['properties']['missing_cells'] = missing_cells + reference_profile_json['properties']['total_count'] = total_count + reference_profile_json['properties']['missing_percentage'] = ( + missing_cells / total_count + ) * 100 if total_count else 0 + return reference_profile_json From 0cb19b6f22d478b2705afd05098158639d83d69a Mon Sep 17 00:00:00 2001 From: Jirayr-Solvee Date: Wed, 16 Feb 2022 05:51:18 +0400 Subject: [PATCH 086/119] remove summary statistics report --- examples/Profile_Viewer_In_Notebook.ipynb | 35 ----------------------- 1 file changed, 35 deletions(-) diff --git a/examples/Profile_Viewer_In_Notebook.ipynb b/examples/Profile_Viewer_In_Notebook.ipynb index b961a5e873..735d64a304 100644 --- a/examples/Profile_Viewer_In_Notebook.ipynb +++ b/examples/Profile_Viewer_In_Notebook.ipynb @@ -231,41 +231,6 @@ "###### `preferred_cell_height`: height in `px` for generated visualization cell " ] }, - { - "cell_type": "markdown", - "id": "d318761d", - "metadata": {}, - "source": [ - "### Summary Statistics" - ] - }, - { - "cell_type": "markdown", - "id": "32974704", - "metadata": {}, - "source": [ - "You can get set of useful statistics for both `target` and `reference` by passing the name" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "id": "d68c5e6a", - "metadata": {}, - "outputs": [], - "source": [ - "visualization.summary_statistics(profile=\"target\")" - ] - }, - { - "cell_type": "markdown", - "id": "2fc9c79e", - "metadata": {}, - "source": [ - "###### `profile_name`: `\"target\"` or `\"reference\"`\n", - "###### `prefered_cell_height`: height in `px` for generated visualization cell " - ] - }, { "cell_type": "markdown", "id": "a3469ba2", From 611255ee330f159abd9fde329ab5da7e8420332c Mon Sep 17 00:00:00 2001 From: Jirayr-Solvee Date: Wed, 16 Feb 2022 21:14:19 +0400 Subject: [PATCH 087/119] add sum, change colors --- examples/Profile_Viewer_In_Notebook.ipynb | 38 ++++ ...x-hbs-cdn-all-in-for-jupyter-notebook.html | 213 +++++++++--------- ...in-jupyter-feature-summary-statistics.html | 107 ++++----- src/whylogs/viz/jupyter_notebook_viz.py | 146 ++++-------- .../viz/utils/profile_viz_calculations.py | 87 +++---- 5 files changed, 286 insertions(+), 305 deletions(-) diff --git a/examples/Profile_Viewer_In_Notebook.ipynb b/examples/Profile_Viewer_In_Notebook.ipynb index 735d64a304..94884285d2 100644 --- a/examples/Profile_Viewer_In_Notebook.ipynb +++ b/examples/Profile_Viewer_In_Notebook.ipynb @@ -231,6 +231,44 @@ "###### `preferred_cell_height`: height in `px` for generated visualization cell " ] }, + { + "cell_type": "markdown", + "id": "78db1538", + "metadata": {}, + "source": [ + "### Feature Statistics" + ] + }, + { + "cell_type": "markdown", + "id": "4dc0e3f6", + "metadata": {}, + "source": [ + "You can get set of useful statistics for features by passing the profile and feature names" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "id": "fb77bcd5", + "metadata": { + "scrolled": false + }, + "outputs": [], + "source": [ + "visualization.feature_statistics(feature_name=\"mixture_distribution\", profile=\"reference\")" + ] + }, + { + "cell_type": "markdown", + "id": "8b483a1d", + "metadata": {}, + "source": [ + "###### `*feature_name`: Any feature name from your profiled dataset\n", + "###### `profile_name`: `\"target\"` or `\"reference\"`\n", + "###### `prefered_cell_height`: height in `px` for generated visualization cell " + ] + }, { "cell_type": "markdown", "id": "a3469ba2", diff --git a/src/whylogs/viewer/index-hbs-cdn-all-in-for-jupyter-notebook.html b/src/whylogs/viewer/index-hbs-cdn-all-in-for-jupyter-notebook.html index 7eccaa127a..a0c3eb6889 100644 --- a/src/whylogs/viewer/index-hbs-cdn-all-in-for-jupyter-notebook.html +++ b/src/whylogs/viewer/index-hbs-cdn-all-in-for-jupyter-notebook.html @@ -788,6 +788,7 @@

          Hold on! :)

          + + + + + + + + + + + + + From dfcdf812781d7847f6bf5762d42c6539c22a10a6 Mon Sep 17 00:00:00 2001 From: Perch2005 <78492631+Perch2005@users.noreply.github.com> Date: Sun, 20 Feb 2022 22:48:02 +0400 Subject: [PATCH 100/119] Categorical drift report: Differenced Bar chart jupyter visualisation --- ...-cdn-all-in-jupyter-differenced-chart.html | 375 ++++++++++++++++++ 1 file changed, 375 insertions(+) create mode 100644 src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-differenced-chart.html diff --git a/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-differenced-chart.html b/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-differenced-chart.html new file mode 100644 index 0000000000..34c16768e0 --- /dev/null +++ b/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-differenced-chart.html @@ -0,0 +1,375 @@ + + + + + + + + + + Profile Viewer | whylogs + + + + + + + + + + + + + + + + + + + + + + From 1b7ff9d5e158ff94baf8dc159f23b6407d3183a9 Mon Sep 17 00:00:00 2001 From: Perch2005 <78492631+Perch2005@users.noreply.github.com> Date: Sun, 20 Feb 2022 23:00:45 +0400 Subject: [PATCH 101/119] Add definition (ranges) for the severe, moderate, low drift categories. --- ...x-hbs-cdn-all-in-for-jupyter-notebook.html | 78 +++++++++++++------ 1 file changed, 54 insertions(+), 24 deletions(-) diff --git a/src/whylogs/viewer/index-hbs-cdn-all-in-for-jupyter-notebook.html b/src/whylogs/viewer/index-hbs-cdn-all-in-for-jupyter-notebook.html index be9ce04ac0..d272bbd416 100644 --- a/src/whylogs/viewer/index-hbs-cdn-all-in-for-jupyter-notebook.html +++ b/src/whylogs/viewer/index-hbs-cdn-all-in-for-jupyter-notebook.html @@ -389,6 +389,16 @@ color: #000000; } + .drift-detection-info-drifts-item-range { + font-family: Arial; + font-style: normal; + font-weight: bold; + font-size: 14px; + line-height: 14px; + color: #6C757D; + padding-top: 5px; + } + .drift-detection-search-input { display: flex; align-items: center; @@ -468,7 +478,7 @@ display: inline-block; position: relative; width: 85%; - padding-bottom: 15%; + padding-bottom: 17%; vertical-align: top; overflow: hidden; } @@ -569,6 +579,10 @@ display: flex; } + .flex-direction-column { + flex-direction: column; + } + .justify-content-space-between { justify-content: space-between; } @@ -926,34 +940,41 @@

          Hold on! :)

          return format(date); } - const driftCountElement = (driftCount, driftColor, driftName) => ` -
          -
          -
          -

          ${driftCount}

          -

          ${driftName}

          + const driftCountElement = (driftCount, driftColor, driftName, driftRange) => ` +
          +
          +
          +
          +

          ${driftCount}

          +

          ${driftName}

          +
          +

          (${driftRange})

          ` const drifts = { severe: { count: 0, + range: "0 - 0.05", name: "Severe drift", colorClass: "severe-drift-circle-color" }, moderate: { count: 0, + range: "0.05 - 0.3", name: "Moderate drift", colorClass: "moderate-drift-circle-color" }, mild: { count: 0, + range: "0.3 - 0.6", name: "Mild drift", colorClass: "mild-drift-circle-color" }, minimal: { count: 0, + range: "0.6 - 1", name: "Minimal drift", colorClass: "minimal-drift-circle-color" } @@ -1050,12 +1071,28 @@

          Hold on! :)

          return properties.properties.tags.name }); - let driftCount = 0; + let driftCount = 0; + const diffFromRefTableElement = (driftFromRefNumber, circleColor) => ` +
          + ${driftFromRefNumber} +
          +
          + ` + + const cheqValueTypeNumber = (profile, profileValue) => { + let validValue; + if (profile && profileValue !== undefined && typeof profileValue === "number") { + return true + } else if (profileValue !== undefined && typeof profileValue !== "number") { + return false + } + } Handlebars.registerHelper("getDiffFromRef", function (column, key) { const columnKey = key.data.key const {drift_from_ref} = referenceProfile.columns[columnKey] - if (referenceProfile && referenceProfile.columns[columnKey].drift_from_ref !== undefined && typeof drift_from_ref === "number") { + + if (cheqValueTypeNumber(referenceProfile, drift_from_ref)) { driftCount++ const driftFromRefNumber = drift_from_ref % 1 ? fixNumberTo(drift_from_ref, 2) : drift_from_ref const circleColor = Object.values(drifts)[countOfDrifts(driftFromRefNumber, 3)].colorClass @@ -1065,28 +1102,21 @@

          Hold on! :)

          $(".all-features").html(Object.keys(referenceProfile.columns).length) }) - return ` -
          - ${driftFromRefNumber} -
          -
          - ` - } else if (referenceProfile.columns[columnKey].drift_from_ref !== undefined && typeof drift_from_ref !== "number") { + return diffFromRefTableElement(driftFromRefNumber, circleColor) + + } else if (cheqValueTypeNumber(referenceProfile, drift_from_ref) !== undefined) { driftCount++ Object.values(drifts)[0].count++ - return `
          -

          undefined

          -
          -
          `; - } else { - return '

          -

          '; + return diffFromRefTableElement("undefined", "severe-drift-circle-color") } + + return '

          -

          '; }); $(document).ready(() => - Object.values(drifts).map(({count, name, colorClass}) =>{ + Object.values(drifts).map(({count, name, colorClass, range}) =>{ $("#drift-detection-info-drifts") - .append(driftCountElement(count, colorClass, name)) + .append(driftCountElement(count, colorClass, name, range)) }) ) From 6a66040b84f4fb2c1af8603e3a1167d8bcbb1944 Mon Sep 17 00:00:00 2001 From: Jirayr-Solvee Date: Mon, 21 Feb 2022 12:46:24 +0400 Subject: [PATCH 102/119] fixes in templates, structural changes --- examples/Profile_Viewer_In_Notebook.ipynb | 6952 +---------------- ...-cdn-all-in-jupyter-differenced-chart.html | 42 +- src/whylogs/viz/jupyter_notebook_viz.py | 79 +- .../viz/utils/profile_viz_calculations.py | 149 +- 4 files changed, 263 insertions(+), 6959 deletions(-) diff --git a/examples/Profile_Viewer_In_Notebook.ipynb b/examples/Profile_Viewer_In_Notebook.ipynb index 337789a6fe..e988a3680f 100644 --- a/examples/Profile_Viewer_In_Notebook.ipynb +++ b/examples/Profile_Viewer_In_Notebook.ipynb @@ -19,22 +19,10 @@ }, { "cell_type": "code", - "execution_count": 1, + "execution_count": null, "id": "29e48da5", "metadata": {}, - "outputs": [ - { - "name": "stdout", - "output_type": "stream", - "text": [ - "Requirement already satisfied: faker in /home/perch/.cache/pypoetry/virtualenvs/whylogs-yhfFv6et-py3.8/lib/python3.8/site-packages (13.0.0)\n", - "Requirement already satisfied: python-dateutil>=2.4 in /home/perch/.cache/pypoetry/virtualenvs/whylogs-yhfFv6et-py3.8/lib/python3.8/site-packages (from faker) (2.8.2)\n", - "Requirement already satisfied: six>=1.5 in /home/perch/.cache/pypoetry/virtualenvs/whylogs-yhfFv6et-py3.8/lib/python3.8/site-packages (from python-dateutil>=2.4->faker) (1.16.0)\n", - "Requirement already satisfied: pybars3 in /home/perch/.cache/pypoetry/virtualenvs/whylogs-yhfFv6et-py3.8/lib/python3.8/site-packages (0.9.7)\n", - "Requirement already satisfied: PyMeta3>=0.5.1 in /home/perch/.cache/pypoetry/virtualenvs/whylogs-yhfFv6et-py3.8/lib/python3.8/site-packages (from pybars3) (0.5.1)\n" - ] - } - ], + "outputs": [], "source": [ "!pip install faker\n", "!pip install pybars3" @@ -42,7 +30,7 @@ }, { "cell_type": "code", - "execution_count": 2, + "execution_count": null, "id": "5d40e474", "metadata": {}, "outputs": [], @@ -56,7 +44,7 @@ }, { "cell_type": "code", - "execution_count": 3, + "execution_count": null, "id": "2c3ff3a2", "metadata": {}, "outputs": [], @@ -87,7 +75,7 @@ }, { "cell_type": "code", - "execution_count": 4, + "execution_count": null, "id": "41f8a0f9", "metadata": {}, "outputs": [], @@ -111,18 +99,10 @@ }, { "cell_type": "code", - "execution_count": 5, + "execution_count": null, "id": "ea4ce6a6", "metadata": {}, - "outputs": [ - { - "name": "stdout", - "output_type": "stream", - "text": [ - "WARN: Missing config\n" - ] - } - ], + "outputs": [], "source": [ "session = get_or_create_session()\n", "def profile_generator():\n", @@ -166,7 +146,7 @@ }, { "cell_type": "code", - "execution_count": 6, + "execution_count": null, "id": "7dbff14f", "metadata": {}, "outputs": [], @@ -202,5181 +182,12 @@ }, { "cell_type": "code", - "execution_count": 7, + "execution_count": null, "id": "911147eb", "metadata": { "scrolled": true }, - "outputs": [ - { - "data": { - "text/html": [ - "
          " - ], - "text/plain": [ - "" - ] - }, - "execution_count": 7, - "metadata": {}, - "output_type": "execute_result" - } - ], + "outputs": [], "source": [ "visualization.summary_drift_report(preferred_cell_height=\"1000px\")" ] @@ -5402,422 +213,19 @@ "id": "28b512ca", "metadata": {}, "source": [ - "You can get double histogram for any of your features" + "You can get double histogram for numerical features" ] }, { "cell_type": "code", - "execution_count": 10, + "execution_count": null, "id": "250bb662", "metadata": { "scrolled": true }, - "outputs": [ - { - "data": { - "text/html": [ - "
          " - ], - "text/plain": [ - "" - ] - }, - "execution_count": 10, - "metadata": {}, - "output_type": "execute_result" - } - ], + "outputs": [], "source": [ - "visualization.double_histogram(feature_names=\"strings\")" + "visualization.double_histogram(feature_names=\"uniform_integers\")" ] }, { @@ -5829,6 +237,80 @@ "###### `preferred_cell_height`: height in `px` for generated visualization cell " ] }, + { + "cell_type": "markdown", + "id": "193e306d", + "metadata": {}, + "source": [ + "### Distribution chart" + ] + }, + { + "cell_type": "markdown", + "id": "6f4931fb", + "metadata": {}, + "source": [ + "You can get distirubtion chart for categorical features" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "id": "ccc7c73e", + "metadata": { + "scrolled": true + }, + "outputs": [], + "source": [ + "visualization.distribution_chart(feature_names=\"strings\")" + ] + }, + { + "cell_type": "markdown", + "id": "cd97db45", + "metadata": {}, + "source": [ + "###### `*feature_names`: string or list of strings containing names of the features for which you want to see double histogram\n", + "###### `preferred_cell_height`: height in `px` for generated visualization cell " + ] + }, + { + "cell_type": "markdown", + "id": "408e1c5b", + "metadata": {}, + "source": [ + "### Differenced distribution chart" + ] + }, + { + "cell_type": "markdown", + "id": "4d65b0b4", + "metadata": {}, + "source": [ + "You can get differenced distirubtion chart for categorical features" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "id": "d26b2fa2", + "metadata": { + "scrolled": true + }, + "outputs": [], + "source": [ + "visualization.differenced_distribution_chart(feature_names=\"strings\")" + ] + }, + { + "cell_type": "markdown", + "id": "92451fbf", + "metadata": {}, + "source": [ + "###### `*feature_names`: string or list of strings containing names of the features for which you want to see double histogram\n", + "###### `preferred_cell_height`: height in `px` for generated visualization cell " + ] + }, { "cell_type": "markdown", "id": "78db1538", @@ -5847,500 +329,12 @@ }, { "cell_type": "code", - "execution_count": 9, + "execution_count": null, "id": "fb77bcd5", "metadata": { "scrolled": false }, - "outputs": [ - { - "data": { - "text/html": [ - "
          " - ], - "text/plain": [ - "" - ] - }, - "execution_count": 9, - "metadata": {}, - "output_type": "execute_result" - } - ], + "outputs": [], "source": [ "visualization.feature_statistics(feature_name=\"mixture_distribution\", profile=\"reference\")" ] @@ -6365,7 +359,7 @@ }, { "cell_type": "code", - "execution_count": 13, + "execution_count": null, "id": "dafab41d", "metadata": {}, "outputs": [], @@ -6428,766 +422,10 @@ }, { "cell_type": "code", - "execution_count": 30, + "execution_count": null, "id": "4a2786f8", "metadata": {}, - "outputs": [ - { - "data": { - "text/html": [ - "
          " - ], - "text/plain": [ - "" - ] - }, - "execution_count": 30, - "metadata": {}, - "output_type": "execute_result" - } - ], + "outputs": [], "source": [ "visualization.constraints_report(dc)" ] @@ -7210,7 +448,7 @@ }, { "cell_type": "code", - "execution_count": 15, + "execution_count": null, "id": "980d7236", "metadata": {}, "outputs": [], @@ -7257,7 +495,7 @@ "name": "python", "nbconvert_exporter": "python", "pygments_lexer": "ipython3", - "version": "3.8.12" + "version": "3.9.7" } }, "nbformat": 4, diff --git a/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-differenced-chart.html b/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-differenced-chart.html index 34c16768e0..aca9afe5e1 100644 --- a/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-differenced-chart.html +++ b/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-differenced-chart.html @@ -140,7 +140,7 @@ .bar.positive { fill: #369BACB2; } - + .bar.negative { fill: #2683C9E5; } @@ -204,7 +204,7 @@

          Hold on! :)

          const filterAndSortChartData = (overlappedHistogramData, histogramData) => { return overlappedHistogramData - .map((d) => + .map((d) => histogramData .filter((ref) => d.axisX === ref.axisX )[0]) .sort((a, b) => { @@ -234,7 +234,7 @@

          Hold on! :)

          this.CHART_HEIGHT = this.SVG_HEIGHT - this.MARGIN.TOP - this.MARGIN.BOTTOM; this.svgEl = d3.create("svg") .attr("preserveAspectRatio", "xMinYMin meet") - .attr("viewBox", `0 0 ${$(window).width()} ${$(window).height()-55}`) + .attr("viewBox", `0 -10 ${$(window).width()} ${$(window).height()-55}`) .classed("svg-content-responsive", true) this.maxYValue = d3.max(data, (d) => Math.abs(d.axisY)); this.xScale = d3 @@ -260,14 +260,6 @@

          Hold on! :)

          return data } - function CheckNumberSummary(column) { - if (column.numberSummary) { - return true - } else { - return false - } - } - function generatePositiveNegativeChart(histogramData, overlappedHistogramData) { const data = filterAndSortChartData(chartData(histogramData), chartData(overlappedHistogramData)).map(({axisY, axisX}, index) => { const findIndex = chartData(histogramData).findIndex((value) => value.axisX === axisX) @@ -277,7 +269,7 @@

          Hold on! :)

          let yFormat, xFormat; - + const sizes = new GenerateChartParams($(window).height()-55, $(window).width(), chartData(histogramData), chartData(overlappedHistogramData)) let { MARGIN, @@ -288,17 +280,23 @@

          Hold on! :)

          xScale, svgEl } = sizes - - const y0 = Math.max(Math.abs(d3.min(data)), Math.abs(d3.max(data))); - + + const maxY = Math.abs(d3.max(data)); + const minY = Math.abs(d3.min(data)); + let positiveY, + negativeY; + + positiveY = Math.ceil(maxY) % 1 ? maxY + 2*(maxY/(maxY*10)) : maxY + 2*(maxY/(maxY/10)) + negativeY = Math.ceil(minY) % 1 ? minY + 2*(minY/(minY*10)) : minY + 2*(minY/(minY/10)) + const yScale = d3.scaleLinear() - .domain([-y0, y0 ]) + .domain([-negativeY, positiveY ]) .range([CHART_HEIGHT,0]) - + const xAxis = d3.axisBottom(xScale).ticks(SVG_WIDTH / 80, xFormat).tickSizeOuter(0); - const yAxis = d3.axisLeft(yScale).ticks(CHART_HEIGHT / 20, yFormat); + const yAxis = d3.axisLeft(yScale).ticks(CHART_HEIGHT / 30, yFormat); yFormat = yScale.tickFormat(100, yFormat); - + svgEl.append("g") .attr("transform", `translate(${MARGIN.LEFT}, 0)`) .call(yAxis) @@ -311,7 +309,7 @@

          Hold on! :)

          .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start")); - + svgEl .append("g") .attr("transform", `translate(0,${SVG_HEIGHT - MARGIN.BOTTOM})`) @@ -323,7 +321,7 @@

          Hold on! :)

          .attr("y", 27) .attr("fill", "currentColor") .attr("text-anchor", "end")); - + svgEl.selectAll(".bar") .data(data) .enter() @@ -335,7 +333,7 @@

          Hold on! :)

          .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; } diff --git a/src/whylogs/viz/jupyter_notebook_viz.py b/src/whylogs/viz/jupyter_notebook_viz.py index a5e0e9e9cf..02edf72029 100644 --- a/src/whylogs/viz/jupyter_notebook_viz.py +++ b/src/whylogs/viz/jupyter_notebook_viz.py @@ -12,28 +12,28 @@ from .utils.profile_viz_calculations import ( add_drift_val_to_ref_profile_json, - calculate_coefficient_of_variation, - calculate_quantile_statistics_for_single_feature, - calculate_sum, - calculate_variance, + add_feature_statistics, ) _MY_DIR = os.path.realpath(os.path.dirname(__file__)) -TYPES = InferredType.Type logger = logging.getLogger(__name__) -numerical_types = (TYPES.INTEGRAL, TYPES.FRACTIONAL) +numerical_types = (InferredType.Type.INTEGRAL, InferredType.Type.FRACTIONAL) class NotebookProfileViewer: SUMMARY_REPORT_TEMPLATE_NAME = "index-hbs-cdn-all-in-for-jupyter-notebook.html" DOUBLE_HISTOGRAM_TEMPLATE_NAME = "index-hbs-cdn-all-in-jupyter-distribution-chart.html" + DISTRIBUTION_CHART_TEMPLATE_NAME = "index-hbs-cdn-all-in-jupyter-bar-chart.html" + DIFFERENCED_CHART_TEMPLATE_NAME = "index-hbs-cdn-all-in-jupyter-differenced-chart.html" FEATURE_STATISTICS_TEMPLATE_NAME = "index-hbs-cdn-all-in-jupyter-feature-summary-statistics.html" CONSTRAINTS_REPORT_TEMPLATE_NAME = "index-hbs-cdn-all-in-jupyter-constraints-report.html" PAGE_SIZES = { SUMMARY_REPORT_TEMPLATE_NAME: "1000px", DOUBLE_HISTOGRAM_TEMPLATE_NAME: "277px", + DISTRIBUTION_CHART_TEMPLATE_NAME: "277px", + DIFFERENCED_CHART_TEMPLATE_NAME: "277px", FEATURE_STATISTICS_TEMPLATE_NAME: "650px", CONSTRAINTS_REPORT_TEMPLATE_NAME: "750PX", } @@ -41,7 +41,6 @@ class NotebookProfileViewer: def __init__(self, target_profiles: List[DatasetProfile] = None, reference_profiles: List[DatasetProfile] = None): self.target_profiles = target_profiles self.reference_profiles = reference_profiles - # create json output from profiles if self.target_profiles: if len(self.target_profiles) > 1: logger.warning("More than one profile not implemented yet, default to first profile in the list ") @@ -63,26 +62,32 @@ def __get_compiled_template(self, template_name): logger.debug("Unable to load pybars; install pybars3 to load profile from directly from the current session ") with open(template_path, "r") as file_with_template: source = file_with_template.read() - # compile templated files compiler = Compiler() template = compiler.compile(source) return template - def __pull_feature_data(self, profile, profile_jsons, feature_name): - profile_features = json.loads(profile_jsons[0]) - feature_data = {} - feature_data["properties"] = profile_features.get("properties") - feature_data[feature_name] = profile_features.get("columns").get(feature_name) - feature_data[feature_name]["sum"] = calculate_sum(profile_features, feature_name) - feature_data[feature_name]["variance"] = calculate_variance(profile_features, feature_name) - feature_data[feature_name]["coefficient_of_variation"] = calculate_coefficient_of_variation(profile_features, feature_name) - feature_data[feature_name]["quantile_statistics"] = calculate_quantile_statistics_for_single_feature(profile, profile_features, feature_name) - return feature_data + def __display_feature_chart(self, feature_names, template_name, preferred_cell_height=None): + if type(feature_names) is not list: + feature_names = [feature_names] + template = self.__get_compiled_template(template_name) + if self.reference_profiles: + target_profile_columns = json.loads(self.target_profile_jsons[0]).get("columns") + reference_profile_columns = json.loads(self.reference_profile_jsons[0]).get("columns") + target_profile_features, reference_profile_features = {}, {} + for feature_name in feature_names: + target_profile_features[feature_name] = target_profile_columns.get(feature_name) + reference_profile_features[feature_name] = reference_profile_columns.get(feature_name) + distribution_chart = template( + {"profile_from_whylogs": json.dumps(target_profile_features), "reference_profile_from_whylogs": json.dumps(reference_profile_features)} + ) + return self.__display_rendered_template(distribution_chart, template_name, preferred_cell_height) + else: + logger.warning("This method has to get both target and reference profiles, with valid feature title") + return None def __display_rendered_template(self, template, template_name, height): if not height: height = self.PAGE_SIZES[template_name] - # convert html to iframe and return it wrapped in Ipython...HTML() iframe = f"""
          """ return HTML(iframe) @@ -95,23 +100,13 @@ def summary_drift_report(self, preferred_cell_height=None): return self.__display_rendered_template(template(profiles_summary), self.SUMMARY_REPORT_TEMPLATE_NAME, preferred_cell_height) def double_histogram(self, feature_names, preferred_cell_height=None): - if type(feature_names) is not list: - feature_names = [feature_names] - template = self.__get_compiled_template(self.DOUBLE_HISTOGRAM_TEMPLATE_NAME) - if self.reference_profiles: - target_profile_columns = json.loads(self.target_profile_jsons[0]).get("columns") - reference_profile_columns = json.loads(self.reference_profile_jsons[0]).get("columns") - target_profile_features, reference_profile_features = {}, {} - for feature_name in feature_names: - target_profile_features[feature_name] = target_profile_columns.get(feature_name) - reference_profile_features[feature_name] = reference_profile_columns.get(feature_name) - distribution_chart = template( - {"profile_from_whylogs": json.dumps(target_profile_features), "reference_profile_from_whylogs": json.dumps(reference_profile_features)} - ) - return self.__display_rendered_template(distribution_chart, self.DOUBLE_HISTOGRAM_TEMPLATE_NAME, preferred_cell_height) - else: - logger.warning("This method has to get both target and reference profiles, with valid feature title") - return None + return self.__display_feature_chart(feature_names, self.DOUBLE_HISTOGRAM_TEMPLATE_NAME, preferred_cell_height) + + def distribution_chart(self, feature_names, preferred_cell_height=None): + return self.__display_feature_chart(feature_names, self.DISTRIBUTION_CHART_TEMPLATE_NAME, preferred_cell_height) + + def differenced_distribution_chart(self, feature_names, preferred_cell_height=None): + return self.__display_feature_chart(feature_names, self.DIFFERENCED_CHART_TEMPLATE_NAME, preferred_cell_height) def feature_statistics(self, feature_name, profile="reference", preferred_cell_height=None): template = self.__get_compiled_template(self.FEATURE_STATISTICS_TEMPLATE_NAME) @@ -125,7 +120,7 @@ def feature_statistics(self, feature_name, profile="reference", preferred_cell_h rendered_template = template( { "profile_feature_statistics_from_whylogs": json.dumps( - self.__pull_feature_data(selected_profile.get(feature_name), selected_profile_json, feature_name) + add_feature_statistics(selected_profile.get(feature_name), selected_profile_json, feature_name) ) } ) @@ -134,6 +129,11 @@ def feature_statistics(self, feature_name, profile="reference", preferred_cell_h logger.warning("Quantile and descriptive statistics can be calculated for numerical features only!") return None + def constraints_report(self, constraints, preferred_cell_height=None): + template = self.__get_compiled_template(self.CONSTRAINTS_REPORT_TEMPLATE_NAME) + rendered_template = template({"constraints_report": json.dumps(constraints.report())}) + return self.__display_rendered_template(rendered_template, self.CONSTRAINTS_REPORT_TEMPLATE_NAME, preferred_cell_height) + def download(self, html, preferred_path=None, html_file_name=None): if not html_file_name: if self.reference_profiles: @@ -149,8 +149,3 @@ def download(self, html, preferred_path=None, html_file_name=None): saved_html.write(html.data) saved_html.close() return None - - def constraints_report(self, constraints, preferred_cell_height=None): - template = self.__get_compiled_template(self.CONSTRAINTS_REPORT_TEMPLATE_NAME) - rendered_template = template({"constraints_report": json.dumps(constraints.report())}) - return self.__display_rendered_template(rendered_template, self.CONSTRAINTS_REPORT_TEMPLATE_NAME, preferred_cell_height) diff --git a/src/whylogs/viz/utils/profile_viz_calculations.py b/src/whylogs/viz/utils/profile_viz_calculations.py index 38091edc3b..b842072efd 100644 --- a/src/whylogs/viz/utils/profile_viz_calculations.py +++ b/src/whylogs/viz/utils/profile_viz_calculations.py @@ -1,3 +1,5 @@ +import json + from whylogs.core.summaryconverters import ( compute_chi_squared_test_p_value, ks_test_compute_p_value, @@ -5,8 +7,94 @@ ) from whylogs.proto import InferredType, ReferenceDistributionDiscreteMessage -TYPES = InferredType.Type -categorical_types = (TYPES.INTEGRAL, TYPES.STRING, TYPES.BOOLEAN) +categorical_types = (InferredType.Type.INTEGRAL, InferredType.Type.STRING, InferredType.Type.BOOLEAN) + + +def __calculate_variance(profile_jsons, feature_name): + """ + Calculates variance for single feature + + Parameters + ---------- + profile_jsons: Profile summary serialized json + feature_name: Name of feature + + Returns + ------- + variance : Calculated variance for feature + """ + feature = profile_jsons.get("columns").get(feature_name) + variance = feature.get("numberSummary").get("stddev") ** 2 if feature.get("numberSummary") is not None else 0 + return variance + + +def __calculate_coefficient_of_variation(profile_jsons, feature_name): + """ + Calculates coefficient of variation for single feature + + Parameters + ---------- + profile_jsons: Profile summary serialized json + feature_name: Name of feature + + Returns + ------- + coefficient_of_variation : Calculated coefficient of variation for feature + """ + feature = profile_jsons.get("columns").get(feature_name) + coefficient_of_variation = ( + feature.get("numberSummary").get("stddev") / feature.get("numberSummary").get("mean") if feature.get("numberSummary") is not None else 0 + ) + return coefficient_of_variation + + +def __calculate_sum(profile_jsons, feature_name): + """ + Calculates sum for single feature + + Parameters + ---------- + profile_jsons: Profile summary serialized json + feature_name: Name of feature + + Returns + ------- + coefficient_of_variation : Calculated sum for feature + """ + feature = profile_jsons.get("columns").get(feature_name) + feature_number_summary = feature.get("numberSummary") + if feature_number_summary: + sum = feature_number_summary.get("mean") * int(feature.get("counters").get("count")) + else: + sum = 0 + return sum + + +def __calculate_quantile_statistics(feature, profile_jsons, feature_name): + """ + Calculates sum for single feature + + Parameters + ---------- + profile_jsons: Profile summary serialized json + feature_name: Name of feature + + Returns + ------- + coefficient_of_variation : Calculated sum for feature + """ + quantile_statistics = {} + feature_number_summary = profile_jsons.get("columns").get(feature_name).get("numberSummary") + if feature.number_tracker and feature.number_tracker.histogram.get_n() > 0: + kll_sketch = feature.number_tracker.histogram + quantile_statistics["fifth_percentile"] = single_quantile_from_sketch(kll_sketch, quantile=0.05).quantile + quantile_statistics["q1"] = single_quantile_from_sketch(kll_sketch, quantile=0.25).quantile + quantile_statistics["median"] = single_quantile_from_sketch(kll_sketch, quantile=0.5).quantile + quantile_statistics["q3"] = single_quantile_from_sketch(kll_sketch, quantile=0.75).quantile + quantile_statistics["ninety_fifth_percentile"] = single_quantile_from_sketch(kll_sketch, quantile=0.95).quantile + quantile_statistics["range"] = feature_number_summary.get("max") - feature_number_summary.get("min") + quantile_statistics["iqr"] = quantile_statistics["q3"] - quantile_statistics["q1"] + return quantile_statistics def add_drift_val_to_ref_profile_json(target_profile, reference_profile, reference_profile_json): @@ -23,7 +111,6 @@ def add_drift_val_to_ref_profile_json(target_profile, reference_profile, referen ------- reference_profile_json : Reference profile summary serialized json with drift value for every feature """ - # QUESTION: Should this function need to change behaviour to add drift into target profile? observations = 0 missing_cells = 0 total_count = 0 @@ -68,40 +155,26 @@ def add_drift_val_to_ref_profile_json(target_profile, reference_profile, referen return reference_profile_json -def calculate_variance(profile_jsons, feature_name): - feature = profile_jsons.get("columns").get(feature_name) - variance = feature.get("numberSummary").get("stddev") ** 2 if feature.get("numberSummary") is not None else 0 - return variance - - -def calculate_coefficient_of_variation(profile_jsons, feature_name): - feature = profile_jsons.get("columns").get(feature_name) - coefficient_of_variation = ( - feature.get("numberSummary").get("stddev") / feature.get("numberSummary").get("mean") if feature.get("numberSummary") is not None else 0 - ) - return coefficient_of_variation - - -def calculate_sum(profile_jsons, feature_name): - feature = profile_jsons.get("columns").get(feature_name) - feature_number_summary = feature.get("numberSummary") - if feature_number_summary: - sum = feature_number_summary.get("mean") * int(feature.get("counters").get("count")) - else: - sum = 0 - return sum +def add_feature_statistics(feature, profile_jsons, feature_name): + """ + Calculates different values for feature statistics + Parameters + ---------- + feature: + profile_jsons: Profile summary serialized json + feature_name: Name of feature -def calculate_quantile_statistics_for_single_feature(feature, profile_jsons, feature_name): - quantile_statistics = {} - feature_number_summary = profile_jsons.get("columns").get(feature_name).get("numberSummary") - if feature.number_tracker and feature.number_tracker.histogram.get_n() > 0: - kll_sketch = feature.number_tracker.histogram - quantile_statistics["fifth_percentile"] = single_quantile_from_sketch(kll_sketch, quantile=0.05).quantile - quantile_statistics["q1"] = single_quantile_from_sketch(kll_sketch, quantile=0.25).quantile - quantile_statistics["median"] = single_quantile_from_sketch(kll_sketch, quantile=0.5).quantile - quantile_statistics["q3"] = single_quantile_from_sketch(kll_sketch, quantile=0.75).quantile - quantile_statistics["ninety_fifth_percentile"] = single_quantile_from_sketch(kll_sketch, quantile=0.95).quantile - quantile_statistics["range"] = feature_number_summary.get("max") - feature_number_summary.get("min") - quantile_statistics["iqr"] = quantile_statistics["q3"] - quantile_statistics["q1"] - return quantile_statistics + Returns + ------- + feature: Feature data with appended values for statistics report + """ + profile_features = json.loads(profile_jsons[0]) + feature_with_statistics = {} + feature_with_statistics["properties"] = profile_features.get("properties") + feature_with_statistics[feature_name] = profile_features.get("columns").get(feature_name) + feature_with_statistics[feature_name]["sum"] = __calculate_sum(profile_features, feature_name) + feature_with_statistics[feature_name]["variance"] = __calculate_variance(profile_features, feature_name) + feature_with_statistics[feature_name]["coefficient_of_variation"] = __calculate_coefficient_of_variation(profile_features, feature_name) + feature_with_statistics[feature_name]["quantile_statistics"] = __calculate_quantile_statistics(feature, profile_features, feature_name) + return feature_with_statistics From d35ec6f305e372bea3f581d7f27d2799ed1cc726 Mon Sep 17 00:00:00 2001 From: Perch2005 <78492631+Perch2005@users.noreply.github.com> Date: Mon, 21 Feb 2022 15:58:40 +0400 Subject: [PATCH 103/119] fix bins height --- src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-bar-chart.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-bar-chart.html b/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-bar-chart.html index 8268f0c144..1e192b5ef2 100644 --- a/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-bar-chart.html +++ b/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-bar-chart.html @@ -299,7 +299,7 @@

          Hold on! :)

          yFormat = yScale.tickFormat(100, yFormat); svgEl.append("g") - .attr("transform", `translate(${MARGIN.LEFT}, ${MARGIN.TOP})`) + .attr("transform", `translate(${MARGIN.LEFT}, 0)`) .call(yAxis) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line") From 3c09971c8ab636a0ead1dd3148d87e373f5b44cf Mon Sep 17 00:00:00 2001 From: Jirayr-Solvee Date: Mon, 21 Feb 2022 16:24:35 +0400 Subject: [PATCH 104/119] transform X axis 90 deg for double histogram --- ...cdn-all-in-jupyter-distribution-chart.html | 89 +++++++++---------- src/whylogs/viz/jupyter_notebook_viz.py | 2 +- 2 files changed, 45 insertions(+), 46 deletions(-) diff --git a/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-distribution-chart.html b/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-distribution-chart.html index dfce9c40f9..0ada18e170 100644 --- a/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-distribution-chart.html +++ b/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-distribution-chart.html @@ -188,7 +188,7 @@

          Hold on! :)

          //helper fun class GenerateChartParams { - constructor(height, width, data, bottomMargin=30, topMargin=5) { + constructor(height, width, targetData, referenceData, bottomMargin=30, topMargin=5) { this.MARGIN = { TOP: topMargin, RIGHT: 5, @@ -201,12 +201,16 @@

          Hold on! :)

          this.CHART_HEIGHT = this.SVG_HEIGHT - this.MARGIN.TOP - this.MARGIN.BOTTOM; this.svgEl = d3.create("svg") .attr("preserveAspectRatio", "xMinYMin meet") - .attr("viewBox", `20 0 ${$(window).width()} ${$(window).height()-55}`) + .attr("viewBox", `20 0 ${$(window).width()} ${$(window).height()-30}`) .classed("svg-content-responsive", true) - this.maxYValue = d3.max(data, (d) => Math.abs(d.axisY)); + this.maxYValue = d3.max(targetData, (d) => Math.abs(d.axisY)); + const mergedData = targetData.concat(referenceData).map(a => { + return a.axisX + }) + const mergedAndSortedData = mergedData.sort(function(a, b) { return a - b; }); this.xScale = d3 .scaleBand() - .domain(data.map((d) => d.axisX)) + .domain(mergedAndSortedData.map((d) => d)) .range([this.MARGIN.LEFT, this.MARGIN.LEFT + this.CHART_WIDTH]); this.yScale = d3 .scaleLinear() @@ -217,56 +221,37 @@

          Hold on! :)

          function chartData(column, startIndex) { const data = []; - if (column.numberSummary.isDiscrete) { - column.frequentItems.items.forEach((item, index) => { - data.push({ - axisY: item.estimate, - axisX: index, - }); - }); - } else { - for (let i = 0; i referenceProfileMin ? - chartsStartPoint.push(Math.ceil(targetedProfileMin-referenceProfileMin), 0): - chartsStartPoint.push(0, Math.ceil(referenceProfileMin-targetedProfileMin)) - histogramData = chartData(data, chartsStartPoint[0]) - overlappedHistogramData = chartData(referenceData, chartsStartPoint[1]) - } + const targetedProfileMin = targetData.numberSummary.histogram.min < 0 ? + targetData.numberSummary.histogram.min.toFixed(1) * 10 * -1 : + targetData.numberSummary.histogram.min.toFixed(1) * 10 + + const referenceProfileMin = referenceData.numberSummary.histogram.min < 0 ? + referenceData.numberSummary.histogram.min.toFixed(1) * 10 * -1 : + referenceData.numberSummary.histogram.min.toFixed(1) * 10 + + const chartsStartPoint = [] + targetedProfileMin > referenceProfileMin ? + chartsStartPoint.push(Math.ceil(targetedProfileMin-referenceProfileMin), 0): + chartsStartPoint.push(0, Math.ceil(referenceProfileMin-targetedProfileMin)) + histogramData = chartData(targetData, chartsStartPoint[0], 'original_profile') + overlappedHistogramData = chartData(referenceData, chartsStartPoint[1], 'ref_profile') let yFormat, xFormat; - const sizes = new GenerateChartParams($(window).height()-55, $(window).width(), histogramData) + const sizes = new GenerateChartParams($(window).height()-55, $(window).width(), histogramData, overlappedHistogramData) const { MARGIN, SVG_WIDTH, @@ -296,6 +281,21 @@

          Hold on! :)

          .attr("fill", "currentColor") .attr("text-anchor", "start")); + svgEl.append("g") + .attr("transform", `translate(0,${SVG_HEIGHT - MARGIN.BOTTOM})`) + .call(xAxis) + .selectAll("text") + .attr("dy", "-.6em") + .attr("dx", "-.8em") + .attr("transform", "rotate(-90)") + .style("text-anchor", "end") + .call(g => g.select(".domain").remove()) + .call(g => g.selectAll(".tick line").remove()) + .call(g => g.append("text") + .attr("fill", "currentColor") + .attr("text-anchor", "end")) + .style("font-size", "10") + const gChart = svgEl.append("g"); gChart .selectAll(".bar") @@ -323,7 +323,6 @@

          Hold on! :)

          .attr("y", (d) => yScale(d.axisY) + MARGIN.TOP) .attr("fill", "#369BAC") .style("opacity", "0.6"); - return svgEl._groups[0][0].outerHTML; } diff --git a/src/whylogs/viz/jupyter_notebook_viz.py b/src/whylogs/viz/jupyter_notebook_viz.py index 02edf72029..d2a55b3142 100644 --- a/src/whylogs/viz/jupyter_notebook_viz.py +++ b/src/whylogs/viz/jupyter_notebook_viz.py @@ -31,7 +31,7 @@ class NotebookProfileViewer: CONSTRAINTS_REPORT_TEMPLATE_NAME = "index-hbs-cdn-all-in-jupyter-constraints-report.html" PAGE_SIZES = { SUMMARY_REPORT_TEMPLATE_NAME: "1000px", - DOUBLE_HISTOGRAM_TEMPLATE_NAME: "277px", + DOUBLE_HISTOGRAM_TEMPLATE_NAME: "300px", DISTRIBUTION_CHART_TEMPLATE_NAME: "277px", DIFFERENCED_CHART_TEMPLATE_NAME: "277px", FEATURE_STATISTICS_TEMPLATE_NAME: "650px", From 044d45aa9e961ac24e99e48ee994c96a43a77742 Mon Sep 17 00:00:00 2001 From: Jirayr-Solvee Date: Tue, 22 Feb 2022 02:22:40 +0400 Subject: [PATCH 105/119] add method for setting profiles --- examples/Profile_Viewer_In_Notebook.ipynb | 4 +- src/whylogs/viz/jupyter_notebook_viz.py | 47 +++++++++---------- .../viz/utils/profile_viz_calculations.py | 6 +-- 3 files changed, 27 insertions(+), 30 deletions(-) diff --git a/examples/Profile_Viewer_In_Notebook.ipynb b/examples/Profile_Viewer_In_Notebook.ipynb index e988a3680f..f581536ccc 100644 --- a/examples/Profile_Viewer_In_Notebook.ipynb +++ b/examples/Profile_Viewer_In_Notebook.ipynb @@ -151,8 +151,8 @@ "metadata": {}, "outputs": [], "source": [ - "# should we allow multiple profiles?\n", - "visualization = NotebookProfileViewer(target_profiles=[target_profile], reference_profiles=[reference_profile])" + "visualization = NotebookProfileViewer()\n", + "visualization.set_profiles(target_profile=target_profile, reference_profile=reference_profile)" ] }, { diff --git a/src/whylogs/viz/jupyter_notebook_viz.py b/src/whylogs/viz/jupyter_notebook_viz.py index d2a55b3142..a69ac54e3b 100644 --- a/src/whylogs/viz/jupyter_notebook_viz.py +++ b/src/whylogs/viz/jupyter_notebook_viz.py @@ -2,7 +2,6 @@ import json import logging import os -from typing import List from IPython.core.display import HTML @@ -38,16 +37,6 @@ class NotebookProfileViewer: CONSTRAINTS_REPORT_TEMPLATE_NAME: "750PX", } - def __init__(self, target_profiles: List[DatasetProfile] = None, reference_profiles: List[DatasetProfile] = None): - self.target_profiles = target_profiles - self.reference_profiles = reference_profiles - if self.target_profiles: - if len(self.target_profiles) > 1: - logger.warning("More than one profile not implemented yet, default to first profile in the list ") - self.target_profile_jsons = [message_to_json(each_prof.to_summary()) for each_prof in self.target_profiles] - if self.reference_profiles: - self.reference_profile_jsons = [message_to_json(each_prof.to_summary()) for each_prof in self.reference_profiles] - def __get_template_path(self, html_file_name): template_path = os.path.abspath(os.path.join(_MY_DIR, os.pardir, "viewer", html_file_name)) return template_path @@ -70,9 +59,9 @@ def __display_feature_chart(self, feature_names, template_name, preferred_cell_h if type(feature_names) is not list: feature_names = [feature_names] template = self.__get_compiled_template(template_name) - if self.reference_profiles: - target_profile_columns = json.loads(self.target_profile_jsons[0]).get("columns") - reference_profile_columns = json.loads(self.reference_profile_jsons[0]).get("columns") + if self._reference_profile: + target_profile_columns = json.loads(self._target_profile_json).get("columns") + reference_profile_columns = json.loads(self._reference_profile_json).get("columns") target_profile_features, reference_profile_features = {}, {} for feature_name in feature_names: target_profile_features[feature_name] = target_profile_columns.get(feature_name) @@ -91,11 +80,19 @@ def __display_rendered_template(self, template, template_name, height): iframe = f"""
          """ return HTML(iframe) + def set_profiles(self, target_profile: DatasetProfile = None, reference_profile: DatasetProfile = None): + self._target_profile = target_profile + self._reference_profile = reference_profile + if self._target_profile: + self._target_profile_json = message_to_json(self._target_profile.to_summary()) + if self._reference_profile: + self._reference_profile_json = message_to_json(self._reference_profile.to_summary()) + def summary_drift_report(self, preferred_cell_height=None): - reference_profile = add_drift_val_to_ref_profile_json(self.target_profiles[0], self.reference_profiles[0], json.loads(self.reference_profile_jsons[0])) + reference_profile = add_drift_val_to_ref_profile_json(self._target_profile, self._reference_profile, json.loads(self._reference_profile_json)) template = self.__get_compiled_template(self.SUMMARY_REPORT_TEMPLATE_NAME) - profiles_summary = {"profile_from_whylogs": self.target_profile_jsons[0]} - if self.reference_profiles: + profiles_summary = {"profile_from_whylogs": self._target_profile_json} + if self._reference_profile: profiles_summary["reference_profile_from_whylogs"] = json.dumps(reference_profile) return self.__display_rendered_template(template(profiles_summary), self.SUMMARY_REPORT_TEMPLATE_NAME, preferred_cell_height) @@ -110,12 +107,12 @@ def differenced_distribution_chart(self, feature_names, preferred_cell_height=No def feature_statistics(self, feature_name, profile="reference", preferred_cell_height=None): template = self.__get_compiled_template(self.FEATURE_STATISTICS_TEMPLATE_NAME) - if self.reference_profiles and profile.lower() == "reference": - selected_profile_json = self.reference_profile_jsons - selected_profile = self.reference_profiles[0].columns + if self._reference_profile and profile.lower() == "reference": + selected_profile_json = self._reference_profile_json + selected_profile = self._reference_profile.columns else: - selected_profile_json = self.target_profile_jsons - selected_profile = self.target_profiles[0].columns + selected_profile_json = self._target_profile_json + selected_profile = self._target_profile.columns if selected_profile.get(feature_name).schema_tracker.to_summary().inferred_type.type in numerical_types: rendered_template = template( { @@ -136,10 +133,10 @@ def constraints_report(self, constraints, preferred_cell_height=None): def download(self, html, preferred_path=None, html_file_name=None): if not html_file_name: - if self.reference_profiles: - html_file_name = self.reference_profiles[0].dataset_timestamp + if self._reference_profile: + html_file_name = self._reference_profile.dataset_timestamp else: - html_file_name = self.target_profiles[0].dataset_timestamp + html_file_name = self._target_profile.dataset_timestamp if preferred_path: path = os.path.expanduser(preferred_path) else: diff --git a/src/whylogs/viz/utils/profile_viz_calculations.py b/src/whylogs/viz/utils/profile_viz_calculations.py index b842072efd..7d1f1d5a9d 100644 --- a/src/whylogs/viz/utils/profile_viz_calculations.py +++ b/src/whylogs/viz/utils/profile_viz_calculations.py @@ -155,21 +155,21 @@ def add_drift_val_to_ref_profile_json(target_profile, reference_profile, referen return reference_profile_json -def add_feature_statistics(feature, profile_jsons, feature_name): +def add_feature_statistics(feature, profile_json, feature_name): """ Calculates different values for feature statistics Parameters ---------- feature: - profile_jsons: Profile summary serialized json + profile_json: Profile summary serialized json feature_name: Name of feature Returns ------- feature: Feature data with appended values for statistics report """ - profile_features = json.loads(profile_jsons[0]) + profile_features = json.loads(profile_json) feature_with_statistics = {} feature_with_statistics["properties"] = profile_features.get("properties") feature_with_statistics[feature_name] = profile_features.get("columns").get(feature_name) From cedb4979181b40bba0d92252001ef5449d6ad7bd Mon Sep 17 00:00:00 2001 From: ssxcho Date: Tue, 22 Feb 2022 05:38:13 +0400 Subject: [PATCH 106/119] add tests for jupyter notebook visualization --- tests/unit/viz/test_jupyter_notebook_viz.py | 208 ++++++++++++++++++++ 1 file changed, 208 insertions(+) create mode 100644 tests/unit/viz/test_jupyter_notebook_viz.py diff --git a/tests/unit/viz/test_jupyter_notebook_viz.py b/tests/unit/viz/test_jupyter_notebook_viz.py new file mode 100644 index 0000000000..c96ecb2f9b --- /dev/null +++ b/tests/unit/viz/test_jupyter_notebook_viz.py @@ -0,0 +1,208 @@ +import datetime +import os + +import numpy as np + +from faker import Faker +from collections import OrderedDict + +from whylogs import get_or_create_session +from whylogs.viz import NotebookProfileViewer +from whylogs.core.statistics.constraints import ( + columnsMatchSetConstraint, + columnValuesInSetConstraint, + ValueConstraint, + columnValuesUniqueWithinRow, + columnPairValuesInSetConstraint, + sumOfRowValuesOfMultipleColumnsEqualsConstraint, + DatasetConstraints, + SummaryConstraint, + SummaryConstraints, + Op, +) + + +def __generate_target_profile(): + + session = get_or_create_session() + locales = OrderedDict([ + ('en-US', 1), + ('fr-FR', 2), + ('ja_JP', 2), + ]) + fake = Faker(locales) + with session.logger("mytestytest", dataset_timestamp=datetime.datetime(2021, 6, 2)) as logger: + for _ in range(5): + logger.log({"strings": fake.name()}) + logger.log({"uniform_integers": np.random.randint(0, 50)}) + logger.log({"nulls": None}) + + return logger.profile + + +def __generate_reference_profile(): + + session = get_or_create_session() + locales = OrderedDict([ + ('en-US', 1), + ('fr-FR', 2), + ('ja_JP', 2), + ]) + fake = Faker(locales) + with session.logger("mytestytest", dataset_timestamp=datetime.datetime(2021, 6, 2)) as logger: + for _ in range(5): + logger.log({"strings": fake.name()}) + logger.log({"uniform_integers": np.random.randint(0, 50)}) + logger.log({"nulls": None}) + + return logger.profile + + +def _get_sample_dataset_constraints(): + cvisc = columnValuesInSetConstraint(value_set={2, 5, 8}) + ltc = ValueConstraint(Op.LT, 1) + + min_gt_constraint = SummaryConstraint("min", Op.GT, value=100) + max_le_constraint = SummaryConstraint("max", Op.LE, value=5) + + set1 = set(["col1", "col2"]) + columns_match_constraint = columnsMatchSetConstraint(set1) + + val_set = {(1, 2), (3, 5)} + col_set = ["A", "B"] + mcv_constraints = [ + columnValuesUniqueWithinRow(column_A="A", verbose=True), + columnPairValuesInSetConstraint(column_A="A", column_B="B", value_set=val_set), + sumOfRowValuesOfMultipleColumnsEqualsConstraint(columns=col_set, value=100), + ] + + return DatasetConstraints( + None, + value_constraints={"annual_inc": [cvisc, ltc]}, + summary_constraints={"annual_inc": [max_le_constraint, min_gt_constraint]}, + table_shape_constraints=[columns_match_constraint], + multi_column_value_constraints=mcv_constraints, + ) + + +def test_notebook_profile_viewer_set_profiles(): + target_profile = __generate_target_profile() + reference_profile = __generate_reference_profile() + viz = NotebookProfileViewer() + viz.set_profiles(target_profile=target_profile, reference_profile=reference_profile) + + +def test_summary_drift_report_without_preferred_height(): + target_profile = __generate_target_profile() + reference_profile = __generate_reference_profile() + viz = NotebookProfileViewer() + viz.set_profiles(target_profile=target_profile, reference_profile=reference_profile) + viz.summary_drift_report() + + +def test_summary_drift_report_with_preferred_height(): + target_profile = __generate_target_profile() + reference_profile = __generate_reference_profile() + viz = NotebookProfileViewer() + viz.set_profiles(target_profile=target_profile, reference_profile=reference_profile) + viz.summary_drift_report() + + +def test_feature_statistics_not_passing_profile_type(): + target_profile = __generate_target_profile() + reference_profile = __generate_reference_profile() + viz = NotebookProfileViewer() + viz.set_profiles(target_profile=target_profile, reference_profile=reference_profile) + viz.feature_statistics('uniform_integers') + + +def test_feature_statistics_passing_profile_type(): + target_profile = __generate_target_profile() + reference_profile = __generate_reference_profile() + viz = NotebookProfileViewer() + viz.set_profiles(target_profile=target_profile, reference_profile=reference_profile) + viz.feature_statistics('uniform_integers', 'target') + + +def test_feature_statistics_passing_profile_type_and_prefered_height(): + target_profile = __generate_target_profile() + reference_profile = __generate_reference_profile() + viz = NotebookProfileViewer() + viz.set_profiles(target_profile=target_profile, reference_profile=reference_profile) + viz.feature_statistics('uniform_integers', 'target', '1000px') + + +def test_download_passing_all_arguments(tmpdir): + target_profile = __generate_target_profile() + reference_profile = __generate_reference_profile() + viz = NotebookProfileViewer() + viz.set_profiles(target_profile=target_profile, reference_profile=reference_profile) + + download = viz.download(viz.summary_drift_report(), tmpdir, html_file_name='foo') + assert os.path.exists(tmpdir + "/foo.html") + + +def test_constraints_report_without_preferred_height(): + target_profile = __generate_target_profile() + reference_profile = __generate_reference_profile() + viz = NotebookProfileViewer() + viz.set_profiles(target_profile=target_profile, reference_profile=reference_profile) + dc = _get_sample_dataset_constraints() + viz.constraints_report(dc) + + +def test_constraints_report_with_preferred_height(): + target_profile = __generate_target_profile() + reference_profile = __generate_reference_profile() + viz = NotebookProfileViewer() + viz.set_profiles(target_profile=target_profile, reference_profile=reference_profile) + dc = _get_sample_dataset_constraints() + viz.constraints_report(dc, preferred_cell_height='1000px') + + +def test_double_histogram_without_height(): + target_profile = __generate_target_profile() + reference_profile = __generate_reference_profile() + viz = NotebookProfileViewer() + viz.set_profiles(target_profile=target_profile, reference_profile=reference_profile) + viz.double_histogram('uniform_integers') + + +def test_double_histogram_with_height(): + target_profile = __generate_target_profile() + reference_profile = __generate_reference_profile() + viz = NotebookProfileViewer() + viz.set_profiles(target_profile=target_profile, reference_profile=reference_profile) + viz.double_histogram('uniform_integers', '1000px') + + +def test_distribution_chart_without_height(): + target_profile = __generate_target_profile() + reference_profile = __generate_reference_profile() + viz = NotebookProfileViewer() + viz.set_profiles(target_profile=target_profile, reference_profile=reference_profile) + viz.distribution_chart('strings') + + +def test_distribution_chart_with_height(): + target_profile = __generate_target_profile() + reference_profile = __generate_reference_profile() + viz = NotebookProfileViewer() + viz.set_profiles(target_profile=target_profile, reference_profile=reference_profile) + viz.distribution_chart('strings', '1000px') + + +def test_difference_distribution_chart_without_height(): + target_profile = __generate_target_profile() + reference_profile = __generate_reference_profile() + viz = NotebookProfileViewer() + viz.set_profiles(target_profile=target_profile, reference_profile=reference_profile) + viz.difference_distribution_chart('strings') + + +def test_difference_distribution_chart_with_height(): + target_profile = __generate_target_profile() + reference_profile = __generate_reference_profile() + viz = NotebookProfileViewer() + viz.set_profiles(target_profile=target_profile, reference_profile=reference_profile) + viz.difference_distribution_chart('strings', '1000px') From 2935d0f9a2db46bf7ca681dc9152eaedee9d1da5 Mon Sep 17 00:00:00 2001 From: ssxcho Date: Tue, 22 Feb 2022 05:41:53 +0400 Subject: [PATCH 107/119] changes paths for html templates, fix typing error --- src/whylogs/viz/browser_viz.py | 21 ++++++++++++------ src/whylogs/viz/jupyter_notebook_viz.py | 29 ++++++++++++++++--------- 2 files changed, 33 insertions(+), 17 deletions(-) diff --git a/src/whylogs/viz/browser_viz.py b/src/whylogs/viz/browser_viz.py index fea9b80393..3822f76453 100644 --- a/src/whylogs/viz/browser_viz.py +++ b/src/whylogs/viz/browser_viz.py @@ -21,26 +21,32 @@ 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")) + index_path = os.path.abspath(os.path.join( + _MY_DIR, os.pardir, "viewer/templates", "index.html")) webbrowser.open_new_tab(f"file:{index_path}#") return None # 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")) + index_path = os.path.abspath(os.path.join( + _MY_DIR, os.pardir, "viewer/templates", "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/templates", "index-hbs-cdn-all-in.html")) with open(index_path, "r") as file_with_template: source = file_with_template.read() @@ -50,7 +56,8 @@ 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]}) diff --git a/src/whylogs/viz/jupyter_notebook_viz.py b/src/whylogs/viz/jupyter_notebook_viz.py index a69ac54e3b..bae1aa330c 100644 --- a/src/whylogs/viz/jupyter_notebook_viz.py +++ b/src/whylogs/viz/jupyter_notebook_viz.py @@ -38,7 +38,9 @@ class NotebookProfileViewer: } def __get_template_path(self, html_file_name): - template_path = os.path.abspath(os.path.join(_MY_DIR, os.pardir, "viewer", html_file_name)) + template_path = os.path.abspath(os.path.join( + _MY_DIR, os.pardir, "viewer/templates", html_file_name)) + print(_MY_DIR) return template_path def __get_compiled_template(self, template_name): @@ -48,7 +50,8 @@ def __get_compiled_template(self, template_name): 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 ") with open(template_path, "r") as file_with_template: source = file_with_template.read() compiler = Compiler() @@ -65,13 +68,16 @@ def __display_feature_chart(self, feature_names, template_name, preferred_cell_h target_profile_features, reference_profile_features = {}, {} for feature_name in feature_names: target_profile_features[feature_name] = target_profile_columns.get(feature_name) - reference_profile_features[feature_name] = reference_profile_columns.get(feature_name) + reference_profile_features[feature_name] = reference_profile_columns.get( + feature_name) distribution_chart = template( - {"profile_from_whylogs": json.dumps(target_profile_features), "reference_profile_from_whylogs": json.dumps(reference_profile_features)} + {"profile_from_whylogs": json.dumps( + target_profile_features), "reference_profile_from_whylogs": json.dumps(reference_profile_features)} ) return self.__display_rendered_template(distribution_chart, template_name, preferred_cell_height) else: - logger.warning("This method has to get both target and reference profiles, with valid feature title") + logger.warning( + "This method has to get both target and reference profiles, with valid feature title") return None def __display_rendered_template(self, template, template_name, height): @@ -89,7 +95,8 @@ def set_profiles(self, target_profile: DatasetProfile = None, reference_profile: self._reference_profile_json = message_to_json(self._reference_profile.to_summary()) def summary_drift_report(self, preferred_cell_height=None): - reference_profile = add_drift_val_to_ref_profile_json(self._target_profile, self._reference_profile, json.loads(self._reference_profile_json)) + reference_profile = add_drift_val_to_ref_profile_json( + self._target_profile, self._reference_profile, json.loads(self._reference_profile_json)) template = self.__get_compiled_template(self.SUMMARY_REPORT_TEMPLATE_NAME) profiles_summary = {"profile_from_whylogs": self._target_profile_json} if self._reference_profile: @@ -102,7 +109,7 @@ def double_histogram(self, feature_names, preferred_cell_height=None): def distribution_chart(self, feature_names, preferred_cell_height=None): return self.__display_feature_chart(feature_names, self.DISTRIBUTION_CHART_TEMPLATE_NAME, preferred_cell_height) - def differenced_distribution_chart(self, feature_names, preferred_cell_height=None): + def difference_distribution_chart(self, feature_names, preferred_cell_height=None): return self.__display_feature_chart(feature_names, self.DIFFERENCED_CHART_TEMPLATE_NAME, preferred_cell_height) def feature_statistics(self, feature_name, profile="reference", preferred_cell_height=None): @@ -117,13 +124,15 @@ def feature_statistics(self, feature_name, profile="reference", preferred_cell_h rendered_template = template( { "profile_feature_statistics_from_whylogs": json.dumps( - add_feature_statistics(selected_profile.get(feature_name), selected_profile_json, feature_name) + add_feature_statistics(selected_profile.get( + feature_name), selected_profile_json, feature_name) ) } ) return self.__display_rendered_template(rendered_template, self.FEATURE_STATISTICS_TEMPLATE_NAME, preferred_cell_height) else: - logger.warning("Quantile and descriptive statistics can be calculated for numerical features only!") + logger.warning( + "Quantile and descriptive statistics can be calculated for numerical features only!") return None def constraints_report(self, constraints, preferred_cell_height=None): @@ -138,7 +147,7 @@ def download(self, html, preferred_path=None, html_file_name=None): else: html_file_name = self._target_profile.dataset_timestamp if preferred_path: - path = os.path.expanduser(preferred_path) + path = os.path.join(os.path.expanduser(preferred_path), str(html_file_name) + ".html") else: path = os.path.join(os.pardir, "html_reports", str(html_file_name) + ".html") full_path = os.path.abspath(path) From d8707262ae42f7ec0cfada6c5779ba823388cff8 Mon Sep 17 00:00:00 2001 From: ssxcho Date: Tue, 22 Feb 2022 05:46:43 +0400 Subject: [PATCH 108/119] fix typing error, remove print from code --- examples/Profile_Viewer_In_Notebook.ipynb | 6 +++--- src/whylogs/viz/jupyter_notebook_viz.py | 1 - 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/examples/Profile_Viewer_In_Notebook.ipynb b/examples/Profile_Viewer_In_Notebook.ipynb index f581536ccc..ee2876a96a 100644 --- a/examples/Profile_Viewer_In_Notebook.ipynb +++ b/examples/Profile_Viewer_In_Notebook.ipynb @@ -299,7 +299,7 @@ }, "outputs": [], "source": [ - "visualization.differenced_distribution_chart(feature_names=\"strings\")" + "visualization.difference_distribution_chart(feature_names=\"strings\")" ] }, { @@ -481,7 +481,7 @@ ], "metadata": { "kernelspec": { - "display_name": "Python 3", + "display_name": "Python 3 (ipykernel)", "language": "python", "name": "python3" }, @@ -495,7 +495,7 @@ "name": "python", "nbconvert_exporter": "python", "pygments_lexer": "ipython3", - "version": "3.9.7" + "version": "3.8.10" } }, "nbformat": 4, diff --git a/src/whylogs/viz/jupyter_notebook_viz.py b/src/whylogs/viz/jupyter_notebook_viz.py index bae1aa330c..e95124c45d 100644 --- a/src/whylogs/viz/jupyter_notebook_viz.py +++ b/src/whylogs/viz/jupyter_notebook_viz.py @@ -40,7 +40,6 @@ class NotebookProfileViewer: def __get_template_path(self, html_file_name): template_path = os.path.abspath(os.path.join( _MY_DIR, os.pardir, "viewer/templates", html_file_name)) - print(_MY_DIR) return template_path def __get_compiled_template(self, template_name): From ca59a19c3901f80a51447d0d49546e6f036db660 Mon Sep 17 00:00:00 2001 From: ssxcho Date: Tue, 22 Feb 2022 05:51:31 +0400 Subject: [PATCH 109/119] move html templates to new directory --- .../index-hbs-cdn-all-in-for-jupyter-notebook.html | 0 .../{ => templates}/index-hbs-cdn-all-in-jupyter-bar-chart.html | 0 .../index-hbs-cdn-all-in-jupyter-constraints-report.html | 0 .../index-hbs-cdn-all-in-jupyter-differenced-chart.html | 0 .../index-hbs-cdn-all-in-jupyter-distribution-chart.html | 0 .../index-hbs-cdn-all-in-jupyter-feature-summary-statistics.html | 0 src/whylogs/viewer/{ => templates}/index-hbs-cdn-all-in.html | 0 src/whylogs/viewer/{ => templates}/index-hbs-library-all-in.html | 0 src/whylogs/viewer/{ => templates}/index-hbs.html | 0 src/whylogs/viewer/{ => templates}/index.html | 0 10 files changed, 0 insertions(+), 0 deletions(-) rename src/whylogs/viewer/{ => templates}/index-hbs-cdn-all-in-for-jupyter-notebook.html (100%) rename src/whylogs/viewer/{ => templates}/index-hbs-cdn-all-in-jupyter-bar-chart.html (100%) rename src/whylogs/viewer/{ => templates}/index-hbs-cdn-all-in-jupyter-constraints-report.html (100%) rename src/whylogs/viewer/{ => templates}/index-hbs-cdn-all-in-jupyter-differenced-chart.html (100%) rename src/whylogs/viewer/{ => templates}/index-hbs-cdn-all-in-jupyter-distribution-chart.html (100%) rename src/whylogs/viewer/{ => templates}/index-hbs-cdn-all-in-jupyter-feature-summary-statistics.html (100%) rename src/whylogs/viewer/{ => templates}/index-hbs-cdn-all-in.html (100%) rename src/whylogs/viewer/{ => templates}/index-hbs-library-all-in.html (100%) rename src/whylogs/viewer/{ => templates}/index-hbs.html (100%) rename src/whylogs/viewer/{ => templates}/index.html (100%) diff --git a/src/whylogs/viewer/index-hbs-cdn-all-in-for-jupyter-notebook.html b/src/whylogs/viewer/templates/index-hbs-cdn-all-in-for-jupyter-notebook.html similarity index 100% rename from src/whylogs/viewer/index-hbs-cdn-all-in-for-jupyter-notebook.html rename to src/whylogs/viewer/templates/index-hbs-cdn-all-in-for-jupyter-notebook.html diff --git a/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-bar-chart.html b/src/whylogs/viewer/templates/index-hbs-cdn-all-in-jupyter-bar-chart.html similarity index 100% rename from src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-bar-chart.html rename to src/whylogs/viewer/templates/index-hbs-cdn-all-in-jupyter-bar-chart.html diff --git a/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-constraints-report.html b/src/whylogs/viewer/templates/index-hbs-cdn-all-in-jupyter-constraints-report.html similarity index 100% rename from src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-constraints-report.html rename to src/whylogs/viewer/templates/index-hbs-cdn-all-in-jupyter-constraints-report.html diff --git a/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-differenced-chart.html b/src/whylogs/viewer/templates/index-hbs-cdn-all-in-jupyter-differenced-chart.html similarity index 100% rename from src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-differenced-chart.html rename to src/whylogs/viewer/templates/index-hbs-cdn-all-in-jupyter-differenced-chart.html diff --git a/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-distribution-chart.html b/src/whylogs/viewer/templates/index-hbs-cdn-all-in-jupyter-distribution-chart.html similarity index 100% rename from src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-distribution-chart.html rename to src/whylogs/viewer/templates/index-hbs-cdn-all-in-jupyter-distribution-chart.html diff --git a/src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-feature-summary-statistics.html b/src/whylogs/viewer/templates/index-hbs-cdn-all-in-jupyter-feature-summary-statistics.html similarity index 100% rename from src/whylogs/viewer/index-hbs-cdn-all-in-jupyter-feature-summary-statistics.html rename to src/whylogs/viewer/templates/index-hbs-cdn-all-in-jupyter-feature-summary-statistics.html diff --git a/src/whylogs/viewer/index-hbs-cdn-all-in.html b/src/whylogs/viewer/templates/index-hbs-cdn-all-in.html similarity index 100% rename from src/whylogs/viewer/index-hbs-cdn-all-in.html rename to src/whylogs/viewer/templates/index-hbs-cdn-all-in.html diff --git a/src/whylogs/viewer/index-hbs-library-all-in.html b/src/whylogs/viewer/templates/index-hbs-library-all-in.html similarity index 100% rename from src/whylogs/viewer/index-hbs-library-all-in.html rename to src/whylogs/viewer/templates/index-hbs-library-all-in.html diff --git a/src/whylogs/viewer/index-hbs.html b/src/whylogs/viewer/templates/index-hbs.html similarity index 100% rename from src/whylogs/viewer/index-hbs.html rename to src/whylogs/viewer/templates/index-hbs.html diff --git a/src/whylogs/viewer/index.html b/src/whylogs/viewer/templates/index.html similarity index 100% rename from src/whylogs/viewer/index.html rename to src/whylogs/viewer/templates/index.html From 0de161a17d2a2169d9c68e856646ecb634651716 Mon Sep 17 00:00:00 2001 From: Jirayr-Solvee Date: Tue, 22 Feb 2022 16:25:11 +0400 Subject: [PATCH 110/119] show axis value instead of letter key --- ...ndex-hbs-cdn-all-in-jupyter-bar-chart.html | 77 ++++++++++++------- ...-cdn-all-in-jupyter-differenced-chart.html | 53 +++++++++---- 2 files changed, 89 insertions(+), 41 deletions(-) diff --git a/src/whylogs/viewer/templates/index-hbs-cdn-all-in-jupyter-bar-chart.html b/src/whylogs/viewer/templates/index-hbs-cdn-all-in-jupyter-bar-chart.html index 1e192b5ef2..be31ab718f 100644 --- a/src/whylogs/viewer/templates/index-hbs-cdn-all-in-jupyter-bar-chart.html +++ b/src/whylogs/viewer/templates/index-hbs-cdn-all-in-jupyter-bar-chart.html @@ -140,7 +140,7 @@ .bar.positive { fill: #369BACB2; } - + .bar.negative { fill: #2683C9E5; } @@ -199,11 +199,15 @@

          Hold on! :)

          - - + + + From 773fba5fc5974822714b4da1dfe06f157ccb28e3 Mon Sep 17 00:00:00 2001 From: Perch2005 <78492631+Perch2005@users.noreply.github.com> Date: Sat, 26 Feb 2022 04:11:49 +0400 Subject: [PATCH 114/119] change double histogram generating logic --- ...cdn-all-in-jupyter-distribution-chart.html | 179 +++++++++++------- 1 file changed, 106 insertions(+), 73 deletions(-) diff --git a/src/whylogs/viewer/templates/index-hbs-cdn-all-in-jupyter-distribution-chart.html b/src/whylogs/viewer/templates/index-hbs-cdn-all-in-jupyter-distribution-chart.html index 0ada18e170..233e074967 100644 --- a/src/whylogs/viewer/templates/index-hbs-cdn-all-in-jupyter-distribution-chart.html +++ b/src/whylogs/viewer/templates/index-hbs-cdn-all-in-jupyter-distribution-chart.html @@ -117,7 +117,7 @@ } .chart-box-title { - width: 98%; + width: 88%; justify-content: space-between; margin: 10px; margin-top: 15px; @@ -132,6 +132,17 @@ line-height: 16px; color: #4F595B; } + + .bar { + font: 10px sans-serif; + } + + .bar path, + .bar line { + fill: none; + stroke: #000; + shape-rendering: crispEdges; + } @media screen and (min-width: 500px) { .desktop-content { @@ -154,11 +165,11 @@

          {{@key}}

          -
          +
          Current
          -
          +
          Reference
          @@ -201,57 +212,64 @@

          Hold on! :)

          this.CHART_HEIGHT = this.SVG_HEIGHT - this.MARGIN.TOP - this.MARGIN.BOTTOM; this.svgEl = d3.create("svg") .attr("preserveAspectRatio", "xMinYMin meet") - .attr("viewBox", `20 0 ${$(window).width()} ${$(window).height()-30}`) + .attr("viewBox", `0 0 ${$(window).width()+100} ${$(window).height()-30}`) .classed("svg-content-responsive", true) this.maxYValue = d3.max(targetData, (d) => Math.abs(d.axisY)); - const mergedData = targetData.concat(referenceData).map(a => { - return a.axisX + this.minYValue = d3.min(targetData, (d) => Math.abs(d.axisY)); + const mergedReferenceData = referenceData.map(({axisX, axisY}) => { + return {axisX, axisY} + }) + const mergedTargetedData = targetData.map(({axisX, axisY}) => { + return {axisX, axisY} }) - const mergedAndSortedData = mergedData.sort(function(a, b) { return a - b; }); + + this.charts2 = mergedReferenceData.concat(mergedTargetedData) + this.charts2 = this.charts2.sort(function(a, b) { return a - b; }); + this.xScale = d3 - .scaleBand() - .domain(mergedAndSortedData.map((d) => d)) - .range([this.MARGIN.LEFT, this.MARGIN.LEFT + this.CHART_WIDTH]); - this.yScale = d3 - .scaleLinear() - .domain([0, this.maxYValue * 1.2]) - .range([this.CHART_HEIGHT, 0]); + .scaleLinear() + .domain([d3.min(this.charts2, function(d) { return parseFloat(d.axisX); }), d3.max(this.charts2, function(d) { return parseFloat(d.axisX) + 2; })]) // I was too lazy to do basic math of max(bin_start + width for each distribution) + .range([0, this.CHART_WIDTH ]); + this.svgEl.append("g") + .attr("transform", "translate("+ this.MARGIN.LEFT +"," + this.SVG_HEIGHT + ")") + .call(d3.axisBottom(this.xScale)); + this.yScale = d3.scaleLinear() + .range([this.CHART_HEIGHT , 0]) + this.yScale.domain([d3.min(this.charts2, function(d) { return parseFloat(d.axisY); }), d3.max(this.charts2, function(d) { return parseFloat(d.axisY); })]); } } - function chartData(column, startIndex) { + function chartData(column) { const data = []; - for (let i = 0; i + $(".desktop-content").html(` +

          + Something went wrong. Please try again. +

          + `) + ) + } + return data } function generateDoubleHistogramChart(targetData, referenceData) { let histogramData = [], overlappedHistogramData = []; + let yFormat; - const targetedProfileMin = targetData.numberSummary.histogram.min < 0 ? - targetData.numberSummary.histogram.min.toFixed(1) * 10 * -1 : - targetData.numberSummary.histogram.min.toFixed(1) * 10 - - const referenceProfileMin = referenceData.numberSummary.histogram.min < 0 ? - referenceData.numberSummary.histogram.min.toFixed(1) * 10 * -1 : - referenceData.numberSummary.histogram.min.toFixed(1) * 10 - - const chartsStartPoint = [] - targetedProfileMin > referenceProfileMin ? - chartsStartPoint.push(Math.ceil(targetedProfileMin-referenceProfileMin), 0): - chartsStartPoint.push(0, Math.ceil(referenceProfileMin-targetedProfileMin)) - histogramData = chartData(targetData, chartsStartPoint[0], 'original_profile') - overlappedHistogramData = chartData(referenceData, chartsStartPoint[1], 'ref_profile') + histogramData = chartData(targetData) + overlappedHistogramData = chartData(referenceData) - let yFormat, - xFormat; - const sizes = new GenerateChartParams($(window).height()-55, $(window).width(), histogramData, overlappedHistogramData) + const sizes = new GenerateChartParams($(window).height()-80, $(window).width(), histogramData, overlappedHistogramData) const { MARGIN, SVG_WIDTH, @@ -260,16 +278,17 @@

          Hold on! :)

          CHART_HEIGHT, svgEl, maxYValue, + minYValue, xScale, yScale } = sizes - const xAxis = d3.axisBottom(xScale).ticks(SVG_WIDTH, xFormat).tickSizeOuter(0); + const rectColors = ["#44C0E7", "#F5843C"] const yAxis = d3.axisLeft(yScale).ticks(SVG_HEIGHT / 40, yFormat); yFormat = yScale.tickFormat(100, yFormat); svgEl.append("g") - .attr("transform", `translate(${MARGIN.LEFT}, ${MARGIN.TOP})`) + .attr("transform", `translate(${MARGIN.LEFT}, ${MARGIN.BOTTOM})`) .call(yAxis) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line") @@ -279,50 +298,64 @@

          Hold on! :)

          .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) - .selectAll("text") - .attr("dy", "-.6em") - .attr("dx", "-.8em") - .attr("transform", "rotate(-90)") - .style("text-anchor", "end") - .call(g => g.select(".domain").remove()) - .call(g => g.selectAll(".tick line").remove()) - .call(g => g.append("text") - .attr("fill", "currentColor") - .attr("text-anchor", "end")) - .style("font-size", "10") + .attr("text-anchor", "start")) + + svgEl.append("text") + .attr("transform", + "translate(" + (CHART_WIDTH/2) + " ," + + (CHART_HEIGHT + MARGIN.TOP + 75) + ")") + .style("text-anchor", "middle") + .text("Values") + .style("font-size", "15") + .style("opacity", "0.6") + + svgEl.append("text") + .attr("transform", "rotate(-90)") + .attr("y", 0) + .attr("x", 0 - (SVG_HEIGHT / 2)) + .attr("dy", "1em") + .style("text-anchor", "middle") + .text("Counts") + .style("font-size", "15") + .style("opacity", "0.6") + + const width_b1 = histogramData[1].axisX - histogramData[0].axisX; + const width_b2 = overlappedHistogramData[1].axisX - overlappedHistogramData[0].axisX; const gChart = svgEl.append("g"); gChart + .attr("transform", "translate("+ MARGIN.LEFT +",0)") .selectAll(".bar") .data(histogramData) .enter() .append("rect") + .style("stroke", "#021826") .classed("bar", true) - .attr("width", xScale.bandwidth()) - .attr("height", (d) => ((CHART_HEIGHT - yScale(d.axisY)) < 0 || d.axisY === 0 ? 0 : (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"); + .attr("width", function(d) { return xScale(width_b1) - 1; }) + .attr("height", (d) => CHART_HEIGHT - yScale(d.axisY)) + .attr("x", 1) + .attr("transform", function(d) { return "translate(" + xScale(d.axisX) + "," + 0 + ")"; }) + .attr("y", (d) => yScale(d.axisY) + MARGIN.TOP + MARGIN.BOTTOM) + .attr("fill", rectColors[0]) + .style("opacity","0.8") 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)) < 0 || d.axisY === 0 ? 0 : (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"); + .attr("transform", "translate("+ MARGIN.LEFT +",0)") + .selectAll(".bar") + .data(overlappedHistogramData) + .enter() + .append("rect") + .style("stroke", "#021826") + .classed("bar", true) + .attr("width", function(d) { return xScale(width_b1) - 1; }) + .attr("height", (d) => CHART_HEIGHT - yScale(d.axisY)) + .attr("x", 1) + .attr("transform", function(d) { return "translate(" + xScale(d.axisX) + "," + 0 + ")"; }) + .attr("y", (d) => yScale(d.axisY) + MARGIN.TOP + MARGIN.BOTTOM) + .attr("fill", rectColors[1]) + .style("opacity","0.8") + return svgEl._groups[0][0].outerHTML; } From 5300be6daab5a43ec68db5c55b52a5d870ea9d57 Mon Sep 17 00:00:00 2001 From: Perch2005 <78492631+Perch2005@users.noreply.github.com> Date: Sat, 26 Feb 2022 04:14:01 +0400 Subject: [PATCH 115/119] add error handling --- ...cdn-all-in-jupyter-distribution-chart.html | 29 +++++++++++++++---- 1 file changed, 24 insertions(+), 5 deletions(-) diff --git a/src/whylogs/viewer/templates/index-hbs-cdn-all-in-jupyter-distribution-chart.html b/src/whylogs/viewer/templates/index-hbs-cdn-all-in-jupyter-distribution-chart.html index 233e074967..bab944d520 100644 --- a/src/whylogs/viewer/templates/index-hbs-cdn-all-in-jupyter-distribution-chart.html +++ b/src/whylogs/viewer/templates/index-hbs-cdn-all-in-jupyter-distribution-chart.html @@ -144,6 +144,15 @@ shape-rendering: crispEdges; } + .error-message { + display: flex; + justify-content: center; + align-items: center; + color: rgb(255, 114, 71); + font-size: 30px; + font-weight: 900; + } + @media screen and (min-width: 500px) { .desktop-content { display: block; @@ -362,11 +371,21 @@

          Hold on! :)

          const profileFromCSVfile = {{{reference_profile_from_whylogs}}} Handlebars.registerHelper("getDoubleHistogramChart",(column,key) => { - const columnKey = key.data.key - if (profileFromCSVfile) { - return generateDoubleHistogramChart ( - column, - profileFromCSVfile[columnKey] + const columnKey = key.data.key + try { + if (profileFromCSVfile) { + return generateDoubleHistogramChart ( + column, + profileFromCSVfile[columnKey] + ) + } + } catch (err) { + $(document).ready(() => + $(".desktop-content").html(` +

          + Something went wrong. Please try again. +

          + `) ) } }); From b936bf85307fd113fdf1445e1f13b14bf7bedb6f Mon Sep 17 00:00:00 2001 From: Perch2005 <78492631+Perch2005@users.noreply.github.com> Date: Sat, 26 Feb 2022 04:17:53 +0400 Subject: [PATCH 116/119] change differenced bar chart logic --- ...-cdn-all-in-jupyter-differenced-chart.html | 59 +++++++++++++------ 1 file changed, 42 insertions(+), 17 deletions(-) diff --git a/src/whylogs/viewer/templates/index-hbs-cdn-all-in-jupyter-differenced-chart.html b/src/whylogs/viewer/templates/index-hbs-cdn-all-in-jupyter-differenced-chart.html index abf9959e81..32192537ff 100644 --- a/src/whylogs/viewer/templates/index-hbs-cdn-all-in-jupyter-differenced-chart.html +++ b/src/whylogs/viewer/templates/index-hbs-cdn-all-in-jupyter-differenced-chart.html @@ -204,7 +204,10 @@

          Hold on! :)

          const findAndDeleteUndefined = (axisData) => { const undefinedAxisIndex = axisData.findIndex((axis) => axis === undefined) - return [...axisData.slice(0, undefinedAxisIndex), ...axisData.slice(undefinedAxisIndex + 1)] + if (undefinedAxisIndex > 0) { + return [...axisData.slice(0, undefinedAxisIndex), ...axisData.slice(undefinedAxisIndex + 1)] + } + return axisData } const filterAndSortChartData = (overlappedHistogramData, histogramData) => { @@ -246,7 +249,7 @@

          Hold on! :)

          this.maxYValue = d3.max(data, (d) => Math.abs(d.axisY)); this.xScale = d3 .scaleBand() - .domain(filterAndSortChartData(data, referenceData).map((sortedCounts) => sortedCounts.axisX)) + .domain(filterAndSortChartData(data, referenceData).map((sortedCounts) => sortedCounts && sortedCounts.axisX)) .rangeRound([this.MARGIN.LEFT, this.SVG_WIDTH]) .padding([0.1]); this.yScale = d3 @@ -258,21 +261,42 @@

          Hold on! :)

          function chartData(column) { const data = []; + if (column.stringSummary?.frequent) { Object.entries(column.stringSummary.frequent.items).forEach(([key, {value, estimate}], index) => { data.push({ axisY: estimate, axisX: value, }); }); + } else if (column.stringSummary?.charPosTracker){ + Object.entries(column.stringSummary.charPosTracker.charPosMap).forEach(([key, {count}], index) => { + data.push({ + axisY: count, + axisX: key, + }); + }); + } else { + $(document).ready(() => + $(".desktop-content").html(` +

          + Something went wrong. Please try again. +

          + `) + ) + } + return data } function generatePositiveNegativeChart(histogramData, overlappedHistogramData) { - const data = filterAndSortChartData(chartData(histogramData), chartData(overlappedHistogramData)).map((axis, index) => { - const findIndex = chartData(histogramData).findIndex((value) => value.axisX === axis.axisX) - const difference = axis.axisY - chartData(histogramData)[findIndex].axisY - return [difference] - }).flat() + const data = filterAndSortChartData(chartData(histogramData), chartData(overlappedHistogramData)).map((axis, index) => { + if (axis) { + const findIndex = chartData(histogramData).findIndex((value) => value.axisX === axis.axisX) + const difference = axis.axisY - chartData(histogramData)[findIndex].axisY + return [difference] + } + return 0; + }).flat() let yFormat, xFormat; @@ -288,13 +312,14 @@

          Hold on! :)

          svgEl } = sizes + const rectColors = ["bar positive", "bar negative"] const maxY = Math.abs(d3.max(data)); const minY = Math.abs(d3.min(data)); let positiveY = Math.ceil(maxY) % 1 ? maxY + 2*(maxY/(maxY*10)) : maxY + 2*(maxY/(maxY/10)), negativeY = Math.ceil(minY) % 1 ? minY + 2*(minY/(minY*10)) : minY + 2*(minY/(minY/10)); const yScale = d3.scaleLinear() - .domain([-negativeY, positiveY ]) + .domain([-negativeY, positiveY || 0]) .range([CHART_HEIGHT,0]) const xAxis = d3.axisBottom(xScale).ticks(SVG_WIDTH / 80, xFormat).tickSizeOuter(0); @@ -314,15 +339,15 @@

          Hold on! :)

          .attr("fill", "currentColor") .attr("text-anchor", "start")); - svgEl.append("text") + svgEl.append("text") .attr("transform", - "translate(" + (CHART_WIDTH/2) + " ," + + "translate(" + (CHART_WIDTH/2) + " ," + (CHART_HEIGHT + MARGIN.TOP + 30) + ")") .style("text-anchor", "middle") .text("Values") .style("font-size", "15") .style("opacity", "0.6") - + svgEl.append("text") .attr("transform", "rotate(-90)") .attr("y", 0) @@ -330,7 +355,7 @@

          Hold on! :)

          .attr("dy", "1em") .style("text-anchor", "middle") .text("Counts") - .style("font-size", "15") + .style("font-size", "15") .style("opacity", "0.6") svgEl @@ -348,14 +373,14 @@

          Hold on! :)

          svgEl.selectAll(".bar") .data(data) .enter() - .append("g") - .attr("transform", function(d, i) { return "translate(" + xScale(filterAndSortChartData(chartData(histogramData), chartData(overlappedHistogramData))[i].axisX) + ",0)"; }) .append("rect") - .attr("class", function(d) { return d < 0 ? "bar negative" : "bar positive"; }) + .attr("class", function(d) { return d < 0 ? rectColors[0] : rectColors[1]; }) .attr("y", function(d) { return yScale(Math.max(0, d)); }) - .attr("x", function(d, i) { return xScale(i) }) + .attr("x", function(d, i) { return xScale(filterAndSortChartData(chartData(histogramData), chartData(overlappedHistogramData))[i]?.axisX) }) .attr("height", function(d) { return Math.abs(yScale(d) - yScale(0)); }) - .attr("width", xScale.bandwidth()); + .attr("width", xScale.bandwidth()) + .style("opacity", "0.8") + return svgEl._groups[0][0].outerHTML; } From c9e5f6929cecdcf336dd2677662936aad6cc1b9b Mon Sep 17 00:00:00 2001 From: Perch2005 <78492631+Perch2005@users.noreply.github.com> Date: Sat, 26 Feb 2022 04:22:25 +0400 Subject: [PATCH 117/119] change bar chart generating logic --- ...ndex-hbs-cdn-all-in-jupyter-bar-chart.html | 74 ++++++++++++------- 1 file changed, 47 insertions(+), 27 deletions(-) diff --git a/src/whylogs/viewer/templates/index-hbs-cdn-all-in-jupyter-bar-chart.html b/src/whylogs/viewer/templates/index-hbs-cdn-all-in-jupyter-bar-chart.html index be31ab718f..c212ba499c 100644 --- a/src/whylogs/viewer/templates/index-hbs-cdn-all-in-jupyter-bar-chart.html +++ b/src/whylogs/viewer/templates/index-hbs-cdn-all-in-jupyter-bar-chart.html @@ -145,7 +145,6 @@ fill: #2683C9E5; } - @media screen and (min-width: 500px) { .desktop-content { display: block; @@ -200,6 +199,7 @@

          Hold on! :)