Skip to content

Commit

Permalink
Merge pull request #7 from NFDI4BIOIMAGE/dev
Browse files Browse the repository at this point in the history 
Improve form layout
  • Loading branch information
@MicheleBortol
MicheleBortol authored Sep 5, 2024
2 parents d9655fb + b767dfd commit cdde8bb
Show file tree
Hide file tree
Showing 5 changed files with 278 additions and 63 deletions.
151 changes: 105 additions & 46 deletions omero_vitessce/forms.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,51 @@ class ConfigForm(forms.Form):
automatically generate a config file for Vitessce
"""

# Set default values for CharField fields
default_cell_id_col = "cell_id"
default_label_col = "label"
default_cell_label_col = "label"
default_embedding_x_col = "UMAP_1"
default_embedding_y_col = "UMAP_2"
default_molecule_id = "id"
default_molecule_label = "gene"
default_molecule_x_col = "x"
default_molecule_y_col = "y"

# Set help_text values for all fields

config_file_name_help = "Name of the config file to use, \
a '.json' extension is added if missing."
image_help = "OMERO Image to view."
segmentation_help = "Label image to overlay on the image, \
pixel values correspond to cell identities."
cell_identities_help = ".csv file with at least 2 columns: \
Cell id column and Label column defined in the 2 fields below."
cell_id_help = "Name of the Cell id column used in \
'Cell identities', 'Expression', 'Embeddings'."
cell_label_help = "Name of the Label used in Cell identities, \
uesed e.g. to distinguish different cell types."
expression_help = ".csv file with the Cell id column all other columns \
are considered as expression values and should be numerical."
embeddings_help = ".csv file with the Cell id column, \
the Embedding x and Embedding y \
columns defined in the 2 fields below."
embeddings_x_help = "Name of the Embedding x used in Embeddings."
embeddings_y_help = "Name of the Embedding y used in Embeddings."
molecules_help = ".csv file with at least 4 columns: Molecule id, \
label, x, y (headers in the fields below)."
molecule_id_help = "Name of the Molecule id column used in Molecules."
molecule_label_help = "Name of the Molecule label \
column used in Molecules."
molecule_x_help = "Name of the Molecule x column used in Molecules."
molecule_y_help = "Name of the Molecule y column used in Molecules."
histograms_help = "Add 3 plots showing: The number of transcripts per \
cell, the number of cells in each set, \
gene expression in each set."
heatmap_help = "Adds an heatmap."
status_help = "Adds a status panel to display info on the selected cell."
description_help = "Adds a description panel to display info on the \
dataset/image (taken from the description field)."

def __init__(self, file_names, file_urls,
img_names, img_urls, *args, **kwargs):
super(ConfigForm, self).__init__(*args, **kwargs)
Expand All @@ -26,81 +62,104 @@ def __init__(self, file_names, file_urls,

filename = self.make_config_file_name()

self.fields["config file name"] = forms.CharField(
self.fields["config_file_name"] = forms.CharField(
empty_value=filename, strip=True,
min_length=1, max_length=40, required=False)
min_length=1, max_length=40, required=False,
help_text=ConfigForm.config_file_name_help)

# No empty default, we alway want an image in the config
self.fields["image"] = forms.ChoiceField(
choices=self.image_choices[1:], required=True)
choices=self.image_choices[1:], required=True,
help_text=ConfigForm.image_help)

# Cell data
self.fields["segmentation"] = forms.ChoiceField(
choices=self.image_choices, required=False)
choices=self.image_choices, required=False,
help_text=ConfigForm.segmentation_help)

self.fields["cell identities"] = forms.ChoiceField(
choices=self.text_choices, required=False)
self.fields["cell_identities"] = forms.ChoiceField(
choices=self.text_choices, required=False,
help_text=ConfigForm.cell_identities_help)

self.fields["cell id column"] = forms.CharField(
self.fields["cell_id_column"] = forms.CharField(
empty_value=ConfigForm.default_cell_id_col, strip=True,
min_length=1, max_length=20, required=False)
min_length=1, max_length=20, required=False,
help_text=ConfigForm.cell_id_help)

self.fields["label column"] = forms.CharField(
empty_value=ConfigForm.default_label_col, strip=True,
min_length=1, max_length=20, required=False)
self.fields["cell_label_column"] = forms.CharField(
empty_value=ConfigForm.default_cell_label_col, strip=True,
min_length=1, max_length=20, required=False,
help_text=ConfigForm.cell_label_help)

self.fields["expression"] = forms.ChoiceField(
choices=self.text_choices, required=False)
choices=self.text_choices, required=False,
help_text=ConfigForm.expression_help)

self.fields["embeddings"] = forms.ChoiceField(
choices=self.text_choices, required=False)
choices=self.text_choices, required=False,
help_text=ConfigForm.embeddings_help)

self.fields["embedding x"] = forms.CharField(
self.fields["embedding_x"] = forms.CharField(
empty_value=ConfigForm.default_embedding_x_col, strip=True,
min_length=1, max_length=20, required=False)
min_length=1, max_length=20, required=False,
help_text=ConfigForm.embeddings_x_help)

self.fields["embedding y"] = forms.CharField(
self.fields["embedding_y"] = forms.CharField(
empty_value=ConfigForm.default_embedding_y_col, strip=True,
min_length=1, max_length=20, required=False)
min_length=1, max_length=20, required=False,
help_text=ConfigForm.embeddings_y_help)

# Molecule data
self.fields["molecules"] = forms.ChoiceField(
choices=self.text_choices, required=False)
choices=self.text_choices, required=False,
help_text=ConfigForm.molecules_help)

self.fields["molecule id"] = forms.CharField(
self.fields["molecule_id"] = forms.CharField(
empty_value=ConfigForm.default_molecule_id, strip=True,
min_length=1, max_length=20, required=False)
min_length=1, max_length=20, required=False,
help_text=ConfigForm.molecule_id_help)

self.fields["molecule label"] = forms.CharField(
self.fields["molecule_label"] = forms.CharField(
empty_value=ConfigForm.default_molecule_label, strip=True,
min_length=1, max_length=20, required=False)
min_length=1, max_length=20, required=False,
help_text=ConfigForm.molecule_label_help)

self.fields["molecule x"] = forms.CharField(
self.fields["molecule_x"] = forms.CharField(
empty_value=ConfigForm.default_molecule_x_col, strip=True,
min_length=1, max_length=20, required=False)
min_length=1, max_length=20, required=False,
help_text=ConfigForm.molecule_x_help)

self.fields["molecule y"] = forms.CharField(
self.fields["molecule_y"] = forms.CharField(
empty_value=ConfigForm.default_molecule_y_col, strip=True,
min_length=1, max_length=20, required=False)

self.fields["histograms"] = forms.BooleanField(initial=True,
required=False)
self.fields["heatmap"] = forms.BooleanField(initial=True,
required=False)
self.fields["status"] = forms.BooleanField(initial=False,
required=False)
self.fields["description"] = forms.BooleanField(initial=False,
required=False)
min_length=1, max_length=20, required=False,
help_text=ConfigForm.molecule_y_help)

# Additional views
self.fields["histograms"] = \
forms.BooleanField(initial=True, required=False,
help_text=ConfigForm.histograms_help)
self.fields["heatmap"] = \
forms.BooleanField(initial=True, required=False,
help_text=ConfigForm.heatmap_help)
self.fields["status"] = \
forms.BooleanField(initial=False, required=False,
help_text=ConfigForm.status_help)
self.fields["description"] = \
forms.BooleanField(initial=False, required=False,
help_text=ConfigForm.description_help)

# Set default values for CharField fields
self.fields["config file name"].initial = filename
self.fields["cell id column"].initial = ConfigForm.default_cell_id_col
self.fields["label column"].initial = ConfigForm.default_label_col
self.fields["embedding x"].initial = ConfigForm.default_embedding_x_col
self.fields["embedding y"].initial = ConfigForm.default_embedding_y_col
self.fields["molecule id"].initial = ConfigForm.default_molecule_id
self.fields[
"molecule label"].initial = ConfigForm.default_molecule_label
self.fields["molecule x"].initial = ConfigForm.default_molecule_x_col
self.fields["molecule y"].initial = ConfigForm.default_molecule_y_col
self.fields["config_file_name"].initial = filename
self.fields["cell_id_column"].initial = ConfigForm.default_cell_id_col
self.fields["cell_label_column"].initial = \
ConfigForm.default_cell_label_col
self.fields["embedding_x"].initial = ConfigForm.default_embedding_x_col
self.fields["embedding_y"].initial = ConfigForm.default_embedding_y_col
self.fields["molecule_id"].initial = ConfigForm.default_molecule_id
self.fields["molecule_label"].initial = \
ConfigForm.default_molecule_label
self.fields["molecule_x"].initial = ConfigForm.default_molecule_x_col
self.fields["molecule_y"].initial = ConfigForm.default_molecule_y_col

def make_config_file_name(self):
""" Creates the default config file name with a timestamp:
Expand Down
160 changes: 158 additions & 2 deletions omero_vitessce/templates/omero_vitessce/vitessce_panel.html
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,33 @@
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
text-align: left;
}

.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -5px;
left: 105%;

}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<head>
<title> OMERO Vitessce</title>

</head>
</body>
<div class="right_tab_inner">
Expand All @@ -23,7 +48,138 @@
<form action='/omero_vitessce/generate_config/{{obj_type}}/{{obj_id}}' method="post">
{% csrf_token %}
<table>
{{ form.as_table }}
<tr>
<th colspan="2" style="text-align:center;">Vitessce viewer configuration</th>
</tr>
<tr>
<th><div class="tooltip">{{ form.config_file_name.label_tag }}
<span class="tooltiptext">{{ form.config_file_name.help_text }}</span>
</div></th>
<th style="text-align:left;">{{ form.config_file_name }}</th>
</tr>
<tr style="height:30px">
<th colspan="2" style="text-align:center;vertical-align:bottom">
Images</th>
</tr>
<tr>
<th><div class="tooltip">{{ form.image.label_tag }}
<span class="tooltiptext">{{ form.image.help_text }}</span>
</div></th>
<th style="text-align:left;">{{ form.image }}</th>
<tr style="height:30px">
<th colspan="2" style="text-align:center;vertical-align:bottom">
Cell Data</th>
</tr>
<tr>
<th><div class="tooltip">{{ form.segmentation.label_tag }}
<span class="tooltiptext">{{ form.segmentation.help_text }}</span>
</div></th>
<th style="text-align:left;">{{ form.segmentation }}</th>
</tr>
<tr>
<th><div class="tooltip">{{ form.cell_identities.label_tag }}
<span class="tooltiptext">{{ form.cell_identities.help_text }}</span>
</div></th>
<th style="text-align:left;">{{ form.cell_identities }}</th>
</tr>
<tr>
<th><div class="tooltip">{{ form.cell_id_column.label_tag }}
<span class="tooltiptext">{{ form.cell_id_column.help_text }}</span>
</div></th>
<th style="text-align:left;">{{ form.cell_id_column }}</th>
</tr>
<tr>
<th><div class="tooltip">{{ form.cell_label_column.label_tag }}
<span class="tooltiptext">{{ form.cell_label_column.help_text }}</span>
</div></th>
<th style="text-align:left;">{{ form.cell_label_column }}</th>
</tr>
<tr>
<th><div class="tooltip">{{ form.expression.label_tag }}
<span class="tooltiptext">{{ form.expression.help_text }}</span>
</div></th>
<th style="text-align:left;">{{ form.expression }}</th>
</tr>
<tr>
<th><div class="tooltip">{{ form.embeddings.label_tag }}
<span class="tooltiptext">{{ form.embeddings.help_text }}</span>
</div></th>
<th style="text-align:left;">{{ form.embeddings }}</th>
</tr>
<tr>
<th><div class="tooltip">{{ form.embedding_x.label_tag }}
<span class="tooltiptext">{{ form.embedding_x.help_text }}</span>
</div></th>
<th style="text-align:left;">{{ form.embedding_x }}</th>
</tr>
<tr>
<th><div class="tooltip">{{ form.embedding_y.label_tag }}
<span class="tooltiptext">{{ form.embedding_y.help_text }}</span>
</div></th>
<th style="text-align:left;">{{ form.embedding_y }}</th>
</tr>
<tr style="height:30px">
<th colspan="2" style="text-align:center;vertical-align:bottom">
Molecule Data</th>
</tr>
<tr>
<th><div class="tooltip">{{ form.molecule_id.label_tag }}
<span class="tooltiptext">{{form.molecule_id.help_text}}</span>
</div></th>
<th style="text-align:left;">{{ form.molecules }}</th>
</tr>
<tr>
<th><div class="tooltip">{{ form.molecule_id.label_tag }}
<span class="tooltiptext">{{ form.molecule_id.help_text }}</span>
</div></th>
<th style="text-align:left;">{{ form.molecule_id }}</th>
</tr>
<tr>
<th><div class="tooltip">{{ form.molecule_label.label_tag }}
<span class="tooltiptext">{{ form.molecule_label.help_text }}</span>
</div></th>
<th style="text-align:left;">{{ form.molecule_label }}</th>
</tr>
<tr>
<th><div class="tooltip">{{ form.molecule_x.label_tag }}
<span class="tooltiptext">{{ form.molecule_x.help_text }}</span>
</div></th>
<th style="text-align:left;">{{ form.molecule_x }}</th>
</tr>
<tr>
<th><div class="tooltip">{{ form.molecule_y.label_tag }}
<span class="tooltiptext">{{ form.molecule_y.help_text }}</span>
</div></th>
<th style="text-align:left;">{{ form.molecule_y }}</th>
</tr>
<tr style="height:30px">
<th colspan="2" style="text-align:center;vertical-align:bottom">
Additional views</th>
</tr>
<tr>
<th><div class="tooltip">{{ form.histograms.label_tag }}
<span class="tooltiptext">{{ form.histograms.help_text }}</span>
</div></th>
<th style="text-align:left;">{{ form.histograms }}</th>
</tr>
<tr>
<th><div class="tooltip">{{ form.heatmap.label_tag }}
<span class="tooltiptext">{{ form.heatmap.help_text }}</span>
</div></th>
<th style="text-align:left;">{{ form.heatmap }}</th>
</tr>
<tr>
<th><div class="tooltip">{{ form.status.label_tag }}
<span class="tooltiptext">{{ form.status.help_text }}</span>
</div></th>
<th style="text-align:left;">{{ form.status }}</th>
</tr>
<tr>
<th><div class="tooltip">{{ form.description.label_tag }}
<span class="tooltiptext">{{ form.description.help_text }}</span>
</div></th>
<th style="text-align:left;">{{ form.description }}</th>
</tr>
</table>
<input type = "submit" value = "Generate Config">
</form>
Expand Down
Loading

0 comments on commit cdde8bb

Please sign in to comment.