From 77967d78a4c72302543b549fccb0b67fc306f2bf Mon Sep 17 00:00:00 2001
From: Maxim Kolomeychenko <maxim.kolomeychenko@gmail.com>
Date: Thu, 24 Sep 2020 12:12:31 +0300
Subject: [PATCH] output: link to saved report

---
 src/classes_stats_for_images.py |  4 ++-
 src/gui.html                    | 64 +++++++++++++++++----------------
 2 files changed, 36 insertions(+), 32 deletions(-)

diff --git a/src/classes_stats_for_images.py b/src/classes_stats_for_images.py
index ebfa6a9..8d18aeb 100644
--- a/src/classes_stats_for_images.py
+++ b/src/classes_stats_for_images.py
@@ -285,6 +285,7 @@ def calc(api: sly.Api, task_id, context, state, app_logger):
         {"field": "data.loading3", "payload": False},
         {"field": "state.showDialog", "payload": True},
         {"field": "data.savePath", "payload": remote_path},
+        {"field": "data.reportName", "payload": report_name},
     ]
     api.task.set_fields(task_id, fields)
     api.task.set_output_report(task_id, file_info["id"], report_name)
@@ -316,7 +317,8 @@ def main():
             "columns": overview_columns,
             "data": []
         },
-        "savePath": "..."
+        "savePath": "...",
+        "reportName": "..."
     }
 
     state = {
diff --git a/src/gui.html b/src/gui.html
index fd46a2c..f73efe5 100644
--- a/src/gui.html
+++ b/src/gui.html
@@ -1,28 +1,30 @@
 <div>
     <el-row :gutter="20" type="flex">
-      <el-col :span="8">
-          <sly-card title="Input">
-              <sly-field title="" description="Project">
-                  <a slot="title" target="_blank" :href="`/projects/${data.projectId}/datasets`">{{data.projectName}}</a>
-                  <sly-icon slot="icon" :options="{ imageUrl: `${data.projectPreviewUrl}` }"/>
-              </sly-field>
-          </sly-card>
-      </el-col>
-      <el-col :span="16" style="flex: 1">
-          <sly-card title="Output" style="height: 100%">
-              <sly-field v-if="data.progress === 100" title="Report has been successfully saved" :description="`${data.savePath}`">
-                   <sly-icon slot="icon" :options="{ color: '#33c94c', bgColor: '#d9f7e4', rounded: false }">
-                       <i class="zmdi zmdi-receipt"></i>
-                   </sly-icon>
-              </sly-field>
-              <el-progress v-if="data.progress !== 100" :percentage="data.progress"></el-progress>
-          </sly-card>
-      </el-col>
+        <el-col :span="8">
+            <sly-card title="Input">
+                <sly-field title="" description="Project">
+                    <a slot="title" target="_blank"
+                       :href="`/projects/${data.projectId}/datasets`">{{data.projectName}}</a>
+                    <sly-icon slot="icon" :options="{ imageUrl: `${data.projectPreviewUrl}` }"/>
+                </sly-field>
+            </sly-card>
+        </el-col>
+        <el-col :span="16" style="flex: 1">
+            <sly-card title="Output" style="height: 100%">
+                <sly-field v-if="data.progress === 100" title="" description="Report has been successfully saved to Files">
+                    <a slot="title" target="_blank" :href="`${data.savePath}`">{{data.reportName}}</a>
+                    <sly-icon slot="icon" :options="{ color: '#33c94c', bgColor: '#d9f7e4', rounded: false }">
+                        <i class="zmdi zmdi-receipt"></i>
+                    </sly-icon>
+                </sly-field>
+                <el-progress v-if="data.progress !== 100" :percentage="data.progress"></el-progress>
+            </sly-card>
+        </el-col>
     </el-row>
 
     <sly-card title="Classes area and objects count per image"
-          subtitle="Detailed classes statistics for every image"
-          style="margin-top: 15px;">
+              subtitle="Detailed classes statistics for every image"
+              style="margin-top: 15px;">
         <div slot="header" style="color:#20a0ff">
             <i class="zmdi zmdi-time-interval"></i> - class area (%) <br>
             <i class="zmdi zmdi-equalizer"></i> - number of objects
@@ -33,8 +35,8 @@
     </sly-card>
 
     <sly-card title="Overview"
-          subtitle="Summary statistics for all classes"
-          style="margin-top: 15px; min-height: 200px;">
+              subtitle="Summary statistics for all classes"
+              style="margin-top: 15px; min-height: 200px;">
         <sly-table v-loading="data.loading0"
                    element-loading-text="Will be calculated after the per image stats table"
                    :content="data.overviewTable">
@@ -42,30 +44,30 @@
     </sly-card>
 
     <sly-card title="Average class area / objects count (only non-zero values)"
-          subtitle="Average class area and objects count only for images with this class
+              subtitle="Average class area and objects count only for images with this class
                     (i.e. if class is not presented on image - this image will not be taken into account in stats)"
-          style="height:100%; margin-top: 15px;">
+              style="height:100%; margin-top: 15px;">
         <sly-plotly v-loading="data.loading1"
                     element-loading-text="Will be calculated after the per image stats table"
-                    :content="data.avgAreaCount" >
+                    :content="data.avgAreaCount">
         </sly-plotly>
     </sly-card>
 
     <sly-card title="Number of images with/without specific class"
-          subtitle="For every class two values are calculated: how many images have / don't have a specific class"
-          style="height:100%; margin-top: 15px;">
+              subtitle="For every class two values are calculated: how many images have / don't have a specific class"
+              style="height:100%; margin-top: 15px;">
         <sly-plotly v-loading="data.loading2"
                     element-loading-text="Will be calculated after the per image stats table"
-                    :content="data.imageWithClassCount" >
+                    :content="data.imageWithClassCount">
         </sly-plotly>
     </sly-card>
 
     <sly-card title="Images resolutions (height x width x channels)"
-          subtitle="Image resolutions distribution"
-          style="height:100%; margin-top: 15px;">
+              subtitle="Image resolutions distribution"
+              style="height:100%; margin-top: 15px;">
         <sly-plotly v-loading="data.loading3"
                     element-loading-text="Will be calculated after the per image stats table"
-                    :content="data.resolutionsCount" >
+                    :content="data.resolutionsCount">
         </sly-plotly>
     </sly-card>
 </div>
\ No newline at end of file