Skip to content

Add molecule structure preview to the Compound search window #839

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.

Sign up for GitHub

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

Merged
YukiMatsuzawa merged 1 commit into from
Oct 21, 2026
Merged

Add molecule structure preview to the Compound search window #839

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
172 changes: 95 additions & 77 deletions src/MSDIAL5/MsdialGuiApp/View/Dims/DimsCompoundSearchView.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:infoview="clr-namespace:CompMs.App.Msdial.View.Information"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:CompMs.App.Msdial.View.Dims"
xmlns:ui="clr-namespace:CompMs.Graphics.UI;assembly=ChartDrawing"
Expand All @@ -26,23 +27,29 @@
</ResourceDictionary>
</UserControl.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>

<Grid Grid.Column="0">

<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

<StackPanel Orientation="Horizontal"
Margin="8,8,8,0"
Grid.Row="0">
<!-- Row 1: 3 columns [A.1+A.2 | B structure | C properties] -->
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>

<!-- Column A: controls (rows 0-1) and the info panels (row 2) -->
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>

<!-- A.1: Change annotation buttons (row 0), tolerances + Search (row 1) -->
<StackPanel Grid.Row="0" Orientation="Horizontal" Margin="8,8,8,4">
<StackPanel.Resources>
<Style TargetType="Button">
<Setter Property="Width" Value="85"/>
Expand All @@ -60,9 +67,7 @@
<Button Content="Close" Click="Cancel_Click"/>

</StackPanel>

<StackPanel Margin="8"
Grid.Row="1">
<StackPanel Grid.Row="1" Margin="8,0,8,4">
<ui:LabeledContent PrependLabel="Select annotation method:"
HorizontalAlignment="Left"
Margin="4">
Expand Down Expand Up @@ -137,66 +142,31 @@
HorizontalAlignment="Left" VerticalAlignment="Center"/>
</StackPanel>

<WrapPanel Orientation="Horizontal"
Margin="8"
Grid.Row="2">
<ContentControl Content="{Binding File, Mode=OneTime}"
ContentTemplate="{StaticResource FileInfoTemplate}"
Margin="8"/>
<ContentControl Content="{Binding PeakSpot.PeakSpot.(do:IPeakSpotModel.MSIon), Mode=OneTime}"
ContentTemplate="{StaticResource PeakInfoTemplate}"
Margin="8"/>
<ContentControl Content="{Binding PeakSpot.PeakSpot.(do:IPeakSpotModel.Molecule), Mode=OneTime}"
ContentTemplate="{StaticResource AnnotationInfoTemplate}"
Margin="8"/>
</WrapPanel>

<Grid Margin="8" Grid.Row="3">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

<Label Content="Library information" FontStyle="Italic"
HorizontalAlignment="Left" VerticalAlignment="Top"
Grid.Row="0"/>
<DataGrid Name="DataGrid_LibraryInformation"
ItemsSource="{Binding Path=Compounds.Value, IsAsync=True}"
SelectedItem="{Binding SelectedCompound.Value, Mode=OneWayToSource}"
IsSynchronizedWithCurrentItem="True"
CanUserAddRows="False" CanUserDeleteRows="False"
CanUserReorderColumns="False" CanUserSortColumns="True"
SelectionUnit="FullRow" IsReadOnly="True"
HeadersVisibility="All" AutoGenerateColumns="False"
Grid.Row="1">
<DataGrid.ColumnHeaderStyle>
<Style TargetType="DataGridColumnHeader" >
<Setter Property="HorizontalContentAlignment" Value="Center"/>
</Style>
</DataGrid.ColumnHeaderStyle>

<DataGrid.Columns>
<DataGridTextColumn Header="Library ID" Width="*" Binding="{Binding Path=LibraryID}" IsReadOnly="True" />
<DataGridTextColumn Header="Name" Width="2*" Binding="{Binding Path=Name}" IsReadOnly="True" />
<DataGridTextColumn Header="Adduct" Width="*" Binding="{Binding Path=AdductName}" IsReadOnly="True" />
<DataGridTextColumn Header="Pre. m/z" Width="*" Binding="{Binding Path=PrecursorMz, StringFormat=N5}" IsReadOnly="True" />
<DataGridTextColumn Header="Dot prod." Width="*" Binding="{Binding Path=WeightedDotProduct, StringFormat=N2}" IsReadOnly="True" />
<DataGridTextColumn Header="Rev. prod." Width="*" Binding="{Binding Path=ReverseDotProduct, StringFormat=N2}" IsReadOnly="True" />
<DataGridTextColumn Header="Presense" Width="*" Binding="{Binding Path=Presence, StringFormat=N2}" IsReadOnly="True" />
<DataGridTextColumn Header="Instrument" Width="*" Binding="{Binding Path=Instrument}" IsReadOnly="True" />
<DataGridTextColumn Header="Comment" Width="2*" Binding="{Binding Path=Comment}" IsReadOnly="True" />
</DataGrid.Columns>
</DataGrid>
<!-- A.2: File | Peak | Annotation info panels side-by-side -->
<Grid Grid.Row="2" Margin="8,4,8,8">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ContentControl Grid.Column="0" Content="{Binding File, Mode=OneTime}"
ContentTemplate="{StaticResource FileInfoTemplate}" Margin="0,0,4,0"/>
<ContentControl Grid.Column="1" Content="{Binding PeakSpot.PeakSpot.(do:IPeakSpotModel.MSIon), Mode=OneTime}"
ContentTemplate="{StaticResource PeakInfoTemplate}" Margin="4,0"/>
<ContentControl Grid.Column="2" Content="{Binding PeakSpot.PeakSpot.(do:IPeakSpotModel.Molecule), Mode=OneTime}"
ContentTemplate="{StaticResource AnnotationInfoTemplate}" Margin="4,0,0,0"/>
</Grid>
</Grid>

</Grid>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition/>
</Grid.RowDefinitions>
<!-- Column B: Structure (no border) -->
<infoview:MoleculeStructureView Grid.Column="1"
DataContext="{Binding StructureViewModel}"
Margin="8"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"/>

<StackPanel Margin="5,10" Grid.Row="0">
<!-- Column C: Properties -->
<StackPanel Grid.Column="2" Margin="5,10,8,8">
<StackPanel.Resources>
<Style TargetType="ui:LabeledContent" x:Key="base">
<Setter Property="Template">
Expand Down Expand Up @@ -260,8 +230,56 @@
Content="{Binding Compounds.Value/TotalScore, StringFormat=N4, Mode=OneWay}"
Style="{StaticResource N4}"/>
</StackPanel>
</Grid>

<!-- Row 2: Library table + Spectrum mirror plot -->
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>

<!-- Column D: Library information table -->
<Grid Grid.Column="0" Margin="8">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

<Label Content="Library information" FontStyle="Italic"
HorizontalAlignment="Left" VerticalAlignment="Top"
Grid.Row="0"/>
<DataGrid Name="DataGrid_LibraryInformation"
ItemsSource="{Binding Path=Compounds.Value, IsAsync=True}"
SelectedItem="{Binding SelectedCompound.Value, Mode=OneWayToSource}"
IsSynchronizedWithCurrentItem="True"
CanUserAddRows="False" CanUserDeleteRows="False"
CanUserReorderColumns="False" CanUserSortColumns="True"
SelectionUnit="FullRow" IsReadOnly="True"
HeadersVisibility="All" AutoGenerateColumns="False"
Grid.Row="1">
<DataGrid.ColumnHeaderStyle>
<Style TargetType="DataGridColumnHeader" >
<Setter Property="HorizontalContentAlignment" Value="Center"/>
</Style>
</DataGrid.ColumnHeaderStyle>

<DataGrid.Columns>
<DataGridTextColumn Header="Library ID" Width="*" Binding="{Binding Path=LibraryID}" IsReadOnly="True" />
<DataGridTextColumn Header="Name" Width="2*" Binding="{Binding Path=Name}" IsReadOnly="True" />
<DataGridTextColumn Header="Adduct" Width="*" Binding="{Binding Path=AdductName}" IsReadOnly="True" />
<DataGridTextColumn Header="Pre. m/z" Width="*" Binding="{Binding Path=PrecursorMz, StringFormat=N5}" IsReadOnly="True" />
<DataGridTextColumn Header="Dot prod." Width="*" Binding="{Binding Path=WeightedDotProduct, StringFormat=N2}" IsReadOnly="True" />
<DataGridTextColumn Header="Rev. prod." Width="*" Binding="{Binding Path=ReverseDotProduct, StringFormat=N2}" IsReadOnly="True" />
<DataGridTextColumn Header="Presense" Width="*" Binding="{Binding Path=Presence, StringFormat=N2}" IsReadOnly="True" />
<DataGridTextColumn Header="Instrument" Width="*" Binding="{Binding Path=Instrument}" IsReadOnly="True" />
<DataGridTextColumn Header="Comment" Width="2*" Binding="{Binding Path=Comment}" IsReadOnly="True" />
</DataGrid.Columns>
</DataGrid>
</Grid>

<chart:MsSpectrumView DataContext="{Binding MsSpectrumViewModel, Mode=OneTime}" Margin="0,0,5,0" Grid.Row="1"/>
<!-- Column E: Spectrum mirror plot -->
<chart:MsSpectrumView Grid.Column="1" DataContext="{Binding MsSpectrumViewModel, Mode=OneTime}" Margin="5"/>
</Grid>
</Grid>
</UserControl>
Loading
Loading