-
{props.selected}
- {open &&
- {React.Children.map(props.options, (option) => (
-
handleSelectOption(option)}>
- {option}
-
- ))}
-
}
+ return (
+
+
+ {props.selected}
+
+ {open && (
+
+ {React.Children.map(props.options, (option) => (
+
handleSelectOption(option)}
+ >
+ {option}
+
+ ))}
- )
-}
\ No newline at end of file
+ )}
+
+ );
+}
diff --git a/src/components/LeafletMap.tsx b/src/components/LeafletMap.tsx
index bfae68c..f74cc57 100644
--- a/src/components/LeafletMap.tsx
+++ b/src/components/LeafletMap.tsx
@@ -1,59 +1,52 @@
-import {
- MapContainer,
- TileLayer,
- LayersControl,
- useMap,
- Polygon,
- GeoJSON,
- } from 'react-leaflet';
- import { GeoJsonObject } from 'geojson'
- import mapData from "./Classify.json"
- import React from 'react';
-const center = [40.63463151377654, -97.89969605983609];
+import { MapContainer, TileLayer, LayersControl, GeoJSON } from "react-leaflet";
+import { GeoJsonObject } from "geojson";
+import React from "react";
+
+import mapData from "./Classify.json";
+
const { BaseLayer } = LayersControl;
export default function LeafletMap() {
- return (
-
-
-
-
-
+ return (
+ <>
+
+
+
+
-
-
+
+
-
-
+
+
-
-
- {/*
-
-
- A pretty CSS3 popup.
Easily customizable.
-
- */}
-
-
-
- )
-}
\ No newline at end of file
+
+
+
+ {/* eslint-disable-next-line @shopify/jsx-no-hardcoded-content*/}
+
+
+ );
+}
diff --git a/src/components/MenuBar.tsx b/src/components/MenuBar.tsx
index 55c59f8..246ffcf 100644
--- a/src/components/MenuBar.tsx
+++ b/src/components/MenuBar.tsx
@@ -1,44 +1,52 @@
-import React, { useState } from "react";
-import '../assets/css/MenuBar.css';
+/* eslint-disable @shopify/jsx-no-hardcoded-content */
+import React from "react";
+import "../assets/css/MenuBar.css";
import { useAuth0 } from "@auth0/auth0-react";
+
import { LogoutButton } from "./logout-button";
import { LoginButton } from "./login-button";
-export const MenuBar = () => {
- const { isAuthenticated } = useAuth0();
-
- return (
-
-
-
-
-
- - About Us
- - Visualization
- - Services
- - Profile
- {!isAuthenticated && (
- <>
-
-
- )}
- {isAuthenticated && (
- <>
-
-
- )}
+export const MenuBar = () => {
+ const { isAuthenticated } = useAuth0();
-
-
-
-
-
-
-
-
+ return (
+
+
+
- );
-
-}
\ No newline at end of file
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/components/Stage.tsx b/src/components/Stage.tsx
index b644c85..2b16003 100644
--- a/src/components/Stage.tsx
+++ b/src/components/Stage.tsx
@@ -1,164 +1,205 @@
-import React, { useState, useEffect } from 'react';
-import "../assets/css/stage.css"
+// Hard code labels for the buttons
+/* eslint-disable @shopify/jsx-no-hardcoded-content */
+import React, { useState, useEffect } from "react";
+
+import "../assets/css/stage.css";
+import ApiService from "../services/ApiService";
+
import Dropdown from "./Dropdown";
-import XItemList from './XitemList';
-import ApiService from '../services/ApiService';
+import XItemList from "./XitemList";
-let socket:WebSocket;
+let socket: WebSocket;
// Callback for status updates
-function wsStatusUpdate(status: String){
- console.log("status is now:" + status)
+function wsStatusUpdate(status: string) {
+ console.log(`status is now:${status}`);
}
// Callback for geojson
-function receiveGeoJson(geojson: String){
- console.log("recieved geojson")
+function receiveGeoJson(geojson: string) {
+ console.log("recieved geojson");
}
-function connectWebSocket(addr: String) {
- // WebSocket connection
- socket = new WebSocket(`ws://${addr}`);
-
- // Connection opened
- socket.addEventListener('open', () => {
- // this is where you can allow things to be sent on the websocket
- console.log('WebSocket connection established.');
- });
+function connectWebSocket(addr: string) {
+ // WebSocket connection
+ socket = new WebSocket(`ws://${addr}`);
+
+ // Connection opened
+ socket.addEventListener("open", () => {
+ // this is where you can allow things to be sent on the websocket
+ console.log("WebSocket connection established.");
+ });
+
+ // Listen for messages
+ socket.addEventListener("message", (event) => {
+ console.log(event.data);
+ const msg = JSON.parse(event.data);
+ // call callbacks
+ wsStatusUpdate(msg.status);
+ if (msg.geojson) {
+ receiveGeoJson(msg.geojson);
+ }
+ console.log("Received message:", msg);
+ });
+ // Connection closed
+ socket.addEventListener("close", () => {
+ console.log("WebSocket connection closed.");
+ });
+}
- // Listen for messages
- socket.addEventListener('message', (event) => {
- console.log(event.data)
- const msg = JSON.parse(event.data)
- // call callbacks
- wsStatusUpdate(msg.status)
- if(msg.geojson){
- receiveGeoJson(msg.geojson)
- }
- console.log('Received message:', msg);
+export default function Stage() {
+ connectWebSocket(ApiService.getApiServiceUrl());
+
+ const options = ["Upload", "Classify", "Classifications"];
+ const dataTypes = [
+ "Planetscope Superdove",
+ "Orbital Megalaser",
+ "Global Gigablaster",
+ ];
+ const modelTypes = ["XGBoost", "Random Forest", "Neural Network"];
+ const [images, setImages] = useState
([]);
+
+ useEffect(() => {
+ const imagesEndpoint = `${ApiService.getApiServiceUrl()}/images`;
+ fetch(imagesEndpoint, {
+ method: "GET",
+ body: JSON.stringify({
+ // Pass in username
+ username: "Edward",
+ }),
+ }).then((ret: any) => {
+ setImages(ret);
});
- // Connection closed
- socket.addEventListener('close', () => {
- console.log('WebSocket connection closed.');
+ }, []);
+
+ // state needs to be raised here because the parent needs access to selected
+ // varius dropdown selections
+ const [option, setOption] = useState(options[0]);
+ const [dataType, setDataType] = useState(dataTypes[0]);
+ const [modelType, setModelType] = useState(modelTypes[0]);
+ const [selectedImage, setSelectedImage] = useState(images[0]);
+
+ // file selection
+ const [selectedFile, setSelectedFile] = useState();
+
+ // xlist
+ const [XItems, setXItems] = useState(["aaa", "bbb"]);
+
+ useEffect(() => {
+ const classificationsEndpoint = `${ApiService.getApiServiceUrl()}/classifications`;
+ fetch(classificationsEndpoint, {
+ method: "GET",
+ body: JSON.stringify({
+ username: "Edward",
+ }),
+ }).then((ret: any) => {
+ setXItems(ret);
});
- }
-
-export default function Stage() {
- connectWebSocket(ApiService.getApiServiceUrl());
-
- const options = ['Upload', 'Classify', 'Classifications']
- const dataTypes = ['Planetscope Superdove', 'Orbital Megalaser', 'Global Gigablaster']
- const modelTypes = ['XGBoost', 'Random Forest', 'Neural Network']
- const [images, setImages] = useState([])
-
- useEffect(() => {
- const imagesEndpoint = `${ApiService.getApiServiceUrl()}/images`
- fetch(imagesEndpoint, {
- method: 'GET',
- body: JSON.stringify({
- username: 'Edward', // TODO: pass in username
- }),
- }).then((r: any) => {
- setImages(r)
- })
- }, [])
-
- // state needs to be raised here because the parent needs access to selected
- // varius dropdown selections
- const [option, setOption] = useState(options[0])
- const [dataType, setDataType] = useState(dataTypes[0])
- const [modelType, setModelType] = useState(modelTypes[0])
- const [selectedImage, setSelectedImage] = useState(images[0])
-
- // file selection
- const [selectedFile, setSelectedFile] = useState()
-
- // xlist
- const [XItems, setXItems] = useState(['aaa', 'bbb'])
-
- useEffect(() => {
- const classificationsEndpoint = `${ApiService.getApiServiceUrl()}/classifications`
- fetch(classificationsEndpoint, {
- method: 'GET',
- body: JSON.stringify({
- username: 'Edward'
- })
- }).then((r: any) => {
- setXItems(r)
- })
- }, [])
-
- const handleSelectFile = (e: React.ChangeEvent) => {
- const { files } = e.target;
- const selectedFiles = files as FileList;
- setSelectedFile(selectedFiles?.[0]);
- }
-
- // function callback for upload button click
- const handleUpload = () => {
- if (!selectedFile) {
- alert('No file selected!')
- }
-
- console.log('Uploading file: ' + selectedFile?.name);
-
- let formData = new FormData();
- formData.append("image", selectedFile as File);
-
- // development endpoint
- const uploadEndpoint = `${ApiService.getApiServiceUrl()}/upload/`
- fetch(uploadEndpoint, {
- method: 'POST',
- body: formData
- });
+ }, []);
+
+ const handleSelectFile = (event: React.ChangeEvent) => {
+ const { files } = event.target;
+ const selectedFiles = files as FileList;
+ setSelectedFile(selectedFiles?.[0]);
+ };
+
+ // function callback for upload button click
+ const handleUpload = () => {
+ if (!selectedFile) {
+ // Add custom alert UI later
+ // eslint-disable-next-line no-alert
+ alert("No file selected!");
}
- // function callback for classify button click
- const handleClassify = () => {
+ console.log(`Uploading file: ${selectedFile?.name}`);
- const classifyParams = {
- classifier_id: dataType,
- processer_id: modelType,
- image_ref: selectedImage
- };
+ const formData = new FormData();
+ formData.append("image", selectedFile as File);
- socket.send(JSON.stringify(classifyParams));
- }
-
- var stage = null;
- switch(option) {
- case 'Upload':
- stage = (
-
Upload
-
-
- );
- break;
- case 'Classify':
- stage = (
-
Classify
-
-
-
-
-
-
-
- )
- break;
- case 'Classifications':
- stage = (
-
Classifications
-
- )
- break;
- default:
- break;
- }
-
- return (
-
-
- {stage}
+ // development endpoint
+ const uploadEndpoint = `${ApiService.getApiServiceUrl()}/upload/`;
+ fetch(uploadEndpoint, {
+ method: "POST",
+ body: formData,
+ });
+ };
+
+ // function callback for classify button click
+ const handleClassify = () => {
+ const classifyParams = {
+ classifierId: dataType,
+ processerId: modelType,
+ imageRef: selectedImage,
+ };
+
+ socket.send(JSON.stringify(classifyParams));
+ };
+
+ let stage = null;
+ switch (option) {
+ case "Upload":
+ stage = (
+
+
Upload
+
+
+
+ );
+ break;
+ case "Classify":
+ stage = (
+
+
Classify
+
+
+
+
+
+
+
+
+ );
+ break;
+ case "Classifications":
+ stage = (
+
+
Classifications
+
- )
-}
\ No newline at end of file
+ );
+ break;
+ default:
+ break;
+ }
+
+ return (
+
+
+ {stage}
+
+ );
+}
diff --git a/src/components/XitemList.tsx b/src/components/XitemList.tsx
index 72b061b..0b4cd02 100644
--- a/src/components/XitemList.tsx
+++ b/src/components/XitemList.tsx
@@ -1,46 +1,50 @@
-import React from 'react'
-import "../assets/css/xitem.css"
-import ApiService from '../services/ApiService';
+// Keyboard alternatives for mouse events not needed
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import React from "react";
+
+import "../assets/css/xitem.css";
+import ApiService from "../services/ApiService";
interface XItemListProps {
- XItems: any[],
- setXItems: (v: any[])=>void
-};
+ XItems: any[];
+ setXItems: (v: any[]) => void;
+}
export default function XItemList(props: XItemListProps) {
- const onXClicked = (value: String) => {
- const classificationDeleteEndpoint = `${ApiService.getApiServiceUrl()}/delete`
- fetch(classificationDeleteEndpoint, {
- method: 'DELETE',
- body: JSON.stringify({
- username: 'Edward',
- id: 0
- })
- })
+ const onXClicked = (value: string) => {
+ const classificationDeleteEndpoint = `${ApiService.getApiServiceUrl()}/delete`;
+ fetch(classificationDeleteEndpoint, {
+ method: "DELETE",
+ body: JSON.stringify({
+ username: value,
+ id: 0,
+ }),
+ });
+
+ // Fetch list again
+ const classificationsEndpoint = `${ApiService.getApiServiceUrl()}/classifications`;
+ fetch(classificationsEndpoint, {
+ method: "GET",
+ body: JSON.stringify({
+ username: "Edward",
+ }),
+ }).then((ret: any) => {
+ props.setXItems(ret);
+ });
+ // props.setXItems(
- // TODO: fetch list again
- const classificationsEndpoint = `${ApiService.getApiServiceUrl()}/classifications`
- fetch(classificationsEndpoint, {
- method: 'GET',
- body: JSON.stringify({
- username: 'Edward'
- })
- }).then((r: any) => {
- props.setXItems(r)
- })
- // props.setXItems(
-
- // )
- }
+ // )
+ };
- return (
-
- {React.Children.map(props.XItems, (item) => (
-
-
{item}
-
onXClicked(item)}>x
-
- ))}
+ return (
+
+ {React.Children.map(props.XItems, (item) => (
+
+
{item}
+ {/* eslint-disable-next-line @shopify/jsx-no-hardcoded-content*/}
+
onXClicked(item)}>x
- )
-}
\ No newline at end of file
+ ))}
+
+ );
+}
diff --git a/src/components/login-button.tsx b/src/components/login-button.tsx
index c89aded..06bf440 100644
--- a/src/components/login-button.tsx
+++ b/src/components/login-button.tsx
@@ -16,7 +16,9 @@ export const LoginButton: React.FC = () => {
};
return (
-