Merge pull request #27 from nbonfils/topic

Add topic

Author: nbonfils

src/index.html

@@ -84,7 +84,8 @@ <h1 class="center" >Bibliograph 2</h1>
 		  <option value="title" >Search in title</option>
 		  <option value="titleabs" >Search in title and abstract</option>
 		  <option value="titleabsfull" >Search in title, abstract and full text</option>
-		  <option value="concept" >Filter by concept</option>
+		  <option value="concept" >Filter by concepts</option>
+		  <option value="topic" >Filter by topics</option>
 		</select>
 		<button type="button" @click.prevent="params.splice(index, 1)">X</button>
 
@@ -161,6 +162,44 @@ <h1 class="center" >Bibliograph 2</h1>
 			   x-model="param.op" />
 		    <label :for="`radio-and-${index}`" >AND</label>
 
+		    <ul :class="param.op === 'or' ? 'concept-list-or' : 'concept-list-and'" class="concept-list">
+		      <template x-for="(concept, i) in param.concepts">
+			<li>
+			  <span class="card">
+			    <span x-text="concept.display_name"></span>
+			    |
+			    <a href="#" @click.prevent='param.concepts.splice(i, 1)'>x</a>
+			  </span>
+			</li>
+		      </template>
+		    </ul>
+		  </div>
+		</template>
+		<template x-if="param.type === 'topic'">
+		  <div x-data="{ ac: null, str: '' }"
+		       x-init="param.concepts = param.concepts || [];
+			       param.op = param.op || 'or';
+			       $nextTick(() => ac = new autoComplete({selector: `#search-${index}`, ...autoCompleteTopicConfig}))">
+		    <input :id="`search-${index}`"
+			   class="card w-100"
+			   type="search"
+			   x-model="str"
+			   @selection="param.concepts.push($event.detail.selection.value); str='';" />
+		    <input :id="`radio-or-${index}`"
+			   :name="`radio-${index}`"
+			   class="concept-radio-or"
+			   type="radio"
+			   value="or"
+			   x-model="param.op" />
+		    <label :for="`radio-or-${index}`" >OR</label>
+		    <input :id="`radio-and-${index}`"
+			   :name="`radio-${index}`"
+			   class="concept-radio-and"
+			   type="radio"
+			   value="and"
+			   x-model="param.op" />
+		    <label :for="`radio-and-${index}`" >AND</label>
+
 		    <ul :class="param.op === 'or' ? 'concept-list-or' : 'concept-list-and'" class="concept-list">
 		      <template x-for="(concept, i) in param.concepts">
 			<li>

src/index.js

@@ -5,12 +5,13 @@ import './index.css';
 import Alpine from 'alpinejs';
 import autoComplete from '@tarekraafat/autocomplete.js';
 
-import { autoCompleteConceptConfig } from './lib/autocomplete.js';
+import { autoCompleteConceptConfig, autoCompleteTopicConfig } from './lib/autocomplete.js';
 import { fetchWorks } from './lib/fetch.js';
 import { processWorks, getFilters, filterData, generateJSONDataURL } from './lib/processing.js';
 import { generateGraph, generateGexfURL } from './lib/graph.js';
 
 window.autoCompleteConceptConfig = autoCompleteConceptConfig;
+window.autoCompleteTopicConfig = autoCompleteTopicConfig;
 window.fetchWorks = fetchWorks;
 window.processWorks = processWorks;
 window.getFilters = getFilters;

src/lib/autocomplete.js

@@ -36,3 +36,44 @@ export const autoCompleteConceptConfig = {
     }
   },
 };
+
+export const autoCompleteTopicConfig = {
+  placeHolder: 'Search for Topics...',
+  data: {
+    src: async (query) => {
+      try {
+	const response = await fetch(
+          'https://api.openalex.org/autocomplete/topics?' + new URLSearchParams({
+	    q: query,
+            mailto: `****@****.com`,
+	  }));
+	if (!response.ok) {
+	  throw new Error('Network response was not OK');
+	}
+	const data = await response.json();
+	return data.results;
+      } catch (e) {
+	console.error(`Error while fetching topics to autocomplete:\n\t${e}`);
+	return e;
+      }
+    },
+    keys: ['display_name'],
+    cache: false,
+  },
+  debounce: 300,
+  resultItem: {
+    tabSelect: true,
+    noResults: true,
+    highlight: true,
+  },
+  events: {
+    input: {
+      navigate: (event) => {
+	const selection = event.detail.selection.value;
+	event.target.value = selection.display_name;
+      }
+    }
+  },
+};
+
+