Skip to content

Commit

Permalink
added support for skeleton_source in volumesoverlay
Browse files Browse the repository at this point in the history
  • Loading branch information
@chrisj
chrisj committed Jul 15, 2024
1 parent bad4456 commit 618f4fc
Show file tree
Hide file tree
Showing 2 changed files with 38 additions and 22 deletions.
50 changes: 31 additions & 19 deletions src/components/VolumesOverlay.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,14 @@ const activeVolumes = computed(() => {
for (const volume of volumes) {
for (const image_layer of volume.image_layers) {
for (const layer of activeLayers) {
if (image_layer.source === layer) {
if (image_layer.source[0] === layer) {
res.add(volume.name);
}
}
}
for (const segmentation_layer of volume.segmentation_layers) {
for (const layer of activeLayers) {
if (segmentation_layer.source === layer) {
if (segmentation_layer.source[0] === layer) {
res.add(volume.name);
}
}
Expand Down Expand Up @@ -53,7 +53,7 @@ const selectedImageLayer = computed(() => {
const volume = selectedVolume.value;
if (volume) {
for (const layer of volume.image_layers) {
if (layer.source === selectedImageSource.value) {
if (layer.source[0] === selectedImageSource.value) {
return layer;
}
}
Expand All @@ -64,7 +64,7 @@ const selectedSegmentationLayer = computed(() => {
const volume = selectedVolume.value;
if (volume) {
for (const layer of volume.segmentation_layers) {
if (layer.source === selectedSegmentationSource.value) {
if (layer.source[0] === selectedSegmentationSource.value) {
return layer;
}
}
Expand All @@ -78,14 +78,14 @@ function selectVolume(name: string) {
let defaultSelectedSegmentation: string | undefined = undefined;
if (volume) {
for (const layer of volume.image_layers.slice().reverse()) {
defaultSelectedImage = layer.source;
if (activeLayers.has(layer.source)) {
defaultSelectedImage = layer.source[0];
if (activeLayers.has(layer.source[0])) {
break;
}
}
for (const layer of volume.segmentation_layers.slice().reverse()) {
defaultSelectedSegmentation = layer.source;
if (activeLayers.has(layer.source)) {
defaultSelectedSegmentation = layer.source[0];
if (activeLayers.has(layer.source[0])) {
break;
}
}
Expand All @@ -96,19 +96,24 @@ function selectVolume(name: string) {
const canConfirm = computed(() => {
return selectedSegmentationLayer.value !== undefined
&& selectedImageLayer.value !== undefined
&& (!(activeLayers.has(selectedImageLayer.value.source))
|| !(activeLayers.has(selectedSegmentationLayer.value.source)));
&& (!(activeLayers.has(selectedImageLayer.value.source[0]))
|| !(activeLayers.has(selectedSegmentationLayer.value.source[0])));
});
function confirmSelection() {
if (canConfirm.value) {
const layers = [selectedImageLayer.value, selectedSegmentationLayer.value].map(x => {
const { source, ngl_image_name, name, type } = x!;
const [first, ...rest] = source.split('://');
// TEMP
const sourceWithCredentials = source.startsWith('graphene') ? `${first}://middleauth+${rest.join('://')}` : source;
let sourceAsArray = Array.isArray(source) ? source : [source];
sourceAsArray = sourceAsArray.map((x) => {
const [first, ...rest] = x.split('://');
// TEMP
return (x.startsWith('graphene') || x.includes('skeletoncache')) ? `${first}://middleauth+${rest.join('://')}` : x;
});
return {
name: ngl_image_name || name,
source: sourceWithCredentials,
source: sourceAsArray,
type,
tab: 'source'
}
Expand All @@ -132,22 +137,23 @@ function confirmSelection() {
<div class="layerSplit">
<div class="layers">
<div>Select Image Source</div>
<div v-for="layer of selectedVolume.image_layers" @click="selectedImageSource = layer.source" :class="{
<div v-for="layer of selectedVolume.image_layers" @click="selectedImageSource = layer.source[0]" :class="{
selected: layer.source === selectedImageLayer?.source,
active: activeLayers.has(layer.source)
active: activeLayers.has(layer.source[0])
}">
<div>{{ layer.name }}</div>
<div class="description">{{ layer.description }}</div>
</div>
</div>
<div class="layers">
<div>Select Segmentation</div>
<div v-for="layer of selectedVolume.segmentation_layers" @click="selectedSegmentationSource = layer.source"
:class="{
<div v-for="layer of selectedVolume.segmentation_layers"
@click="selectedSegmentationSource = layer.source[0]" :class="{
selected: layer.source === selectedSegmentationLayer?.source,
active: activeLayers.has(layer.source)
active: activeLayers.has(layer.source[0])
}">
<div>{{ layer.name }}</div>
<div class="additionalSources" v-if="layer.skeleton_source">Additional sources: skeletons</div>
<div class="description">{{ layer.description }}</div>
</div>
</div>
Expand Down Expand Up @@ -251,6 +257,12 @@ function confirmSelection() {
opacity: 0.5;
}
.additionalSources {
font-size: 11px;
font-style: italic;
opacity: 0.7;
}
.layerSplit {
display: grid;
grid-template-columns: 1fr 1fr;
Expand Down
10 changes: 7 additions & 3 deletions src/store.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,11 +131,12 @@ export interface Volume {
}

interface Layer {
source: string;
source: string[];
ngl_image_name?: string;
name: string;
description: string;
type: string;
skeleton_source?: string;
}

export const useLayersStore = defineStore("layers", () => {
Expand Down Expand Up @@ -226,13 +227,16 @@ export const useVolumesStore = defineStore("volumes", () => {
description: (value as any).description,
image_layers: (value as any).image_layers.map((x: any) => {
x.type = "image";
x.source = x.image_source;
x.source = [x.image_source];
return x;
}),
segmentation_layers: (value as any).segmentation_layers.map(
(x: any) => {
x.type = "segmentation";
x.source = x.segmentation_source;
x.source = [x.segmentation_source];
if (x.skeleton_source) {
x.source.push(x.skeleton_source);
}
return x;
}
),
Expand Down

0 comments on commit 618f4fc

Please sign in to comment.