From a79a86227b43093862b43ad3d81455400994c5c9 Mon Sep 17 00:00:00 2001 From: Beck <164545837+validbeck@users.noreply.github.com> Date: Wed, 28 May 2025 13:40:39 -0700 Subject: [PATCH 01/15] Developer Fundamentals 1 - slideovers --- .../using-validmind-for-model-development.qmd | 83 +++++++------------ 1 file changed, 30 insertions(+), 53 deletions(-) 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..1e995f7e95 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,74 @@ 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. +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. +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. +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. +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. -::: + You can fill in other options according to your preference. -2. Click **{{< fa plus >}} Register Model** to
-add the model to your
-inventory. +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. :::: @@ -281,17 +265,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 +283,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 +316,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 .three-quarters .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. 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. :::: From 1d42fdf4c20e676d1635093f7aad7a7d35c36801 Mon Sep 17 00:00:00 2001 From: Beck <164545837+validbeck@users.noreply.github.com> Date: Wed, 28 May 2025 14:52:16 -0700 Subject: [PATCH 02/15] Fixed auto-collapse arrow directions --- .../nrichers/slideover/slideover.css | 37 +++- .../nrichers/slideover/slideover.js | 200 ++++-------------- 2 files changed, 76 insertions(+), 161 deletions(-) diff --git a/site/_extensions/nrichers/slideover/slideover.css b/site/_extensions/nrichers/slideover/slideover.css index 2539b6ec7e..7c9ec7805c 100644 --- a/site/_extensions/nrichers/slideover/slideover.css +++ b/site/_extensions/nrichers/slideover/slideover.css @@ -186,15 +186,13 @@ .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,15 +202,38 @@ .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); +/* Rotation logic: default (open), --active for closed */ +.slideover__content.slideover--r .slideover__toggle { + transform: rotate(180deg); /* Open: left arrow */ +} +.slideover__content.slideover--r .slideover__toggle--active { + transform: rotate(0deg); /* Closed: right arrow */ +} + +.slideover__content.slideover--l .slideover__toggle { + transform: rotate(0deg); /* Open: right arrow */ +} +.slideover__content.slideover--l .slideover__toggle--active { + transform: rotate(180deg); /* Closed: left arrow */ +} + +.slideover__content.slideover--t .slideover__toggle { + transform: rotate(0deg); /* Open: down arrow */ +} +.slideover__content.slideover--t .slideover__toggle--active { + transform: rotate(180deg); /* Closed: up arrow */ +} + +.slideover__content.slideover--b .slideover__toggle { + transform: rotate(180deg); /* Open: up arrow */ +} +.slideover__content.slideover--b .slideover__toggle--active { + transform: rotate(0deg); /* Closed: down arrow */ } .slideover__content-area { 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 From 8c20e184948196c55cd4db527830421db20b4755 Mon Sep 17 00:00:00 2001 From: Beck <164545837+validbeck@users.noreply.github.com> Date: Wed, 28 May 2025 15:10:31 -0700 Subject: [PATCH 03/15] Developer Fundamentals 2 - slideovers --- .../learning-to-run-tests.qmd | 93 +++++++------------ 1 file changed, 32 insertions(+), 61 deletions(-) diff --git a/site/training/developer-fundamentals/learning-to-run-tests.qmd b/site/training/developer-fundamentals/learning-to-run-tests.qmd index dfc280afcc..e91403aa57 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,20 +165,18 @@ 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} +::: {.tc} **{{< 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 @@ -230,16 +227,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 +243,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,34 +275,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#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**. -::: - 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#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**. -::: - When you're done, return to this page and click [{{< fa chevron-right >}}]() to continue. :::: @@ -345,15 +330,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**. -::: When you're done, return to this page and click [{{< fa chevron-right >}}]() to continue. @@ -361,17 +344,14 @@ 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**. -::: - When you're done, return to this page and click [{{< fa chevron-right >}}]() to continue. :::: @@ -419,13 +399,18 @@ 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} **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 model you connected to earlier. +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. @@ -475,15 +460,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**. -::: When you're done, return to this page and click [{{< fa chevron-right >}}]() to continue. @@ -491,57 +474,45 @@ 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**. -::: - 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#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**. -::: - 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#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**. -::: - 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} From ce4bd2fb88aa49e001329244d73501967f7f0e4f Mon Sep 17 00:00:00 2001 From: Beck <164545837+validbeck@users.noreply.github.com> Date: Wed, 28 May 2025 15:25:15 -0700 Subject: [PATCH 04/15] Developer Fundamentals 3 - slideovers --- .../implementing-custom-tests.qmd | 94 ++++++------------- 1 file changed, 29 insertions(+), 65 deletions(-) diff --git a/site/training/developer-fundamentals/implementing-custom-tests.qmd b/site/training/developer-fundamentals/implementing-custom-tests.qmd index e575d8d37d..bf9543d352 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. :::: @@ -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} @@ -454,30 +433,30 @@ With the custom test results logged, let's head to the model we connected to at ## {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} **Insert custom test-driven blocks** -::: {.f6} -3.2 Model Evaluation — `my_custom_tests.ConfusionMatrix:test_dataset_normalized` / `my_test_provider.ConfusionMatrix` - -::: +1. Select the model you connected to earlier. +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. @@ -524,17 +503,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 +519,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 +576,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. :::: From ca87143b1dcbd90f10387c0befe07983abed1936 Mon Sep 17 00:00:00 2001 From: Beck <164545837+validbeck@users.noreply.github.com> Date: Wed, 28 May 2025 15:51:42 -0700 Subject: [PATCH 05/15] Developer Fundamentals 4 - slideovers --- .../finalizing-model-documentation.qmd | 66 +++++++++---------- .../learning-to-run-tests.qmd | 17 ++--- .../using-validmind-for-model-development.qmd | 8 +-- 3 files changed, 43 insertions(+), 48 deletions(-) diff --git a/site/training/developer-fundamentals/finalizing-model-documentation.qmd b/site/training/developer-fundamentals/finalizing-model-documentation.qmd index 58149929bd..1630899757 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. @@ -222,14 +223,15 @@ 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 +280,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 +326,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 +368,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 +385,18 @@ 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: 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/learning-to-run-tests.qmd b/site/training/developer-fundamentals/learning-to-run-tests.qmd index e91403aa57..835e2d0e44 100644 --- a/site/training/developer-fundamentals/learning-to-run-tests.qmd +++ b/site/training/developer-fundamentals/learning-to-run-tests.qmd @@ -165,19 +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"} -::: {.slideover--l .three-quarters .auto-collapse-5} -::: {.tc} +:::: {.slideover--l .three-quarters .auto-collapse-5} **{{< var vm.product >}} test repository** -::: - {{< 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 @@ -396,11 +393,12 @@ 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"} :::: {.slideover--b .auto-collapse-10} +::: {.tc} **Insert a test-driven block** +::: 1. Select the model you connected to earlier. 2. In the left sidebar that appears for your model, click **{{< fa book-open >}} Documentation**. @@ -416,7 +414,6 @@ 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} @@ -466,7 +463,7 @@ In this next example, we’ll focus on running the tests within the Model Develo 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. @@ -480,7 +477,7 @@ When you're done, return to this page and click [{{< fa chevron-right >}}]() to 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. @@ -493,7 +490,7 @@ When you're done, return to this page and click [{{< fa chevron-right >}}]() to 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. 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 1e995f7e95..87badceebd 100644 --- a/site/training/developer-fundamentals/using-validmind-for-model-development.qmd +++ b/site/training/developer-fundamentals/using-validmind-for-model-development.qmd @@ -158,7 +158,7 @@ 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"} -::: {.slideover--r} +:::: {.slideover--r} **Welcome to the {{< var validmind.platform >}}** From here, you can: @@ -177,11 +177,11 @@ Make sure you're logged in and have refreshed the page in a Chromium-based web b 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"} -::: {.slideover--r} +:::: {.slideover--r} **Welcome to the {{< fa cubes >}} Inventory** Use the model inventory to track comprehensive details for all your models throughout the model lifecycle. @@ -198,7 +198,7 @@ To start the documentation process, a model must already be registered in the mo ## {background-iframe="https://app.prod.validmind.ai/model-inventory/?register=open" background-interactive="true" data-preload="yes"} -::: {.slideover--r .three-quarters .auto-collapse-10} +:::: {.slideover--r .three-quarters .auto-collapse-10} **Register a binary classification model** 1. Select the option for a new model: From 6842d69663eb20a606ccf9d6f25f542991233390 Mon Sep 17 00:00:00 2001 From: Beck <164545837+validbeck@users.noreply.github.com> Date: Wed, 28 May 2025 16:07:53 -0700 Subject: [PATCH 06/15] Developer Fundamentals slideovers - proofreading --- .../finalizing-model-documentation.qmd | 1 + .../implementing-custom-tests.qmd | 4 +++- .../learning-to-run-tests.qmd | 13 +++++++------ .../using-validmind-for-model-development.qmd | 10 +++------- 4 files changed, 14 insertions(+), 14 deletions(-) diff --git a/site/training/developer-fundamentals/finalizing-model-documentation.qmd b/site/training/developer-fundamentals/finalizing-model-documentation.qmd index 1630899757..1a8dfed952 100644 --- a/site/training/developer-fundamentals/finalizing-model-documentation.qmd +++ b/site/training/developer-fundamentals/finalizing-model-documentation.qmd @@ -219,6 +219,7 @@ For example: ::: ::: + :::: ## {background-iframe="https://app.prod.validmind.ai/model-inventory" background-interactive="true" data-preload="yes"} diff --git a/site/training/developer-fundamentals/implementing-custom-tests.qmd b/site/training/developer-fundamentals/implementing-custom-tests.qmd index bf9543d352..a9a0f4f0a4 100644 --- a/site/training/developer-fundamentals/implementing-custom-tests.qmd +++ b/site/training/developer-fundamentals/implementing-custom-tests.qmd @@ -428,13 +428,15 @@ 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"} :::: {.slideover--b .auto-collapse-10} +::: {.tc} **Insert custom test-driven blocks** +::: 1. Select the model you connected to earlier. 2. In the left sidebar that appears for your model, click **{{< fa book-open >}} Documentation**. diff --git a/site/training/developer-fundamentals/learning-to-run-tests.qmd b/site/training/developer-fundamentals/learning-to-run-tests.qmd index 835e2d0e44..841de474f1 100644 --- a/site/training/developer-fundamentals/learning-to-run-tests.qmd +++ b/site/training/developer-fundamentals/learning-to-run-tests.qmd @@ -232,7 +232,7 @@ 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**. + - **Import sample dataset** When you're done, return to this page and click [{{< fa chevron-right >}}]() to continue. @@ -278,7 +278,7 @@ When you're done, return to this page and click [{{< fa chevron-right >}}]() to 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. @@ -292,7 +292,7 @@ When you're done, return to this page and click [{{< fa chevron-right >}}]() to 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. @@ -333,7 +333,7 @@ Every test result returned by the `run_test()` function has a `.log()` method th 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. @@ -347,7 +347,7 @@ When you're done, return to this page and click [{{< fa chevron-right >}}]() to 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. @@ -487,6 +487,7 @@ When you're done, return to this page and click [{{< fa chevron-right >}}]() to :::: {.slideover--r .three-quarters} **Assign predictions** + 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"} @@ -504,7 +505,7 @@ When you're done, return to this page and click [{{< fa chevron-right >}}]() to 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. 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 87badceebd..b5b2e25c21 100644 --- a/site/training/developer-fundamentals/using-validmind-for-model-development.qmd +++ b/site/training/developer-fundamentals/using-validmind-for-model-development.qmd @@ -184,9 +184,7 @@ When you're done navigating around, click [{{< fa chevron-right >}}]() to contin :::: {.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. @@ -203,10 +201,8 @@ To start the documentation process, a model must already be registered in the mo 1. Select the option for a new model: - **Documentation template** —
`Binary classification` -- **Use case** —
`Attrition/Churn Management` - +- **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. @@ -329,7 +325,7 @@ Try it **live** on the next page. {{< fa hand-point-right >}} 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 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. From 2384e96b9ef7a4a2f2c1aa1dcab104849f2d8bf4 Mon Sep 17 00:00:00 2001 From: Beck <164545837+validbeck@users.noreply.github.com> Date: Wed, 28 May 2025 16:10:14 -0700 Subject: [PATCH 07/15] Setup for Validator Fundamentals slideovers --- .../validator-fundamentals/developing-challenger-models.qmd | 2 ++ .../validator-fundamentals/finalizing-validation-reports.qmd | 2 ++ .../validator-fundamentals/running-data-quality-tests.qmd | 2 ++ .../using-validmind-for-model-validation.qmd | 2 ++ 4 files changed, 8 insertions(+) diff --git a/site/training/validator-fundamentals/developing-challenger-models.qmd b/site/training/validator-fundamentals/developing-challenger-models.qmd index c61eb49524..f5ad25bb5b 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 diff --git a/site/training/validator-fundamentals/finalizing-validation-reports.qmd b/site/training/validator-fundamentals/finalizing-validation-reports.qmd index 2d0afc88e4..cad6d2bbb3 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 diff --git a/site/training/validator-fundamentals/running-data-quality-tests.qmd b/site/training/validator-fundamentals/running-data-quality-tests.qmd index 9d66c3db25..eb7d975049 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 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..ca91731df5 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 From b78de8ecfbfac44b639e9b59ab2c031f20536cb1 Mon Sep 17 00:00:00 2001 From: Beck <164545837+validbeck@users.noreply.github.com> Date: Wed, 28 May 2025 16:23:12 -0700 Subject: [PATCH 08/15] Validation Fundamentals 1 - slideovers --- .../using-validmind-for-model-validation.qmd | 137 ++++++------------ 1 file changed, 48 insertions(+), 89 deletions(-) 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 ca91731df5..d8c6ecaaca 100644 --- a/site/training/validator-fundamentals/using-validmind-for-model-validation.qmd +++ b/site/training/validator-fundamentals/using-validmind-for-model-validation.qmd @@ -143,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. @@ -162,90 +160,69 @@ 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** +:::: {.slideover--r .three-quarters .auto-collapse-10} +**Register a binary classification model** -1. Select the option
-for a new model: - -::: {.f6 .nt2 .pl2} +1. Select the option for a new model: - **Documentation template** —
`Binary classification` -- **Use case** —
`Attrition/Churn Management` - +- **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. +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. @@ -253,8 +230,6 @@ In order to log tests as a validator instead of as a developer, we'll need to ad 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. :::: @@ -309,16 +284,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. @@ -328,35 +302,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 .three-quarters .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. 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. :::: @@ -384,41 +354,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} From 26935d3702dcb0afee57bd31c2cd2e5b1004bf67 Mon Sep 17 00:00:00 2001 From: Beck <164545837+validbeck@users.noreply.github.com> Date: Thu, 29 May 2025 11:02:04 -0700 Subject: [PATCH 09/15] Custom slideover CSS --- site/training/assets/validmind-slideover.css | 80 +++++++++++++++++++ .../running-data-quality-tests.qmd | 55 +++---------- 2 files changed, 92 insertions(+), 43 deletions(-) create mode 100644 site/training/assets/validmind-slideover.css 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/validator-fundamentals/running-data-quality-tests.qmd b/site/training/validator-fundamentals/running-data-quality-tests.qmd index eb7d975049..6978fe42ea 100644 --- a/site/training/validator-fundamentals/running-data-quality-tests.qmd +++ b/site/training/validator-fundamentals/running-data-quality-tests.qmd @@ -140,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 @@ -233,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. :::: @@ -305,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. :::: @@ -367,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. @@ -383,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. :::: From e96287df84b895fa72210eebbc51a463ac30f336 Mon Sep 17 00:00:00 2001 From: Beck <164545837+validbeck@users.noreply.github.com> Date: Thu, 29 May 2025 11:33:29 -0700 Subject: [PATCH 10/15] Pulling in latest slideover css --- .../nrichers/slideover/_extension.yml | 5 +- .../nrichers/slideover/custom-slideover.css | 80 ++++ .../nrichers/slideover/slideover.css | 410 ++++++++---------- .../training-templates/course-slides.qmd | 4 +- 4 files changed, 267 insertions(+), 232 deletions(-) create mode 100644 site/_extensions/nrichers/slideover/custom-slideover.css diff --git a/site/_extensions/nrichers/slideover/_extension.yml b/site/_extensions/nrichers/slideover/_extension.yml index a13648e26e..fe4de0016d 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.0 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 7c9ec7805c..44a9143844 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,29 +285,7 @@ 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: center; @@ -191,7 +293,6 @@ width: 24px; height: 24px; transition: transform 0.3s ease; - color: #083e44; cursor: pointer; position: absolute; top: 8px; @@ -207,7 +308,24 @@ stroke-width: 1px; } -/* Rotation logic: default (open), --active for closed */ +.slideover--r .slideover__toggle { + left: 8px; + right: auto; +} + +.slideover--l .slideover__toggle { + right: 8px; + left: auto; +} + +.slideover--t .slideover__toggle { + top: auto; + bottom: 8px; + right: 8px; + left: auto; +} + +/* Toggle rotation logic: default (open), --active for closed */ .slideover__content.slideover--r .slideover__toggle { transform: rotate(180deg); /* Open: left arrow */ } @@ -236,237 +354,73 @@ transform: rotate(0deg); /* Closed: down arrow */ } -.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__content-area strong { - color: #3E6C69; -} - -.slideover__content-area a { - color: #DE257E; - text-decoration: none; -} - -.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-area a:hover { - text-decoration: underline 2px solid #083E44; -} - -.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--b .slideover__header { - justify-content: flex-end; - padding-right: 16px; - margin: 0 -20px; - border-radius: 8px 8px 0 0; - background: transparent; -} - -.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; +} + +/* 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; } -.slideover__content-area em { +.slideover__content-area em, +.slideover__content-area i { 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/training/training-templates/course-slides.qmd b/site/training/training-templates/course-slides.qmd index 00722bce0b..9692bf9ef6 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`!** ::: From 6519040cafea366dce5a0aac6679c17d10557aa9 Mon Sep 17 00:00:00 2001 From: Beck <164545837+validbeck@users.noreply.github.com> Date: Thu, 29 May 2025 12:33:55 -0700 Subject: [PATCH 11/15] Validation Fundamentals - slideovers --- .../nrichers/slideover/slideover.css | 3 +- .../implementing-custom-tests.qmd | 2 +- .../learning-to-run-tests.qmd | 2 +- .../using-validmind-for-model-development.qmd | 4 +- .../developing-challenger-models.qmd | 82 +++++----------- .../finalizing-validation-reports.qmd | 98 +++++++++---------- .../running-data-quality-tests.qmd | 22 ++--- .../using-validmind-for-model-validation.qmd | 12 +-- 8 files changed, 97 insertions(+), 128 deletions(-) diff --git a/site/_extensions/nrichers/slideover/slideover.css b/site/_extensions/nrichers/slideover/slideover.css index 44a9143844..02611cfc36 100644 --- a/site/_extensions/nrichers/slideover/slideover.css +++ b/site/_extensions/nrichers/slideover/slideover.css @@ -399,8 +399,7 @@ q { font-weight: 700; } -.slideover__content-area em, -.slideover__content-area i { +.slideover__content-area em { font-style: italic; } diff --git a/site/training/developer-fundamentals/implementing-custom-tests.qmd b/site/training/developer-fundamentals/implementing-custom-tests.qmd index a9a0f4f0a4..693e59ae75 100644 --- a/site/training/developer-fundamentals/implementing-custom-tests.qmd +++ b/site/training/developer-fundamentals/implementing-custom-tests.qmd @@ -438,7 +438,7 @@ With the custom test results logged, let's head to the model we connected to at **Insert custom test-driven blocks** ::: -1. Select the model you connected to earlier. +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. diff --git a/site/training/developer-fundamentals/learning-to-run-tests.qmd b/site/training/developer-fundamentals/learning-to-run-tests.qmd index 841de474f1..634f940ae9 100644 --- a/site/training/developer-fundamentals/learning-to-run-tests.qmd +++ b/site/training/developer-fundamentals/learning-to-run-tests.qmd @@ -400,7 +400,7 @@ With the test results logged, let's head to the model we connected to at the beg **Insert a test-driven block** ::: -1. Select the model you connected to earlier. +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. 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 b5b2e25c21..fcd8f60ef6 100644 --- a/site/training/developer-fundamentals/using-validmind-for-model-development.qmd +++ b/site/training/developer-fundamentals/using-validmind-for-model-development.qmd @@ -318,14 +318,14 @@ 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"} -:::: {.slideover--b .three-quarters .auto-collapse-10} +:::: {.slideover--b .auto-collapse-10} ::: {.tc} **Verify the documentation template** ::: Once you've called `preview_template()`: -1. 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. diff --git a/site/training/validator-fundamentals/developing-challenger-models.qmd b/site/training/validator-fundamentals/developing-challenger-models.qmd index f5ad25bb5b..e9d4bc8938 100644 --- a/site/training/validator-fundamentals/developing-challenger-models.qmd +++ b/site/training/validator-fundamentals/developing-challenger-models.qmd @@ -185,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. :::: @@ -245,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. :::: @@ -317,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. :::: @@ -391,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. :::: @@ -466,48 +448,50 @@ 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. +7. Click **Save**. +8. Select the finding you just added to link to your validation report. +9. 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. :::: @@ -516,12 +500,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. @@ -568,17 +550,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. :::: @@ -606,34 +585,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: 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. :::: @@ -642,17 +615,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 cad6d2bbb3..bba1791678 100644 --- a/site/training/validator-fundamentals/finalizing-validation-reports.qmd +++ b/site/training/validator-fundamentals/finalizing-validation-reports.qmd @@ -192,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. :::: @@ -256,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. ::: @@ -314,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. ::: @@ -379,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. @@ -395,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 .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. @@ -450,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. @@ -501,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. :::: @@ -542,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. @@ -560,15 +562,13 @@ 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: 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 6978fe42ea..5fbfff0c3e 100644 --- a/site/training/validator-fundamentals/running-data-quality-tests.qmd +++ b/site/training/validator-fundamentals/running-data-quality-tests.qmd @@ -417,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 d8c6ecaaca..5f0a8965fc 100644 --- a/site/training/validator-fundamentals/using-validmind-for-model-validation.qmd +++ b/site/training/validator-fundamentals/using-validmind-for-model-validation.qmd @@ -167,7 +167,7 @@ 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 ... +- 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! @@ -208,7 +208,7 @@ For this training course, we'll have you register a dummy model via the **{{< fa 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. + 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. @@ -225,7 +225,7 @@ When you're done, click [{{< fa chevron-right >}}]() to continue. 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. @@ -263,7 +263,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**. @@ -316,14 +316,14 @@ When you're done, return to this page and click [{{< fa chevron-right >}}]() to ## {background-iframe="https://app.prod.validmind.ai/model-inventory" background-interactive="true" data-preload="yes"} -:::: {.slideover--b .three-quarters .auto-collapse-10} +:::: {.slideover--b .auto-collapse-10} ::: {.tc} **Verify the report template** ::: 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. From 85aeeecfe05f64307f4848f88a30eb5e69ff9566 Mon Sep 17 00:00:00 2001 From: Beck <164545837+validbeck@users.noreply.github.com> Date: Thu, 29 May 2025 12:40:01 -0700 Subject: [PATCH 12/15] Proofreading + removing old validator fundamentals --- .../implementing-custom-tests.qmd | 4 +- .../learning-to-run-tests.qmd | 2 +- .../using-validmind-for-model-development.qmd | 2 +- .../training-templates/course-slides.qmd | 2 +- .../developing-challenger-models.qmd | 4 +- .../running-data-quality-tests.qmd | 2 +- .../using-validmind-for-model-validation.qmd | 4 +- .../validator-fundamentals.qmd | 478 ------------------ 8 files changed, 9 insertions(+), 489 deletions(-) delete mode 100644 site/training/validator-fundamentals/validator-fundamentals.qmd diff --git a/site/training/developer-fundamentals/implementing-custom-tests.qmd b/site/training/developer-fundamentals/implementing-custom-tests.qmd index 693e59ae75..444dcb6a90 100644 --- a/site/training/developer-fundamentals/implementing-custom-tests.qmd +++ b/site/training/developer-fundamentals/implementing-custom-tests.qmd @@ -221,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**. @@ -491,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**. diff --git a/site/training/developer-fundamentals/learning-to-run-tests.qmd b/site/training/developer-fundamentals/learning-to-run-tests.qmd index 634f940ae9..60ea84a981 100644 --- a/site/training/developer-fundamentals/learning-to-run-tests.qmd +++ b/site/training/developer-fundamentals/learning-to-run-tests.qmd @@ -203,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**. 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 fcd8f60ef6..c6706415b3 100644 --- a/site/training/developer-fundamentals/using-validmind-for-model-development.qmd +++ b/site/training/developer-fundamentals/using-validmind-for-model-development.qmd @@ -240,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**. diff --git a/site/training/training-templates/course-slides.qmd b/site/training/training-templates/course-slides.qmd index 9692bf9ef6..c9c79f4e75 100644 --- a/site/training/training-templates/course-slides.qmd +++ b/site/training/training-templates/course-slides.qmd @@ -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 e9d4bc8938..6705e3ed3e 100644 --- a/site/training/validator-fundamentals/developing-challenger-models.qmd +++ b/site/training/validator-fundamentals/developing-challenger-models.qmd @@ -221,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**. @@ -536,7 +536,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**. diff --git a/site/training/validator-fundamentals/running-data-quality-tests.qmd b/site/training/validator-fundamentals/running-data-quality-tests.qmd index 5fbfff0c3e..3c95a1139f 100644 --- a/site/training/validator-fundamentals/running-data-quality-tests.qmd +++ b/site/training/validator-fundamentals/running-data-quality-tests.qmd @@ -204,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**. 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 5f0a8965fc..729c64786a 100644 --- a/site/training/validator-fundamentals/using-validmind-for-model-validation.qmd +++ b/site/training/validator-fundamentals/using-validmind-for-model-validation.qmd @@ -186,9 +186,7 @@ When you're done navigating around, click [{{< fa chevron-right >}}]() to contin :::: {.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. ::: {.embed} In a usual model lifecycle, a champion model will have been independently registered in your model inventory and submitted to you for validation. 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). - - From 279d2133738878b4c1f115911e5fc7e245efdb40 Mon Sep 17 00:00:00 2001 From: Beck <164545837+validbeck@users.noreply.github.com> Date: Thu, 29 May 2025 12:48:16 -0700 Subject: [PATCH 13/15] Proofreading pt2 --- site/guide/model-validation/_add-model-findings.qmd | 2 ++ .../model-validation/_track_issue_resolution.qmd | 2 ++ site/guide/model-workflows/_model-workflows-see.qmd | 2 ++ .../model-workflows/_model-workflows-transition.qmd | 2 ++ .../developing-challenger-models.qmd | 11 +++++------ 5 files changed, 13 insertions(+), 6 deletions(-) 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/validator-fundamentals/developing-challenger-models.qmd b/site/training/validator-fundamentals/developing-challenger-models.qmd index 6705e3ed3e..59e7f77b07 100644 --- a/site/training/validator-fundamentals/developing-challenger-models.qmd +++ b/site/training/validator-fundamentals/developing-challenger-models.qmd @@ -412,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**. @@ -459,10 +459,9 @@ As we can observe from the output in our notebook, our champion model doesn't pa 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. -7. Click **Save**. -8. Select the finding you just added to link to your validation report. -9. Click **Update Linked Findings** to insert your 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. @@ -588,7 +587,7 @@ Let's implement a *custom test* that calculates a confusion matrix: :::: {.slideover--r .three-quarters} **Implement a custom inline test** -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** From 416570decb2eb2cbbc11420d993a687b696274c2 Mon Sep 17 00:00:00 2001 From: Beck <164545837+validbeck@users.noreply.github.com> Date: Thu, 29 May 2025 12:55:24 -0700 Subject: [PATCH 14/15] Proofreading pt3 --- .../validator-fundamentals/finalizing-validation-reports.qmd | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/training/validator-fundamentals/finalizing-validation-reports.qmd b/site/training/validator-fundamentals/finalizing-validation-reports.qmd index bba1791678..72131b90b5 100644 --- a/site/training/validator-fundamentals/finalizing-validation-reports.qmd +++ b/site/training/validator-fundamentals/finalizing-validation-reports.qmd @@ -397,7 +397,7 @@ 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"} -:::: {.slideover--b .auto-collapse-10} +:::: {.slideover--b .three-quarters .auto-collapse-10} ::: {.tc} **View all {{< fa triangle-exclamation >}} Model Findings** ::: From a3e8b8e7ac905aa42eb8ceb7918cb7ad2c62b188 Mon Sep 17 00:00:00 2001 From: Beck <164545837+validbeck@users.noreply.github.com> Date: Thu, 29 May 2025 16:01:15 -0700 Subject: [PATCH 15/15] Final proofread --- site/_extensions/nrichers/slideover/_extension.yml | 2 +- site/_extensions/nrichers/slideover/slideover.css | 1 + .../developer-fundamentals/finalizing-model-documentation.qmd | 4 +++- .../validator-fundamentals/finalizing-validation-reports.qmd | 4 +++- 4 files changed, 8 insertions(+), 3 deletions(-) diff --git a/site/_extensions/nrichers/slideover/_extension.yml b/site/_extensions/nrichers/slideover/_extension.yml index fe4de0016d..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.3.0 +version: 1.3.1 quarto-required: ">=1.6.0" contributes: revealjs-plugins: diff --git a/site/_extensions/nrichers/slideover/slideover.css b/site/_extensions/nrichers/slideover/slideover.css index 02611cfc36..9a83d087c3 100644 --- a/site/_extensions/nrichers/slideover/slideover.css +++ b/site/_extensions/nrichers/slideover/slideover.css @@ -378,6 +378,7 @@ padding-top: 0px; font-size: 0.9em; border-radius: 5px; + padding-right: 1rem !important; } /* Quotations */ diff --git a/site/training/developer-fundamentals/finalizing-model-documentation.qmd b/site/training/developer-fundamentals/finalizing-model-documentation.qmd index 1a8dfed952..0781067f91 100644 --- a/site/training/developer-fundamentals/finalizing-model-documentation.qmd +++ b/site/training/developer-fundamentals/finalizing-model-documentation.qmd @@ -389,7 +389,9 @@ When you're done, click [{{< fa chevron-right >}}]() to continue. :::: {.slideover--l .three-quarters .auto-collapse-10} **Welcome to {{< fa square-poll-vertical >}} Analytics** -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. diff --git a/site/training/validator-fundamentals/finalizing-validation-reports.qmd b/site/training/validator-fundamentals/finalizing-validation-reports.qmd index 72131b90b5..88fa5fe511 100644 --- a/site/training/validator-fundamentals/finalizing-validation-reports.qmd +++ b/site/training/validator-fundamentals/finalizing-validation-reports.qmd @@ -565,7 +565,9 @@ When you're done, click [{{< fa chevron-right >}}]() to continue. :::: {.slideover--l .three-quarters .auto-collapse-10} **Welcome to {{< fa square-poll-vertical >}} Analytics** -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.