Add Gold Standard Videos For Checking Reliability (#3)

* Edit and improve the text.
* Add a label_state_admin column in the database for admin researchers.
* Add score columns in the database.
* Separate researcher labels and citizen labels for comparing the reliability.
* Edit the video examples on the index page.
* Fix a bug related to changing the video to the bad data state.
* Add gold standards to video batches requested by citizens (not researchers).
* Add and compute a score based on gold standards.
* Add a new command to view the history of the migration in the db.sh file.
* Add GET methods for getting pos and neg labels by researchers.
* Display user score on the account dialog.
* Add https support.
* Use different Google Analytics Tracker Ids for production and staging.
* Refactor code and move common functions to the Util.js file.
* Split the index and label page to avoid deleting video tags (iPhone safari only allows 16 video tags at once).
* Improve the shell script for adding videos on the background.
* Improve the logic of video autoplay testing.
* Remove the layout of three videos in a row.

back-end/www/bg_add_community_videos.sh

@@ -1,4 +1,4 @@
-sudo screen -X quit
+sudo screen -x "add_videos"
 sudo rm screenlog.0
 
 # For python in conda env

back-end/www/db.sh

@@ -13,4 +13,7 @@ then
 elif [ "$1" = "downgrade" ]
 then
   flask db downgrade
+elif [ "$1" = "history" ]
+then
+  flask db history
 fi

back-end/www/migrations/versions/066148ade5a6_add_a_new_label_state_column_for_admin_.py

@@ -0,0 +1,38 @@
+"""add a new label state column for admin reseacher
+
+Revision ID: 066148ade5a6
+Revises: 2731d42ed66e
+Create Date: 2019-02-13 13:46:11.867397
+
+"""
+from alembic import op
+import sqlalchemy as sa
+
+
+# revision identifiers, used by Alembic.
+revision = '066148ade5a6'
+down_revision = '2731d42ed66e'
+branch_labels = None
+depends_on = None
+
+
+def upgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.drop_index(op.f('ix_video_label_state'), table_name='video')
+    op.alter_column('video', 'label_state', existing_nullable=False, new_column_name='label_state_admin', existing_type=sa.Integer())
+    op.add_column('video', sa.Column('label_state', sa.Integer(), nullable=False))
+    op.create_index(op.f('ix_video_label_state'), 'video', ['label_state'], unique=False)
+    op.create_index(op.f('ix_video_label_state_admin'), 'video', ['label_state_admin'], unique=False)
+    label_state_column = sa.sql.table('video', sa.sql.column('label_state'))
+    op.execute(label_state_column.update().values(**{'label_state': -1}))
+    # ### end Alembic commands ###
+
+
+def downgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.drop_index(op.f('ix_video_label_state_admin'), table_name='video')
+    op.drop_index(op.f('ix_video_label_state'), table_name='video')
+    op.drop_column('video', 'label_state')
+    op.alter_column('video', 'label_state_admin', existing_nullable=False, new_column_name='label_state', existing_type=sa.Integer())
+    op.create_index(op.f('ix_video_label_state'), 'video', ['label_state'], unique=False)
+    # ### end Alembic commands ###

back-end/www/migrations/versions/3df480339533_add_score_of_user_labeling.py

@@ -0,0 +1,40 @@
+"""add score of user labeling
+
+Revision ID: 3df480339533
+Revises: 066148ade5a6
+Create Date: 2019-02-15 12:01:09.656353
+
+"""
+from alembic import op
+import sqlalchemy as sa
+
+
+# revision identifiers, used by Alembic.
+revision = '3df480339533'
+down_revision = '066148ade5a6'
+branch_labels = None
+depends_on = None
+
+
+def upgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.add_column('batch', sa.Column('num_gold_standard', sa.Integer(), nullable=False))
+    op.add_column('batch', sa.Column('num_unlabeled', sa.Integer(), nullable=False))
+    op.add_column('batch', sa.Column('score', sa.Integer(), nullable=True))
+    op.add_column('user', sa.Column('score', sa.Integer(), nullable=False))
+    score_column = sa.sql.table('user', sa.sql.column('score'))
+    op.execute(score_column.update().values(**{'score': 0}))
+    num_unlabeled_column = sa.sql.table('batch', sa.sql.column('num_unlabeled'))
+    op.execute(num_unlabeled_column.update().values(**{'num_unlabeled': 16}))
+    num_gold_standard_column = sa.sql.table('batch', sa.sql.column('num_gold_standard'))
+    op.execute(num_gold_standard_column.update().values(**{'num_gold_standard': 0}))
+    # ### end Alembic commands ###
+
+
+def downgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.drop_column('user', 'score')
+    op.drop_column('batch', 'score')
+    op.drop_column('batch', 'num_unlabeled')
+    op.drop_column('batch', 'num_gold_standard')
+    # ### end Alembic commands ###

front-end/css/custom.css

@@ -133,17 +133,21 @@ body,
   box-sizing: border-box;
 }
 
-#sign-in-text,
-#hello-text {
+#sign-in-text {
   margin: 0px !important;
 }
 
-#google-sign-out-button {
+#hello-text {
+  margin: 0px !important;
   display: none;
 }
 
-.init-hidden {
-  display: none !important;
+#user-score-text {
+  font-weight: bold;
+}
+
+#google-sign-out-button {
+  display: none;
 }
 
 .force-hidden {
@@ -220,6 +224,11 @@ body,
   font-style: normal;
   font-weight: normal;
   width: 100%;
+  display: block;
+}
+
+.gallery a .label-control i:last-child {
+  margin-top: 5px;
 }
 
 .custom-select {
@@ -304,14 +313,7 @@ body,
   }
 }
 
-@media screen and (min-width: 500px) and (max-width: 700px) {
-  .gallery a {
-    flex: 1 0 33.3% !important;
-    max-width: 33.3% !important;
-  }
-}
-
-@media screen and (min-width: 300px) and (max-width: 500px) {
+@media screen and (min-width: 300px) and (max-width: 700px) {
   .gallery a {
     flex: 1 0 50% !important;
     max-width: 50% !important;
@@ -333,4 +335,4 @@ body,
     max-width: 100%;
     width: 100%;
   }
-}
+}

front-end/gallery.html

@@ -18,6 +18,7 @@
   <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
   <script src="lib/pagination/pagination.js"></script>
   <script src="js/widgets.js"></script>
+  <script src="js/Util.js"></script>
   <script src="js/GoogleAnalyticsTracker.js"></script>
   <script src="js/GoogleAccountDialog.js"></script>
   <script src="js/VideoTestDialog.js"></script>
@@ -65,11 +66,13 @@
               The gallery is displayed in the admin mode.
             </p>
             <div class="control-group admin-control add-bottom-margin">
-              <a class="custom-button-flat" href="?method=get_pos_labels">Pos</a>
-              <a class="custom-button-flat" href="?method=get_neg_labels">Neg</a>
-              <a class="custom-button-flat" href="?method=get_pos_gold_labels">Gold Pos</a>
-              <a class="custom-button-flat" href="?method=get_neg_gold_labels">Gold Neg</a>
-              <a class="custom-button-flat" href="?method=get_partial_labels">Partial</a>
+              <a class="custom-button-flat" href="?method=get_pos_labels">P</a>
+              <a class="custom-button-flat" href="?method=get_neg_labels">N</a>
+              <a class="custom-button-flat" href="?method=get_partial_labels">?</a>
+              <a class="custom-button-flat" href="?method=get_pos_labels_by_researcher">P (admin)</a>
+              <a class="custom-button-flat" href="?method=get_neg_labels_by_researcher">N (admin)</a>
+              <a class="custom-button-flat" href="?method=get_pos_gold_labels">Gold P</a>
+              <a class="custom-button-flat" href="?method=get_neg_gold_labels">Gold N</a>
               <a class="custom-button-flat" href="?method=get_bad_labels">Bad</a>
             </div>
           </div>
@@ -79,7 +82,7 @@
         </div>
         <div class="flex-row">
           <div class="flex-item flex-column full-width">
-            <div id="page-control" class="control-group add-top-margin init-hidden">
+            <div id="page-control" class="control-group add-top-margin force-hidden">
               <button id="page-back" class="custom-button-flat large stretch-on-mobile" disabled><img src="img/back.png"><span>Back</span></button>
               <div id="page-navigator" class="stretch-on-mobile"></div>
               <button id="page-next" class="custom-button-flat large stretch-on-mobile"><img src="img/next.png"><span>Next</span></button>