Better onboarding on demo instance

CHANGELOG.md

@@ -37,6 +37,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.md).
 ### Changed
 - Made the navbar scrollable on small screens. [#4413](https://github.com/scalableminds/webknossos/pull/4413)
 - Opening the settings sidebar when viewing a dataset or tracing defaults to the dataset settings now. [#4425](https://github.com/scalableminds/webknossos/pull/4425)
+- Better onboarding experience for new users on webknossos.org. [#4439](https://github.com/scalableminds/webknossos/pull/4439)
 
 ### Fixed
 - Fixed that for uint16 data layer the default value range of [0, 255] was used, causing most of the data to look white without manual adjustments. Now the correct range of [0, 65535] is used as default. [#4381](https://github.com/scalableminds/webknossos/pull/4381)

app/Startup.scala

@@ -100,7 +100,6 @@ class Startup @Inject()(actorSystem: ActorSystem,
       conf.Mail.Smtp.tls,
       conf.Mail.Smtp.user,
       conf.Mail.Smtp.pass,
-      conf.Mail.Subject.prefix
     )
     actorSystem.actorOf(Props(new Mailer(mailerConf)), name = "mailActor")
   }

app/controllers/Authentication.scala

@@ -168,6 +168,13 @@ class Authentication @Inject()(actorSystem: ActorSystem,
       Some(finalName)
   }
 
+  def callMeMaybe = Action { implicit request =>
+    {
+      Mailer ! Send(defaultMails.registerMailDemo("Neuer Nutzer", "[email protected]"))
+      Ok
+    }
+  }
+
   def handleRegistration = Action.async { implicit request =>
     signUpForm.bindFromRequest.fold(
       bogusForm => Future.successful(BadRequest(bogusForm.toString)),
@@ -454,6 +461,9 @@ class Authentication @Inject()(actorSystem: ActorSystem,
                       defaultMails.newOrganizationMail(organization.displayName,
                                                        email.toLowerCase,
                                                        request.headers.get("Host").headOption.getOrElse("")))
+                    if (conf.Features.isDemoInstance) {
+                      Mailer ! Send(defaultMails.registerMailDemo(user.firstName, user.email))
+                    }
                     Ok
                   }
                 }

app/oxalis/mail/DefaultMails.scala

@@ -17,21 +17,24 @@ class DefaultMails @Inject()(conf: WkConf) {
 
   val defaultFrom = "[email protected]"
 
+  val demoSender = conf.Mail.demoSender
+
   val newOrganizationMailingList = conf.WebKnossos.newOrganizationMailingList
 
   def registerAdminNotifyerMail(user: User, email: String, brainDBResult: Option[String], organization: Organization) =
     Mail(
       from = email,
       headers = Map("Sender" -> defaultFrom),
-      subject = s"A new user (${user.name}) registered on $uri for ${organization.displayName} (${organization.name})",
+      subject =
+        s"webKnossos | A new user (${user.name}) registered on $uri for ${organization.displayName} (${organization.name})",
       bodyText = html.mail.registerAdminNotify(user, brainDBResult, uri).body,
       recipients = List(organization.newUserMailingList)
     )
 
   def overLimitMail(user: User, projectName: String, taskId: String, annotationId: String, organization: Organization) =
     Mail(
       from = defaultFrom,
-      subject = s"Time limit reached. ${user.abreviatedName} in $projectName",
+      subject = s"webKnossos | Time limit reached. ${user.abreviatedName} in $projectName",
       bodyText = html.mail.timeLimit(user.name, projectName, taskId, annotationId, uri).body,
       recipients = List(organization.overTimeMailingList)
     )
@@ -40,33 +43,43 @@ class DefaultMails @Inject()(conf: WkConf) {
       implicit messages: Messages) =
     Mail(
       from = defaultFrom,
-      subject = "Thanks for your registration on " + uri,
+      subject = "webKnossos | Thanks for your registration on " + uri,
       bodyText = html.mail.register(name, brainDBresult.map(Messages(_)), enableAutoVerify).body,
       recipients = List(receiver)
     )
 
+  def registerMailDemo(name: String, receiver: String)(implicit messages: Messages) =
+    Mail(
+      from = demoSender,
+      subject = "Welcome to webKnossos",
+      bodyHtml = html.mail.registerDemo(name).body,
+      recipients = List(receiver)
+    )
+
   def activatedMail(name: String, receiver: String) =
     Mail(from = defaultFrom,
-         subject = s"Your account on $uri was activated",
+         subject = s"webKnossos | Your account on $uri was activated",
          bodyText = html.mail.validated(name, uri).body,
          recipients = List(receiver))
 
   def changePasswordMail(name: String, receiver: String) =
     Mail(from = defaultFrom,
-         subject = "Your webKnossos password was changed",
+         subject = "webKnossos | Your webKnossos password was changed",
          bodyText = html.mail.passwordChanged(name).body,
          recipients = List(receiver))
 
   def resetPasswordMail(name: String, receiver: String, token: String) =
-    Mail(from = defaultFrom,
-         subject = "Confirm resetting your webKnossos password",
-         bodyText = html.mail.resetPassword(name, uri, token).body,
-         recipients = List(receiver))
+    Mail(
+      from = defaultFrom,
+      subject = "webKnossos | Confirm resetting your webKnossos password",
+      bodyText = html.mail.resetPassword(name, uri, token).body,
+      recipients = List(receiver)
+    )
 
   def newOrganizationMail(organizationName: String, creatorEmail: String, domain: String) =
     Mail(
       from = defaultFrom,
-      subject = "New webKnossos Organization created on " + domain,
+      subject = "webKnossos | New webKnossos Organization created on " + domain,
       bodyHtml = html.mail.newOrganization(organizationName, creatorEmail, domain).body,
       recipients = List(newOrganizationMailingList)
     )

app/utils/WkConf.scala

@@ -43,9 +43,7 @@ class WkConf @Inject()(configuration: Configuration) extends ConfigReader {
       val user = get[String]("mail.smtp.user")
       val pass = get[String]("mail.smtp.pass")
     }
-    object Subject {
-      val prefix = get[String]("mail.subject.prefix")
-    }
+    val demoSender = get[String]("mail.demoSender")
   }
 
   object WebKnossos {

app/views/mail/register.scala.html

@@ -1,15 +1,5 @@
-@( name: String, brainDBresult: Option[String], enableAutoVerify: Boolean )
-Hello @name,
+@( name: String, brainDBresult: Option[String], enableAutoVerify: Boolean ) Hello @name, thank you
+for signing up for an webKnossos account! @if(!enableAutoVerify) { Your account is going to get
+activated after an administrator has reviewed your details. } @if(brainDBresult.isDefined) {
+@brainDBresult.get } Enjoy using webKnossos Your webKnossos Team
 
-thank you for signing up for an webKnossos account!
-@if(!enableAutoVerify) {
-Your account is going to get activated after an administrator has reviewed your details.
-}
-
-@if(brainDBresult.isDefined) {
-@brainDBresult.get
-}
-
-Enjoy using webKnossos
-
-Your webKnossos Team

app/views/mail/registerDemo.scala.html

@@ -0,0 +1,126 @@
+@( name: String )
+<html>
+  <body>
+    <style type="text/css">
+      body,
+      p,
+      li,
+      h2 {
+        font-family: "Monospaced Number", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+          "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial,
+          sans-serif;
+        font-size: 14px;
+        line-height: 1.5;
+      }
+    </style>
+    <div style="margin-left: auto; margin-right: auto; max-width: 600px;">
+      <p>
+        <a href="https://webknossos.org"
+          ><img
+            src="https://static.webknossos.org/mails/email-header.600.png"
+            alt="webKnossos"
+            style="width: 100%; max-width: 600px;"
+        /></a>
+      </p>
+
+      <p>Hi @name,</p>
+      <p>
+        welcome to your new webKnossos account. You are ready to start exploring and collaboratively
+        annotate large 3D datasets.
+      </p>
+      <h2 style="font-size: 1rem;">Get started</h2>
+      <ul style="font-size: 1rem;">
+        <li>
+          Use webKnossos for free with any of the public datasets on
+          <a href="https://webknossos.org">webknossos.org</a>. All webKnossos features can be used
+          with your new free account.
+        </li>
+        <li>
+          Upload your own dataset into your own space private workspace. If you want, you can
+          publish your dataset into our public gallery.
+        </li>
+        <li>
+          Invite colleagues from your lab or external collaborators to work with your data.
+          webKnossos works great for small teams and supports management of large annotators crowds.
+        </li>
+      </ul>
+
+      <h2 style="font-size: 1rem;">Get support</h2>
+      <p>
+        To learn more about how to get the most out of webKnossos,
+        <a href="https://docs.webknossos.org">check out the documentation</a> or
+        <a href="https://www.youtube.com/watch?v=tNwDvo5MnDc">watch this introductory video</a>.
+      </p>
+      <p>
+        <a href="https://docs.webknossos.org"
+          ><img
+            src="https://static.webknossos.org/mails/screen-docs.png"
+            alt="screenshot of documentation"
+            width="200"
+            height="137"
+        /></a>
+        <a href="https://www.youtube.com/watch?v=tNwDvo5MnDc"
+          ><img
+            src="https://static.webknossos.org/mails/screen-video.png"
+            alt="screenshot of intro video"
+            width="200"
+            height="137"
+        /></a>
+      </p>
+
+      <p>
+        Please don’t hesitate to get in touch with me, if you have any questions about using
+        webKnossos.
+      </p>
+
+      <p>I am looking forward to hearing from you.</p>
+
+      <p>Best regards,<br />Norman</p>
+
+      <p style="text-align: center; padding-top: 30px;">
+        <a href="https://webknossos.org"
+          ><img
+            src="https://static.webknossos.org/mails/icon-webknossos.png"
+            alt="webKnossos"
+            style="width: 50px; height: 50px;"
+        /></a>
+        &nbsp;
+        <a href="https://docs.webknossos.org"
+          ><img
+            src="https://static.webknossos.org/mails/icon-docs.png"
+            alt="Documentation"
+            style="width: 50px; height: 50px;"
+        /></a>
+        &nbsp;
+        <a href="https://www.youtube.com/channel/UCVQqjQ50lJORCZuLxnEE-tA"
+          ><img
+            src="https://static.webknossos.org/mails/icon-video.png"
+            alt="YouTube Channel"
+            style="width: 50px; height: 50px;"
+        /></a>
+        &nbsp;
+        <a href="https://twitter.com/webknossos"
+          ><img
+            src="https://static.webknossos.org/mails/icon-twitter.png"
+            alt="Twitter Channel"
+            style="width: 50px; height: 50px;"
+        /></a>
+      </p>
+
+      <div style="height: 60px;">&nbsp;</div>
+      <p style="color: #888; font-size: 0.6rem;">
+        You are receiving this email because you signed up for an account on webKnossos. You may
+        cancel your account at any time.
+      </p>
+      <p style="color: #888; font-size: 0.6rem;">
+        <a href="https://webknossos.org" style="color: #888;">webknossos.org</a> is a service by<br />
+        scalable minds GmbH &bull;
+        <a href="mailto:hello@@scalableminds.com" style="color: #888;">hello@@scalableminds.com</a
+        ><br />
+        Großbeerenstr. 15, 14482 Potsdam, Germany &bull; Amtsgericht Potsdam, HRB 25763 &bull;
+        Managing Directors: Tom Bocklisch, Tom Herold, Norman Rzepka
+      </p>
+      <div style="height: 60px;">&nbsp;</div>
+    </div>
+  </body>
+</html>

conf/application.conf

@@ -136,7 +136,7 @@ mail {
     user = ""
     pass = ""
   }
-  subject.prefix = "webKnossos | "
+  demoSender = ""
 }
 
 # Airbrake config (optional)

conf/webknossos.latest.routes

@@ -12,6 +12,7 @@ POST          /maintenance
 DELETE        /maintenance                                                      controllers.MaintenanceController.closeMaintenance
 
 # Authentication
+GET           /auth/callMeMaybe                                                 controllers.Authentication.callMeMaybe
 GET           /auth/autoLogin                                                   controllers.Authentication.autoLogin
 POST          /auth/register                                                    controllers.Authentication.handleRegistration
 POST          /auth/login                                                       controllers.Authentication.authenticate

docs/dashboard.md

@@ -3,7 +3,7 @@
 The Dashboard is the entry point to webKnossos.
 You can manage your datasets, create annotations, resume existing annotations and manage active tasks.
 
-## Datasets
+## My Datasets
 This screen shows all the available and accessible datasets for a user.
 The presentation differs corresponding to the user role.
 Normal users can start or continue annotations and work on tasks.
@@ -18,7 +18,7 @@ Learn more about managing datasets in the [Datasets guide](./datasets.md).
 
 {% embed url="https://www.youtube.com/watch?v=naPL1jfCdOc" %}
 
-## Tasks
+## My Tasks
 
 With Tasks, you can coordinate large annotation projects with your users.
 Tasks are small assignments that are automatically distributed to users.
@@ -29,7 +29,7 @@ Read more about the tasks feature in the [Tasks and Projects guide](./tasks.md).
 
 ![Work with Tasks](./images/dashboard_tasks.png)
 
-## Explorative Annotations
+## My Annotations (Explorative)
 Explorative Annotations are all skeleton or volume annotations that do not belong to a task.
 They are created by starting new annotations from the datasets screen or by uploading [NML files](./data_formats.md#nml).
 
@@ -48,7 +48,7 @@ Read more about sharing your own annotations in the [Sharing guide](./sharing.md
 
 ![View Shared Annotations](./images/shared_annotations_tab.png)
 
-## Dataset Gallery
+## Featured Publications
 
 This screen is the same gallery that is used on the public webKnossos screen.
 Here, it also includes non-public datasets.

docs/getting_started.md

@@ -10,23 +10,20 @@ Feel free to [drop us a line](mailto:[email protected]) or [create a Pull
 
 ## Create a webknossos.org Account
 Signing up to [webknossos.org](https://webknossos.org) is the easiest way to get started with webKnossos.
-Go to [webknossos.org](https://webknossos.org) and create an account in the "Demo_Lab" organization.
+Go to [webknossos.org](https://webknossos.org) and create a new account.
 Please make sure to enter a correct email address.
-After you have entered your details, the account will be automatically activated.
-
-You can also choose to create a new organization which will allow you to upload private datasets at a later point in time and manage other users.
-For testing purposes, the "Demo_Lab" organization is preferred.
+After you have entered your details, the account will be automatically activated and logged in.
 
 Accounts on [webknossos.org](https://webknossos.org) are free to use with published datasets.
-If you wish to use private datasets, there is a fee that covers storage costs and also provides support services such as dataset conversions.
-Check out the [pricing page for more details](https://webknossos.org/pricing).
-You can also rent a fully-managed dedicated webKnossos server from scalable minds or install webKnossos on your own server.
+If you wish to use private datasets, there is an upload limit of 10GB.
+For more data storage, checkout the [pricing page for paid plans](https://webknossos.org/pricing) that covers storage costs and provide support services such as dataset conversions.
+You can also rent a [fully-managed dedicated webKnossos server](https://webknossos.org/pricing) from scalable minds or install webKnossos [on your own server](./installation.md).
 
 
 ## Explore Published Datasets
 On [webknossos.org](https://webknossos.org) there are already a bunch of published community datasets available for you to explore.
-To get started, navigate to the `Datasets` tab on your [dashboard](./dashboard.md).
-There, you find a list of all available datasets.
+To get started, navigate to the `Featured Publications` tab on your [dashboard](./dashboard.md).
+There, you find a list of all available public datasets.
 Click on the dataset name to open the dataset.
 
 ![The list of available datasets](./images/getting_started-datasets.png)
@@ -53,7 +50,6 @@ You can also change the size of the viewports to see more details in your data a
 
 ## Your First Annotation
 Click the `Create Tracing` button from the view mode of a dataset to create your first annotation.
-Alternatively, navigate to the `Datasets` tab on your [dashboard](./dashboard.md), identify a dataset that your interested in and click on `Start Skeleton Tracing` to create a new skeleton annotation.
 webKnossos will launch the main annotation screen allowing you to navigate your dataset and place markers to reconstruct skeletons.
 
 Drag the mouse while pressing the left mouse button to navigate the dataset.

flow-typed/npm/react-router-dom_v4.x.x.js → flow-typed/npm/react-router-dom_v5.x.x.js

@@ -155,4 +155,6 @@ declare module "react-router-dom" {
     pathname: string,
     options?: MatchPathOptions | string
   ): null | Match;
+
+  declare export function useHistory(): RouterHistory;
 }

frontend/javascripts/admin/api_flow_types.js

@@ -138,6 +138,7 @@ type APIDatasetBase = APIDatasetId & {
   +lastUsedByUser: number,
   +isForeign: boolean,
   +sortingKey: number,
+  +owningOrganization: string,
   +publication: ?APIPublication,
 };
 
@@ -247,7 +248,13 @@ export type APIAnnotationType = $Keys<typeof APIAnnotationTypeEnum>;
 
 export type APIAnnotationVisibility = "Private" | "Internal" | "Public";
 
-export type TracingType = "skeleton" | "volume" | "hybrid";
+export const TracingTypeEnum = Enum.make({
+  skeleton: "skeleton",
+  volume: "volume",
+  hybrid: "hybrid",
+});
+
+export type TracingType = $Keys<typeof TracingTypeEnum>;
 
 export type APITaskType = {
   +id: string,