Skip to content

Commit

Permalink
cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
@rhit-windsors
rhit-windsors committed Dec 16, 2024
1 parent 3504301 commit f274394
Show file tree
Hide file tree
Showing 7 changed files with 103 additions and 138 deletions.
114 changes: 51 additions & 63 deletions apps/frontend/app/components/flows/ViewExperiment/Chart.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,9 @@
import React, { useState, useEffect } from 'react';
import { Chart, registerables, ChartTypeRegistry } from 'chart.js';
import { BoxPlotController, BoxAndWiskers, ViolinController, Violin } from '@sgratzl/chartjs-chart-boxplot';
import Modal from './Modal'; // Assuming you have a Modal component
import 'tailwindcss/tailwind.css';
import { ExperimentData } from '../../../../lib/db_types';
import { getExperimentDataForGraph } from '../../../../lib/db';
import { Menu } from '@headlessui/react'
import ModalContent from './ModalContent';
import ChartContent from './ChartContent';
import GraphModal from './ChartModal';

Chart.register(...registerables);
Chart.register(BoxPlotController, BoxAndWiskers, ViolinController, Violin);
Expand All @@ -26,7 +22,7 @@ const ChartModal: React.FC<ChartModalProps> = ({ onClose, project }) => {
const [xAxis, setXAxis] = useState('X');
//const [yAxis, setYAxis] = useState('Y');
const [headers, setHeaders] = useState<string[]>([]);
const [img, setImg] = useState<Base64URLString>('');
const [img, setImg] = useState<string>('');
const [isFullscreen, setIsFullscreen] = useState(false);

const toggleFullscreen = () => {
Expand Down Expand Up @@ -59,7 +55,7 @@ const ChartModal: React.FC<ChartModalProps> = ({ onClose, project }) => {
const downloadImage = () => {
const a = document.createElement('a');
a.href = img;
a.download = 'downloaded-chart-image.png';
a.download = `${project.name}.png`;
a.click();
};

Expand Down Expand Up @@ -93,10 +89,6 @@ const ChartModal: React.FC<ChartModalProps> = ({ onClose, project }) => {
}
}

console.log("Headers:", headers);
console.log("X List:", xList);
console.log("Y Lists:", yLists);

return { headers, xList, yLists, xIndex };
};

Expand Down Expand Up @@ -142,6 +134,7 @@ const ChartModal: React.FC<ChartModalProps> = ({ onClose, project }) => {
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
display: true,
Expand Down Expand Up @@ -177,62 +170,57 @@ const ChartModal: React.FC<ChartModalProps> = ({ onClose, project }) => {


return (
<Modal onClose={() => { onClose(); regenerateCanvas(); }}>
<ModalContent>
<div className='container flex items-center justify-between space-x-3'>
<button onClick={setBarChart} className='inline-flex items-center justify-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 xl:w-full'>
Bar Chart
</button>
<button onClick={setLineChart} className='inline-flex items-center justify-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 xl:w-full'>
Line Chart
</button>
<button onClick={setPieChart} className='inline-flex items-center justify-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 xl:w-full'>
Pie Chart
</button>
<button onClick={setBoxPlot} className='inline-flex items-center justify-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 xl:w-full'>
Box Plot
</button>
<button onClick={setViolin} className='inline-flex items-center justify-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 xl:w-full'>
Violin Plot
</button>
</div>
</ModalContent>
<ChartContent toggleFullscreen={toggleFullscreen}>
<div className='p-4'>
<h2 className='text-xl font-bold mb-4'>{project.name}&apos;s Chart</h2>
{loading ? (
<p>Loading data...</p>
) : (
<div key={canvasKey}>
<canvas id='myChart'></canvas>
<GraphModal onClose={() => { onClose(); regenerateCanvas(); }} fullScreen={isFullscreen} toggleFullscreen={toggleFullscreen}>
<div className='container flex items-center justify-between space-x-3'>
<button onClick={setBarChart} className='inline-flex items-center justify-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 xl:w-full'>
Bar Chart
</button>
<button onClick={setLineChart} className='inline-flex items-center justify-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 xl:w-full'>
Line Chart
</button>
<button onClick={setPieChart} className='inline-flex items-center justify-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 xl:w-full'>
Pie Chart
</button>
{/* <button onClick={setBoxPlot} className='inline-flex items-center justify-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 xl:w-full'>
Box Plot
</button>
<button onClick={setViolin} className='inline-flex items-center justify-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 xl:w-full'>
Violin Plot
</button> */}
</div>
<div
className={isFullscreen ? 'p-4 h-[65vh]' : 'p-4 h-[50vh]'}>
<h2 className='text-xl font-bold mb-4'>{project.name}&apos;s Chart</h2>
{loading ? (
<p>Loading data...</p>
) : (
<div className='h-full' key={canvasKey}>
<canvas id='myChart'></canvas>
</div>
)}
</div>
<div className='p-4'>
<p className="font-bold">X-Axis Column:</p>
<fieldset>
{headers.map((header) => (
<div key={header} className="p-1">
<input
type="radio"
id={header}
onChange={() => setXAxis(header)}
name="xaxis"
value={header}

/>
<label htmlFor={header} className="font-bold pl-2">{header}</label>
</div>
)}
</div>
</ChartContent>
<ModalContent>
<div>
<p className="font-bold">X-Axis Column:</p>
<fieldset>
{headers.map((header) => (
<div key={header} className="p-1">
<input
type="radio"
id={header}
onChange={() => setXAxis(header)}
name="xaxis"
value={header}

/>
<label htmlFor={header} className="font-bold pl-2">{header}</label>
</div>
))}
</fieldset>
</div>
</ModalContent>
))}
</fieldset>
</div>
<button onClick={downloadImage} className='inline-flex items-center justify-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 xl:w-full'>
Download Image
</button>
</Modal>
</GraphModal>
);
};

Expand Down
22 changes: 0 additions & 22 deletions apps/frontend/app/components/flows/ViewExperiment/ChartContent.tsx
View file

This file was deleted.

48 changes: 48 additions & 0 deletions apps/frontend/app/components/flows/ViewExperiment/ChartModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { ArrowsPointingOutIcon, ArrowsPointingInIcon, XMarkIcon } from '@heroicons/react/24/outline'

interface ModalProps {
onClose?: () => void;
fullScreen?: boolean;
toggleFullscreen?: () => void;
children: React.ReactNode;
}

const GraphModal: React.FC<ModalProps> = ({ onClose, fullScreen, toggleFullscreen, children }) => {
return ReactDOM.createPortal(
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
<div
className={fullScreen ? "bg-white rounded-lg shadow-lg w-screen h-screen" : "bg-white rounded-lg shadow-lg w-11/12 md:w-1/2 lg:w-1/3"}>
<div className="flex justify-end p-2">
<button
onClick={toggleFullscreen}
className="flex items-center justify-center p-2 text-gray-500 transition duration-200 ease-in-out bg-gray-200 rounded-full shadow hover:bg-gray-300 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 mx-2"
aria-label="Toggle Fullscreen"
>
{fullScreen ?
(
<ArrowsPointingInIcon className="w-5 h-5" />
) : (
<ArrowsPointingOutIcon className="w-5 h-5" />
)
}
</button>
<button
onClick={onClose}
className="flex items-center justify-center p-2 text-gray-500 transition duration-200 ease-in-out bg-gray-200 rounded-full shadow hover:bg-gray-300 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2"
aria-label="Close"
>
<XMarkIcon className="w-5 h-5" />
</button>
</div>
<div className="p-4">
{children}
</div>
</div>
</div>,
document.body
);
};

export default GraphModal;
9 changes: 3 additions & 6 deletions apps/frontend/app/components/flows/ViewExperiment/ExperimentListing.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,7 @@
import { ChevronRightIcon } from '@heroicons/react/24/solid';
import { useEffect, useState } from 'react';
import { ExperimentData } from '../../../../lib/db_types';
import { MdEdit, MdPadding } from 'react-icons/md';
import { Timestamp } from 'mongodb';
import GraphModal from './Modal';
import Modal from './Modal';
import { MdEdit } from 'react-icons/md';
import Chart from './Chart';
import { addShareLink, unfollowExperiment, updateExperimentNameById } from '../../../../lib/mongodb_funcs';
import toast from 'react-hot-toast';
Expand Down Expand Up @@ -269,13 +266,13 @@ export const ExperimentListing = ({ projectData: projectData, onCopyExperiment,
Unfollow Experiment
</button>
}
{project.finished &&
{project.finished ?
<button type="button"
className='inline-flex items-center justify-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 xl:w-full'
onClick={openGraphModal}
>
See Graph
</button>
</button> : null
}
{
project.creator == session?.user?.id! ?
Expand Down
31 changes: 0 additions & 31 deletions apps/frontend/app/components/flows/ViewExperiment/Modal.tsx
View file

This file was deleted.

14 changes: 0 additions & 14 deletions apps/frontend/app/components/flows/ViewExperiment/ModalContent.tsx
View file

This file was deleted.

3 changes: 1 addition & 2 deletions apps/frontend/lib/mongodb.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,7 @@ const MONGODB_PORT = process.env.MONGODB_PORT || '1234';
const USERNAME = process.env.MONGODB_USERNAME || 'user';
const PASSWORD = process.env.MONGODB_PASSWORD || 'pass';

// const MONGODB_URI = `mongodb://${USERNAME}:${PASSWORD}@glados-service-mongodb:${MONGODB_PORT}`;
const MONGODB_URI = 'mongodb://adminuser:password123@glados-dev.csse.rose-hulman.edu:30751/';
const MONGODB_URI = `mongodb://${USERNAME}:${PASSWORD}@glados-service-mongodb:${MONGODB_PORT}`;
const MONGODB_OPTIONS = {};

export const DB_NAME = 'gladosdb';
Expand Down

0 comments on commit f274394

Please sign in to comment.