Merge pull request globus#34 from blaiszik/dlhub

Ians comments, added input/output descs, added copy functionality
NickolausDS · Jul 15, 2019 · 5a92e48 · 5a92e48
2 parents eb562df + b8ffc1d
commit 5a92e48
Showing 1 changed file with 51 additions and 10 deletions.
diff --git a/alcf_data_portal/templates/dlhub/detail-overview.html b/alcf_data_portal/templates/dlhub/detail-overview.html
@@ -6,11 +6,20 @@
   <link rel="stylesheet" type="text/css" href="{% static 'css/search.css' %}" />
   <link rel="stylesheet" type="text/css" href="{% static 'css/detail-base.css' %}" />
   <link rel="stylesheet" type="text/css" href="{% static 'css/detail-overview.css' %}" />
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
+
+  <script type="text/javascript">
+  new ClipboardJS('.copy-btn');
+
+  </script>
+
 {%endblock%}
 
 {% block detail_title %}
 <h2>{{all.0.datacite.titles.0.title}}</h2>
-<div class="h6 text-muted">{{all.0.dlhub.shorthand_name}}</div>
+<div class="h6 text-muted" id="servable-name">{{all.0.dlhub.shorthand_name}} 
+<div class="btn btn-outline-secondary copy-btn btn-sm" data-clipboard-target="#servable-name">Copy <i class="fa fa-clipboard"></i></div>
+</div>
 
 {% endblock %}
 
@@ -19,13 +28,13 @@ <h2>{{all.0.datacite.titles.0.title}}</h2>
     <div class="col-sm-12">
         <div class="container">
             <div class="row">
-                <div class="col-sm-5">
+                <div class="col-sm-6">
                 <!--- \\\\\\\Post-->
                 <div class="card gedf-card">
                     <div class="card-header">
                         <div class="d-flex justify-content-between align-items-center">
                             <div class="d-flex justify-content-between align-items-center">
-                                <div class="ml-2">
+                                <div class="ml-2 mb-0">
                                     <div class="h6 text-muted">
                                      {% for creator in all.0.datacite.creators %}
                                       {{creator.givenName}} {{creator.familyName}}{% if not forloop.last %}; {% endif %}
@@ -40,10 +49,45 @@ <h2>{{all.0.datacite.titles.0.title}}</h2>
 
                     </div>
                     <div class="card-body">
+                        {% if all.0.datacite.descriptions.0.description %}
                         <p class="card-text">
                             {{all.0.datacite.descriptions.0.description}}
                         </p>
+                        {% endif %}
+                        <div class="badge badge-primary">{{all.0.servable.type}}</div>
+                        <div class="badge badge-primary">{{all.0.servable.model_type}}</div>
+                        <div>{% for domain in all.0.dlhub.domains %}
+                          <span class="badge badge-secondary">
+                            {{domain}}
+                          </span>
+                        {% endfor %}</div>
+
+                        <h4 class="mt-3"> Input </h4>
+                        {{all.0.servable.methods.run.input.description}}
+                        <div> Type: {{all.0.servable.methods.run.input.type}}</div>
+                        {% if all.0.servable.methods.run.input.shape %}
+                        <div> Shape: {{all.0.servable.methods.run.input.shape}}</div>
+                        {% endif %}
+                        <div>
+                        <div class="list-group">
+                        {% for elem in all.0.servable.methods.run.input.element_types %}
+                        <div class="d-flex w-100 justify-content-between">
+                          <h6 class="mb-1">{{elem.description}} </h6>
 
+                        </div><div>Type: ({{elem.type}}) {{elem.item_type.type}}</div></small>
+                        {% endfor %}
+                        </div>
+
+
+
+                         <h4 class="mt-3"> Output </h4>
+                          {{all.0.servable.methods.run.output.description}}
+                          <div> Type: {{all.0.servable.methods.run.output.type}} </div>
+                          {% if all.0.servable.methods.run.output.shape %}
+                          <div> Shape: {{all.0.servable.methods.run.output.shape}} </div>
+                          {% endif %}
+                        </div>
+                        </p>
                     </div>
                     <div class="card-footer">
 
@@ -52,29 +96,26 @@ <h2>{{all.0.datacite.titles.0.title}}</h2>
                 <!-- Post /////-->
                 </div>
 
-                <div class="col-sm-7">
-                    <h3> Run with DLHub SDK </h3>
+                <div class="col-sm-6">
+                    <h3 class="mt-3"> Run with DLHub SDK </h3>
                     <code>from dlhub_sdk.client import DLHubClient</code><br>
                     <code>X = get_my_data() #replace this</code><br>
                     <code>dl = DLHubClient()</code><br>
                     <code>dl.run('{{all.0.dlhub.shorthand_name}}', X)</code>
-                    <br><br>
 
-                    <h3> Get More Info with DLHub SDK </h3>
+                    <h3 class="mt-3" > Get More Info with DLHub SDK </h3>
                     <code>from dlhub_sdk.client import DLHubClient</code><br>
                     <code>dl = DLHubClient()</code><br>
                     <code>dl.describe_servable('{{all.0.dlhub.shorthand_name}}')</code>
 
-
-                    <h5> DLHub Installation </h5>
+                    <h3 class="mt-3"> DLHub SDK Installation </h3>
                     <code>pip install dlhub_sdk</code>
                     <br><br>
                     <a class="btn btn-outline-primary" role="button" href="https://github.com/DLHub-Argonne/dlhub_sdk">
                       DLHub SDK documentation
                     </a>
                 </div>
             </div>
-
         </div>
     </div>
 </div>