update search types.

+ better display of the search types in all the views
acdh-oeaw · Jan 2, 2024 · 2225640 · 2225640
1 parent 9107314
commit 2225640
Show file tree

Hide file tree

Showing 12 changed files with 94 additions and 69 deletions.
diff --git a/src/components/DataDisplay/DataDisplayKeywordInContext.vue b/src/components/DataDisplay/DataDisplayKeywordInContext.vue
@@ -73,9 +73,9 @@ const selectedKWIC: Ref<KeywordInContext | null> = ref(null);
 			<div v-for="query of queries" :key="query.id">
 				<div v-if="!query.loading.keywordInContext">
 					<span :style="`color: ${query.color}`">
-						{{ query.finalQuery }}
+						{{ query.type }}: {{ query.userInput }}
+						<CorpusChip :query="query" />
 					</span>
-					<CorpusChip :query="query" />
 					<VDataTable
 						v-model="selected"
 						density="compact"

diff --git a/src/components/DataDisplay/DataDisplayMediaSource.vue b/src/components/DataDisplay/DataDisplayMediaSource.vue
@@ -16,7 +16,9 @@ const series = computed(() => {
 	const allSeries = queries.value.map((query: CorpusQuery) => {
 		return {
 			color: query.color,
-			name: `${query.finalQuery} ${query.corpus}${query.subCorpus ? ` / ${query.subCorpus}` : ""}`,
+			name: `${query.type}: ${query.userInput} ${query.corpus}${
+				query.subCorpus ? ` / ${query.subCorpus}` : ""
+			}`,
 			data: categories.value
 				.map((category) => query.data.mediaSources.find(({ media }) => category === media))
 				// @ts-ignore
@@ -47,13 +49,11 @@ const expand = ref(false);
 			<div v-for="query of queries" :key="query.id">
 				<div v-if="query.loading.mediaSources">
 					<VProgressCircular :color="query.color" indeterminate></VProgressCircular>
-					<span :style="`color: ${query.color}`">
-						{{ query.finalQuery }}
-					</span>
+					<span :style="`color: ${query.color}`">{{ query.type }}: {{ query.userInput }}</span>
 				</div>
 			</div>
 			<HighCharts
-				style="height: 800px"
+				style="height: 1200px"
 				:options="{
 					chart: {
 						type: 'bar',
@@ -76,13 +76,14 @@ const expand = ref(false);
 		</VCardText>
 
 		<VExpandTransition v-if="expand">
-			<div class="grid grid-cols-3 gap-2">
+			<div class="m-2 grid grid-cols-2 gap-2">
 				<!-- {{ queries.length }} -->
 				<!-- <div v-for="query of queries" :key="query.id" :style="`border: 2px solid ${query.color}`"> -->
 				<div v-for="query of queries" :key="query.id">
 					<div v-if="!query.loading.mediaSources">
 						<span :style="`color: ${query.color}`">
-							{{ query.finalQuery }}
+							{{ query.type }}: {{ query.userInput }}
+							<CorpusChip :query="query" />
 						</span>
 						<VDataTable :items="query.data.mediaSources" density="compact" />
 					</div>

diff --git a/src/components/DataDisplay/DataDisplayRegionalFrequencies.vue b/src/components/DataDisplay/DataDisplayRegionalFrequencies.vue
@@ -29,16 +29,14 @@ const expand = ref(false);
 				<div v-if="query.loading.regionalFrequencies">
 					<VProgressCircular :color="query.color" indeterminate></VProgressCircular>
 					<span :style="`color: ${query.color}`">
-						{{ query.finalQuery }}
+						{{ query.type }}: {{ query.userInput }}
+						<CorpusChip :query="query" />
 					</span>
-					<CorpusChip :query="query" />
 				</div>
 			</div>
 			<div v-for="query of queries" :key="query.id">
 				<div v-if="!query.loading.regionalFrequencies" class="mt-1">
-					<span :style="`color: ${query.color}`">
-						{{ query.finalQuery }}
-					</span>
+					<span :style="`color: ${query.color}`">{{ query.type }}: {{ query.userInput }}</span>
 					<CorpusChip :query="query" />
 					<ClientOnly>
 						<MapChart :query="query" :mode="mode" />
@@ -48,13 +46,14 @@ const expand = ref(false);
 		</VCardText>
 
 		<VExpandTransition v-if="expand">
-			<div class="grid grid-cols-3 gap-2">
+			<div class="m-2 grid grid-cols-2 gap-2">
 				<!-- {{ queries.length }} -->
 				<!-- <div v-for="query of queries" :key="query.id" :style="`border: 2px solid ${query.color}`"> -->
 				<div v-for="query of queries" :key="query.id">
 					<div v-if="!query.loading.regionalFrequencies">
 						<span :style="`color: ${query.color}`">
-							{{ query.finalQuery }}
+							{{ query.type }}: {{ query.userInput }}
+							<CorpusChip :query="query" />
 						</span>
 						<VDataTable :items="query.data.regionalFrequencies" density="compact" />
 					</div>

diff --git a/src/components/DataDisplay/DataDisplayWordFormFrequencies.vue b/src/components/DataDisplay/DataDisplayWordFormFrequencies.vue
@@ -26,9 +26,7 @@ const expand = ref(false);
 			<div v-for="query of queries" :key="query.id">
 				<div v-if="query.loading.wordFormFrequencies">
 					<VProgressCircular :color="query.color" indeterminate></VProgressCircular>
-					<span :style="`color: ${query.color}`">
-						{{ query.finalQuery }}
-					</span>
+					<span :style="`color: ${query.color}`">{{ query.type }}: {{ query.userInput }}</span>
 				</div>
 				<HighCharts
 					:options="{
@@ -50,7 +48,7 @@ const expand = ref(false);
 						series: [
 							{
 								color: query.color,
-								name: `${query.finalQuery} ${query.corpus}${
+								name: `${query.type}: ${query.userInput} ${query.corpus}${
 									query.subCorpus ? ` / ${query.subCorpus}` : ''
 								}`,
 								data: query.data.wordFormFrequencies.map(({ relative, absolute }) =>
@@ -64,13 +62,14 @@ const expand = ref(false);
 		</VCardText>
 
 		<VExpandTransition v-if="expand">
-			<div class="grid grid-cols-2 gap-2">
+			<div class="m-2 grid grid-cols-2 gap-2">
 				<div v-for="query of queries" :key="query.id">
 					<div v-if="!query.loading.wordFormFrequencies">
 						<span :style="`color: ${query.color}`">
-							{{ query.finalQuery }}
+							{{ query.type }}: {{ query.userInput }}
+							<CorpusChip :query="query" />
 						</span>
-						<CorpusChip :query="query" />
+
 						<VDataTable :items="query.data.wordFormFrequencies" density="compact" />
 					</div>
 					<VProgressCircular v-else :color="query.color" indeterminate></VProgressCircular>

diff --git a/src/components/DataDisplay/DataDisplayYearlyFrequencies.vue b/src/components/DataDisplay/DataDisplayYearlyFrequencies.vue
@@ -12,8 +12,9 @@ const series = computed(() =>
 	queries.value
 		.filter((q: CorpusQuery) => !q.loading.yearlyFrequencies)
 		.map((query: CorpusQuery) => ({
-			name: `${query.finalQuery} ${query.corpus}${query.subCorpus ? ` / ${query.subCorpus}` : ""}`,
-
+			name: `${query.type}: ${query.userInput} ${query.corpus}${
+				query.subCorpus ? ` / ${query.subCorpus}` : ""
+			}`,
 			data: query.data.yearlyFrequencies
 				.sort((a, b) => b.year - a.year)
 				.map((point) => [point.year, mode.value === "relative" ? point.relative : point.absolute]),
@@ -40,9 +41,7 @@ const series = computed(() =>
 			<div v-for="query of queries" :key="query.id">
 				<div v-if="query.loading.yearlyFrequencies">
 					<VProgressCircular :color="query.color" indeterminate></VProgressCircular>
-					<span :style="`color: ${query.color}`">
-						{{ query.finalQuery }}
-					</span>
+					<span :style="`color: ${query.color}`">{{ query.type }}: {{ query.userInput }}</span>
 				</div>
 			</div>
 			<HighCharts
@@ -63,11 +62,12 @@ const series = computed(() =>
 		</VCardText>
 
 		<VExpandTransition v-if="expand">
-			<div class="grid grid-cols-4 gap-2">
+			<div class="m-2 grid grid-cols-4 gap-2">
 				<div v-for="query of queries" :key="query.id">
 					<div v-if="!query.loading.yearlyFrequencies">
 						<span :style="`color: ${query.color}`">
-							{{ query.finalQuery }}
+							{{ query.type }}: {{ query.userInput }}
+							<CorpusChip :query="query" />
 						</span>
 						<VDataTable :items="query.data.yearlyFrequencies" density="compact" />
 					</div>

diff --git a/src/components/Search/QueryItem.vue b/src/components/Search/QueryItem.vue
@@ -12,26 +12,31 @@ const storeQuery = queries.queries.find((q) => q.id === props.query.id) as unkno
 	<VCard :key="props.query.id" :style="`border: 2px solid ${props.query.color};`">
 		<!-- <p>id: {{ props.query.id }}</p> -->
 		<VCardTitle>
-			<span class="text-xl" :style="`color: ${props.query.color}`">
-				{{ props.query.finalQuery }}
-				<VTooltip activator="parent">{{ props.query.finalQuery }}</VTooltip>
-			</span>
-
-			<div class="flex items-center justify-between">
-				<div class="flex gap-2">
+			<div class="flex justify-between gap-2">
+				<div class="flex gap-1">
+					<VBtn density="compact" icon="mdi-trash-can" @click="queries.queries.splice(i, 1)"></VBtn>
 					<VBtn
 						density="compact"
 						icon="mdi-palette"
 						@click="storeQuery.showPicker = !storeQuery.showPicker"
 					></VBtn>
-					<VBtn density="compact" icon="mdi-trash-can" @click="queries.queries.splice(i, 1)"></VBtn>
 				</div>
+				<span class="text-xl" :style="`color: ${props.query.color}`">
+					{{ props.query.userInput }}
+					<VTooltip activator="parent">{{ props.query.userInput }}</VTooltip>
+				</span>
 			</div>
+
+			<div class="mt-2 flex items-center justify-between"></div>
 		</VCardTitle>
 
-		<VCardText class="flex justify-between">
-			<CorpusChip :query="query"></CorpusChip>
-			<VChip>{{ props.query.type }}</VChip>
+		<VCardText class="flex justify-between" :style="`color: ${props.query.color}`">
+			<JsonViewer preview-mode :value="query.concordance_query" boxed></JsonViewer>
+			<div class="flex flex-col gap-1">
+				<CorpusChip :query="query"></CorpusChip>
+				<VChip>{{ props.query.type }}</VChip>
+			</div>
+
 			<!-- <p>userInput: {{ props.query.userInput }}</p> -->
 		</VCardText>
 

diff --git a/src/components/Search/Search.vue b/src/components/Search/Search.vue
@@ -4,15 +4,16 @@ import SearchDimensions from "./SearchDimensions.vue";
 
 const query = useQuery();
 
-const newSelectedType: Ref<CorpusQueryType> = ref("word");
+const newSelectedType: Ref<CorpusQueryType> = ref("iqueryrow");
 const newUserInput = ref("");
 
 const CORPUS_QUERY_TYPES = [
-	{ value: "custom", description: "Custom search" },
-	{ value: "lc", description: "Lemma C Search (ToDo)" },
-	{ value: "lc*", description: "LemmaC with wildcard" },
-	{ value: "lemma", description: "Lemma search" },
-	{ value: "word", description: "Word Search" },
+	{ value: "charrow", description: "Character Search" },
+	{ value: "cqlrow", description: "Custom Query Lang Search" },
+	{ value: "iqueryrow", description: "Simplie Search (iquery)" },
+	{ value: "lemmarow", description: "Lemma Search" },
+	{ value: "phraserow", description: "Phrase search" },
+	{ value: "wordrow", description: "Word search" },
 ];
 
 const searchSettings = useSearchSettingsStore();

diff --git a/src/composables/useMediaSourceSearch.ts b/src/composables/useMediaSourceSearch.ts
@@ -34,7 +34,7 @@ export function useMediaSourceSearch() {
 				freqlevel: 1,
 				ml1attr: "doc.docsrc",
 				ml1ctx: "0~0 > 0",
-				json: { concordance_query: [{ queryselector: "iqueryrow", iquery: query.userInput }] },
+				json: { concordance_query: query.concordance_query },
 				//q: `${query.preparedQuery};${corpora.corporaForSearch};fttattr=doc.docsrc;fcrit=doc.id;flimit=0;format=json`,
 			},
 		});
@@ -45,13 +45,6 @@ export function useMediaSourceSearch() {
 		// }
 		const mediaSourceData = mediaSources.value as FreqMLDocsRC;
 
-		console.log({
-			mediaSourceData,
-			blocks: mediaSourceData.Blocks,
-			// @ts-ignore
-			items: mediaSourceData.Blocks[0]?.Items,
-		});
-
 		// @ts-ignore
 		const WordformData = (mediaSourceData.Blocks || [])[0]?.Items ?? [];
 		WordformData.forEach(({ frq, Word, fpm }) => {

diff --git a/src/composables/useRegionsSearch.ts b/src/composables/useRegionsSearch.ts
@@ -27,7 +27,7 @@ export function useRegionsSearch() {
 				freqlevel: 1,
 				ml1attr: "doc.region",
 				ml1ctx: "0~0 > 0",
-				json: { concordance_query: [{ queryselector: "iqueryrow", iquery: query.userInput }] },
+				json: { concordance_query: query.concordance_query },
 			},
 		});
 

diff --git a/src/composables/useWordFormsSearch.ts b/src/composables/useWordFormsSearch.ts
@@ -28,7 +28,7 @@ export function useWordFormsSearch() {
 				pagesize: 20,
 				kwicleftctx: "100#",
 				kwicrightctx: "100#",
-				json: { concordance_query: [{ queryselector: "iqueryrow", iquery: query.userInput }] },
+				json: { concordance_query: query.concordance_query },
 			},
 		});
 		console.log({ freqtWords: freqtWords.value });

diff --git a/src/stores/query.ts b/src/stores/query.ts
@@ -3,33 +3,50 @@ import { type Ref, ref } from "vue";
 
 import { useCorporaStore } from "./corpora";
 
+const keyToKey = {
+	charrow: 'char',
+	cqlrow: 'cql',
+	iqueryrow: 'iquery',
+	lemmarow: 'lemma',
+	phraserow: 'phrase',
+	wordrow: 'word',
+}
+
 export const useQuery = defineStore(
-	"query",
+	"queryNew",
 	() => {
 		const nextQueryId = ref(0);
 		const queries = ref([]) as Ref<Array<CorpusQuery>>;
 		const corporaStore = useCorporaStore();
+
 		function addQuery(userInput: string, type: CorpusQueryType) {
 			let finalQuery = "";
+
+
+			const concordance_query: Partial<ConcordanceQuery> = {
+
+			}
+
+			concordance_query[keyToKey[type]] = userInput;
+			concordance_query.queryselector = type;
+
+			// for old (regional Frequencies)
 			switch (type) {
-				case "word":
+				case "wordrow":
 					finalQuery = `[word="${userInput}"]`;
 					break;
-				case "lemma":
+				case "lemmarow":
 					finalQuery = `[lemma="${userInput}"]`;
 					break;
-				case "lc":
-					finalQuery = `[lc="${userInput.toLowerCase()}"]`;
-					break;
-				case "lc*":
-					finalQuery = `[lc=".*${userInput.toLowerCase()}.*"]`;
-					break;
-				case "custom":
+				case "cqlrow":
 					finalQuery = userInput;
 					break;
 				default: // default is word search
 					finalQuery = `[word="${userInput}"]`;
 			}
+
+
+
 			const colorId = nextQueryId.value % colors.length; // so not to overshoot array
 			const query: CorpusQuery = {
 				id: nextQueryId.value++,
@@ -39,6 +56,7 @@ export const useQuery = defineStore(
 				finalQuery,
 				corpus: corporaStore.selectedCorpus?.corpname ?? "",
 				subCorpus: corporaStore.selectedSubCorpus?.n ?? "",
+				concordance_query: concordance_query as ConcordanceQuery,
 				preparedQuery: `aword,${finalQuery}`, // note: this is done in the old project, so we do it here too
 				showPicker: false,
 				data: {

diff --git a/src/types/query.d.ts b/src/types/query.d.ts
@@ -1,4 +1,11 @@
-type CorpusQueryType = "custom" | "lc" | "lc*" | "lemma" | "word";
+type CorpusQueryType = "charrow" | "cqlrow" | "iqueryrow" | "lemmarow" | "phraserow" | "wordrow";
+
+type CorpusQueryTypeValue = 'char' |
+	'cql' |
+	'iquery' |
+	'lemma' |
+	'phrase' |
+	'word';
 
 type Region = "agesamt" | "amitte" | "aost" | "asuedost" | "awest" | "spezifisch";
 
@@ -43,6 +50,8 @@ interface QueryData {
 
 	keywordInContext: Array<KeywordInContext>;
 }
+
+type ConcordanceQuery = Record<'queryselector', CorpusQueryType> & Record<CorpusQueryTypeValue, string>
 interface CorpusQuery {
 	id: number;
 	type: CorpusQueryType;
@@ -53,7 +62,7 @@ interface CorpusQuery {
 	showPicker: boolean;
 	corpus: string;
 	subCorpus: string;
-
+	concordance_query: ConcordanceQuery;
 	loading: {
 		yearlyFrequencies: boolean;
 		wordFormFrequencies: boolean;