Skip to content

Commit

Permalink
Add definition (ranges) for the severe, moderate, low drift categories.
Browse files Browse the repository at this point in the history
  • Loading branch information
@Perch2005
Perch2005 committed Feb 20, 2022
1 parent dfcdf81 commit 1b7ff9d
Showing 1 changed file with 54 additions and 24 deletions.
78 changes: 54 additions & 24 deletions src/whylogs/viewer/index-hbs-cdn-all-in-for-jupyter-notebook.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -468,7 +478,7 @@
display: inline-block;
position: relative;
width: 85%;
padding-bottom: 15%;
padding-bottom: 17%;
vertical-align: top;
overflow: hidden;
}
Expand Down Expand Up @@ -569,6 +579,10 @@
display: flex;
}

.flex-direction-column {
flex-direction: column;
}

.justify-content-space-between {
justify-content: space-between;
}
Expand Down Expand Up @@ -926,34 +940,41 @@ <h1 class="no-responsive__title">Hold on! :)</h1>
return format(date);
}

const driftCountElement = (driftCount, driftColor, driftName) => `
<div class="drift-detection-info-drifts-item display-flex align-items">
<div class="drift-detection-info-circle ${driftColor}"></div>
<div class="drift-detection-info-drifts-item-text display-flex align-items">
<p class="drift-detection-info-drifts-item-count mb-0">${driftCount}</p>
<p class="drift-detection-info-drifts-item-name mb-0">${driftName}</p>
const driftCountElement = (driftCount, driftColor, driftName, driftRange) => `
<div class="display-flex flex-direction-column">
<div class="drift-detection-info-drifts-item display-flex align-items">
<div class="drift-detection-info-circle ${driftColor}"></div>
<div class="drift-detection-info-drifts-item-text display-flex align-items">
<p class="drift-detection-info-drifts-item-count mb-0">${driftCount}</p>
<p class="drift-detection-info-drifts-item-name mb-0">${driftName}</p>
</div>
</div>
<p class="drift-detection-info-drifts-item-range display-flex justify-content-center mb-0">(${driftRange})</p>
</div>
`

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"
}
Expand Down Expand Up @@ -1050,12 +1071,28 @@ <h1 class="no-responsive__title">Hold on! :)</h1>
return properties.properties.tags.name
});

let driftCount = 0;
let driftCount = 0;
const diffFromRefTableElement = (driftFromRefNumber, circleColor) => `
<div class="text-color display-flex justify-content-center">
${driftFromRefNumber}
<div style="margin-left: 8px" class="drift-detection-info-circle ${circleColor}"></div>
</div>
`

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
Expand All @@ -1065,28 +1102,21 @@ <h1 class="no-responsive__title">Hold on! :)</h1>
$(".all-features").html(Object.keys(referenceProfile.columns).length)
})

return `
<div class="text-color display-flex justify-content-center">
${driftFromRefNumber}
<div style="margin-left: 8px" class="drift-detection-info-circle ${circleColor}"></div>
</div>
`
} 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 `<div class="display-flex justify-content-center">
<p class="text-color"> undefined </p>
<div style="margin-left: 8px" class="drift-detection-info-circle severe-drift-circle-color"></div>
</div>`;
} else {
return '<p style="color: black">-</p>';
return diffFromRefTableElement("undefined", "severe-drift-circle-color")
}

return '<p style="color: black">-</p>';
});

$(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))
})
)

Expand Down

0 comments on commit 1b7ff9d

Please sign in to comment.