fix: fixed query item json view by swaping library

package.json

@@ -57,6 +57,7 @@
 		"tailwind-merge": "^2.4.0",
 		"vue-highlight-words": "^3.0.1",
 		"vue-i18n-routing": "^1.2.0",
+		"vue-json-pretty": "^2.4.0",
 		"zipcelx": "^1.6.2"
 	},
 	"devDependencies": {
@@ -108,7 +109,6 @@
 		"typescript": "^5.5.3",
 		"vitest": "^2.0.5",
 		"vitest-environment-nuxt": "^1.0.1",
-		"vue-json-viewer": "^3.0.4",
 		"vue-tsc": "^2.0.29",
 		"vuetify": "^3.5.1"
 	},

src/components/DataDisplay/DataDisplayRegionalFrequencies.vue

@@ -120,7 +120,6 @@ const expand = ref(false);
 					<VBtn value="relative" variant="outlined">{{ t("relative") }}</VBtn>
 				</VBtnToggle>
 			</div>
-			<!-- <JsonViewer boxed :value="regionalFrequencies" :expand-depth="5"></JsonViewer> -->
 
 			<div v-for="(query, index) of queries" :key="query.id">
 				<div class="mt-1">

src/components/DataDisplay/KWICDetailDialog.vue

@@ -34,7 +34,6 @@ const t = useTranslations("Corpsum");
 						<VProgressCircular indeterminate></VProgressCircular>
 						<span class="ml-2">{{ t("loading-the-full-ref") }}</span>
 					</div>
-					<!-- <JsonViewer v-if="status !== 'pending'" :expand-depth="2" :value="details"></JsonViewer> -->
 					<div v-if="status !== 'pending' && details">
 						<div
 							v-for="ref of details.data.Refs"

src/components/Search/QueryItem.vue

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+import "vue-json-pretty/lib/styles.css";
+
+import VueJsonPretty from "vue-json-pretty";
+
 import { useQueryStore } from "../../stores/query";
 
 const props = defineProps<{ query: CorpusQuery }>();
@@ -67,9 +71,7 @@ const showFacettingInterface = ref(false);
 
 		<VCardText class="flex justify-between gap-1" :style="`color: ${props.query.color}`">
 			<div class="flex flex-col justify-between">
-				<!-- <JsonViewer preview-mode :value="query.concordance_query" boxed></JsonViewer> -->
-				<JsonViewer boxed preview-mode :value="queryWithFacetting"></JsonViewer>
-				<!-- <JsonViewer preview-mode :value="query.KWICAttrsStructs" boxed></JsonViewer> -->
+				<VueJsonPretty :data="queryWithFacetting"></VueJsonPretty>
 			</div>
 			<div class="flex flex-col gap-1">
 				<CorpusChip :query="query"></CorpusChip>

src/pages/index.vue

@@ -29,13 +29,9 @@ const { queries } = storeToRefs(queryStore);
 			</VContainer>
 
 			<Search></Search>
-			<!-- <v-data-table /> -->
-			<!-- <Dev></Dev> -->
 
 			<VContainer>
 				<div class="" :class="['grid', 'gap-3', `grid-cols-1`]">
-					<!-- <DisplayCard v-for="i in 2" :key="i" :title="titles[i]"></DisplayCard> -->
-
 					<DataDisplayYearlyFrequencies
 						v-if="selectedSearches.includes('yearlyFrequencies' as unknown as SearchFunctionKey)"
 						:queries="queries"
@@ -64,7 +60,6 @@ const { queries } = storeToRefs(queryStore);
 					></DataDisplayKeywordInContext>
 				</div>
 			</VContainer>
-			<!-- <Dev /> -->
 		</ClientOnly>
 	</MainContent>
 </template>