From 330b1433d1aa1fd99f532e3941cd1406307c6538 Mon Sep 17 00:00:00 2001
From: Gaurav Vaidya <gaurav@ggvaidya.com>
Date: Thu, 11 Apr 2019 18:52:19 -0400
Subject: [PATCH 01/18] Added support for looking up Open Tree Taxonomy IDs.

---
 src/components/PhylorefTable.vue | 55 +++++++++++++++++++++++++++++---
 1 file changed, 51 insertions(+), 4 deletions(-)

diff --git a/src/components/PhylorefTable.vue b/src/components/PhylorefTable.vue
index b5b941b..b01c899 100644
--- a/src/components/PhylorefTable.vue
+++ b/src/components/PhylorefTable.vue
@@ -58,11 +58,58 @@
                 </template>
               </td>
             </tr>
+            <template v-for="specifier of getSpecifiersForPhyloref(phyloref)">
+              <tr :key="'phyloref' + phylorefIndex + ', specifier: ' + getLabelForSpecifier(specifier)">
+                <td>{{getSpecifierType(phyloref, specifier)}} <span v-html="getLabelForSpecifierAsHTML(specifier)"></span></td>
+                <td>
+                  <template v-if="getOpenTreeTaxonomyID(specifier)">
+                    <a target="_blank" :href="'https://tree.opentreeoflife.org/opentree/@ott' + getOpenTreeTaxonomyID(specifier)">{{getOpenTreeTaxonomyID(specifier)}}</a>
+                    (<a target="_blank" :href="'https://tree.opentreeoflife.org/taxonomy/browse?id=' + getOpenTreeTaxonomyID(specifier)">ott</a>)
+                  </template>
+                </td>
+              </tr>
+            </template>
           </template>
-        </template>
-      </template>
-    </tbody>
-  </table>
+        </tbody>
+      </table>
+    </div>
+    <div class="card-footer">
+      <div class="btn-group" role="group" area-label="Add phyloreferences">
+        <button
+          class="btn btn-primary"
+          href="javascript:;"
+          onclick="$('#load-jsonld').trigger('click')"
+        >
+          Add phyloreferences from JSON-LD file
+        </button>
+        <input
+          id="load-jsonld"
+          type="file"
+          multiple="true"
+          class="d-none"
+          @change="loadJSONLDFromFileInputById('#load-jsonld')"
+        >
+        <button class="btn btn-secondary dropdown-toggle" type="button" id="addFromExamples" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+          Add phyloreferences from example
+        </button>
+        <div class="dropdown-menu" aria-labelledby="addFromExamples">
+          <a href="javascript:;" class="dropdown-item" v-for="example of exampleJSONLDURLs" v-bind:key="example.url" @click="loadJSONLDFromURL(example.url)">
+            {{example.title}}
+          </a>
+        </div>
+      </div>
+      <div class="btn-group ml-2" role="group" area-label="Edit phyloreference list">
+        <button class="btn btn-danger" type="button" @click="loadedPhylorefs = []">
+          Clear phylorefs
+        </button>
+      </div>
+      <div class="btn-group ml-2" role="group" area-label="Open Tree Taxonomy tasks">
+        <button class="btn btn-primary" type="button" @click="queryOpenTreeTaxonomyIDs()">
+          Query specifiers against Open Tree of Life Taxonomy
+        </button>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>

From 372fd6290c8d55cb74b3b8fbe6407d54a25ef41c Mon Sep 17 00:00:00 2001
From: Gaurav Vaidya <gaurav@ggvaidya.com>
Date: Thu, 11 Apr 2019 19:22:00 -0400
Subject: [PATCH 02/18] First stab at a phylogeny visualization.

---
 src/components/PhylorefTable.vue | 210 ++++++++++++++++++++++++-------
 1 file changed, 168 insertions(+), 42 deletions(-)

diff --git a/src/components/PhylorefTable.vue b/src/components/PhylorefTable.vue
index b01c899..216dbae 100644
--- a/src/components/PhylorefTable.vue
+++ b/src/components/PhylorefTable.vue
@@ -58,57 +58,135 @@
                 </template>
               </td>
             </tr>
-            <template v-for="specifier of getSpecifiersForPhyloref(phyloref)">
-              <tr :key="'phyloref' + phylorefIndex + ', specifier: ' + getLabelForSpecifier(specifier)">
-                <td>{{getSpecifierType(phyloref, specifier)}} <span v-html="getLabelForSpecifierAsHTML(specifier)"></span></td>
-                <td>
-                  <template v-if="getOpenTreeTaxonomyID(specifier)">
-                    <a target="_blank" :href="'https://tree.opentreeoflife.org/opentree/@ott' + getOpenTreeTaxonomyID(specifier)">{{getOpenTreeTaxonomyID(specifier)}}</a>
-                    (<a target="_blank" :href="'https://tree.opentreeoflife.org/taxonomy/browse?id=' + getOpenTreeTaxonomyID(specifier)">ott</a>)
-                  </template>
+            <template v-for="(phyloref, phylorefIndex) of loadedPhylorefs">
+              <tr :key="phylorefIndex"><!-- This :key only works as long as users can't reorder the phylorefs -->
+                <td :rowspan="getSpecifiersForPhyloref(phyloref).length + 1">
+                  {{ phyloref.label || `Phyloref ${phylorefIndex + 1}` }}
+                </td>
+                <td :rowspan="getSpecifiersForPhyloref(phyloref).length + 1">
+                  <span v-html="getPhylorefDescription(phyloref)"></span>
                 </td>
               </tr>
+              <template v-for="specifier of getSpecifiersForPhyloref(phyloref)">
+                <tr :key="'phyloref' + phylorefIndex + ', specifier: ' + getLabelForSpecifier(specifier)">
+                  <td>{{getSpecifierType(phyloref, specifier)}} <span v-html="getLabelForSpecifierAsHTML(specifier)"></span></td>
+                  <td>
+                    <template v-if="getOpenTreeTaxonomyID(specifier)">
+                      <a target="_blank" :href="'https://tree.opentreeoflife.org/opentree/@ott' + getOpenTreeTaxonomyID(specifier)">{{getOpenTreeTaxonomyID(specifier)}}</a>
+                      (<a target="_blank" :href="'https://tree.opentreeoflife.org/taxonomy/browse?id=' + getOpenTreeTaxonomyID(specifier)">ott</a>)
+                    </template>
+                  </td>
+                </tr>
+              </template>
             </template>
-          </template>
-        </tbody>
-      </table>
+          </tbody>
+        </table>
+      </div>
+      <div class="card-footer">
+        <div class="btn-group" role="group" area-label="Add phyloreferences">
+          <button
+            class="btn btn-primary"
+            href="javascript:;"
+            onclick="$('#load-jsonld').trigger('click')"
+          >
+            Add phyloreferences from JSON-LD file
+          </button>
+          <input
+            id="load-jsonld"
+            type="file"
+            multiple="true"
+            class="d-none"
+            @change="loadJSONLDFromFileInputById('#load-jsonld')"
+          >
+          <button class="btn btn-secondary dropdown-toggle" type="button" id="addFromExamples" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            Add phyloreferences from example
+          </button>
+          <div class="dropdown-menu" aria-labelledby="addFromExamples">
+            <a href="javascript:;" class="dropdown-item" v-for="example of exampleJSONLDURLs" v-bind:key="example.url" @click="loadJSONLDFromURL(example.url)">
+              {{example.title}}
+            </a>
+          </div>
+        </div>
+        <div class="btn-group ml-2" role="group" area-label="Edit phyloreference list">
+          <button class="btn btn-danger" type="button" @click="loadedPhylorefs = []">
+            Clear phylorefs
+          </button>
+        </div>
+        <div class="btn-group ml-2" role="group" area-label="Open Tree Taxonomy tasks">
+          <button class="btn btn-primary" type="button" @click="queryOpenTreeTaxonomyIDs()">
+            Query specifiers against Open Tree of Life Taxonomy
+          </button>
+        </div>
+      </div>
     </div>
-    <div class="card-footer">
-      <div class="btn-group" role="group" area-label="Add phyloreferences">
-        <button
-          class="btn btn-primary"
-          href="javascript:;"
-          onclick="$('#load-jsonld').trigger('click')"
-        >
-          Add phyloreferences from JSON-LD file
-        </button>
-        <input
-          id="load-jsonld"
-          type="file"
-          multiple="true"
-          class="d-none"
-          @change="loadJSONLDFromFileInputById('#load-jsonld')"
-        >
-        <button class="btn btn-secondary dropdown-toggle" type="button" id="addFromExamples" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-          Add phyloreferences from example
-        </button>
-        <div class="dropdown-menu" aria-labelledby="addFromExamples">
-          <a href="javascript:;" class="dropdown-item" v-for="example of exampleJSONLDURLs" v-bind:key="example.url" @click="loadJSONLDFromURL(example.url)">
-            {{example.title}}
-          </a>
+
+    <div class="card border-dark mt-2">
+      <h5 class="card-header border-dark">
+        Phylogeny
+      </h5>
+      <div class="card-body">
+        <form>
+          <div class="form-group row">
+            <label
+              for="newick"
+              class="col-md-2 control-label"
+            >
+              Newick
+            </label>
+            <div class="col-md-10 input-group">
+              <textarea
+                v-model.lazy="newick"
+                rows="3"
+                class="form-control"
+                placeholder="Enter Newick string for phylogeny here"
+              />
+            </div>
+          </div>
+        </form>
+      </div>
+      <div class="card-footer">
+        <div class="btn-group" role="group" area-label="Look up trees on the Open Tree of Life">
+          <button
+            class="btn btn-primary"
+            href="javascript:;"
+            :click="downloadInducedSubtreeFromOpenTreeOfLife(ottIdsForAllSpecifiers)"
+          >
+            Download induced subtree from the Open Tree of Life
+          </button>
         </div>
       </div>
-      <div class="btn-group ml-2" role="group" area-label="Edit phyloreference list">
-        <button class="btn btn-danger" type="button" @click="loadedPhylorefs = []">
-          Clear phylorefs
-        </button>
+    </div>
+
+    <!-- Display the list of errors encountered when parsing this Newick string -->
+    <div
+      v-if="phylogenyNewickErrors.length !== 0"
+      class="card border-dark mt-2"
+    >
+      <h5 class="card-header bg-danger">
+        Errors occurred while parsing Newick string
+      </h5>
+      <div class="card-body">
+        <template v-for="(error, errorIndex) of phylogenyNewickErrors">
+          <p><strong>{{ error.title }}.</strong> {{ error.message }}</p>
+        </template>
       </div>
-      <div class="btn-group ml-2" role="group" area-label="Open Tree Taxonomy tasks">
-        <button class="btn btn-primary" type="button" @click="queryOpenTreeTaxonomyIDs()">
-          Query specifiers against Open Tree of Life Taxonomy
-        </button>
+    </div>
+
+    <!-- Display the phylogeny (unless there were Newick parsing errors) -->
+    <div
+      v-if="phylogenyNewickErrors.length === 0"
+      class="card border-dark mt-2"
+    >
+      <h5 class="card-header">
+        Phylogeny visualization
+      </h5>
+      <div class="card-body">
+        <Phylotree
+          :newick="newick"
+        />
       </div>
     </div>
+
   </div>
 </template>
 
@@ -125,6 +203,9 @@ import { PhylorefWrapper } from '@phyloref/phyx';
 
 export default {
   name: 'PhylorefTable',
+  components: {
+    Phylotree,
+  },
   props: {
     phylorefs: {
       type: Array,
@@ -135,6 +216,51 @@ export default {
       default: () => { return {}; },
     },
   },
+  data: function () {
+    // Local variables for this component.
+    return {
+      flagDisplayExpression: false,
+      loadedPhylorefs: [],
+      openTreeTaxonomyInfoByName: {},
+      newick: '()',
+    };
+  },
+  computed: {
+    allSpecifiers() {
+      return this.loadedPhylorefs.map(phyloref => this.getSpecifiersForPhyloref(phyloref)).reduce((acc, val) => acc.concat(val), []);
+    },
+    phylorefsWithMoreThanOneSpecifier() {
+      return this.loadedPhylorefs.filter(phyloref => (this.getSpecifiersForPhyloref(phyloref) || []).length > 1);
+    },
+    ottIdsForAllSpecifiers() {
+      // Assumes that queryOpenTreeTaxonomyIDs has already been called!
+      const ottIds = this.allSpecifiers.map(specifier => this.getOpenTreeTaxonomyID(specifier))
+        .filter(x => x !== undefined && x !== null);
+      return ottIds;
+    },
+    phylogenyNewickErrors() {
+      const errors = PhylogenyWrapper.getErrorsInNewickString(this.newick);
+
+      // For historical reason, we consider an empty Newick string as an error.
+      // We should not do this.
+      return errors.filter(error => error.title !== 'No phylogeny entered');
+    },
+    exampleJSONLDURLs() { return [
+      // Returns a list of example files to display in the "Examples" menu.
+      {
+        url: 'examples/fisher_et_al_2007.jsonld',
+        title: 'Fisher et al, 2007',
+      },
+      {
+        url: 'examples/hillis_and_wilcox_2005.jsonld',
+        title: 'Hillis and Wilcox, 2005',
+      },
+      {
+        url: 'examples/brochu_2003.jsonld',
+        title: 'Brochu 2003',
+      },
+    ]}
+  },
   methods: {
     /*
      * Phyloref and specifier getters (should be moved into phyx.js)

From b312613aeb48263029ad5c94bc4209687971dfc5 Mon Sep 17 00:00:00 2001
From: Gaurav Vaidya <gaurav@ggvaidya.com>
Date: Mon, 15 Apr 2019 21:28:25 -0400
Subject: [PATCH 03/18] Moved Open Tree Taxonomy methods into App.vue for
 better organization.

---
 src/components/PhylorefTable.vue | 195 ++-----------------------------
 1 file changed, 9 insertions(+), 186 deletions(-)

diff --git a/src/components/PhylorefTable.vue b/src/components/PhylorefTable.vue
index 216dbae..e3c02de 100644
--- a/src/components/PhylorefTable.vue
+++ b/src/components/PhylorefTable.vue
@@ -47,147 +47,16 @@
               </td>
               <td>
                 <template v-if="getOpenTreeTaxonomyID(specifier)">
-                  <a
-                    target="_blank"
-                    :href="'https://tree.opentreeoflife.org/opentree/@ott' + getOpenTreeTaxonomyID(specifier)"
-                  >{{getOpenTreeTaxonomyID(specifier)}}</a>
-                  (<a
-                    target="_blank"
-                    :href="'https://tree.opentreeoflife.org/taxonomy/browse?id=' + getOpenTreeTaxonomyID(specifier)"
-                  >ott</a>)
+                  <a target="_blank" :href="'https://tree.opentreeoflife.org/opentree/@ott' + getOpenTreeTaxonomyID(specifier)">{{getOpenTreeTaxonomyID(specifier)}}</a>
+                  (<a target="_blank" :href="'https://tree.opentreeoflife.org/taxonomy/browse?id=' + getOpenTreeTaxonomyID(specifier)">ott</a>)
                 </template>
               </td>
             </tr>
-            <template v-for="(phyloref, phylorefIndex) of loadedPhylorefs">
-              <tr :key="phylorefIndex"><!-- This :key only works as long as users can't reorder the phylorefs -->
-                <td :rowspan="getSpecifiersForPhyloref(phyloref).length + 1">
-                  {{ phyloref.label || `Phyloref ${phylorefIndex + 1}` }}
-                </td>
-                <td :rowspan="getSpecifiersForPhyloref(phyloref).length + 1">
-                  <span v-html="getPhylorefDescription(phyloref)"></span>
-                </td>
-              </tr>
-              <template v-for="specifier of getSpecifiersForPhyloref(phyloref)">
-                <tr :key="'phyloref' + phylorefIndex + ', specifier: ' + getLabelForSpecifier(specifier)">
-                  <td>{{getSpecifierType(phyloref, specifier)}} <span v-html="getLabelForSpecifierAsHTML(specifier)"></span></td>
-                  <td>
-                    <template v-if="getOpenTreeTaxonomyID(specifier)">
-                      <a target="_blank" :href="'https://tree.opentreeoflife.org/opentree/@ott' + getOpenTreeTaxonomyID(specifier)">{{getOpenTreeTaxonomyID(specifier)}}</a>
-                      (<a target="_blank" :href="'https://tree.opentreeoflife.org/taxonomy/browse?id=' + getOpenTreeTaxonomyID(specifier)">ott</a>)
-                    </template>
-                  </td>
-                </tr>
-              </template>
-            </template>
-          </tbody>
-        </table>
-      </div>
-      <div class="card-footer">
-        <div class="btn-group" role="group" area-label="Add phyloreferences">
-          <button
-            class="btn btn-primary"
-            href="javascript:;"
-            onclick="$('#load-jsonld').trigger('click')"
-          >
-            Add phyloreferences from JSON-LD file
-          </button>
-          <input
-            id="load-jsonld"
-            type="file"
-            multiple="true"
-            class="d-none"
-            @change="loadJSONLDFromFileInputById('#load-jsonld')"
-          >
-          <button class="btn btn-secondary dropdown-toggle" type="button" id="addFromExamples" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            Add phyloreferences from example
-          </button>
-          <div class="dropdown-menu" aria-labelledby="addFromExamples">
-            <a href="javascript:;" class="dropdown-item" v-for="example of exampleJSONLDURLs" v-bind:key="example.url" @click="loadJSONLDFromURL(example.url)">
-              {{example.title}}
-            </a>
-          </div>
-        </div>
-        <div class="btn-group ml-2" role="group" area-label="Edit phyloreference list">
-          <button class="btn btn-danger" type="button" @click="loadedPhylorefs = []">
-            Clear phylorefs
-          </button>
-        </div>
-        <div class="btn-group ml-2" role="group" area-label="Open Tree Taxonomy tasks">
-          <button class="btn btn-primary" type="button" @click="queryOpenTreeTaxonomyIDs()">
-            Query specifiers against Open Tree of Life Taxonomy
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <div class="card border-dark mt-2">
-      <h5 class="card-header border-dark">
-        Phylogeny
-      </h5>
-      <div class="card-body">
-        <form>
-          <div class="form-group row">
-            <label
-              for="newick"
-              class="col-md-2 control-label"
-            >
-              Newick
-            </label>
-            <div class="col-md-10 input-group">
-              <textarea
-                v-model.lazy="newick"
-                rows="3"
-                class="form-control"
-                placeholder="Enter Newick string for phylogeny here"
-              />
-            </div>
-          </div>
-        </form>
-      </div>
-      <div class="card-footer">
-        <div class="btn-group" role="group" area-label="Look up trees on the Open Tree of Life">
-          <button
-            class="btn btn-primary"
-            href="javascript:;"
-            :click="downloadInducedSubtreeFromOpenTreeOfLife(ottIdsForAllSpecifiers)"
-          >
-            Download induced subtree from the Open Tree of Life
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <!-- Display the list of errors encountered when parsing this Newick string -->
-    <div
-      v-if="phylogenyNewickErrors.length !== 0"
-      class="card border-dark mt-2"
-    >
-      <h5 class="card-header bg-danger">
-        Errors occurred while parsing Newick string
-      </h5>
-      <div class="card-body">
-        <template v-for="(error, errorIndex) of phylogenyNewickErrors">
-          <p><strong>{{ error.title }}.</strong> {{ error.message }}</p>
+          </template>
         </template>
-      </div>
-    </div>
-
-    <!-- Display the phylogeny (unless there were Newick parsing errors) -->
-    <div
-      v-if="phylogenyNewickErrors.length === 0"
-      class="card border-dark mt-2"
-    >
-      <h5 class="card-header">
-        Phylogeny visualization
-      </h5>
-      <div class="card-body">
-        <Phylotree
-          :newick="newick"
-        />
-      </div>
-    </div>
-
-  </div>
+      </template>
+    </tbody>
+  </table>
 </template>
 
 <script>
@@ -211,60 +80,14 @@ export default {
       type: Array,
       default: () => { return []; },
     },
-    openTreeTaxonomyInfoBySpecifierLabel: {
+    openTreeTaxonomyInfoByName: {
       type: Object,
       default: () => { return {}; },
     },
   },
-  data: function () {
-    // Local variables for this component.
-    return {
-      flagDisplayExpression: false,
-      loadedPhylorefs: [],
-      openTreeTaxonomyInfoByName: {},
-      newick: '()',
-    };
-  },
-  computed: {
-    allSpecifiers() {
-      return this.loadedPhylorefs.map(phyloref => this.getSpecifiersForPhyloref(phyloref)).reduce((acc, val) => acc.concat(val), []);
-    },
-    phylorefsWithMoreThanOneSpecifier() {
-      return this.loadedPhylorefs.filter(phyloref => (this.getSpecifiersForPhyloref(phyloref) || []).length > 1);
-    },
-    ottIdsForAllSpecifiers() {
-      // Assumes that queryOpenTreeTaxonomyIDs has already been called!
-      const ottIds = this.allSpecifiers.map(specifier => this.getOpenTreeTaxonomyID(specifier))
-        .filter(x => x !== undefined && x !== null);
-      return ottIds;
-    },
-    phylogenyNewickErrors() {
-      const errors = PhylogenyWrapper.getErrorsInNewickString(this.newick);
-
-      // For historical reason, we consider an empty Newick string as an error.
-      // We should not do this.
-      return errors.filter(error => error.title !== 'No phylogeny entered');
-    },
-    exampleJSONLDURLs() { return [
-      // Returns a list of example files to display in the "Examples" menu.
-      {
-        url: 'examples/fisher_et_al_2007.jsonld',
-        title: 'Fisher et al, 2007',
-      },
-      {
-        url: 'examples/hillis_and_wilcox_2005.jsonld',
-        title: 'Hillis and Wilcox, 2005',
-      },
-      {
-        url: 'examples/brochu_2003.jsonld',
-        title: 'Brochu 2003',
-      },
-    ]}
-  },
   methods: {
-    /*
-     * Phyloref and specifier getters (should be moved into phyx.js)
-     */
+
+    /* Phyloref and specifier getters (should be moved into phyx.js) */
 
     getPhylorefDescription(phyloref) {
       // Returns the clade definition of a particular phyloreference. Supports both

From c8082851b8863d0d9ee7c5100e2e485e88d0617b Mon Sep 17 00:00:00 2001
From: Gaurav Vaidya <gaurav@ggvaidya.com>
Date: Tue, 16 Apr 2019 13:37:15 -0400
Subject: [PATCH 04/18] Remove redundancy by replacing OTT info by sciname with
 specifier label.

---
 src/components/PhylorefTable.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/PhylorefTable.vue b/src/components/PhylorefTable.vue
index e3c02de..2b0cd66 100644
--- a/src/components/PhylorefTable.vue
+++ b/src/components/PhylorefTable.vue
@@ -80,7 +80,7 @@ export default {
       type: Array,
       default: () => { return []; },
     },
-    openTreeTaxonomyInfoByName: {
+    openTreeTaxonomyInfoBySpecifierLabel: {
       type: Object,
       default: () => { return {}; },
     },

From e9030ea3f636c0d816d0905e37e0b0ce4f347183 Mon Sep 17 00:00:00 2001
From: Gaurav Vaidya <gaurav@ggvaidya.com>
Date: Tue, 16 Apr 2019 13:39:58 -0400
Subject: [PATCH 05/18] Removed unnecessary variables, reindented HTML,
 improved documentation.

---
 src/components/PhylorefTable.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/PhylorefTable.vue b/src/components/PhylorefTable.vue
index 2b0cd66..265b612 100644
--- a/src/components/PhylorefTable.vue
+++ b/src/components/PhylorefTable.vue
@@ -47,8 +47,14 @@
               </td>
               <td>
                 <template v-if="getOpenTreeTaxonomyID(specifier)">
-                  <a target="_blank" :href="'https://tree.opentreeoflife.org/opentree/@ott' + getOpenTreeTaxonomyID(specifier)">{{getOpenTreeTaxonomyID(specifier)}}</a>
-                  (<a target="_blank" :href="'https://tree.opentreeoflife.org/taxonomy/browse?id=' + getOpenTreeTaxonomyID(specifier)">ott</a>)
+                  <a
+                    target="_blank"
+                    :href="'https://tree.opentreeoflife.org/opentree/@ott' + getOpenTreeTaxonomyID(specifier)"
+                  >{{getOpenTreeTaxonomyID(specifier)}}</a>
+                  (<a
+                    target="_blank"
+                    :href="'https://tree.opentreeoflife.org/taxonomy/browse?id=' + getOpenTreeTaxonomyID(specifier)"
+                  >ott</a>)
                 </template>
               </td>
             </tr>

From d41388e2ca519208cddd74e01de6973a5bf6eed3 Mon Sep 17 00:00:00 2001
From: Gaurav Vaidya <gaurav@ggvaidya.com>
Date: Tue, 16 Apr 2019 15:13:20 -0400
Subject: [PATCH 06/18] Fixed issues raised by ESlint.

---
 src/components/PhylorefTable.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/PhylorefTable.vue b/src/components/PhylorefTable.vue
index 265b612..d33116e 100644
--- a/src/components/PhylorefTable.vue
+++ b/src/components/PhylorefTable.vue
@@ -78,9 +78,6 @@ import { PhylorefWrapper } from '@phyloref/phyx';
 
 export default {
   name: 'PhylorefTable',
-  components: {
-    Phylotree,
-  },
   props: {
     phylorefs: {
       type: Array,

From ba0b8fe63d6e3f2057176999d4c248f87910c572 Mon Sep 17 00:00:00 2001
From: Gaurav Vaidya <gaurav@ggvaidya.com>
Date: Thu, 11 Apr 2019 21:05:06 -0400
Subject: [PATCH 07/18] Added support for reasoning over phylorefs.

---
 src/components/PhylorefTable.vue | 216 +++++++++++++++++++++++++++++++
 1 file changed, 216 insertions(+)

diff --git a/src/components/PhylorefTable.vue b/src/components/PhylorefTable.vue
index d33116e..bb3da83 100644
--- a/src/components/PhylorefTable.vue
+++ b/src/components/PhylorefTable.vue
@@ -88,7 +88,223 @@ export default {
       default: () => { return {}; },
     },
   },
+  computed: {
+    asOntology() {
+      const phylorefsWithEquivalentClass = this.loadedPhylorefs.filter(
+        phyloref => has(phyloref, 'equivalentClass')
+      );
+      // Add the phylogeny.
+      const phylogenyNodes = new PhylogenyWrapper({
+        newick: this.newick,
+      }).getNodesAsJSONLD(this.ONTOLOGY_BASEURI + 'phylogeny');
+      const phylorefsByLabel = {};
+      phylorefsWithEquivalentClass.forEach(phyloref => {
+        if(has(phyloref, 'label')) {
+          if(!has(phyloref, '@id')) {
+            // TODO: make up an '@id'.
+          }
+          phylorefsByLabel[phyloref.label] = phyloref;
+        }
+      });
+      // Modify nodes to support Model 2.0 taxonomic units.
+      this.currentNodes = {};
+      phylogenyNodes.forEach(nodeAsParam => {
+        const node = nodeAsParam;
+        // Set a context.
+        node['@context'] = this.PHYX_CONTEXT_JSON;
+        // Make sure this node has a '@type'.
+        if (!has(node, '@type')) node['@type'] = [];
+        if (!Array.isArray(node['@type'])) node['@type'] = [node['@type']];
+        // We replace "parent" with "obo:CDAO_0000179" so we get has_Parent
+        // relationships in our output ontology.
+        // To be fixed in https://github.com/phyloref/phyx.js/issues/10
+        if (has(node, 'parent')) node['obo:CDAO_0000179'] = { '@id': node.parent };
+        // For every internal node in this phylogeny, check to see if it's expected to
+        // resolve to a phylogeny we know about. If so, add an rdf:type to that effect.
+        let expectedToResolveTo = node.labels || [];
+        // Are there any phyloreferences expected to resolve here?
+        if (has(node, 'expectedPhyloreferenceNamed')) {
+          expectedToResolveTo = expectedToResolveTo.concat(node.expectedPhyloreferenceNamed);
+        }
+        expectedToResolveTo.forEach((phylorefLabel) => {
+          if (!has(phylorefsByLabel, phylorefLabel)) return;
+          // This node is expected to match phylorefLabel, which is a phyloreference we know about.
+          const phylorefId = phylorefsByLabel[phylorefLabel]['@id'];
+          node['@type'].push({
+            '@type': 'owl:Restriction',
+            onProperty: 'obo:OBI_0000312', // obi:is_specified_output_of
+            someValuesFrom: {
+              '@type': 'owl:Class',
+              intersectionOf: [
+                { '@id': 'obo:OBI_0302910' }, // obi:prediction
+                {
+                  '@type': 'owl:Restriction',
+                  onProperty: 'obo:OBI_0000293', // obi:has_specified_input
+                  someValuesFrom: { '@id': phylorefId },
+                },
+              ],
+            },
+          });
+        });
+        // Does this node have taxonomic units? If so, convert them into class expressions.
+        if (has(node, 'representsTaxonomicUnits')) {
+          node.representsTaxonomicUnits.forEach((tunit) => {
+            this.convertTUtoRestriction(tunit).forEach((restriction) => {
+              node['@type'].push({
+                '@type': 'owl:Restriction',
+                onProperty: 'obo:CDAO_0000187',
+                someValuesFrom: restriction,
+              });
+            });
+          });
+        }
+        // Now, rdfpipe can handle '@type's that contain restrictions,
+        // but OWLAPI can't. So let's translate all '@type's into
+        // 'http://www.w3.org/1999/02/22-rdf-syntax-ns#type'.
+        node['http://www.w3.org/1999/02/22-rdf-syntax-ns#type'] = node['@type']
+          .map(c => isString(c) ? { '@id': c } : c);
+        delete node['@type'];
+        // Store for later lookups.
+        this.currentNodes[node['@id']] = node;
+      });
+      // Finally, add a header for this ontology.
+      let ontologyHeader = [
+        {
+          '@context': this.PHYX_CONTEXT_JSON,
+          '@id': this.ONTOLOGY_BASEURI,
+          '@type': 'owl:Ontology',
+          'owl:imports': [
+            'http://raw.githubusercontent.com/phyloref/curation-workflow/develop/ontologies/phyloref_testcase.owl',
+            'http://ontology.phyloref.org/2018-12-14/phyloref.owl',
+            'http://ontology.phyloref.org/2018-12-14/tcan.owl',
+          ],
+        },
+      ];
+      return JSON.stringify(ontologyHeader.concat(phylorefsWithEquivalentClass).concat(phylogenyNodes), null, 4);
+    },
+    exampleJSONLDURLs() { return [
+      // Returns a list of example files to display in the "Examples" menu.
+      {
+        url: 'examples/fisher_et_al_2007.jsonld',
+        title: 'Fisher et al, 2007',
+      },
+      {
+        url: 'examples/hillis_and_wilcox_2005.jsonld',
+        title: 'Hillis and Wilcox, 2005',
+      },
+      {
+        url: 'examples/brochu_2003.jsonld',
+        title: 'Brochu 2003',
+      },
+    ]}
+  },
   methods: {
+    convertTUtoRestriction(tunit) {
+      // If we're called with a specifier, use the first TU in that specifier (for now).
+      if (has(tunit, 'referencesTaxonomicUnits')) {
+        return this.convertTUtoRestriction(tunit.referencesTaxonomicUnits[0] || {});
+      }
+      // Build up a series of taxonomic units from scientific names and specimens.
+      const results = [];
+      if (has(tunit, 'scientificNames')) {
+        tunit.scientificNames.forEach((sciname) => {
+          const wrappedSciname = new ScientificNameWrapper(sciname);
+          results.push({
+            '@type': 'owl:Restriction',
+            onProperty: 'http://rs.tdwg.org/ontology/voc/TaxonConcept#hasName',
+            someValuesFrom: {
+              '@type': 'owl:Class',
+              intersectionOf: [
+                {
+                  // TODO: replace with a check once we close https://github.com/phyloref/phyx.js/issues/5.
+                  // For now, we pretend that all names are ICZN names.
+                  '@id': 'obo:NOMEN_0000107',
+                },
+                {
+                  '@type': 'owl:Restriction',
+                  onProperty: 'dwc:scientificName',
+                  // TODO: We really want the "canonical name" here: binomial or
+                  // trinomial, but without any additional authority information.
+                  // See https://github.com/phyloref/phyx.js/issues/8
+                  hasValue: wrappedSciname.binomialName,
+                },
+              ],
+            },
+          });
+        });
+      } else if (has(tunit, 'includesSpecimens')) {
+        // This is a quick-and-dirty implementation. Discussion about it should be
+        // carried out in https://github.com/phyloref/clade-ontology/issues/61
+        tunit.includesSpecimens.forEach((specimen) => {
+          const wrappedSpecimen = new SpecimenWrapper(specimen);
+          results.push({
+            '@type': 'owl:Restriction',
+            onProperty: 'dwc:organismID',
+            hasValue: wrappedSpecimen.occurrenceID,
+          });
+        });
+      } else {
+        // Ignore it for now (but warn the user).
+        console.log(`WARNING: taxonomic unit could not be converted into restriction: ${JSON.stringify(tunit)}\n`);
+        results.push({});
+      }
+      return results;
+    },
+
+    reasonOverPhylogeny() {
+      // Send JSON-LD to server for reasoning.
+      // Reason over all the phyloreferences and store the results on
+      // the Vue model at vm.reasoningResults so we can access them.
+      // Are we already reasoning? If so, ignore.
+      if (this.reasoningInProgress) return;
+      // Disable "Reason" buttons so they can't be reused.
+      this.reasoningInProgress = true;
+      this.reasoningResults = {};
+
+      jQuery.post('http://localhost:34214/reason', {
+        // This will convert the JSON-LD file into an application/x-www-form-urlencoded
+        // string (see https://api.jquery.com/jquery.ajax/#jQuery-ajax-settings under
+        // processData for details). The POST data sent to the server will look like:
+        //  jsonld=%7B%5B%7B%22title%22%3A...
+        // which translates to:
+        //  jsonld={[{"title":...
+        jsonld: this.asOntology,
+      }).done((data) => {
+        this.reasoningResults = data.phylorefs;
+        // console.log('Data retrieved: ', data);
+      }).fail((jqXHR, textStatus, errorThrown) => {
+        // We can try using the third argument, but it appears to be the
+        // HTTP status (e.g. 'Internal Server Error'). So we default to that,
+        // but look for a better one in the JSON response from the server, if
+        // available.
+        let error = errorThrown;
+        if (has(jqXHR, 'responseJSON') && has(jqXHR.responseJSON, 'error')) {
+          error = jqXHR.responseJSON.error;
+        }
+        if (error === undefined || error === '') error = 'unknown error';
+        alert(`Error occurred on server while reasoning: ${error}`);
+      }).always(() => {
+        // Reset "Reasoning" buttons to their usual state.
+        this.reasoningInProgress = false;
+      });
+    },
+
+    getOTTNodeId(node) {
+      const labels = node.labels || [];
+      if(labels.length == 0) return undefined;
+      const label = labels[0]; // Ignore other labels.
+      const match = /^(.*)[_\s](.*?ott.*)$/.exec(label);
+      if(match == null) {
+          const matchMRCA = /^mrca.*$/.exec(label);
+          if(matchMRCA == null) return undefined;
+          return ["", label];
+      }
+      return [match[1], match[2]];
+    },
+
+    downloadInducedSubtreeFromOpenTreeOfLife(ottIds) {
+      if(ottIds.length === 0) return;
+    },
 
     /* Phyloref and specifier getters (should be moved into phyx.js) */
 

From f087f5dc8b0d95bc708fd5467ebd300b49bbc3ea Mon Sep 17 00:00:00 2001
From: Gaurav Vaidya <gaurav@ggvaidya.com>
Date: Thu, 11 Apr 2019 22:14:42 -0400
Subject: [PATCH 08/18] Tweaked UI.

---
 src/components/PhylorefTable.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/PhylorefTable.vue b/src/components/PhylorefTable.vue
index bb3da83..ff40db5 100644
--- a/src/components/PhylorefTable.vue
+++ b/src/components/PhylorefTable.vue
@@ -3,6 +3,7 @@
     <thead>
       <th width="15%">Name</th>
       <th width="40%">Description</th>
+      <th>Resolved Open Tree node</th>
       <th>Specifiers</th>
       <th>Open Tree Taxonomy ID</th>
     </thead>

From 09d69967954b94833221c17e3d3132891ee70444 Mon Sep 17 00:00:00 2001
From: Gaurav Vaidya <gaurav@ggvaidya.com>
Date: Thu, 11 Apr 2019 23:52:11 -0400
Subject: [PATCH 09/18] Tweaked UI to look better on Safari.

---
 src/components/phylogeny/Phylotree.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/phylogeny/Phylotree.vue b/src/components/phylogeny/Phylotree.vue
index 8b2ed06..3345667 100644
--- a/src/components/phylogeny/Phylotree.vue
+++ b/src/components/phylogeny/Phylotree.vue
@@ -5,7 +5,7 @@
         <p :key="errorIndex"><strong>{{ error.title }}.</strong> {{ error.message }}</p>
       </template>
     </template>
-    <div
+    <template
       v-else
       class="phylotreeContainer"
     >
@@ -14,7 +14,7 @@
         :id="'phylogeny_' + phylogenyIndex"
       />
       <ResizeObserver @notify="redrawTree()" />
-    </div>
+    </template>
   </div>
 </template>
 
@@ -97,6 +97,7 @@ export default {
           'left-right-spacing': 'fit-to-size',
           'top-bottom-spacing': 'fixed-step',
         })
+        .font_size(16)
         .style_nodes((element, data) => {
           // Instructions used to style nodes in Phylotree
           // - element: The D3 element of the node being styled
@@ -108,7 +109,7 @@ export default {
           if (has(data, 'name') && data.name !== '' && data.children) {
             // If the node has a label and has children (i.e. is an internal node),
             // we display it next to the node by creating a new 'text' element.
-            if (textLabel.empty()) {
+            if (0 && textLabel.empty()) {
               textLabel = element.append('text');
 
               // Place internal label to the left of the root node.
@@ -187,7 +188,7 @@ export default {
  */
 .node {
   /* Phylotree's CSS sets this to 10px; we prefer larger node labels */
-  font-size: 11pt;
+  font-size: 14pt;
 }
 
 /* Labels for internal nodes, whether phylorefs or not */

From fe126fa798a579d52bc20320a64dc545613cd98a Mon Sep 17 00:00:00 2001
From: Gaurav Vaidya <gaurav@ggvaidya.com>
Date: Tue, 16 Apr 2019 18:31:06 -0400
Subject: [PATCH 10/18] Added column for resolved Open Tree node in
 PhylorefTable.

---
 src/components/PhylorefTable.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/PhylorefTable.vue b/src/components/PhylorefTable.vue
index ff40db5..295bd48 100644
--- a/src/components/PhylorefTable.vue
+++ b/src/components/PhylorefTable.vue
@@ -12,7 +12,7 @@
         v-if="phylorefs.length === 0"
         class="bg-white"
       >
-        <td colspan="4">
+        <td colspan="5">
           <center><em>No phyloreferences loaded</em></center>
         </td>
       </tr>
@@ -25,6 +25,7 @@
             <td>
               <span v-html="getPhylorefDescription(phyloref)"></span>
             </td>
+            <td>&nbsp;</td>
             <td>
               <center><em>No specifiers provided.</em></center>
             </td>
@@ -41,6 +42,9 @@
                 <td :rowspan="getSpecifiersForPhyloref(phyloref).length">
                   <span v-html="getPhylorefDescription(phyloref)"></span>
                 </td>
+                <td :rowspan="getSpecifiersForPhyloref(phyloref).length">
+                  TODO Resolved node
+                </td>
               </template>
               <td>
                 {{getSpecifierType(phyloref, specifier)}}

From 8d2078ca733d329306e7e7f6dfa0c645831b31cb Mon Sep 17 00:00:00 2001
From: Gaurav Vaidya <gaurav@ggvaidya.com>
Date: Tue, 16 Apr 2019 18:32:10 -0400
Subject: [PATCH 11/18] Decreased terminal label font, made internal node
 labels optional.

---
 src/components/phylogeny/Phylotree.vue | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/phylogeny/Phylotree.vue b/src/components/phylogeny/Phylotree.vue
index 3345667..f71f173 100644
--- a/src/components/phylogeny/Phylotree.vue
+++ b/src/components/phylogeny/Phylotree.vue
@@ -39,6 +39,7 @@ Vue.component('ResizeObserver', ResizeObserver);
 export default {
   name: 'Phylotree',
   props: {
+    /* Inputs */
     newick: { // The Newick string of the phylogeny to display.
       type: String,
       default: '()',
@@ -54,6 +55,11 @@ export default {
     baseURIForPhylogeny: {
       type: String,
     },
+    /* Configuration options */
+    displayInternalNodes: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     baseURIForPhylogenyComputed() {
@@ -97,7 +103,6 @@ export default {
           'left-right-spacing': 'fit-to-size',
           'top-bottom-spacing': 'fixed-step',
         })
-        .font_size(16)
         .style_nodes((element, data) => {
           // Instructions used to style nodes in Phylotree
           // - element: The D3 element of the node being styled
@@ -109,7 +114,7 @@ export default {
           if (has(data, 'name') && data.name !== '' && data.children) {
             // If the node has a label and has children (i.e. is an internal node),
             // we display it next to the node by creating a new 'text' element.
-            if (0 && textLabel.empty()) {
+            if (this.displayInternalNodes && textLabel.empty()) {
               textLabel = element.append('text');
 
               // Place internal label to the left of the root node.
@@ -187,8 +192,7 @@ export default {
  * refers only to the labels next to the nodes.
  */
 .node {
-  /* Phylotree's CSS sets this to 10px; we prefer larger node labels */
-  font-size: 14pt;
+  font-size: 11pt;
 }
 
 /* Labels for internal nodes, whether phylorefs or not */

From 43e8be9407428ace631dfe79e20b1a67271bdc87 Mon Sep 17 00:00:00 2001
From: Gaurav Vaidya <gaurav@ggvaidya.com>
Date: Tue, 16 Apr 2019 19:03:58 -0400
Subject: [PATCH 12/18] First attempt at moving reasoning code into App.vue.

---
 src/App.vue                      | 184 +++++++++++++++++++++++++-
 src/components/PhylorefTable.vue | 220 ++++---------------------------
 2 files changed, 204 insertions(+), 200 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index f23b82e..450541a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -10,6 +10,7 @@
           <PhylorefTable
             :phylorefs="phylorefs"
             :openTreeTaxonomyInfoBySpecifierLabel="openTreeTaxonomyInfoBySpecifierLabel"
+            :reasoningResults="reasoningResults"
           />
         </div>
         <div class="card-footer">
@@ -97,8 +98,20 @@
         <div class="card-body">
           <Phylotree
             :newick="newick"
+            :baseURIForPhylogeny="ONTOLOGY_BASEURI + 'phylogeny'"
           />
         </div>
+        <div class="card-footer">
+          <div class="btn-group" role="group" area-label="Reason over phylogeny">
+            <button
+              class="btn btn-primary"
+              href="javascript:;"
+              @click="reasonOverPhylogeny()"
+            >
+              Reason over phylogeny
+            </button>
+          </div>
+        </div>
       </div>
     </div>
 
@@ -115,9 +128,9 @@
  *  - downloading the induced subtree for the set of all OTT ids
  */
 
-import { has, isEqual, chunk, uniq } from 'lodash';
+import { has, isEqual, chunk, uniq, uniqueId, isString } from 'lodash';
 import jQuery from 'jquery';
-import { PhylorefWrapper } from '@phyloref/phyx';
+import { PhylorefWrapper, SpecimenWrapper, ScientificNameWrapper, PhylogenyWrapper } from '@phyloref/phyx';
 import Vue from 'vue';
 
 // Navigation controls.
@@ -146,6 +159,10 @@ export default {
     phylorefs: [],
     newick: "()",
     openTreeTaxonomyInfoByName: {},
+    reasoningResults: {},
+    reasoningInProgress: false,
+    PHYX_CONTEXT_JSON: "http://www.phyloref.org/phyx.js/context/v0.1.0/phyx.json",
+    ONTOLOGY_BASEURI: "http://example.org/phyloref_open_tree_resolver#",
   }},
   computed: {
     allSpecifiers() {
@@ -176,6 +193,71 @@ export default {
       });
       return openTreeTaxonomyInfoBySpecifierLabel;
     },
+    asOntology() {
+      const phylorefsWithEquivalentClass = this.phylorefs.filter(
+        phyloref => has(phyloref, 'equivalentClass')
+      );
+      // Add the phylogeny.
+      const phylogenyNodes = new PhylogenyWrapper({
+        newick: this.newick,
+      }).getNodesAsJSONLD(this.ONTOLOGY_BASEURI + 'phylogeny');
+
+      phylorefsWithEquivalentClass.forEach(phyloref => {
+        if(has(phyloref, 'label')) {
+          if(!has(phyloref, '@id')) {
+            phyloref['@id'] = this.ONTOLOGY_BASEURI + 'phyloref_' + uniqueId();
+          }
+        }
+      });
+
+      // Modify nodes to support Model 2.0 taxonomic units.
+      phylogenyNodes.forEach(nodeAsParam => {
+        const node = nodeAsParam;
+        // Set a context.
+        node['@context'] = this.PHYX_CONTEXT_JSON;
+
+        // Make sure this node has a '@type'.
+        if (!has(node, '@type')) node['@type'] = [];
+        if (!Array.isArray(node['@type'])) node['@type'] = [node['@type']];
+        // We replace "parent" with "obo:CDAO_0000179" so we get has_Parent
+        // relationships in our output ontology.
+        // To be fixed in https://github.com/phyloref/phyx.js/issues/10
+        if (has(node, 'parent')) node['obo:CDAO_0000179'] = { '@id': node.parent };
+
+        // Does this node have taxonomic units? If so, convert them into class expressions.
+        if (has(node, 'representsTaxonomicUnits')) {
+          node.representsTaxonomicUnits.forEach((tunit) => {
+            this.convertTUtoRestriction(tunit).forEach((restriction) => {
+              node['@type'].push({
+                '@type': 'owl:Restriction',
+                onProperty: 'obo:CDAO_0000187',
+                someValuesFrom: restriction,
+              });
+            });
+          });
+        }
+        // Now, rdfpipe can handle '@type's that contain restrictions,
+        // but OWLAPI can't. So let's translate all '@type's into
+        // 'http://www.w3.org/1999/02/22-rdf-syntax-ns#type'.
+        node['http://www.w3.org/1999/02/22-rdf-syntax-ns#type'] = node['@type']
+          .map(c => isString(c) ? { '@id': c } : c);
+        delete node['@type'];
+      });
+      // Finally, add a header for this ontology.
+      let ontologyHeader = [
+        {
+          '@context': this.PHYX_CONTEXT_JSON,
+          '@id': this.ONTOLOGY_BASEURI,
+          '@type': 'owl:Ontology',
+          'owl:imports': [
+            'http://raw.githubusercontent.com/phyloref/curation-workflow/develop/ontologies/phyloref_testcase.owl',
+            'http://ontology.phyloref.org/2018-12-14/phyloref.owl',
+            'http://ontology.phyloref.org/2018-12-14/tcan.owl',
+          ],
+        },
+      ];
+      return JSON.stringify(ontologyHeader.concat(phylorefsWithEquivalentClass).concat(phylogenyNodes), null, 4);
+    },
     exampleJSONLDURLs() { return [
       // Returns a list of example files to display in the "Examples" menu.
       {
@@ -338,6 +420,104 @@ export default {
       });
     },
 
+    /* Reasoning over phylogenies. */
+
+    convertTUtoRestriction(tunit) {
+      // Return an OWL restriction for a taxonomic unit or specifier.
+      // This code is taken from phyx2ontology.js [1], but once it has been moved into
+      // phyx.js [2], we can delete it here and call it directly in the library.
+      // - [1] https://github.com/phyloref/clade-ontology/blob/02bb88cff1e2cbe28a7214b90b8055a5fc9fd903/phyx2ontology/model2.js#L25-L79
+      // - [2] https://github.com/phyloref/phyx.js/issues/4
+
+      // If we're called with a specifier, use the first TU in that specifier (for now).
+      if (has(tunit, 'referencesTaxonomicUnits')) {
+        return this.convertTUtoRestriction(tunit.referencesTaxonomicUnits[0] || {});
+      }
+      // Build up a series of taxonomic units from scientific names and specimens.
+      const results = [];
+      if (has(tunit, 'scientificNames')) {
+        tunit.scientificNames.forEach((sciname) => {
+          const wrappedSciname = new ScientificNameWrapper(sciname);
+          results.push({
+            '@type': 'owl:Restriction',
+            onProperty: 'http://rs.tdwg.org/ontology/voc/TaxonConcept#hasName',
+            someValuesFrom: {
+              '@type': 'owl:Class',
+              intersectionOf: [
+                {
+                  // TODO: replace with a check once we close https://github.com/phyloref/phyx.js/issues/5.
+                  // For now, we pretend that all names are ICZN names.
+                  '@id': 'obo:NOMEN_0000107',
+                },
+                {
+                  '@type': 'owl:Restriction',
+                  onProperty: 'dwc:scientificName',
+                  // TODO: We really want the "canonical name" here: binomial or
+                  // trinomial, but without any additional authority information.
+                  // See https://github.com/phyloref/phyx.js/issues/8
+                  hasValue: wrappedSciname.binomialName,
+                },
+              ],
+            },
+          });
+        });
+      } else if (has(tunit, 'includesSpecimens')) {
+        // This is a quick-and-dirty implementation. Discussion about it should be
+        // carried out in https://github.com/phyloref/clade-ontology/issues/61
+        tunit.includesSpecimens.forEach((specimen) => {
+          const wrappedSpecimen = new SpecimenWrapper(specimen);
+          results.push({
+            '@type': 'owl:Restriction',
+            onProperty: 'dwc:organismID',
+            hasValue: wrappedSpecimen.occurrenceID,
+          });
+        });
+      } else {
+        // Ignore it for now (but warn the user).
+        console.log(`WARNING: taxonomic unit could not be converted into restriction: ${JSON.stringify(tunit)}\n`);
+        results.push({});
+      }
+      return results;
+    },
+
+    reasonOverPhylogeny() {
+      // Send JSON-LD to server for reasoning. Reasoning results will be stored in
+      // this.reasoningResults.
+
+      // Are we already reasoning? If so, ignore.
+      if (this.reasoningInProgress) return;
+      // Disable "Reason" buttons so they can't be reused.
+      this.reasoningInProgress = true;
+      this.reasoningResults = {};
+
+      jQuery.post('http://localhost:34214/reason', {
+        // This will convert the JSON-LD file into an application/x-www-form-urlencoded
+        // string (see https://api.jquery.com/jquery.ajax/#jQuery-ajax-settings under
+        // processData for details). The POST data sent to the server will look like:
+        //  jsonld=%7B%5B%7B%22title%22%3A...
+        // which translates to:
+        //  jsonld={[{"title":...
+        jsonld: this.asOntology,
+      }).done((data) => {
+        this.reasoningResults = data.phylorefs;
+        // console.log('Data retrieved: ', data);
+      }).fail((jqXHR, textStatus, errorThrown) => {
+        // We can try using the third argument, but it appears to be the
+        // HTTP status (e.g. 'Internal Server Error'). So we default to that,
+        // but look for a better one in the JSON response from the server, if
+        // available.
+        let error = errorThrown;
+        if (has(jqXHR, 'responseJSON') && has(jqXHR.responseJSON, 'error')) {
+          error = jqXHR.responseJSON.error;
+        }
+        if (error === undefined || error === '') error = 'unknown error';
+        alert(`Error occurred on server while reasoning: ${error}`);
+      }).always(() => {
+        // Reset "Reasoning" buttons to their usual state.
+        this.reasoningInProgress = false;
+      });
+    },
+
     /*
      * Load phyloreferences from JSON-LD from URLs and files
      */
diff --git a/src/components/PhylorefTable.vue b/src/components/PhylorefTable.vue
index 295bd48..c03ee67 100644
--- a/src/components/PhylorefTable.vue
+++ b/src/components/PhylorefTable.vue
@@ -43,7 +43,7 @@
                   <span v-html="getPhylorefDescription(phyloref)"></span>
                 </td>
                 <td :rowspan="getSpecifiersForPhyloref(phyloref).length">
-                  TODO Resolved node
+                  <a :href="getURLForOpenTreeResolvedNode(phyloref)">{{getLabelForOpenTreeResolvedNode(phyloref)}}</a>
                 </td>
               </template>
               <td>
@@ -79,6 +79,7 @@
  *  - Open Tree Taxonomy ID
  */
 
+import { has } from 'lodash';
 import { PhylorefWrapper } from '@phyloref/phyx';
 
 export default {
@@ -92,206 +93,33 @@ export default {
       type: Object,
       default: () => { return {}; },
     },
-  },
-  computed: {
-    asOntology() {
-      const phylorefsWithEquivalentClass = this.loadedPhylorefs.filter(
-        phyloref => has(phyloref, 'equivalentClass')
-      );
-      // Add the phylogeny.
-      const phylogenyNodes = new PhylogenyWrapper({
-        newick: this.newick,
-      }).getNodesAsJSONLD(this.ONTOLOGY_BASEURI + 'phylogeny');
-      const phylorefsByLabel = {};
-      phylorefsWithEquivalentClass.forEach(phyloref => {
-        if(has(phyloref, 'label')) {
-          if(!has(phyloref, '@id')) {
-            // TODO: make up an '@id'.
-          }
-          phylorefsByLabel[phyloref.label] = phyloref;
-        }
-      });
-      // Modify nodes to support Model 2.0 taxonomic units.
-      this.currentNodes = {};
-      phylogenyNodes.forEach(nodeAsParam => {
-        const node = nodeAsParam;
-        // Set a context.
-        node['@context'] = this.PHYX_CONTEXT_JSON;
-        // Make sure this node has a '@type'.
-        if (!has(node, '@type')) node['@type'] = [];
-        if (!Array.isArray(node['@type'])) node['@type'] = [node['@type']];
-        // We replace "parent" with "obo:CDAO_0000179" so we get has_Parent
-        // relationships in our output ontology.
-        // To be fixed in https://github.com/phyloref/phyx.js/issues/10
-        if (has(node, 'parent')) node['obo:CDAO_0000179'] = { '@id': node.parent };
-        // For every internal node in this phylogeny, check to see if it's expected to
-        // resolve to a phylogeny we know about. If so, add an rdf:type to that effect.
-        let expectedToResolveTo = node.labels || [];
-        // Are there any phyloreferences expected to resolve here?
-        if (has(node, 'expectedPhyloreferenceNamed')) {
-          expectedToResolveTo = expectedToResolveTo.concat(node.expectedPhyloreferenceNamed);
-        }
-        expectedToResolveTo.forEach((phylorefLabel) => {
-          if (!has(phylorefsByLabel, phylorefLabel)) return;
-          // This node is expected to match phylorefLabel, which is a phyloreference we know about.
-          const phylorefId = phylorefsByLabel[phylorefLabel]['@id'];
-          node['@type'].push({
-            '@type': 'owl:Restriction',
-            onProperty: 'obo:OBI_0000312', // obi:is_specified_output_of
-            someValuesFrom: {
-              '@type': 'owl:Class',
-              intersectionOf: [
-                { '@id': 'obo:OBI_0302910' }, // obi:prediction
-                {
-                  '@type': 'owl:Restriction',
-                  onProperty: 'obo:OBI_0000293', // obi:has_specified_input
-                  someValuesFrom: { '@id': phylorefId },
-                },
-              ],
-            },
-          });
-        });
-        // Does this node have taxonomic units? If so, convert them into class expressions.
-        if (has(node, 'representsTaxonomicUnits')) {
-          node.representsTaxonomicUnits.forEach((tunit) => {
-            this.convertTUtoRestriction(tunit).forEach((restriction) => {
-              node['@type'].push({
-                '@type': 'owl:Restriction',
-                onProperty: 'obo:CDAO_0000187',
-                someValuesFrom: restriction,
-              });
-            });
-          });
-        }
-        // Now, rdfpipe can handle '@type's that contain restrictions,
-        // but OWLAPI can't. So let's translate all '@type's into
-        // 'http://www.w3.org/1999/02/22-rdf-syntax-ns#type'.
-        node['http://www.w3.org/1999/02/22-rdf-syntax-ns#type'] = node['@type']
-          .map(c => isString(c) ? { '@id': c } : c);
-        delete node['@type'];
-        // Store for later lookups.
-        this.currentNodes[node['@id']] = node;
-      });
-      // Finally, add a header for this ontology.
-      let ontologyHeader = [
-        {
-          '@context': this.PHYX_CONTEXT_JSON,
-          '@id': this.ONTOLOGY_BASEURI,
-          '@type': 'owl:Ontology',
-          'owl:imports': [
-            'http://raw.githubusercontent.com/phyloref/curation-workflow/develop/ontologies/phyloref_testcase.owl',
-            'http://ontology.phyloref.org/2018-12-14/phyloref.owl',
-            'http://ontology.phyloref.org/2018-12-14/tcan.owl',
-          ],
-        },
-      ];
-      return JSON.stringify(ontologyHeader.concat(phylorefsWithEquivalentClass).concat(phylogenyNodes), null, 4);
+    reasoningResults: {
+      type: Object,
+      default: () => { return {}; },
     },
-    exampleJSONLDURLs() { return [
-      // Returns a list of example files to display in the "Examples" menu.
-      {
-        url: 'examples/fisher_et_al_2007.jsonld',
-        title: 'Fisher et al, 2007',
-      },
-      {
-        url: 'examples/hillis_and_wilcox_2005.jsonld',
-        title: 'Hillis and Wilcox, 2005',
-      },
-      {
-        url: 'examples/brochu_2003.jsonld',
-        title: 'Brochu 2003',
-      },
-    ]}
   },
   methods: {
-    convertTUtoRestriction(tunit) {
-      // If we're called with a specifier, use the first TU in that specifier (for now).
-      if (has(tunit, 'referencesTaxonomicUnits')) {
-        return this.convertTUtoRestriction(tunit.referencesTaxonomicUnits[0] || {});
-      }
-      // Build up a series of taxonomic units from scientific names and specimens.
-      const results = [];
-      if (has(tunit, 'scientificNames')) {
-        tunit.scientificNames.forEach((sciname) => {
-          const wrappedSciname = new ScientificNameWrapper(sciname);
-          results.push({
-            '@type': 'owl:Restriction',
-            onProperty: 'http://rs.tdwg.org/ontology/voc/TaxonConcept#hasName',
-            someValuesFrom: {
-              '@type': 'owl:Class',
-              intersectionOf: [
-                {
-                  // TODO: replace with a check once we close https://github.com/phyloref/phyx.js/issues/5.
-                  // For now, we pretend that all names are ICZN names.
-                  '@id': 'obo:NOMEN_0000107',
-                },
-                {
-                  '@type': 'owl:Restriction',
-                  onProperty: 'dwc:scientificName',
-                  // TODO: We really want the "canonical name" here: binomial or
-                  // trinomial, but without any additional authority information.
-                  // See https://github.com/phyloref/phyx.js/issues/8
-                  hasValue: wrappedSciname.binomialName,
-                },
-              ],
-            },
-          });
-        });
-      } else if (has(tunit, 'includesSpecimens')) {
-        // This is a quick-and-dirty implementation. Discussion about it should be
-        // carried out in https://github.com/phyloref/clade-ontology/issues/61
-        tunit.includesSpecimens.forEach((specimen) => {
-          const wrappedSpecimen = new SpecimenWrapper(specimen);
-          results.push({
-            '@type': 'owl:Restriction',
-            onProperty: 'dwc:organismID',
-            hasValue: wrappedSpecimen.occurrenceID,
-          });
-        });
-      } else {
-        // Ignore it for now (but warn the user).
-        console.log(`WARNING: taxonomic unit could not be converted into restriction: ${JSON.stringify(tunit)}\n`);
-        results.push({});
+
+    /* Methods for accessing Open Tree resolved nodes */
+
+    getURLForOpenTreeResolvedNode(phyloref) {
+      // Return the URL for the Open Tree resolved node for a particular phyloreference.
+
+      const phylorefId = phyloref['@id'];
+      if(phylorefId && has(this.reasoningResults, phylorefId)) {
+        return "http://example.org";
       }
-      return results;
+      return undefined;
     },
 
-    reasonOverPhylogeny() {
-      // Send JSON-LD to server for reasoning.
-      // Reason over all the phyloreferences and store the results on
-      // the Vue model at vm.reasoningResults so we can access them.
-      // Are we already reasoning? If so, ignore.
-      if (this.reasoningInProgress) return;
-      // Disable "Reason" buttons so they can't be reused.
-      this.reasoningInProgress = true;
-      this.reasoningResults = {};
+    getLabelForOpenTreeResolvedNode(phyloref) {
+      // Return the label for the Open Tree resolved node for a particular phyloreference.
 
-      jQuery.post('http://localhost:34214/reason', {
-        // This will convert the JSON-LD file into an application/x-www-form-urlencoded
-        // string (see https://api.jquery.com/jquery.ajax/#jQuery-ajax-settings under
-        // processData for details). The POST data sent to the server will look like:
-        //  jsonld=%7B%5B%7B%22title%22%3A...
-        // which translates to:
-        //  jsonld={[{"title":...
-        jsonld: this.asOntology,
-      }).done((data) => {
-        this.reasoningResults = data.phylorefs;
-        // console.log('Data retrieved: ', data);
-      }).fail((jqXHR, textStatus, errorThrown) => {
-        // We can try using the third argument, but it appears to be the
-        // HTTP status (e.g. 'Internal Server Error'). So we default to that,
-        // but look for a better one in the JSON response from the server, if
-        // available.
-        let error = errorThrown;
-        if (has(jqXHR, 'responseJSON') && has(jqXHR.responseJSON, 'error')) {
-          error = jqXHR.responseJSON.error;
-        }
-        if (error === undefined || error === '') error = 'unknown error';
-        alert(`Error occurred on server while reasoning: ${error}`);
-      }).always(() => {
-        // Reset "Reasoning" buttons to their usual state.
-        this.reasoningInProgress = false;
-      });
+      const phylorefId = phyloref['@id'];
+      if(phylorefId && has(this.reasoningResults, phylorefId) && this.reasoningResults[phylorefId].length > 0) {
+        return this.reasoningResults[phylorefId][0];
+      }
+      return undefined;
     },
 
     getOTTNodeId(node) {
@@ -307,10 +135,6 @@ export default {
       return [match[1], match[2]];
     },
 
-    downloadInducedSubtreeFromOpenTreeOfLife(ottIds) {
-      if(ottIds.length === 0) return;
-    },
-
     /* Phyloref and specifier getters (should be moved into phyx.js) */
 
     getPhylorefDescription(phyloref) {

From 4505109dd49e0c3afb14d1781cd67e4872f6d177 Mon Sep 17 00:00:00 2001
From: Gaurav Vaidya <gaurav@ggvaidya.com>
Date: Wed, 17 Apr 2019 02:49:23 -0400
Subject: [PATCH 13/18] Sent node info to PhylorefTable so we can link to
 resolved nodes.

---
 src/App.vue                      | 144 ++++++++++++++++---------------
 src/components/PhylorefTable.vue |  36 +++++---
 2 files changed, 101 insertions(+), 79 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 450541a..29e0c71 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,6 +11,7 @@
             :phylorefs="phylorefs"
             :openTreeTaxonomyInfoBySpecifierLabel="openTreeTaxonomyInfoBySpecifierLabel"
             :reasoningResults="reasoningResults"
+            :nodesByID="nodesByID"
           />
         </div>
         <div class="card-footer">
@@ -39,7 +40,7 @@
             </div>
           </div>
           <div class="btn-group ml-2" role="group" area-label="Actions on phyloreferences">
-            <button class="btn btn-danger" type="button" @click="phylorefs = []">
+            <button class="btn btn-danger" type="button" @click="phylorefs = []; reasoningResults = {};">
               Clear phylorefs
             </button>
           </div>
@@ -108,7 +109,7 @@
               href="javascript:;"
               @click="reasonOverPhylogeny()"
             >
-              Reason over phylogeny
+              Reason over phylogeny <span v-if="reasoningInProgress"><em>(in progress)</em></span>
             </button>
           </div>
         </div>
@@ -159,6 +160,8 @@ export default {
     phylorefs: [],
     newick: "()",
     openTreeTaxonomyInfoByName: {},
+    nodesByID: {},
+
     reasoningResults: {},
     reasoningInProgress: false,
     PHYX_CONTEXT_JSON: "http://www.phyloref.org/phyx.js/context/v0.1.0/phyx.json",
@@ -193,71 +196,6 @@ export default {
       });
       return openTreeTaxonomyInfoBySpecifierLabel;
     },
-    asOntology() {
-      const phylorefsWithEquivalentClass = this.phylorefs.filter(
-        phyloref => has(phyloref, 'equivalentClass')
-      );
-      // Add the phylogeny.
-      const phylogenyNodes = new PhylogenyWrapper({
-        newick: this.newick,
-      }).getNodesAsJSONLD(this.ONTOLOGY_BASEURI + 'phylogeny');
-
-      phylorefsWithEquivalentClass.forEach(phyloref => {
-        if(has(phyloref, 'label')) {
-          if(!has(phyloref, '@id')) {
-            phyloref['@id'] = this.ONTOLOGY_BASEURI + 'phyloref_' + uniqueId();
-          }
-        }
-      });
-
-      // Modify nodes to support Model 2.0 taxonomic units.
-      phylogenyNodes.forEach(nodeAsParam => {
-        const node = nodeAsParam;
-        // Set a context.
-        node['@context'] = this.PHYX_CONTEXT_JSON;
-
-        // Make sure this node has a '@type'.
-        if (!has(node, '@type')) node['@type'] = [];
-        if (!Array.isArray(node['@type'])) node['@type'] = [node['@type']];
-        // We replace "parent" with "obo:CDAO_0000179" so we get has_Parent
-        // relationships in our output ontology.
-        // To be fixed in https://github.com/phyloref/phyx.js/issues/10
-        if (has(node, 'parent')) node['obo:CDAO_0000179'] = { '@id': node.parent };
-
-        // Does this node have taxonomic units? If so, convert them into class expressions.
-        if (has(node, 'representsTaxonomicUnits')) {
-          node.representsTaxonomicUnits.forEach((tunit) => {
-            this.convertTUtoRestriction(tunit).forEach((restriction) => {
-              node['@type'].push({
-                '@type': 'owl:Restriction',
-                onProperty: 'obo:CDAO_0000187',
-                someValuesFrom: restriction,
-              });
-            });
-          });
-        }
-        // Now, rdfpipe can handle '@type's that contain restrictions,
-        // but OWLAPI can't. So let's translate all '@type's into
-        // 'http://www.w3.org/1999/02/22-rdf-syntax-ns#type'.
-        node['http://www.w3.org/1999/02/22-rdf-syntax-ns#type'] = node['@type']
-          .map(c => isString(c) ? { '@id': c } : c);
-        delete node['@type'];
-      });
-      // Finally, add a header for this ontology.
-      let ontologyHeader = [
-        {
-          '@context': this.PHYX_CONTEXT_JSON,
-          '@id': this.ONTOLOGY_BASEURI,
-          '@type': 'owl:Ontology',
-          'owl:imports': [
-            'http://raw.githubusercontent.com/phyloref/curation-workflow/develop/ontologies/phyloref_testcase.owl',
-            'http://ontology.phyloref.org/2018-12-14/phyloref.owl',
-            'http://ontology.phyloref.org/2018-12-14/tcan.owl',
-          ],
-        },
-      ];
-      return JSON.stringify(ontologyHeader.concat(phylorefsWithEquivalentClass).concat(phylogenyNodes), null, 4);
-    },
     exampleJSONLDURLs() { return [
       // Returns a list of example files to display in the "Examples" menu.
       {
@@ -480,6 +418,76 @@ export default {
       return results;
     },
 
+    getPhylorefsAndPhylogenyAsOntology() {
+      const phylorefsWithEquivalentClass = this.phylorefs.filter(
+        phyloref => has(phyloref, 'equivalentClass')
+      );
+      // Add the phylogeny.
+      const phylogenyNodes = new PhylogenyWrapper({
+        newick: this.newick,
+      }).getNodesAsJSONLD(this.ONTOLOGY_BASEURI + 'phylogeny');
+
+      phylorefsWithEquivalentClass.forEach(phyloref => {
+        if(has(phyloref, 'label')) {
+          if(!has(phyloref, '@id')) {
+            phyloref['@id'] = this.ONTOLOGY_BASEURI + 'phyloref_' + uniqueId();
+          }
+        }
+      });
+
+      // Track nodes by ID so we can look them up by @id later.
+      this.nodesByID = {};
+
+      // Modify nodes to support Model 2.0 taxonomic units.
+      phylogenyNodes.forEach(nodeAsParam => {
+        const node = nodeAsParam;
+        // Set a context.
+        node['@context'] = this.PHYX_CONTEXT_JSON;
+
+        // Make sure this node has a '@type'.
+        if (!has(node, '@type')) node['@type'] = [];
+        if (!Array.isArray(node['@type'])) node['@type'] = [node['@type']];
+        // We replace "parent" with "obo:CDAO_0000179" so we get has_Parent
+        // relationships in our output ontology.
+        // To be fixed in https://github.com/phyloref/phyx.js/issues/10
+        if (has(node, 'parent')) node['obo:CDAO_0000179'] = { '@id': node.parent };
+
+        // Does this node have taxonomic units? If so, convert them into class expressions.
+        if (has(node, 'representsTaxonomicUnits')) {
+          node.representsTaxonomicUnits.forEach((tunit) => {
+            this.convertTUtoRestriction(tunit).forEach((restriction) => {
+              node['@type'].push({
+                '@type': 'owl:Restriction',
+                onProperty: 'obo:CDAO_0000187',
+                someValuesFrom: restriction,
+              });
+            });
+          });
+        }
+        // Now, rdfpipe can handle '@type's that contain restrictions,
+        // but OWLAPI can't. So let's translate all '@type's into
+        // 'http://www.w3.org/1999/02/22-rdf-syntax-ns#type'.
+        node['http://www.w3.org/1999/02/22-rdf-syntax-ns#type'] = node['@type']
+          .map(c => isString(c) ? { '@id': c } : c);
+        delete node['@type'];
+        this.nodesByID[node['@id']] = node;
+      });
+      // Finally, add a header for this ontology.
+      let ontologyHeader = [
+        {
+          '@context': this.PHYX_CONTEXT_JSON,
+          '@id': this.ONTOLOGY_BASEURI,
+          '@type': 'owl:Ontology',
+          'owl:imports': [
+            'http://raw.githubusercontent.com/phyloref/curation-workflow/develop/ontologies/phyloref_testcase.owl',
+            'http://ontology.phyloref.org/2018-12-14/phyloref.owl',
+            'http://ontology.phyloref.org/2018-12-14/tcan.owl',
+          ],
+        },
+      ];
+      return JSON.stringify(ontologyHeader.concat(phylorefsWithEquivalentClass).concat(phylogenyNodes), null, 4);
+    },
+
     reasonOverPhylogeny() {
       // Send JSON-LD to server for reasoning. Reasoning results will be stored in
       // this.reasoningResults.
@@ -497,7 +505,7 @@ export default {
         //  jsonld=%7B%5B%7B%22title%22%3A...
         // which translates to:
         //  jsonld={[{"title":...
-        jsonld: this.asOntology,
+        jsonld: this.getPhylorefsAndPhylogenyAsOntology(),
       }).done((data) => {
         this.reasoningResults = data.phylorefs;
         // console.log('Data retrieved: ', data);
diff --git a/src/components/PhylorefTable.vue b/src/components/PhylorefTable.vue
index c03ee67..240ed5a 100644
--- a/src/components/PhylorefTable.vue
+++ b/src/components/PhylorefTable.vue
@@ -97,6 +97,10 @@ export default {
       type: Object,
       default: () => { return {}; },
     },
+    nodesByID: {
+      type: Object,
+      default: () => { return {}; },
+    },
   },
   methods: {
 
@@ -107,7 +111,19 @@ export default {
 
       const phylorefId = phyloref['@id'];
       if(phylorefId && has(this.reasoningResults, phylorefId)) {
-        return "http://example.org";
+        const node = this.nodesByID[this.reasoningResults[phylorefId][0]];
+        if(!node) return undefined;
+
+        const label = this.getNodeLabel(node);
+        if(!label) return undefined;
+
+        const match = /^.*[_\s](.*?ott.*)$/.exec(label);
+        if(match == null) {
+            const matchMRCA = /^mrca.*$/.exec(label);
+            if(matchMRCA == null) return undefined;
+            return "https://tree.opentreeoflife.org/opentree/@" + matchMRCA[0];
+        }
+        return "https://tree.opentreeoflife.org/opentree/@" + match[1];
       }
       return undefined;
     },
@@ -117,22 +133,20 @@ export default {
 
       const phylorefId = phyloref['@id'];
       if(phylorefId && has(this.reasoningResults, phylorefId) && this.reasoningResults[phylorefId].length > 0) {
-        return this.reasoningResults[phylorefId][0];
+        const node = this.nodesByID[this.reasoningResults[phylorefId][0]];
+        if(!node) return undefined;
+
+        return this.getNodeLabel(node);
       }
       return undefined;
     },
 
-    getOTTNodeId(node) {
+    getNodeLabel(node) {
+      // Return the label for a particular node.
+
       const labels = node.labels || [];
       if(labels.length == 0) return undefined;
-      const label = labels[0]; // Ignore other labels.
-      const match = /^(.*)[_\s](.*?ott.*)$/.exec(label);
-      if(match == null) {
-          const matchMRCA = /^mrca.*$/.exec(label);
-          if(matchMRCA == null) return undefined;
-          return ["", label];
-      }
-      return [match[1], match[2]];
+      return labels[0]; // Ignore other labels.
     },
 
     /* Phyloref and specifier getters (should be moved into phyx.js) */

From 33af20524b422fe541fdda88a100aa49d546de3f Mon Sep 17 00:00:00 2001
From: Gaurav Vaidya <gaurav@ggvaidya.com>
Date: Wed, 17 Apr 2019 03:00:51 -0400
Subject: [PATCH 14/18] Improved documentation.

---
 src/App.vue | 39 +++++++++++++++++++++++++++++++--------
 1 file changed, 31 insertions(+), 8 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 29e0c71..113e03f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -156,15 +156,28 @@ export default {
     // Open Tree Resolver version
     OPEN_TREE_RESOLVER_VERSION: "0.1.0",
 
-    // Currently loaded phyloreferences
+    // Currently loaded phyloreferences.
     phylorefs: [],
+
+    // The Newick string for the current phylogeny.
     newick: "()",
+
+    // Dictionary of Open Tree Taxonomy data by scientific name.
     openTreeTaxonomyInfoByName: {},
+
+    // Dictionary of nodes by their '@id'.
     nodesByID: {},
 
+    // Reasoning results from JPhyloRef.
     reasoningResults: {},
+
+    // Is reasoning currently in progress?
     reasoningInProgress: false,
+
+    // URL to Phyx context JSON.
     PHYX_CONTEXT_JSON: "http://www.phyloref.org/phyx.js/context/v0.1.0/phyx.json",
+
+    // URL to be used as the produced ontology's base URI.
     ONTOLOGY_BASEURI: "http://example.org/phyloref_open_tree_resolver#",
   }},
   computed: {
@@ -313,7 +326,7 @@ export default {
       // This will return asynchonously; you need to call getOpenTreeTaxonomyID(name)
       // to retrieve the results.
       // Options can be anything from https://github.com/OpenTreeOfLife/germinator/wiki/TNRS-API-v3#match_names, including:
-      //  - context_name:
+      //  - context_name
       //  - do_approximate_matching
 
       let setOpenTreeTaxonomyInfoByNames = (results) => {
@@ -358,7 +371,9 @@ export default {
       });
     },
 
-    /* Reasoning over phylogenies. */
+    /*
+     * Reasoning over phylogenies
+     */
 
     convertTUtoRestriction(tunit) {
       // Return an OWL restriction for a taxonomic unit or specifier.
@@ -419,13 +434,16 @@ export default {
     },
 
     getPhylorefsAndPhylogenyAsOntology() {
+      // Returns a JSON-LD ontology that can includes the current phylorefs and
+      // phylogeny.
+      // Note that we only support JSON-LD files as input -- we don't craft
+      // clade definitions if they haven't already been created in
+      // phyloref.equivalentClass.
+
+      // Add the phyloreferences.
       const phylorefsWithEquivalentClass = this.phylorefs.filter(
         phyloref => has(phyloref, 'equivalentClass')
       );
-      // Add the phylogeny.
-      const phylogenyNodes = new PhylogenyWrapper({
-        newick: this.newick,
-      }).getNodesAsJSONLD(this.ONTOLOGY_BASEURI + 'phylogeny');
 
       phylorefsWithEquivalentClass.forEach(phyloref => {
         if(has(phyloref, 'label')) {
@@ -435,13 +453,18 @@ export default {
         }
       });
 
+      // Add the phylogeny.
+      const phylogenyNodes = new PhylogenyWrapper({
+        newick: this.newick,
+      }).getNodesAsJSONLD(this.ONTOLOGY_BASEURI + 'phylogeny');
+
       // Track nodes by ID so we can look them up by @id later.
       this.nodesByID = {};
 
       // Modify nodes to support Model 2.0 taxonomic units.
       phylogenyNodes.forEach(nodeAsParam => {
         const node = nodeAsParam;
-        // Set a context.
+        // Set a JSON-LD context.
         node['@context'] = this.PHYX_CONTEXT_JSON;
 
         // Make sure this node has a '@type'.

From bf2873edd89d1879b3fdfb453e4f94fd681e1ac2 Mon Sep 17 00:00:00 2001
From: Gaurav Vaidya <gaurav@ggvaidya.com>
Date: Wed, 17 Apr 2019 03:04:04 -0400
Subject: [PATCH 15/18] Links to Open Tree resolved nodes now open in a new
 window.

---
 src/components/PhylorefTable.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/PhylorefTable.vue b/src/components/PhylorefTable.vue
index 240ed5a..49b2808 100644
--- a/src/components/PhylorefTable.vue
+++ b/src/components/PhylorefTable.vue
@@ -43,7 +43,7 @@
                   <span v-html="getPhylorefDescription(phyloref)"></span>
                 </td>
                 <td :rowspan="getSpecifiersForPhyloref(phyloref).length">
-                  <a :href="getURLForOpenTreeResolvedNode(phyloref)">{{getLabelForOpenTreeResolvedNode(phyloref)}}</a>
+                  <a target="_blank" :href="getURLForOpenTreeResolvedNode(phyloref)">{{getLabelForOpenTreeResolvedNode(phyloref)}}</a>
                 </td>
               </template>
               <td>

From 1d6be168fd994372f78febc7dcd6152c91676a37 Mon Sep 17 00:00:00 2001
From: Gaurav Vaidya <gaurav@ggvaidya.com>
Date: Wed, 17 Apr 2019 03:12:03 -0400
Subject: [PATCH 16/18] Reverted unnecessary changes to Phylotree.vue.

These changes that had not been properly removed through rebasing earlier.
---
 src/components/phylogeny/Phylotree.vue | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/src/components/phylogeny/Phylotree.vue b/src/components/phylogeny/Phylotree.vue
index f71f173..8b2ed06 100644
--- a/src/components/phylogeny/Phylotree.vue
+++ b/src/components/phylogeny/Phylotree.vue
@@ -5,7 +5,7 @@
         <p :key="errorIndex"><strong>{{ error.title }}.</strong> {{ error.message }}</p>
       </template>
     </template>
-    <template
+    <div
       v-else
       class="phylotreeContainer"
     >
@@ -14,7 +14,7 @@
         :id="'phylogeny_' + phylogenyIndex"
       />
       <ResizeObserver @notify="redrawTree()" />
-    </template>
+    </div>
   </div>
 </template>
 
@@ -39,7 +39,6 @@ Vue.component('ResizeObserver', ResizeObserver);
 export default {
   name: 'Phylotree',
   props: {
-    /* Inputs */
     newick: { // The Newick string of the phylogeny to display.
       type: String,
       default: '()',
@@ -55,11 +54,6 @@ export default {
     baseURIForPhylogeny: {
       type: String,
     },
-    /* Configuration options */
-    displayInternalNodes: {
-      type: Boolean,
-      default: false,
-    },
   },
   computed: {
     baseURIForPhylogenyComputed() {
@@ -114,7 +108,7 @@ export default {
           if (has(data, 'name') && data.name !== '' && data.children) {
             // If the node has a label and has children (i.e. is an internal node),
             // we display it next to the node by creating a new 'text' element.
-            if (this.displayInternalNodes && textLabel.empty()) {
+            if (textLabel.empty()) {
               textLabel = element.append('text');
 
               // Place internal label to the left of the root node.
@@ -192,6 +186,7 @@ export default {
  * refers only to the labels next to the nodes.
  */
 .node {
+  /* Phylotree's CSS sets this to 10px; we prefer larger node labels */
   font-size: 11pt;
 }
 

From 68fb9879639a2077b491b832842f65d1d0b5e407 Mon Sep 17 00:00:00 2001
From: Gaurav Vaidya <gaurav@ggvaidya.com>
Date: Wed, 17 Apr 2019 03:14:04 -0400
Subject: [PATCH 17/18] Standardized comment style for groups of methods.

---
 src/components/PhylorefTable.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/PhylorefTable.vue b/src/components/PhylorefTable.vue
index 49b2808..d89bab7 100644
--- a/src/components/PhylorefTable.vue
+++ b/src/components/PhylorefTable.vue
@@ -104,7 +104,9 @@ export default {
   },
   methods: {
 
-    /* Methods for accessing Open Tree resolved nodes */
+    /*
+     * Methods for accessing Open Tree resolved nodes
+     */
 
     getURLForOpenTreeResolvedNode(phyloref) {
       // Return the URL for the Open Tree resolved node for a particular phyloreference.
@@ -149,7 +151,9 @@ export default {
       return labels[0]; // Ignore other labels.
     },
 
-    /* Phyloref and specifier getters (should be moved into phyx.js) */
+    /*
+     * Phyloref and specifier getters (should be moved into phyx.js)
+     */
 
     getPhylorefDescription(phyloref) {
       // Returns the clade definition of a particular phyloreference. Supports both

From e3e41b0a2e16767eadaf5cc23e3f4c05754646ff Mon Sep 17 00:00:00 2001
From: Gaurav Vaidya <gaurav@ggvaidya.com>
Date: Thu, 18 Apr 2019 15:15:49 -0400
Subject: [PATCH 18/18] First stab at summary results.

---
 src/App.vue | 42 ++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 40 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 113e03f..27ad659 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,7 +2,42 @@
   <div id="app">
     <TopNavigationBar :version="OPEN_TREE_RESOLVER_VERSION" />
     <div id="wrapper">
-      <div class="card border-dark">
+      <!-- Display some stats about specifier matching and phyloref resolution -->
+      <div
+        class="card border-dark"
+      >
+        <h5 class="card-header">
+          Summary
+        </h5>
+        <div class="card-body p-0">
+          <table class="table table-hover table-flush mb-0">
+            <tbody>
+              <tr>
+                <td>Number of phyloreferences</td>
+                <td>{{phylorefs.length}}</td>
+                <td>&nbsp;</td>
+              </tr>
+              <tr>
+                <td>Number of phyloreferences with resolved nodes</td>
+                <td>{{phylorefsWithResolvedNodes.length}}</td>
+                <td>{{(phylorefsWithResolvedNodes.length/phylorefs.length*100).toFixed(2)}}%</td>
+              </tr>
+              <tr>
+                <td>Number of unique specifiers</td>
+                <td>{{allSpecifiers.length}}</td>
+                <td>&nbsp;</td>
+              </tr>
+              <tr>
+                <td>Number of specifiers with Open Tree Taxonomy IDs</td>
+                <td>{{ottIdsForAllSpecifiers.length}}</td>
+                <td>{{(ottIdsForAllSpecifiers.length/allSpecifiers.length*100).toFixed(2)}}%</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <div class="card border-dark mt-2">
         <h5 class="card-header border-dark">
           Phyloreferences
         </h5>
@@ -183,7 +218,10 @@ export default {
   computed: {
     allSpecifiers() {
       // List of all currently loaded specifiers across all phylorefs.
-      return this.phylorefs.map(phyloref => this.getSpecifiersForPhyloref(phyloref)).reduce((acc, val) => acc.concat(val), []);
+      return uniq(this.phylorefs.map(phyloref => this.getSpecifiersForPhyloref(phyloref)).reduce((acc, val) => acc.concat(val), []));
+    },
+    phylorefsWithResolvedNodes() {
+      return this.phylorefs.filter(phyloref => has(this.reasoningResults, phyloref['@id']) && this.reasoningResults[phyloref['@id']].length > 0);
     },
     ottIdsForAllSpecifiers() {
       // The list of all OTT ids across all phylorefs. This assumes that