Skip to content

Commit

Permalink
update sidebar
Browse files Browse the repository at this point in the history
  • Loading branch information
@nilsmechtel
nilsmechtel committed Aug 19, 2024
1 parent 72981b4 commit 61266f3
Showing 1 changed file with 170 additions and 111 deletions.
281 changes: 170 additions & 111 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Annotation Tool</title>
<title>BioimgeIO Colab</title>
<script src="https://cdn.jsdelivr.net/npm/hypha-rpc@latest/dist/hypha-rpc.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hypha-rpc@latest/dist/hypha-rpc-websocket.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
Expand All @@ -12,36 +12,46 @@
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
/* Define color variables */
:root {
--color-turquoise: #95B0AD;
--color-blue: #314966;
--color-purple: #471C4D;
--color-green: #07332E;
}

.bg-turquoise { background-color: var(--color-turquoise); }
.bg-blue { background-color: var(--color-blue); }
.bg-purple { background-color: var(--color-purple); }
.bg-green { background-color: var(--color-green); }

/* Hover states with 50% transparency */
.bg-turquoise-hover:hover { background-color: rgba(149, 176, 173, 0.3); }
.bg-blue-hover:hover { background-color: rgba(49, 73, 102, 0.3); }
.bg-purple-hover:hover { background-color: rgba(71, 28, 77, 0.3); }
.bg-green-hover:hover { background-color: rgba(7, 51, 46, 0.3); }

.spinner-border {
border: 4px solid rgba(0, 0, 0, 0.1);
border-left-color: #3498db;
border-left-color: var(--color-blue);
border-radius: 50%;
width: 2rem;
height: 2rem;
animation: spin 1s infinite linear;
}

@keyframes spin {
to {
transform: rotate(360deg);
}
}
.clipboard-copy {
display: inline-block;
padding: 0.5rem;
margin-left: 0.5rem;
background-color: #4CAF50;
.tab-active {
background-color: var(--color-turquoise);
border-radius: 0.5rem;
color: white;
border-radius: 0.25rem;
}
.clipboard-copy.show {
animation: fadeInOut 3s;
}
@keyframes fadeInOut {
0% { opacity: 1; }
20% { opacity: 1; }
80% { opacity: 1; }
100% { opacity: 0; }
.separator {
border-top: 1px solid #555;
margin: 1rem 0;
}
</style>
<script src="./worker-manager.js"></script>
Expand All @@ -68,6 +78,7 @@
const [isLoadingAnnotations, setIsLoadingAnnotations] = useState(false);
const [annotationURL, setAnnotationURL] = useState("");
const [copyFeedback, setCopyFeedback] = useState("");
const [activeTab, setActiveTab] = useState("Local Deployment");

useEffect(() => {
const workerManager = new PyodideWorkerManager();
Expand Down Expand Up @@ -215,129 +226,177 @@

return (
<div className="flex h-screen">
<Sidebar onLogin={onLogin} user={user} />
<Sidebar
onLogin={onLogin}
user={user}
activeTab={activeTab}
onTabClick={setActiveTab}
/>
<div className="flex-1 p-4">
<h1 className="text-2xl font-bold mb-4">Crowd-sourcing Annotation Tool</h1>

{isLoadingWorker ? (
<div className="flex justify-center items-center h-full">
<div className="spinner-border"></div>
</div>
) : (
<>
<div className="flex items-center mb-4">
<div className="text-xl font-semibold mr-2">1.</div>
<button
className="bg-blue-500 text-white px-4 py-2 rounded-md"
onClick={mountFolder}
>
Mount Local Folder
</button>
<span className="mx-2 text-xl">→</span>
{activeTab === "Local Deployment" && (
<>
<div className="flex items-center mb-4">
<div className="text-xl font-semibold mr-2">1.</div>
<button
className="bg-purple text-white px-4 py-2 rounded-md"
onClick={mountFolder}
>
Mount Local Folder
</button>
<span className="mx-2 text-xl">→</span>

<div className="text-xl font-semibold mr-2">2.</div>
<button
className="bg-green-500 text-white px-4 py-2 rounded-md"
onClick={createAnnotationSession}
disabled={!isImageFolderMounted}
>
Create Annotation Session
</button>
<span className="mx-2 text-xl">→</span>
<div className="text-xl font-semibold mr-2">2.</div>
<button
className="bg-purple text-white px-4 py-2 rounded-md"
onClick={createAnnotationSession}
disabled={!isImageFolderMounted}
>
Create Annotation Session
</button>
<span className="mx-2 text-xl">→</span>

<div className="text-xl font-semibold mr-2">3.</div>
<button
id="share-url-button"
className="bg-yellow-500 text-white px-4 py-2 rounded-md"
onClick={shareAnnotationURL}
disabled={!isAnnotationSessionCreated}
>
{copyFeedback || "Share Annotation URL"}
</button>
</div>
<div className="text-xl font-semibold mr-2">3.</div>
<button
id="share-url-button"
className="bg-purple text-white px-4 py-2 rounded-md"
onClick={shareAnnotationURL}
disabled={!isAnnotationSessionCreated}
>
{copyFeedback || "Share Annotation URL"}
</button>
</div>

<div className="flex space-x-4">
{isImageFolderMounted && (
<div className="w-1/2 bg-gray-700 p-4 rounded-md overflow-auto"
style={{ maxHeight: 'calc(100vh - 140px)', width: '50%' }}>
<div className="flex justify-between items-center mb-2">
<h2 className="text-xl font-semibold">Number of Images: ({imageList.length})</h2>
<button onClick={() => updateFileList(imageFolderHandle, setImageList, setIsLoadingImages)}>
<i className="fas fa-sync-alt text-white"></i>
</button>
</div>
{isLoadingImages ? (
<div className="flex justify-center items-center h-full">
<div className="spinner-border"></div>
</div>
) : (
<ul>
{imageList.length > 0 ? (
imageList.map((file, index) => (
<li key={index} className="text-white">{file}</li>
))
<div className="flex space-x-4">
{isImageFolderMounted && (
<div className="bg-blue w-1/2 p-4 rounded-md overflow-auto"
style={{ maxHeight: 'calc(100vh - 140px)', width: '50%' }}>
<div className="flex justify-between items-center mb-2">
<h2 className="text-xl font-semibold">Number of Images: ({imageList.length})</h2>
<button onClick={() => updateFileList(imageFolderHandle, setImageList, setIsLoadingImages)}>
<i className="fas fa-sync-alt text-white"></i>
</button>
</div>
{isLoadingImages ? (
<div className="flex justify-center items-center h-full">
<div className="spinner-border"></div>
</div>
) : (
<li className="text-white">No files found.</li>
<ul>
{imageList.length > 0 ? (
imageList.map((file, index) => (
<li key={index} className="text-white">{file}</li>
))
) : (
<li className="text-white">No files found.</li>
)}
</ul>
)}
</ul>
</div>
)}
</div>
)}

{annotationsFolderHandle && (
<div className="w-1/2 bg-gray-700 p-4 rounded-md overflow-auto"
style={{ maxHeight: 'calc(100vh - 140px)', width: '50%' }}>
<div className="flex justify-between items-center mb-2">
<h2 className="text-xl font-semibold">Number of Annotations: ({annotationsList.length})</h2>
<button onClick={() => updateFileList(annotationsFolderHandle, setAnnotationsList, setIsLoadingAnnotations)}>
<i className="fas fa-sync-alt text-white"></i>
</button>
</div>
{isLoadingAnnotations ? (
<div className="flex justify-center items-center h-full">
<div className="spinner-border"></div>
</div>
) : (
<ul>
{annotationsList.length > 0 ? (
annotationsList.map((file, index) => (
<li key={index} className="text-white">{file}</li>
))
{annotationsFolderHandle && (
<div className="w-1/2 bg-blue p-4 rounded-md overflow-auto"
style={{ maxHeight: 'calc(100vh - 140px)', width: '50%' }}>
<div className="flex justify-between items-center mb-2">
<h2 className="text-xl font-semibold">Number of Annotations: ({annotationsList.length})</h2>
<button onClick={() => updateFileList(annotationsFolderHandle, setAnnotationsList, setIsLoadingAnnotations)}>
<i className="fas fa-sync-alt text-white"></i>
</button>
</div>
{isLoadingAnnotations ? (
<div className="flex justify-center items-center h-full">
<div className="spinner-border"></div>
</div>
) : (
<li className="text-white">No files found.</li>
<ul>
{annotationsList.length > 0 ? (
annotationsList.map((file, index) => (
<li key={index} className="text-white">{file}</li>
))
) : (
<li className="text-white">No files found.</li>
)}
</ul>
)}
</ul>
</div>
)}
</div>
)}
</div>
</>
)}

{activeTab === "Remote Deployment" && (
<div className="flex justify-center items-center h-full">
<div className="text-xl flex items-center">
<i className="fas fa-tools mr-2"></i>
<span className="font-semibold">Remote Deployment</span>&nbsp;is coming soon.
</div>
</div>
)}

{activeTab === "My Deployments" && (
<div className="flex justify-center items-center h-full">
<div className="text-xl flex items-center">
<i className="fas fa-tools mr-2"></i>
<span className="font-semibold">My Deployments</span>&nbsp;is coming soon.
</div>
</div>
)}
</>
)}
</div>
</div>
);
}

function Sidebar({ onLogin, user }) {
function Sidebar({ onLogin, user, activeTab, onTabClick }) {
return (
<div className="w-64 bg-gray-800 text-white p-4">
<h2 className="text-xl font-semibold mb-4">Navigation</h2>
<div className="bg-blue w-64 text-white p-4 relative">
<h1 className="text-xl font-semibold mb-4 text-center">Navigation</h1>

<div className="flex justify-center mb-4">
{user.email ? (
<span className="text-white py-2 rounded-md">
Welcome, {user.email}
</span>
) : (
<button
className="bg-turquoise text-white px-10 py-2 rounded-md"
onClick={onLogin}
>
Login
</button>
)}
</div>

<div className="separator"></div>

<ul>
<li className="mb-2"><a href="#" className="text-white">Home</a></li>
<li className="mb-2"><a href="#" className="text-white">Annotations</a></li>
<li className="mb-2"><a href="#" className="text-white">Settings</a></li>
<li
className={`mb-2 p-2 rounded-md cursor-pointer ${activeTab === "Local Deployment" ? "tab-active" : "bg-turquoise-hover"}`}
onClick={() => onTabClick("Local Deployment")}
>
<a href="#" className="text-white">Local Deployment</a>
</li>
<li
className={`mb-2 p-2 rounded-md cursor-pointer ${activeTab === "Remote Deployment" ? "tab-active" : "bg-turquoise-hover"}`}
onClick={() => onTabClick("Remote Deployment")}
>
<a href="#" className="text-white">Remote Deployment</a>
</li>
<li
className={`mb-2 p-2 rounded-md cursor-pointer ${activeTab === "My Deployments" ? "tab-active" : "bg-turquoise-hover"}`}
onClick={() => onTabClick("My Deployments")}
>
<a href="#" className="text-white">My Deployments</a>
</li>
</ul>
<button
className="bg-blue-500 text-white px-4 py-2 rounded-md mb-4"
onClick={onLogin}
>
Login
</button>
{user.email && (
<div className="mt-4 p-4 bg-gray-700 rounded-md">
<p>User: {user.email}</p>
</div>
)}
</div>
);
}
Expand Down

0 comments on commit 61266f3

Please sign in to comment.