Skip to content

Commit

Permalink
made ui changes and made labels bigger
Browse files Browse the repository at this point in the history
  • Loading branch information
@syedzayyan
syedzayyan committed Mar 20, 2024
1 parent b8a58e9 commit 370de48
Show file tree
Hide file tree
Showing 7 changed files with 654 additions and 35 deletions.
78 changes: 56 additions & 22 deletions app/tools/dim-red/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ import Scatterplot from "../../../components/tools/toolViz/ScatterPlot";
import { useSearchParams } from "next/navigation";
import Loader from "../../../components/ui-comps/Loader";

export default function DimRed(){
export default function DimRed() {

const {ligand} = useContext(LigandContext);
const { ligand, setLigand } = useContext(LigandContext);
const { pyodide } = useContext(PyodideContext);
const [pca, setPCA] = useState<any[]>([])
const [whatDimRed, setWhatDimRef] = useState(window.location.href.split("#")[1])
Expand All @@ -23,26 +23,49 @@ export default function DimRed(){
setWhatDimRef(window.location.href.split("#")[1]);
if (window.location.href.split("#")[1] === "pca") {
globalThis.opts = 1
} else if (window.location.href.split("#")[1] === "tsne"){
if (pcaCorrectTSNE){
} else if (window.location.href.split("#")[1] === "tsne") {
if (pcaCorrectTSNE) {
globalThis.opts = 2
} else {
globalThis.opts = 3
}
} else {
throw new Error("opts is not properly set.");
}
setLoaded(false);
setTimeout(() => {runDimRed()}, 1000);
}
setLoaded(false);
setTimeout(() => {
const previousDataExistsPCA = ligand.some(obj => obj.tsne);
const previousDataExiststSNE = ligand.some(obj => obj.tsne);
const dimRedType = window.location.href.split("#")[1];

if (!previousDataExistsPCA && !previousDataExiststSNE) {
runDimRed();
} else {
if (dimRedType === "pca") {
if (previousDataExistsPCA) {
setPCA(ligand.map((obj) => obj.pca));
} else {
runDimRed();
}
} else if (dimRedType === "tsne") {
if (previousDataExistsPCA) {
setPCA(ligand.map((obj) => obj.tsne));
} else {
runDimRed();
}
}
setLoaded(true);
}
}, 100);
}, [useSearchParams()])

var data = ligand.map((obj) => obj.neg_log_activity_column);
var smi = ligand.map((obj) => obj.canonical_smiles);
var id = ligand.map((obj) => obj.id);
globalThis.fp = ligand.map((obj) => obj.fingerprint);

async function runDimRed(){
setLoaded(false);
async function runDimRed() {
setLoaded(false);
await pyodide.runPython(`
from sklearn.decomposition import PCA
from sklearn.manifold import TSNE
Expand All @@ -66,33 +89,44 @@ export default function DimRed(){
`)
const pca_result = (globalThis.pca).toJs();;
const pca_data_in = pca_result.map(([x, y]) => ({ x, y }));
setPCA(pca_data_in)
let new_ligand = ligand.map((obj, index) => {
if (globalThis.opts === 1) {
return { ...obj, pca: pca_data_in[index] };
} else {
return { ...obj, tsne: pca_data_in[index] };
}
});
setLigand(new_ligand);
setPCA(pca_data_in);
setLoaded(true)
}
if (loaded) {
return(
return (
<div className="tools-container" ref={containerRef}>
{whatDimRed === "pca" && (
<>
</>
)}
{whatDimRed === "tsne" && (
<details open = {pca.length < 0}>
<details open={pca.length < 0}>
<summary>tSNE settings</summary>
<form>
<input type = "checkbox" defaultChecked onChange = {(e) => {setPCACorrectTSNE(e.target.checked)}}></input>
<label htmlFor="tsne_perplexity">PCA Correction</label>
<input type="checkbox" defaultChecked onChange={(e) => { setPCACorrectTSNE(e.target.checked) }}></input>
<br />
<label htmlFor="tsne_perplexity">Perplexity</label>
<input className="input" id = "tsne_perplexity"></input>
<input className="input" id="tsne_perplexity"></input>
<br />
<label htmlFor="tsne_n_iter">Number of Iterations</label>
<input className="input" id = "tsne_n_iter"></input>
<input className="input" id="tsne_n_iter"></input>
<br />
<button className="button" onClick={() => runDimRed()}>Run tSNE</button>
</form>
</form>
</details>

)}
{pca.length > 0 &&
<Scatterplot
data = {pca}
{pca.length > 0 &&
<Scatterplot
data={pca}
colorProperty={data}
hoverProp={smi}
xAxisTitle={"Principal Component 1"}
Expand All @@ -101,11 +135,11 @@ export default function DimRed(){
/>
}
</div>
)
)
} else {
return (
<div className="tools-container">
<Loader loadingText="Doing Dimension Reduction Magic"/>
<Loader loadingText="Doing Dimension Reduction Magic" />
</div>
)
}
Expand Down
6 changes: 4 additions & 2 deletions components/tools/toolViz/BarChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const GroupedBarChart = ({ mae, r2 }) => {
if (dimensions.width === 0 && dimensions.height === 0){
getSvgContainerSize();
}
const margin = { top: 10, right: 30, bottom: 10, left: 70 },
const margin = { top: 40, right: 60, bottom: 40, left: 70 },
width = dimensions.width - margin.left - margin.right,
height = dimensions.height - margin.top - margin.bottom;

Expand Down Expand Up @@ -54,13 +54,15 @@ const GroupedBarChart = ({ mae, r2 }) => {
.padding([0.2]);
svg.append("g")
.attr("transform", `translate(0, ${height})`)
.style('font-size', '1.2em')
.call(d3.axisBottom(x).tickSize(0));

// Add Y axis
const y = d3.scaleLinear()
.domain([0, d3.max([...mae, ...r2])])
.range([height, 0]);
svg.append("g")
.style('font-size', '1.2em')
.call(d3.axisLeft(y));

// Another scale for subgroup position
Expand Down Expand Up @@ -93,7 +95,7 @@ const GroupedBarChart = ({ mae, r2 }) => {

// Add legend
const legend = svg.append("g")
.attr("transform", `translate(${width - 30}, 0)`);
.attr("transform", `translate(${width - 15}, 0)`);

legend.selectAll("rect")
.data(subgroups)
Expand Down
16 changes: 11 additions & 5 deletions components/tools/toolViz/Histogram.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import ModalComponent from "../../ui-comps/ModalComponent";
import Card from "./Card";
import MoleculeStructure from "../toolComp/MoleculeStructure";

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

Expand Down Expand Up @@ -91,33 +91,39 @@ export default function Histogram({
svgElement
.append("g")
.attr("transform", `translate(${MARGIN.left},${height - MARGIN.bottom})`)
.call(xAxisGenerator);
.call(xAxisGenerator)
.selectAll('text') // Select all the text elements for x-axis ticks
.style('font-size', '1.5em');

// Add X-axis label
svgElement
.append("text")
.attr(
"transform",
`translate(${width / 2},${height - MARGIN.bottom + 30})`,
`translate(${width / 2},${height - MARGIN.bottom + 45})`,
)
.style("text-anchor", "middle")
.style('font-size', '1.5em')
.text(xLabel);

// Create Y-axis and position it
const yAxisGenerator = d3.axisLeft(yScale);
svgElement
.append("g")
.attr("transform", `translate(${MARGIN.left},${MARGIN.top})`)
.call(yAxisGenerator);
.call(yAxisGenerator)
.selectAll('text') // Select all the text elements for x-axis ticks
.style('font-size', '1.5em');

// Add Y-axis label
svgElement
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", MARGIN.left - 40)
.attr("y", MARGIN.left - 70)
.attr("x", 0 - height / 2)
.attr("dy", "1em")
.style("text-anchor", "middle")
.style('font-size', '1.5em')
.text(yLabel);

svgElement
Expand Down
26 changes: 20 additions & 6 deletions components/tools/toolViz/ScatterPlot.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import MoleculeStructure from '../toolComp/MoleculeStructure';
import { randomInt } from 'mathjs';

const Scatterplot = ({ data, colorProperty = [], hoverProp = [], xAxisTitle, yAxisTitle, id = [] }) => {
const margin = { top: 10, right: 30, bottom: 30, left: 60 };
const margin = { top: 10, right: 20, bottom: 60, left: 70 };

const parentRef = useRef(null);
const svgRef = useRef();
Expand Down Expand Up @@ -52,7 +52,7 @@ const Scatterplot = ({ data, colorProperty = [], hoverProp = [], xAxisTitle, yAx
}, []);

useEffect(() => {
if (dimensions.width === 0 && dimensions.height === 0){
if (dimensions.width === 0 && dimensions.height === 0) {
getSvgContainerSize();
}
const width = dimensions.width - margin.left - margin.right;
Expand Down Expand Up @@ -100,6 +100,12 @@ const Scatterplot = ({ data, colorProperty = [], hoverProp = [], xAxisTitle, yAx
xAxis.call(d3.axisBottom(newX));
yAxis.call(d3.axisLeft(newY));

yAxis.selectAll('text') // Select all the text elements for x-axis ticks
.style('font-size', '1.5em');

xAxis.selectAll('text') // Select all the text elements for x-axis ticks
.style('font-size', '1.5em');

scatter
.selectAll('circle')
.attr('cx', (d) => newX(d.x))
Expand All @@ -111,13 +117,19 @@ const Scatterplot = ({ data, colorProperty = [], hoverProp = [], xAxisTitle, yAx
.range([0, width]);
const xAxis = svg.append('g')
.attr('transform', `translate(0,${height})`)
.call(d3.axisBottom(x));
.call(d3.axisBottom(x))

xAxis.selectAll('text') // Select all the text elements for x-axis ticks
.style('font-size', '1.5em');

const y = d3.scaleLinear()
.domain([d3.min(data, d => d.y), d3.max(data, d => d.y)])
.range([height, 0]);
const yAxis = svg.append('g')
.call(d3.axisLeft(y));
.call(d3.axisLeft(y))

yAxis.selectAll('text') // Select all the text elements for x-axis ticks
.style('font-size', '1.5em');

svg.append('defs').append('clipPath')
.attr('id', 'clip')
Expand All @@ -143,18 +155,20 @@ const Scatterplot = ({ data, colorProperty = [], hoverProp = [], xAxisTitle, yAx
.on('click', hoverProp.length > 0 ? (_, d) => findModalDetails(event, d) : null); // Conditionally attach click handler

svg.append('text')
.attr('transform', `translate(${width / 2},${height + margin.top + 20})`)
.attr('transform', `translate(${width / 2},${height + margin.top + 40})`)
.style('text-anchor', 'middle')
.style('fill', 'var(--text-color)')
.style('font-size', '1.2em')
.text(xAxisTitle);

svg.append('text')
.attr('transform', 'rotate(-90)')
.attr('y', 0 - margin.left)
.attr('x', 0 - height / 2)
.attr('dy', '1em')
.attr('dy', '1.4em')
.style('text-anchor', 'middle')
.style('fill', 'var(--text-color)')
.style('font-size', '1.2em')
.text(yAxisTitle);
}, [data, dimensions, selectedColorScale, bubbleSize]);

Expand Down
Loading

0 comments on commit 370de48

Please sign in to comment.