Skip to content

Update survey titles and labels for clarity: reflect focus on Copilot impact and time savings #73

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
MattG57 merged 18 commits into from
Dec 6, 2024
Merged

Update survey titles and labels for clarity: reflect focus on Copilot impact and time savings #73

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
8dac4c6
Update survey titles and labels for clarity: reflect focus on Copilot…
MattG57 Nov 30, 2024
06fbc6e
added scrolling reasons from colleagues
MattG57 Nov 30, 2024
71497fd
Tweaks
MattG57 Nov 30, 2024
9fbfe6b
Merge branch 'main' into Nomenclature-for-Developer-Estimates-plus-Fo…
austenstone Dec 3, 2024
2e8b1c9
Add recent surveys retrieval with good reasons and kudos feature
MattG57 Dec 3, 2024
3085220
Add GitHub survey update functionality and new survey route
austenstone Dec 3, 2024
04408a3
Add kudos field to Survey model
austenstone Dec 3, 2024
8dc6e25
Refactor backend entry point, update Docker and compose configuration…
MattG57 Dec 3, 2024
1611030
Merge branch 'Nomenclature-for-Developer-Estimates-plus-Form-behavior…
MattG57 Dec 3, 2024
3d5a946
Implement member retrieval by login, enhance recent surveys query, an…
MattG57 Dec 4, 2024
5cbd8cd
Refactor chart labels and settings form, implement thousand separator…
MattG57 Dec 4, 2024
e8a2522
Remove VSCode settings, update logging level in database configuratio…
austenstone Dec 5, 2024
dfdc06e
Add Value Modeling component, update & routing change
MattG57 Dec 5, 2024
338b2f5
Refactor survey component headers, update layout styles, and enhance …
austenstone Dec 6, 2024
4b6d442
Merge branch 'Nomenclature-for-Developer-Estimates-plus-Form-behavior…
austenstone Dec 6, 2024
50fc071
Remove ThousandSeparatorPipe and SharedModule; update settings compon…
austenstone Dec 6, 2024
4e4b5d3
Fix type assertion in survey controller and service for improved type…
austenstone Dec 6, 2024
00e92ca
Refactor type assertions in survey controller and service to use Wher…
austenstone Dec 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions ...src/app/main/copilot/copilot-surveys/copilot-survey-details/copilot-survey.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div class="page-container" *ngIf="survey">
<div class="page-header">
<h1>Survey #{{ survey.id }}</h1>
<h1>Estimate of Copilot Impact #{{ survey.id }}</h1>
</div>
<mat-card appearance="outlined">
<mat-card-header>
Expand All @@ -17,7 +17,7 @@ <h1>Survey #{{ survey.id }}</h1>
<ng-container *ngIf="survey.status !== 'pending'">
<p><strong>Used Copilot: </strong>{{ survey.usedCopilot ? 'Yes' : 'No' }}</p>
<p><strong>Time Saved: </strong>{{ survey.percentTimeSaved }}%</p>
<p><strong>Reason: </strong>{{ survey.reason }}</p>
<p><strong>Reason: </strong><span matLine>{{ survey.reason }}</span></p>
<p><strong>Time Used For: </strong>{{ survey.timeUsedFor }}</p>
</ng-container>
<p><strong>PR: </strong><a [href]="'https://github.com/' + survey.owner + '/' + survey.repo + '/pull/' + survey.prNumber">{{ survey.repo }}#{{ survey.prNumber }}</a></p>
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/app/main/copilot/copilot-surveys/copilot-surveys.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<div class="page-container">
<div class="page-header">
<h1>Surveys</h1>
<h1>Estimate Time Saved and Share Expertise</h1>
<span class="spacer"></span>
<!-- <p>
<p>
<a mat-flat-button color="primary" routerLink="/copilot/surveys/new">New Survey</a>
</p> -->
</p>
</div>
<app-table [data]="surveys!" [columns]="surveysColumns" [defaultSort]="{id: 'dateTime', start: 'desc', disableClear: false}" (rowClick)="onSurveyClick($event)"></app-table>
</div>
152 changes: 111 additions & 41 deletions ...src/app/main/copilot/copilot-surveys/new-copilot-survey/new-copilot-survey.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,47 +1,117 @@
<div class="page-container">
<div class="page-header">
<h1>Developer Survey</h1>
<h1>Estimate Time Saved and Share Expertise</h1>
</div>
<form [formGroup]="surveyForm" (ngSubmit)="onSubmit()">
<label for="usedCopilot">Did you use Copilot for this PR?</label>
<mat-radio-group id="usedCopilot" formControlName="usedCopilot" aria-labelledby="example-radio-group-label" class="example-radio-group">
<mat-radio-button class="example-radio-button" [value]="true">Yes</mat-radio-button>
<mat-radio-button class="example-radio-button" [value]="false">No</mat-radio-button>
</mat-radio-group>
<label for="percentTimeSavedSlider">How much less time did the actual coding take with Copilot?</label>
<div>
<mat-slider class="example-mat-slider" id="percentTimeSavedSlider" [max]="100" [min]="0" [step]="5" discrete="true" tickInterval="5" showTickMarks [displayWith]="formatPercent">
<input matSliderThumb formControlName="percentTimeSaved">
</mat-slider>
<div class="slider-labels-container">
<div class="slider-labels">
<span style="left: 0%">0%</span>
<span style="left: 25%">25%</span>
<span style="left: 50%">50%</span>
<span style="left: 75%">75%</span>
<span style="left: 100%">100%</span>
<div class="two-column-layout">
<div class="column" [style.width.%]="formColumnWidth">
<form [formGroup]="surveyForm" (ngSubmit)="onSubmit()">
<label for="usedCopilot">Did you use Copilot for this PR?</label>
<mat-radio-group id="usedCopilot" formControlName="usedCopilot" aria-labelledby="example-radio-group-label" class="example-radio-group">
<mat-radio-button class="example-radio-button" [value]="true">Yes</mat-radio-button>
<mat-radio-button class="example-radio-button" [value]="false">No</mat-radio-button>
</mat-radio-group>
<label for="percentTimeSavedSlider">How much less time did the PR take with Copilot?</label>
<div>
<mat-slider class="example-mat-slider" id="percentTimeSavedSlider" [max]="100" [min]="0" [step]="5" discrete="true" tickInterval="5" showTickMarks [displayWith]="formatPercent">
<input matSliderThumb formControlName="percentTimeSaved">
</mat-slider>
<div class="slider-labels-container">
<div class="slider-labels">
<span style="left: 0%">0%</span>
<span style="left: 25%">25%</span>
<span style="left: 50%">50%</span>
<span style="left: 75%">75%</span>
<span style="left: 100%">100%</span>
</div>
</div>
</div>
</div>
<mat-form-field class="example-form-field">
<mat-label>If possible, Explain how copilot enabled that level of Time Savings </mat-label>
<textarea formControlName="reason" placeholder="Ex. Write boilerplate code more quickly, freeing up time to focus on complex logic." matInput (focus)="onReasonFocus()"></textarea>
</mat-form-field>
<br><br>
<label for="timeUsedForGroup">Given the context, where would the Copilot time savings most likely show up?</label>
<mat-radio-group id="timeUsedForGroup" formControlName="timeUsedFor" aria-labelledby="example-radio-group-label" class="example-radio-group">
<mat-radio-button class="example-radio-button" value="fasterPRs">Faster PR's 🚀</mat-radio-button>
<mat-radio-button class="example-radio-button" value="fasterReleases">Faster Releases 📦</mat-radio-button>
<mat-radio-button class="example-radio-button" value="repoHousekeeping">Repo/Team Housekeeping 🧹</mat-radio-button>
<mat-radio-button class="example-radio-button" value="techDebt">Tech Debt, Reduce Defects and Vulns
🛠️</mat-radio-button>
<mat-radio-button class="example-radio-button" value="experimentLearn">Experiment, Learn, or Work on Something NEW
🧪</mat-radio-button>
<mat-radio-button class="example-radio-button" value="other">Other 🤔</mat-radio-button>
</mat-radio-group>
<button mat-raised-button color="primary" type="submit">Submit</button>
</form>
</div>
<!-- <label>Describe your thought process for calculating (or estimating) the {{surveyForm.get('percentTimeSaved')?.value}}% time
saved</label> -->
<mat-form-field class="example-form-field">
<mat-label>{{surveyForm.get('percentTimeSaved')?.value ? 'I chose ' + surveyForm.get('percentTimeSaved')?.value + '% because Copilot enabled me to' : 'I didn\'t use Copilot because'}}...</mat-label>
<textarea formControlName="reason" placeholder="Ex. Write boilerplate code more quickly, freeing up time to focus on complex logic." matInput></textarea>
<mat-hint>Describe your thought process for calculating (or estimating) the {{surveyForm.get('percentTimeSaved')?.value}}% time saved</mat-hint>
</mat-form-field>
<br><br>
<label for="timeUsedForGroup">Given the context, where would the Copilot time savings most likely show up?</label>
<mat-radio-group id="timeUsedForGroup" formControlName="timeUsedFor" aria-labelledby="example-radio-group-label" class="example-radio-group">
<mat-radio-button class="example-radio-button" value="fasterPRs">Faster PR's 🚀</mat-radio-button>
<mat-radio-button class="example-radio-button" value="fasterReleases">Faster Releases 📦</mat-radio-button>
<mat-radio-button class="example-radio-button" value="repoHousekeeping">Repo/Team Housekeeping 🧹</mat-radio-button>
<mat-radio-button class="example-radio-button" value="techDebt">Tech Debt, Reduce Defects and Vulns
🛠️</mat-radio-button>
<mat-radio-button class="example-radio-button" value="experimentLearn">Experiment, Learn, or Work on Something NEW
🧪</mat-radio-button>
<mat-radio-button class="example-radio-button" value="other">Other 🤔</mat-radio-button>
</mat-radio-group>
<button mat-raised-button color="primary" type="submit">Submit</button>
</form>
<div class="column" [style.width.%]="historyColumnWidth">
<h2>What colleagues are saying...</h2>
<mat-card class="scrollable-card">
<mat-card-content class="scrollable-card-content">
<div *ngFor="let reason of historicalReasons">
"{{ reason }}"
</div>
<div *ngFor="let reason of historicalReasons">
"{{ reason }}"
</div>
</mat-card-content>
</mat-card>
</div>
</div>
<div class="two-column-layout">
<div class="column" [style.width.%]="formColumnWidth">
<form [formGroup]="surveyForm" (ngSubmit)="onSubmit()">
<label for="usedCopilot">Did you use Copilot for this PR?</label>
<mat-radio-group id="usedCopilot" formControlName="usedCopilot" aria-labelledby="example-radio-group-label" class="example-radio-group">
<mat-radio-button class="example-radio-button" [value]="true">Yes</mat-radio-button>
<mat-radio-button class="example-radio-button" [value]="false">No</mat-radio-button>
</mat-radio-group>
<label for="percentTimeSavedSlider">How much less time did the PR take with Copilot?</label>
<div>
<mat-slider class="example-mat-slider" id="percentTimeSavedSlider" [max]="100" [min]="0" [step]="5" discrete="true" tickInterval="5" showTickMarks [displayWith]="formatPercent">
<input matSliderThumb formControlName="percentTimeSaved">
</mat-slider>
<div class="slider-labels-container">
<div class="slider-labels">
<span style="left: 0%">0%</span>
<span style="left: 25%">25%</span>
<span style="left: 50%">50%</span>
<span style="left: 75%">75%</span>
<span style="left: 100%">100%</span>
</div>
</div>
</div>
<mat-form-field class="example-form-field">
<mat-label>If possible, Explain how copilot enabled that level of Time Savings </mat-label>
<textarea formControlName="reason" placeholder="Ex. Write boilerplate code more quickly, freeing up time to focus on complex logic." matInput (focus)="onReasonFocus()"></textarea>
</mat-form-field>
<br><br>
<label for="timeUsedForGroup">Given the context, where would the Copilot time savings most likely show up?</label>
<mat-radio-group id="timeUsedForGroup" formControlName="timeUsedFor" aria-labelledby="example-radio-group-label" class="example-radio-group">
<mat-radio-button class="example-radio-button" value="fasterPRs">Faster PR's 🚀</mat-radio-button>
<mat-radio-button class="example-radio-button" value="fasterReleases">Faster Releases 📦</mat-radio-button>
<mat-radio-button class="example-radio-button" value="repoHousekeeping">Repo/Team Housekeeping 🧹</mat-radio-button>
<mat-radio-button class="example-radio-button" value="techDebt">Tech Debt, Reduce Defects and Vulns
🛠️</mat-radio-button>
<mat-radio-button class="example-radio-button" value="experimentLearn">Experiment, Learn, or Work on Something NEW
🧪</mat-radio-button>
<mat-radio-button class="example-radio-button" value="other">Other 🤔</mat-radio-button>
</mat-radio-group>
<button mat-raised-button color="primary" type="submit">Submit</button>
</form>
</div>
<div class="column" [style.width.%]="historyColumnWidth">
<h2>What colleagues are saying...</h2>
<mat-card class="scrollable-card">
<mat-card-content class="scrollable-card-content">
<div *ngFor="let reason of historicalReasons">
"{{ reason }}"
</div>
<div *ngFor="let reason of historicalReasons">
"{{ reason }}"
</div>
</mat-card-content>
</mat-card>
</div>
</div>
</div>
50 changes: 46 additions & 4 deletions ...src/app/main/copilot/copilot-surveys/new-copilot-survey/new-copilot-survey.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,13 +29,55 @@
position: relative;
margin-bottom: 15px;
> * {
position:absolute;
transform:translateX(-50%);
position: absolute;
transform: translateX(-50%);
}
}
}


form {
max-width: 1250px;
}
}

.two-column-layout {
display: flex;
justify-content: space-between;
}

.column {
padding: 10px;
}

.scrollable-card {
max-height: 600px; /* Increase the maximum height for the card */
overflow: hidden; /* Hide the scrollbar */
white-space: normal; /* Ensure text wraps properly */
position: relative;
margin-top: 20px; /* Add margin to separate from the header */
}

.scrollable-card-content {
position: relative;
animation: scroll 30s linear infinite; /* Adjust duration as needed */
padding-top: 60px; /* Add padding to ensure content does not overlap with the title */
}

.scrollable-card-content div {
margin-bottom: 3em; /* Add extra space between reasons */
}

@keyframes scroll {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-50%);
}
}

/* Center the mat-card-title */
.mat-card-title {
text-align: center;
width: 100%;
margin-bottom: 20px; /* Add margin to separate from the content */
}
89 changes: 88 additions & 1 deletion ...d/src/app/main/copilot/copilot-surveys/new-copilot-survey/new-copilot-survey.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,18 @@ import { ActivatedRoute, Params } from '@angular/router';
export class NewCopilotSurveyComponent implements OnInit {
surveyForm: FormGroup;
params: Params = {};
defaultPercentTimeSaved = 30;
defaultPercentTimeSaved = 25;
id: number;

initializationReason = 'I chose ' + this.defaultPercentTimeSaved + '% because Copilot enabled me to...';
didNotUsedCopilotReason = 'I did not use Copilot...';
usedCopilotWithPercentTimeSaved = (percent: number) => `I chose ${percent}% because Copilot enabled me to...`;
usedCopilotWithPercentTimeSavedZero = 'I chose 0% because Copilot did not help me...';

formColumnWidth = 70; // Percentage width for the form column
historyColumnWidth = 30; // Percentage width for the history column
historicalReasons: string[] = []; // Array to hold historical reasons

constructor(
private fb: FormBuilder,
private copilotSurveyService: CopilotSurveyService,
Expand All @@ -43,13 +52,91 @@ export class NewCopilotSurveyComponent implements OnInit {

ngOnInit() {
this.route.queryParams.subscribe(params => this.params = params);

// Page Initialization
this.setReasonDefault();
this.loadHistoricalReasons();

this.surveyForm.get('usedCopilot')?.valueChanges.subscribe((value) => {
if (!value) {
this.surveyForm.get('percentTimeSaved')?.setValue(0);
this.setReasonDefault();
} else {
this.surveyForm.get('percentTimeSaved')?.setValue(this.defaultPercentTimeSaved);
this.setReasonDefault();
}
});

this.surveyForm.get('percentTimeSaved')?.valueChanges.subscribe((value) => {
if (!this.surveyForm.get('reason')?.dirty) {
this.setReasonDefault();
} else {
this.promptUserForConfirmation();
}
});

// Debugging: Confirm the reason list is not empty
console.log('Historical Reasons:', this.historicalReasons);

// Duplicate the content dynamically
this.duplicateContent();
}

duplicateContent() {
const content = document.querySelector('.scrollable-card-content');
if (content) {
const clone = content.cloneNode(true);
content.appendChild(clone);
}
}

setReasonDefault() {
const reasonControl = this.surveyForm.get('reason');
if (reasonControl && !reasonControl.dirty) {
const percentTimeSaved = this.surveyForm.get('percentTimeSaved')?.value;
const usedCopilot = this.surveyForm.get('usedCopilot')?.value;
reasonControl.setValue(
usedCopilot
? (percentTimeSaved === 0 ? this.usedCopilotWithPercentTimeSavedZero : this.usedCopilotWithPercentTimeSaved(percentTimeSaved))
: this.didNotUsedCopilotReason
);
}
}

onReasonFocus() {
const reasonControl = this.surveyForm.get('reason');
if (reasonControl && !reasonControl.value) {
this.setReasonDefault();
}
}

promptUserForConfirmation() {
// Implement the logic to prompt the user with a warning
alert("Confirm that reason and percentTimeSaved are correct.");
}

loadHistoricalReasons() {
// Load historical reasons from the service or any other source
this.historicalReasons = [
'I chose 20% because Copilot helped me write boilerplate code.',
'I chose 50% because Copilot enabled me to focus on complex logic.',
'I chose 0% because Copilot did not help me in this PR.',
'I chose 30% because Copilot helped me with repetitive tasks.',
'I chose 40% because Copilot improved my coding efficiency.',
'I chose 60% because Copilot reduced my development time.',
'I chose 70% because Copilot provided useful code suggestions.',
'I chose 80% because Copilot helped me with complex logic.',
'I chose 90% because Copilot made my coding faster.',
'I chose 100% because Copilot was extremely helpful.'
// Add more historical reasons as needed
];

// Debugging: Confirm the scrolling content is not empty
if (this.historicalReasons.length > 0) {
console.log('Scrolling content is not empty');
} else {
console.log('Scrolling content is empty');
}
}

parseGitHubPRUrl(url: string) {
Expand Down
Loading