Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/disable map visualization #25

Merged
merged 19 commits into from
Aug 7, 2024
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
f6fabc8
chore: remove padding and center buttons in visualizations
oliviareichl Jun 28, 2024
3482368
style: place tooltip above element
oliviareichl Jul 15, 2024
b57bccb
Merge branch 'develop' into feat/disable-map-visualization
oliviareichl Jul 18, 2024
b8a9d7b
chore: refactor the layout and usage of query params so the sidebar w…
oliviareichl Jul 19, 2024
111a204
WIP: make the visualizations navigatable per query params
oliviareichl Jul 22, 2024
686bd44
fix: search in both visualizations, network mode with query params
oliviareichl Jul 23, 2024
06143b3
chore: disable mode switch when the entity is not a place
oliviareichl Jul 23, 2024
c619fb3
fix: labels are shown when a detailview is selected
oliviareichl Jul 24, 2024
c03d9fd
fix: call mode-switcher only when an id is provided
oliviareichl Jul 24, 2024
97f30e0
fix: highlight searchnodes in network after disposing a detailnode
oliviareichl Jul 25, 2024
c17ed18
chore: implement the detailview functionality in the data table
oliviareichl Jul 29, 2024
27f6b5a
refactor: delete unused data page
oliviareichl Jul 29, 2024
73dfc03
chore: modify mode-switcher so the datalist view is also switchable
oliviareichl Jul 30, 2024
be07f71
fix: mode switcher movement when a detailview in the data view is sel…
oliviareichl Jul 30, 2024
de1ca21
fix: data and map view when map is the start page
oliviareichl Jul 31, 2024
483ee9c
fix: update landing page links
stefanprobst Aug 5, 2024
cdd4ac9
fix: add missing icon for event system class
stefanprobst Aug 5, 2024
1e3640f
fix: adapt navlinks in the detail view to new route
oliviareichl Aug 7, 2024
c54e080
fix: missing route
oliviareichl Aug 7, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
fix: search in both visualizations, network mode with query params
  • Loading branch information
oliviareichl committed Jul 23, 2024
commit 686bd447bfcd67c5727e1e7392772b51efb25c4d
4 changes: 2 additions & 2 deletions components/data-map-view.vue
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ type EntitySelection = v.InferOutput<typeof entitySelectionSchema>;
type SearchFilters = v.InferOutput<typeof searchFiltersSchema>;

function setEntitySelection(query: Partial<EntitySelection>) {
void router.push({ query: { ...route.query, ...query } });
void router.push({ query: { mode: route.query.mode, ...query } });
}

function onChangeEntitySelection(values: EntityFeature) {
Expand All @@ -46,7 +46,7 @@ function onChangeEntitySelection(values: EntityFeature) {
}

function setSearchFilters(query: Partial<SearchFilters>) {
void router.push({ query });
void router.push({ query: { mode: route.query.mode, ...query } });
}

function onChangeSearchFilters(values: SearchFormData) {
Expand Down
4 changes: 2 additions & 2 deletions components/data-network-view.vue
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const searchFilters = computed(() => {
});

function onChangeSearchFilters(values: SearchFormData) {
const query = { ...searchFilters.value, ...values };
const query = { mode: route.query.mode, ...searchFilters.value, ...values };

if (values.search === "") {
// @ts-expect-error Fix me later please
Expand All @@ -33,7 +33,7 @@ function onChangeSearchFilters(values: SearchFormData) {
}

function onChangeCategory(values: CategoryFormData) {
void router.push({ query: { ...searchFilters.value, ...values } });
void router.push({ query: { mode: route.query.mode, ...searchFilters.value, ...values } });
}

const { data, isPending, isPlaceholderData } = useGetNetworkData(
Expand Down
97 changes: 50 additions & 47 deletions components/network.client.vue
Original file line number Diff line number Diff line change
Expand Up @@ -40,64 +40,52 @@ const context: NetworkContext = {

circular.assign(context.graph);

const locale = useLocale();
const router = useRouter();
const route = useRoute();

function getPath() {
if (route.path.includes("visualization")) {
return "visualization";
}
return "";
}
let hoverTimeOut: ReturnType<typeof setTimeout>;

const state = ref<State>({});
const layout = new FA2LayoutSupervisor(context.graph, { settings: layoutOptions });

const disabledNodeColor = project.colors.disabledNodeColor;
watch(
() => {
return props.searchNode;
},
(searchNode) => {
context.graph.nodes().forEach((el) => {
context.graph.removeNodeAttribute(el, "highlighted");
});
const query = searchNode?.toLowerCase();

if (query) {
const results = context.graph
.nodes()
.map((n) => {
return { id: n, label: context.graph.getNodeAttribute(n, "label") as string };
})
.filter(({ label }) => {
return label.toLowerCase().includes(query);
});

if (results.length >= 1) {
state.value.selectedNodes = results;
state.value.selectedNodes.forEach((el) => {
context.graph.setNodeAttribute(el.id, "highlighted", true);
});
}
}
// If the query is empty, then we reset the selectedNode
else {
state.value.selectedNodes = undefined;
function setSearchHighlight(searchNode: string) {
context.graph.nodes().forEach((el) => {
context.graph.removeNodeAttribute(el, "highlighted");
});
const query = searchNode.toLowerCase();

if (query) {
const results = context.graph
.nodes()
.map((n) => {
return { id: n, label: context.graph.getNodeAttribute(n, "label") as string };
})
.filter(({ label }) => {
return label.toLowerCase().includes(query);
});

if (results.length >= 1) {
state.value.selectedNodes = results;
state.value.selectedNodes.forEach((el) => {
context.graph.setNodeAttribute(el.id, "highlighted", true);
});
}
}
// If the query is empty, then we reset the selectedNode
else {
state.value.selectedNodes = undefined;
}

// Refresh rendering
// You can directly call `renderer.refresh()`, but if you need performances
// you can provide some options to the refresh method.
// In this case, we don't touch the graph data so we can skip its reindexation
context.renderer?.refresh({
skipIndexation: true,
});
},
{ immediate: true },
);
// Refresh rendering
// You can directly call `renderer.refresh()`, but if you need performances
// you can provide some options to the refresh method.
// In this case, we don't touch the graph data so we can skip its reindexation
context.renderer?.refresh({
skipIndexation: true,
});
}

watch(
() => {
Expand Down Expand Up @@ -138,6 +126,17 @@ watch(
skipIndexation: true,
});
},
);

watch(
() => {
return props.searchNode;
},
(searchNode) => {
if (searchNode) {
setSearchHighlight(searchNode);
}
},
{ immediate: true },
);

Expand All @@ -159,8 +158,12 @@ onMounted(async () => {

context.camera = context.renderer.getCamera();

if (props.searchNode) {
setSearchHighlight(props.searchNode);
}

context.renderer.on("clickNode", ({ node }) => {
void router.push(`/${getPath()}?mode=network&selection=${node}`);
void router.push({ query: { mode: route.query.mode, selection: node } });
});

context.renderer.on("enterNode", ({ node }) => {
Expand Down
12 changes: 9 additions & 3 deletions pages/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,13 @@ const route = useRoute();
const router = useRouter();

onMounted(() => {
return router.push({ query: { mode: "map" } });
if (project.map.startPage) {
if (!route.query.mode) {
return router.push({ query: { mode: "map" } });

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe "map" should just be the default mode.

}
return null;
}
return null;
});

definePageMeta({
Expand Down Expand Up @@ -64,8 +70,8 @@ const currentMode = computed(() => {
<template>
<MainContent class="grid grid-rows-[auto_1fr]">
<div v-if="!project.map.startPage">
<template v-if="content != null && content.leadIn != null" class="container py-8">
<div class="grid place-items-center gap-8 p-8 sm:py-16">
<template v-if="content != null && content.leadIn != null">
<div class="container grid place-items-center gap-8 p-8 sm:py-16">
<div>
<h1 class="sr-only">{{ content.title }}</h1>
<NuxtImg
Expand Down
33 changes: 0 additions & 33 deletions pages/network/index.vue

This file was deleted.