Skip to content

Commit

Permalink
Experimental refactor using Claude AI
Browse files Browse the repository at this point in the history
  • Loading branch information
@o-jorgensen
o-jorgensen committed Dec 11, 2024
1 parent 1947069 commit 4819293
Showing 1 changed file with 101 additions and 254 deletions.
355 changes: 101 additions & 254 deletions ...eatures/Results/CaseResult/CaseResultView/VariogramCaseResult/ImageResult/ImageResult.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
/* eslint-disable max-lines-per-function */
import {
Button,
CircularProgress,
Expand All @@ -12,6 +11,90 @@ import { getVariogramImage } from '../../../../../../api/custom/getImageById';
import { GetVariogramResultsVariogramResultFileDto } from '../../../../../../api/generated';
import * as Styled from './ImageResult.styled';

type ImageType = {
id: string;
label: string;
searchTerm: string;
altText: string;
};

const IMAGE_TYPES: ImageType[] = [
{
id: 'variogram_slices',
label: 'Variogram slice',
searchTerm: 'variogram_slices_',
altText: 'Variogram x/y/z slice',
},
{
id: 'spherical',
label: 'Spherical',
searchTerm: 'spherical-',
altText: 'Spherical variogram',
},
{
id: 'gaussian',
label: 'Gaussian',
searchTerm: 'gaussian',
altText: 'Gaussian variogram',
},
{
id: 'general_exponential',
label: 'General exponential',
searchTerm: 'general_exponential',
altText: 'General exponential variogram',
},
{
id: 'exponential',
label: 'Exponential',
searchTerm: '-exponential',
altText: 'Exponential variogram',
},
];

const ImagePanel = ({
imageId,
altText,
label,
}: {
imageId?: string;
altText: string;
label: string;
}) => {
const { data, isLoading } = useQuery({
queryKey: ['case-image', imageId],
queryFn: () => getVariogramImage(imageId as string),
enabled: !!imageId,
});

if (!imageId || !data) {
return (
<figure className="image-wrapper">
<Typography variant="body_short" className="placeholder-text">
{label} variogram model is not included in the result
</Typography>
</figure>
);
}

return (
<>
{isLoading && (
<CircularProgress
color="primary"
size={24}
value={100}
variant="indeterminate"
/>
)}
{data && (
<figure className="image-wrapper">
<img className="image" alt={altText} src={data} />
</figure>
)}
</>
);
};

export const ImageResult = ({
open,
setOpen,
Expand All @@ -22,267 +105,31 @@ export const ImageResult = ({
resultImages: GetVariogramResultsVariogramResultFileDto[];
}) => {
const [activeTab, setActiveTab] = useState(0);
const handleChange = (index: number) => {
setActiveTab(index);
};

const variogramSlices =
resultImages &&
resultImages.find((x) => x.fileName.includes('variogram_slices_'));
const variogramSlicesImageId =
variogramSlices && variogramSlices.variogramResultFileId;

const loadedVariogramSlicesImage = useQuery({
queryKey: ['case-image', variogramSlicesImageId],
queryFn: () => getVariogramImage(variogramSlicesImageId as string),
enabled: !!variogramSlicesImageId,
});

const sphericalImage =
resultImages && resultImages.find((x) => x.fileName.includes('spherical-'));
const sphericalImageId =
sphericalImage && sphericalImage.variogramResultFileId;

const loadedSphericalImage = useQuery({
queryKey: ['case-image', sphericalImageId],
queryFn: () => getVariogramImage(sphericalImageId as string),
enabled: !!sphericalImageId,
});

const gaussianImage =
resultImages && resultImages.find((x) => x.fileName.includes('gaussian'));
const gaussianImageId = gaussianImage && gaussianImage.variogramResultFileId;
const loadedGaussianImage = useQuery({
queryKey: ['case-image', gaussianImageId],
queryFn: () => getVariogramImage(gaussianImageId as string),
enabled: !!gaussianImageId,
});

const generalExponentialImage =
resultImages &&
resultImages.find((x) => x.fileName.includes('general_exponential'));
const generalExponentialImageId =
generalExponentialImage && generalExponentialImage.variogramResultFileId;
const loadedGeneralExponentialImage = useQuery({
queryKey: ['case-image', generalExponentialImageId],
queryFn: () => getVariogramImage(generalExponentialImageId as string),
enabled: !!generalExponentialImageId,
});

const exponentialImage =
resultImages &&
resultImages.find((x) => x.fileName.includes('-exponential'));
const exponentialImageId =
exponentialImage && exponentialImage.variogramResultFileId;
const loadedExponentialImage = useQuery({
queryKey: ['case-image', exponentialImageId],
queryFn: () => getVariogramImage(exponentialImageId as string),
enabled: !!exponentialImageId,
});
const getImageId = (searchTerm: string) => {
const image = resultImages?.find((x) => x.fileName.includes(searchTerm));
return image?.variogramResultFileId;
};

return (
<Styled.Dialog open={open} isDismissable>
<Dialog.CustomContent className="dialog-content">
<Tabs activeTab={activeTab} onChange={handleChange} className="tabs">
<Tabs activeTab={activeTab} onChange={setActiveTab} className="tabs">
<Tabs.List>
<Tabs.Tab>Variogram slice</Tabs.Tab>
<Tabs.Tab>Spherical</Tabs.Tab>
<Tabs.Tab>Gaussian</Tabs.Tab>
<Tabs.Tab>General Exponential</Tabs.Tab>
<Tabs.Tab>Exponential</Tabs.Tab>
{IMAGE_TYPES.map(({ label }) => (
<Tabs.Tab key={label}>{label}</Tabs.Tab>
))}
</Tabs.List>
<Tabs.Panels className="tabs-panels">
<Tabs.Panel className="tabs-panel">
<>
{loadedVariogramSlicesImage.isLoading && (
<>
<CircularProgress
color="primary"
size={24}
value={100}
variant="indeterminate"
/>
</>
)}

{loadedVariogramSlicesImage.data && (
<figure className="image-wrapper">
<img
className="image"
alt="Variogram x/y/z slice"
src={
loadedVariogramSlicesImage.data
? loadedVariogramSlicesImage.data
: ''
}
/>
</figure>
)}
</>
</Tabs.Panel>
<Tabs.Panel className="tabs-panel">
<>
{loadedSphericalImage && loadedSphericalImage.data ? (
<>
{loadedSphericalImage.isLoading && (
<>
<CircularProgress
color="primary"
size={24}
value={100}
variant="indeterminate"
/>
</>
)}
{loadedSphericalImage.data && (
<figure className="image-wrapper">
<img
className="image"
alt="Spherical variogram (empirical and fitted)"
src={
loadedSphericalImage.data
? loadedSphericalImage.data
: ''
}
/>
</figure>
)}
</>
) : (
<figure className="image-wrapper">
<Typography
variant="body_short"
className="placeholder-text"
>
Spherical variogram model is not included in the result
</Typography>
</figure>
)}
</>
</Tabs.Panel>
<Tabs.Panel className="tabs-panel">
<>
{loadedGaussianImage && loadedGaussianImage.data ? (
<>
{loadedGaussianImage.isLoading && (
<>
<CircularProgress
color="primary"
size={24}
value={100}
variant="indeterminate"
/>
</>
)}
{loadedGaussianImage.data && (
<figure className="image-wrapper">
<img
className="image"
alt="Gaussian variogram (empirical and fitted)"
src={
loadedGaussianImage.data
? loadedGaussianImage.data
: ''
}
/>
</figure>
)}
</>
) : (
<figure className="image-wrapper">
<Typography
variant="body_short"
className="placeholder-text"
>
Gaussian variogram model is not included in the result
</Typography>
</figure>
)}
</>
</Tabs.Panel>

<Tabs.Panel className="tabs-panel">
<>
{loadedGeneralExponentialImage &&
loadedGeneralExponentialImage.data ? (
<>
{loadedGeneralExponentialImage.isLoading && (
<>
<CircularProgress
color="primary"
size={24}
value={100}
variant="indeterminate"
/>
</>
)}
{loadedGeneralExponentialImage.data && (
<figure className="image-wrapper">
<img
className="image"
alt="General Exponential variogram (empirical and fitted)"
src={
loadedGeneralExponentialImage.data
? loadedGeneralExponentialImage.data
: ''
}
/>
</figure>
)}
</>
) : (
<figure className="image-wrapper">
<Typography
variant="body_short"
className="placeholder-text"
>
General exponential variogram model is not included in the
result
</Typography>
</figure>
)}
</>
</Tabs.Panel>
<Tabs.Panel className="tabs-panel">
<>
{loadedExponentialImage && loadedExponentialImage.data ? (
<>
{loadedExponentialImage.isLoading && (
<>
<CircularProgress
color="primary"
size={24}
value={100}
variant="indeterminate"
/>
</>
)}
{loadedExponentialImage.data && (
<figure className="image-wrapper">
<img
className="image"
alt="Exponential variogram (empirical and fitted)"
src={
loadedExponentialImage.data
? loadedExponentialImage.data
: ''
}
/>
</figure>
)}
</>
) : (
<figure className="image-wrapper">
<Typography
variant="body_short"
className="placeholder-text"
>
Exponential variogram model is not included in the result
</Typography>
</figure>
)}
</>
</Tabs.Panel>
{IMAGE_TYPES.map(({ id, searchTerm, altText, label }) => (
<Tabs.Panel key={id} className="tabs-panel">
<ImagePanel
imageId={getImageId(searchTerm)}
altText={altText}
label={label}
/>
</Tabs.Panel>
))}
</Tabs.Panels>
</Tabs>
</Dialog.CustomContent>
Expand Down

0 comments on commit 4819293

Please sign in to comment.