2280 add quick summary of num missions, distance, labels, validations, and accuracy to dashboard #2289

jonfroehlich · 2020-10-01T22:30:09Z

Addresses #2280 (and parts of the very old #1363) by:

Adding the number of completed missions, total distance audited, num labels, num validations, and user accuracy to dashboard
Removing the old version of these summary stats (which was in a table rather than an iconified design)
Removing the the visualization of audit activity (which I didn't consider useful or important). If we want a historical visualization of activity, I suggest making a new Issue and developing one around labels or missions vs audits
Removed the table of previous activity. I didn't consider this important either and I'm starting to make room for new user dashboard changes like the badges, etc. (See User dashboard: add badges to dashboard #2281 and User dashboard: let users see their recently validated labels #2288, for example).

English

Old

New

Spanish

Old

New

Other

I also tested it as a brand new user and the dashboard properly showed me zeros and N/As, as appropriate. Here's a screenshot after validating 10 things (and completing 1 mission):

@misaugstad

but tabling for now until @misaugstad has a chance to work on some backend queries for accuracy, etc. (based on our recent IM discussion)

…abels, num validations

just commented them out for now as i don't think they're valuable/interesting to the user

…cy, and mission counts Added initial version of user dashboard with distance, labels, accuracy, and mission counts and iconography. Need to hook up accuracy to backend function. Also strips out old user dashboard stuff that's no longer relevant.

…for turkers

added getUserAccuracy to LabelValidationTable and tried to hook it up to userProfile.scala.html but it's failing

Still not fully working, however, see: #1363 (comment)

New code line: @LabelValidationTable.getUserAccuracy(user.get.userId).map(a => "$%.1f%%".format(a * 100)).getOrElse("N/A") Looks like this: #1363 (comment)

…Webpage into 1680-give-users-more-feedback-on-dashboard

Added validations as discussed #2280 (comment)

misaugstad · 2020-10-01T22:52:51Z

Love it!!! So exciting

jonfroehlich · 2020-10-01T22:56:02Z

Since we are no longer graphing a timeline and doing other things, we may be able to get rid of some of the many JavaScript imports (none of which are commented, so I don't know what they're associated with in the code).

<script type="text/javascript" src='@routes.Assets.at("javascripts/lib/d3.v3.js")'></script>
<script type="text/javascript" src='@routes.Assets.at("javascripts/lib/c3.min.js")'></script>
<script type="text/javascript" src='@routes.Assets.at("javascripts/lib/moment/moment.js")'></script>
<script type="text/javascript" src='@routes.Assets.at("javascripts/lib/moment/es.js")'></script>
<script type="text/javascript" src='@routes.Assets.at("javascripts/lib/underscore-min.js")'></script>
<script type="text/javascript" src='@routes.Assets.at("javascripts/Progress/build/Progress.js")'></script>
<script type="text/javascript" src='@routes.Assets.at("javascripts/lib/i18next.min.js")'></script>
<script type="text/javascript" src='@routes.Assets.at("javascripts/lib/i18nextXHRBackend.min.js")'></script>

We need to keep the LabelMap related code, of course, which I believe is all here:

<script type="text/javascript" src='@routes.Assets.at("javascripts/SVLabel/src/SVLabel/util/Utilities.js")'></script>
<script type="text/javascript" src='@routes.Assets.at("javascripts/SVLabel/src/SVLabel/util/UtilitiesSidewalk.js")'></script>
<script type="text/javascript" src='@routes.Assets.at("javascripts/SVLabel/src/SVLabel/util/UtilitiesColor.js")'></script>
<script type="text/javascript" src='@routes.Assets.at("javascripts/lib/turf.min.js")'></script>

misaugstad · 2020-10-01T22:59:32Z

Related to that, I just took a quick peek. And you removed the HTML elements for the audit count chart and the missions list, but you didn't remove the JavaScript that filled in that chart and table in Progress.js. We need to delete all that code that we're no longer using. And I believe that both the audit count chart and the missions list had endpoints created to get that data, so we should be able to delete all the code controller and model code that is used only for those things.

misaugstad · 2020-10-01T23:04:07Z

And for those imports, I imagine that we can probably get rid of d3, c3, and moment. But the i18next imports are for Spanish translations, and Progress includes all the JavaScript code for the page.

Underscore just adds nice functional programming helper functions, but I think the only place we happen to be using them right now is for the missions list chart, so that can probably go too.

jonfroehlich · 2020-10-01T23:05:14Z

TBH, Progress.js is such a generically named file and has no file-level header comments, so I just ignored it (for now). I figured you'd either (1) delete the archaic code yourself or (2) tell me what to delete given your greater familiarity with the codebase. :)

misaugstad · 2020-10-01T23:16:00Z

Agree that Progress.js should be renamed to UserDashboard.js or the like. But I do think that any time an HTML element is deleted, we should be searching the entire project for the div IDs and associated CSS class names and deleting the associated CSS/JS that isn't used anywhere else. I can still do that for this PR, but I'm mostly saying it because it is easy for either of us to forget to do that when coding or reviewing, so if both of us are trying to remember to do that, hopefully at least one of us remembers every time it happens 🙃

I should also add that to the PR template!

jonfroehlich · 2020-10-01T23:17:46Z

Sure. Totally agree. Let me know if you want me to do it. Otherwise, I'm gonna focus on #2281 with the goal of creating a PR tomorrow. As mentioned during our 1:1, I won't have as much time the rest of the quarter to dev as heavily as I've been the past 1.5 weeks.

So, trying to push on #2281 now that I've created this PR.

misaugstad · 2020-10-01T23:24:19Z

Yep, please go for it! Just know that it'll take me some time to get through all the open PRs you made 😁 but it'll all get closed out in the coming weeks

jonfroehlich · 2020-10-01T23:26:18Z

Gotcha. Hopefully this one won't take a couple of weeks as it's relatively straightforward and you helped with the backend stuff. Most of the heavy lifting here is just in coming up with a clean design, making the icons, etc. I think it would be nice to merge this PR alongside @rpechuk's leaderboard work as they complement each other.

jonfroehlich · 2020-10-01T23:29:04Z

Also note that we still have this (for when the user is a turker):

@* Only show this table if the current user is a turker *@
        @if(user && user.get.role.getOrElse("") == "Turker") {
            <div class="row" style="margin-top: 20px">
                <table class="table table-striped table-condensed">
                    <tr>
                        <th>@Messages("dashboard.distance")</th>
                        <th>@Messages("dashboard.missions")</th>
                        <th>Total Reward Earned</th>
                    </tr>
                    <tr>
                        <!-- The id='td-total-distance-audited' is automatically filled by "javascripts/Progress/build/Progress.js"-->
                        <td id="td-total-distance-audited">Hello</td>
                        <td>@MissionTable.countCompletedMissionsByUserId(user.get.userId, includeOnboarding = false)</td>
                        <td id="td-total-reward-earned"></td>
                    </tr>
                </table>
            </div>
        }

Related to this, is there any reason why a turker would want to see the timeline chart of audit activity or the table?

which corresponds to:

<div class="row">
            <table class="table table-striped table-condensed">
                <tr><th>@Messages("dashboard.contributions")</th></tr>
                <tr><td><div id="audit-count-chart"></div></td></tr>
            </table>
        </div>
        <div class="row">
            <table class="table table-striped table-fixed">
                <thead>
                    <tr>
                        <th class="col-xs-12">@Messages("dashboard.labels.per.mission")</th>
                    </tr>
                    <tr>
                    <th class="col-xxs-1">@Messages("dashboard.mission.number")</th>
                    <th class="col-date">@Messages("dashboard.date")</th>
                    <th class="col-neighborhood">@Messages("dashboard.neighborhood")</th>
                    <th class="col-xxs-1">@Messages("curb.ramp")</th>
                    <th class="col-xxs-1">@Messages("missing.ramp")</th>
                    <th class="col-xxs-1">@Messages("obstacle")</th>
                    <th class="col-xxs-1">@Messages("surface.problem")</th>
                    <th class="col-xxs-1">@Messages("no.sidewalk")</th>
                    <th class="col-xxs-1">@Messages("other")</th>
                </tr></thead>
                <tbody id="task-contribution-table" ></tbody>
            </table>
        </div>

As per our discussion here (#2289 (comment)), I removed outdated JavaScript code from Progress.js that is no longer relevant given the user dashboard redesign Also added in a conditional for this: document.getElementById("td-total-distance-audited") which will only exist when the user is a turker

Per our discussion (#2289 (comment)), removed all unnecessary JavaScript libraries from userProfile.scala.html, including c3, d3, and moment. I also removed underscore.js

misaugstad · 2020-10-02T00:42:42Z

No I don't think there's a reason they would need/want to see that.

jonfroehlich · 2020-10-02T00:46:15Z

Ok. Good. Then I think we are ready again for the PR.

…

Sent from my iPhone

On Oct 1, 2020, at 5:42 PM, Mikey Saugstad ***@***.***> wrote: No I don't think there's a reason they would need/want to see that. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

misaugstad · 2020-10-02T00:49:13Z

Cool. Reminder to myself when I look at this to remove the routes/controller/model code associated with the ajax calls removed from Progress.js.

…Webpage into 1680-give-users-more-feedback-on-dashboard

misaugstad

I'm going to add comments throughout the code as I make changes just so that you know what I've been changing, but I'll likely just do most/all of it myself instead of asking you to fix stuff.

misaugstad · 2020-10-14T02:10:39Z

app/models/label/LabelValidationTable.scala

@@ -135,6 +137,48 @@ object LabelValidationTable {
    }
  }

+  /**
+   * Calculates and returns the user accuracy for the supplied userId. The accuracy calculation is performed


Our max line length (defined in the style guide) is 120 characters so these comments can extend a bit further.

misaugstad · 2020-10-14T02:15:05Z

app/models/label/LabelValidationTable.scala

+   */
+  def getUserAccuracy(userId: UUID): Option[Float] = db.withSession { implicit session =>
+    val accuracyQuery = Q.query[String, Option[Float]](
+      """SELECT CASE WHEN validated_count > 9 THEN accuracy ELSE NULL END AS accuracy


Make sure to change your settings to use spaces instead of tabs, as per style guide.

misaugstad · 2020-10-14T02:22:03Z

app/models/label/LabelValidationTable.scala

@@ -238,6 +282,16 @@ object LabelValidationTable {
      .size.run
  }

+  /**
+   * Counts the number of validations performed by this user (given the supplied userId)


Include periods at the end of comments, as per style guide.

misaugstad · 2020-10-14T23:24:43Z

public/stylesheets/userProfile.css

+    font-family: raleway-extrabold, sans-serif;
+}
+
+.ps-skyline-stats-holder-stat-number {


Fixed the name of this and just updated the names of some other CSS in here.

misaugstad · 2020-10-14T23:25:06Z

app/views/userProfile.scala.html

+                <span class="primary-user-stats-holder-stat-header">@Messages("dashboard.validations")</span>
+                <span class="primary-user-stats-holder-stat-header">@Messages("dashboard.accuracy")</span>
+
+                <img src='@routes.Assets.at("images/icons/project_sidewalk_flag.png")'/>


Adding alt text to the images for screen readers and such

misaugstad · 2020-10-14T23:26:50Z

app/views/userProfile.scala.html

-            </table>
-        </div>
-        <div class="row">
-            <table class="table table-striped table-condensed">


Some of the CSS from removed HTML elements can be removed too

jonfroehlich and others added 16 commits September 23, 2020 16:43

made initial duplicate admin user table

4afbe0a

but tabling for now until @misaugstad has a chance to work on some backend queries for accuracy, etc. (based on our recent IM discussion)

added initial stats for num completed missions, total distance, num l…

8634162

…abels, num validations

removed daily contribution graphs and history table

7acbd32

just commented them out for now as i don't think they're valuable/interesting to the user

keeps the distance, missions, and total reward earned table but only …

7c1b89d

…for turkers

added some additional new files for badges

eb795b7

added getUserAccuracy to LabelValidationTable

18f055a

added getUserAccuracy to LabelValidationTable and tried to hook it up to userProfile.scala.html but it's failing

Updates getUserAccuracy calculation to fix type errors

f1a9dd8

Still not fully working, however, see: #1363 (comment)

Fixed the accuracy display

16d3a1e

New code line: @LabelValidationTable.getUserAccuracy(user.get.userId).map(a => "$%.1f%%".format(a * 100)).getOrElse("N/A") Looks like this: #1363 (comment)

added validation count in summary stats

2ea92ae

Merge branch 'develop' of https://github.com/ProjectSidewalk/Sidewalk…

6b3b5ec

…Webpage into 1680-give-users-more-feedback-on-dashboard

added validations to quick summary dash

3f06870

Added validations as discussed #2280 (comment)

added adaptive km vs mi based on @Messages("measurement.system")

fda5c02

Switched to using message table with spanish translations

2eb9800

removed commented out old dashboard code

ab35f1b

removed more old commented code

db5dd26

jonfroehlich requested a review from misaugstad October 1, 2020 22:30

jonfroehlich linked an issue Oct 1, 2020 that may be closed by this pull request

User dashboard: add quick summary of num missions, labels, accuracy, etc. #2280

Closed

4 tasks

jonfroehlich added 2 commits October 1, 2020 16:47

Removed unnecessary JavaScript includes

b2b4c6e

Per our discussion (#2289 (comment)), removed all unnecessary JavaScript libraries from userProfile.scala.html, including c3, d3, and moment. I also removed underscore.js

jonfroehlich mentioned this pull request Oct 3, 2020

2281 add badges to user dashboard #2297

Merged

misaugstad assigned jonfroehlich and misaugstad Oct 13, 2020

misaugstad added 9 commits October 13, 2020 14:34

Merge branch 'develop' of https://github.com/ProjectSidewalk/Sidewalk…

5dd4746

…Webpage into 1680-give-users-more-feedback-on-dashboard

Merge branch 'develop' of https://github.com/ProjectSidewalk/Sidewalk…

49f7518

…Webpage into 1680-give-users-more-feedback-on-dashboard

fixes some code style

63b2f86

moved unit conversion logic from model to controller

3d6ef5d

removes redundant info on turker user dashboard

31ec1d5

removes unused translations

328531c

removes unused icons

988fb2c

removing code that we no longer use

4ff212e

removed/renamed some CSS

4069d68

misaugstad reviewed Oct 14, 2020

View reviewed changes

misaugstad added 3 commits October 14, 2020 16:30

adds alt text to images on user dashboard

7fcf77c

removes uncropped icons that have been moved to branding repo

1b96b0f

adds newlines to end of dashboard.json files

37e50f7

misaugstad approved these changes Oct 15, 2020

View reviewed changes

misaugstad merged commit f844de2 into develop Oct 15, 2020

misaugstad deleted the 1680-give-users-more-feedback-on-dashboard branch October 15, 2020 00:29

misaugstad mentioned this pull request Oct 24, 2020

v6.12.0 #2334

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

2280 add quick summary of num missions, distance, labels, validations, and accuracy to dashboard #2289

2280 add quick summary of num missions, distance, labels, validations, and accuracy to dashboard #2289

jonfroehlich commented Oct 1, 2020 •

edited

Loading

misaugstad commented Oct 1, 2020

jonfroehlich commented Oct 1, 2020 •

edited

Loading

misaugstad commented Oct 1, 2020

misaugstad commented Oct 1, 2020

jonfroehlich commented Oct 1, 2020 •

edited

Loading

misaugstad commented Oct 1, 2020

jonfroehlich commented Oct 1, 2020

misaugstad commented Oct 1, 2020

jonfroehlich commented Oct 1, 2020

jonfroehlich commented Oct 1, 2020 •

edited

Loading

misaugstad commented Oct 2, 2020

jonfroehlich commented Oct 2, 2020 via email

misaugstad commented Oct 2, 2020

misaugstad left a comment

misaugstad Oct 14, 2020

misaugstad Oct 14, 2020

misaugstad Oct 14, 2020

misaugstad Oct 14, 2020

misaugstad Oct 14, 2020

misaugstad Oct 14, 2020

2280 add quick summary of num missions, distance, labels, validations, and accuracy to dashboard #2289

2280 add quick summary of num missions, distance, labels, validations, and accuracy to dashboard #2289

Conversation

jonfroehlich commented Oct 1, 2020 • edited Loading

English

Old

New

Spanish

Old

New

Other

misaugstad commented Oct 1, 2020

jonfroehlich commented Oct 1, 2020 • edited Loading

misaugstad commented Oct 1, 2020

misaugstad commented Oct 1, 2020

jonfroehlich commented Oct 1, 2020 • edited Loading

misaugstad commented Oct 1, 2020

jonfroehlich commented Oct 1, 2020

misaugstad commented Oct 1, 2020

jonfroehlich commented Oct 1, 2020

jonfroehlich commented Oct 1, 2020 • edited Loading

misaugstad commented Oct 2, 2020

jonfroehlich commented Oct 2, 2020 via email

misaugstad commented Oct 2, 2020

misaugstad left a comment

Choose a reason for hiding this comment

misaugstad Oct 14, 2020

Choose a reason for hiding this comment

misaugstad Oct 14, 2020

Choose a reason for hiding this comment

misaugstad Oct 14, 2020

Choose a reason for hiding this comment

misaugstad Oct 14, 2020

Choose a reason for hiding this comment

misaugstad Oct 14, 2020

Choose a reason for hiding this comment

misaugstad Oct 14, 2020

Choose a reason for hiding this comment

jonfroehlich commented Oct 1, 2020 •

edited

Loading

jonfroehlich commented Oct 1, 2020 •

edited

Loading

jonfroehlich commented Oct 1, 2020 •

edited

Loading

jonfroehlich commented Oct 1, 2020 •

edited

Loading