MediaWiki

Difference between revisions of "LexemeQueriesGenerator.js"

Line 10: Line 10:
 
       new OO.ui.MenuOptionWidget({ data: 'Q34',  label: 'mar - Marathi' }),
 
       new OO.ui.MenuOptionWidget({ data: 'Q34',  label: 'mar - Marathi' }),
 
       new OO.ui.MenuOptionWidget({ data: 'Q209',  label: 'bre - Breton' })
 
       new OO.ui.MenuOptionWidget({ data: 'Q209',  label: 'bre - Breton' })
 +
    ],
 +
    languagesArrayB = [
 +
      { data: 'Q113', label: 'cmn - Mandarin Chinese' },
 +
      { data: 'Q34',  label: 'mar - Marathi' },
 +
      { data: 'Q209',  label: 'bre - Breton' }
 
     ],
 
     ],
 
     posArray = [
 
     posArray = [
Line 29: Line 34:
 
     ],
 
     ],
 
     endpointsArray = [
 
     endpointsArray = [
       new OO.ui.RadioOptionWidget({ data: 'wikidata', label: 'Wikidata' }),
+
       new OO.ui.RadioOptionWidget({ data: 'wikidata', label: 'Wikidata', selected: true }),
 
       new OO.ui.RadioOptionWidget({ data: 'Dbnary', label: 'Dbnary' }),
 
       new OO.ui.RadioOptionWidget({ data: 'Dbnary', label: 'Dbnary' }),
 
       //new OO.ui.RadioOptionWidget({ data: 'LinguaLibre', label: 'LinguaLibre' }),
 
       //new OO.ui.RadioOptionWidget({ data: 'LinguaLibre', label: 'LinguaLibre' }),
Line 35: Line 40:
  
 
// Elements
 
// Elements
var lemma = new OO.ui.FieldLayout(
+
var lemma = new OO.ui.TextInputWidget({
new OO.ui.TextInputWidget( { value: 'book', icon: 'search' } ),
+
    id: 'lqg-lemma',
  { label: 'Lemma', align: 'inline' }
+
    placeholder: 'book',
      ),
+
    value: 'book',
   languages = new OO.ui.DropdownWidget( {
+
label: 'Word',
 +
    icon: 'search'
 +
    }),
 +
   languages = new OO.ui.DropdownWidget({
 +
    id: 'lqg-languages',
 
label: 'Source languages',
 
label: 'Source languages',
 
menu: { items: languagesArray1 }
 
menu: { items: languagesArray1 }
} ),
+
}),
 +
  languagesB = new OO.ui.ComboBoxInputWidget({
 +
  // value: 'Q34',
 +
    options: languagesArrayB,
 +
    id: 'lqg-languages',
 +
placeholder : 'Source languages',
 +
}),
 
   pos = new OO.ui.DropdownWidget( {
 
   pos = new OO.ui.DropdownWidget( {
 +
    id: 'lqg-pos',
 
label: 'Part-of-speech',
 
label: 'Part-of-speech',
 
menu: { items: posArray }
 
menu: { items: posArray }
} ),
+
}),
   infoTypes = new OO.ui.DropdownWidget( {
+
   infoTypes = new OO.ui.DropdownWidget({
 +
    id: 'lqg-infoTypes',
 
label: 'Information to fetch if any',
 
label: 'Information to fetch if any',
 
menu: { items: infoTypesArray }
 
menu: { items: infoTypesArray }
} ),
+
}),
   translations = new OO.ui.DropdownWidget( {
+
   translations = new OO.ui.DropdownWidget({
 +
    id: 'lqg-translations',
 
label: 'Translations',
 
label: 'Translations',
 
menu: { items: languagesArray2 }
 
menu: { items: languagesArray2 }
} ),
+
}),
   enpoints =  new OO.ui.RadioSelectWidget( {  
+
   enpoints =  new OO.ui.RadioSelectWidget({  
 +
    id: 'lqg-endpoints',
 
   label: 'Radios buttons',
 
   label: 'Radios buttons',
 +
   
 
items: endpointsArray  
 
items: endpointsArray  
 
} ),
 
} ),
   generate = new OO.ui.ButtonWidget( { label: 'Generate' } ),
+
   generate = new OO.ui.ButtonWidget({ id: 'lqg-generate', label: 'Generate' } ),
   limit = new OO.ui.CheckboxInputWidget( { selected: true } ),
+
  run = new OO.ui.ButtonWidget({
 +
    id: 'lqg-pos',
 +
    label:'Run !',
 +
    href:runQuery(),
 +
    target:'new'
 +
  }),
 +
   limit = new OO.ui.CheckboxInputWidget({ id: 'lqg-limit', selected: true, }),
 +
  limitLabel = new OO.ui.LabelWidget( { label: 'Limit to 100 (faster)' }),
 
   queryDisplay = new OO.ui.MultilineTextInputWidget( {  
 
   queryDisplay = new OO.ui.MultilineTextInputWidget( {  
 +
    id: 'lqg-pos',
 
value: `Query will appear here.\n\n\n\n\n\n`,
 
value: `Query will appear here.\n\n\n\n\n\n`,
 
multiline: true,
 
multiline: true,
Line 67: Line 95:
 
     minRows: 10,
 
     minRows: 10,
 
maxRows: 20
 
maxRows: 20
} ),
+
} );
  run = new OO.ui.ButtonWidget(
 
  { label:'Run !', href:runQuery(), target:'new' }
 
  );
 
 
    
 
    
 
    
 
    
Line 79: Line 104:
 
} );
 
} );
  
// Add an horizontal field layout
+
 
 
fieldset.addItems( [  
 
fieldset.addItems( [  
new OO.ui.FieldLayout(
+
  new OO.ui.FieldLayout(
new OO.ui.Widget( {
+
    new OO.ui.Widget( {
content: [  
+
      content: [  
      new OO.ui.HorizontalLayout( { items: [
+
        new OO.ui.HorizontalLayout( { items: [
        lemma,
+
          lemma,
        languages,
+
          pos,
         pos,
+
          languages,
      ]}),
+
         ]}),
      infoTypes,
+
        new OO.ui.HorizontalLayout( { items: [
      translations,
+
          languagesB,
      enpoints,
+
          infoTypes,
      generate,
+
          translations
      limit,
+
        ]}),
      queryDisplay,
+
        new OO.ui.HorizontalLayout( { items: [
      run ]
+
          generate,
} ),
+
        run,
{
+
          limit,
label: '',
+
          limitLabel,
align: 'top'
+
          enpoints,
}
+
        ]}),
)
+
        queryDisplay
] );
+
      ]
 +
    }))
 +
]
 +
);
  
$( "#qglexems" ).append( fieldset.$element );
+
// Add an horizontal field layout
// Get the menu from the dropdown using the getMenu() method.
 
// In this example, the getItemFromData() method returns a reference to the option 
 
// that contains the specified data (i.e., 'a', which is the first menu option).
 
// This option is then disabled with the setDisabled() method.
 
dropDown.getMenu().getItemFromData( 'a' ).setDisabled( true );
 
 
 
/* ***************************************************************************** */
 
/* ***************************************************************************** */
 
/* ***************************************************************************** */
 
/* ***************************************************************************** */
 
$("#qgold").html(`<link rel="stylesheet" href="https://maxcdn.boots_trapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 
<form>
 
  <div class="row">
 
    <div class="col">
 
      <label for="lemma">Lemma</label>
 
      <input type="text" class="form-control" placeholder="lemma" id="lemma" maxlength="15" name="lemma" id="lemma" value="book">
 
    </div>
 
    <div class="col">
 
      <div class="form-group">
 
        <label for="source_language">Source language</label>
 
        <select class="form-control" id="source_language" name="source_language">
 
          <option value="en">English</option>
 
          <option value="fr">French</option>
 
          <option value="es">Spanish</option>
 
          <option value="pt">Portuguese</option>
 
          <option value="de">German</option>
 
          <option value="it">Italian</option>
 
        </select>
 
      </div>
 
    </div>
 
    <div class="col">
 
      <div class="form-group">
 
        <label for="part_of_speech_tag">Part-of-speech tag</label>
 
        <select class="form-control" id="part_of_speech_tag" name="part_of_speech_tag">
 
          <option>Noun</option>
 
          <option>Adjective</option>
 
          <option>Adverb</option>
 
          <option>Verb</option>
 
        </select>
 
      </div>
 
    </div>
 
  </div>
 
 
 
  <div class="row">
 
    <div class="col">
 
      <div class="form-group">
 
        <label for="information_categories">Information to retrieve (if available)</label>
 
        <select class="form-control" id="information_categories" name="information_categories">
 
          <option value="1">Just look it up!</option>
 
          <option value="2">Senses</option>
 
          <option value="3">Senses & Definitions</option>
 
          <option value="4">Senses, Deinitions & Examples</option>
 
        </select>
 
      </div>
 
    </div>
 
    <div class="col">
 
      <div class="form-group">
 
        <label for="translation_languages">Translation language (only with Wikidata)</label>
 
        <select class="form-control" id="translation_languages" name="translation_languages">
 
          <option value="null"></option>
 
          <option value="en">English</option>
 
          <option value="fr">French</option>
 
          <option value="es">Spanish</option>
 
          <option value="pt">Portuguese</option>
 
          <option value="de">German</option>
 
          <option value="it">Italian</option>
 
        </select>
 
      </div>
 
    </div>
 
  </div>
 
 
 
  <div class="form-group">
 
    <label for="exampleFormControlSelect2">Specify your target SPARQL endpoint: </label>
 
    <div class="form-check form-check-inline">
 
      <input class="form-check-input" type="radio" name="target_SPARQL" id="Wikidata" checked>
 
      <label class="form-check-label" for="Wikidata">Wikidata</label>
 
    </div>
 
    <div class="form-check form-check-inline">
 
      <input class="form-check-input" type="radio" name="target_SPARQL" id="Dbnary">
 
      <label class="form-check-label" for="Dbnary">Dbnary</label>
 
    </div>
 
    <div class="form-check form-check-inline">
 
      <input class="form-check-input" type="radio" name="target_SPARQL" id="lingualibre">
 
      <label class="form-check-label" for="lingualibre">LinguaLibre</label>
 
    </div>
 
  </div>
 
 
 
  <div class="form-group">
 
    <div class="row">
 
      <div class="col">
 
        <button type="button" class="btn btn-primary" onclick="generateQuery()" id="generate_query">Generate</button>
 
      </div>
 
      <div class="col">
 
        <div class="form-check">
 
          <input type="checkbox" class="form-check-input" id="limit_100" name="limit_100">
 
          <label class="form-check-label" for="limit_100">LIMIT 100 (for faster running)</label>
 
        </div>
 
      </div>
 
    </div>
 
  </div>
 
 
 
  <div class="form-group">
 
    <!-- <label for="generated_sparql_query">Generated SPARQL query</label> -->
 
    <textarea class="form-control bg-light" id="generated_sparql_query" rows="20" name="generated_sparql_query"></textarea>
 
  </div>
 
  <button type="button" class="btn btn-primary" id="run_query" onclick="runQuery()">Run the query!</button>
 
</form>`);
 
 
// SOURCE: https://github.com/sinaahmadi/sinaahmadi.github.io/blob/master/_posts/2021-10-04-sparql-query-generator-for-lexicographical-data.md
 
// Author: Sina Ahmadi @sinaahmadi
 
// LICENSE: MIT
 
/* ********************************************************************** */
 
/* LANGUAGES & POS ****************************************************** */
 
// Current: Wikidata, Dbnary.
 
// List: https://www.wikidata.org/wiki/Help:Wikimedia_language_codes/lists/all
 
var languages_wiki = {
 
  "en": "Q1860",
 
  "fr": "Q150",
 
  "es": "Q1321",
 
  "pt": "Q5146",
 
  "de": "Q188",
 
  "it": "Q652"
 
};
 
// List:
 
var languages_dbnary = {
 
  "en": "en",
 
  "fr": "fr",
 
  "es": "es",
 
  "pt": "pt",
 
  "de": "de",
 
  "it": "it"
 
};
 
// List :
 
var posTags = {
 
  "Noun": "Q1084",
 
  "Adjective": "Q34698",
 
  "Adverb": "Q380057",
 
  "Verb": "Q24905"
 
};
 
 
 
/* ********************************************************************** */
 
/* QUERIES BASIS ******************************************************** */
 
// Current: Wikidata, Dbnary.
 
// Queries for Wikidata
 
var values = "\n\tVALUES ?word {'book'@GLWSSA}",
 
queryBasicWiki = "SELECT * WHERE {VALUESTOBEADDEDHERE\n\t?l a ontolex:LexicalEntry ;\n\t\tdct:language wd:LNGCDE ;\n\t\tontolex:lexicalForm ?form ;\n\t\twikibase:lexicalCategory wd:POSTAG ;\n\t\twikibase:lemma ?lemma .\n\t?form ontolex:representation ?word .\n}",
 
  querySensesWiki = "SELECT * WHERE {VALUESTOBEADDEDHERE\n\t?l a ontolex:LexicalEntry ;\n\t\tdct:language wd:LNGCDE ;\n\t\tontolex:lexicalForm ?form ;\n\t\twikibase:lexicalCategory wd:POSTAG ;\n\t\twikibase:lemma ?lemma ;\n\t\tontolex:sense ?sense .\n\t?form ontolex:representation ?word .\n}",
 
  queryDefWiki = "SELECT * WHERE {VALUESTOBEADDEDHERE\n\t?l a ontolex:LexicalEntry ;\n\t\tdct:language wd:LNGCDE ;\n\t\twikibase:lemma ?lemma ;\n\t\tontolex:lexicalForm ?form ;\n\t\twikibase:lexicalCategory ?category ;\n\t\tontolex:sense ?sense .\n\t?form ontolex:representation ?word .\n\t?language wdt:P218 \"GLWSSA\" .\n\t?sense skos:definition ?gloss .\n\tFILTER EXISTS {?l ontolex:sense ?sense }\n\tFILTER(LANG(?gloss) = \"GLWSSA\")\n}",
 
  queryExamplesWiki = "SELECT * WHERE {VALUESTOBEADDEDHERE\n\t?l a ontolex:LexicalEntry ;\n\t\tdct:language wd:LNGCDE ;\n\t\twikibase:lemma ?lemma ;\n\t\tontolex:lexicalForm ?form ;\n\t\twikibase:lexicalCategory ?category ;\n\t\tontolex:sense ?sense .\n\t\t?language wdt:P218 \"GLWSSA\" .\n\t?form ontolex:representation ?word .\n\t?sense skos:definition ?gloss .\n\tOPTIONAL{\n\t\t?l p:P5831 ?statement .\n\t\t?statement ps:P5831 ?example .\n\t}\n\tFILTER EXISTS {?l ontolex:sense ?sense }\n\tFILTER(LANG(?gloss) = \"GLWSSA\")\n}",
 
  queryTranslationWiki = "SELECT DISTINCT * WHERE {\n\t?sourec dct:language wd:LNGCDE;\n\t\twikibase:lemma ?sourceLemma;\n\t\tontolex:sense [ wdt:P5137 ?sense ].\n\t?target dct:language wd:LNGCDETRG;\n\t\twikibase:lemma ?targetLemma;\n\t\tontolex:sense [ wdt:P5137 ?sense ].\n}\nORDER BY ASC(UCASE(str(?sourceLemma)))\nLIMIT 100 ",
 
  queryTranslationWikiLemma = "SELECT DISTINCT * WHERE {VALUESTOBEADDEDHERE\n\t?source dct:language wd:LNGCDE;\n\t\twikibase:lemma ?sourceLemma;\n\t\tontolex:lexicalForm ?form ;\n\t\twikibase:lexicalCategory wd:POSTAG ;\n\t\tontolex:sense [ wdt:P5137 ?sense ].\n\t?target dct:language wd:LNGCDETRG;\n\t\twikibase:lemma ?targetLemma;\n\t\tontolex:sense [ wdt:P5137 ?sense ].\n\t?form ontolex:representation ?word .\n}\nORDER BY ASC(UCASE(str(?sourceLemma))) ";
 
 
 
// Queries for Dbnary
 
var valuesDbnary = "\n\tVALUES ?label {'book'@GLWSSA}\n\tVALUES ?pos {<http://www.lexinfo.net/ontology/2.0/lexinfo#POSTAGNM>}",
 
  queryBasicWikiDbnary = `SELECT * WHERE {VALUESTOBEADDEDHERE
 
      ?lexeme a ontolex:LexicalEntry ;
 
        rdfs:label ?label ;
 
        ontolex:canonicalForm ?form ;
 
        lime:language ?lang ;
 
        lexinfo:partOfSpeech  ?pos .
 
 
 
    FILTER(?lang = "GLWSSA")
 
    }`,
 
  querySensesWikiDbnary = `SELECT * WHERE {VALUESTOBEADDEDHERE
 
      ?lexeme a ontolex:LexicalEntry ;
 
        rdfs:label ?label ;
 
        ontolex:canonicalForm ?form ;
 
        lime:language ?lang ;
 
        lexinfo:partOfSpeech  ?pos ;
 
        ontolex:sense  ?sense .
 
 
 
    FILTER(?lang = "GLWSSA")
 
    }`,
 
  queryDefWikiDbnary = `SELECT ?lexeme ?label ?pos ?sense ?definition
 
    WHERE {
 
      ?sense a ontolex:LexicalSense ;
 
        skos:definition ?def .
 
      ?def rdf:value ?definition .
 
      FILTER(lang(?definition) = "GLWSSA")
 
      {
 
          SELECT * WHERE {VALUESTOBEADDEDHERE
 
            ?lexeme a ontolex:LexicalEntry ;
 
            rdfs:label ?label ;
 
            ontolex:canonicalForm ?form ;
 
            lime:language ?lang ;
 
            lexinfo:partOfSpeech  ?pos ;
 
            ontolex:sense  ?sense .
 
          FILTER(?lang = "GLWSSA")
 
          }
 
      }
 
    }`,
 
  queryExamplesWikiDbnary = ``,
 
  queryTranslationWikiDbnary = ``,
 
  queryTranslationWikiLemmaDbnary = ``;
 
 
 
/* ********************************************************************** */
 
/* GENERATE QUERY STRING ************************************************ */
 
// Current: Wikidata, Dbnary.
 
function generateQuery() {
 
  var lemma = document.getElementById("lemma").value;
 
  var posTag = document.getElementById("part_of_speech_tag").value;
 
  var sourceLanguage = document.getElementById("source_language").value;
 
  var translationLanguage = document.getElementById("translation_languages").value;
 
  var query = "";
 
  var formValid = false;
 
 
 
  if (document.getElementById('Wikidata').checked) {
 
    if (translationLanguage != "null") {
 
      if (lemma.length == 0) {
 
        query = queryTranslationWiki;
 
      } else {
 
        query = queryTranslationWikiLemma;
 
      }
 
    } else {
 
      switch (document.getElementById('information_categories').value) {
 
        case "1":
 
          query = queryBasicWiki;
 
          break;
 
        case "2":
 
          query = querySensesWiki;
 
          break;
 
        case "3":
 
          query = queryDefWiki;
 
          break;
 
        case "4":
 
          query = queryExamplesWiki;
 
          break;
 
      }
 
    }
 
  } else {
 
    switch (document.getElementById('information_categories').value) {
 
      case "1":
 
        query = queryBasicWikiDbnary;
 
        break;
 
      case "2":
 
        query = querySensesWikiDbnary;
 
        break;
 
      case "3":
 
        query = queryDefWikiDbnary;
 
        break;
 
    }
 
  }
 
 
 
  if (lemma.length != 0) {
 
  val = document.getElementById('Wikidata').checked? values : valuesDbnary;
 
      query = query.replace("VALUESTOBEADDEDHERE", val.replace("book", lemma));
 
  } else {
 
    query = query.replace("VALUESTOBEADDEDHERE", "");
 
  }
 
  query = query.replace("WORD", lemma);
 
  query = query.replace("LNGCDE", languages_wiki[sourceLanguage]);
 
  query = query.replaceAll("LNGCDETRG", languages_wiki[translationLanguage]);
 
  query = query.replaceAll("GLWSSA", sourceLanguage);
 
  query = query.replace("POSTAGNM", posTag.toLowerCase());
 
  query = query.replace("POSTAG", posTags[posTag]);
 
  // query = query.replace(";;", ";").concat("\n}").replace(";\n}", ".\n}");
 
 
 
  if (document.getElementById('limit_100').checked) {
 
    query = query.concat("\nLIMIT 100");
 
  }
 
  document.getElementById("generated_sparql_query").innerHTML = query;
 
}
 
  
/* ********************************************************************** */
+
$( "#lqg" ).append( fieldset.$element );
/* OPENS EXTERNAL QUERY SERVICE ***************************************** */
 
// Current: Wikidata, Dbnary. Broken: lingualibre.
 
function runQuery() {
 
  if (document.getElementById("generated_sparql_query").value != '') {
 
    if (document.getElementById('Wikidata').checked) {
 
      window.open("https://query.wikidata.org/#".concat(encodeURIComponent(document.getElementById("generated_sparql_query").value)), '_blank');
 
    }
 
    if (document.getElementById('Dbnary').checked) {
 
      window.open("http://kaiko.getalp.org/sparql?default-graph-uri=&query=".concat(encodeURIComponent(document.getElementById("generated_sparql_query").value)), '_blank');
 
    }
 
    if (document.getElementById('lingualibre').checked) {
 
      window.open("https://lingualibre.org/bigdata/#query".concat(encodeURIComponent(document.getElementById("generated_sparql_query").value)), '_blank');
 
    }
 
  }
 
}
 

Revision as of 20:28, 14 December 2021

console.log("User:Yug/MediaWiki:OOUI.js script loaded/ran");
// Toolbox
var runQuery = function(){
 return 'https://query.wikidata.org/#';
}

// Data
var languagesArray1 = [
      new OO.ui.MenuOptionWidget({ data: 'Q113', label: 'cmn - Mandarin Chinese' }),
      new OO.ui.MenuOptionWidget({ data: 'Q34',  label: 'mar - Marathi' }),
      new OO.ui.MenuOptionWidget({ data: 'Q209',  label: 'bre - Breton' })
    ],
    languagesArrayB = [
      { data: 'Q113', label: 'cmn - Mandarin Chinese' },
      { data: 'Q34',  label: 'mar - Marathi' },
      { data: 'Q209',  label: 'bre - Breton' }
    ],
    posArray = [
      new OO.ui.MenuOptionWidget({ data: 'Q24905', label: 'verb' }),
      new OO.ui.MenuOptionWidget({ data: 'Q34698', label: 'adjective' }),
      new OO.ui.MenuOptionWidget({ data: 'Q380057', label: 'adverb' }),
      new OO.ui.MenuOptionWidget({ data: 'Q1084', label: 'noun' })
    ],
    infoTypesArray = [
      new OO.ui.MenuOptionWidget({ data: '1', label: 'Just look !' }),
      new OO.ui.MenuOptionWidget({ data: '2', label: 'Sense' }),
      new OO.ui.MenuOptionWidget({ data: '3', label: 'Sense, definition' }),
      new OO.ui.MenuOptionWidget({ data: '4', label: 'Sense, definition and examples'}),
    ],
    languagesArray2 = [
      new OO.ui.MenuOptionWidget({ data: 'Q113', label: 'cmn - Mandarin Chinese' }),
      new OO.ui.MenuOptionWidget({ data: 'Q34',  label: 'mar - Marathi' }),
      new OO.ui.MenuOptionWidget({ data: 'Q209',  label: 'bre - Breton' })
    ],
    endpointsArray = [
      new OO.ui.RadioOptionWidget({ data: 'wikidata', label: 'Wikidata', selected: true }),
      new OO.ui.RadioOptionWidget({ data: 'Dbnary', label: 'Dbnary' }),
      //new OO.ui.RadioOptionWidget({ data: 'LinguaLibre', label: 'LinguaLibre' }),
    ];

// Elements
var lemma = new OO.ui.TextInputWidget({
    id: 'lqg-lemma',
    placeholder: 'book',
    value: 'book',
		label: 'Word',
    icon: 'search'
    }),
  languages = new OO.ui.DropdownWidget({
    id: 'lqg-languages',
		label: 'Source languages',
		menu: { items: languagesArray1 }
	}),
  languagesB = new OO.ui.ComboBoxInputWidget({
  	// value: 'Q34',
    options: languagesArrayB,
    id: 'lqg-languages',
		placeholder : 'Source languages',
	}),
  pos = new OO.ui.DropdownWidget( {
    id: 'lqg-pos',
		label: 'Part-of-speech',
		menu: { items: posArray }
	}),
  infoTypes = new OO.ui.DropdownWidget({
    id: 'lqg-infoTypes',
		label: 'Information to fetch if any',
		menu: { items: infoTypesArray }
	}),
  translations = new OO.ui.DropdownWidget({
    id: 'lqg-translations',
		label: 'Translations',
		menu: { items: languagesArray2 }
	}),
  enpoints =  new OO.ui.RadioSelectWidget({ 
    id: 'lqg-endpoints',
  	label: 'Radios buttons',
    
		items: endpointsArray 
	} ),
  generate = new OO.ui.ButtonWidget({ id: 'lqg-generate', label: 'Generate' } ),
  run = new OO.ui.ButtonWidget({ 
    id: 'lqg-pos',
    label:'Run !', 
    href:runQuery(), 
    target:'new' 
  }),
  limit = new OO.ui.CheckboxInputWidget({ id: 'lqg-limit', selected: true, }),
  limitLabel = new OO.ui.LabelWidget( { label: 'Limit to 100 (faster)' }),
  queryDisplay = new OO.ui.MultilineTextInputWidget( { 
    id: 'lqg-pos',
		value: `Query will appear here.\n\n\n\n\n\n`,
		multiline: true,
		autosize: true,
    minRows: 10,
		maxRows: 20
	} );
  
  
  // An example of a fieldset with horizontal layout.

var fieldset = new OO.ui.FieldsetLayout( {
		label: 'Queries Generator for Wikidata Lexemes'
	} );


fieldset.addItems( [ 
  new OO.ui.FieldLayout(
    new OO.ui.Widget( {
      content: [ 
        new OO.ui.HorizontalLayout( { items: [
          lemma,
          pos,
          languages,
        ]}),
        new OO.ui.HorizontalLayout( { items: [
          languagesB,
          infoTypes,
          translations
        ]}),
        new OO.ui.HorizontalLayout( { items: [
          generate,
        	run,
          limit,
          limitLabel,
          enpoints,
        ]}),
        queryDisplay
      ]
    }))
	]
);

// Add an horizontal field layout

$( "#lqg" ).append( fieldset.$element );