Fix docs and others (HumanSignal#188)

* Fix docs and others. * Some.
faisal-w · Jan 17, 2020 · c1a562a · c1a562a
1 parent 0f4a2e7
commit c1a562a
Show file tree

Hide file tree

Showing 10 changed files with 101 additions and 58 deletions.
diff --git a/.travis.yml b/.travis.yml
diff --git a/docs/source/playground/index.md b/docs/source/playground/index.md
@@ -14,20 +14,27 @@ order: 201
 <style scoped>
  .content {
      max-width: none !important;
-     padding-right: 50px;
-     margin-left: 0px !important;
+     margin-left: 0 !important;
+     padding: 1em 0 0 0;
  }
 
  .validation {
      margin-top: 1em;
      margin-left: 1em;
      color: red;
+     text-transform: capitalize;
+ }
+
+ h3 {
+  margin: 1em !important;
+  width: unset;
+  height: unset;
  }
 
  iframe {
-     border: 0px;
+     border: 0;
  }
-
+ 
  #render-editor {
      width: 100%;
  }
@@ -46,7 +53,7 @@ order: 201
 .editor-row {
     display: flex; 
     margin-bottom: 1em; 
-    width: 100%;
+    width: 100% !important;
 }
 
  .data-row {
@@ -59,16 +66,15 @@ order: 201
     background: rgb(252,252,252);
  }
 
- .editor-area {
- border: 1px solid #f48a4259;
- }
+.editor-area {
+    border: 1px solid #f48a4259;
+}
 
  .config-col {
     color: rgba(0,0,0,.6); 
     background: rgb(252,252,252); 
     margin-right: 2em; 
-    width: 400px; 
-
+    width: 40%; 
  }
 
  .input-col {
@@ -94,7 +100,7 @@ order: 201
 }
 
 .config-col {
-    widht: 100%;
+    width: 100%;
  }
 
  .input-col, .output-col { width: 100%; }
@@ -106,31 +112,32 @@ order: 201
 <div>
   <div class="editor-row">
     <div class="config-col">
-      <h3>Config</h3>
+      <h3>Label Config</h3>
       <div class="editor-area">
       <!-- Textarea -->
       <textarea name="label_config" cols="40" rows="10" class="project-form htx-html-editor"
                 id="id_label_config"></textarea>
-      <div class="validation"></div>
       </div>
+      <div class="validation"></div><br>
     </div>
     <div class="preview-col">
-      <h3>Preview</h3>
+      <h3>Interface preview</h3>
       <div id="editor-wrap"></div>
       <pre class="preview" id="preload-editor">...</pre>
     </div>
   </div>
 </div>
+
 <!--  & Preview in two cols -->
 <div class="data-row">
   <div class="input-col">
-    <h3>Input Preview</h3>
+    <h3>Input preview</h3>
     <div>
       <pre class="preview" id="upload-data-example">...</pre>
     </div>
   </div>
   <div class="output-col">
-    <h3>Output Preview</h3>
+    <h3>Output preview</h3>
     <div class="ui positive message">
       <pre class="preview" id="data-results">...</pre>
     </div>
@@ -157,13 +164,23 @@ order: 201
  }
 
  $(function () {
-     // serialize editor output by timer
-     setInterval(function () {
-         if (typeof Htx !== 'undefined') {
-             $('#data-results').text(JSON.stringify(Htx.completionStore.selected.serializeCompletion(), null, 4));
-             $('#data-results').parent().show();
-         }
-     }, 500);
+    var prev_completion = null;
+
+    // serialize editor output by timer
+    setInterval(function () {
+      let iframe = document.getElementById('render-editor');
+      if (iframe !== null) {
+        let Htx = iframe.contentWindow.Htx;
+        if (typeof Htx !== 'undefined') {
+          var completion = JSON.stringify(Htx.completionStore.selected.serializeCompletion(), null, 4);
+          if (prev_completion !== completion) {
+            $('#data-results').text(completion);
+            prev_completion = completion;
+          }
+        }
+      }
+    }, 500);
+
 
      var host = "https://go.heartex.net";
      var url_string = window.location.href
@@ -177,14 +194,42 @@ order: 201
 
      var _c = url.searchParams.get("config");
      if (_c && _c.length > 0) {
-         console.log("wtf");
          var config = url.searchParams.get("config");
          config = config.replace(/[<][b][r][>]/gm, "\n");
          labelEditor.setValue(config);
-         validate_config();
      } else {
-         labelEditor.setValue("<View>\n  \n</View>");
+         labelEditor.setValue(`<View>
+         
+<!-- Image with Polygons -->
+<View style="padding: 25px; 
+             box-shadow: 2px 2px 8px #AAA">
+  <Header value="Label the image with polygons"/>
+  <Image name="img" value="$image"/>
+  <Text name="text1" 
+        value="Select label, start to click on image"/>
+        
+  <PolygonLabels name="tag" toName="img">
+    <Label value="Opossum" background="red"/>
+    <Label value="Cat" background="blue"/>  
+  </PolygonLabels>
+</View>
+
+<!-- Text with multi-choices -->
+<View style="margin-top: 20px; padding: 25px; 
+             box-shadow: 2px 2px 8px #AAA;">
+  <Header value="Classify the text"/>
+  <Text name="text2" value="$text"/>
+  
+  <Choices name="" toName="img" choice="multiple">
+    <Choice alias="wisdom" value="Wisdom"/>
+    <Choice alias="long" value="Long"/>
+  </Choices>
+</View>
+
+</View>
+`);
      }
+     validate_config(labelEditor);
 
      // refresh for proper line numbers drawing
      labelEditor.refresh();
@@ -233,6 +278,8 @@ order: 201
              $('#render-editor').remove();
              // assign id to new iframe
              iframe.attr('id', 'render-editor');
+             // force to hide undo / redo / reset buttons 
+             $('#render-editor').contents().find('head').append('<style>.ls-panel{display:none;}</style>');
              iframe.show();
              // set height for iframe
              let obj = document.getElementById('render-editor');

diff --git a/docs/themes/htx/layout/partials/main_menu.ejs b/docs/themes/htx/layout/partials/main_menu.ejs
@@ -24,6 +24,9 @@
 <% } %>
 
 <!-- Place this tag where you want the button to render. -->
-<a class="github-button" href="https://github.com/heartexlabs/label-studio" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star heartexlabs/label-studio on GitHub">Star</a>
-
+<div style="margin-top: 7px !important;" class="github-button-wrap">
+<a class="github-button" href="https://github.com/heartexlabs/label-studio"
+    data-icon="octicon-star""
+    data-size="large" data-show-count="true" aria-label="Star heartexlabs/label-studio on GitHub"></a>
+</div>
 
diff --git a/docs/themes/htx/layout/partials/toc.ejs b/docs/themes/htx/layout/partials/toc.ejs
@@ -1,4 +1,6 @@
 <ul class="menu-root">
+    <li><h3 class="root"><%- type %></h3></li>
+
   <% site.pages.find({ type: type }).sort('order').each(function (p) { %>
     <% var fileName = p.path.replace(/^.+?\/([\w-]+)\.html/, '$1') %>
 

diff --git a/docs/themes/htx/source/css/_sidebar.styl b/docs/themes/htx/source/css/_sidebar.styl
@@ -14,6 +14,9 @@
   flex-flow: column
   align-items: center
   justify-content: space-between
+  h3.root
+    color: #f58a48;
+    text-transform: capitalize;
   h2
     margin-top: .2em
   ul

diff --git a/docs/themes/htx/source/css/page.styl b/docs/themes/htx/source/css/page.styl
@@ -232,7 +232,7 @@
   .content
     padding-left: 0
     &.with-sidebar
-      margin: auto
+      margin: 2em auto
     h2, h3
       &:before
         content: ""
@@ -254,6 +254,10 @@
   iframe
     margin: 0 !important
 
+@media screen and (max-width: 400px)
+  .github-button-wrap
+    display: none;
+
 @media print
   .footer
     display: none

diff --git a/label_studio/examples/audio_classification/config.xml b/label_studio/examples/audio_classification/config.xml
@@ -1,12 +1,12 @@
 <!-- {"title": "Audio classifier", "category": "audio"} -->
 <View>
-  <Header value="Listen the audio:"></Header>
-  <Audio name="audio" value="$url"></Audio>
-  <Header value="Select its topic:"></Header>
+  <Header value="Listen the audio:"/>
+  <Audio name="audio" value="$url"/>
+  <Header value="Select its topic:"/>
   <Choices name="label" toName="audio" choice="single-radio" showInline="true">
-    <Choice value="Politics"></Choice>
-    <Choice value="Business"></Choice>
-    <Choice value="Education"></Choice>
-    <Choice value="Other"></Choice>
+    <Choice value="Politics"/>
+    <Choice value="Business"/>
+    <Choice value="Education"/>
+    <Choice value="Other"/>
   </Choices>
 </View>
diff --git a/label_studio/templates/base.html b/label_studio/templates/base.html
@@ -56,8 +56,8 @@
     <a href="https://labelstud.io/guide/" target="_blank">Docs</a>
     <span class="delim">|</span>
 
-    <a href="https://github.com/heartexlabs/label-studio" target="_blank"><img src="/static/images/github.svg"
-                                                                               height="22"/></a>
+    <a href="https://github.com/heartexlabs/label-studio" target="_blank">
+      <img src="/static/images/github.svg" height="22"/></a>
 
     <a href="https://docs.google.com/forms/d/e/1FAIpQLSdLHZx5EeT1J350JPwnY2xLanfmvplJi6VZk65C2R4XSsRBHg/viewform?usp=sf_link"
        target="_blank"><img src="/static/images/slack.png" height="22"/></a>

diff --git a/label_studio/templates/import_help.html b/label_studio/templates/import_help.html
@@ -56,6 +56,9 @@
       <li>Or click
         <a onclick="add_sample_task()" class="no-go" href="javascript:void(0)">here to add a sample task</a>
         right now.<br/></li>
+
+      <li><a href="https://labelstud.io/guide/format.html#Import-data">
+        Read more</a> about import in our documentation</li>
     </ul>
 
     <script>

diff --git a/scripts/start.sh b/scripts/start.sh
@@ -12,7 +12,7 @@ if command -v python3 &>/dev/null; then
     pip install -r requirements.txt
     pip install -e .
     cd label_studio
-    python server.py
+    python server.py start my_project --init
 
     echo "Server started"
     echo "Go to http://localhost:8200"