Skip to content

Commit

Permalink
Allow user to change landmarkInfo client-side
Browse files Browse the repository at this point in the history
  • Loading branch information
@annehaley
annehaley committed Oct 2, 2023
1 parent 7cb20c6 commit 609f8e0
Show file tree
Hide file tree
Showing 5 changed files with 99 additions and 41 deletions.
96 changes: 85 additions & 11 deletions web/shapeworks/src/components/InfoTab.vue
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,65 @@
<script>
import { landmarkInfo, activeLandmark, selectedDataset, selectedProject } from '@/store';
import { landmarkInfo, activeLandmark, selectedDataset, selectedProject, allSubjectsForDataset } from '@/store';
import { computed, ref } from 'vue';
export default {
setup() {
const headers = [
{text: 'ID', value: 'id', width: '15px'},
{text: '', value: 'color', width: '15px'},
{text: 'Name', value: 'name', width: '100px'},
{text: '# set', value: 'num_set', width: '70px'},
// {text: 'Place', value: 'placement_status'},
{text: 'Comment', value: 'comment'},
{text: '# set', value: 'num_set', width: '70px'},
];
const colorDialog = ref(false);
const changesMade = ref(false);
const colorStrings = computed(() => {
return landmarkInfo.value.map(({color}) => {
return `rgb(${color[0]},${color[1]},${color[2]})`
})
})
function getColorObject(rgb) {
return {
'r': rgb[0],
'g': rgb[1],
'b': rgb[2]
}
}
function updateLandmarkInfo(landmarkIndex, name, comment) {
landmarkInfo.value[landmarkIndex] = Object.assign(
{}, landmarkInfo.value[landmarkIndex], {name, comment}
)
changesMade.value = true;
}
function getColorString(rgb){
return `rgb(${rgb[0]},${rgb[1]},${rgb[2]})`
function updateLandmarkColor(landmarkIndex, color) {
color = [
color.rgba.r, color.rgba.g, color.rgba.b
]
landmarkInfo.value[landmarkIndex] = Object.assign(
{}, landmarkInfo.value[landmarkIndex], {color}
)
// overwrite landmarkInfo so colorStrings will recompute
landmarkInfo.value = [...landmarkInfo.value]
changesMade.value = true;
}
return {
selectedDataset,
selectedProject,
allSubjectsForDataset,
headers,
landmarkInfo,
activeLandmark,
getColorString,
colorStrings,
getColorObject,
updateLandmarkInfo,
updateLandmarkColor,
colorDialog,
changesMade,
}
}
}
Expand Down Expand Up @@ -52,11 +89,46 @@ export default {
@click:row="(l) => activeLandmark = l"
>
<!-- eslint-disable-next-line -->
<template v-slot:item.color="{ item }">
<div class='color-square'
:style="{backgroundColor: getColorString(item.color)}" />
<template v-slot:item.color="{ index, item }">
<v-dialog width="300">
<template v-slot:activator="{ on, attrs }">
<v-btn
class='color-square'
:style="{backgroundColor: colorStrings[index]}"
v-bind="attrs"
v-on="on"
/>
</template>
<v-card>
<v-card-title>Change color for {{ item.name }}</v-card-title>
<v-color-picker
:value="getColorObject(item.color)"
dot-size="25"
@update:color="(c) => updateLandmarkColor(index, c)"
></v-color-picker>
</v-card>
</v-dialog>
</template>
<!-- eslint-disable-next-line -->
<template v-slot:item.name="{ index, item }">
<v-text-field
v-model="item.name"
@input="(v) => updateLandmarkInfo(index, v, item.comment)"
/>
</template>
<!-- eslint-disable-next-line -->
<template v-slot:item.comment="{ index, item }">
<v-text-field
v-model="item.comment"
@input="(v) => updateLandmarkInfo(index, item.name, v)"
/>
</template>
<!-- eslint-disable-next-line -->
<template v-slot:item.num_set="{ item }">
{{ item.num_set }} / {{ allSubjectsForDataset.length }}
</template>
</v-data-table>
<v-btn v-if="changesMade" style="width: 100%" color="primary">Save Changes</v-btn>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
Expand All @@ -77,7 +149,9 @@ export default {
border-top: 1px solid white !important;
}
.color-square {
height: 15px;
width: 15px;
height: 20px !important;
width: 20px !important;
min-width: 15px !important;
padding: 0 !important;
}
</style>
28 changes: 10 additions & 18 deletions web/shapeworks/src/components/ShapeViewer/methods.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,11 @@ import {
cachedMarchingCubes, cachedParticleComparisonColors, vtkShapesByType,
analysisFileShown, currentAnalysisFileParticles, meanAnalysisFileParticles,
showDifferenceFromMeanMode, cachedParticleComparisonVectors,
landmarkColorList, activeLandmark, landmarkInfo, landmarkWidgets,
activeLandmark, landmarkInfo, landmarkWidgets,
cacheComparison, calculateComparisons,
showGoodBadParticlesMode, goodBadMaxAngle, goodBadAngles,
} from '@/store';
import { COLORS, SPHERE_RESOLUTION } from '@/store/constants';
import { SPHERE_RESOLUTION } from '@/store/constants';

export const GOOD_BAD_COLORS = [
[0, 255, 0],
Expand Down Expand Up @@ -121,7 +121,7 @@ export default {
this.applyCameraDelta(renderer, positionDelta, viewUpDelta)
})
},
createColorFilter(landmarks = false, goodBad = false) {
createColorFilter(goodBad = false) {
const filter = vtkCalculator.newInstance()
filter.setFormula({
getArrays() {
Expand All @@ -142,15 +142,7 @@ export default {

const n = coords.length / 3;
for (let i = 0; i < n; i += 1) {
let c = COLORS[i % COLORS.length];
if (landmarks) {
if (landmarkColorList.value[i]) {
c = landmarkColorList.value[i]
} else {
c = [0, 0, 0]
}
}

let c;
if (goodBad && analysisFileShown.value) {
// TODO: determine domain index for each particle array
// MULTIDOMAIN FIX
Expand Down Expand Up @@ -197,13 +189,13 @@ export default {
} else {
widget = vtkSeedWidget.newInstance();
widget.setManipulator(manipulator);

const coords = landmarkCoordsData.slice(index * 3, index * 3 + 3)
const handle = widget.getWidgetState().getMoveHandle();
handle.setColor3(...lInfo.color);
handle.setOrigin(coords);
landmarkWidgets.value[lInfo.id] = widget;

}
const coords = landmarkCoordsData.slice(index * 3, index * 3 + 3)
const handle = widget.getWidgetState().getMoveHandle();
handle.setOrigin(coords);
handle.setColor3(...lInfo.color);

const widgetHandle = this.widgetManager.addWidget(widget)
widgetHandle.setScaleInPixels(false);
Expand Down Expand Up @@ -233,7 +225,7 @@ export default {
scaleFactor: size,
});
const actor = vtkActor.newInstance();
const filter = this.createColorFilter(landmarks, showGoodBadParticlesMode.value);
const filter = this.createColorFilter(showGoodBadParticlesMode.value);

filter.setInputData(points, 0);
mapper.setInputConnection(filter.getOutputPort(), 0);
Expand Down
2 changes: 0 additions & 2 deletions web/shapeworks/src/store/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,8 +73,6 @@ export const activeLandmark = ref();

export const landmarkWidgets = ref({});

export const landmarkColorList = ref<number[][]>([])

export const currentTasks = ref<Record<number, Record<string, Task| undefined>>>({})

export const jobProgressPoll = ref();
Expand Down
10 changes: 2 additions & 8 deletions web/shapeworks/src/store/methods.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@ import {
meanAnalysisFileParticles,
allDatasets,
goodBadAngles,
landmarkColorList, landmarkInfo, landmarkWidgets,
landmarkInfo,
landmarkWidgets,
} from ".";
import imageReader from "@/reader/image";
import pointsReader from "@/reader/points";
Expand Down Expand Up @@ -334,12 +335,6 @@ export async function cacheAllComparisons(comparisons: CacheComparison[]) {
}
}

export function updateLandmarkColorList() {
landmarkColorList.value = landmarkInfo.value.map(
(info: LandmarkInfo) => info.color
)
}

export async function getLandmarks() {
landmarkWidgets.value = {}
if (selectedProject.value?.landmarks){
Expand Down Expand Up @@ -375,7 +370,6 @@ export async function getLandmarks() {
}
return currentInfo
})
updateLandmarkColorList()
}
}
}
4 changes: 2 additions & 2 deletions web/shapeworks/src/views/Main.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,11 +30,11 @@ import {
meanAnalysisFileParticles,
currentAnalysisFileParticles,
switchTab,
landmarkColorList,
jobAlreadyDone,
analysisExpandedTab,
allProjectsForDataset,
loadProjectsForDataset,
landmarkInfo,
activeLandmark,
} from '@/store';
import router from '@/router';
Expand Down Expand Up @@ -306,7 +306,7 @@ export default {
watch(selectedDataObjects, debouncedRefreshRender)
watch(layersShown, debouncedRefreshRender)
watch(analysisFileShown, debouncedRefreshRender)
watch(landmarkColorList, debouncedRefreshRender)
watch(landmarkInfo, debouncedRefreshRender)
watch(meanAnalysisFileParticles, debouncedRefreshRender)
watch(activeLandmark, debouncedRefreshRender)
watch(tab, switchTab)
Expand Down

0 comments on commit 609f8e0

Please sign in to comment.