Skip to content

Commit

Permalink
addded legend, added full functionability, hierarchy should be finish…
Browse files Browse the repository at this point in the history 
…ed now
  • Loading branch information
Robin Kaggl committed Mar 13, 2024
1 parent 320ed8c commit 7dbf54c
Show file tree
Hide file tree
Showing 9 changed files with 122 additions and 77 deletions.
5 changes: 3 additions & 2 deletions components/autocomplete.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ const input = ref("");
const filtered = computed(() => {
if (!query.value.data) return null;
return input.value === ""
? query.value.data
: query.value.data.filter((entity) => {
Expand All @@ -58,11 +59,11 @@ defineEmits(["change", "input"]);
class="w-96 truncate p-2"
:display-value="(entity) => (entity as HierarchyNode)?.label"
@change="
input = $event.target.value;
$emit('input', $event.target.value);
input = $event.target.value;
"
/>
<ComboboxButton class="inset-y-0 right-0 flex items-center pr-3 text-gray-500">
<ComboboxButton class="inset-y-0 right-0 flex items-center px-3 text-gray-500">
<Search class="h-5 w-5" />
</ComboboxButton>
</div>
Expand Down
4 changes: 2 additions & 2 deletions components/facet-disclosures.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,10 @@ const route = useRoute();
const facetObject: Record<string, Array<string>> = getFacetObjectFromURL(true);
const facetChange = async (facets: Array<string>, field: string) => {
const facetChange = (facets: Array<string>, field: string) => {
facetObject[field] = facets;
await router.push({
void router.push({
query: {
...route.query,
page: 1,
Expand Down
11 changes: 10 additions & 1 deletion components/generic-listbox.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,19 @@ const model: ModelRef<{ label: string; value: string } | null> = defineModel({
default: null,
});
defineProps<{
const props = defineProps<{
items: Array<{ label: string; value: string }>;
}>();
defineEmits(["change"]);
watch(
() => props.items,
(to) => {
console.log("items changed:", props.items, model.value);
model.value = to[0] ? to[0] : null;
},
);
</script>

<template>
Expand Down
10 changes: 7 additions & 3 deletions components/hierarchy-wrapper.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,9 @@ onMounted(() => {
updateTree(props.data, props.width);
});
watch(
() => props.data,
(to) => {
updateTree(to, props.width);
() => [props.data, props.width],
([to, newWidth]) => {
updateTree(to as TreeEntity, newWidth as number);
},
{ deep: true },
);
Expand Down Expand Up @@ -52,6 +52,9 @@ function updateTree(data: TreeEntity, width: number) {
link: (d: Node) =>
`/${locale.value}/hierarchy?id=${d.data.meta.pk}&model=${d.data.meta.entity_type}&label=${d.data.meta.label}`,
width,
r: 7,
fontSize: "medium",
padding: 2,
};
hierarchyRef.value = Tree(hierarchy(data), options);
Expand All @@ -62,6 +65,7 @@ function updateTree(data: TreeEntity, width: number) {
<!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->
<!-- eslint-disable vuejs-accessibility/click-events-have-key-events -->
<div
class="w-full"
@click.prevent="
(event) =>
event.target?.parentNode?.href ? router.push(event.target.parentNode.href.baseVal) : null
Expand Down
25 changes: 19 additions & 6 deletions lib/tree.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ export function Tree(
halo = "#fff", // color of label halo
haloWidth = 3, // padding around the labels
curve = d3.curveBumpX, // curve for the link
fontSize = 10,
} = {},
) {
// If id and parentId options are specified, or the path option, use d3.stratify
Expand All @@ -49,8 +50,8 @@ export function Tree(
const L = label == null ? null : descendants.map((d) => label(d.data, d));

// Compute the layout.
const dx = 10;
const dy = width / (root.height + padding);
const dx = 10 + r;
const dy = (width + r) / (root.height + padding);
tree().nodeSize([dx, dy])(root);

// Center the tree.
Expand All @@ -74,7 +75,7 @@ export function Tree(
.attr("height", height)
.attr("style", "max-width: 100%; height: auto; height: intrinsic;")
.attr("font-family", "sans-serif")
.attr("font-size", 10);
.attr("font-size", fontSize);

svg
.append("g")
Expand Down Expand Up @@ -105,7 +106,18 @@ export function Tree(

node
.append("circle")
.attr("fill", (d) => (d.children ? stroke : fill))
.attr("fill", (d) => {
switch (d.data.data.meta.entity_type) {
case "Institution":
return "tomato";
case "Funktion":
return "yellowgreen";
case "Person":
return "lightskyblue";
default:
return fill;
}
})
.attr("r", r);

if (title != null) node.append("title").text((d) => title(d.data, d));
Expand All @@ -114,12 +126,13 @@ export function Tree(
node
.append("text")
.attr("dy", "0.32em")
.attr("x", (d) => (d.children ? -6 : 6))
.attr("x", (d) => (d.children ? -6 - r : 6 + r))
.attr("text-anchor", (d) => (d.children ? "end" : "start"))
.attr("paint-order", "stroke")
.attr("stroke", halo)
.attr("stroke-width", haloWidth)
.text((d, i) => L[i]);
.text((d, i) => L[i])
.attr("font-size", (d) => (d.data.data.meta.label.length > 20 ? "0.7em" : fontSize));

return svg.node();
}
4 changes: 4 additions & 0 deletions locales/de.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,10 @@
"add functions and persons": "Institutionen + Funktionen + Personen",
"show institution hierarchy": "Institutionshierarchie",
"show amt and persons": "Amt und Personen"
},
"legend": {
"legend": "Legende",
"function": "Funktion"
}
},
"documentation": {
Expand Down
4 changes: 4 additions & 0 deletions locales/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,10 @@
"add functions and persons": "Institutions, functions and persons",
"show institution hierarchy": "Institutions hierarchy",
"show amt and persons": "Amt and persons"
},
"legend": {
"legend": "Legend",
"function": "Function"
}
},
"documentation": {
Expand Down
122 changes: 66 additions & 56 deletions pages/hierarchy.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,43 +4,60 @@ import { Loader2 } from "lucide-vue-next";
import HierarchyWrapper from "@/components/hierarchy-wrapper.vue";
import { getTreeData } from "@/lib/get-tree-data";
import type { HierarchyNode } from "@/lib/types";
const router = useRouter();
const route = useRoute();
const t = useTranslations();
const comQuery = computed(() => {
const { label, id, model } = route.query;
const comQuery = computed({
get() {
const { label, id, model } = route.query;
if (!label || !id || !model) return null;
if (!label || !id || !model) return null;
return {
group: decodeURIComponent(String(model)),
pk: Number(id),
label: String(decodeURIComponent(String(label))),
};
return {
group: decodeURIComponent(String(model)),
pk: Number(id),
label: String(decodeURIComponent(String(label))),
};
},
set(to) {
if (to)
void router.push({
query: {
...route.query,
id: to.pk,
model: encodeURIComponent(to.group),
label: encodeURIComponent(to.label),
},
});
},
});
const comOptions = computed(() => {
const { direction, show } = route.query;
return {
direction: direction
? { value: String(direction), label: t(`pages.hierarchy.options.${String(direction)}`) }
: { label: t("pages.hierarchy.options.down"), value: "down" },
show: show
? { value: String(show), label: t(`pages.hierarchy.options.${String(show)}`) }
: { label: "Normal", value: "normal" },
};
const comOptions = computed({
get() {
const { direction, show } = route.query;
return {
direction: direction
? { value: String(direction), label: t(`pages.hierarchy.options.${String(direction)}`) }
: { label: t("pages.hierarchy.options.down"), value: "down" },
show: show
? { value: String(show), label: t(`pages.hierarchy.options.${String(show)}`) }
: { label: showArgs.value[0]?.label, value: showArgs.value[0]?.label },
};
},
set(to) {
void router.push({
query: {
...route.query,
show: to.show.value,
direction: to.show.value,
},
});
},
});
const autocomplete = ref<HierarchyNode | null>(comQuery.value);
const options = ref<{
show: { label: string; value: string };
direction: { label: string; value: string };
}>(comOptions.value);
const query = ref(
useQuery({
queryKey: ["hierarchy", comQuery, comOptions] as const,
Expand All @@ -62,7 +79,7 @@ const query = ref(
);
const showArgs = computed(() => {
switch (autocomplete.value?.group) {
switch (route.query.model) {
case "Institution": {
const instArgs = [
{
Expand All @@ -75,8 +92,6 @@ const showArgs = computed(() => {
label: t("pages.hierarchy.options.add functions and persons"),
},
];
if (!instArgs.map((arg) => arg.label).includes(options.value.show.value) && instArgs[0])
options.value.show = instArgs[0];
return instArgs;
}
case "Funktion": {
Expand All @@ -87,12 +102,9 @@ const showArgs = computed(() => {
},
{ value: "show amt and persons", label: t("pages.hierarchy.options.show amt and persons") },
];
if (!funcArgs.map((arg) => arg.value).includes(options.value.show.value) && funcArgs[0])
options.value.show = funcArgs[0];
return funcArgs;
}
default: {
options.value.show = { value: "normal", label: t("pages.hierarchy.options.normal") };
return [{ value: "normal", label: t("pages.hierarchy.options.normal") }];
}
}
Expand All @@ -104,26 +116,18 @@ definePageMeta({
</script>

<template>
<MainContent class="container mx-auto grid grid-flow-row grid-rows-[auto_1fr]">
<div class="flex">
<Autocomplete
v-model="autocomplete"
@change="
autocomplete
? router.push({
query: {
...route.query,
id: autocomplete.pk,
model: encodeURIComponent(autocomplete.group),
label: encodeURIComponent(autocomplete.label),
},
})
: null
"
/>
<MainContent class="relative mx-auto grid w-full grid-flow-row grid-rows-[auto_1fr]">
<div class="container mx-auto flex flex-wrap">
<Autocomplete v-model="comQuery" />
<ClientOnly>
<GenericListbox
v-model="options.direction"
v-model="comOptions.show"
class="m-2 min-w-56"
:items="showArgs"
@change="({ value }) => router.push({ query: { ...route.query, show: value } })"
/>
<GenericListbox
v-model="comOptions.direction"
class="m-2 min-w-48"
:items="[
{ value: 'down', label: t('pages.hierarchy.options.down') },
Expand All @@ -135,15 +139,21 @@ definePageMeta({
}
"
/>
<GenericListbox
v-model="options.show"
class="m-2 min-w-56"
:items="showArgs"
@change="({ value }) => router.push({ query: { ...route.query, show: value } })"
/>
</ClientOnly>

<div class="m-2 h-11 w-fit self-end rounded border bg-white p-2 shadow-lg">
<div class="flex items-center gap-x-2">
<h3>{{ t("pages.hierarchy.legend.legend") }}:</h3>
<div class="h-4 w-4 rounded-full border bg-[tomato] shadow" />
<div>Institution</div>
<div class="h-4 w-4 rounded-full border bg-[yellowgreen] shadow" />
<div>{{ t("pages.hierarchy.legend.function") }}</div>
<div class="h-4 w-4 rounded-full border bg-[lightskyblue] shadow" />
<div>Person</div>
</div>
</div>
</div>
<div>
<div class="w-full">
<ClientOnly v-if="!query.isFetching">
<VisContainer v-slot="{ width }" class="my-4 flex items-center">
<HierarchyWrapper v-if="query.data" :data="query.data" :width="width" />
Expand Down
14 changes: 7 additions & 7 deletions pages/search.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,15 +55,15 @@ const links = computed(() => {
} satisfies Record<string, NavLink>;
});
const updateFacets = async () => {
const updateFacets = () => {
const { query } = route;
if (query.facets?.start_date_int) {
await addToFacets(typesenseQueryToFacetObject(String(query.facets)).start_date_int);
} else await addToFacets([1600, 1900]);
addToFacets(typesenseQueryToFacetObject(String(query.facets)).start_date_int);
} else addToFacets([1600, 1900]);
};
const addToFacets = async (range: [number, number]) => {
const addToFacets = (range: [number, number]) => {
const { query } = route;
const router = useRouter();
const facetObject = typesenseQueryToFacetObject(String(query.facets));
Expand All @@ -74,19 +74,19 @@ const addToFacets = async (range: [number, number]) => {
if (isEmpty(facetObject)) {
delete query.facets;
await router.push({
void router.push({
query,
});
} else {
await router.push({
void router.push({
query: {
...query,
facets: facetObjectToTypesenseQuery(facetObject, false, includeDateless.value),
},
});
}
} else {
await router.push({
void router.push({
query: {
...query,
facets: facetObjectToTypesenseQuery(
Expand Down

0 comments on commit 7dbf54c

Please sign in to comment.