Add performance bands API support - #91

Open
faithque wants to merge 1 commit into
thoth-tech:developmentfrom
faithque:feature/performance-bands
Open

Add performance bands API support#91
faithque wants to merge 1 commit into
thoth-tech:developmentfrom
faithque:feature/performance-bands

Conversation

@faithque

@faithquefaithque commented Apr 23, 2026

Copy link
Copy Markdown

Description

This pull request completely overhauls the "Performance Bands" component on the progress dashboard by migrating it from static mock HTML into a robust, standalone Angular directive.

Previously, the performance bands defaulted to an empty 0% state for students without rigidly graded tasks. This PR implements a dynamic trajectory calculation based on the student's live $scope.project.activeTasks(). The system now successfully groups task statuses and evaluation criteria into four bands (High Distinction, Above Average, Average, Below Average), guaranteeing a continuous representation of progress throughout the term.

Additionally, this change replaces the previous flat CSS layout with a premium, sleek aesthetic featuring physics-like micro-animations, color gradients, and elevation styling.

The change includes:

  • Updating performance-bands.coffee logic to dynamically map live task progression instead of static percentage properties.
  • Refactoring performance-bands.tpl.html and performance-bands.scss into a premium responsive component with native data bindings.
  • Extracting the static HTML card from progress-dashboard.tpl.html and replacing it with the dynamic <performance-bands> directive tag.
  • Updating doubtfire-angularjs.module.ts to actively import the isolated component into the modern Angular bundler pipeline.
  • Dropping obsolete state variables from the progress-dashboard.coffee controller.

Fixes # (issue)

Type of change

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • This change requires a documentation update

How Has This Been Tested?

Test steps:

  1. Run the project locally.
  2. Log in as a student with active tasks in any unit.
  3. Open the Progress Dashboard view.
  4. Confirm that the "Performance Bands" panel successfully renders dynamic widths based on actual task statuses and does not flatten out at 0%.
  5. Confirm UI responsiveness and toggle visibility functionalities operate smoothly.

Testing Checklist:

  • Tested in latest Chrome
  • Tested in latest Safari
  • Tested in latest Firefox
  • Tested in latest Microsoft Edge

Checklist:

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • I have requested a review from two members of the Frontend Migration team on the Pull Request.
imageimageimageimageimageimage

@mudith-perera

Copy link
Copy Markdown

I’ve reviewed the PR and everything appears to be in order. Happy to approve.

@mudith-pereramudith-perera left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good Work Faith!. I’ve reviewed the PR and everything appears to be in order. Happy to approve.

@SanjanaBottuSanjanaBottu left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me. The implementation is clear so approving this PR.

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@faithque@mudith-perera@SanjanaBottu
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Skip to content

Add performance bands API support - #91

Open
faithque wants to merge 1 commit into
thoth-tech:developmentfrom
faithque:feature/performance-bands
Open

Add performance bands API support#91
faithque wants to merge 1 commit into
thoth-tech:developmentfrom
faithque:feature/performance-bands

Conversation

@faithque

@faithquefaithque commented Apr 23, 2026

Copy link
Copy Markdown

Description

This pull request completely overhauls the "Performance Bands" component on the progress dashboard by migrating it from static mock HTML into a robust, standalone Angular directive.

Previously, the performance bands defaulted to an empty 0% state for students without rigidly graded tasks. This PR implements a dynamic trajectory calculation based on the student's live $scope.project.activeTasks(). The system now successfully groups task statuses and evaluation criteria into four bands (High Distinction, Above Average, Average, Below Average), guaranteeing a continuous representation of progress throughout the term.

Additionally, this change replaces the previous flat CSS layout with a premium, sleek aesthetic featuring physics-like micro-animations, color gradients, and elevation styling.

The change includes:

  • Updating performance-bands.coffee logic to dynamically map live task progression instead of static percentage properties.
  • Refactoring performance-bands.tpl.html and performance-bands.scss into a premium responsive component with native data bindings.
  • Extracting the static HTML card from progress-dashboard.tpl.html and replacing it with the dynamic <performance-bands> directive tag.
  • Updating doubtfire-angularjs.module.ts to actively import the isolated component into the modern Angular bundler pipeline.
  • Dropping obsolete state variables from the progress-dashboard.coffee controller.

Fixes # (issue)

Type of change

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • This change requires a documentation update

How Has This Been Tested?

Test steps:

  1. Run the project locally.
  2. Log in as a student with active tasks in any unit.
  3. Open the Progress Dashboard view.
  4. Confirm that the "Performance Bands" panel successfully renders dynamic widths based on actual task statuses and does not flatten out at 0%.
  5. Confirm UI responsiveness and toggle visibility functionalities operate smoothly.

Testing Checklist:

  • Tested in latest Chrome
  • Tested in latest Safari
  • Tested in latest Firefox
  • Tested in latest Microsoft Edge

Checklist:

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • I have requested a review from two members of the Frontend Migration team on the Pull Request.
imageimageimageimageimageimage

@mudith-perera

Copy link
Copy Markdown

I’ve reviewed the PR and everything appears to be in order. Happy to approve.

@mudith-pereramudith-perera left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good Work Faith!. I’ve reviewed the PR and everything appears to be in order. Happy to approve.

@SanjanaBottuSanjanaBottu left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me. The implementation is clear so approving this PR.

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@faithque@mudith-perera@SanjanaBottu
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Add performance bands API support - #91

Open
faithque wants to merge 1 commit into
thoth-tech:developmentfrom
faithque:feature/performance-bands
Open

Add performance bands API support#91
faithque wants to merge 1 commit into
thoth-tech:developmentfrom
faithque:feature/performance-bands

Conversation

@faithque

@faithquefaithque commented Apr 23, 2026

Copy link
Copy Markdown

Description

This pull request completely overhauls the "Performance Bands" component on the progress dashboard by migrating it from static mock HTML into a robust, standalone Angular directive.

Previously, the performance bands defaulted to an empty 0% state for students without rigidly graded tasks. This PR implements a dynamic trajectory calculation based on the student's live $scope.project.activeTasks(). The system now successfully groups task statuses and evaluation criteria into four bands (High Distinction, Above Average, Average, Below Average), guaranteeing a continuous representation of progress throughout the term.

Additionally, this change replaces the previous flat CSS layout with a premium, sleek aesthetic featuring physics-like micro-animations, color gradients, and elevation styling.

The change includes:

  • Updating performance-bands.coffee logic to dynamically map live task progression instead of static percentage properties.
  • Refactoring performance-bands.tpl.html and performance-bands.scss into a premium responsive component with native data bindings.
  • Extracting the static HTML card from progress-dashboard.tpl.html and replacing it with the dynamic <performance-bands> directive tag.
  • Updating doubtfire-angularjs.module.ts to actively import the isolated component into the modern Angular bundler pipeline.
  • Dropping obsolete state variables from the progress-dashboard.coffee controller.

Fixes # (issue)

Type of change

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • This change requires a documentation update

How Has This Been Tested?

Test steps:

  1. Run the project locally.
  2. Log in as a student with active tasks in any unit.
  3. Open the Progress Dashboard view.
  4. Confirm that the "Performance Bands" panel successfully renders dynamic widths based on actual task statuses and does not flatten out at 0%.
  5. Confirm UI responsiveness and toggle visibility functionalities operate smoothly.

Testing Checklist:

  • Tested in latest Chrome
  • Tested in latest Safari
  • Tested in latest Firefox
  • Tested in latest Microsoft Edge

Checklist:

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • I have requested a review from two members of the Frontend Migration team on the Pull Request.
imageimageimageimageimageimage

@mudith-perera

Copy link
Copy Markdown

I’ve reviewed the PR and everything appears to be in order. Happy to approve.

@mudith-pereramudith-perera left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good Work Faith!. I’ve reviewed the PR and everything appears to be in order. Happy to approve.

@SanjanaBottuSanjanaBottu left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me. The implementation is clear so approving this PR.

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@faithque@mudith-perera@SanjanaBottu
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms"); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Add performance bands API support - #91

Open
faithque wants to merge 1 commit into
thoth-tech:developmentfrom
faithque:feature/performance-bands
Open

Add performance bands API support#91
faithque wants to merge 1 commit into
thoth-tech:developmentfrom
faithque:feature/performance-bands

Conversation

@faithque

@faithquefaithque commented Apr 23, 2026

Copy link
Copy Markdown

Description

This pull request completely overhauls the "Performance Bands" component on the progress dashboard by migrating it from static mock HTML into a robust, standalone Angular directive.

Previously, the performance bands defaulted to an empty 0% state for students without rigidly graded tasks. This PR implements a dynamic trajectory calculation based on the student's live $scope.project.activeTasks(). The system now successfully groups task statuses and evaluation criteria into four bands (High Distinction, Above Average, Average, Below Average), guaranteeing a continuous representation of progress throughout the term.

Additionally, this change replaces the previous flat CSS layout with a premium, sleek aesthetic featuring physics-like micro-animations, color gradients, and elevation styling.

The change includes:

  • Updating performance-bands.coffee logic to dynamically map live task progression instead of static percentage properties.
  • Refactoring performance-bands.tpl.html and performance-bands.scss into a premium responsive component with native data bindings.
  • Extracting the static HTML card from progress-dashboard.tpl.html and replacing it with the dynamic <performance-bands> directive tag.
  • Updating doubtfire-angularjs.module.ts to actively import the isolated component into the modern Angular bundler pipeline.
  • Dropping obsolete state variables from the progress-dashboard.coffee controller.

Fixes # (issue)

Type of change

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • This change requires a documentation update

How Has This Been Tested?

Test steps:

  1. Run the project locally.
  2. Log in as a student with active tasks in any unit.
  3. Open the Progress Dashboard view.
  4. Confirm that the "Performance Bands" panel successfully renders dynamic widths based on actual task statuses and does not flatten out at 0%.
  5. Confirm UI responsiveness and toggle visibility functionalities operate smoothly.

Testing Checklist:

  • Tested in latest Chrome
  • Tested in latest Safari
  • Tested in latest Firefox
  • Tested in latest Microsoft Edge

Checklist:

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • I have requested a review from two members of the Frontend Migration team on the Pull Request.
imageimageimageimageimageimage

@mudith-perera

Copy link
Copy Markdown

I’ve reviewed the PR and everything appears to be in order. Happy to approve.

@mudith-pereramudith-perera left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good Work Faith!. I’ve reviewed the PR and everything appears to be in order. Happy to approve.

@SanjanaBottuSanjanaBottu left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me. The implementation is clear so approving this PR.

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@faithque@mudith-perera@SanjanaBottu
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links"); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
Skip to content

Add performance bands API support - #91

Open
faithque wants to merge 1 commit into
thoth-tech:developmentfrom
faithque:feature/performance-bands
Open

Add performance bands API support#91
faithque wants to merge 1 commit into
thoth-tech:developmentfrom
faithque:feature/performance-bands

Conversation

@faithque

@faithquefaithque commented Apr 23, 2026

Copy link
Copy Markdown

Description

This pull request completely overhauls the "Performance Bands" component on the progress dashboard by migrating it from static mock HTML into a robust, standalone Angular directive.

Previously, the performance bands defaulted to an empty 0% state for students without rigidly graded tasks. This PR implements a dynamic trajectory calculation based on the student's live $scope.project.activeTasks(). The system now successfully groups task statuses and evaluation criteria into four bands (High Distinction, Above Average, Average, Below Average), guaranteeing a continuous representation of progress throughout the term.

Additionally, this change replaces the previous flat CSS layout with a premium, sleek aesthetic featuring physics-like micro-animations, color gradients, and elevation styling.

The change includes:

  • Updating performance-bands.coffee logic to dynamically map live task progression instead of static percentage properties.
  • Refactoring performance-bands.tpl.html and performance-bands.scss into a premium responsive component with native data bindings.
  • Extracting the static HTML card from progress-dashboard.tpl.html and replacing it with the dynamic <performance-bands> directive tag.
  • Updating doubtfire-angularjs.module.ts to actively import the isolated component into the modern Angular bundler pipeline.
  • Dropping obsolete state variables from the progress-dashboard.coffee controller.

Fixes # (issue)

Type of change

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • This change requires a documentation update

How Has This Been Tested?

Test steps:

  1. Run the project locally.
  2. Log in as a student with active tasks in any unit.
  3. Open the Progress Dashboard view.
  4. Confirm that the "Performance Bands" panel successfully renders dynamic widths based on actual task statuses and does not flatten out at 0%.
  5. Confirm UI responsiveness and toggle visibility functionalities operate smoothly.

Testing Checklist:

  • Tested in latest Chrome
  • Tested in latest Safari
  • Tested in latest Firefox
  • Tested in latest Microsoft Edge

Checklist:

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • I have requested a review from two members of the Frontend Migration team on the Pull Request.
imageimageimageimageimageimage

@mudith-perera

Copy link
Copy Markdown

I’ve reviewed the PR and everything appears to be in order. Happy to approve.

@mudith-pereramudith-perera left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good Work Faith!. I’ve reviewed the PR and everything appears to be in order. Happy to approve.

@SanjanaBottuSanjanaBottu left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me. The implementation is clear so approving this PR.

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@faithque@mudith-perera@SanjanaBottu
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Add performance bands API support - #91

Open
faithque wants to merge 1 commit into
thoth-tech:developmentfrom
faithque:feature/performance-bands
Open

Add performance bands API support#91
faithque wants to merge 1 commit into
thoth-tech:developmentfrom
faithque:feature/performance-bands

Conversation

@faithque

@faithquefaithque commented Apr 23, 2026

Copy link
Copy Markdown

Description

This pull request completely overhauls the "Performance Bands" component on the progress dashboard by migrating it from static mock HTML into a robust, standalone Angular directive.

Previously, the performance bands defaulted to an empty 0% state for students without rigidly graded tasks. This PR implements a dynamic trajectory calculation based on the student's live $scope.project.activeTasks(). The system now successfully groups task statuses and evaluation criteria into four bands (High Distinction, Above Average, Average, Below Average), guaranteeing a continuous representation of progress throughout the term.

Additionally, this change replaces the previous flat CSS layout with a premium, sleek aesthetic featuring physics-like micro-animations, color gradients, and elevation styling.

The change includes:

  • Updating performance-bands.coffee logic to dynamically map live task progression instead of static percentage properties.
  • Refactoring performance-bands.tpl.html and performance-bands.scss into a premium responsive component with native data bindings.
  • Extracting the static HTML card from progress-dashboard.tpl.html and replacing it with the dynamic <performance-bands> directive tag.
  • Updating doubtfire-angularjs.module.ts to actively import the isolated component into the modern Angular bundler pipeline.
  • Dropping obsolete state variables from the progress-dashboard.coffee controller.

Fixes # (issue)

Type of change

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • This change requires a documentation update

How Has This Been Tested?

Test steps:

  1. Run the project locally.
  2. Log in as a student with active tasks in any unit.
  3. Open the Progress Dashboard view.
  4. Confirm that the "Performance Bands" panel successfully renders dynamic widths based on actual task statuses and does not flatten out at 0%.
  5. Confirm UI responsiveness and toggle visibility functionalities operate smoothly.

Testing Checklist:

  • Tested in latest Chrome
  • Tested in latest Safari
  • Tested in latest Firefox
  • Tested in latest Microsoft Edge

Checklist:

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • I have requested a review from two members of the Frontend Migration team on the Pull Request.
imageimageimageimageimageimage

@mudith-perera

Copy link
Copy Markdown

I’ve reviewed the PR and everything appears to be in order. Happy to approve.

@mudith-pereramudith-perera left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good Work Faith!. I’ve reviewed the PR and everything appears to be in order. Happy to approve.

@SanjanaBottuSanjanaBottu left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me. The implementation is clear so approving this PR.

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@faithque@mudith-perera@SanjanaBottu
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Add performance bands API support - #91

Open
faithque wants to merge 1 commit into
thoth-tech:developmentfrom
faithque:feature/performance-bands
Open

Add performance bands API support#91
faithque wants to merge 1 commit into
thoth-tech:developmentfrom
faithque:feature/performance-bands

Conversation

@faithque

@faithquefaithque commented Apr 23, 2026

Copy link
Copy Markdown

Description

This pull request completely overhauls the "Performance Bands" component on the progress dashboard by migrating it from static mock HTML into a robust, standalone Angular directive.

Previously, the performance bands defaulted to an empty 0% state for students without rigidly graded tasks. This PR implements a dynamic trajectory calculation based on the student's live $scope.project.activeTasks(). The system now successfully groups task statuses and evaluation criteria into four bands (High Distinction, Above Average, Average, Below Average), guaranteeing a continuous representation of progress throughout the term.

Additionally, this change replaces the previous flat CSS layout with a premium, sleek aesthetic featuring physics-like micro-animations, color gradients, and elevation styling.

The change includes:

  • Updating performance-bands.coffee logic to dynamically map live task progression instead of static percentage properties.
  • Refactoring performance-bands.tpl.html and performance-bands.scss into a premium responsive component with native data bindings.
  • Extracting the static HTML card from progress-dashboard.tpl.html and replacing it with the dynamic <performance-bands> directive tag.
  • Updating doubtfire-angularjs.module.ts to actively import the isolated component into the modern Angular bundler pipeline.
  • Dropping obsolete state variables from the progress-dashboard.coffee controller.

Fixes # (issue)

Type of change

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • This change requires a documentation update

How Has This Been Tested?

Test steps:

  1. Run the project locally.
  2. Log in as a student with active tasks in any unit.
  3. Open the Progress Dashboard view.
  4. Confirm that the "Performance Bands" panel successfully renders dynamic widths based on actual task statuses and does not flatten out at 0%.
  5. Confirm UI responsiveness and toggle visibility functionalities operate smoothly.

Testing Checklist:

  • Tested in latest Chrome
  • Tested in latest Safari
  • Tested in latest Firefox
  • Tested in latest Microsoft Edge

Checklist:

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • I have requested a review from two members of the Frontend Migration team on the Pull Request.
imageimageimageimageimageimage

@mudith-perera

Copy link
Copy Markdown

I’ve reviewed the PR and everything appears to be in order. Happy to approve.

@mudith-pereramudith-perera left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good Work Faith!. I’ve reviewed the PR and everything appears to be in order. Happy to approve.

@SanjanaBottuSanjanaBottu left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me. The implementation is clear so approving this PR.

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@faithque@mudith-perera@SanjanaBottu
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode"); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
Skip to content

Add performance bands API support - #91

Open
faithque wants to merge 1 commit into
thoth-tech:developmentfrom
faithque:feature/performance-bands
Open

Add performance bands API support#91
faithque wants to merge 1 commit into
thoth-tech:developmentfrom
faithque:feature/performance-bands

Conversation

@faithque

@faithquefaithque commented Apr 23, 2026

Copy link
Copy Markdown

Description

This pull request completely overhauls the "Performance Bands" component on the progress dashboard by migrating it from static mock HTML into a robust, standalone Angular directive.

Previously, the performance bands defaulted to an empty 0% state for students without rigidly graded tasks. This PR implements a dynamic trajectory calculation based on the student's live $scope.project.activeTasks(). The system now successfully groups task statuses and evaluation criteria into four bands (High Distinction, Above Average, Average, Below Average), guaranteeing a continuous representation of progress throughout the term.

Additionally, this change replaces the previous flat CSS layout with a premium, sleek aesthetic featuring physics-like micro-animations, color gradients, and elevation styling.

The change includes:

  • Updating performance-bands.coffee logic to dynamically map live task progression instead of static percentage properties.
  • Refactoring performance-bands.tpl.html and performance-bands.scss into a premium responsive component with native data bindings.
  • Extracting the static HTML card from progress-dashboard.tpl.html and replacing it with the dynamic <performance-bands> directive tag.
  • Updating doubtfire-angularjs.module.ts to actively import the isolated component into the modern Angular bundler pipeline.
  • Dropping obsolete state variables from the progress-dashboard.coffee controller.

Fixes # (issue)

Type of change

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • This change requires a documentation update

How Has This Been Tested?

Test steps:

  1. Run the project locally.
  2. Log in as a student with active tasks in any unit.
  3. Open the Progress Dashboard view.
  4. Confirm that the "Performance Bands" panel successfully renders dynamic widths based on actual task statuses and does not flatten out at 0%.
  5. Confirm UI responsiveness and toggle visibility functionalities operate smoothly.

Testing Checklist:

  • Tested in latest Chrome
  • Tested in latest Safari
  • Tested in latest Firefox
  • Tested in latest Microsoft Edge

Checklist:

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • I have requested a review from two members of the Frontend Migration team on the Pull Request.
imageimageimageimageimageimage

@mudith-perera

Copy link
Copy Markdown

I’ve reviewed the PR and everything appears to be in order. Happy to approve.

@mudith-pereramudith-perera left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good Work Faith!. I’ve reviewed the PR and everything appears to be in order. Happy to approve.

@SanjanaBottuSanjanaBottu left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me. The implementation is clear so approving this PR.

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@faithque@mudith-perera@SanjanaBottu