diff --git a/site/_extensions/nrichers/slideover/_extension.yml b/site/_extensions/nrichers/slideover/_extension.yml index a13648e26e..e942220563 100644 --- a/site/_extensions/nrichers/slideover/_extension.yml +++ b/site/_extensions/nrichers/slideover/_extension.yml @@ -1,6 +1,6 @@ title: Reveal.js Slideover author: Nik Richers -version: 1.1.0 +version: 1.3.1 quarto-required: ">=1.6.0" contributes: revealjs-plugins: @@ -8,4 +8,5 @@ contributes: script: - slideover.js stylesheet: - - slideover.css \ No newline at end of file + - slideover.css + - custom-slideover.css \ No newline at end of file diff --git a/site/_extensions/nrichers/slideover/custom-slideover.css b/site/_extensions/nrichers/slideover/custom-slideover.css new file mode 100644 index 0000000000..06b9be80eb --- /dev/null +++ b/site/_extensions/nrichers/slideover/custom-slideover.css @@ -0,0 +1,80 @@ +/* Global variables */ +:root { + --slideover-default-bg: #FAFAFA; + --slideover-default-text: #083e44; + --slideover-default-border: 1px solid #083e44; + --slideover-default-links: #DE257E; + --slideover-default-accent: #3E6C69; +} + +/* Global slideover styling */ +.slideover__content { + background: var(--slideover-default-bg) !important; + color: var(--slideover-default-text) !important; + border: var(--slideover-default-border) !important; +} + +/* Right-aligned emphasis border */ +.slideover--r.slideover__content { + border-left-width: 5px !important; +} + +/* Left-aligned emphasis border */ +.slideover--l.slideover__content { + border-right-width: 5px !important; +} + +/* Top-aligned emphasis border */ +.slideover--t.slideover__content { + border-bottom-width: 5px !important; +} + +/* Bottom-aligned emphasis border */ +.slideover--b.slideover__content { + border-top-width: 5px !important; +} + +/* Link styling */ +.slideover__content-area a { + color: var(--slideover-default-links); + text-decoration: none; +} + +.slideover__content-area a:hover { + text-decoration: underline 2px solid var(--slideover-default-text); +} + +/* Callout embed styling */ +.slideover__content-area .embed { + background-color: #f5fcfd; + border: 1px solid rgba(8, 62, 68, 0.2); +} + +/* Emphasis styling */ +.slideover__content-area strong, +.slideover__content-area b, +.slideover__content-area i, +.slideover__content-area em { + color: var(--slideover-default-accent) !important; +} + +/* Quotation styling */ +q { + color: var(--slideover-default-accent) !important; +} + +.slideover__content-area blockquote { + border-left: 4px solid var(--slideover-default-accent) !important; + color: var(--slideover-default-accent) !important; +} + +/* Code styling */ +.slideover__content-area div.sourceCode { + background-color: var(--slideover-default-bg) !important; +} + +.slideover__content-area code { + color: var(--slideover-default-text) !important; + background-color: #EAF8FA; + border: 1px solid rgba(8, 62, 68, 0.2); +} diff --git a/site/_extensions/nrichers/slideover/slideover.css b/site/_extensions/nrichers/slideover/slideover.css index 2539b6ec7e..9a83d087c3 100644 --- a/site/_extensions/nrichers/slideover/slideover.css +++ b/site/_extensions/nrichers/slideover/slideover.css @@ -1,10 +1,7 @@ /* Import Inter font from Google Fonts */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); -.slideover__presentation { - position: relative; -} - +/* Define the default slideover widths */ :root { --slideover-default-lr: 40vw; --slideover-default-tb: 80vw; @@ -51,6 +48,10 @@ width: var(--slideover-3quarters-tb) !important; } +.slideover__presentation { + position: relative; +} + .slideover__container { position: fixed; top: 0; @@ -64,14 +65,10 @@ align-items: left; } +/* Global slideover container styling */ .slideover__content { position: fixed; - background: #FAFAFA; - color: #222222; - border: 1px solid #083E44; - /* border-left-width: 5px; */ - border-radius: 5px; - box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); + box-shadow: -2px 0 4px rgba(8, 62, 68, 0.1), 0 0 4px rgba(8, 62, 68, 0.1); transition: transform 0.3s ease-in-out; pointer-events: auto; z-index: 1001; @@ -82,6 +79,66 @@ margin: 0; } +/* Slideover header global styling */ +.slideover__header { + height: 40px; + display: flex; + align-items: left; + justify-content: left; + cursor: pointer; + flex-shrink: 0; + padding: 0 8px; + margin: 0; + position: relative; + z-index: 3; + pointer-events: auto; +} + +/* Global slideover content area styling */ +.slideover__content-area { + padding: 0 1.5rem 1.5rem; + overflow-y: auto; + line-height: 1.5; + margin: -40px 0 0 0; + position: relative; + z-index: 2; + padding-top: 25px; + opacity: 1; + visibility: visible; + transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; +} + +.slideover__content--active .slideover__content-area { + z-index: 3; +} + +.slideover__content:not(.slideover__content--active) .slideover__content-area { + opacity: 0; + visibility: hidden; +} + +.slideover__content-area p, +.slideover__content-area div { + padding-block-start: 0.5em; +} + +.slideover__content-area > *:first-child { + margin-top: 0; + padding-top: 0; + padding-block-start: 0; +} + +.slideover__content-area p { + margin: 1em 0; +} + +.slideover__content-area ul, +.slideover__content-area ol { + margin: 1em 0; + padding-left: 2em; +} + +/* Right-aligned slideover effects */ .slideover--r.slideover__content { top: 50%; right: 0; @@ -98,7 +155,6 @@ padding: 20px; border-radius: 8px 0 0 8px; overflow: hidden; - border-left-width: 5px; } .slideover--r .slideover__content-area { @@ -107,12 +163,55 @@ margin-top: -20px; margin-bottom: -20px; padding: 40px 1.5rem 1.5rem; + margin-top: -20px; + margin-bottom: -20px; } .slideover--r.slideover__content.slideover__content--active { transform: translateY(-50%) translateX(0); } +.slideover--r .slideover__header { + margin: -20px 0; +} + +/* Left-aligned slideover effects */ +.slideover--l.slideover__content { + top: 50%; + left: 0; + right: auto; + height: auto; + max-height: 80vh; + width: var(--slideover-default-lr); + max-width: 100vw; + box-sizing: border-box; + transform: translateY(-50%) translateX(calc(-100% + 60px)); + transition: transform 0.3s cubic-bezier(.4,0,.2,1); + display: flex; + flex-direction: column; + padding: 20px; + border-radius: 0 8px 8px 0; + overflow: hidden; +} + +.slideover--l .slideover__content-area { + flex: 1; + overflow-y: auto; + margin-top: -20px; + margin-bottom: -20px; + padding: 40px 1.5rem 1.5rem; +} + +.slideover--l.slideover__content.slideover__content--active { + transform: translateY(-50%) translateX(0); +} + + +.slideover--l .slideover__header { + margin: -20px 0; +} + +/* Bottom-aligned slideover effects */ .slideover--b.slideover__content { bottom: 0; left: 50%; @@ -127,12 +226,29 @@ text-align: left; overflow: hidden; padding-bottom: 20px; - border-top-width: 5px; } + +.slideover--b .slideover__content-area { + margin-left: -20px; + margin-right: -20px; + padding-left: 3rem; + padding-right: 3rem; + text-align: left; +} + .slideover--b.slideover__content.slideover__content--active { transform: translateX(-50%) translateY(0); } +.slideover--b .slideover__header { + justify-content: flex-end; + padding-right: 16px; + margin: 0 -20px; + border-radius: 8px 8px 0 0; + background: transparent; +} + +/* Top-aligned slideover effects */ .slideover--t.slideover__content { top: 0; left: 50%; @@ -146,7 +262,15 @@ padding: 20px; text-align: left; overflow: hidden; - border-bottom-width: 5px; +} + +.slideover--t .slideover__content-area { + margin-left: -20px; + margin-right: -20px; + padding-left: 3rem; + padding-right: 3rem; + padding-top: 0px; + text-align: left; } .slideover--t.slideover__content.slideover__content--active { @@ -161,40 +285,15 @@ background: transparent; } -.slideover--t .slideover__content-area { - margin-left: -20px; - margin-right: -20px; - padding-left: 3rem; - padding-right: 3rem; - padding-top: 0px; - text-align: left; -} - -.slideover__header { - height: 40px; - display: flex; - align-items: left; - justify-content: left; - cursor: pointer; - flex-shrink: 0; - padding: 0 8px; - margin: 0; - position: relative; - z-index: 3; - pointer-events: auto; -} - +/* Toggle-arrow styling */ .slideover__toggle { display: flex; - align-items: left; - justify-content: left; + align-items: center; + justify-content: center; width: 24px; height: 24px; transition: transform 0.3s ease; - color: #083e44; - margin: 0; cursor: pointer; - pointer-events: auto; position: absolute; top: 8px; right: 8px; @@ -204,129 +303,100 @@ .slideover__toggle svg { width: 24px; height: 24px; - display: block; fill: currentColor; stroke: currentColor; stroke-width: 1px; - pointer-events: auto; } -.slideover__toggle--active { - transform: rotate(180deg); -} +.slideover--r .slideover__toggle { + left: 8px; + right: auto; +} -.slideover__content-area { - padding: 0 1.5rem 1.5rem; - overflow-y: auto; - color: #083e44; - line-height: 1.5; - margin: -40px 0 0 0; - position: relative; - z-index: 2; - padding-top: 25px; - opacity: 1; - visibility: visible; - transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; +.slideover--l .slideover__toggle { + right: 8px; + left: auto; } -.slideover__content-area strong { - color: #3E6C69; +.slideover--t .slideover__toggle { + top: auto; + bottom: 8px; + right: 8px; + left: auto; } -.slideover__content-area a { - color: #DE257E; - text-decoration: none; +/* Toggle rotation logic: default (open), --active for closed */ +.slideover__content.slideover--r .slideover__toggle { + transform: rotate(180deg); /* Open: left arrow */ } - -.slideover__content-area .embed { - margin-left: 25px; - padding-left: 20px; - padding-top: 0px; - background-color: #f5fcfd; - font-size: 0.9em; - border: 1px solid rgba(8, 62, 68, 0.2); - border-radius: 5px; +.slideover__content.slideover--r .slideover__toggle--active { + transform: rotate(0deg); /* Closed: right arrow */ } -.slideover__content-area a:hover { - text-decoration: underline 2px solid #083E44; +.slideover__content.slideover--l .slideover__toggle { + transform: rotate(0deg); /* Open: right arrow */ } - -.slideover__content--active .slideover__content-area { - z-index: 3; +.slideover__content.slideover--l .slideover__toggle--active { + transform: rotate(180deg); /* Closed: left arrow */ } -.slideover__content:not(.slideover__content--active) .slideover__content-area { - opacity: 0; - visibility: hidden; +.slideover__content.slideover--t .slideover__toggle { + transform: rotate(0deg); /* Open: down arrow */ } - -.slideover__content-area p, -.slideover__content-area div { - padding-block-start: 0.5em; +.slideover__content.slideover--t .slideover__toggle--active { + transform: rotate(180deg); /* Closed: up arrow */ } -.slideover__content-area > *:first-child { - margin-top: 0; - padding-top: 0; - padding-block-start: 0; +.slideover__content.slideover--b .slideover__toggle { + transform: rotate(180deg); /* Open: up arrow */ } - -.slideover--b .slideover__header { - justify-content: flex-end; - padding-right: 16px; - margin: 0 -20px; - border-radius: 8px 8px 0 0; - background: transparent; +.slideover__content.slideover--b .slideover__toggle--active { + transform: rotate(0deg); /* Closed: down arrow */ } -.slideover--b .slideover__content-area { - margin-left: -20px; - margin-right: -20px; - padding-left: 3rem; - padding-right: 3rem; - text-align: left; -} +/* Mobile widths */ @media screen and (max-width: 800px) { - .slideover--r.slideover__content { + .slideover--r.slideover__content, + .slideover--l.slideover__content { max-height: 90vh; width: 90vw; } - .slideover--b.slideover__content { - width: 90%; - max-height: 60vh; - } + .slideover--b.slideover__content, .slideover--t.slideover__content { width: 90%; max-height: 60vh; } } -.quote { +/* Other elements */ + +/* Callout embed */ +.slideover__content-area .embed { + margin-left: 25px; + padding-left: 20px; + padding-top: 0px; + font-size: 0.9em; + border-radius: 5px; + padding-right: 1rem !important; +} + +/* Quotations */ +q { font-style: italic; - color: #555; - border-left: 3px solid #083e44; padding-left: 1em; margin: 0.5em 0; display: inline-block; } -.slideover--r .slideover__toggle { - left: 8px; - right: auto; -} - -.slideover--r .slideover__header { - margin: -20px 0; +.slideover__content-area blockquote { + margin: 1em 0; + padding-left: 1em; } -.slideover--r .slideover__content-area { - margin-top: -20px; - margin-bottom: -20px; -} - -.slideover__content-area strong { +/* Emphasis */ +.slideover__content-area strong, +.slideover__content-area b { font-weight: 700; } @@ -334,118 +404,23 @@ font-style: italic; } -.slideover__content-area p { - margin: 1em 0; -} - -.slideover__content-area ul, -.slideover__content-area ol { - margin: 1em 0; - padding-left: 2em; -} - -.slideover__content-area blockquote { - border-left: 2px solid #3E6C69; - margin: 1em 0; - padding-left: 1em; - color: #555; -} - +/* Code blocks */ .slideover__content-area div.sourceCode { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.9em; - background-color: #FAFAFA; padding: 0.4em 0.6em; } .slideover__content-area code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - color: #3E6C69; - background-color: #EAF8FA; font-size: 0.9em; padding: 0.1em 0.2em; - border: 1px solid rgba(8, 62, 68, 0.2); border-radius: 5px; } .slideover__content-area pre.numberSource { margin-left: 1em; border-left: none; - background-color: #f5fcfd; padding-left: 4px; } -.slideover--l.slideover__content { - top: 50%; - left: 0; - right: auto; - height: auto; - max-height: 80vh; - width: var(--slideover-default-lr); - max-width: 100vw; - box-sizing: border-box; - transform: translateY(-50%) translateX(calc(-100% + 60px)); - transition: transform 0.3s cubic-bezier(.4,0,.2,1); - display: flex; - flex-direction: column; - padding: 20px; - border-radius: 0 8px 8px 0; - overflow: hidden; - border-right-width: 5px; -} - -.slideover--l .slideover__content-area { - flex: 1; - overflow-y: auto; - margin-top: -20px; - margin-bottom: -20px; - padding: 40px 1.5rem 1.5rem; -} - -.slideover--l.slideover__content.slideover__content--active { - transform: translateY(-50%) translateX(0); -} - -.slideover--l .slideover__toggle { - right: 8px; - left: auto; -} - -.slideover--l .slideover__toggle { - transform: rotate(180deg); -} - -.slideover--l .slideover__toggle--active { - transform: rotate(0deg); -} - -.slideover--t .slideover__toggle { - transform: rotate(180deg); -} - -.slideover--t .slideover__toggle--active { - transform: rotate(0deg); -} - -.slideover--l .slideover__header { - margin: -20px 0; -} - -.slideover--l .slideover__content-area { - margin-top: -20px; - margin-bottom: -20px; -} - -@media screen and (max-width: 800px) { - .slideover--l.slideover__content { - max-height: 90vh; - width: 90vw; - } -} - -.slideover--t .slideover__toggle { - top: auto; - bottom: 8px; - right: 8px; - left: auto; -} \ No newline at end of file diff --git a/site/_extensions/nrichers/slideover/slideover.js b/site/_extensions/nrichers/slideover/slideover.js index a117026d62..6126c42515 100644 --- a/site/_extensions/nrichers/slideover/slideover.js +++ b/site/_extensions/nrichers/slideover/slideover.js @@ -1,45 +1,33 @@ -// Create global namespace for the plugin window.slideover = {}; var Plugin = { id: 'slideover', init: function(reveal) { - console.log('Slideover plugin loading...'); - - var holders = { - presentation: undefined, - slideover: undefined - }; + var holders = { presentation: undefined, slideover: undefined }; function loadStylesheet() { var path = undefined; - [].slice.call(document.getElementsByTagName('script')).forEach(function(script){ - if(script.src.indexOf('slideover.js') > - 1) { - path = script.src.split('/').slice(0, -1).join('/')+'/'; + [].slice.call(document.getElementsByTagName('script')).forEach(function(script) { + if (script.src.indexOf('slideover.js') > -1) { + path = script.src.split('/').slice(0, -1).join('/') + '/'; } }); - - var link = window.document.createElement('link'); + var link = document.createElement('link'); link.rel = 'stylesheet'; link.href = path + 'slideover.css'; - window.document.getElementsByTagName('head')[0].appendChild(link); - console.log('Stylesheet loaded:', link.href); + document.head.appendChild(link); } function setup() { loadStylesheet(); holders.presentation = document.querySelector('.reveal'); - if (!holders.presentation) { - console.error('Could not find .reveal element'); - return false; - } + if (!holders.presentation) return false; holders.presentation.classList.add('slideover__presentation'); var slideover = document.createElement('div'); slideover.classList.add('slideover__container'); holders.presentation.parentNode.insertBefore(slideover, holders.presentation.nextElementSibling); holders.slideover = slideover; - console.log('Setup complete, slideover container created'); return true; } @@ -50,43 +38,19 @@ var Plugin = { } function handleOverlays() { - if (!holders.slideover) { - console.error('Slideover container not initialized'); - return; - } - - // Clear existing overlays + if (!holders.slideover) return; holders.slideover.innerHTML = ''; - - // Only process overlays in the current slide const currentSlide = reveal.getCurrentSlide(); if (!currentSlide) return; - const overlays = currentSlide.querySelectorAll('.slideover--r, .slideover--b, .slideover--l, .slideover--t'); - console.log('Found overlays in current slide:', overlays.length); - - overlays.forEach((overlay, index) => { - console.log(`Processing overlay ${index}:`, overlay); - - // Store original content before we modify anything + + overlays.forEach((overlay) => { const originalContent = overlay.innerHTML; - console.log('[Slideover] originalContent:', originalContent); - - // Create slideover content const content = document.createElement('div'); content.classList.add('slideover__content'); - if (overlay.classList.contains('slideover--b')) { - content.classList.add('slideover--b'); - } - if (overlay.classList.contains('slideover--r')) { - content.classList.add('slideover--r'); - } - if (overlay.classList.contains('slideover--l')) { - content.classList.add('slideover--l'); - } - if (overlay.classList.contains('slideover--t')) { - content.classList.add('slideover--t'); - } + ['slideover--b', 'slideover--r', 'slideover--l', 'slideover--t'].forEach(dir => { + if (overlay.classList.contains(dir)) content.classList.add(dir); + }); // Add any additional modifier classes overlay.classList.forEach(cls => { @@ -94,142 +58,72 @@ var Plugin = { content.classList.add(cls); } }); - - // Create header + const header = document.createElement('div'); header.classList.add('slideover__header'); - - // Create toggle const toggle = document.createElement('div'); toggle.classList.add('slideover__toggle'); - if (overlay.classList.contains('slideover--r') || overlay.classList.contains('slideover--l')) { - // Left/right double chevron - toggle.innerHTML = ''; - } else { - // Up/down double chevron - toggle.innerHTML = ''; - } - - // Add toggle + toggle.innerHTML = (overlay.classList.contains('slideover--r') || overlay.classList.contains('slideover--l')) + ? '' + : ''; content.appendChild(toggle); content.appendChild(header); - - // Create content area const contentArea = document.createElement('div'); contentArea.classList.add('slideover__content-area'); - - // Process the content to handle Markdown headings - const processedContent = processMarkdownContent(originalContent); - contentArea.innerHTML = processedContent; - + contentArea.innerHTML = processMarkdownContent(originalContent); content.appendChild(contentArea); - - // Add to slideover container holders.slideover.appendChild(content); - - // Start with content expanded + + // Start open, with toggle matching open state content.classList.add('slideover__content--active'); - - // Add click handler to toggle + toggle.classList.add('slideover__toggle--active'); + content.dataset.slideoverState = 'open'; + + // Toggle click toggle.addEventListener('click', (e) => { - e.stopPropagation(); // Prevent event from bubbling - content.classList.toggle('slideover__content--active'); - toggle.classList.toggle('slideover__toggle--active'); - // Reset auto-collapse timer when user interacts (only if defined) - if (typeof resetAutoCollapseTimer === 'function') { - resetAutoCollapseTimer(content); - } + e.stopPropagation(); + const isActive = content.classList.toggle('slideover__content--active'); + toggle.classList.toggle('slideover__toggle--active', isActive); + content.dataset.slideoverState = isActive ? 'open' : 'closed'; }); - - // Add auto-collapse functionality if the overlay has the auto-collapse class - if (overlay.classList.contains('auto-collapse') || Array.from(overlay.classList).some(cls => cls.startsWith('auto-collapse-'))) { + + // Auto-collapse + if (overlay.classList.contains('auto-collapse') || [...overlay.classList].some(cls => cls.startsWith('auto-collapse-'))) { let autoCollapseTimer; let userExpanded = false; - - // Get delay from auto-collapse-{s} class or use default 5s - const delayClass = Array.from(overlay.classList).find(cls => cls.startsWith('auto-collapse-')); - const delay = delayClass ? parseInt(delayClass.replace('auto-collapse-', '')) * 1000 : 5000; - - // Function to reset the timer + const delay = [...overlay.classList].find(cls => cls.startsWith('auto-collapse-')) ? + parseInt([...overlay.classList].find(cls => cls.startsWith('auto-collapse-')).replace('auto-collapse-', '')) * 1000 : 5000; function resetAutoCollapseTimer(element) { clearTimeout(autoCollapseTimer); autoCollapseTimer = setTimeout(() => { if (element.classList.contains('slideover__content--active') && !userExpanded) { element.classList.remove('slideover__content--active'); - element.querySelector('.slideover__toggle').classList.remove('slideover__toggle--active'); + const toggle = element.querySelector('.slideover__toggle'); + if (toggle) { + toggle.classList.remove('slideover__toggle--active'); + element.dataset.slideoverState = 'closed'; + } } }, delay); } - - // Start the timer resetAutoCollapseTimer(content); - - // Add event listeners to reset the timer on user interaction content.addEventListener('mouseenter', () => resetAutoCollapseTimer(content)); content.addEventListener('click', () => resetAutoCollapseTimer(content)); content.addEventListener('keydown', () => resetAutoCollapseTimer(content)); - - // Track when you manually expand the slideover - toggle.addEventListener('click', (e) => { - if (content.classList.contains('slideover__content--active')) { - userExpanded = true; - } - }); + toggle.addEventListener('click', () => { if (content.classList.contains('slideover__content--active')) userExpanded = true; }); } - - // Instead of removing the original overlay, hide it + overlay.style.display = 'none'; }); } - reveal.addEventListener('ready', function(event) { - console.log('Reveal ready event fired'); - if (setup()) { - handleOverlays(); - } - }); - - // Also listen for slidechanged event to update overlays - reveal.addEventListener('slidechanged', function(event) { - console.log('Slide changed event fired'); - if (holders.slideover) { - handleOverlays(); - } - }); - - // Handle backward navigation - reveal.addEventListener('slidechanged-backward', function(event) { - console.log('Slide changed backward event fired'); - if (holders.slideover) { - handleOverlays(); - } - }); - - // Handle fragment shown/hidden events - reveal.addEventListener('fragmentshown', function(event) { - console.log('Fragment shown event fired'); - if (holders.slideover) { - handleOverlays(); - } - }); - - reveal.addEventListener('fragmenthidden', function(event) { - console.log('Fragment hidden event fired'); - if (holders.slideover) { - handleOverlays(); - } - }); - - // Expose plugin methods to global scope - window.slideover = { - setup: setup, - handleOverlays: handleOverlays - }; + reveal.addEventListener('ready', () => setup() && handleOverlays()); + reveal.addEventListener('slidechanged', handleOverlays); + reveal.addEventListener('fragmentshown', handleOverlays); + reveal.addEventListener('fragmenthidden', handleOverlays); + window.slideover = { setup, handleOverlays }; } }; -if (typeof window.Reveal === 'undefined') { - throw new Error('The Reveal.js slideover plugin requires Reveal.js'); -} - -Reveal.registerPlugin('slideover', Plugin); \ No newline at end of file +if (typeof window.Reveal === 'undefined') throw new Error('Reveal.js slideover plugin requires Reveal.js'); +Reveal.registerPlugin('slideover', Plugin); \ No newline at end of file diff --git a/site/guide/model-validation/_add-model-findings.qmd b/site/guide/model-validation/_add-model-findings.qmd index 9a3c8078f2..027496f15d 100644 --- a/site/guide/model-validation/_add-model-findings.qmd +++ b/site/guide/model-validation/_add-model-findings.qmd @@ -10,6 +10,8 @@ :::: :::: {.content-hidden unless-format="revealjs"} +1. In the left sidebar, click **{{< fa cubes >}} Inventory**. + 1. Select a model or [find your model by applying a filter or searching for it](/guide/model-inventory/working-with-model-inventory.qmd#search-filter-and-sort-models){target="_blank"}. 1. In the left sidebar that appears for your model, click **{{< fa book-open >}} Documentation**. diff --git a/site/guide/model-validation/_track_issue_resolution.qmd b/site/guide/model-validation/_track_issue_resolution.qmd index a83858da5d..42f3a13c0d 100644 --- a/site/guide/model-validation/_track_issue_resolution.qmd +++ b/site/guide/model-validation/_track_issue_resolution.qmd @@ -41,6 +41,8 @@ Low-severity findings (Level 3) :::: :::: {.content-hidden unless-format="revealjs"} +1. In the left sidebar, click **{{< fa cubes >}} Inventory**. + 1. Select a model or [find your model by applying a filter or searching for it](/guide/model-inventory/working-with-model-inventory.qmd#search-filter-and-sort-models){target="_blank"}. 1. In the left sidebar that appears for your model, click **{{< fa triangle-exclamation >}} Model Findings**. diff --git a/site/guide/model-workflows/_model-workflows-see.qmd b/site/guide/model-workflows/_model-workflows-see.qmd index 8fc77b1d9a..f004ba04cd 100644 --- a/site/guide/model-workflows/_model-workflows-see.qmd +++ b/site/guide/model-workflows/_model-workflows-see.qmd @@ -25,6 +25,8 @@ While your lifecycle statuses and workflows are custom to your organization, som :::: :::: {.content-hidden unless-format="revealjs"} +1. In the left sidebar, click **{{< fa cubes >}} Inventory**. + 1. Select a model or [find your model by applying a filter or searching for it](/guide/model-inventory/working-with-model-inventory.qmd#search-filter-and-sort-models){target="_blank"}. 1. On the landing page of your model, locate the [model status]{.smallcaps} section: diff --git a/site/guide/model-workflows/_model-workflows-transition.qmd b/site/guide/model-workflows/_model-workflows-transition.qmd index dbefa12c90..4a8351f270 100644 --- a/site/guide/model-workflows/_model-workflows-transition.qmd +++ b/site/guide/model-workflows/_model-workflows-transition.qmd @@ -11,6 +11,8 @@ :::: :::: {.content-hidden unless-format="revealjs"} +1. In the left sidebar, click **{{< fa cubes >}} Inventory**. + 1. Select a model or [find your model by applying a filter or searching for it](/guide/model-inventory/working-with-model-inventory.qmd#search-filter-and-sort-models){target="_blank"}. 1. If an action is available to your role, you'll see it listed under your model status on the model's landing page. diff --git a/site/training/assets/validmind-slideover.css b/site/training/assets/validmind-slideover.css new file mode 100644 index 0000000000..06b9be80eb --- /dev/null +++ b/site/training/assets/validmind-slideover.css @@ -0,0 +1,80 @@ +/* Global variables */ +:root { + --slideover-default-bg: #FAFAFA; + --slideover-default-text: #083e44; + --slideover-default-border: 1px solid #083e44; + --slideover-default-links: #DE257E; + --slideover-default-accent: #3E6C69; +} + +/* Global slideover styling */ +.slideover__content { + background: var(--slideover-default-bg) !important; + color: var(--slideover-default-text) !important; + border: var(--slideover-default-border) !important; +} + +/* Right-aligned emphasis border */ +.slideover--r.slideover__content { + border-left-width: 5px !important; +} + +/* Left-aligned emphasis border */ +.slideover--l.slideover__content { + border-right-width: 5px !important; +} + +/* Top-aligned emphasis border */ +.slideover--t.slideover__content { + border-bottom-width: 5px !important; +} + +/* Bottom-aligned emphasis border */ +.slideover--b.slideover__content { + border-top-width: 5px !important; +} + +/* Link styling */ +.slideover__content-area a { + color: var(--slideover-default-links); + text-decoration: none; +} + +.slideover__content-area a:hover { + text-decoration: underline 2px solid var(--slideover-default-text); +} + +/* Callout embed styling */ +.slideover__content-area .embed { + background-color: #f5fcfd; + border: 1px solid rgba(8, 62, 68, 0.2); +} + +/* Emphasis styling */ +.slideover__content-area strong, +.slideover__content-area b, +.slideover__content-area i, +.slideover__content-area em { + color: var(--slideover-default-accent) !important; +} + +/* Quotation styling */ +q { + color: var(--slideover-default-accent) !important; +} + +.slideover__content-area blockquote { + border-left: 4px solid var(--slideover-default-accent) !important; + color: var(--slideover-default-accent) !important; +} + +/* Code styling */ +.slideover__content-area div.sourceCode { + background-color: var(--slideover-default-bg) !important; +} + +.slideover__content-area code { + color: var(--slideover-default-text) !important; + background-color: #EAF8FA; + border: 1px solid rgba(8, 62, 68, 0.2); +} diff --git a/site/training/developer-fundamentals/finalizing-model-documentation.qmd b/site/training/developer-fundamentals/finalizing-model-documentation.qmd index 58149929bd..0781067f91 100644 --- a/site/training/developer-fundamentals/finalizing-model-documentation.qmd +++ b/site/training/developer-fundamentals/finalizing-model-documentation.qmd @@ -16,6 +16,8 @@ format: view-distance: 2 logo: /validmind.png footer: "{{< var validmind.training >}} | [Home {{< fa person-walking-dashed-line-arrow-right >}}](/training/training.qmd)" + revealjs-plugins: + - slideover html: # Change this to the file name prepended by a _ to get around the global HTML output settings required by _metadata.yml output-file: _finalizing-model-documentation.html @@ -150,23 +152,22 @@ From the {{< var validmind.platform >}}: {{< include /guide/model-documentation/_view-test-result-metadata.qmd >}} - - ::: + :::: ## {background-iframe="https://app.prod.validmind.ai/model-inventory" background-interactive="true" data-preload="yes"} -:::: {.absolute bottom=0 left=50 right=50 .w-95 .f5 .tc .pl4 .overlay} +:::: {.slideover--b .auto-collapse-10} +::: {.tc} **Review model documentation** +::: -::: {.f6} -1. From the **{{< fa cubes >}} Inventory**, select the name of your model you registered for this course to open up the model details page. +1. Select the name of your model you registered for this course to open up the model details page. 2. On the left sidebar that appears for your model, click **{{< fa book-open >}} Documentation**. -3. Click into any section of the documentation to review the test results logged via the {{< var validmind.developer >}}.
- For example: **2.3 Correlations and Interactions** / **3.2 Model Evaluation** - -::: +3. Click into any section of the documentation to review the test results logged via the {{< var validmind.developer >}}.
For example: + - **2.3 Correlations and Interactions** + - **3.2 Model Evaluation** When you're done taking a look around, click [{{< fa chevron-right >}}]() to continue. @@ -218,18 +219,20 @@ For example: ::: ::: + :::: ## {background-iframe="https://app.prod.validmind.ai/model-inventory" background-interactive="true" data-preload="yes"} -:::: {.absolute bottom=0 left=50 right=50 .w-95 .f5 .tc .pl4 .overlay} +:::: {.slideover--b .auto-collapse-10} +::: {.tc} **Add & edit content blocks** - -::: {.f6} -From your model's **{{< fa book-open >}} Documentation**, click into any section of the documentation to add and edit a content block. - ::: +1. Select the name of your model you registered for this course to open up the model details page. +2. On the left sidebar that appears for your model, click **{{< fa book-open >}} Documentation**. +3. Click into any section of the documentation to add and edit a content block. + When you're done, click [{{< fa chevron-right >}}]() to continue. :::: @@ -278,16 +281,15 @@ To transition through the approval workflow, all required workflow steps must be ## {background-iframe="https://app.prod.validmind.ai/model-inventory" background-interactive="true" data-preload="yes"} -:::: {.absolute bottom=0 left=50 right=50 .w-95 .f5 .tc .pl4 .overlay} +:::: {.slideover--b .auto-collapse-10} +::: {.tc} **Submit for approval** +::: -::: {.f6} -1. From the **{{< fa cubes >}} Inventory**, select the name of your model you registered for this course to open up the model details page. +1. Select the name of your model you registered for this course to open up the model details page. 2. Locate the **[model status]{.smallcaps}** section. 3. Open up the status transition panel, enter your **[notes]{.smallcaps}** and any other additional inventory fields, then click **Submit**. -::: - When you're done, click [{{< fa chevron-right >}}]() to continue. :::: @@ -325,14 +327,15 @@ Comment threads ## {background-iframe="https://app.prod.validmind.ai/model-inventory" background-interactive="true" data-preload="yes"} -:::: {.absolute bottom=0 left=50 right=50 .w-95 .f5 .tc .pl4 .overlay} +:::: {.slideover--b .auto-collapse-10} +::: {.tc} **Comment on model documentation** - -::: {.f6} -**In the content block you added earlier** within your model's **{{< fa book-open >}} Documentation**: Post a comment, reply to it, and then resolve the thread. - ::: +1. Select the name of your model you registered for this course to open up the model details page. +2. On the left sidebar that appears for your model, click **{{< fa book-open >}} Documentation**. +3. **In the content block you added earlier**: Post a comment, reply to it, and then resolve the thread. + When you're done, click [{{< fa chevron-right >}}]() to continue. :::: @@ -366,15 +369,14 @@ Track changes & updates ## {background-iframe="https://app.prod.validmind.ai/model-inventory" background-interactive="true" data-preload="yes"} -:::: {.absolute bottom=0 left=50 right=50 .w-95 .f5 .tc .pl4 .overlay} +:::: {.slideover--b .auto-collapse-10} +::: {.tc} **Review model activity** +::: -::: {.f6} -1. From the **{{< fa cubes >}} Inventory**, select the name of your model you registered for this course to open up the model details page. +1. Select the name of your model you registered for this course to open up the model details page. 2. In the left sidebar that appears for your model, click **{{< fa wifi >}} Model Activity**. -3. Filter the following activity: **Comments** | **Status Updates** | **Model Updates** | **Test Results** - -::: +3. Filter the following activity:
**Comments** | **Status Updates** | **Model Updates** | **Test Results** When you're done, click [{{< fa chevron-right >}}]() to continue. @@ -384,21 +386,20 @@ When you're done, click [{{< fa chevron-right >}}]() to continue. ## {background-iframe="https://app.prod.validmind.ai/analytics" background-interactive="true" data-preload="yes"} -:::: {.absolute bottom=0 left=50 right=50 .w-95 .f5 .tc .pl4 .overlay} +:::: {.slideover--l .three-quarters .auto-collapse-10} **Welcome to {{< fa square-poll-vertical >}} Analytics** -::: {.f6} -Here, you can find executive summaries, track information on models, findings, and more. For example: +Here, you can find executive summaries, track information on models, findings, and more. + +For example: 1. Click **Models** to review reports on models. 3. Click into any widget to review the models reported by that widget. -::: When you're done, click [{{< fa chevron-right >}}]() to continue. :::: - # In summary {background-color="#083E44" background-image="/training/assets/home-hero.svg"} ## {.scrollable .center} diff --git a/site/training/developer-fundamentals/implementing-custom-tests.qmd b/site/training/developer-fundamentals/implementing-custom-tests.qmd index e575d8d37d..444dcb6a90 100644 --- a/site/training/developer-fundamentals/implementing-custom-tests.qmd +++ b/site/training/developer-fundamentals/implementing-custom-tests.qmd @@ -16,6 +16,8 @@ format: view-distance: 2 logo: /validmind.png footer: "{{< var validmind.training >}} | [Home {{< fa person-walking-dashed-line-arrow-right >}}](/training/training.qmd)" + revealjs-plugins: + - slideover html: # Change this to the file name prepended by a _ to get around the global HTML output settings required by _metadata.yml output-file: _implementing-custom-tests.html @@ -183,14 +185,11 @@ Let's continue our journey with **Section 1** on the next page. {{< fa hand-poin ## {background-iframe="/notebooks/EXECUTED/model_development/3-integrate_custom_tests.html" background-interactive="yes" data-preload="yes"} -:::: {.absolute bottom=15 left=0 right=50 .w-100 .f5 .tc .pl4 .pr4 .overlay} +:::: {.slideover--r .three-quarters} **3 — Integrate custom tests** -::: {.f6} This is the third notebook in our introductory series, which will walk you through how to implement different types of custom tests with {{< var vm.product >}}. -::: - **Scroll through this notebook** to explore. When you are done, click [{{< fa chevron-right >}}]() to continue. :::: @@ -222,7 +221,7 @@ This is the third notebook in our introductory series, which will walk you throu ::: {.f5} {{< var vm.product >}} generates a unique *code snippet* for each registered model to connect with your developer environment: -1. From the **{{< fa cubes >}} Inventory**, select the name of your model to open up the model details page. +1. Select the name of your model you registered for this course to open up the model details page. 2. On the left sidebar that appears for your model, click **Getting Started**. 3. Locate the code snippet and click **Copy snippet to clipboard**. @@ -243,17 +242,14 @@ Make sure you're logged in and have refreshed the page in a Chromium-based web b ## {background-iframe="/notebooks/EXECUTED/model_development/3-integrate_custom_tests.html#initialize-the-validmind-library" data-preload="yes"} -:::: {.absolute bottom=15 .w-100 .f5 .tc .pl4 .overlay} +:::: {.slideover--r .three-quarters} **Connect to your model** -::: {.f6} With your code snippet copied to your clipboard: 1. Open **3 — Integrate custom tests**: [{{< fa square-arrow-up-right >}} JupyterHub]({{< var url.jupyterhub >}}/hub/user-redirect/lab/tree/tutorials/model_development/3-integrate_custom_tests.ipynb){target="_blank"} 2. Run all the cells under the **Setting up** section. -::: - When you're done, return to this page and click [{{< fa chevron-right >}}]() to continue. :::: @@ -281,33 +277,29 @@ Let's implement a custom *inline test* that calculates the confusion matrix for ## {background-iframe="/notebooks/EXECUTED/model_development/3-integrate_custom_tests.html#create-a-confusion-matrix-plot" data-preload="yes"} -:::: {.absolute bottom=15 .w-100 .f5 .tc .pl4 .overlay} +:::: {.slideover--r .three-quarters} **Create a custom test** -::: {.f6} The [`@vm.test` wrapper](/validmind/validmind.qmd#test){target="_blank"} allows you to create a reusable test: 1. Continue with **3 — Integrate custom tests**: [{{< fa square-arrow-up-right >}} JupyterHub]({{< var url.jupyterhub >}}/hub/user-redirect/lab/tree/tutorials/model_development/3-integrate_custom_tests.ipynb){target="_blank"} 2. Run all the cells in the following section under Implementing a custom inline test: **Create a confusion matrix plot** -::: - When you're done, return to this page and click [{{< fa chevron-right >}}]() to continue. :::: ## {background-iframe="/notebooks/EXECUTED/model_development/3-integrate_custom_tests.html#add-parameters-to-custom-tests" data-preload="yes"} -:::: {.absolute bottom=15 .w-100 .f5 .tc .pl4 .overlay} +:::: {.slideover--r .three-quarters} **Adjust your custom test** -::: {.f6} Custom tests can take parameters just like any other function: 1. Continue with **3 — Integrate custom tests**: [{{< fa square-arrow-up-right >}} JupyterHub]({{< var url.jupyterhub >}}/hub/user-redirect/lab/tree/tutorials/model_development/3-integrate_custom_tests.ipynb){target="_blank"} -2. Run all the cells in the following sections under Implementing a custom inline test: **Add parameters to custom tests** / **Pass parameters to custom tests** - -::: +2. Run all the cells in the following sections under Implementing a custom inline test: + - **Add parameters to custom tests** + - **Pass parameters to custom tests** When you're done, return to this page and click [{{< fa chevron-right >}}]() to continue. @@ -315,22 +307,18 @@ When you're done, return to this page and click [{{< fa chevron-right >}}]() to ## {background-iframe="/notebooks/EXECUTED/model_development/3-integrate_custom_tests.html#log-the-confusion-matrix-results" data-preload="yes"} -:::: {.absolute bottom=15 .w-100 .f5 .tc .pl4 .overlay} +:::: {.slideover--r .three-quarters} **Log your custom test** -::: {.f6} Use the [`.log()` method](/validmind/validmind/vm_models.qmd#log){target="_blank"} to send the results of your custom test to the {{< var validmind.platform >}}: 1. Continue with **3 — Integrate custom tests**: [{{< fa square-arrow-up-right >}} JupyterHub]({{< var url.jupyterhub >}}/hub/user-redirect/lab/tree/tutorials/model_development/3-integrate_custom_tests.ipynb){target="_blank"} 2. Run the cell in the following section under Implementing a custom inline test: **Log the confusion matrix results** -::: - When you're done, return to this page and click [{{< fa chevron-right >}}]() to continue. :::: - # Use external test providers {background-color="#083E44" background-image="/training/assets/home-hero.svg"} ## {.scrollable .center} @@ -356,51 +344,42 @@ Creating inline custom tests with a function is a great way to customize your mo ## {background-iframe="/notebooks/EXECUTED/model_development/3-integrate_custom_tests.html#create-custom-tests-folder" data-preload="yes"} -:::: {.absolute bottom=15 .w-100 .f5 .tc .pl4 .overlay} +:::: {.slideover--r .three-quarters} **Create custom tests folder** -::: {.f6} Create a new folder that will contain reusable custom tests from your existing inline tests: 1. Continue with **3 — Integrate custom tests**: [{{< fa square-arrow-up-right >}} JupyterHub]({{< var url.jupyterhub >}}/hub/user-redirect/lab/tree/tutorials/model_development/3-integrate_custom_tests.ipynb){target="_blank"} 2. Run the cell under the following Using external test providers section: **Create custom tests folder** -::: - When you're done, return to this page and click [{{< fa chevron-right >}}]() to continue. :::: ## {background-iframe="/notebooks/EXECUTED/model_development/3-integrate_custom_tests.html#save-an-inline-test" data-preload="yes"} -:::: {.absolute bottom=15 .w-100 .f5 .tc .pl4 .overlay} +:::: {.slideover--r .three-quarters} **Save inline test** -::: {.f6} The `@vm.test` decorator also includes a convenience method that allows you to save the test to a Python file at a specified path: 1. Continue with **3 — Integrate custom tests**: [{{< fa square-arrow-up-right >}} JupyterHub]({{< var url.jupyterhub >}}/hub/user-redirect/lab/tree/tutorials/model_development/3-integrate_custom_tests.ipynb){target="_blank"} 2. Run all the cells under the Using external test providers section: **Save an inline test** -::: - When you're done, return to this page and click [{{< fa chevron-right >}}]() to continue. :::: ## {background-iframe="/notebooks/EXECUTED/model_development/3-integrate_custom_tests.html#register-a-local-test-provider" data-preload="yes"} -:::: {.absolute bottom=15 .w-100 .f5 .tc .pl4 .overlay} +:::: {.slideover--r .three-quarters} **Register local test provider** -::: {.f6} Next, let's initialize a test provider that will tell the {{< var validmind.developer >}} where to find your saved custom tests: 1. Continue with **3 — Integrate custom tests**: [{{< fa square-arrow-up-right >}} JupyterHub]({{< var url.jupyterhub >}}/hub/user-redirect/lab/tree/tutorials/model_development/3-integrate_custom_tests.ipynb){target="_blank"} 2. Run all the cells under the Using external test providers section: **Register a local test provider** -::: - When you're done, return to this page and click [{{< fa chevron-right >}}]() to continue. :::: @@ -440,7 +419,7 @@ With the custom test results logged, let's head to the model we connected to at 5. Click **{{< fa plus >}}** and then select **Test-Driven Block** under [from library]{.smallcaps}: - Click on **Custom** under [test-driven]{.smallcaps} in the left sidebar. - - Select the two custom `ConfusionMatrix` tests you logged above: + - Select the two custom `ConfusionMatrix` tests you logged previously: ![The ConfusionMatrix tests selected](/notebooks/tutorials/model_development/selecting-confusion-matrix-test.png){fig-alt="Screenshot showing the ConfusionMatrix tests selected" .screenshot} @@ -449,35 +428,37 @@ With the custom test results logged, let's head to the model we connected to at Confirm that the two individual results for the confusion matrix tests have been correctly inserted into section **3.2 Model Evaluation** of the documentation. ::: -:::: +:::: ## {background-iframe="https://app.prod.validmind.ai/model-inventory/" background-interactive="true" data-preload="yes"} -:::: {.absolute bottom=15 .w-100 .f5 .tc .pl4 .overlay} +:::: {.slideover--b .auto-collapse-10} +::: {.tc} **Insert custom test-driven blocks** - -::: {.f6} -3.2 Model Evaluation — `my_custom_tests.ConfusionMatrix:test_dataset_normalized` / `my_test_provider.ConfusionMatrix` - ::: +1. Select the name of your model you registered for this course to open up the model details page. +2. In the left sidebar that appears for your model, click **{{< fa book-open >}} Documentation**. +3. Locate the Data Preparation section and click on **3.2 Model Evaluation** to expand that section. +4. Hover under the Pearson Correlation Matrix content block until a horizontal dashed line with a **{{< fa plus >}}** button appears, indicating that you can insert a new block. +5. Click **{{< fa plus >}}** and then select **Test-Driven Block** under [from library]{.smallcaps}: + - Click on **Custom** under [test-driven]{.smallcaps} in the left sidebar. + - Select the two custom `ConfusionMatrix` tests you logged previously. +6. Finally, click **Insert 2 Test Results to Document** to add the test results to the documentation. + When you're done, click [{{< fa chevron-right >}}]() to continue. :::: - - # Section 2 {background-color="#083E44" background-image="/assets/img/about-us-esphere.svg"} ## {background-iframe="/notebooks/EXECUTED/model_development/4-finalize_testing_documentation.html" background-interactive="yes" data-preload="yes"} -:::: {.absolute bottom=15 left=0 right=50 .w-100 .f5 .tc .pl4 .pr4 .overlay} +:::: {.slideover--r .three-quarters} **4 — Finalize testing and documentation** -::: {.f6} This is the final notebook in our introductory series, which will walk you through wrapping custom test results into your documentation, as well as how to update the configuration for the entire model documentation template to suit your needs. -::: **Scroll through this notebook** to explore. When you are done, click [{{< fa chevron-right >}}]() to continue. @@ -510,7 +491,7 @@ This is the final notebook in our introductory series, which will walk you throu ::: {.f4} As usual, let's connect back up to your model in the {{< var validmind.platform >}}: -1. From the **{{< fa cubes >}} Inventory**, select the name of your model to open up the model details page. +1. Select the name of your model you registered for this course to open up the model details page. 2. On the left sidebar that appears for your model, click **Getting Started**. 3. Locate the code snippet and click **Copy snippet to clipboard**. @@ -524,17 +505,14 @@ When you're done, click [{{< fa chevron-right >}}]() to continue. ## {background-iframe="/notebooks/EXECUTED/model_development/4-finalize_testing_documentation.html#initialize-the-validmind-library" data-preload="yes"} -:::: {.absolute bottom=15 .w-100 .f5 .tc .pl4 .overlay} +:::: {.slideover--r .three-quarters} **Connect to your model** -::: {.f6} With your code snippet copied to your clipboard: 1. Open **4 — Finalize testing and documentation**: [{{< fa square-arrow-up-right >}} JupyterHub]({{< var url.jupyterhub >}}/hub/user-redirect/lab/tree/tutorials/model_development/4-finalize_testing_documentation.ipynb){target="_blank"} 2. Run all the cells under the **Setting up** section. -::: - When you're done, return to this page and click [{{< fa chevron-right >}}]() to continue. :::: @@ -543,34 +521,28 @@ When you're done, return to this page and click [{{< fa chevron-right >}}]() to ## {background-iframe="/notebooks/EXECUTED/model_development/4-finalize_testing_documentation.html#reconnect-to-validmind" data-preload="yes"} -:::: {.absolute bottom=15 .w-100 .f5 .tc .pl4 .overlay} +:::: {.slideover--r .three-quarters} **Reconnect to {{< var vm.product >}}** -::: {.f6} After you insert test-driven blocks, changes should persist and become available every time you call the [`preview_template()` function](/validmind/validmind.qmd#preview_template){target="_blank"}: 1. Continue with **4 — Finalize testing and documentation**: [{{< fa square-arrow-up-right >}} JupyterHub]({{< var url.jupyterhub >}}/hub/user-redirect/lab/tree/tutorials/model_development/4-finalize_testing_documentation.ipynb){target="_blank"} 2. Run all the cells under the **Reconnect to {{< var vm.product >}}** section. -::: - When you're done, return to this page and click [{{< fa chevron-right >}}]() to continue. :::: ## {background-iframe="/notebooks/EXECUTED/model_development/4-finalize_testing_documentation.html#include-custom-test-results" data-preload="yes"} -:::: {.absolute bottom=15 .w-100 .f5 .tc .pl4 .overlay} +:::: {.slideover--r .three-quarters} **Log custom test results** -::: {.f6} Now that your custom test IDs are part of your template, you can now run tests for an entire section and all additional custom tests will be loaded: 1. Continue with **4 — Finalize testing and documentation**: [{{< fa square-arrow-up-right >}} JupyterHub]({{< var url.jupyterhub >}}/hub/user-redirect/lab/tree/tutorials/model_development/4-finalize_testing_documentation.ipynb){target="_blank"} 2. Run the cell under the **Include custom test results** section. -::: - When you're done, return to this page and click [{{< fa chevron-right >}}]() to continue. :::: @@ -606,32 +578,26 @@ The utility function `vm.get_test_suite().get_default_config()` will return the ## {background-iframe="/notebooks/EXECUTED/model_development/4-finalize_testing_documentation.html#documentation-template-configuration" data-preload="yes"} -:::: {.absolute bottom=15 .w-100 .f5 .tc .pl4 .overlay} +:::: {.slideover--r .three-quarters} **Retrieve default configuration** -::: {.f6} 1. Continue with **4 — Finalize testing and documentation**: [{{< fa square-arrow-up-right >}} JupyterHub]({{< var url.jupyterhub >}}/hub/user-redirect/lab/tree/tutorials/model_development/4-finalize_testing_documentation.ipynb){target="_blank"} 2. Run the first cell under the **Documentation template configuration** section. -::: - When you're done, return to this page and click [{{< fa chevron-right >}}]() to continue. :::: ## {background-iframe="/notebooks/EXECUTED/model_development/4-finalize_testing_documentation.html#update-the-config" data-preload="yes"} -:::: {.absolute bottom=15 .w-100 .f5 .tc .pl4 .overlay} +:::: {.slideover--r .three-quarters} **Update template configuration** -::: {.f6} The default configuration does not assign any inputs to a test, but you can assign inputs to individual tests as needed: 1. Continue with **4 — Finalize testing and documentation**: [{{< fa square-arrow-up-right >}} JupyterHub]({{< var url.jupyterhub >}}/hub/user-redirect/lab/tree/tutorials/model_development/4-finalize_testing_documentation.ipynb){target="_blank"} 2. Run the all the cells under the following Documentation template configuration section: **Update the config** -::: - When you're done, return to this page and click [{{< fa chevron-right >}}]() to continue. :::: diff --git a/site/training/developer-fundamentals/learning-to-run-tests.qmd b/site/training/developer-fundamentals/learning-to-run-tests.qmd index dfc280afcc..60ea84a981 100644 --- a/site/training/developer-fundamentals/learning-to-run-tests.qmd +++ b/site/training/developer-fundamentals/learning-to-run-tests.qmd @@ -16,6 +16,8 @@ format: view-distance: 2 logo: /validmind.png footer: "{{< var validmind.training >}} | [Home {{< fa person-walking-dashed-line-arrow-right >}}](/training/training.qmd)" + revealjs-plugins: + - slideover html: # Change this to the file name prepended by a _ to get around the global HTML output settings required by _metadata.yml output-file: _learning-to-run-tests.html @@ -148,14 +150,11 @@ Let's continue our journey with **2 — Start the model development process** on ## {background-iframe="/notebooks/EXECUTED/model_development/2-start_development_process.html" background-interactive="yes" data-preload="yes"} -:::: {.absolute bottom=15 left=0 right=50 .w-100 .f5 .tc .pl4 .pr4 .overlay} +:::: {.slideover--r .three-quarters} **2 — Start the model development process** -::: {.f6} During this course, we'll run through these notebooks together, and at the end of your learning journey you'll have a fully documented sample model ready for review. -::: - For now, **scroll through this notebook** to explore. When you are done, click [{{< fa chevron-right >}}]() to continue. :::: @@ -166,21 +165,16 @@ For now, **scroll through this notebook** to explore. When you are done, click [ ## {background-iframe="/developer/model-testing/test-descriptions.html" background-interactive="true" data-preload="yes"} -::: footer -:::: {.absolute bottom=0 left=50 right=50 .w-95 .f4 .tc .pl4 .overlay} +:::: {.slideover--l .three-quarters .auto-collapse-5} **{{< var vm.product >}} test repository** -::: {.f5} {{< var vm.product >}} provides a wealth out-of-the-box of tests to help you ensure that your model is being built appropriately. In this module, you'll become familiar with the individual tests available in {{< var vm.product >}}, as well as how to run them and change parameters as necessary. -::: - For now, **scroll through these test descriptions** to explore. When you're done, click [{{< fa chevron-right >}}]() to continue. :::: -::: ## Get your code snippet @@ -209,7 +203,7 @@ For now, **scroll through these test descriptions** to explore. When you're done ::: {.f5} {{< var vm.product >}} generates a unique *code snippet* for each registered model to connect with your developer environment: -1. From the **{{< fa cubes >}} Inventory**, select the name of your model to open up the model details page. +1. Select the name of your model you registered for this course to open up the model details page. 2. On the left sidebar that appears for your model, click **Getting Started**. 3. Locate the code snippet and click **Copy snippet to clipboard**. @@ -230,16 +224,15 @@ Make sure you're logged in and have refreshed the page in a Chromium-based web b ## {background-iframe="/notebooks/EXECUTED/model_development/2-start_development_process.html#initialize-the-validmind-library" data-preload="yes"} -:::: {.absolute bottom=15 .w-100 .f5 .tc .pl4 .overlay} +:::: {.slideover--r .three-quarters} **Connect to your model** -::: {.f6} With your code snippet copied to your clipboard: 1. Open **2 — Start the model development process**: [{{< fa square-arrow-up-right >}} JupyterHub]({{< var url.jupyterhub >}}/hub/user-redirect/lab/tree/tutorials/model_development/2-start_development_process.ipynb){target="_blank"} -2. Run the following cells in the Setting up section: **Initialize the {{< var validmind.developer >}}** / **Import sample dataset**. - -::: +2. Run the following cells in the Setting up section: + - **Initialize the {{< var validmind.developer >}}** + - **Import sample dataset** When you're done, return to this page and click [{{< fa chevron-right >}}]() to continue. @@ -247,33 +240,28 @@ When you're done, return to this page and click [{{< fa chevron-right >}}]() to ## {background-iframe="/notebooks/EXECUTED/model_development/2-start_development_process.html#identify-qualitative-tests" data-preload="yes"} -:::: {.absolute bottom=15 .w-100 .f5 .tc .pl4 .overlay} +:::: {.slideover--r .three-quarters} **Identify qualitative tests** -::: {.f6} Next, we'll use the [`list_tests()` function](/notebooks/EXECUTED/model_development/1-set_up_validmind.ipynb#explore-available-tests){target="_blank"} to pinpoint tests we want to run: 1. Continue with **2 — Start the model development process**: [{{< fa square-arrow-up-right >}} JupyterHub]({{< var url.jupyterhub >}}/hub/user-redirect/lab/tree/tutorials/model_development/2-start_development_process.ipynb){target="_blank"} 2. Run all the cells under the Setting up section: **Identify qualitative tests** -::: - When you're done, return to this page and click [{{< fa chevron-right >}}]() to continue. + :::: ## {background-iframe="/notebooks/EXECUTED/model_development/2-start_development_process.html#initialize-the-validmind-datasets" data-preload="yes"} -:::: {.absolute bottom=15 .w-100 .f5 .tc .pl4 .overlay} +:::: {.slideover--r .three-quarters} **Initialize {{< var vm.product >}} datasets** -::: {.f6} Then, we'll use the [`init_dataset()` function](/validmind/validmind.qmd#init_dataset){target="_blank"} to connect the sample data with a {{< var vm.product >}} `Dataset` object in preparation for running tests: 1. Continue with **2 — Start the model development process**: [{{< fa square-arrow-up-right >}} JupyterHub]({{< var url.jupyterhub >}}/hub/user-redirect/lab/tree/tutorials/model_development/2-start_development_process.ipynb){target="_blank"} 2. Run the following cell in the Setting up section: **Initialize the {{< var vm.product >}} datasets** -::: - When you're done, return to this page and click [{{< fa chevron-right >}}]() to continue. :::: @@ -284,16 +272,13 @@ When you're done, return to this page and click [{{< fa chevron-right >}}]() to ## {background-iframe="/notebooks/EXECUTED/model_development/2-start_development_process.html#run-tabular-data-tests" data-preload="yes"} -:::: {.absolute bottom=15 .w-100 .f5 .tc .pl4 .overlay} +:::: {.slideover--r .three-quarters} **Run tabular data tests** -::: {.f6} You run individual tests by calling the [`run_test()` function](/validmind/validmind/tests.qmd#run_test){target="_blank"} provided by the `validmind.tests` module: 1. Continue with **2 — Start the model development process**: [{{< fa square-arrow-up-right >}} JupyterHub]({{< var url.jupyterhub >}}/hub/user-redirect/lab/tree/tutorials/model_development/2-start_development_process.ipynb){target="_blank"} -2. Run all the cells under the Running tests section: **Run tabular data tests**. - -::: +2. Run all the cells under the Running tests section: **Run tabular data tests** When you're done, return to this page and click [{{< fa chevron-right >}}]() to continue. @@ -301,16 +286,13 @@ When you're done, return to this page and click [{{< fa chevron-right >}}]() to ## {background-iframe="/notebooks/EXECUTED/model_development/2-start_development_process.html#utilize-test-output" data-preload="yes"} -:::: {.absolute bottom=15 .w-100 .f5 .tc .pl4 .overlay} +:::: {.slideover--r .three-quarters} **Utilize test output** -::: {.f6} You can utilize the output from a ValidMind test for further use, for example, if you want to remove highly correlated features: 1. Continue with **2 — Start the model development process**: [{{< fa square-arrow-up-right >}} JupyterHub]({{< var url.jupyterhub >}}/hub/user-redirect/lab/tree/tutorials/model_development/2-start_development_process.ipynb){target="_blank"} -2. Run all the cells under the Running tests section: **Utilize test output**. - -::: +2. Run all the cells under the Running tests section: **Utilize test output** When you're done, return to this page and click [{{< fa chevron-right >}}]() to continue. @@ -345,15 +327,13 @@ Every test result returned by the `run_test()` function has a `.log()` method th ## {background-iframe="/notebooks/EXECUTED/model_development/2-start_development_process.html#run-and-log-multiple-tests" data-preload="yes"} -:::: {.absolute bottom=15 .w-100 .f5 .tc .pl4 .overlay} +:::: {.slideover--r .three-quarters} **Run & log multiple tests** -::: {.f6} The [`run_documentation_tests()` function](/validmind/validmind.qmd#run_documentation_tests){target="_blank"} allows you to run multiple tests at once and automatically log the results to your documentation: 1. Continue with **2 — Start the model development process**: [{{< fa square-arrow-up-right >}} JupyterHub]({{< var url.jupyterhub >}}/hub/user-redirect/lab/tree/tutorials/model_development/2-start_development_process.ipynb){target="_blank"} -2. Run the following cell in the Documenting results section: **Run and log multiple tests**. -::: +2. Run the following cell in the Documenting results section: **Run and log multiple tests** When you're done, return to this page and click [{{< fa chevron-right >}}]() to continue. @@ -361,16 +341,13 @@ When you're done, return to this page and click [{{< fa chevron-right >}}]() to ## {background-iframe="/notebooks/EXECUTED/model_development/2-start_development_process.html#run-and-log-an-individual-test" data-preload="yes"} -:::: {.absolute bottom=15 .w-100 .f5 .tc .pl4 .overlay} +:::: {.slideover--r .three-quarters} **Run & log an individual test** -::: {.f6} Next, we'll run an individual test and log the result to the {{< var validmind.platform >}}: 1. Continue with **2 — Start the model development process**: [{{< fa square-arrow-up-right >}} JupyterHub]({{< var url.jupyterhub >}}/hub/user-redirect/lab/tree/tutorials/model_development/2-start_development_process.ipynb){target="_blank"} -2. Run the following cell in the Running tests section: **Run and log an individual test**. - -::: +2. Run the following cell in the Running tests section: **Run and log an individual test** When you're done, return to this page and click [{{< fa chevron-right >}}]() to continue. @@ -416,22 +393,27 @@ With the test results logged, let's head to the model we connected to at the beg ::: :::: - ## {background-iframe="https://app.prod.validmind.ai/model-inventory/" background-interactive="true" data-preload="yes"} -:::: {.absolute bottom=15 .w-100 .f5 .tc .pl4 .overlay} +:::: {.slideover--b .auto-collapse-10} +::: {.tc} **Insert a test-driven block** - -::: {.f6} -Within your model's **{{< fa book-open >}} Documentation**: 2.3 Correlations and Interactions — `HighPearsonCorrelation:balanced_raw_dataset` - ::: +1. Select the name of your model you registered for this course to open up the model details page. +2. In the left sidebar that appears for your model, click **{{< fa book-open >}} Documentation**. +3. Locate the Data Preparation section and click on **2.3 Correlations and Interactions** to expand that section. +4. Hover under the Pearson Correlation Matrix content block until a horizontal dashed line with a **{{< fa plus >}}** button appears, indicating that you can insert a new block. +5. Click **{{< fa plus >}}** and then select **Test-Driven Block** under [from library]{.smallcaps}: + - Click on **VM Library** under [test-driven]{.smallcaps} in the left sidebar. + - In the search bar, type in `HighPearsonCorrelation`. + - Select `HighPearsonCorrelation:balanced_raw_dataset` as the test. +5. Finally, click **Insert 1 Test Result to Document** to add the test result to the documentation. + When you're done, click [{{< fa chevron-right >}}]() to continue. :::: - # Test an existing model {background-color="#083E44" background-image="/training/assets/home-hero.svg"} ## {.scrollable .center} @@ -475,15 +457,13 @@ In this next example, we’ll focus on running the tests within the Model Develo ## {background-iframe="/notebooks/EXECUTED/model_development/2-start_development_process.html#train-simple-logistic-regression-model" data-preload="yes"} -:::: {.absolute bottom=15 .w-100 .f5 .tc .pl4 .overlay} +:::: {.slideover--r .three-quarters} **Train your model** -::: {.f6} Using {{< var vm.product >}} tests, we'll train a simple logistic regression model on our dataset and evaluate its performance: 1. Continue with **2 — Start the model development process**: [{{< fa square-arrow-up-right >}} JupyterHub]({{< var url.jupyterhub >}}/hub/user-redirect/lab/tree/tutorials/model_development/2-start_development_process.ipynb){target="_blank"} -2. Run all the cells under the Model testing section: **Train simple logistic regression model**. -::: +2. Run all the cells under the Model testing section: **Train simple logistic regression model** When you're done, return to this page and click [{{< fa chevron-right >}}]() to continue. @@ -491,16 +471,13 @@ When you're done, return to this page and click [{{< fa chevron-right >}}]() to ## {background-iframe="/notebooks/EXECUTED/model_development/2-start_development_process.html#initialize-model-evaluation-objects" data-preload="yes"} -:::: {.absolute bottom=15 .w-100 .f5 .tc .pl4 .overlay} +:::: {.slideover--r .three-quarters} **Initialize a model object** -::: {.f6} Use the `init_dataset()` and [`init_model()` functions](/validmind/validmind.qmd#init_model){target="_blank"} to initialize these objects: 1. Continue with **2 — Start the model development process**: [{{< fa square-arrow-up-right >}} JupyterHub]({{< var url.jupyterhub >}}/hub/user-redirect/lab/tree/tutorials/model_development/2-start_development_process.ipynb){target="_blank"} -2. Run the cell under the following Model testing section: **Initialize model evaluation objects**. - -::: +2. Run the cell under the following Model testing section: **Initialize model evaluation objects** When you're done, return to this page and click [{{< fa chevron-right >}}]() to continue. @@ -508,16 +485,13 @@ When you're done, return to this page and click [{{< fa chevron-right >}}]() to ## {background-iframe="/notebooks/EXECUTED/model_development/2-start_development_process.html#assign-predictions" data-preload="yes"} -:::: {.absolute bottom=15 .w-100 .f5 .tc .pl4 .overlay} +:::: {.slideover--r .three-quarters} **Assign predictions** -::: {.f6} Use the [`assign_predictions()` method](/validmind/validmind/vm_models.qmd#assign_predictions){target="_blank"} from the `Dataset` object to link existing predictions to any number of models: 1. Continue with **2 — Start the model development process**: [{{< fa square-arrow-up-right >}} JupyterHub]({{< var url.jupyterhub >}}/hub/user-redirect/lab/tree/tutorials/model_development/2-start_development_process.ipynb){target="_blank"} -2. Run the cell under the following Model testing section: **Assign predictions**. - -::: +2. Run the cell under the following Model testing section: **Assign predictions** When you're done, return to this page and click [{{< fa chevron-right >}}]() to continue. @@ -525,23 +499,18 @@ When you're done, return to this page and click [{{< fa chevron-right >}}]() to ## {background-iframe="/notebooks/EXECUTED/model_development/2-start_development_process.html#run-the-model-evaluation-tests" data-preload="yes"} -:::: {.absolute bottom=15 .w-100 .f5 .tc .pl4 .overlay} +:::: {.slideover--r .three-quarters} **Run the model evaluation tests** -::: {.f6} Finally, we'll run only the tests within the Model Development section of the model documentation: 1. Continue with **2 — Start the model development process**: [{{< fa square-arrow-up-right >}} JupyterHub]({{< var url.jupyterhub >}}/hub/user-redirect/lab/tree/tutorials/model_development/2-start_development_process.ipynb){target="_blank"} -2. Run the cell under the following Model testing section: **Run the model evaluation tests**. - -::: +2. Run the cell under the following Model testing section: **Run the model evaluation tests** When you're done, return to this page and click [{{< fa chevron-right >}}]() to continue. :::: - - # In summary {background-color="#083E44" background-image="/training/assets/home-hero.svg"} ## {.scrollable .center} diff --git a/site/training/developer-fundamentals/using-validmind-for-model-development.qmd b/site/training/developer-fundamentals/using-validmind-for-model-development.qmd index 8d6885e295..c6706415b3 100644 --- a/site/training/developer-fundamentals/using-validmind-for-model-development.qmd +++ b/site/training/developer-fundamentals/using-validmind-for-model-development.qmd @@ -16,6 +16,8 @@ format: view-distance: 2 logo: /validmind.png footer: "{{< var validmind.training >}} | [Home {{< fa person-walking-dashed-line-arrow-right >}}](/training/training.qmd)" + revealjs-plugins: + - slideover html: # Change this to the file name prepended by a _ to get around the global HTML output settings required by _metadata.yml output-file: _using-validmind-for-model-development.html @@ -140,92 +142,70 @@ In this first module, we'll run through **1 — Set up the {{< var validmind.dev Let's start our journey with **1 — Set up the {{< var validmind.developer >}}** on the next page. {{< fa hand-point-right >}} -## {background-iframe="/notebooks/EXECUTED/model_development/1-set_up_validmind.html" background-interactive="yes" data-preload="yes"} +## {background-iframe="/notebooks/EXECUTED/model_development/1-set_up_validmind.html" background-interactive="yes" data-preload="yes"} + +:::: {.slideover--r .three-quarters} -:::: {.absolute bottom=15 left=0 right=50 .w-100 .f5 .tc .pl4 .pr4 .overlay} **1 — Set up the {{< var validmind.developer >}}** -::: {.f6} During this course, we'll run through these notebooks together, and at the end of your learning journey you'll have a fully documented sample model ready for review. -::: For now, **scroll through this notebook** to explore. When you are done, click [{{< fa chevron-right >}}]() to continue. :::: - - # Register a model {background-color="#083E44" background-image="/training/assets/home-hero.svg"} ## {background-iframe="https://app.prod.validmind.ai" background-interactive="true" data-preload="yes"} -::: {.fr .f5 .mv4 .nr5 .pa5 .overlay} +:::: {.slideover--r} **Welcome to the {{< var validmind.platform >}}** From here, you can: -- Keep track of your models in the
customizable inventory ... -- Review and edit model documentation
generated via the {{< var validmind.developer >}} ... -- Collaborate with model validators
to get your model approved ... +- Keep track of your models in the customizable inventory ... +- Review and edit model documentation generated via the {{< var validmind.developer >}} ... +- Collaborate with model validators to get your model approved ... - ... and much more! -::: {.f6 .pl3 .pr3 .embed} +::: {.embed} **Can't load the {{< var validmind.platform >}}?** -Make sure you're logged in and have
refreshed the page in a Chromium-based
web browser. -::: - -When you're done navigating around, -
click [{{< fa chevron-right >}}]() to continue. +Make sure you're logged in and have refreshed the page in a Chromium-based web browser. ::: +When you're done navigating around, click [{{< fa chevron-right >}}]() to continue. + +:::: ## {background-iframe="https://app.prod.validmind.ai/model-inventory" background-interactive="true" data-preload="yes"} -:::: {.fr .f5 .mv6 .nr5 .pa4 .overlay} +:::: {.slideover--r} **Welcome to the {{< fa cubes >}} Inventory** -Use the model inventory to track
-comprehensive details for all your
-models throughout the model lifecycle. - -The model inventory is customizable
-and extensible, with a layout that
-can be configured to suit your needs. +Use the model inventory to track comprehensive details for all your models throughout the model lifecycle. The model inventory is customizable and extensible, with a layout that can be configured to suit your needs. ::: {.f6 .pl3 .pr3 .embed} -To start the documentation process,
-a model must already be registered
-in the model inventory via the
-**{{< fa plus >}} Register Model** modal. +To start the documentation process, a model must already be registered in the model inventory via the **{{< fa plus >}} Register Model** modal. ::: -**Let's register a model together** on
-the next page. {{< fa hand-point-right >}} +**Let's register a model together** on the next page. {{< fa hand-point-right >}} :::: ## {background-iframe="https://app.prod.validmind.ai/model-inventory/?register=open" background-interactive="true" data-preload="yes"} -:::: {.fr .f5 .mv5 .nr5 .pa4 .overlay} -**Register a binary
classification model** - -1. Select the option
-for a new model: +:::: {.slideover--r .three-quarters .auto-collapse-10} +**Register a binary classification model** -::: {.f6 .nt2 .pl2} +1. Select the option for a new model: - **Documentation template** —
`Binary classification` -- **Use case** —
`Attrition/Churn Management` - - You can fill in other options
according to your preference. -::: - -2. Click **{{< fa plus >}} Register Model** to
-add the model to your
-inventory. +- **Use case** —
`Attrition/Churn Management`

+ You can fill in other options according to your preference. +2. Click **{{< fa plus >}} Register Model** to add the model to your inventory. -When you're done,
click [{{< fa chevron-right >}}]() to continue. +When you're done, click [{{< fa chevron-right >}}]() to continue. :::: @@ -260,7 +240,7 @@ When you're done,
click [{{< fa chevron-right >}}]() to continue. ::: {.f5} {{< var vm.product >}} generates a unique *code snippet* for each registered model to connect with your developer environment: -1. From the **{{< fa cubes >}} Inventory**, select the name of your model to open up the model details page. +1. Select the name of your model you registered for this course to open up the model details page. 2. On the left sidebar that appears for your model, click **Getting Started**. 3. Locate the code snippet and click **Copy snippet to clipboard**. @@ -281,17 +261,14 @@ Make sure you're logged in and have refreshed the page in a Chromium-based web b ## {background-iframe="/notebooks/EXECUTED/model_development/1-set_up_validmind.html#install-the-validmind-library" data-preload="yes"} -:::: {.absolute bottom=15 .w-100 .f5 .tc .pl4 .overlay} +:::: {.slideover--r .three-quarters} **Install & initialize the {{< var validmind.developer >}}** -::: {.f6} With your code snippet copied to your clipboard: 1. Open **1 — Set up the {{< var validmind.developer >}}**: [{{< fa square-arrow-up-right >}} JupyterHub]({{< var url.jupyterhub >}}/hub/user-redirect/lab/tree/tutorials/model_development/1-set_up_validmind.ipynb){target="_blank"} 2. Run all the cells in the sections under **Initializing the {{< var validmind.developer >}}**. -::: - When you're done, return to this page and click [{{< fa chevron-right >}}]() to continue. :::: @@ -302,17 +279,14 @@ When you're done, return to this page and click [{{< fa chevron-right >}}]() to ## {background-iframe="/notebooks/EXECUTED/model_development/1-set_up_validmind.html#preview-the-documentation-template" data-preload="yes"} -:::: {.absolute bottom=15 .w-100 .f5 .tc .pl4 .overlay} +:::: {.slideover--r .three-quarters} **Preview the documentation template** -::: {.f6} You can preview your model's documentation template right from the {{< var validmind.developer >}}: 1. Continue with **1 — Set up the {{< var validmind.developer >}}**: [{{< fa square-arrow-up-right >}} JupyterHub]({{< var url.jupyterhub >}}/hub/user-redirect/lab/tree/tutorials/model_development/1-set_up_validmind.ipynb){target="_blank"} 2. Run all the cells in the sections under **Getting to know ValidMind**. -::: - When you're done, return to this page and click [{{< fa chevron-right >}}]() to continue. :::: @@ -338,24 +312,23 @@ Try it **live** on the next page. {{< fa hand-point-right >}} {{< include /guide/model-documentation/_review-model-documentation.qmd >}} - ::: + :::: ## {background-iframe="https://app.prod.validmind.ai/model-inventory" background-interactive="true" data-preload="yes"} -:::: {.absolute bottom=0 left=50 right=50 .w-95 .f5 .tc .pl4 .overlay} +:::: {.slideover--b .auto-collapse-10} +::: {.tc} **Verify the documentation template** +::: -::: {.f6} Once you've called `preview_template()`: -1. From the model inventory, select the name of your model to open up the model details page. +1. Select the name of your model you registered for this course to open up the model details page. 2. On the left sidebar that appears for your model, click **{{< fa book-open >}} Documentation**. 3. Note how the structure of the Document Overview reflects the previewed template. -::: - When you're done, click [{{< fa chevron-right >}}]() to continue. :::: diff --git a/site/training/training-templates/course-slides.qmd b/site/training/training-templates/course-slides.qmd index 00722bce0b..c9c79f4e75 100644 --- a/site/training/training-templates/course-slides.qmd +++ b/site/training/training-templates/course-slides.qmd @@ -152,13 +152,13 @@ This is a collapsible right-aligned modal (`slideover--r`) on top of the live {{ - This modal uses a version of the [`nrichers/slideover` extension](https://github.com/nrichers/slideover) ... - ... with the styling modified to mimic the style of the docs site callouts. -- **Bold text shows up in a different colour.** +- **Bold text shows up in a different colour.** So do *italics*. - You can use an additional callout style with this class: `.embed` ::: {.embed} This is the nested embed, that has its own styling. Think of it as a callout within the slideovers. -Speaking of important information in callouts ... if you update the extension, **make sure to reapply our custom CSS changes under `slideover.css`!** +Speaking of important information in callouts ... if you update the extension, **make sure to reapply our custom CSS template from `/training/assets/validmind-slideover.css` to the extensions `custom-slideover.css`!** ::: @@ -336,7 +336,7 @@ Try it **live** on the next page. {{< fa hand-point-right >}} ::: {.f5} {{< var vm.product >}} generates a unique *code snippet* for each registered model to connect with your developer environment: -1. From the **{{< fa cubes >}} Inventory**, select the name of your model to open up the model details page. +1. Select the name of your model you registered for this course to open up the model details page. 2. On the left sidebar that appears for your model, click **Getting Started**. 3. Locate the code snippet and click **Copy snippet to clipboard**. diff --git a/site/training/validator-fundamentals/developing-challenger-models.qmd b/site/training/validator-fundamentals/developing-challenger-models.qmd index c61eb49524..59e7f77b07 100644 --- a/site/training/validator-fundamentals/developing-challenger-models.qmd +++ b/site/training/validator-fundamentals/developing-challenger-models.qmd @@ -16,6 +16,8 @@ format: view-distance: 2 logo: /validmind.png footer: "{{< var validmind.training >}} | [Home {{< fa person-walking-dashed-line-arrow-right >}}](/training/training.qmd)" + revealjs-plugins: + - slideover html: # Change this to the file name prepended by a _ to get around the global HTML output settings required by _metadata.yml output-file: _developing-challenger-models.html @@ -183,14 +185,11 @@ Let's continue our journey with **Section 1** on the next page. {{< fa hand-poin ## {background-iframe="/notebooks/EXECUTED/model_validation/3-developing_challenger_model.html" background-interactive="yes" data-preload="yes"} -:::: {.absolute bottom=15 left=0 right=50 .w-100 .f5 .tc .pl4 .pr4 .overlay} +:::: {.slideover--r .three-quarters} **3 — Developing a potential challenger model** -::: {.f6} This is the third notebook in our introductory series, which will walk you through how to evaluate your champion model against a potential challenger with {{< var vm.product >}}. -::: - **Scroll through this notebook** to explore. When you are done, click [{{< fa chevron-right >}}]() to continue. :::: @@ -222,7 +221,7 @@ This is the third notebook in our introductory series, which will walk you throu ::: {.f5} {{< var vm.product >}} generates a unique *code snippet* for each registered model to connect with your validation environment: -1. From the **{{< fa cubes >}} Inventory**, select the name of your model to open up the model details page. +1. Select the name of your model you registered for this course to open up the model details page. 2. On the left sidebar that appears for your model, click **Getting Started**. 3. Locate the code snippet and click **Copy snippet to clipboard**. @@ -243,34 +242,28 @@ Make sure you're logged in and have refreshed the page in a Chromium-based web b ## {background-iframe="/notebooks/EXECUTED/model_validation/3-developing_challenger_model.html#initialize-the-validmind-library" data-preload="yes"} -:::: {.absolute bottom=15 .w-100 .f5 .tc .pl4 .overlay} +:::: {.slideover--r .three-quarters} **Connect to your model** -::: {.f6} With your code snippet copied to your clipboard: 1. Open **3 — Developing a potential challenger model**: [{{< fa square-arrow-up-right >}} JupyterHub]({{< var url.jupyterhub >}}/hub/user-redirect/lab/tree/tutorials/model_validation/3-developing_challenger_model.ipynb){target="_blank"} 2. Run all the cells under the **Setting up** section. -::: - When you're done, return to this page and click [{{< fa chevron-right >}}]() to continue. :::: ## {background-iframe="/notebooks/EXECUTED/model_validation/3-developing_challenger_model.html#import-the-champion-model" data-preload="yes"} -:::: {.absolute bottom=15 .w-100 .f5 .tc .pl4 .overlay} +:::: {.slideover--r .three-quarters} **Import the champion model** -::: {.f6} Next, let's import the champion model submitted by the model development team in the format of a `.pkl` file for evaluation: 1. Continue with **3 — Developing a potential challenger model**: [{{< fa square-arrow-up-right >}} JupyterHub]({{< var url.jupyterhub >}}/hub/user-redirect/lab/tree/tutorials/model_validation/3-developing_challenger_model.ipynb){target="_blank"} 2. Run the cell under the **Import the champion model** section. -::: - When you're done, return to this page and click [{{< fa chevron-right >}}]() to continue. :::: @@ -315,34 +308,28 @@ We're curious how an alternate model compares to our champion model, so let's tr ## {background-iframe="/notebooks/EXECUTED/model_validation/3-developing_challenger_model.html#training-a-potential-challenger-model" data-preload="yes"} -:::: {.absolute bottom=15 .w-100 .f5 .tc .pl4 .overlay} +:::: {.slideover--r .three-quarters} **Random forest classification model** -::: {.f6} Let's train our potential challenger model: 1. Continue with **3 — Developing a potential challenger model**: [{{< fa square-arrow-up-right >}} JupyterHub]({{< var url.jupyterhub >}}/hub/user-redirect/lab/tree/tutorials/model_validation/3-developing_challenger_model.ipynb){target="_blank"} 2. Run the cell under the following Training a potential challenger model section: **Random forest classification model** -::: - When you're done, return to this page and click [{{< fa chevron-right >}}]() to continue. :::: ## {background-iframe="/notebooks/EXECUTED/model_validation/3-developing_challenger_model.html#initializing-the-model-objects" data-preload="yes"} -:::: {.absolute bottom=15 .w-100 .f5 .tc .pl4 .overlay} +:::: {.slideover--r .three-quarters} **Initialize the model objects** -::: {.f6} In addition to the initialized datasets, you'll also need to initialize a ValidMind model object (`vm_model`) that can be passed to other functions for analysis and tests on the data for each of our two models using [the `vm.init_model()` method](/validmind/validmind.qmd#init_model){target="_blank"}: 1. Continue with **3 — Developing a potential challenger model**: [{{< fa square-arrow-up-right >}} JupyterHub]({{< var url.jupyterhub >}}/hub/user-redirect/lab/tree/tutorials/model_validation/3-developing_challenger_model.ipynb){target="_blank"} 2. Run all the cells under the section **Initializing the model objects**. -::: - When you're done, return to this page and click [{{< fa chevron-right >}}]() to continue. :::: @@ -389,17 +376,14 @@ Finally, we want to verify the relative influence of different input features on ## {background-iframe="/notebooks/EXECUTED/model_validation/3-developing_challenger_model.html#run-model-performance-tests" data-preload="yes"} -:::: {.absolute bottom=15 .w-100 .f5 .tc .pl4 .overlay} +:::: {.slideover--r .three-quarters} **Run model performance tests** -::: {.f6} Use the [`list_tests()` function](/validmind/validmind/tests.qmd#list_tests){target="_blank"} to identify all the model performance tests for classification: 1. Continue with **3 — Developing a potential challenger model**: [{{< fa square-arrow-up-right >}} JupyterHub]({{< var url.jupyterhub >}}/hub/user-redirect/lab/tree/tutorials/model_validation/3-developing_challenger_model.ipynb){target="_blank"} 2. Run all the cells under the Running model evaluation tests section: **Run model performance tests** -::: - When you're done, return to this page and click [{{< fa chevron-right >}}]() to continue. :::: @@ -428,7 +412,7 @@ As we can observe from the output in our notebook, our champion model doesn't pa #### Create a finding via a validation report -1. From the **Inventory** in the ValidMind Platform, go to the model you connected to earlier. +1. From the **{{< fa cubes >}} Inventory** in the ValidMind Platform, go to the model you connected to earlier. 2. In the left sidebar that appears for your model, click **{{< fa shield >}} Validation Report**. @@ -464,48 +448,49 @@ As we can observe from the output in our notebook, our champion model doesn't pa ## {background-iframe="https://app.prod.validmind.ai/model-inventory/" background-interactive="true" data-preload="yes"} -:::: {.absolute bottom=15 .w-100 .f5 .tc .pl4 .overlay} +:::: {.slideover--b .auto-collapse-10} +::: {.tc} **Create a model finding** -::: {.f6} -Within your **{{< fa shield >}} Validation Report**: 2.2.2. Model Performance — **Link Finding to Report** {{< fa chevron-right >}} **{{< fa plus >}} Create New Finding** {{< fa chevron-right >}} **Update Linked Findings** - ::: +1. Select the name of your model you registered for this course to open up the model details page. +2. In the left sidebar that appears for your model, click **{{< fa shield >}} Validation Report**. +3. Locate the Data Preparation section and click on **2.2.2. Model Performance** to expand that section. +4. Under the Model Performance Metrics section, locate Findings then click **Link Finding to Report**. +5. Click **{{< fa plus >}} Create New Finding** to add a finding. +6. Enter in the details for your finding and click **Save**. +7. Select the finding you just added to link to your validation report. +8. Click **Update Linked Findings** to insert your finding. + When you're done, click [{{< fa chevron-right >}}]() to continue. :::: ## {background-iframe="/notebooks/EXECUTED/model_validation/3-developing_challenger_model.html#run-diagnostic-tests" data-preload="yes"} -:::: {.absolute bottom=15 .w-100 .f5 .tc .pl4 .overlay} +:::: {.slideover--r .three-quarters} **Run diagnostic tests** -::: {.f6} This time, use `list_tests()` to identify all the model diagnosis tests for classification: 1. Continue with **3 — Developing a potential challenger model**: [{{< fa square-arrow-up-right >}} JupyterHub]({{< var url.jupyterhub >}}/hub/user-redirect/lab/tree/tutorials/model_validation/3-developing_challenger_model.ipynb){target="_blank"} 2. Run all the cells under the Running model evaluation tests section: **Run diagnostic tests** -::: - When you're done, return to this page and click [{{< fa chevron-right >}}]() to continue. :::: ## {background-iframe="/notebooks/EXECUTED/model_validation/3-developing_challenger_model.html#run-feature-importance-tests" data-preload="yes"} -:::: {.absolute bottom=15 .w-100 .f5 .tc .pl4 .overlay} +:::: {.slideover--r .three-quarters} **Run feature importance tests** -::: {.f6} Use `list_tests()` again to identify all the feature importance tests for classification: 1. Continue with **3 — Developing a potential challenger model**: [{{< fa square-arrow-up-right >}} JupyterHub]({{< var url.jupyterhub >}}/hub/user-redirect/lab/tree/tutorials/model_validation/3-developing_challenger_model.ipynb){target="_blank"} 2. Run all the cells under the Running model evaluation tests section: **Run feature importance tests** -::: - When you're done, return to this page and click [{{< fa chevron-right >}}]() to continue. :::: @@ -514,12 +499,10 @@ When you're done, return to this page and click [{{< fa chevron-right >}}]() to ## {background-iframe="/notebooks/EXECUTED/model_validation/4-finalize_validation_reporting.html" background-interactive="yes" data-preload="yes"} -:::: {.absolute bottom=15 left=0 right=50 .w-100 .f5 .tc .pl4 .pr4 .overlay} +:::: {.slideover--r .three-quarters} **4 — Finalize testing and reporting** -::: {.f6} This is the final notebook in our introductory series, which will walk you through how to supplement ValidMind tests with your own custom tests and include them as additional evidence in your validation report, and wrap up your validation testing. -::: **Scroll through this notebook** to explore. When you are done, click [{{< fa chevron-right >}}]() to continue. @@ -552,7 +535,7 @@ This is the final notebook in our introductory series, which will walk you throu ::: {.f4} As usual, let's connect back up to your model in the {{< var validmind.platform >}}: -1. From the **{{< fa cubes >}} Inventory**, select the name of your model to open up the model details page. +1. Select the name of your model you registered for this course to open up the model details page. 2. On the left sidebar that appears for your model, click **Getting Started**. 3. Locate the code snippet and click **Copy snippet to clipboard**. @@ -566,17 +549,14 @@ When you're done, click [{{< fa chevron-right >}}]() to continue. ## {background-iframe="/notebooks/EXECUTED/model_validation/4-finalize_validation_reporting.html#initialize-the-validmind-library" data-preload="yes"} -:::: {.absolute bottom=15 .w-100 .f5 .tc .pl4 .overlay} +:::: {.slideover--r .three-quarters} **Connect to your model** -::: {.f6} With your code snippet copied to your clipboard: 1. Open **4 — Finalize testing and validation**: [{{< fa square-arrow-up-right >}} JupyterHub]({{< var url.jupyterhub >}}/hub/user-redirect/lab/tree/tutorials/model_validation/4-finalize_validation_reporting.ipynb){target="_blank"} 2. Run all the cells under the **Setting up** section. -::: - When you're done, return to this page and click [{{< fa chevron-right >}}]() to continue. :::: @@ -604,34 +584,28 @@ Let's implement a *custom test* that calculates a confusion matrix: ## {background-iframe="/notebooks/EXECUTED/model_validation/4-finalize_validation_reporting.html#implement-a-custom-inline-test" data-preload="yes"} -:::: {.absolute bottom=15 .w-100 .f5 .tc .pl4 .overlay} +:::: {.slideover--r .three-quarters} **Implement a custom inline test** -::: {.f6} -An *inline test* refers to a test written and executed within the same environment as the code being tested —
in the following example, right in our Jupyter Notebook — without requiring a separate test file or framework: +An *inline test* refers to a test written and executed within the same environment as the code being tested — in the following example, right in our Jupyter Notebook — without requiring a separate test file or framework: 1. Continue with **4 — Finalize testing and validation**: [{{< fa square-arrow-up-right >}} JupyterHub]({{< var url.jupyterhub >}}/hub/user-redirect/lab/tree/tutorials/model_validation/4-finalize_validation_reporting.ipynb){target="_blank"} 2. Run all the cells in the following sections under Implementing custom tests: **Implement a custom inline test** -::: - When you're done, return to this page and click [{{< fa chevron-right >}}]() to continue. :::: ## {background-iframe="/notebooks/EXECUTED/model_validation/4-finalize_validation_reporting.html#use-external-test-providers" data-preload="yes"} -:::: {.absolute bottom=15 .w-100 .f5 .tc .pl4 .overlay} +:::: {.slideover--r .three-quarters} **Use external test providers** -::: {.f6} -Sometimes you may want to reuse the same set of custom tests across multiple models and share them with others in your organization,
like the model development team would have done with you in this example workflow featured in this series of notebooks: +Sometimes you may want to reuse the same set of custom tests across multiple models and share them with others in your organization, like the model development team would have done with you in this example workflow featured in this series of notebooks: 1. Continue with **4 — Finalize testing and validation**: [{{< fa square-arrow-up-right >}} JupyterHub]({{< var url.jupyterhub >}}/hub/user-redirect/lab/tree/tutorials/model_validation/4-finalize_validation_reporting.ipynb){target="_blank"} 2. Run all the cells in the following sections under Implementing custom tests: **Use external test providers** -::: - When you're done, return to this page and click [{{< fa chevron-right >}}]() to continue. :::: @@ -640,17 +614,14 @@ When you're done, return to this page and click [{{< fa chevron-right >}}]() to ## {background-iframe="/notebooks/EXECUTED/model_validation/4-finalize_validation_reporting.html#verify-test-runs" data-preload="yes"} -:::: {.absolute bottom=15 .w-100 .f5 .tc .pl4 .overlay} +:::: {.slideover--r .three-quarters} **Verify model development testing** -::: {.f6} Our final task is to verify that all the tests provided by the model development team were run and reported accurately: 1. Continue with **4 — Finalize testing and validation**: [{{< fa square-arrow-up-right >}} JupyterHub]({{< var url.jupyterhub >}}/hub/user-redirect/lab/tree/tutorials/model_validation/4-finalize_validation_reporting.ipynb){target="_blank"} 2. Run all the cells under the **Verify test runs** section. -::: - When you're done, return to this page and click [{{< fa chevron-right >}}]() to continue. :::: diff --git a/site/training/validator-fundamentals/finalizing-validation-reports.qmd b/site/training/validator-fundamentals/finalizing-validation-reports.qmd index 2d0afc88e4..88fa5fe511 100644 --- a/site/training/validator-fundamentals/finalizing-validation-reports.qmd +++ b/site/training/validator-fundamentals/finalizing-validation-reports.qmd @@ -16,6 +16,8 @@ format: view-distance: 2 logo: /validmind.png footer: "{{< var validmind.training >}} | [Home {{< fa person-walking-dashed-line-arrow-right >}}](/training/training.qmd)" + revealjs-plugins: + - slideover html: # Change this to the file name prepended by a _ to get around the global HTML output settings required by _metadata.yml output-file: _finalizing-validation-reports.html @@ -190,17 +192,16 @@ For example: ## {background-iframe="https://app.prod.validmind.ai/model-inventory" background-interactive="true" data-preload="yes"} -:::: {.absolute bottom=0 left=50 right=50 .w-95 .f5 .tc .pl4 .overlay} +:::: {.slideover--b .auto-collapse-10} +::: {.tc} **Add & edit content blocks** - -::: {.f6} -Within your **{{< fa shield >}} Validation Report**: - -1. Click on **1. Executive Summary** to add and edit a content block. -2. Click on **2.2.1. Data Quality** to edit the description for the linked Class Imbalance Assessment test results. - ::: +1. Select the name of your model you registered for this course to open up the model details page. +2. On the left sidebar that appears for your model, click **{{< fa shield >}} Validation Report**. +3. Click on **1. Executive Summary** to add and edit a content block. +4. Click on **2.2.1. Data Quality** to edit the description for the linked Class Imbalance Assessment test results. + When you're done, click [{{< fa chevron-right >}}]() to continue. :::: @@ -254,14 +255,15 @@ In the same Class Imbalance Assessment sub-section, above the Risk Assessment No ## {background-iframe="https://app.prod.validmind.ai/model-inventory" background-interactive="true" data-preload="yes"} -:::: {.absolute bottom=0 left=50 right=50 .w-95 .f5 .tc .pl4 .overlay} +:::: {.slideover--b .auto-collapse-10} +::: {.tc} **Add your compliance assessments** - -::: {.f6} -Within your **{{< fa shield >}} Validation Report**, click on **2.2.1. Data Quality** to assess compliance for the Class Imbalance Assessment sub-section. - ::: +1. Select the name of your model you registered for this course to open up the model details page. +2. On the left sidebar that appears for your model, click **{{< fa shield >}} Validation Report**. +3. Click on **2.2.1. Data Quality** to assess compliance for the Class Imbalance Assessment sub-section. + When you're done, click [{{< fa chevron-right >}}]() to continue. ::: @@ -312,28 +314,30 @@ Along with adding findings directly via validation reports, you can also add fin ## {background-iframe="https://app.prod.validmind.ai/model-inventory" background-interactive="true" data-preload="yes"} -:::: {.absolute bottom=0 left=50 right=50 .w-95 .f5 .tc .pl4 .overlay} +:::: {.slideover--b .auto-collapse-10} +::: {.tc} **Add a finding via overview** - -::: {.f6} -Within the model's **{{< fa book-open >}} Documentation**, click **{{< fa plus >}} Add Finding** to add a finding from the overview. - ::: +1. Select the name of your model you registered for this course to open up the model details page. +2. On the left sidebar that appears for your model, click **{{< fa book-open >}} Documentation**. +3. Click **{{< fa plus >}} Add Finding** to add a finding from the overview. + When you're done, click [{{< fa chevron-right >}}]() to continue. ::: ## {background-iframe="https://app.prod.validmind.ai/model-inventory" background-interactive="true" data-preload="yes"} -:::: {.absolute bottom=0 left=50 right=50 .w-95 .f5 .tc .pl4 .overlay} +:::: {.slideover--b .auto-collapse-10} +::: {.tc} **Add a finding via section** - -::: {.f6} -Within the model's **{{< fa book-open >}} Documentation**, click on any section heading to expand and add a finding to that section via the **{{< var vm.product >}} Insights™** panel. - ::: +1. Select the name of your model you registered for this course to open up the model details page. +2. On the left sidebar that appears for your model, click **{{< fa book-open >}} Documentation**. +3. Click on any section heading to expand and add a finding to that section via the **{{< var vm.product >}} Insights™** panel. + When you're done, click [{{< fa chevron-right >}}]() to continue. ::: @@ -377,15 +381,15 @@ Along with model-specific findings, you can also view and filter a list of findi ## {background-iframe="https://app.prod.validmind.ai/model-inventory" background-interactive="true" data-preload="yes"} -:::: {.absolute bottom=0 left=50 right=50 .w-95 .f5 .tc .pl4 .overlay} +:::: {.slideover--b .auto-collapse-10} +::: {.tc} **Update a model finding** +::: -::: {.f6} -1. From the **{{< fa cubes >}} Inventory**, select the name the model you registered to open up the model details page. +1. Select the name of your model you registered for this course to open up the model details page. 2. In the left sidebar that appears for your model, click **{{< fa triangle-exclamation >}} Model Findings**. 3. Select one of the findings you logged during this course, and make some changes to any of the fields. 4. When you are finished editing, set the finding **[status]{.smallcaps}** to `Closed`. -::: When you're done, click [{{< fa chevron-right >}}]() to continue. @@ -393,12 +397,12 @@ When you're done, click [{{< fa chevron-right >}}]() to continue. ## {background-iframe="https://app.prod.validmind.ai/model-findings" background-interactive="true" data-preload="yes"} -:::: {.absolute bottom=0 left=50 right=50 .w-95 .f5 .tc .pl4 .overlay} -**View all {{< fa triangle-exclamation >}} Model Findings** +:::: {.slideover--b .three-quarters .auto-collapse-10} +::: {.tc} +**View all {{< fa triangle-exclamation >}} Model Findings** +::: -::: {.f6} Filter this list to include only findings you want to see, or toggle visibilty for column headers. -::: When you're done, click [{{< fa chevron-right >}}]() to continue. @@ -448,15 +452,15 @@ To transition through the approval workflow, all required workflow steps must be ## {background-iframe="https://app.prod.validmind.ai/model-inventory" background-interactive="true" data-preload="yes"} -:::: {.absolute bottom=0 left=50 right=50 .w-95 .f5 .tc .pl4 .overlay} +:::: {.slideover--b .auto-collapse-10} +::: {.tc} **Submit for approval** +::: -::: {.f6} -1. From the **{{< fa cubes >}} Inventory**, select the name of your model you registered for this course to open up the model details page. +1. Select the name of your model you registered for this course to open up the model details page. 2. Locate the **[model status]{.smallcaps}** section. 3. Open up the status transition panel, enter your **[notes]{.smallcaps}** and any other additional inventory fields, then click **Submit**. -::: When you're done, click [{{< fa chevron-right >}}]() to continue. @@ -499,14 +503,15 @@ Have a question about the model? Collaborate with your developer right in the mo ## {background-iframe="https://app.prod.validmind.ai/model-inventory" background-interactive="true" data-preload="yes"} -:::: {.absolute bottom=0 left=50 right=50 .w-95 .f5 .tc .pl4 .overlay} +:::: {.slideover--b .auto-collapse-10} +::: {.tc} **Comment on a text block** - -::: {.f6} -**In the content block you added earlier** within your **{{< fa shield >}} Validation Report**: Post a comment, reply to it, and then resolve the thread. - ::: +1. Select the name of your model you registered for this course to open up the model details page. +2. On the left sidebar that appears for your model, click **{{< fa shield >}} Validation Report**. +3. **In the content block you added earlier**: Post a comment, reply to it, and then resolve the thread. + When you're done, click [{{< fa chevron-right >}}]() to continue. :::: @@ -540,15 +545,14 @@ Track changes & updates ## {background-iframe="https://app.prod.validmind.ai/model-inventory" background-interactive="true" data-preload="yes"} -:::: {.absolute bottom=0 left=50 right=50 .w-95 .f5 .tc .pl4 .overlay} +:::: {.slideover--b .auto-collapse-10} +::: {.tc} **Review model activity** +::: -::: {.f6} -1. From the **{{< fa cubes >}} Inventory**, select the name of your model you registered for this course to open up the model details page. +1. Select the name of your model you registered for this course to open up the model details page. 2. In the left sidebar that appears for your model, click **{{< fa wifi >}} Model Activity**. -3. Filter the following activity: **Comments** | **Status Updates** | **Model Updates** | **Test Results** - -::: +3. Filter the following activity:
**Comments** | **Status Updates** | **Model Updates** | **Test Results** When you're done, click [{{< fa chevron-right >}}]() to continue. @@ -558,15 +562,15 @@ When you're done, click [{{< fa chevron-right >}}]() to continue. ## {background-iframe="https://app.prod.validmind.ai/analytics" background-interactive="true" data-preload="yes"} -:::: {.absolute bottom=0 left=50 right=50 .w-95 .f5 .tc .pl4 .overlay} +:::: {.slideover--l .three-quarters .auto-collapse-10} **Welcome to {{< fa square-poll-vertical >}} Analytics** -::: {.f6} -Here, you can find executive summaries, track information on models, findings, and more. For example: +Here, you can find executive summaries, track information on models, findings, and more. + +For example: 1. Click **Findings** to review reports on findings. 3. Click into any widget to review the findings reported by that widget. -::: When you're done, click [{{< fa chevron-right >}}]() to continue. diff --git a/site/training/validator-fundamentals/running-data-quality-tests.qmd b/site/training/validator-fundamentals/running-data-quality-tests.qmd index 9d66c3db25..3c95a1139f 100644 --- a/site/training/validator-fundamentals/running-data-quality-tests.qmd +++ b/site/training/validator-fundamentals/running-data-quality-tests.qmd @@ -16,6 +16,8 @@ format: view-distance: 2 logo: /validmind.png footer: "{{< var validmind.training >}} | [Home {{< fa person-walking-dashed-line-arrow-right >}}](/training/training.qmd)" + revealjs-plugins: + - slideover html: # Change this to the file name prepended by a _ to get around the global HTML output settings required by _metadata.yml output-file: _running-data-quality-tests.html @@ -138,50 +140,42 @@ Our series of four introductory notebooks for model validators include sample co
::: {.f4 .pl3 .pr3 .embed} -In this second module, we'll run through **2 — Start the model validation process** together. +In this second module, we'll run through **2 — Start the model validation process** together. ::: ::: + :::: Let's continue our journey with **2 — Start the model validation process** on the next page. {{< fa hand-point-right >}} ## {background-iframe="/notebooks/EXECUTED/model_validation/2-start_validation_process.html" background-interactive="yes" data-preload="yes"} -:::: {.absolute bottom=15 left=0 right=50 .w-100 .f5 .tc .pl4 .pr4 .overlay} +:::: {.slideover--r .three-quarters} **2 — Start the model validation process** -::: {.f6} During this course, we'll run through these notebooks together, and at the end of your learning journey you'll have a fully supported sample validation report ready for review. -::: - For now, **scroll through this notebook** to explore. When you are done, click [{{< fa chevron-right >}}]() to continue. :::: - # Explore ValidMind tests {background-color="#083E44" background-image="/training/assets/home-hero.svg"} ## {background-iframe="/developer/model-testing/test-descriptions.html" background-interactive="true" data-preload="yes"} -::: footer -:::: {.absolute bottom=0 left=50 right=50 .w-95 .f4 .tc .pl4 .overlay} +:::: {.slideover--l .three-quarters .auto-collapse-5} **{{< var vm.product >}} test repository** -::: {.f5} {{< var vm.product >}} provides a wealth out-of-the-box of tests to help you ensure that your model is being built appropriately. In this module, you'll become familiar with the individual tests available in {{< var vm.product >}}, as well as how to run them and change parameters as necessary. -::: - For now, **scroll through these test descriptions** to explore. When you're done, click [{{< fa chevron-right >}}]() to continue. :::: -::: ## Get your code snippet @@ -210,7 +204,7 @@ For now, **scroll through these test descriptions** to explore. When you're done ::: {.f5} {{< var vm.product >}} generates a unique *code snippet* for each registered model to connect with your validation environment: -1. From the **{{< fa cubes >}} Inventory**, select the name of your model to open up the model details page. +1. Select the name of your model you registered for this course to open up the model details page. 2. On the left sidebar that appears for your model, click **Getting Started**. 3. Locate the code snippet and click **Copy snippet to clipboard**. @@ -231,67 +225,55 @@ Make sure you're logged in and have refreshed the page in a Chromium-based web b ## {background-iframe="/notebooks/EXECUTED/model_validation/2-start_validation_process.html#initialize-the-validmind-library" data-preload="yes"} -:::: {.absolute bottom=15 .w-100 .f5 .tc .pl4 .overlay} +:::: {.slideover--r .three-quarters} **Connect to your model** -::: {.f6} With your code snippet copied to your clipboard: 1. Open **2 — Start the model validation process**: [{{< fa square-arrow-up-right >}} JupyterHub]({{< var url.jupyterhub >}}/hub/user-redirect/lab/tree/tutorials/model_validation/2-start_validation_process.ipynb){target="_blank"} 2. Run the cell under the **Setting up** section. -::: - When you're done, return to this page and click [{{< fa chevron-right >}}]() to continue. :::: ## {background-iframe="/notebooks/EXECUTED/model_validation/2-start_validation_process.html#load-the-sample-dataset" data-preload="yes"} -:::: {.absolute bottom=15 .w-100 .f5 .tc .pl4 .overlay} +:::: {.slideover--r .three-quarters} **Load the sample dataset** -::: {.f6} After you've successfully initialized the {{< var validmind.developer >}}, let's import the sample dataset that was used to develop the dummy champion model: 1. Continue with **2 — Start the model validation process**: [{{< fa square-arrow-up-right >}} JupyterHub]({{< var url.jupyterhub >}}/hub/user-redirect/lab/tree/tutorials/model_validation/2-start_validation_process.ipynb){target="_blank"} 2. Run the cell under the **Load the sample dataset** section. -::: - When you're done, return to this page and click [{{< fa chevron-right >}}]() to continue. :::: ## {background-iframe="/notebooks/EXECUTED/model_validation/2-start_validation_process.html#identify-qualitative-tests" data-preload="yes"} -:::: {.absolute bottom=15 .w-100 .f5 .tc .pl4 .overlay} +:::: {.slideover--r .three-quarters} **Identify qualitative tests** -::: {.f6} Next, we'll use the [`list_tests()` function](/notebooks/EXECUTED/model_validation/1-set_up_validmind_for_validation.ipynb#explore-available-tests){target="_blank"} to pinpoint tests we want to run: 1. Continue with **2 — Start the model validation process**: [{{< fa square-arrow-up-right >}} JupyterHub]({{< var url.jupyterhub >}}/hub/user-redirect/lab/tree/tutorials/model_validation/2-start_validation_process.ipynb){target="_blank"} 2. Run all the cells under the Verifying data quality adjustments section: **Identify qualitative tests** -::: - When you're done, return to this page and click [{{< fa chevron-right >}}]() to continue. :::: ## {background-iframe="/notebooks/EXECUTED/model_validation/2-start_validation_process.html#initialize-the-validmind-datasets" data-preload="yes"} -:::: {.absolute bottom=15 .w-100 .f5 .tc .pl4 .overlay} +:::: {.slideover--r .three-quarters} **Initialize {{< var vm.product >}} datasets** -::: {.f6} Then, we'll use the [`init_dataset()` function](/validmind/validmind.qmd#init_dataset){target="_blank"} to connect the sample data with a {{< var vm.product >}} `Dataset` object in preparation for running tests: 1. Continue with **2 — Start the model validation process**: [{{< fa square-arrow-up-right >}} JupyterHub]({{< var url.jupyterhub >}}/hub/user-redirect/lab/tree/tutorials/model_validation/2-start_validation_process.ipynb){target="_blank"} 2. Run the following cell in the Verifying data quality adjustments section: **Initialize the {{< var vm.product >}} datasets** -::: - When you're done, return to this page and click [{{< fa chevron-right >}}]() to continue. :::: @@ -303,34 +285,28 @@ When you're done, return to this page and click [{{< fa chevron-right >}}]() to ## {background-iframe="/notebooks/EXECUTED/model_validation/2-start_validation_process.html#run-data-quality-tests" data-preload="yes"} -:::: {.absolute bottom=15 .w-100 .f5 .tc .pl4 .overlay} +:::: {.slideover--r .three-quarters} **Run data quality tests** -::: {.f6} You run individual tests by calling the [`run_test()` function](/validmind/validmind/tests.qmd#run_test){target="_blank"} provided by the `validmind.tests` module: 1. Continue with **2 — Start the model validation process**: [{{< fa square-arrow-up-right >}} JupyterHub]({{< var url.jupyterhub >}}/hub/user-redirect/lab/tree/tutorials/model_validation/2-start_validation_process.ipynb){target="_blank"} 2. Run all the cells under the Verifying data quality adjustments section: **Run data quality tests** -::: - When you're done, return to this page and click [{{< fa chevron-right >}}]() to continue. :::: ## {background-iframe="/notebooks/EXECUTED/model_validation/2-start_validation_process.html#remove-highly-correlated-features" data-preload="yes"} -:::: {.absolute bottom=15 .w-100 .f5 .tc .pl4 .overlay} +:::: {.slideover--r .three-quarters} **Remove highly correlated features** -::: {.f6} You can utilize the output from a ValidMind test for further use, for example, if you want to remove highly correlated features: 1. Continue with **2 — Start the model validation process**: [{{< fa square-arrow-up-right >}} JupyterHub]({{< var url.jupyterhub >}}/hub/user-redirect/lab/tree/tutorials/model_validation/2-start_validation_process.ipynb){target="_blank"} 2. Run all the cells under the Verifying data quality adjustments section: **Remove highly correlated features** -::: - When you're done, return to this page and click [{{< fa chevron-right >}}]() to continue. :::: @@ -365,15 +341,13 @@ Every test result returned by the `run_test()` function has a `.log()` method th ## {background-iframe="/notebooks/EXECUTED/model_validation/2-start_validation_process.html#configure-and-run-comparison-tests" data-preload="yes"} -:::: {.absolute bottom=15 .w-100 .f5 .tc .pl4 .overlay} +:::: {.slideover--r .three-quarters} **Configure and run comparison tests** -::: {.f6} You can leverage the {{< var validmind.developer >}} to easily run comparison tests, between both datasets and models. Here, we compare the original raw dataset and the final preprocessed dataset, then log the results to the {{< var validmind.platform >}}: 1. Continue with **2 — Start the model validation process**: [{{< fa square-arrow-up-right >}} JupyterHub]({{< var url.jupyterhub >}}/hub/user-redirect/lab/tree/tutorials/model_validation/2-start_validation_process.ipynb){target="_blank"} 2. Run all the cells under the Documenting test results section: **Configure and run comparison tests** -::: When you're done, return to this page and click [{{< fa chevron-right >}}]() to continue. @@ -381,17 +355,14 @@ When you're done, return to this page and click [{{< fa chevron-right >}}]() to ## {background-iframe="/notebooks/EXECUTED/model_validation/2-start_validation_process.html#log-tests-with-unique-identifiers" data-preload="yes"} -:::: {.absolute bottom=15 .w-100 .f5 .tc .pl4 .overlay} +:::: {.slideover--r .three-quarters} **Log tests with unique identifiers** -::: {.f6} When running individual tests, you can use a custom `result_id` to tag the individual result with a unique identifier: 1. Continue with **2 — Start the model validation process**: [{{< fa square-arrow-up-right >}} JupyterHub]({{< var url.jupyterhub >}}/hub/user-redirect/lab/tree/tutorials/model_validation/2-start_validation_process.ipynb){target="_blank"} 2. Run the cell under the following Documenting test results section: **Log tests with unique identifiers**. -::: - When you're done, return to this page and click [{{< fa chevron-right >}}]() to continue. :::: @@ -446,39 +417,39 @@ While the example below focuses on a specific test result, you can follow the sa ::: ::: -:::: +:::: ## {background-iframe="https://app.prod.validmind.ai/model-inventory/" background-interactive="true" data-preload="yes"} -:::: {.absolute bottom=15 .w-100 .f5 .tc .pl4 .overlay} +:::: {.slideover--b .auto-collapse-10} +::: {.tc} **Link validator evidence** - -::: {.f6} -Within your **{{< fa shield >}} Validation Report**: 2.2.1. Data Quality — **ValidMind Data Validation Class Imbalance** {{< fa chevron-right >}} **Link Evidence to Report** - ::: +1. Select the name of your model you registered for this course to open up the model details page. +2. In the left sidebar that appears for your model, click **{{< fa shield >}} Validation Report**. +3. Locate the Data Preparation section and click on **2.2.1. Data Quality** to expand that section. +4. Under the Class Imbalance Assessment section, locate Validator Evidence then click **Link Evidence to Report**. +5. Select the Class Imbalance test results we logged: **ValidMind Data Validation Class Imbalance** +6. Click **Update Linked Evidence** to add the test results to the validation report. + When you're done, click [{{< fa chevron-right >}}]() to continue. :::: - # Prepare datasets for model evaluation {background-color="#083E44" background-image="/training/assets/home-hero.svg"} ## {background-iframe="/notebooks/EXECUTED/model_validation/2-start_validation_process.html#split-the-preprocessed-dataset" data-preload="yes"} -:::: {.absolute bottom=15 .w-100 .f5 .tc .pl4 .overlay} +:::: {.slideover--r .three-quarters} **Split the preprocessed dataset** -::: {.f6} So far, we've rebalanced our raw dataset and used the results of {{< var vm.product >}} tests to additionally remove highly correlated features from our dataset. Next, let's now spilt our dataset into train and test in preparation for model evaluation testing: 1. Continue with **2 — Start the model validation process**: [{{< fa square-arrow-up-right >}} JupyterHub]({{< var url.jupyterhub >}}/hub/user-redirect/lab/tree/tutorials/model_validation/2-start_validation_process.ipynb){target="_blank"} 2. Run all the cells under the **Split the preprocessed dataset** section. -::: - When you're done, return to this page and click [{{< fa chevron-right >}}]() to continue. :::: diff --git a/site/training/validator-fundamentals/using-validmind-for-model-validation.qmd b/site/training/validator-fundamentals/using-validmind-for-model-validation.qmd index 95aaa27c63..729c64786a 100644 --- a/site/training/validator-fundamentals/using-validmind-for-model-validation.qmd +++ b/site/training/validator-fundamentals/using-validmind-for-model-validation.qmd @@ -16,6 +16,8 @@ format: view-distance: 2 logo: /validmind.png footer: "{{< var validmind.training >}} | [Home {{< fa person-walking-dashed-line-arrow-right >}}](/training/training.qmd)" + revealjs-plugins: + - slideover html: # Change this to the file name prepended by a _ to get around the global HTML output settings required by _metadata.yml output-file: _using-validmind-for-model-validation.html @@ -141,14 +143,12 @@ In this first module, we'll run through **1 — Set up the {{< var validmind.dev Let's start our journey with **1 — Set up the {{< var validmind.developer >}} for validation** on the next page. {{< fa hand-point-right >}} -## {background-iframe="/notebooks/EXECUTED/model_validation/1-set_up_validmind_for_validation.html" background-interactive="yes" data-preload="yes"} +## {background-iframe="/notebooks/EXECUTED/model_validation/1-set_up_validmind_for_validation.html" background-interactive="yes" data-preload="yes"} -:::: {.absolute bottom=15 left=0 right=50 .w-100 .f5 .tc .pl4 .pr4 .overlay} +:::: {.slideover--r .three-quarters} **1 — Set up the {{< var validmind.developer >}} for validation** -::: {.f6} During this course, we'll run through these notebooks together, and at the end of your learning journey you'll have a fully supported sample validation report ready for review. -::: For now, **scroll through this notebook** to explore. When you are done, click [{{< fa chevron-right >}}]() to continue. @@ -160,99 +160,74 @@ For now, **scroll through this notebook** to explore. When you are done, click [ ## {background-iframe="https://app.prod.validmind.ai" background-interactive="true" data-preload="yes"} -::: {.fr .f5 .nr5 .pa5 .overlay} +:::: {.slideover--r} **Welcome to the {{< var validmind.platform >}}** From here, you can: -- Keep track of your models in the
customizable inventory ... -- Review model documentation
submitted by model developers ... -- Assess the compliance of models by
logging findings and test results as
evidence on validation reports ... -- View analytics on your models and findings,
and create custom reports ... +- Keep track of your models in the customizable inventory ... +- Review model documentation submitted by model developers ... +- Assess the compliance of models by logging findings and test results as evidence on validation reports ... +- View analytics on your models and findings, and create custom reports ... - ... and much more! -::: {.f6 .pl3 .pr3 .embed} +::: {.embed} **Can't load the {{< var validmind.platform >}}?** -Make sure you're logged in and have refreshed
the page in a Chromium-based browser. +Make sure you're logged in and have refreshed the page in a Chromium-based browser. ::: -When you're done navigating around, -
click [{{< fa chevron-right >}}]() to continue. +When you're done navigating around, click [{{< fa chevron-right >}}]() to continue. -::: +:::: ## {background-iframe="https://app.prod.validmind.ai/model-inventory" background-interactive="true" data-preload="yes"} -:::: {.fr .f5 .mv5 .nr5 .pa4 .overlay} +:::: {.slideover--r} **Welcome to the {{< fa cubes >}} Inventory** -Use the model inventory to track
-comprehensive details for all your
-models throughout the model lifecycle. - -The model inventory is customizable
-and extensible, with a layout that
-can be configured to suit your needs. - -::: {.f6 .pl3 .pr3 .embed} -In a usual model lifecycle,
-a champion model will have been
-independently registered in your
-model inventory and submitted to
-you for validation. - -For this training course,
-we'll have you register a dummy model
-via the **{{< fa plus >}} Register Model** modal
-and assign yourself as the validator
-to familiarize you with the
-{{< var validmind.platform >}} interface. +Use the model inventory to track comprehensive details for all your models throughout the model lifecycle. The model inventory is customizable and extensible, with a layout that can be configured to suit your needs. + +::: {.embed} +In a usual model lifecycle, a champion model will have been independently registered in your model inventory and submitted to you for validation. + +For this training course, we'll have you register a dummy model via the **{{< fa plus >}} Register Model** modal and assign yourself as the validator to familiarize you with the {{< var validmind.platform >}} interface. ::: -**Let's register a model together** for use
-with validation on the next page. {{< fa hand-point-right >}} +**Let's register a model together** for use with validation on the next page. {{< fa hand-point-right >}} :::: ## {background-iframe="https://app.prod.validmind.ai/model-inventory/?register=open" background-interactive="true" data-preload="yes"} -:::: {.fr .f5 .mv5 .nr5 .pa4 .overlay} -**Register a binary
classification model** - -1. Select the option
-for a new model: +:::: {.slideover--r .three-quarters .auto-collapse-10} +**Register a binary classification model** -::: {.f6 .nt2 .pl2} +1. Select the option for a new model: - **Documentation template** —
`Binary classification` -- **Use case** —
`Attrition/Churn Management` - - You can fill in other options
according to your preference. -::: - -2. Click **{{< fa plus >}} Register Model** to
-add the model to your
-inventory. +- **Use case** —
`Attrition/Churn Management`

+ You can fill in other options according to your preference. +2. Click **{{< fa plus >}} Register Model** to add the model to your inventory. -When you're done,
click [{{< fa chevron-right >}}]() to continue. +When you're done, click [{{< fa chevron-right >}}]() to continue. :::: ## {background-iframe="https://app.prod.validmind.ai/model-inventory" background-interactive="true" data-preload="yes"} -:::: {.absolute bottom=15 left=0 right=50 .w-100 .f5 .tc .pl4 .pr4 .overlay} +:::: {.slideover--b .auto-collapse-10} +::: {.tc} **Assign validator credentials** -::: {.f6} +::: + In order to log tests as a validator instead of as a developer, we'll need to adjust your **model stakeholder** permissions: -1. From the **{{< fa cubes >}} Inventory**, select the name the model you registered to open up the model details page. +1. Select the name of your model you registered for this course to open up the model details page. 2. Remove yourself as a model owner by clicking on the **[owners]{.smallcaps}** tile, then clicking on the **x** next to your name. Click **Save** to apply your changes to that role. 3. Remove yourself as a developer by clicking on the **[developers]{.smallcaps}** tile, then clicking on the **x** next to your name. Click **Save** to apply your changes to that role. 4. Add yourself as a validator by clicking on the **[validators]{.smallcaps}** tile, and selecting your name from the drop-down menu. Click **Save** to apply your changes to that role. -::: - When you're done, click [{{< fa chevron-right >}}]() to continue. :::: @@ -286,7 +261,7 @@ When you're done, click [{{< fa chevron-right >}}]() to continue. ::: {.f5} {{< var vm.product >}} generates a unique *code snippet* for each registered model to connect with your validation environment: -1. From the **{{< fa cubes >}} Inventory**, select the name of your model to open up the model details page. +1. Select the name of your model you registered for this course to open up the model details page. 2. On the left sidebar that appears for your model, click **Getting Started**. 3. Locate the code snippet and click **Copy snippet to clipboard**. @@ -307,16 +282,15 @@ Make sure you're logged in and have refreshed the page in a Chromium-based web b ## {background-iframe="/notebooks/EXECUTED/model_validation/1-set_up_validmind_for_validation.html#install-the-validmind-library" data-preload="yes"} -:::: {.absolute bottom=15 .w-100 .f5 .tc .pl4 .overlay} +:::: {.slideover--r .three-quarters} **Install & initialize the {{< var validmind.developer >}}** -::: {.f6} With your code snippet copied to your clipboard: 1. Open **1 — Set up the {{< var validmind.developer >}} for validation**: [{{< fa square-arrow-up-right >}} JupyterHub]({{< var url.jupyterhub >}}/hub/user-redirect/lab/tree/tutorials/model_validation/1-set_up_validmind_for_validation.ipynb){target="_blank"} -2. Run all the cells under the Setting up sections: **Install the {{< var validmind.developer >}}** / **Initialize the {{< var validmind.developer >}}** - -::: +2. Run all the cells under the Setting up sections: + - **Install the {{< var validmind.developer >}}** + - **Initialize the {{< var validmind.developer >}}** When you're done, return to this page and click [{{< fa chevron-right >}}]() to continue. @@ -326,35 +300,31 @@ When you're done, return to this page and click [{{< fa chevron-right >}}]() to ## {background-iframe="/notebooks/EXECUTED/model_validation/1-set_up_validmind_for_validation.html#preview-the-validation-report-template" data-preload="yes"} -:::: {.absolute bottom=15 .w-100 .f5 .tc .pl4 .overlay} +:::: {.slideover--r .three-quarters} **Preview the validation report template** -::: {.f6} You can preview your model's validation report template right from the {{< var validmind.developer >}}: 1. Continue with **1 — Set up the {{< var validmind.developer >}} for validation**: [{{< fa square-arrow-up-right >}} JupyterHub]({{< var url.jupyterhub >}}/hub/user-redirect/lab/tree/tutorials/model_validation/1-set_up_validmind_for_validation.ipynb){target="_blank"} 2. Run all the cells in the sections under **Getting to know ValidMind**. -::: - When you're done, return to this page and click [{{< fa chevron-right >}}]() to continue. :::: ## {background-iframe="https://app.prod.validmind.ai/model-inventory" background-interactive="true" data-preload="yes"} -:::: {.absolute bottom=0 left=50 right=50 .w-95 .f5 .tc .pl4 .overlay} +:::: {.slideover--b .auto-collapse-10} +::: {.tc} **Verify the report template** +::: -::: {.f6} Once you've called `preview_template()`: -1. From the model inventory, select the name of your model to open up the model details page. +1. Select the name of your model you registered for this course to open up the model details page. 2. On the left sidebar that appears for your model, click **{{< fa shield >}} Validation Report**. 3. Note how the structure of the validation report reflects the previewed template. -::: - When you're done taking a look around, click [{{< fa chevron-right >}}]() to continue. :::: @@ -382,41 +352,30 @@ Try it **live** on the next page. {{< fa hand-point-right >}} {{< include /guide/model-documentation/_review-model-documentation.qmd >}} - ::: :::: - - ## {background-iframe="https://app.prod.validmind.ai/model-inventory" background-interactive="true" data-preload="yes"} -:::: {.fr .f5 .mv6 .nr5 .pa4 .overlay} +:::: {.slideover--r .auto-collapse-10} **Explore sample model documentation** -In a usual model lifecycle, a champion model
-will have been submitted to you for validation
-with completed model documentation. +In a usual model lifecycle, a champion model will have been submitted to you for validation with completed model documentation. + +Here, review the empty sample model documentation for the model you registered earlier to familiarize you with what the structure of documentation could look like when presented to you for review: -Here, review the empty sample model
-documentation for the model you registered
-earlier to familiarize you with what the structure
-of documentation could look like when
-presented to you for review. +1. Select the name of your model you registered for this course to open up the model details page. +2. In the left sidebar that appears for your model, click **{{< fa book-open >}} Documentation**. -::: {.f6 .pl3 .pr3 .embed} -The structure of the model documentation reflects
-the documentation template applied to the model,
-just like the validation report template. +::: {.embed} +The structure of the model documentation reflects the documentation template applied to the model, just like the validation report template. ::: -When you're done taking a look
-around the model documentation,
-click [{{< fa chevron-right >}}]() to continue. +When you're done taking a look around the model documentation, click [{{< fa chevron-right >}}]() to continue. :::: - # In summary {background-color="#083E44" background-image="/training/assets/home-hero.svg"} ## {.scrollable .center} diff --git a/site/training/validator-fundamentals/validator-fundamentals.qmd b/site/training/validator-fundamentals/validator-fundamentals.qmd deleted file mode 100644 index 75feca543c..0000000000 --- a/site/training/validator-fundamentals/validator-fundamentals.qmd +++ /dev/null @@ -1,478 +0,0 @@ ---- -title: "Validator
Fundamentals" -subtitle: "docs.validmind.ai/training

_Click [{{< fa chevron-right >}}](#learning-objectives) to start_" -lightbox: true -search: false -format: - revealjs: - controls: true - controls-tutorial: true - controls-back-arrows: visible - transition: slide - theme: [default, ../assets/slides.scss] - slide-number: true - chalkboard: false - preview-links: auto - view-distance: 2 - logo: /validmind.png - footer: "{{< var validmind.training >}} | [Home {{< fa person-walking-dashed-line-arrow-right >}}](/training/training.qmd)" - html: - output-file: _validator-fundamentals.html - search: false -title-slide-attributes: - data-background-color: "#083E44" - data-background-image: "../assets/home-hero.svg" -skip_preview: true ---- - -# Learning objectives - -_"As a validator who is new to {{< var vm.product >}}, I want to learn how to review model documentation, prepare my validation report, track issues, and submit my report for approval."_ - - - -## In this course - -:::: {.columns .f2} -::: {.column width="55%"} -### PART 1 - -- [Review documentation](#review-documentation) -- [Analyze test results](#analyze-test-results) -- [Prepare validation reports](#prepare-validation-reports) -::: - -::: {.column width="45%"} -### PART 2 - -- [Track issue resolution](#track-issue-resolution) -- [Submit for review and approval](#submit-for-review-and-approval) -::: -:::: - -First, let's make sure you can log in to {{< var vm.product >}}. - -{{< include /training/assets/_revealjs-navigation.qmd >}} - -## Can you log in? - -To try out this course, you need to have been [onboarded](validator-fundamentals-register.qmd#register) onto {{< var validmind.training >}} with the [**{{< fa circle-check >}} Validator**]{.bubble} role. - -
Log in to check your access: - -::: {.tc} -[Log in to {{< var vm.product >}}](https://app.prod.validmind.ai/){.button target="_blank"} - -
-Be sure to return to this page afterwards. - -::: - - - -# You're in — let's show you around {{< var vm.product >}}. - -## {background-iframe="https://app.prod.validmind.ai" data-preload="yes"} - -:::: {.fr .f3 .mv5 .pa5 .overlay} -**This is the {{< var validmind.platform >}}.** - -From here, you have access to: - -- Model inventory -- Documentation & test results -- Validation reports -- Model findings -- Analytics - -Try it **live** on the next page. {{< fa hand-point-right >}} -:::: - -## {background-iframe="https://app.prod.validmind.ai/model-inventory" background-interactive="true" data-preload="yes"} - -:::: {.fr .f4 .mv5 .pa5 .overlay} -From the **{{< fa cubes >}} Inventory**,
you access: - -- Model documentation -- Validation reports -- Getting started for
developers - -Explore some models, then
click [{{< fa chevron-right >}}]() to continue. -::: - -## {background-iframe="https://app.prod.validmind.ai/model-findings" background-interactive="true" data-preload="yes"} - -:::: {.fr .f4 .mv6 .nr4 .pa4 .overlay} -From **{{< fa triangle-exclamation >}} Model Findings**,
you track: - -- Major or minor issues -- Deficiencies -- Model limitations -- Robustness concerns -- And more! - -Explore existing findings,
then click [{{< fa chevron-right >}}]() to continue. -:::: - -## {background-iframe="https://app.prod.validmind.ai/reports" background-interactive="true" data-preload="yes"} - -:::: {.fr .f4 .mv6 .nr4 .pa4 .overlay} -Under **{{< fa square-poll-vertical >}} Analytics**, you can
find: - -- Executive summaries -- Model tracking -- Risk assessments -- Compliance review -- Remediation tracking - -Explore existing reports,
then click [{{< fa chevron-right >}}]() to continue. -:::: - -# PART 1 {background-color="#083E44" background-image="/assets/img/solutions-hero.png"} - -# Review documentation {background-color="#083E44" background-image="/training/assets/home-hero.svg"} - -## {.scrollable} - -:::: {.columns} -::: {.column width="30%" .pr4 .f2} - - -Evaluate the conceptual soundness, data preparation, model development, and ongoing monitoring and governance plans for the model. - -::: {.tc} -[Learn more...](/guide/model-validation/review-model-documentation.qmd){.button target="_blank"} -::: - -::: - -::: {.column width="70%" .bl .pl4 .f3} -### Review model documentation - -{{< include /guide/model-documentation/_model-documentation-overview.qmd >}} - -{{< include /guide/model-documentation/_review-model-documentation.qmd >}} - - -::: -:::: - -Try it **live** on the next page. {{< fa hand-point-right >}} - -## {background-iframe="https://app.prod.validmind.ai/model-inventory" background-interactive="true" data-preload="yes"} - -:::: {.absolute bottom=15 .w-100 .f4 .tc .pl4 .pr4 .overlay} -Review the documentation for the **[Quickstart] Customer Churn Model**. - -::: {.f5 .nt2} -When you are done, click [{{< fa chevron-right >}}]() to continue. -::: -:::: - -## {.scrollable} - -:::: {.columns} -::: {.column width="30%" .pr4 .f2} -Have a question about the model? Collaborate with your developer right in the model documentation. - -::: {.tc} -[Learn more ...](/guide/model-documentation/collaborate-with-others.qmd){.button target="_blank"} -::: - -
Try it **live** on the next page. {{< fa hand-point-right >}} - -::: - -::: {.column width="70%" .bl .pl4 .f3} -::: {.f5 .nt2} -::: - -{{< include /guide/model-documentation/_collaborate-with-others-activity.qmd >}} - -::: {.panel-tabset} - -{{< include /guide/model-documentation/_collaborate-with-others-comments.qmd >}} - -::: - -::: - -:::: - -## {background-iframe="https://app.prod.validmind.ai//model-inventory" background-interactive="true" data-preload="yes"} - -:::: {.absolute bottom=15 .w-100 .f4 .tc .pl4 .pr4 .overlay} -In the documentation, post a comment, reply to it, and then resolve the comment thread. Review your comments in the **Recent Activity** feed on the front page. - -::: {.f5 .nt2} -When you are done, click [{{< fa chevron-right >}}]() to continue. -::: -:::: - -# Analyze test results {background-color="#083E44" background-image="/training/assets/home-hero.svg"} - -## {.scrollable} - -:::: {.columns} -::: {.column width="30%" .pr4 .f2} -Locate the test results in the documentation, review the data, and identify issues with the model. - -::: {.tc} -[Learn more ...](/guide/model-validation/review-model-documentation.qmd){.button target="_blank"} -::: - -::: - -::: {.column width="70%" .bl .pl4 .f3} - -{{< include /guide/model-documentation/_review-model-documentation.qmd >}} - -1. Review the sections: - - - 2. Data Preparation - - 3. Model Development - -::: - -:::: - -
Try it **live** on the next page. {{< fa hand-point-right >}} - -## {background-iframe="https://app.prod.validmind.ai/model-inventory" background-interactive="true" data-preload="yes"} - -:::: {.absolute bottom=15 .w-100 .f4 .tc .pl4 .pr4 .overlay} -In the documentation, review **2. Data Preparation** and **3. Model Development**. - -::: {.f5 .nt2} -When you are done, click [{{< fa chevron-right >}}]() to continue. -::: -:::: - -# Prepare validation reports {background-color="#083E44" background-image="/training/assets/home-hero.svg"} - -## {.scrollable} - -:::: {.columns} -::: {.column width="30%" .pr4 .f2} -Based on your review of the documentation, add some findings for your validation report. - -::: {.tc} -[Learn more ...](/guide/model-validation/add-manage-model-findings.qmd){.button target="_blank"} -::: - -
Try it **live** on the next page. {{< fa hand-point-right >}} -::: - -::: {.column width="70%" .bl .pl4 .f3} -### Add findings - -As part of the validation process, you may find issues with the model documentation that must be resolved. To indicate that there is an issue and to track the resolution later on, you add a new finding. - -- Findings are logged with your model documentation. -- You can add findings both on the main documentation overview page and in each documentation section. - -{{< include /guide/model-validation/_add-model-findings.qmd >}} - -::: -:::: - -## {background-iframe="https://app.prod.validmind.ai/model-inventory" background-interactive="true" data-preload="yes"} - -:::: {.absolute bottom=15 .w-100 .f4 .tc .pl4 .pr4 .overlay} -Add some findings for your validation report. - -::: {.f5 .nt2} -When you are done, click [{{< fa chevron-right >}}]() to continue. -::: -:::: - -## {.scrollable} - -:::: {.columns} -::: {.column width="30%" .pr4 .f2} -Link your findings and the evidence from the test results you analyzed to the validation report. - -::: {.f5 .nt2 .pl2 .mb4} -(Scroll down for the full instructions.) -::: - -::: {.tc} -[Learn more ...](/guide/model-validation/assess-compliance.qmd){.button target="_blank"} -::: - -
Try it **live** on the next page. {{< fa hand-point-right >}} -::: - -::: {.column width="70%" .bl .pl4 .f3} -::: {.panel-tabset} -### Link finding - -{{< include /guide/model-validation/_assess-compliance-link-finding.qmd >}} - -### Link evidence - -{{< include /guide/model-validation/_assess-compliance-developer-evidence.qmd >}} - -::: - -::: -:::: - -## {background-iframe="https://app.prod.validmind.ai/model-inventory" background-interactive="true" data-preload="yes"} - -:::: {.absolute bottom=15 .w-100 .f4 .tc .pl4 .pr4 .overlay} -Link findings and link evidence to your validation report. - -::: {.f5 .nt2} -When you are done, click [{{< fa chevron-right >}}]() to continue. -::: -:::: - -## {.scrollable} - -:::: {.columns} -::: {.column width="30%" .pr4 .f2} -Based on the evidence you analyzed and your model, with your guidelines. - -::: {.f5 .nt2 .pl2 .mb4} -(Scroll down for the full instructions.) -::: - -::: {.tc} -[Learn more ...](/guide/model-validation/assess-compliance.qmd#provide-compliance-assessments){.button target="_blank"} -::: - -
Try it **live** on the next page. {{< fa hand-point-right >}} -::: - -::: {.column width="70%" .bl .pl4 .f4} - -### Assess compliance - -{{< include /guide/model-validation/_assess-compliance-assess.qmd >}} - -::: -:::: - -## {background-iframe="https://app.prod.validmind.ai/model-inventory" background-interactive="true" data-preload="yes"} - -:::: {.absolute bottom=15 .w-100 .f4 .tc .pl4 .pr4 .overlay} -Assess compliance for your validation report. - -::: {.f5 .nt2} -When you are done, click [{{< fa chevron-right >}}]() to continue. -::: -:::: - -# PART 2 {background-color="#083E44" background-image="/assets/img/solutions-hero.png"} - -# Track issue resolution {background-color="#083E44" background-image="/training/assets/home-hero.svg"} - -## {.scrollable} - -:::: {.columns} -::: {.column width="30%" .pr4 .f2} -As you prepare your report, review open or past due findings, close resolved ones, or add a mitigation plan. - -::: {.f5 .nt2 .pl2 .mb4} -(Scroll down for the full instructions.) -::: - -::: {.tc} -[Learn more ...](/guide/model-validation/add-manage-model-findings.qmd#track-issue-resolution){.button target="_blank"} -::: - -
Try it **live** on the next page. {{< fa hand-point-right >}} -::: - -::: {.column width="70%" .bl .pl4 .f3} -### Track issue resolution - -{{< include /guide/model-validation/_track_issue_resolution.qmd >}} - -::: -:::: - -## {background-iframe="https://app.prod.validmind.ai/model-inventory" background-interactive="true" data-preload="yes"} - -:::: {.absolute bottom=15 .w-100 .f4 .tc .pl4 .pr4 .overlay} -To track issue resolution, review open or past due findings, close resolved ones, or add a mitigation plan. - -::: {.f5 .nt2} -When you are done, click [{{< fa chevron-right >}}]() to continue. -::: -:::: - -# Submit for review and approval {background-color="#083E44" background-image="/training/assets/home-hero.svg"} - -## {.scrollable} - -:::: {.columns} -::: {.column width="30%" .pr4 .f2} -When you’re ready, verify the approval workflow, and then submit your validation report for approval. - -::: {.f5 .nt2} -(Scroll down for the full instructions.) -::: - -::: {.tc} -[Learn more ...](/guide/model-documentation/submit-for-approval.qmd){.button target="_blank"} -::: - -
Try it **live** on the next page. {{< fa hand-point-right >}} -::: - -::: {.column width="70%" .bl .pl4 .f4} - -::: {.panel-tabset} -### Verify workflow - -Workflow states and transitions are configured by an administrator in advance, but you should verify that the expected people are included in the approval process. - -{{< include /guide/model-workflows/_model-workflows-see.qmd >}} - -### Submit for approval - -To transition through the approval workflow, all required workflow steps must be completed. For example, you cannot submit a validation report for review until the model documentation itself has been submitted. - -{{< include /guide/model-workflows/_model-workflows-transition.qmd >}} -::: - -::: -:::: - -## {background-iframe="https://app.prod.validmind.ai/model-inventory" background-interactive="true" data-preload="yes"} - -:::: {.absolute bottom=15 .w-100 .f4 .tc .pl4 .pr4 .overlay} -Verify the workflow, then submit your validation report for review & approval. - -::: {.f5 .nt2} -When you are done, click [{{< fa chevron-right >}}]() to continue. -::: -:::: - -# About validation reports - -There is more that {{< var vm.product >}} can do to help you prepare validation reports, from using your own template to configuring the full approval workflow. - -::: {.tc} -[All model validation guides](/guide/guides.qmd#model-validation){.button target="_blank"} -::: -
-Or, find your next learning resource on [{{< var validmind.training >}}](/training/training.qmd). - -