From 9bbfdcee7e798966db15cef4f40d49ab3e1ec367 Mon Sep 17 00:00:00 2001 From: itsdiy0 Date: Tue, 21 Jan 2025 14:53:22 +0000 Subject: [PATCH] minor styling --- frontend/src/components/Visualiser.tsx | 326 ++++++++++++------------- 1 file changed, 163 insertions(+), 163 deletions(-) diff --git a/frontend/src/components/Visualiser.tsx b/frontend/src/components/Visualiser.tsx index d9e8771..2ea9591 100644 --- a/frontend/src/components/Visualiser.tsx +++ b/frontend/src/components/Visualiser.tsx @@ -1,163 +1,163 @@ -import React from 'react'; -import { Button, Box, Typography } from '@mui/material'; -import { useMethods } from '../MethodsContext'; -import { ClearAll } from '@mui/icons-material'; -import VisualiserMethods from './VisualiserMethods'; -import { - DndContext, - closestCenter, - KeyboardSensor, - PointerSensor, - useSensor, - useSensors, -} from '@dnd-kit/core'; -import { - arrayMove, - SortableContext, - sortableKeyboardCoordinates, - verticalListSortingStrategy -} from '@dnd-kit/sortable'; -import { useAccordionExpansion } from '../AccordionExpansionContext'; - -const Visualiser:React.FC = () => { - const { methods, clearMethods, removeMethod, setMethods } = useMethods(); - const { expandMethodAndParent } = useAccordionExpansion(); // Use the context - - const sensors = useSensors( - useSensor(PointerSensor), - useSensor(KeyboardSensor, { - coordinateGetter: sortableKeyboardCoordinates, - }) - ); - - const handleDragEnd = (event: any) => { - const { active, over } = event; - - if (active.name !== over.id) { - setMethods((methods) => { - const oldIndex = methods.findIndex((method) => method.method_name === active.id); - const newIndex = methods.findIndex((method) => method.method_name === over.id); - - return arrayMove(methods, oldIndex, newIndex); - }); - } - }; - - const handleEditMethod = (methodName: string) => { - // Determine the parent accordion based on method name - const getParentAccordion = (methodName: string) => { - const parentMappings = { - 'save_to_images' : 'Image Saving', - 'rescale_to_int' : 'Image Saving', - 'binary_thresholding' : 'Segmentation', - 'data_reducer' : 'Morphological Operations', - 'sino_360_to_180' : 'Morphological Operations', - 'data_resampler' : 'Morphological Operations', - 'normalize': 'Normalisation', - 'paganin_filter' : 'Phase Retrieval', - 'paganin_filter_savu' : 'Phase Retrieval', - 'paganin_filter_tomopy' : 'Phase Retrieval', - 'remove_stripe_based_sorting' : 'Stripe Removal', - 'remove_stripe_ti' : 'Stripe Removal', - 'remove_all_stripe' : 'Stripe Removal', - 'raven_filter' : 'Stripe Removal', - 'distortion_correction_proj_discorpy' : 'Distortion Correction', - 'find_center_vo': 'Rotation Center Finding', - 'find_center_pc': 'Rotation Center Finding', - 'find_center_360' : 'Rotation Center Finding', - 'FBP' : 'Reconstruction', - 'LPRec' : 'Reconstruction', - 'SIRT' : 'Reconstruction', - 'CGLS' : 'Reconstruction', - 'remove_outlier' : 'Image denoising / Aretefacts Removal', - 'median_filter' : 'Image denoising / Aretefacts Removal', - 'total_variation_PD' : 'Image denoising / Aretefacts Removal', - 'total_variation_ROF' : 'Image denoising / Aretefacts Removal', - }; - - // Find a matching key or default to a parent if exact match not found - const parentKey = Object.keys(parentMappings).find(key => - methodName.includes(key) - ); - - return parentKey ? parentMappings[parentKey] : 'Center of Rotation'; - }; - - const parentAccordion = getParentAccordion(methodName); - - // Expand both parent and method - expandMethodAndParent(parentAccordion, methodName); - } - - const methodsDisplay = () => { - if (methods.length === 0) { - return ( - - No methods selected - - ); - } else { - return ( - - method.method_name)} strategy={verticalListSortingStrategy}> - - {methods.map((method) => ( - - ))} - - - - ); - } - }; - - return ( - - - {methodsDisplay()} - - - - ); -} - -export default Visualiser; \ No newline at end of file +import React from 'react'; +import { Button, Box, Typography } from '@mui/material'; +import { useMethods } from '../MethodsContext'; +import { ClearAll } from '@mui/icons-material'; +import VisualiserMethods from './VisualiserMethods'; +import { + DndContext, + closestCenter, + KeyboardSensor, + PointerSensor, + useSensor, + useSensors, +} from '@dnd-kit/core'; +import { + arrayMove, + SortableContext, + sortableKeyboardCoordinates, + verticalListSortingStrategy +} from '@dnd-kit/sortable'; +import { useAccordionExpansion } from '../AccordionExpansionContext'; + +const Visualiser:React.FC = () => { + const { methods, clearMethods, removeMethod, setMethods } = useMethods(); + const { expandMethodAndParent } = useAccordionExpansion(); // Use the context + + const sensors = useSensors( + useSensor(PointerSensor), + useSensor(KeyboardSensor, { + coordinateGetter: sortableKeyboardCoordinates, + }) + ); + + const handleDragEnd = (event: any) => { + const { active, over } = event; + + if (active.name !== over.id) { + setMethods((methods) => { + const oldIndex = methods.findIndex((method) => method.method_name === active.id); + const newIndex = methods.findIndex((method) => method.method_name === over.id); + + return arrayMove(methods, oldIndex, newIndex); + }); + } + }; + + const handleEditMethod = (methodName: string) => { + // Determine the parent accordion based on method name + const getParentAccordion = (methodName: string) => { + const parentMappings = { + 'save_to_images' : 'Image Saving', + 'rescale_to_int' : 'Image Saving', + 'binary_thresholding' : 'Segmentation', + 'data_reducer' : 'Morphological Operations', + 'sino_360_to_180' : 'Morphological Operations', + 'data_resampler' : 'Morphological Operations', + 'normalize': 'Normalisation', + 'paganin_filter' : 'Phase Retrieval', + 'paganin_filter_savu' : 'Phase Retrieval', + 'paganin_filter_tomopy' : 'Phase Retrieval', + 'remove_stripe_based_sorting' : 'Stripe Removal', + 'remove_stripe_ti' : 'Stripe Removal', + 'remove_all_stripe' : 'Stripe Removal', + 'raven_filter' : 'Stripe Removal', + 'distortion_correction_proj_discorpy' : 'Distortion Correction', + 'find_center_vo': 'Rotation Center Finding', + 'find_center_pc': 'Rotation Center Finding', + 'find_center_360' : 'Rotation Center Finding', + 'FBP' : 'Reconstruction', + 'LPRec' : 'Reconstruction', + 'SIRT' : 'Reconstruction', + 'CGLS' : 'Reconstruction', + 'remove_outlier' : 'Image denoising / Aretefacts Removal', + 'median_filter' : 'Image denoising / Aretefacts Removal', + 'total_variation_PD' : 'Image denoising / Aretefacts Removal', + 'total_variation_ROF' : 'Image denoising / Aretefacts Removal', + }; + + // Find a matching key or default to a parent if exact match not found + const parentKey = Object.keys(parentMappings).find(key => + methodName.includes(key) + ); + + return parentKey ? parentMappings[parentKey] : 'Center of Rotation'; + }; + + const parentAccordion = getParentAccordion(methodName); + + // Expand both parent and method + expandMethodAndParent(parentAccordion, methodName); + } + + const methodsDisplay = () => { + if (methods.length === 0) { + return ( + + No methods selected + + ); + } else { + return ( + + method.method_name)} strategy={verticalListSortingStrategy}> + + {methods.map((method) => ( + + ))} + + + + ); + } + }; + + return ( + + + {methodsDisplay()} + + + + ); +} + +export default Visualiser;