Skip to content

Commit ad49739

Browse files
dxenes1vrose99
andauthored
Add Getting Started Page (#279)
* adds getting started page * v0 getting started * additional formatting to support subheadings * local symbolic link added for quick access * text-bg contrast increased * updates getting started * resizes images * lint Co-authored-by: [email protected] <[email protected]>
1 parent dcbfbf1 commit ad49739

File tree

9 files changed

+281
-5
lines changed

9 files changed

+281
-5
lines changed

getting_started

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
neuvue_project/workspace/static/getting_started.md

neuvue_project/requirements.txt

+1
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ jedi==0.18.0
3535
jmespath==0.10.0
3636
jsonschema==3.2.0
3737
kiwisolver==1.3.2
38+
markdown==3.3.6
3839
matplotlib==3.4.3
3940
matplotlib-inline==0.1.3
4041
mysqlclient==2.0.3

neuvue_project/templates/base.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@
4747
{% if request.user|in_group:"AuthorizedUsers"%}
4848

4949
<li class="nav-item">
50-
<a class="nav-link disabled" href="{% url "getting-started" %}">Getting Started</a>
50+
<a class="nav-link" href="{% url "getting-started" %}">Getting Started</a>
5151
</li>
5252

5353
<li class="nav-item">

neuvue_project/templates/getting-started.html

+48
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,51 @@
66
<link rel="stylesheet" href="{% static 'css/tasks.css' %}">
77
{% endblock %}
88

9+
10+
{% block content %}
11+
<div class="basic workspace">
12+
<div class="d-flex justify-content-center">
13+
<div class="container-and-tabs">
14+
<div class="getting-started-container" >
15+
<div class="getting-started-content" >
16+
{{ getting_started_text|safe }}
17+
</div>
18+
</div>
19+
<div id="tabContainer" class="tab-holder">
20+
</div>
21+
</div>
22+
</div>
23+
</div>
24+
25+
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
26+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
27+
<script>
28+
// get all headers
29+
var headers = document.querySelectorAll("h1, h2, h3");
30+
// make a tab for them
31+
// Index tab scrolls to top of the information div
32+
var tabItems = "<button class='tab-item tab-header' onclick='scrolling(0,1)'>Index</button><br>";
33+
for (var i=0;i< headers.length;i++){
34+
var header = headers[i].innerHTML;
35+
if (headers[i].localName == "h1") {
36+
tabItems += `<button class="tab-item" onclick="scrolling(`+i+`)">`+header+`</button><br>`;
37+
} else if (headers[i].localName == "h2") {
38+
tabItems += `<button class="tab-item sub-h2" onclick="scrolling(`+i+`)">`+header+`</button><br>`;
39+
} else {
40+
tabItems += `<button class="tab-item sub-h3" onclick="scrolling(`+i+`)">`+header+`</button><br>`;
41+
}
42+
}
43+
var tabContainer = document.getElementById("tabContainer");
44+
tabContainer.innerHTML = tabItems;
45+
46+
function scrolling(headerIndex, indexItem=0){
47+
if (indexItem === 0){
48+
var scrollLocation = headers[headerIndex]
49+
} else {
50+
var scrollLocation = document.getElementsByClassName('getting-started-content')[0];
51+
}
52+
scrollLocation.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
53+
}
54+
55+
</script>
56+
{% endblock %}

neuvue_project/workspace/static/css/tasks.css

+73-1
Original file line numberDiff line numberDiff line change
@@ -233,4 +233,76 @@ tbody.pending >:nth-child(2) {
233233
overflow: hidden;
234234
text-overflow: ellipsis;
235235
vertical-align: top;
236-
}
236+
}
237+
.container-and-tabs{
238+
display: flex;
239+
flex-direction: row;
240+
}
241+
.tab-holder{
242+
margin-top: 2vh;
243+
flex-direction: column;
244+
left:0;
245+
margin-left: 1vw;
246+
}
247+
.tab-item{
248+
font-size: 12pt;
249+
padding: 5px 20px;
250+
border: transparent;
251+
color: var(--navbar-text);
252+
background-color: transparent;
253+
width: 10vw;
254+
text-align: left;
255+
}
256+
.tab-item:hover{
257+
color: var(--primary-accent-activated);
258+
}
259+
.sub-h2{
260+
padding: 5px 35px;
261+
}
262+
.sub-h3{
263+
padding: 5px 50px;
264+
}
265+
.tab-header{
266+
color: var(--navbar-text);
267+
font-size: 20pt;
268+
padding: 5px 20px;
269+
font-weight: 600;
270+
}
271+
272+
.getting-started-container {
273+
background-color: transparent !important;
274+
border-radius: 8px;
275+
border: 1.5px solid var(--secondary-accent);
276+
padding: 10px 10px 10px 10px;
277+
float: center;
278+
height: 87vh;
279+
margin-top: 2vh;
280+
margin-left: 3vw;
281+
width: 70vw;
282+
right: 0;
283+
overflow: auto;
284+
overflow-x: hidden;
285+
}
286+
287+
.getting-started-content{
288+
border-radius: 8px;
289+
padding: 20px 30px 20px 30px;
290+
background-color: var(--transparent-card-items-background);
291+
margin: 1%;
292+
width: 98%;
293+
min-height: 97%;
294+
font-size: 14pt;
295+
color: var(--primary-accent);
296+
}
297+
.getting-started-content h1 {
298+
font-size: 26pt;
299+
font-weight: 600;
300+
}
301+
.getting-started-content h2 {
302+
font-size: 22pt;
303+
font-weight: 500;
304+
}
305+
.getting-started-content h3 {
306+
font-size: 20pt;
307+
font-weight: 400;
308+
}

neuvue_project/workspace/static/css/workspace.css

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
/* PRIMARY COLORS #000e22;*/
55
--background: #120c1a;
66
--header-background: #3122449f;
7+
--header: #211431;
78
--navbar-text: #e6f1ff;
89
--primary-accent: #e6f1ff;
910
--primary-accent-activated: #8892b0;
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
# Getting Started with Neuvue
2+
3+
This page contains resources and documentation to help you get started proofreading on NeuVue. For any questions or comments, please reach out to the NeuVue development team on slack or email [email protected].
4+
5+
## Accessing the Proofreading Interface
6+
7+
### Home Page
8+
9+
<img src="https://i.imgur.com/BbuuTWg.png" alt="Home Page" width="800"/>
10+
11+
NeuVue's main home page will be always located at app.neuvue.io. To make the login process seamless, we use google sign-on service to create an account using a pre-existing google account. Once you are logged in, you will have access to additional pages on the top navigation bar on the web app. The top right item in the navigation bar will be your **username**. Click the dropdown here will provide access to user preferences and logging out. Usernames are assigned automatically based on your google credentials. Please contact Neuvue development team if you'd like to change your username. Passwords are automatically managed by the google account you used to create the NeuVue account.
12+
13+
Regular updates to the app will be posted to the "Recent Changes" widget located on the home screen. You can continue to the next step of accessing the proofreading interface by then clicking "My Tasks" in the top navigation bar.
14+
15+
### Task Page
16+
17+
<img src="https://i.imgur.com/OWiPeYC.jpg" alt="Task Page" width="800"/>
18+
19+
The task page will be the central console that you will use to start proofreading on specific task types, or *namespaces*, that exist for your user. Each blue row in the task page represents a task type assigned to your user. The number in parathenses at the end of each task type name is the number of pending tasks that you are currently assigned for that task. At the right of the page, you will also find tables corresponding to each task type containing summary statistics on number of tasks done, duration, and rate.
20+
21+
22+
23+
Clicking on the blue row header for a task type will expand it to show a table with multiple tabs. Here you can inspect the details for individual tasks separated by pending tasks and closed tasks.
24+
25+
<img src="https://i.imgur.com/c4mUj23.png" alt="Pending Table" width="800"/>
26+
27+
The pending table will show tasks for that task type ordered by descending priority level. The number in the tab after "Pending" show how many pending tasks are available. The columns are described below:
28+
29+
* **Task ID** - The unique identifer for this task. Useful for referencing task to NeuVue admins or developers as well as for inspecting the task in the "Inspect Task" page. Click on the task ID in this table will redirect you to the "Inspect Task" page for the task ID you clicked on.
30+
* **Seg ID** - The unique identifier for the neuron in the volume that is the primary target for this proofreading task. Seg IDs will sometimes be repeated across many tasks or even users. Seg IDs also change after edits so a seg ID listed in the task page may be outdated by the time a user opens that task. More info here.
31+
* **Created** - EST Datetime of creation for this task.
32+
* **Priority** - Numerical priority of this task. Higher priority means that task will be provided to the user earlier in the queue. Skipping a task reduces the task priority by 1.
33+
* **Status** - Current status of the task. Four possible statuses: "open", "pending", "closed", "errored". Only "open" and "pending" tasks are shown in this table.
34+
* **Times Skipped** - Counter on how many times a task has been skipped. Skipping a task reduces the priority by 1 and after a task has been skipped it can be re-assigned to another user if the particular task types allows it.
35+
36+
<img src="https://i.imgur.com/jumurbc.png" alt="Closed Table" width="800"/>
37+
38+
The closed tab is slightly different than the pending tab. This table is sorted by the "Closed Time" column. The number in the tab after "Closed" represents the total number of closed or errored tasks listed in the table. The columns are described below:
39+
40+
* **Task ID** - Same as pending table column.
41+
* **Seg ID** - Same as pending table column.
42+
* **Opened Time** - EST Datetime of when task was first opened. This opened time will represent only the first initial open status, even after task is skipped.
43+
* **Closed Time** - EST Datetime of when task was closed.
44+
* **Status** - Same as pending table column.
45+
* **Tags** - Submitted notes or tags associated with this task. Tags that do not fit in the column width can be inspected by hovering your cursor over the row.
46+
47+
In addition to the task tables, you will also see buttons on the right side of the task type headers. These buttons are described below:
48+
49+
* **Start Proofreading** - This button exists for all task types with pending tasks available and assigned to you. Click this will nagivate you to the Workspace page, where the next task will automatically be queued up and displayed.
50+
* **Add More Tasks** - Available for some task types only. Clicking this will allow additional tasks to be assigned to your user in cases where you deplete your queue or would like fresh tasks to work on. The number of tasks added to your user depends on the task type and there are certain limits set on how many tasks can be assigned to one user at a time.
51+
* **Remove Skipped Tasks** - Available for some task types only. Clicking this will remove all tasks that have been skipped once or more from your queue permanently.
52+
53+
From this point you can begin proofreading by deciding on which task types you would like to work on and then clicking "Start Proofreading" for that task type. This will navigate you to the workspace page, which is the main interface for proofreading work.
54+
55+
## Proofreading Workspace
56+
57+
### Workspace Page
58+
59+
<img src="https://i.imgur.com/CEsxB92.jpg" alt="Workspace Page" width="800"/>
60+
61+
The workspace page provides all the tools necessary to complete a proofreading task. The page is an extension of [Neuroglancer](https://github.com/google/neuroglancer), the primary tool for viewing, annotating, and editing the volumetric data we use for proofreading.
62+
63+
The workspace page consists an embedded neuroglancer window, task-specific buttons, and a toggle-able side panel that contains information about the current task as well as additional features. Once the user navigates to the workspace, a task from the queue will automatically be loaded in and set to status *open*. If a task is already open for the selected task type, that task will be re-opened.
64+
65+
Neuroglancer documentation will be in a separate section. Click here for a quick explanation on how to operate Neuroglancer.
66+
67+
The side panel is an imporatant resource to find out the instructions of a task and important details such as segmentation ID and task ID. By default, the side panel will be expanded when a task is opened for the first time in the current session but it can be hidden by clicking the shaded area directly to the left of the side panel. The side panel also has the "Task Tags" widget, where you can add unstructured comma-separated tags to the task that will be retained on submission, as well as button to copy the current Neuroglancer state in a URL format to share with others.
68+
69+
The buttons on the top and bottom of the Neuroglancer window a combination of contextual operations for a task (submit, decide, annotate) and regular app functions (flag, save, skip). The latter are available for all tasks and are always at the bottom of the screen.
70+
71+
* **Flag Task** - Opens a confirm dialog box to flag (report) a task in case it has an issue loading properly or if there is something in the data that is preventing you from finishing the task.
72+
* **Save State** - Saves the current Neuroglancer state to the queue so when you return to the task at a later time the Neuroglancer window resets back to the latest saved state.
73+
* **Skip Task** - Skips the current task and automatically opens the next one if available.
74+
* **Remove Task from Queue** - (Only available for some task types) Permanently removes the task from your queue and automatically opens the next one if available.
75+
* **Save and Exit Task** - Saves the current Neuroglancer state and exits back to the Task page. This is the only safe way to exit a task and ensure all your progress is recorded!
76+
77+
For each task type, there will be various additional buttons added such as a simple green "Submit" button or multiple options such as "Yes", "No", "Unsure" that will also appear at the top or bottom of the workspace page. These buttons are typically what a user clicks to finish a task and therefore once a "submit" or decision button is clicked there is no way to return to that task unless an admin resets it for you.
78+
79+
The common submissions methods of task are:
80+
81+
* **Submit** - Simple submit button. Clicking this button will close the current task and load the next.
82+
* **Forced Choice** - Option buttons that need to be selected for the given task to complete it.
83+
84+
Some forced choice tasks have both decision buttons and a "Submit" button. In these cases you must a select a decision and then click "Submit" when you are ready to submit the task. For all tasks, refer to the instructions in the side panel for more concrete detail on how and when to submit the task.
85+
86+
### Neuroglancer (WIP)
87+
88+
Please refer to [this cheatsheet](https://docs.google.com/document/d/1eypqJ9iI1GlWSPMTZQo9oDCLEahye6oYo_CuhS_5QTA/edit?usp=sharing) (credit to flywire.ai) for basic Neuroglancer navigation and operation instructions.
89+
90+
## Additional Pages and Tools
91+
92+
NeuVue contains other tools to help proofreading or training. These are all accessible through the navigation bar at the top of any NeuVue page.
93+
94+
### Inspect Task
95+
96+
<img src="https://i.imgur.com/yDWxmXq.jpg" alt="Inspect Task Page" width="800"/>
97+
98+
The inspect task page has a similar layout to the workspace except it does not contain any submission or decision buttons. This page is useful to re-visit older, closed tasks or share a particular task with others. To open a task in the inspect task page, you can either copy the task ID in input box located on app.neuvue.io/inspect or click on a task ID link in the Tasks page.
99+
100+
### Synapse Viewer
101+
102+
<img src="https://i.imgur.com/a29xKER.png" alt="Synapse Viewer Page" width="800"/>
103+
104+
The synapse viewer page is a visualization tool which means it can be accessed by any user with a valid root ID. It displays all presynaptic and postsynaptic locations for a valid root ID or multiple IDs. The pre and post annotations for each root ID are placed in an individual Neuroglancer layer so colors and sizes can be indepedently set. The sidebar displays information of on the number of connections for each root ID. This information can be copied or downloaded with the buttons below the table in the sidebar as well. To use the synaptic viewer, copy the list of root IDs (comma-separated) you want to visualize and paste them in the input box at app.neuvue.io/synapse.
105+
106+
Be aware that visualizing more than 10 root IDs at a time in the synpase viewer may cause Neuroglancer or your browser to crash!
107+
108+
### User Preferences
109+
110+
<img src="https://i.imgur.com/3uVM8yo.jpg" alt="User Preferences" width="800"/>
111+
112+
The user preferences config is a user-specific collection of Neuroglancer settings that are applied globally to all tasks. These settings include aethetic configurations such as annotation color and opacity as well as hardware settings that can increase the performance of Neuroglancer on your system. You can access the preferences for your user account at app.neuvue.io/preferences.
113+
114+
Preferences are disabled by default, each individual preference must be switched "on" to take effect.
115+
116+
### External Neuroglancer
117+
118+
When a Neuroglancer link is copied from the app, they use our externally hosted Neuroglancer instance, neuroglancer.neuvue.io. This is an identical Neuroglancer instance as the one used in NeuVue and requires no tasks or independent queue to use. Therefore, links from this neuroglancer instance can be freely distributed and shared.
119+
120+
## FAQ
121+
### What Browser/OS should I use?
122+
123+
Any modern OS should work with NeuVue. To lower the chances of crashes or missing functionality, we recommend all users proofreading using Google Chrome. There have been compatibility issues with Safari and Firefox in the past.
124+
125+
### What should I do if I'm having a techical issue?
126+
127+
Copy the task ID and paste in the proofreading slack channel. Describe your issue in detail and paste your task ID, browser and OS as well. A NeuVue developer will then provide more specific instructions on how to troubleshoot or fix the issue.
128+
129+
### Can I refresh the page when I'm proofreading?
130+
131+
We recommend you do not refresh your browser when on the workspace page. This can cause data loss and an inaccurate record of task duration. Instead, we recommend clicking the "Save and Exit" button that should exist in the bottom right of the page.
132+
133+
### Is there an undo for Neuroglancer?
134+
135+
Yes, on the top right there will be an "undo/redo" arrow buttons that can be used to undo layer/ID selects, pans, zooms, and any changes to the Neuroglancer state. ** However, you cannot undo direct edits (i.e. splits/merges). ** To undo these, you can do the inverse operation for the undo, such as merging two accidently split IDs or splitting two accidently merged IDs.
136+
137+
### How do I stop Neuroglancer from lagging/slowing down?
138+
139+
Neuroglancer takes up a lot of system memory and CPU, so in some cases it might be better to lower the maximum amount of memory and CPU time Neuroglancer is allowed to use in the NeuVue preferences page.
140+
141+
For tasks that require a lot of root IDs to selected at once, we recommend unselecting IDs that are no longer being worked on or looked at.

neuvue_project/workspace/views.py

+14-2
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
from neuvueclient import NeuvueQueue
1212
import pandas as pd
1313
import json
14+
import markdown
1415

1516
from .neuroglancer import (
1617
construct_proofreading_state,
@@ -772,8 +773,19 @@ def get(self, request, *args, **kwargs):
772773

773774
class GettingStartedView(View):
774775
def get(self, request, *args, **kwargs):
775-
return render(request, "getting-started.html")
776+
try:
777+
p = staticfiles_storage.path('getting_started.md')
778+
with open(p, 'r') as f:
779+
text = f.read()
780+
html = markdown.markdown(text)
781+
except:
782+
html = "Error Rendering Text"
776783

784+
## Get updates from local updates.json
785+
context = {
786+
"getting_started_text": html
787+
}
788+
return render(request, "getting-started.html",context)
777789

778790
class SaveStateView(View):
779791
def dispatch(self, request, *args, **kwargs):
@@ -797,4 +809,4 @@ def post(self, request, *args, **kwargs):
797809
except:
798810
return HttpResponse("Was unable to save state", status=400, content_type="text/plain")
799811

800-
return HttpResponse("Was unable to save state", status=400, content_type="text/plain")
812+
return HttpResponse("Was unable to save state", status=400, content_type="text/plain")

0 commit comments

Comments
 (0)