Skip to content

Commit

Permalink
️🚘🏮 ↝ [SSC-67]: Trying annotation for PH
Browse files Browse the repository at this point in the history
  • Loading branch information
@Gizmotronn
Gizmotronn committed Jan 11, 2025
1 parent d03a23a commit 3b8a109
Show file tree
Hide file tree
Showing 6 changed files with 96 additions and 187 deletions.
4 changes: 2 additions & 2 deletions components/Data/ZoodexDataSources.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
import { CameraIcon, CloudDrizzleIcon, DogIcon, MicroscopeIcon, SunDimIcon, TelescopeIcon, TestTube } from 'lucide-react';
import { BurrowingOwlIcon } from '../../content/Icons/BurrowingOwl';
import { FishIcon } from '../../content/Icons/FishIcon';
import { StarterTelescope } from '../Projects/Telescopes/Transiting';
import { StarterTelescopeTess } from '../Projects/Telescopes/Transiting';
import { DailyMinorPlanet } from '../Projects/Telescopes/DailyMinorPlanet';
import { PlanetFourProject } from '../Projects/Satellite/PlanetFour';
import { TelescopeSunspotDetector } from '../Projects/Telescopes/Sunspots';
Expand Down Expand Up @@ -117,7 +117,7 @@ export const telescopeDataSources = [
activeStructure: 3103,
researched: 'telescope-tess',
techId: 1,
dynamicComponent: <StarterTelescope />
dynamicComponent: <StarterTelescopeTess />
}
]
},
Expand Down
46 changes: 28 additions & 18 deletions components/Projects/(classifications)/Annotating/Annotator.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,10 @@ import ClassificationForm from '../PostForm';
import {
AI4MCATEGORIES,
P4CATEGORIES,
PHCATEGORIES,
type AI4MCategory,
type P4Category,
type PHCategory,
type DrawingObject,
type Tool,
type CategoryConfig,
Expand All @@ -25,7 +27,7 @@ interface ImageAnnotatorProps {
missionNumber: number;
assetMentioned: string | string[];
structureItemId?: number;
annotationType: 'AI4M' | 'P4';
annotationType: 'AI4M' | 'P4' | 'PH' | 'Custom';
};

export default function ImageAnnotator({
Expand All @@ -50,9 +52,14 @@ export default function ImageAnnotator({
const [uploads, setUploads] = useState<string[]>([]);
const canvasRef = useRef<HTMLCanvasElement>(null);
const imageRef = useRef<HTMLImageElement | null>(null);
const CATEGORY_CONFIG = annotationType === 'AI4M'
? AI4MCATEGORIES as Record<AI4MCategory, CategoryConfig>
: P4CATEGORIES as Record<P4Category, CategoryConfig>;
const CATEGORY_CONFIG: Record<string, CategoryConfig> =
annotationType === 'AI4M'
? AI4MCATEGORIES
: annotationType === 'P4'
? P4CATEGORIES
: annotationType === 'PH'
? PHCATEGORIES
: {} as Record<string, CategoryConfig>;

const addMedia = async () => {
if (!canvasRef.current || !session) return;
Expand Down Expand Up @@ -109,20 +116,23 @@ export default function ImageAnnotator({
{selectedImage && (
<div className="space-y-4">
<SciFiPanel className="p-4">
<AnnotationCanvas
canvasRef={canvasRef}
imageRef={imageRef}
isDrawing={isDrawing}
setIsDrawing={setIsDrawing}
currentTool={currentTool}
currentColor={CATEGORY_CONFIG[currentCategory as keyof typeof CATEGORY_CONFIG].color}
lineWidth={lineWidth}
drawings={drawings}
setDrawings={setDrawings}
currentDrawing={currentDrawing}
setCurrentDrawing={setCurrentDrawing}
currentCategory={currentCategory}
/>
<AnnotationCanvas
canvasRef={canvasRef}
imageRef={imageRef}
isDrawing={isDrawing}
setIsDrawing={setIsDrawing}
currentTool={currentTool}
currentColor={
CATEGORY_CONFIG[currentCategory as keyof typeof CATEGORY_CONFIG]?.color || '#000000'
}
lineWidth={lineWidth}
drawings={drawings}
setDrawings={setDrawings}
currentDrawing={currentDrawing}
setCurrentDrawing={setCurrentDrawing}
currentCategory={currentCategory}
/>

</SciFiPanel>
<SciFiPanel className="p-4">
<Legend
Expand Down
12 changes: 6 additions & 6 deletions components/Projects/Satellite/PlanetFour.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -241,12 +241,12 @@ export function P4Wrapper () {

return (
<div className="space-y-8">
{!selectedAnomaly && (
<PreferredTerrestrialClassifications onSelectAnomaly={setSelectedAnomaly} />
)}
{selectedAnomaly && (
<PlanetFourProject anomalyid={selectedAnomaly} />
)}
{!selectedAnomaly && (
<PreferredTerrestrialClassifications onSelectAnomaly={setSelectedAnomaly} />
)}
{selectedAnomaly && (
<PlanetFourProject anomalyid={selectedAnomaly} />
)}
</div>
);
};
195 changes: 35 additions & 160 deletions components/Projects/Telescopes/Transiting.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,174 +5,20 @@ import { useSession, useSupabaseClient } from '@supabase/auth-helpers-react';
import { useActivePlanet } from '@/context/ActivePlanet';
import ClassificationForm from '@/components/Projects/(classifications)/PostForm';
import { planetClassificationConfig } from '@/components/Projects/(classifications)/FormConfigurations';
import PreferredTerrestrialClassifications from '@/components/Structures/Missions/PickPlanet';
import ImageAnnotator from '../(classifications)/Annotating/Annotator';

export interface Anomaly {
id: bigint;
content: string;
avatar_url?: string;
};

export function StarterTelescope() {
const supabase = useSupabaseClient();
const session = useSession();
const { activePlanet } = useActivePlanet();

const [anomalies, setAnomalies] = useState<Anomaly[]>([]);
const [selectedAnomaly, setSelectedAnomaly] = useState<Anomaly | null>(null);
const [userChoice, setUserChoice] = useState<string | null>(null);
const [imageUrl, setImageUrl] = useState<string | null>(null);
const [configuration, setConfiguration] = useState<any | null>(null);
const [loading, setLoading] = useState<boolean>(true);
const [error, setError] = useState<string | null>(null);
const [hasMission3000001, setHasMission3000001] = useState<boolean | null>(null);
const [missionLoading, setMissionLoading] = useState<boolean>(true);

useEffect(() => {
const checkTutorialMission = async () => {
if (!session) return;
try {
const { data: missionData, error: missionError } = await supabase
.from('missions')
.select('id')
.eq('user', session.user.id)
.eq('mission', 3000001);
if (missionError) throw missionError;
setHasMission3000001(missionData && missionData.length > 0);
} catch (error: any) {
console.error('Error checking user mission: ', error.message || error);
setHasMission3000001(false);
} finally {
setMissionLoading(false);
}
};
checkTutorialMission();
}, [session, supabase]);

useEffect(() => {
const fetchStructureConfiguration = async () => {
if (!session) return;
try {
const { data: inventoryData, error: inventoryError } = await supabase
.from('inventory')
.select('configuration')
.eq('item', 3103)
.eq('anomaly', activePlanet.id)
.eq('owner', session.user.id)
.order('id', { ascending: true })
.limit(1)
.single();
if (inventoryError) throw inventoryError;
setConfiguration(inventoryData?.configuration || null);
} catch (error: any) {
console.error('Error fetching structure config:', error.message);
setError('Error fetching structure configuration: ' + (error.message || JSON.stringify(error)));
}
};
fetchStructureConfiguration();
}, [session, supabase, activePlanet]);

useEffect(() => {
const fetchAnomalies = async () => {
if (!session || !userChoice) {
setLoading(false);
return;
}
try {
const { data: anomalyData, error: anomalyError } = await supabase
.from("anomalies")
.select("*")
.eq("anomalySet", userChoice);
if (anomalyError) throw anomalyError;

setAnomalies(anomalyData || []);
console.log("Fetched anomalies:", anomalyData);

if (anomalyData?.length > 0) {
const randomAnomaly = anomalyData[Math.floor(Math.random() * anomalyData.length)];
console.log("Random anomaly selected:", randomAnomaly);

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL || 'https://your-default-supabase-url.com';
if (randomAnomaly?.id) {
const constructedUrl = `${supabaseUrl}/storage/v1/object/public/anomalies/${randomAnomaly.id}/Binned.png`;
console.log("Constructed image URL:", constructedUrl);
setImageUrl(constructedUrl);
} else {
console.error("Random anomaly ID is null or undefined.");
}
setSelectedAnomaly(randomAnomaly);
} else {
console.log("No anomalies found.");
setSelectedAnomaly(null);
}
} catch (error: any) {
console.error("Error fetching anomalies:", error.message || error);
} finally {
setLoading(false);
}
};
fetchAnomalies();
}, [session, supabase, userChoice]);


const handleChoice = (choice: string) => {
setUserChoice(choice);
};

if (error) return <div><p>{error}</p></div>;
if (missionLoading || hasMission3000001 === null) return <div>Loading...</div>;
if (!configuration) {
return (
<div className="flex flex-col items-start gap-4 pb-4 relative w-full max-w-lg overflow-y-auto max-h-[90vh] rounded-lg">
<p className="text-sm font-bold">Fetching structure configuration...</p>
</div>
);
}
if (!hasMission3000001) {
return (
<div>
<FirstTelescopeClassification anomalyid={"6"} />
</div>
);
}
if (!userChoice) {
return (
<div className="flex flex-col items-start gap-4 pb-4 relative w-full max-w-lg overflow-y-auto max-h-[90vh] rounded-lg">
<p className="text-sm font-bold">Choose a target to observe using your Telescope:</p>
{configuration["missions unlocked"]?.map((missionId: string) => (
<button
key={missionId}
onClick={() => handleChoice(missionId)}
className="bg-blue-500 text-white font-bold py-2 px-4 rounded-md shadow-sm hover:bg-blue-700"
>
{missionId}
</button>
)) || <p>No missions unlocked.</p>}
</div>
);
}
if (loading) return <div><p>Loading...</p></div>;
if (!anomalies.length) return <div><p>No anomaly found.</p></div>;
interface SelectedAnomProps {
anomalyid?: number;
};

return (
<div className="flex flex-col items-start gap-4 pb-4 relative w-full max-w-lg overflow-y-auto max-h-[90vh] rounded-lg">
<div className="p-4 rounded-md relative w-full">
{selectedAnomaly?.avatar_url && <img src={selectedAnomaly.avatar_url} alt="Anomaly Avatar" />}
{imageUrl && <img src={imageUrl} alt="Anomaly Binned Image" />}
{selectedAnomaly && (
<ClassificationForm
anomalyId={selectedAnomaly.id.toString()}
anomalyType="planet"
missionNumber={1372001}
assetMentioned={selectedAnomaly?.id.toString()}
structureItemId={3103}
/>
)}
</div>
</div>
);
};

export function StarterTelescopeTess() {
export function StarterTelescopeTess({ anomalyid }: SelectedAnomProps) {
const supabase = useSupabaseClient();
const session = useSession();
const { activePlanet } = useActivePlanet();
Expand Down Expand Up @@ -277,6 +123,35 @@ export function StarterTelescopeTess() {
</div>
</div>
);

// return (
// <div className="flex flex-col items-start gap-4 pb-4 relative w-full max-w-lg overflow-y-auto max-h-[90vh] rounded-lg">
// <div className="p-4 rounded-md relative w-full">
// {selectedAnomaly?.avatar_url && <img src={selectedAnomaly.avatar_url} alt="Anomaly Avatar" />}
// {imageUrl && selectedAnomaly && (
// <ImageAnnotator
// anomalyId={selectedAnomaly.id.toString()}
// anomalyType='planet'
// missionNumber={1372001}
// assetMentioned={imageUrl}
// structureItemId={3103}
// annotationType='PH'
// initialImageUrl={imageUrl}
// />
// )}
// {/* {imageUrl && <img src={imageUrl} alt="Anomaly Binned Image" />}
// {selectedAnomaly && (
// <ClassificationForm
// anomalyId={selectedAnomaly.id.toString()}
// anomalyType="planet"
// missionNumber={1372001}
// assetMentioned={selectedAnomaly?.id.toString()}
// structureItemId={3103}
// />
// )} */}
// </div>
// </div>
// );
};

interface TelescopeProps {
Expand Down
2 changes: 1 addition & 1 deletion constants/Structures/Properties.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
import React from "react";
import AutomatonUpgrade from "@/components/Structures/Config/AutomatonUpgradeBox";
import AllAutomatonsOnActivePlanet from "@/components/Structures/Auto/AllAutomatons";
import { StarterTelescope, StarterTelescopeTess } from "@/components/Projects/Telescopes/Transiting";
import { StarterTelescopeTess } from "@/components/Projects/Telescopes/Transiting";
import { StarterLidar } from "@/components/Projects/Lidar/Clouds";
import { BarChart, BeanIcon, BookAIcon, BookAudioIcon, BookCopy, BookDashedIcon, BriefcaseIcon, CameraIcon, CameraOffIcon, CaravanIcon, CloudCogIcon, CloudDrizzleIcon, CogIcon, ConstructionIcon, DogIcon, DotSquare, EarthIcon, GemIcon, GlassesIcon, HeartIcon, LockIcon, LucideSalad, MehIcon, MicroscopeIcon, MoonStarIcon, PenBox, PhoneIcon, PickaxeIcon, PowerIcon, RssIcon, SaladIcon, StarIcon, SunIcon, SwitchCamera, TelescopeIcon, TestTubeDiagonal, TestTubeDiagonalIcon, TreePalmIcon, WebcamIcon } from "lucide-react";
import StructureRepair from "@/components/Structures/Config/RepairStructure";
Expand Down
24 changes: 24 additions & 0 deletions types/Annotation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,30 @@ export const P4CATEGORIES: Record<P4Category, CategoryConfig> = {
},
};

export type PHCategory = 'Noise' | 'Clear dip' | 'Missing' | 'Custom/Other';
export const PHCATEGORIES: Record<PHCategory, CategoryConfig> = {
Noise: {
name: 'Noise',
color: '#00BCD4',
description: 'Noise (random or irrelevant data)'
},
'Clear dip': {
name: 'Clear dip',
color: '#4CAF50',
description: 'Clear dip (a clear dip in the light)'
},
Missing: {
name: 'Missing',
color: '#FFC107',
description: 'Missing (missing data/empty spot)'
},
'Custom/Other': {
name: 'Custom/Other',
color: '#FF0000',
description: 'Custom or other annotation'
},
};

export type AI4MCategory = 'sand' | 'consolidated-soil' | 'bedrock' | 'big-rocks' | 'custom';
export const AI4MCATEGORIES: Record<AI4MCategory, CategoryConfig> = {
sand: {
Expand Down

0 comments on commit 3b8a109

Please sign in to comment.