updated with decoupled search function. added new dev/linkout.js scri…

…pt and example in dev. github#31
ctcncgr · Mar 20, 2023 · 0216681 · 0216681
1 parent daee6ae
commit 0216681
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 21 deletions.
diff --git a/dev/linkout.js b/dev/linkout.js
@@ -0,0 +1,16 @@
+// query a local instance of the LIS GraphQL server:
+// https://github.com/legumeinfo/graphql-server
+
+// Note: using port 4444 since port 4000 is default for jekyll site
+// const domain = 'https://cicer.legumeinfo.org/services/';
+// const attributes = 'gene_linkouts?genes=cicar.CDCFrontier.gnm3.ann1.Ca1g000600/json';
+// const uri = domain + attributes;
+
+// A function that gets data from a GraphQL server via a POST request.
+// Adapted from https://graphql.org/graphql-js/graphql-clients/
+function queryLinkouts(domain, queryObject) {
+    const attributes = `${queryObject.service}?${queryObject.query}/json`;
+    const url = domain + '/services/' + attributes;
+    console.log(url);
+    return fetch(url).then((response) => response.json());
+}
diff --git a/dev/lis-linkout-search-element.html b/dev/lis-linkout-search-element.html
@@ -11,8 +11,8 @@
     <!-- web components polyfills -->
     <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
     <script src="../node_modules/lit/polyfill-support.js"></script>
-    <!-- GraphQL 
-    <script type="text/javascript" src="./linkout.js"></script>-->
+    <!-- GraphQL -->
+    <script type="text/javascript" src="./linkout.js"></script>
     <!-- web components -->
     <script type="module" src="../dist/web-components.bundled.js"></script>
   </head>
@@ -30,17 +30,26 @@ <h1>&lt;lis-linkout-search-element&gt;</h1>
       <a class="uk-button uk-button-default" href="#test-linkout" type="submit" uk-toggle>Open</a>
       <lis-modal-element modalId="test-linkout">
         <lis-linkout-search-element
-          id="linkout-search" 
-          queryString="genes=cicar.CDCFrontier.gnm3.ann1.Ca1g000600">
-	</lis-linkout-search-element>
+          id="linkout-search">
+        </lis-linkout-search-element>
       </lis-modal-element>
 
     </div>
 
     <!-- set the search function by property because functions can't be set as attributes -->
     <script type="text/javascript">
 
-      // the search function given to the LIS linkout search Web Component
+      function getLinkouts(linkoutData){
+        const domain = 'https://cicer.legumeinfo.org';
+	return queryLinkouts(domain, linkoutData);
+      }
+
+      const linkoutSearchElement = document.getElementById('linkout-search');
+      linkoutSearchElement.linkoutFunction = getLinkouts;
+
+      window.onload = (event) => {
+        linkoutSearchElement.queryString = 'genes=cicar.CDCFrontier.gnm3.ann1.Ca1g000600';
+      }
 
     </script>
 

diff --git a/src/lis-linkout-search-element.ts b/src/lis-linkout-search-element.ts
@@ -30,9 +30,10 @@ export type LinkoutSearchResults<LinkoutResult> = {
 };
 
 // Function for searching the linkout microservice.
-export type LinkoutSearchFunction<LinkoutSearchData> =
+export type LinkoutSearchFunction<LinkoutSearchData, LinkoutResult> =
   (searchData: LinkoutSearchData) =>
-    Promise<LinkoutSearchResults<LinkoutResult>>;
+//    Promise<LinkoutSearchResults<LinkoutResult>>;
+    Promise<Array<LinkoutResult>>;
 
 @customElement('lis-linkout-search-element')
 export class LisLinkoutSearchElement extends LitElement {
@@ -51,6 +52,7 @@ export class LisLinkoutSearchElement extends LitElement {
   /** @ignore */
   // overrides the default attributeChangedCallback to add this._fetchLinkouts() after constructor callback
   override attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null) {
+    console.log('attribute changed: ', name, oldVal, newVal);
     super.attributeChangedCallback(name, oldVal, newVal);
     this._fetchLinkouts();
   }
@@ -60,7 +62,7 @@ export class LisLinkoutSearchElement extends LitElement {
    *
    * @attribute
    */
-  @property({type: String})
+  @property({type: String, reflect: true})
   queryString: string = '';
 
   /**
@@ -74,7 +76,7 @@ export class LisLinkoutSearchElement extends LitElement {
   // the search callback function; not an attribute because functions can't be
   // parsed from attributes
   @property({type: Function, attribute: false})
-  searchFunction: LinkoutSearchFunction<LinkoutSearchData> =
+  linkoutFunction: LinkoutSearchFunction<LinkoutSearchData, LinkoutResult> =
     () => Promise.reject(new Error('No search function provided'));
 
   // bind to the table element in the template
@@ -87,17 +89,15 @@ export class LisLinkoutSearchElement extends LitElement {
     if(!this.queryString){
       return html``;
     }
-    const domain = 'https://cicer.legumeinfo.org';
-    const attributes = `${this.service}?${this.queryString}/json`;
-    const url = domain + '/services/' + attributes;
-    const linkoutRequest = fetch(url).then((response) => response.json()).then(
-     (data) => {
-                 const results = data.map(
-                                       (d: LinkoutResult) => ({linkout: `<a href="${d.href}">${d.text}.</a>`})
-                                      );
-                 this._table.data = results;
-               });
-    return linkoutRequest;
+    const linkoutData = {query: this.queryString, service: this.service};
+    const results = this.linkoutFunction(linkoutData).then((data) => {
+	                                                               const results = data.map(
+                                                                                                (d: LinkoutResult) => ({linkout: `<a href="${d.href}">${d.text}.</a>`})
+                                                                                               );
+                                                                       this._table.data = results;
+								       return data;
+                                                                     });
+    return results;
   }
 
   /** @ignore */