Skip to content

Commit

Permalink
Merge pull request #448 from xchem/staging
Browse files Browse the repository at this point in the history 
Merge staging into production
  • Loading branch information
@alanbchristie
alanbchristie authored Sep 13, 2024
2 parents ce4fc41 + 3169e8f commit 2d0dd39
Show file tree
Hide file tree
Showing 125 changed files with 7,868 additions and 3,482 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/build-staging.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ env:
#
# For Jobs conditional on the presence of a secret see this Gist...
# https://gist.github.com/jonico/24ffebee6d2fa2e679389fac8aef50a3
BE_IMAGE_TAG: stable
BE_IMAGE_TAG: latest
BE_NAMESPACE: xchem
FE_IMAGE_TAG: latest
FE_NAMESPACE: xchem
Expand Down
Binary file added M2MS_Fragalysis_front-end_requirements_v0.5.docx
View file
Binary file not shown.
6 changes: 4 additions & 2 deletions docker-compose.dev.vector.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,10 +53,10 @@ services:
start_period: 10s
web:
container_name: web_dock
# image: xchem/fragalysis-stack:latest
image: xchem/fragalysis-stack:latest
# image: alanbchristie/fragalysis-backend:1187.3
# image: boriskovarm2ms/fragalysis-stack:experiment2
image: kaliif/fragalysis-backend:latest
# image: kaliif/fragalysis-backend:latest
command: /bin/bash /code/launch-stack.sh
volumes:
- ../data/logs:/code/logs/
Expand Down Expand Up @@ -106,6 +106,8 @@ services:
PROXY_FORWARDED_PROTO_HEADER: 'http'
LEGACY_URL: 'https://fragalysis.diamond.ac.uk'
DEPLOYMENT_MODE: 'development'
DISABLE_RESTRICT_PROPOSALS_TO_MEMBERSHIP: 'True'
PUBLIC_TAS: 'lb18145-1'
# INFECTIONS: 'structure-download'
depends_on:
database:
Expand Down
206 changes: 152 additions & 54 deletions js/components/datasets/compoundSetList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
*/
import React, { useEffect, memo, useState, useCallback } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { clearDatasetSettings, initializeDatasetFilter } from './redux/dispatchActions';
import { clearDatasetSettings, getInspirationsForMol, initializeDatasetFilter } from './redux/dispatchActions';
import { setExpandCompoundSets, setDataset, setSelectedDatasetIndex, setUpdatedDatasets } from './redux/actions';
import DatasetMoleculeList from './datasetMoleculeList';
import { makeStyles, Table, TableBody, TableCell, TableHead, TableRow, Tooltip } from '@material-ui/core';
Expand All @@ -13,6 +13,8 @@ import CloudDownloadOutlinedIcon from '@mui/icons-material/CloudDownloadOutlined
import SearchField from '../common/Components/SearchField';
import { base_url } from '../routes/constants';
import { METHOD, api } from '../../utils/api';
import { compoundsColors } from '../preview/compounds/redux/constants';
import { downloadRHSCSVExport } from '../../utils/csv';

const useStyles = makeStyles(theme => ({
table: {
Expand Down Expand Up @@ -63,6 +65,23 @@ export const CompoundSetList = () => {
const scoreDatasetMap = useSelector(state => state.datasetsReducers.scoreDatasetMap);
const moleculeLists = useSelector(state => state.datasetsReducers.moleculeLists);

const allInspirations = useSelector(state => state.datasetsReducers.allInspirations);
const compoundColors = useSelector(state => state.datasetsReducers.compoundColorByDataset);

const blueInput = useSelector(state => state.previewReducers.compounds[compoundsColors.blue.key]);
const redInput = useSelector(state => state.previewReducers.compounds[compoundsColors.red.key]);
const greenInput = useSelector(state => state.previewReducers.compounds[compoundsColors.green.key]);
const purpleInput = useSelector(state => state.previewReducers.compounds[compoundsColors.purple.key]);
const apricotInput = useSelector(state => state.previewReducers.compounds[compoundsColors.apricot.key]);

const inputs = {
[compoundsColors.blue.key]: blueInput,
[compoundsColors.red.key]: redInput,
[compoundsColors.green.key]: greenInput,
[compoundsColors.purple.key]: purpleInput,
[compoundsColors.apricot.key]: apricotInput
};

const [isExpanded, setIsExpanded] = useState(false);
const [searchString, setSearchString] = useState(null);
const [defaultSelectedValue, setDefaultSelectedValue] = useState();
Expand All @@ -74,13 +93,20 @@ export const CompoundSetList = () => {
* @param {*} scoreName
* @returns {string}
*/
const getCommonScore = useCallback((datasetID, scoreName) => {
let value = '';
if (datasetID && scoreDatasetMap.hasOwnProperty(datasetID) && scoreDatasetMap[datasetID].hasOwnProperty(scoreName)) {
value = scoreDatasetMap[datasetID][scoreName].description;
}
return value;
}, [scoreDatasetMap]);
const getCommonScore = useCallback(
(datasetID, scoreName) => {
let value = '';
if (
datasetID &&
scoreDatasetMap.hasOwnProperty(datasetID) &&
scoreDatasetMap[datasetID].hasOwnProperty(scoreName)
) {
value = scoreDatasetMap[datasetID][scoreName].description;
}
return value;
},
[scoreDatasetMap]
);

/**
* Download molecule list of given dataset as CSV file
Expand All @@ -91,34 +117,107 @@ export const CompoundSetList = () => {
const listOfMols = [];
const moleculeList = moleculeLists[datasetID] || [];

let maxNumOfInspirations = 0;
moleculeList.forEach(cmp => {
const inspirations = getInspirationsForMol(allInspirations, datasetID, cmp.id);
if (inspirations?.length > maxNumOfInspirations) {
maxNumOfInspirations = inspirations.length;
}
});

let colorsTemplate = {};
moleculeList.forEach(compound => {
let shoppingCartColors = [];
const cmpColorsForDataset = compoundColors[datasetID];
if (cmpColorsForDataset) {
shoppingCartColors = cmpColorsForDataset[compound.id];
shoppingCartColors?.forEach(color => {
if (!colorsTemplate.hasOwnProperty(color)) {
colorsTemplate[color] = '';
if (inputs.hasOwnProperty(color) && inputs[color]) {
colorsTemplate[`${color}-text`] = inputs[color];
}
}
});
}
});

moleculeList.forEach(molecule => {
let molObj = {};

molObj['smiles'] = molecule.smiles;
molObj['name'] = molecule.name;

if (molecule.hasOwnProperty('numerical_scores')) {
Object.keys(molecule.numerical_scores).forEach(key => {
molObj[key] = molecule.numerical_scores[key];
});
}
if (molecule.hasOwnProperty('text_scores')) {
Object.keys(molecule.text_scores).forEach(key => {
molObj[key] = molecule.text_scores[key];
});
}

if (maxNumOfInspirations) {
const inspirations = getInspirationsForMol(allInspirations, datasetID, molecule.id);
for (let i = 0; i < maxNumOfInspirations; i++) {
if (inspirations?.[i]) {
molObj[`inspiration_${i + 1}`] = inspirations[i].code;
} else {
molObj[`inspiration_${i + 1}`] = '';
}
}
}

let shoppingCartColors = [];

const cmpColorsForDataset = compoundColors[datasetID];
if (cmpColorsForDataset) {
shoppingCartColors = cmpColorsForDataset[molecule.id];
let colorsTemplateCopy = { ...colorsTemplate };
shoppingCartColors?.forEach(color => {
colorsTemplateCopy[color] = true;
});

Object.keys(colorsTemplateCopy)
.filter(key => key.includes('-text'))
.forEach(key => {
const color = key.split('-')[0];
if (colorsTemplateCopy.hasOwnProperty(color) && !colorsTemplateCopy[color]) {
colorsTemplateCopy[key] = '';
}
});

molObj = { ...molObj, ...colorsTemplateCopy };
}

listOfMols.push(molObj);
});

const reqObj = { title: datasetID, dict: listOfMols };
const jsonString = JSON.stringify(reqObj);

api({
url: `${base_url}/api/dicttocsv/`,
method: METHOD.POST,
data: jsonString
}).then(resp => {
var anchor = document.createElement('a');
anchor.href = `${base_url}/api/dicttocsv/?file_url=${resp.data['file_url']}`;
anchor.target = '_blank';
anchor.download = 'download';
anchor.click();
});
const fileName = `${datasetID}.csv`;
const reqObj = { title: datasetID, filename: fileName, dict: listOfMols };
downloadRHSCSVExport(reqObj);
// const jsonString = JSON.stringify(reqObj);

// api({
// url: `${base_url}/api/dicttocsv/`,
// method: METHOD.POST,
// data: jsonString
// }).then(resp => {
// var anchor = document.createElement('a');
// anchor.href = `${base_url}/api/dicttocsv/?file_url=${resp.data['file_url']}`;
// anchor.target = '_blank';
// anchor.download = `${fileName}`; //'download';
// anchor.click();
// });
};

useEffect(() => {
if (selectedDatasetIndex === 0) {
const filteredDataset = searchString ? customDatasets.filter(dataset => dataset.title.toLowerCase().includes(searchString.toLowerCase())) : customDatasets;
const filteredDataset = searchString
? customDatasets.filter(dataset => dataset.title.toLowerCase().includes(searchString.toLowerCase()))
: customDatasets;
const newDataset = filteredDataset.map((dataSet, index) =>
index === 0 ? { ...dataSet, visibility: true } : { ...dataSet, visibility: false }
);
Expand All @@ -138,7 +237,9 @@ export const CompoundSetList = () => {
};

const handleChangeVisibility = index => {
const filteredDataset = searchString ? customDatasets.filter(dataset => dataset.title.toLowerCase().includes(searchString.toLowerCase())) : customDatasets;
const filteredDataset = searchString
? customDatasets.filter(dataset => dataset.title.toLowerCase().includes(searchString.toLowerCase()))
: customDatasets;
const newDataset = filteredDataset.map((dataSetValue, i) =>
i === index ? { ...dataSetValue, visibility: true } : { ...dataSetValue, visibility: false }
);
Expand Down Expand Up @@ -171,30 +272,14 @@ export const CompoundSetList = () => {
<Table className={classes.table}>
<TableHead>
<TableRow style={{ padding: 0 }}>
<TableCell style={{ width: 25, padding: 0 }}>
{/* Select */}
</TableCell>
<TableCell style={{ width: 60, padding: 0 }}>
Name
</TableCell>
<TableCell style={{ width: 15, padding: 0 }}>
#
</TableCell>
<TableCell style={{ width: 70, padding: 0 }}>
Submitter
</TableCell>
<TableCell style={{ width: 55, padding: 0 }}>
Institution
</TableCell>
<TableCell style={{ width: 60, padding: 0 }}>
Date
</TableCell>
<TableCell style={{ width: 70, padding: 0 }}>
Method
</TableCell>
<TableCell style={{ width: 30, padding: 0 }}>
CSV
</TableCell>
<TableCell style={{ width: 25, padding: 0 }}>{/* Select */}</TableCell>
<TableCell style={{ width: 60, padding: 0 }}>Name</TableCell>
<TableCell style={{ width: 15, padding: 0 }}>#</TableCell>
<TableCell style={{ width: 70, padding: 0 }}>Submitter</TableCell>
<TableCell style={{ width: 55, padding: 0 }}>Institution</TableCell>
<TableCell style={{ width: 60, padding: 0 }}>Date</TableCell>
<TableCell style={{ width: 70, padding: 0 }}>Method</TableCell>
<TableCell style={{ width: 30, padding: 0 }}>CSV</TableCell>
</TableRow>
</TableHead>
<TableBody>
Expand All @@ -220,23 +305,36 @@ export const CompoundSetList = () => {
</TableCell>
</Tooltip>
<Tooltip title="Number of compounds">
<TableCell className={classes.tableCell} style={{ maxWidth: 15 }}>{moleculeList.length}</TableCell>
<TableCell className={classes.tableCell} style={{ maxWidth: 15 }}>
{moleculeList.length}
</TableCell>
</Tooltip>
<Tooltip title={getCommonScore(dataset.id, 'submitter_name')}>
<TableCell className={classes.tableCell} style={{ maxWidth: 100 }}>{getCommonScore(dataset.id, 'submitter_name')}</TableCell>
<TableCell className={classes.tableCell} style={{ maxWidth: 100 }}>
{getCommonScore(dataset.id, 'submitter_name')}
</TableCell>
</Tooltip>
<Tooltip title={getCommonScore(dataset.id, 'submitter_institution')}>
<TableCell className={classes.tableCell} style={{ maxWidth: 70 }}>{getCommonScore(dataset.id, 'submitter_institution')}</TableCell>
<TableCell className={classes.tableCell} style={{ maxWidth: 70 }}>
{getCommonScore(dataset.id, 'submitter_institution')}
</TableCell>
</Tooltip>
<Tooltip title={getCommonScore(dataset.id, 'generation_date')}>
<TableCell className={classes.tableCell} style={{ maxWidth: 60 }}>{getCommonScore(dataset.id, 'generation_date')}</TableCell>
<TableCell className={classes.tableCell} style={{ maxWidth: 60 }}>
{getCommonScore(dataset.id, 'generation_date')}
</TableCell>
</Tooltip>
<Tooltip title={getCommonScore(dataset.id, 'method')}>
<TableCell className={classes.tableCell} style={{ maxWidth: 150 }}>{getCommonScore(dataset.id, 'method')}</TableCell>
<TableCell className={classes.tableCell} style={{ maxWidth: 150 }}>
{getCommonScore(dataset.id, 'method')}
</TableCell>
</Tooltip>
<TableCell style={{ padding: 0 }}>
<Tooltip title="Download as CSV">
<CloudDownloadOutlinedIcon className={classes.downloadIcon} onClick={() => downloadCSV(dataset.id)} />
<CloudDownloadOutlinedIcon
className={classes.downloadIcon}
onClick={() => downloadCSV(dataset.id)}
/>
</Tooltip>
</TableCell>
</TableRow>
Expand Down
Loading

0 comments on commit 2d0dd39

Please sign in to comment.