Skip to content

Commit

Permalink
ui updates and scaff_net does not work for now
Browse files Browse the repository at this point in the history
  • Loading branch information
syedzayyan committed Mar 23, 2024
1 parent 62078be commit 92e358b
Show file tree
Hide file tree
Showing 8 changed files with 204 additions and 27 deletions.
17 changes: 8 additions & 9 deletions app/tools/activity/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,20 @@
import { useContext } from "react";
import LigandContext from "../../../context/LigandContext";
import Histogram from "../../../components/tools/toolViz/Histogram";
import { mean, median, mode } from "mathjs";
import { mean, median, mode, round } from "mathjs";

export default function Activity(){
const {ligand} = useContext(LigandContext);
export default function Activity() {
const { ligand } = useContext(LigandContext);
var data = ligand.map((obj) => obj["neg_log_activity_column"]);

return(
return (
<div className="tools-container">
<Histogram data = {data} xLabel="Activity" yLabel="Count" toolTipData={ligand}/>
<Histogram data={data} xLabel="Activity" yLabel="Count" toolTipData={ligand}>
<span>Mean : {round(mean(data), 2) } || Median : {round(median(data), 2)} || Mode : {round(mode(data), 2)}</span>
</Histogram>
<div className="">
<span>Activity Stats</span>
<br />
<span>Mean : {mean(data)} || Median : {median(data)} || Mode : {mode(data)}</span>
</div>

</div>
)
}
13 changes: 6 additions & 7 deletions app/tools/scaff_net/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import TabWrapper, {
Tabs,
} from "../../../components/ui-comps/TabbedComponents";
import ScaffNetDets from "../../../components/tools/toolComp/ScaffNetDets";
import ScaffoldSettings from "../../../components/tools/toolComp/ScaffoldSettings";

export default function DisplayGraph() {
const { rdkit } = useContext(RDKitContext);
Expand All @@ -22,10 +23,10 @@ export default function DisplayGraph() {
useEffect(() => {
setLoaded(false);
setTimeout(() => {
let smiles_list = ligand.map((x) => x.canonical_smiles);
const network = scaffold_net_chunking_method(smiles_list, 50, rdkit);
const graph = loadGraphFromScaffNet(network, smiles_list, rdkit);
setGraph(graph);
// let smiles_list = ligand.map((x) => x.canonical_smiles);
// const network = scaffold_net_chunking_method(smiles_list, 50, rdkit);
// const graph = loadGraphFromScaffNet(network, smiles_list, rdkit);
// setGraph(graph);
setLoaded(true);
}, 80);
}, []);
Expand All @@ -43,9 +44,7 @@ export default function DisplayGraph() {
<h1>Scaffold Network</h1>
<TabWrapper>
<Tabs title="Network Settings">
<div>
<p>Settings go here</p>
</div>
<ScaffoldSettings />
</Tabs>
<Tabs title="Network Details">
<ScaffNetDets graph={graph} />
Expand Down
95 changes: 95 additions & 0 deletions components/tools/toolComp/ScaffoldSettings.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
import { useForm } from "react-hook-form"
import RDKitContext from "../../../context/RDKitContext"
import { useContext } from "react"

type ScaffoldNetParams = {
includeGenericScaffolds: boolean
includeGenericBondScaffolds: boolean
includeScaffoldsWithoutAttachments: boolean
includeScaffoldsWithAttachments: boolean
keepOnlyFirstFragment: boolean
pruneBeforeFragmenting: boolean
flattenIsotopes: boolean
flattenChirality: boolean
flattenKeepLargest: boolean
collectMolCounts: boolean
bondBreakersRxns: string
}

export default function ScaffoldSettings(){
const { rdkit } = useContext(RDKitContext);
const { register, handleSubmit, watch, formState: { errors }, } = useForm<ScaffoldNetParams>();

const onSubmit = (data: ScaffoldNetParams) => {
console.log(data);
try{
var scaffold_net_ins = new rdkit.ScaffoldNetwork();
scaffold_net_ins.update_scaffold_params(true, true, true, true, true, true, true, true, true, true, []);
}catch(e){
console.log(e);
}
}

return (
<div>
<form className="ml-forms" onSubmit={handleSubmit(onSubmit)}>
<label>
<input type="checkbox" name="includeGenericScaffolds" {...register("includeGenericScaffolds")} defaultChecked/>
includeGenericScaffolds
</label>

<label>
<input type="checkbox" name="includeGenericBondScaffolds" {...register("includeGenericBondScaffolds")} defaultChecked/>
includeGenericBondScaffolds
</label>

<label>
<input type="checkbox" name="includeScaffoldsWithoutAttachments" {...register("includeScaffoldsWithoutAttachments")} defaultChecked/>
includeScaffoldsWithoutAttachments
</label>

<label>
<input type="checkbox" name="includeScaffoldsWithAttachments" {...register("includeScaffoldsWithAttachments")} defaultChecked/>
includeScaffoldsWithAttachments
</label>

<label>
<input type="checkbox" name="keepOnlyFirstFragment" {...register("keepOnlyFirstFragment")} defaultChecked/>
keepOnlyFirstFragment
</label>

<label>
<input type="checkbox" name="pruneBeforeFragmenting" {...register("pruneBeforeFragmenting")} defaultChecked/>
pruneBeforeFragmenting
</label>

<label>
<input type="checkbox" name="flattenIsotopes" {...register("flattenIsotopes")} defaultChecked/>
flattenIsotopes
</label>

<label>
<input type="checkbox" name="flattenChirality" {...register("flattenChirality")} defaultChecked/>
flattenChirality
</label>

<label>
<input type="checkbox" name="flattenKeepLargest" {...register("flattenKeepLargest")} defaultChecked/>
flattenKeepLargest
</label>

<label>
<input type="checkbox" name="collectMolCounts" {...register("collectMolCounts")} defaultChecked/>
collectMolCounts
</label>

<label>
bondBreakersRxns &nbsp;
<input className = "input" type="text" name="bondBreakersRxns" {...register("bondBreakersRxns")}/>
</label>

<input type="submit" className = "button" value="Run Network"/>
</form>
</div>
)
}
11 changes: 5 additions & 6 deletions components/tools/toolViz/BarChart.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { useEffect, useRef, useState } from 'react';
import * as d3 from 'd3';
import Screenshotter from '../../utils/d3toPNG';

const GroupedBarChart = ({ mae, r2 }) => {
// Check if both mae and r2 are provided and have the same length
Expand Down Expand Up @@ -28,16 +29,13 @@ const GroupedBarChart = ({ mae, r2 }) => {
}
const margin = { top: 40, right: 60, bottom: 40, left: 70 },
width = dimensions.width - margin.left - margin.right,
height = dimensions.height - margin.top - margin.bottom;
height = Math.min(dimensions.height, window.innerHeight - 20) - margin.top - margin.bottom;

const svgElement = d3.select(svgRef.current).select("svg");
d3.select(svgRef.current).selectAll('*').remove();
if (svgElement.empty()) {
// append the svg object to the body of the page
const svg = d3.select(svgRef.current)
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);

Expand Down Expand Up @@ -121,9 +119,10 @@ const GroupedBarChart = ({ mae, r2 }) => {

return (
<div className='container' ref={parentRef}>
<div id="my_dataviz" ref={svgRef}>
<svg id="my_dataviz" ref={svgRef} height={Math.min(dimensions.height, window.innerHeight - 20)} width={dimensions.width}>
{/* SVG will be rendered here */}
</div>
</svg>
<Screenshotter svgRef={svgRef} />
</div>
);
};
Expand Down
14 changes: 13 additions & 1 deletion components/tools/toolViz/Histogram.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,29 @@ import * as d3 from "d3";
import ModalComponent from "../../ui-comps/ModalComponent";
import Card from "./Card";
import MoleculeStructure from "../toolComp/MoleculeStructure";
import Screenshotter from "../../utils/d3toPNG";

const MARGIN = { top: 30, right: 30, bottom: 50, left: 80 };
const BUCKET_NUMBER = 70;
const BUCKET_PADDING = 1;

type d_bin = (typeof d3.bins)[number];

type HistogramProps = {
data: number[];
xLabel?: string;
yLabel?: string;
toolTipData?: any[]; // Update the type as needed
children?: React.ReactNode; // Make children optional
};

export default function Histogram({
data,
xLabel = "",
yLabel = "",
toolTipData = [],
}) {
children
} : HistogramProps) {
const [dimensions, setDimensions] = useState({ width: 300, height: 300 });
const [modalState, setModalState] = useState(false);
const [modalDets, setModalDets] = useState([]);
Expand Down Expand Up @@ -162,9 +172,11 @@ export default function Histogram({
} else {
return (
<div className="container" ref={parentRef}>
{children}
<svg width={width} height={height} ref={svgRef}>
<g ref={svgRef}></g>
</svg>
<Screenshotter svgRef={svgRef}/>
{modalState && (
<ModalComponent
isOpen={modalState}
Expand Down
10 changes: 6 additions & 4 deletions components/tools/toolViz/ScatterPlot.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { Tooltip } from './ToolTip';
import ModalComponent from '../../ui-comps/ModalComponent';
import MoleculeStructure from '../toolComp/MoleculeStructure';
import { randomInt } from 'mathjs';
import Screenshotter from '../../utils/d3toPNG';

const Scatterplot = ({ data, colorProperty = [], hoverProp = [], xAxisTitle, yAxisTitle, id = [] }) => {
const margin = { top: 10, right: 20, bottom: 60, left: 70 };
Expand Down Expand Up @@ -74,9 +75,6 @@ const Scatterplot = ({ data, colorProperty = [], hoverProp = [], xAxisTitle, yAx
d3.select(svgRef.current).selectAll('*').remove();

const svg = d3.select(svgRef.current)
.append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', `translate(${margin.left},${margin.top})`);

Expand Down Expand Up @@ -198,7 +196,11 @@ const Scatterplot = ({ data, colorProperty = [], hoverProp = [], xAxisTitle, yAx
return (
<div className='container' ref={parentRef}>
{colorProperty.length > 0 && <D3ColorLegend colorScale={colorScaler} width={dimensions.width} />}
<div id="dataviz_axisZoom" ref={svgRef}></div>
<svg id="dataviz_axisZoom" ref={svgRef}
height={Math.min(dimensions.height, window.innerHeight - 100)}
width={dimensions.width}
></svg>
<Screenshotter svgRef={svgRef} />
<Tooltip interactionData={details} />
<ModalComponent width='50' isOpen={modalState} closeModal={() => setModalState(false)}>
<div className='ml-forms'>
Expand Down
68 changes: 68 additions & 0 deletions components/utils/d3toPNG.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import React from 'react';

export default function Screenshotter({ svgRef }) {
const handleConvertAndDownload = (type) => {
if (svgRef.current) {
const svgNode = svgRef.current;

if (type === 'png') {
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');

const bbox = svgNode.getBBox();

canvas.width = bbox.width + 100;
canvas.height = bbox.height + 100;

const data = new XMLSerializer().serializeToString(svgNode);
const img = new Image();
img.src = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(data)));

img.onload = () => {
if (context) {
context.drawImage(img, 0, 0);

const pngDataUrl = canvas.toDataURL('image/png');

const downloadLink = document.createElement('a');
downloadLink.download = 'image.png';
downloadLink.href = pngDataUrl;
downloadLink.style.display = 'none';

document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
}
};
} else if (type === 'svg') {
const svgData = new XMLSerializer().serializeToString(svgNode);
const blob = new Blob([svgData], { type: 'image/svg+xml' });
const url = URL.createObjectURL(blob);

const downloadLink = document.createElement('a');
downloadLink.download = 'image.svg';
downloadLink.href = url;
downloadLink.style.display = 'none';

document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);

URL.revokeObjectURL(url);
}
}
};

return (
<details open = {false}>
<summary>Download chart as image</summary>
<button className='button' onClick={() => handleConvertAndDownload('png')}>
Download PNG
</button>
&nbsp;
<button className='button' onClick={() => handleConvertAndDownload('svg')}>
Download SVG
</button>
</details>
);
}
3 changes: 3 additions & 0 deletions styles/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@
@import "./tabs.css";
@import "./tags.css";

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

html,
body,
div,
Expand Down Expand Up @@ -92,6 +94,7 @@ video {
padding: 0;
border: 0;
vertical-align: baseline;
font-family: 'Montserrat', sans-serif;
}

/* HTML5 display-role reset for older browsers */
Expand Down

0 comments on commit 92e358b

Please sign in to comment.