From 85ab6fb8cc8c5bf0f61e3cc08671145805bc6337 Mon Sep 17 00:00:00 2001
From: frankporras <francisco.porras-bernardez@geosphere.at>
Date: Wed, 8 May 2024 17:11:55 +0200
Subject: [PATCH] Comments added and commented code removed

---
 src/App.vue                                   |   4 +-
 src/api/api.ts                                |  31 ---
 src/api/axiosSetup.ts                         |  14 +-
 src/api/config.ts                             |  23 +-
 src/components/vs-result/vs-result.vue        |  27 ---
 src/models/headers.ts                         |  12 -
 src/services/dataset.service.ts               | 219 ++----------------
 .../search-view/search-view-component.ts      |  87 +------
 .../search-view/search-view-component.vue     |  24 +-
 9 files changed, 40 insertions(+), 401 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index b9d94d2..667cd84 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,8 @@
 <template>
     <div class="container-fluid">
-        <div class="development-notice">-- DEVELOPMENT SITE -- [Only for development purposes]</div>
+        <div class="development-notice">
+            DEVELOPMENT SITE <br> >> Only for development purposes <<
+        </div>
     </div>
     <!-- <HelloWorld msg="Welcome to Your Vue.js plus TypeScript App" /> -->
     <nav class="navbar navbar-light border-bottom" role="navigation" aria-label="main navigation">
diff --git a/src/api/api.ts b/src/api/api.ts
index 662b705..df2ca7a 100644
--- a/src/api/api.ts
+++ b/src/api/api.ts
@@ -1,7 +1,6 @@
 import initializeAxios from "./axiosSetup";
 import { axiosRequestConfiguration } from "./config";
 import { map } from "rxjs/operators";
-// import { Observable } from "@reactivex/rxjs/compat";
 import { defer, Observable } from "rxjs";
 import { AxiosResponse } from "axios";
 // https://ichi.pro/de/so-wickeln-sie-axios-mit-typescript-und-react-in-rxjs-ein-118892823169891
@@ -13,34 +12,4 @@ const get = <T>(url: string, queryParams?: any): Observable<T> => {
     return defer(() => axiosInstance.get<T>(url, { params: queryParams })).pipe(map((result: AxiosResponse) => result.data));
 };
 
-// const post = <T>(url: string, body: object, queryParams?: any): Observable<T | void> => {
-//     return defer(() => axiosInstance.post<T>(url, body, { params: queryParams })).pipe(map((result: AxiosResponse) => result.data));
-// };
-
-// const put = <T>(
-//   url: string,
-//   body: object,
-//   queryParams?: object
-// ): Observable<T | void> => {
-//   return defer(() =>
-//     axiosInstance.put<T>(url, body, { params: queryParams })
-//   ).pipe(map((result) => result.data));
-// };
-
-// const patch = <T>(
-//   url: string,
-//   body: object,
-//   queryParams?: object
-// ): Observable<T | void> => {
-//   return defer(() =>
-//     axiosInstance.patch<T>(url, body, { params: queryParams })
-//   ).pipe(map((result) => result.data));
-// };
-
-// const deleteR = <T>(url: string, id: number): Observable<T | void> => {
-//   return defer(() => axiosInstance.delete(`${url}/${id}`)).pipe(
-//     map((result) => result.data)
-//   );
-// };
-
 export default { get };
diff --git a/src/api/axiosSetup.ts b/src/api/axiosSetup.ts
index 93cfbbc..f284001 100644
--- a/src/api/axiosSetup.ts
+++ b/src/api/axiosSetup.ts
@@ -1,20 +1,12 @@
 import axios, { AxiosRequestConfig, AxiosInstance } from "axios";
 
 const initialization = (config: AxiosRequestConfig): AxiosInstance => {
-    //axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
+    
     delete axios.defaults.headers.common["X-Requested-With"];
-    // axios.defaults.withCredentials = true;
-    // const token = document.head.querySelector('meta[name="csrf-token"]');
-    // if (token) {
-    //     axios.defaults.headers.common["X-CSRF-TOKEN"] = token.innerHTML;
-    // }
-    const axiosInstance = axios.create(config);
 
-    /*
-        Add default headers, interceptors etc..
-    */
+    const axiosInstance = axios.create(config);
 
     return axiosInstance;
 };
 
-export default initialization;
+export default initialization;
\ No newline at end of file
diff --git a/src/api/config.ts b/src/api/config.ts
index b58a88a..57de462 100644
--- a/src/api/config.ts
+++ b/src/api/config.ts
@@ -1,31 +1,16 @@
 import { AxiosRequestConfig } from "axios";
 import { stringify } from "qs";
 
-// let headers: AxiosRequestConfig['headers'] =
-// headers['Content-Type'] = 'multipart/form-data';
-
+/*  This file configures Axios to send requests with the specified headers and parameters serialization format for URL-encoded form data */
 export const axiosRequestConfiguration: AxiosRequestConfig = {
-    // responseType: "text",
-    // headers: {
-    //     // "Content-Type": "text/plain",
-    //     "Content-Type": "application/x-www-form-urlencoded",
-    //     // "Content-Type": "application/x-www-form-urlencoded",
-    //     // credentials: "same-origin",
-    //     // "Access-Control-Allow-Credentials": "true",
-    //     // "Access-Control-Allow-Origin": "*",
-    // },
+    
     headers: {
-        //: AxiosHeaders | Partial<RawAxiosHeaders & MethodsHeaders & CommonHeaders> | undefined
         "Content-Type": "application/x-www-form-urlencoded",
     },
-    // headers: {
-    // 	"Content-type": "application/json; charset=UTF-8",
-    // },
-    // paramsSerializer: {
-    //     indexes: null, // by default: false
-    // },
 
     paramsSerializer: {
+        /* The serialize function takes an object of key-value pairs as input and uses the qs.stringify method to convert it into a URL-encoded string.
+        The arrayFormat: "repeat" option specifies how arrays should be serialized in the URL parameters. */
         serialize: (params: Record<string, number>) => {
             return stringify(params, { arrayFormat: "repeat" });
         },
diff --git a/src/components/vs-result/vs-result.vue b/src/components/vs-result/vs-result.vue
index 60b1494..d2f1784 100644
--- a/src/components/vs-result/vs-result.vue
+++ b/src/components/vs-result/vs-result.vue
@@ -3,43 +3,18 @@
         <div class="card result-list-container">
             <div class="card-content record-elem">
                 <p v-if="document.identifier && document.identifier.length > 0">
-                    <!-- <span>Author: {{ document.identifier.join(', ') }}</span> -->
-                    <!-- <span v-for="(author,index) in document.author" :key="index">{{ author }}; </span> -->
-                    <!-- <span>'https://doi.org/' + {{ document.identifier[0] }}</span> -->
                     <a target="_blank" v-bind:href="'https://doi.org/' + document.identifier[0]">
                         {{ "https://doi.org/" + document.identifier[0] + " &#10148;" }} </a
                     >&nbsp;
                     <span v-if="document.author && document.author.length > 0" class="disabled">{{ document.author[0] }}</span>
                 </p>
 
-                <!-- <span class="label label-info" data-container="div" data-title="Publication date">
-                    {{ convert(document.server_date_published) }}
-                </span>
-                <span class="label label-default ng-binding">{{ document.doctype }}</span>
-                <span v-if="openAccessLicences.includes(document.licence)" class="label label-success titlecase">Open Access</span> -->
-
                 <h4>
-                    <!-- <a
-                        v-if="document.identifier && document.identifier.length > 0"
-                        target="_self"
-                        v-bind:href="'https://doi.' + getDomainWithoutSubdomain() + '/' + document.identifier[0]"
-                        class="ng-binding"
-                    >
-                        {{ document.title_output }}
-                    </a> -->
-                    <!-- <a target="_self" v-bind:href="'dataset/' + document.id" class="ng-binding">
-                        {{ document.title_output }}
-                    </a> -->
                     <router-link class="ng-binding" v-bind:to="{ name: 'dataset', params: { datasetId: document.id } }">{{
                         document.title_output
                     }}</router-link>
                 </h4>
 
-                <!-- <p v-if="document.author && document.author.length > 0">
-                    <span>Author: {{ document.author.join(', ') }}</span>
-                    <span v-for="(author, index) in document.author" :key="index">{{ author }}; </span>
-                </p> -->
-
                 <p class="clamped clamped-2">
                     <span class="disabled" data-container="div" data-title="Publication date">
                         {{ convert(document.server_date_published) + ":&nbsp;" }}
@@ -53,11 +28,9 @@
 
                 <p>
                     <span class="label"><i class="fas fa-file"></i> {{ document.doctype }}</span>
-                    <!-- <span>Licence: {{ document.licence }}</span> -->
                     <span v-if="openAccessLicences.includes(document.licence)" class="label titlecase"><i class="fas fa-lock-open"></i> Open Access</span>
                 </p>
 
-                <!-- <span class="label label-keyword titlecase" v-for="(item, index) in document.subject" :key="index"> #{{ item }} </span> -->
             </div>
         </div>
     </div>
diff --git a/src/models/headers.ts b/src/models/headers.ts
index d7cac90..7825a7e 100644
--- a/src/models/headers.ts
+++ b/src/models/headers.ts
@@ -39,24 +39,12 @@ export interface ResponseContent {
     docs: Array<Dataset>;
 }
 
-// export interface FacetCount {
-//     facet_fields: FacetCategory<any>;
-// }
-
-// export class FacetCategory<T> {
-
-//     [key: string]: {
-//         values: T[];
-//     };
-// }
-
 export class FacetResults {
     // language!: Array<FacetItem>;
     // subject!: Array<FacetItem>;
     [key: string]: Array<FacetItem>;
 }
 
-//#region solr response facets
 export class FacetFields {
     // count: number;
     language!: FacetInstance;
diff --git a/src/services/dataset.service.ts b/src/services/dataset.service.ts
index 4643ea9..410ad96 100644
--- a/src/services/dataset.service.ts
+++ b/src/services/dataset.service.ts
@@ -6,21 +6,21 @@ import { Dataset, DbDataset, Suggestion } from "@/models/dataset";
 import { SolrResponse } from "@/models/headers";
 import { ActiveFilterCategories } from "@/models/solr";
 import { VUE_API } from "@/constants";
-// import { deserialize, instanceToInstance } from "class-transformer";
 import { deserialize } from "class-transformer";
-// import { OAI_DATASETS } from "./mock-oai-datasets";
-// import { OaiDataset, OaiPerson } from "@/models/oai";
-// import xml2js from "xml2js";
 
 class DatasetService {
+
+    /* https://tethys.at/solr/rdr_data/select?&0=fl%3Did%2Clicence%2Cserver_date_published%2Cabstract_output%2Cidentifier%2Ctitle_output%2Ctitle_additional%2Cauthor%2Csubject%2Cdoctype&q=%2A
+    &q.op=or&defType=edismax&qf=title%5E3%20author%5E2%20subject%5E1&indent=on&wt=json&rows=10&start=0&sort=server_date_published%20desc&facet=on&json.facet.language=%7B%20type%3A%20%22
+    terms%22%2C%20field%3A%20%22language%22%20%7D&json.facet.subject=%7B%20type%3A%20%22terms%22%2C%20field%3A%20%22subject%22%2C%20limit%3A%20-1%20%7D&json.facet.year=%7B%20type%3A%20%22
+    terms%22%2C%20field%3A%20%22year%22%20%7D&json.facet.author=%7B%20type%3A%20%22terms%22%2C%20field%3A%20%22author_facet%22%2C%20limit%3A%20-1%20%7D
+    */
+
     // for the autocomplete search
     public searchTerm(term: string, solrCore: string, solrHost: string): Observable<Dataset[]> {
         // solr endpoint
-        // const host = 'http://voyagerdemo.com/';
-        // const host = 'https://www.tethys.at/';''
         const host = "https://" + solrHost;
         const path = "/solr/" + solrCore + "/select?";
-        // const base = "https://geomon.geologie.ac.at/52n-sos-webapp/api/features"; //host + path;
         const base = host + path;
 
         //const fields = 'id,server_date_published,abstract_output,title_output,title_additional,author,subject'; // fields we want returned
@@ -36,17 +36,8 @@ class DatasetService {
             "doctype",
         ].toString();
 
-        //var dismaxFields = "title^3 abstract^2 subject^1";
-        const qfFields = "title^3 author^2 subject^1";
-        // let params = "fl=" + fields;
-        // // if (term == "*%3A*") { // *:
-        // //   params += "&defType=edismax&wt=json&indent=on"; //edismax
-        // // } else {
-        // params += "&defType=edismax&qf=" + qfFields + "&wt=json&indent=on"; //dismax
-        // // }
 
-        // const query = "&q=" + term + "*";
-        // const apiU = base + params + query;
+        const qfFields = "title^3 author^2 subject^1";
 
         const q_params = {
             "0": "fl=" + fields,
@@ -62,22 +53,26 @@ class DatasetService {
         return stations;
     }
 
+
+    /* Only one facet => Author: Coric, Stjepan (16)
+    https://tethys.at/solr/rdr_data/select?&0=fl%3Did%2Clicence%2Cserver_date_published%2Cabstract_output%2Cidentifier%2Ctitle_output%2Ctitle_additional%2Cauthor%2Csubject%2Cdoctype&q=%2A
+    &q.op=or&defType=edismax&qf=title%5E3%20author%5E2%20subject%5E1&indent=on&wt=json&rows=10&fq=author%3A%28%22Coric%2C%20Stjepan%22%29&start=0&sort=server_date_published%20desc&facet=on
+    &json.facet.language=%7B%20type%3A%20%22terms%22%2C%20field%3A%20%22language%22%20%7D
+    &json.facet.subject=%7B%20type%3A%20%22terms%22%2C%20field%3A%20%22subject%22%2C%20limit%3A%20-1%20%7D
+    &json.facet.year=%7B%20type%3A%20%22terms%22%2C%20field%3A%20%22year%22%20%7D
+    &json.facet.author=%7B%20type%3A%20%22terms%22%2C%20field%3A%20%22author_facet%22%2C%20limit%3A%20-1%20%7D */
+
     public facetedSearch(
         suggestion: Suggestion | string,
         activeFilterCategories: ActiveFilterCategories,
         solrCore: string,
         solrHost: string,
-        start?: string,
+        start?: string, // Starting page
     ): Observable<SolrResponse> {
-        // solr endpoint
-        // const host = 'http://voyagerdemo.com/';
-        //const host = 'https://www.tethys.at/';
-        //const host = 'https://' + solrHost;
         const host = "https://" + solrHost;
         const path = "/solr/" + solrCore + "/select?";
         const base = host + path;
 
-        //const fields = 'id,server_date_published,abstract_output,title_output,title_additional,author,subject'; // fields we want returned
         const fields = [
             "id",
             "licence",
@@ -91,14 +86,6 @@ class DatasetService {
             "doctype",
         ].toString();
 
-        // const qfFields = "title^3 author^2 subject^1";
-        // let params = "fl=" + fields;
-        // if (term == "*%3A*") {
-        //     params += "&defType=edismax&wt=json&indent=on"; //edismax
-        // } else {
-        //     params += "&defType=dismax&qf=" + qfFields + "&wt=json&indent=on"; //dismax
-        // }
-
         let term, queryOperator, qfFields;
         if (typeof suggestion === "string") {
             term = suggestion + "*";
@@ -111,34 +98,20 @@ class DatasetService {
         }
 
         if (start === undefined) start = "0";
-        // start = "&start=" + start;
-
-        // const facetFields =
-        //     "&facet=on&facet.field=language&facet.field={!key=datatype}doctype&facet.field=subject"; //&fq=year:(2019)";//&facet.query=year:2018";
 
         const filterFields = new Array<string>();
+
         if (Object.keys(activeFilterCategories).length > 0) {
-            // filterFields = '["';
-            // const filterFields: string[] = [];
-            // const facet_fields: FacetFields = res.facets;
+            /* Declare variable prop with a type that is a key of the activeFilterCategories. The 'keyof typeof' activeFilterCategories type represents all possible keys 
+            that can exist on the activeFilterCategories --> prop can only be assigned a value that is a key of the activeFilterCategories object */
             let prop: keyof typeof activeFilterCategories;
             for (prop in activeFilterCategories) {
                 const filterItems = activeFilterCategories[prop];
-                // const filterItems = facetCategory.values;
-                // filterItems.forEach((filterItem) => {
-                // console.log(`${key} ${valueArray}`);
                 filterItems.forEach(function (value: string) {
-                    // filterFields += "&fq=" + key + ':("' + value + '")';
                     filterFields.push(prop + ':("' + value + '")');
-                    // filterFields += prop + ":" + value;
                 });
             }
-            // filterFields += '"]';
         }
-        // const query = "&sort=server_date_published desc" + "&q=" + term;
-
-        // const api =
-        //     base + params + limit + start + query + filterFields + facetFields;
 
         // https://solr.apache.org/guide/8_4/json-request-api.html
         const q_params = {
@@ -164,198 +137,50 @@ class DatasetService {
         };
 
         const stations = api.get<SolrResponse>(base, q_params);
-        // .pipe(map((res) => res.response.docs));
 
         return stations;
     }
 
     public getYears(): Observable<string[]> {
-        // const heroes = of(HEROES);
-        // const host = "https:" + VUE_API;
         const host = VUE_API;
         const path = "/api/years";
         const base = host + path;
 
         const years = api.get<string[]>(base);
-        // this.messageService.add('HeroService: fetched heroes');
         return years;
     }
 
     public getDocuments(year: string): Observable<Array<DbDataset>> {
-        // const host = "https:" + VUE_API;
         const host = VUE_API;
         const path = "/api/sitelinks/" + year;
         const base = host + path;
 
         const documents: Observable<DbDataset[]> = api.get<Array<DbDataset>>(base);
-        // this.messageService.add('HeroService: fetched heroes');
         return documents;
     }
 
     public getDataset(id: number): Observable<DbDataset> {
-        // const host = "https:" + VUE_API;
         const host = VUE_API;
         const path = "/api/dataset/" + id;
         const apiUrl = host + path;
         const dataset = api.get<DbDataset>(apiUrl).pipe(map((res) => this.prepareDataset(res)));
-        // const dataset = api.get<DbDataset>(apiUrl).pipe(map((res) => this.prepareDataset(res, apiUrl)));
 
-        // this.messageService.add('HeroService: fetched heroes');
         return dataset;
     }
 
     public getDatasetByDoi(doi: string): Observable<DbDataset> {
-        // const host = "https:" + VUE_API;
         const host = VUE_API;
         const path = "/api/dataset/10.24341/tethys." + doi;
         const apiUrl = host + path;
         const dataset = api.get<DbDataset>(apiUrl).pipe(map((res) => this.prepareDataset(res)));
-        // const dataset = api.get<DbDataset>(apiUrl).pipe(map((res) => this.prepareDataset(res, apiUrl)));
 
-        // this.messageService.add('HeroService: fetched heroes');
         return dataset;
     }
 
-    // public getOaiDatasets(): Observable<OaiDataset[]> {
-    //     const apiUrl = "https://data.tethys.at/oai?verb=ListRecords&metadataPrefix=oai_datacite";
-    //     const oaiDatasets = api.get<string>(apiUrl).pipe(
-    //         map(
-    //             (response: string) => {
-    //                 // const parser = new DOMParser();
-    //                 // const xmlDoc: XMLDocument = parser.parseFromString(response, "application/xml");
-
-    //                 // const xslDoc = parser.parseFromString(this.xsl, "application/xml");
-    //                 // const xsltProcessor = new XSLTProcessor();
-    //                 // xsltProcessor.importStylesheet(xslDoc);
-    //                 // console.log(xmlDoc);
-    //                 // const xmlDom = xsltProcessor.transformToDocument(xmlDoc);
-
-    //                 // const serializer = new XMLSerializer();
-    //                 // const html = serializer.serializeToString(xmlDom.documentElement);
-    //                 // console.log(html);
-
-    //                 // const arrOai = new Array<OaiDataset>();
-    //                 // return arrOai;
-    //                 const arrOai = this.parseXML(response);
-    //                 return arrOai;
-    //                 // .then((data) => {
-    //                 //   return data;
-    //                 // });
-    //             },
-    //             // (error: string) => this.errorHandler(error),
-    //         ),
-    //     );
-    //     // const oaiDatasets = of(OAI_DATASETS);
-
-    //     // this.messageService.add('HeroService: fetched heroes');
-    //     return oaiDatasets;
-    // }
-
-    // private parseXML(xmlStr: string): Array<OaiDataset> {
-    //     // let k = "";
-    //     const arr: OaiDataset[] = [];
-    //     const domParser = new DOMParser();
-    //     const doc = domParser.parseFromString(xmlStr, "application/xml");
-    //     const records = doc.getElementsByTagName("ListRecords")[0];
-    //     // // const rt = xmlNode.resumptionToken;
-    //     // for (let i = 0; i < records.length; i++) {
-    //     //     console.log(records[i].getAttribute("name"));
-    //     // }
-
-    //     const parser: xml2js.Parser = new xml2js.Parser({
-    //         trim: true,
-    //         explicitArray: false,
-    //         ignoreAttrs: false,
-    //         // mergeAttrs: true,
-    //     });
-    //     parser.parseString(records.outerHTML, function (err: Error | null, result: any) {
-    //         const xmlNode = result.ListRecords;
-    //         // const rt = xmlNode.resumptionToken;
-    //         for (const rNode in xmlNode.record) {
-    //             const item = xmlNode.record[rNode];
-
-    //             const dc = item.metadata.resource;
-    //             const t = dc.titles.title;
-    //             const id = dc.identifier._;
-
-    //             const lang = "en"; //dc.titles.title.attributes("xml",True)->lang;
-    //             let title: string;
-    //             if (lang == "en" && t.length > 1) {
-    //                 title = t[1]._;
-    //             } else {
-    //                 title = t[0]._;
-    //             }
-
-    //             let creator = "";
-    //             if (dc.creators.creator instanceof Array) {
-    //                 dc.creators.creator.forEach((person: OaiPerson) => {
-    //                     creator += person.creatorName + "; ";
-    //                 });
-    //             } else {
-    //                 creator += dc.creators.creator.creatorName._;
-    //             }
-
-    //             let contributor = "";
-    //             if (dc.contributors) {
-    //                 if (dc.contributors.contributor instanceof Array) {
-    //                     dc.contributors.contributor.forEach((person: OaiPerson) => {
-    //                         contributor += person.contributorName + "; ";
-    //                     });
-    //                 } else {
-    //                     contributor += dc.contributors.contributor.contributorName;
-    //                 }
-    //             }
-
-    //             // ?.map((u: any) => u.creatorName._).join("; ");
-    //             // foreach ($dc->creators->creator as $c) {
-    //             //     foreach ($c->creatorName as $d) {
-    //             //         if (count(explode(',',$d)) > 1) {
-    //             //             $creator .= explode(',',$d)[0] . ', ' . substr(explode(',',$d)[1],1,1) . '; ';
-    //             //         } else {
-    //             //             $creator .= explode(',',$d)[0];
-    //             //         }
-
-    //             //     }
-    //             // }
-
-    //             const north = dc.geoLocations.geoLocation.geoLocationBox.northBoundLatitude;
-    //             const east = dc.geoLocations.geoLocation.geoLocationBox.eastBoundLongitude;
-    //             const south = dc.geoLocations.geoLocation.geoLocationBox.southBoundLatitude;
-    //             const west = dc.geoLocations.geoLocation.geoLocationBox.westBoundLongitude;
-
-    //             const subject = dc.subjects.subject.map((u: any) => u._).join(", ");
-
-    //             const oaiDataset = {
-    //                 doi: id,
-    //                 title: title,
-    //                 creator: creator,
-    //                 contributor: contributor,
-    //                 subject: subject,
-    //                 north: north,
-    //                 south: south,
-    //                 east: east,
-    //                 west: west,
-    //             } as OaiDataset;
-    //             arr.push(oaiDataset);
-    //         }
-    //         // resolve(arr);
-    //     });
-    //     return arr;
-    // }
-
-    // private prepareOAI(xml: any) : Array<OaiDataset> {
-    //     //
-    // }
-
-    // private prepareDataset(datasetObj: DbDataset, apiUrl: string): DbDataset {
     private prepareDataset(datasetObj: DbDataset): DbDataset {
         const dataset = deserialize<DbDataset>(DbDataset, JSON.stringify(datasetObj));
         dataset.url = document.documentURI;
-        // this.internalDatasetId.generateInternalId(dataset);
-        // if (dataset.seriesParameters) {
-        //     dataset.parameters = dataset.seriesParameters;
-        //     delete dataset.seriesParameters;
-        // }
+
         return dataset;
     }
 }
diff --git a/src/views/search-view/search-view-component.ts b/src/views/search-view/search-view-component.ts
index 44b72dd..53f947d 100644
--- a/src/views/search-view/search-view-component.ts
+++ b/src/views/search-view/search-view-component.ts
@@ -49,10 +49,8 @@ export default class SearchViewComponent extends Vue {
     private solr: SolrSettings = {
         core: SOLR_CORE, //"rdr_data", // SOLR.core;
         host: SOLR_HOST, //"tethys.at",
-        // core: "test_data", // SOLR.core;
-        // host: "repository.geologie.ac.at",
     };
-    // private rdrAPI!: DatasetService;
+
     private error = "";
 
     get stringSearchTerm(): string {
@@ -100,28 +98,13 @@ export default class SearchViewComponent extends Vue {
         }
     }
 
-    // onSearch(term: string): void {
     onSearch(suggestion: Suggestion | string): void {
-        // let queryOperator;
-        // if (typeof suggestion === "string") {
-        //     suggestion = suggestion + "*";
-        //     queryOperator = "or";
-        // } else if (suggestion instanceof Suggestion) {
-        //     // term = suggestion.value;
-        //     queryOperator = "and";
-        // }
-
-        // if (term) {
-        //     term = term.trim();
-        // } else {
-        //     term = "*%3A*";
-        // }
-
         this.activeFilterCategories = new ActiveFilterCategories();
         this.facets = new FacetResults();
 
-        // this.facets = {};
         this.searchTerm = suggestion;
+        /* The method returns an Observable, and the code subscribes to this Observable to handle the response. If the response is successful, it calls the dataHandler method 
+        with the Solr response as a parameter. If there is an error, it calls the errorHandler method with the error message as a parameter  */
         DatasetService.facetedSearch(suggestion, this.activeFilterCategories, this.solr.core, this.solr.host, undefined).subscribe({
             next: (res: SolrResponse) => this.dataHandler(res),
             error: (error: string) => this.errorHandler(error),
@@ -129,38 +112,20 @@ export default class SearchViewComponent extends Vue {
     }
 
     private dataHandler(res: SolrResponse, filterItem?: FacetItem): void {
-        // this.results = datasets;
+
         this.results = res.response.docs;
         this.numFound = res.response.numFound;
 
         // pagination
         this.pagination["total"] = res.response.numFound;
         this.pagination["perPage"] = res.responseHeader.params.rows as number;
-        // this.pagination["currentPage"] = 1;
         this.pagination["data"] = res.response.docs;
         this.pagination.lastPage = Math.ceil(this.pagination.total / this.pagination.perPage);
 
-        // facets
-        // const facet_fields = res.facet_counts.facet_fields;
-        // for (const prop in facet_fields) {
-        //     const facetCategory: FacetCategory<any> = facet_fields[prop];
-        //     const facetValues = facetCategory.key.values.map((facet_value: any, i: number) => {
-        //         if (i % 2 === 0 && typeof facet_value == "string") {
-        //             //var rObj = { value: facet, count: facet_fields[prop][i + 1] };
-        //             // FiletrItem with value and count
-        //             const rObj = new FilterItem(facet_value, facetCategory.key.values[i + 1]);
-        //             return rObj;
-        //         }
-        //     });
-        //     .filter(function (el: FilterItem) {
-        //         return el != null && el.count > 0;
-        //     });
-        //     //this.facets.push({ filterName: prop, values: facetValues });
-        //     this.facets[prop] = facetValues;
-        // }
-
         const facet_fields: FacetFields = res.facets;
+        
         let prop: keyof typeof facet_fields;
+        
         for (prop in facet_fields) {
             const facetCategory = facet_fields[prop];
             if (facetCategory.buckets) {
@@ -194,12 +159,9 @@ export default class SearchViewComponent extends Vue {
 
     private errorHandler(err: string): void {
         this.error = err;
-        // this.loading = false;
     }
 
     onMenuClick(page: number) {
-        // const test = page;
-        // console.log(test);
         this.pagination.currentPage = page;
         const start = page * this.pagination.perPage - this.pagination.perPage;
 
@@ -224,46 +186,10 @@ export default class SearchViewComponent extends Vue {
                 (res: SolrResponse) => this.dataHandler(res, facetItem),
                 (error: string) => this.errorHandler(error),
             );
-            // alert(this.activeFilterCategories[filter.Category]);
-            // var res = await rdrApi.search(this.searchTerm, this.activeFilterCategories, this.solrCore, this.solrHost);
-            // this.results = res.response.docs;
-            // this.numFound = res.response.numFound;
-
-            // // pagination
-            // this.pagination['total'] = res.response.numFound;
-            // this.pagination['per_page'] = res.responseHeader.params.rows;
-            // this.pagination['current_page'] = 1;
-            // this.pagination['data'] = res.response.docs;
-
-            // var facet_fields = res.facet_counts.facet_fields;
-            // for (var prop in facet_fields) {
-            //   var facetValues = facet_fields[prop].map((facetValue, i) => {
-            //     if (i % 2 === 0) {
-            //       // var rObj = { value: facetValue, count: facet_fields[prop][i + 1] };
-            //       var rObj;
-            //       if (filter.value == facetValue) {
-            //         rObj = filter;
-            //       } else if (this.facets[prop].some(e => e.value === facetValue)) {
-            //         // console.log(facetValue + " is included")
-            //         var indexOfFacetValue = this.facets[prop].findIndex(i => i.value === facetValue);
-            //         // console.log(indexOfFacetValue);
-            //         rObj = this.facets[prop][indexOfFacetValue];
-            //         rObj.count = facet_fields[prop][i + 1];
-            //       } else {
-            //         rObj = new FilterItem(facetValue, facet_fields[prop][i + 1]);
-            //       }
-            //       return rObj;
-            //     }
-            //   }).filter(function (el) {
-            //     return el != null && el.count > 0;
-            //   });
-            //   // this.facets.push({ filterName: prop, values: facetValues });
-            //   this.facets[prop] = facetValues;
         }
     }
 
     onClearFacetCategory(categoryName: string): void {
-        // alert(categoryName);
         delete this.activeFilterCategories[categoryName];
 
         DatasetService.facetedSearch(this.searchTerm, this.activeFilterCategories, this.solr.core, this.solr.host, undefined).subscribe({
@@ -311,5 +237,4 @@ export default class SearchViewComponent extends Vue {
         });
     }
 
-    // onPaging(page: number): void {}
 }
diff --git a/src/views/search-view/search-view-component.vue b/src/views/search-view/search-view-component.vue
index 92002dc..5a8e065 100644
--- a/src/views/search-view/search-view-component.vue
+++ b/src/views/search-view/search-view-component.vue
@@ -1,31 +1,11 @@
 <template>
     <div id="page_style" class="rows site-content page__style page__description" autocomplete="off">
+        
         <div class="container-fluid banner mz-5">
             <vs-input v-bind:propDisplay="searchTerm" v-bind:placeholder="'Enter your search term...'" @search-change="onSearch"></vs-input>
         </div>
+
         <div class="column is-half is-offset-one-quarter" style="padding-top: 0; margin-top: 0">
-            <!-- <div class="tabs is-centered">
-                <ul id="id-results-tabs">
-                    <li class="search_tab is-active">
-                        <a target="_self">Web</a>
-                    </li>
-                    <li class="search_tab">
-                        <a target="_self">Images</a>
-                    </li>
-                    <li class="search_tab">
-                        <a target="_self">Videos</a>
-                    </li>
-                    <li class="search_tab">
-                        <a target="_self">Homepages</a>
-                    </li>
-                    <li class="search_tab">
-                        <a target="_self">Food</a>
-                    </li>
-                    <li class="search_tab">
-                        <a target="_self">Books</a>
-                    </li>
-                </ul>
-            </div> -->
             <div v-if="results.length > 0" class="result-list-info">
                 <div v-if="hasSearchTerm()" class="resultheader">
                     Your search term {{ "'" + stringSearchTerm + "'" }} yielded <strong>{{ numFound }}</strong> results: