-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
fb887fa
commit f052796
Showing
10 changed files
with
271 additions
and
124 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| interface CSVFilenameProps { | ||
| name: string; | ||
| } | ||
|
|
||
| export function CSVFilename(props: CSVFilenameProps) { | ||
| return <div> | ||
| <span className="text-md font-medium">CSV file: </span> | ||
| <span>{props.name}</span> | ||
| </div> | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| import { useRouter } from 'next/router' | ||
| import React, { useState, useEffect } from 'react'; | ||
| import { getColumnConfig, readDataset } from "../../../backend/dataset"; | ||
| import ConfigureDataset from "../../../components/ConfigureDataset"; | ||
| import TitleBar from "../../../components/TitleBar"; | ||
| import Main from "../../../components/Main"; | ||
| import { parseCSVFile, createColumnDetails, createColumnSettings } from "../../../backend/parseCSV"; | ||
| import Spinner from '@/components/Spinner'; | ||
|
|
||
|
|
||
| export default function Home() { | ||
| const router = useRouter() | ||
| const [datasetID, setDatasetID] = useState<string>(); | ||
| const [datasetName, setDatasetName] = useState<string>(); | ||
| const [columnDetails, setColumnDetails] = useState<any>(); | ||
| const [columnSettings, setColumnSettings] = useState<any>(); | ||
|
|
||
| useEffect(() => { | ||
| if (router.query.dataset && typeof router.query.dataset === "string") { | ||
| showConfigureDatasetPanel(router.query.dataset); | ||
| if (router.query.name && typeof router.query.name === "string") { | ||
| setDatasetName(router.query.name); | ||
| } else { | ||
| setDatasetName(router.query.dataset); | ||
| } | ||
| } | ||
| }, [router.query.dataset]); | ||
|
|
||
| async function showConfigureDatasetPanel(newDatasetId: string) { | ||
| const datasetContent = await readDataset(newDatasetId); | ||
| const rows = await parseCSVFile(datasetContent); | ||
| const details = createColumnDetails(rows); | ||
| const columnConfig = await getColumnConfig(); | ||
| const settings = createColumnSettings(details, columnConfig); | ||
| setDatasetID(newDatasetId); | ||
| setColumnDetails(details); | ||
| setColumnSettings(settings); | ||
| } | ||
|
|
||
| function visualizeData() { | ||
| router.push({ | ||
| pathname: `/dataset/${datasetID}/visualize`, | ||
| query: { | ||
| name: router.query.name, | ||
| label: columnSettings.label, | ||
| url: columnSettings.url, | ||
| selected: columnSettings.selected | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| function onClickBack() { | ||
| router.back(); | ||
| } | ||
|
|
||
| let content = <Spinner />; | ||
| if (datasetID && datasetName) { | ||
| content = <ConfigureDataset | ||
| datasetName={datasetName} | ||
| columnDetails={columnDetails} | ||
| columnSettings={columnSettings} | ||
| setColumnSettings={setColumnSettings} | ||
| visualizeData={visualizeData} | ||
| onClickBack={onClickBack} | ||
| />; | ||
| } | ||
| return ( | ||
| <> | ||
| <TitleBar selected="/" /> | ||
| <Main> | ||
| <div> | ||
| {content} | ||
| </div> | ||
| </Main> | ||
| </> | ||
| ) | ||
| } |
123 changes: 123 additions & 0 deletions
123
andromeda-ui/pages/dataset/[dataset]/visualize/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,123 @@ | ||
| import dynamic from 'next/dynamic' | ||
| import { useRouter } from 'next/router' | ||
| import React, { useState, useEffect } from 'react'; | ||
| import TitleBar from "../../../../components/TitleBar"; | ||
| import Main from "../../../../components/Main"; | ||
| import { showError } from "../../../../util/toast"; | ||
|
|
||
| const DataExplorer = dynamic(() => import("../../../../components/DataExplorer"), { | ||
| ssr: false, | ||
| }); | ||
| import { uploadDataset, dimensionalReduction, reverseDimensionalReduction, | ||
| calculatePointScaling, getColumnConfig, readDataset } from "../../../../backend/dataset"; | ||
| import { parseCSVFile, createColumnDetails, createColumnSettings } from "../../../../backend/parseCSV"; | ||
| import Spinner from '@/components/Spinner'; | ||
| import { CSVFilename } from '@/components/CSVFilename'; | ||
|
|
||
|
|
||
| const DEFAULT_POINT_SCALING = 1.0; | ||
|
|
||
| export default function Home() { | ||
| const router = useRouter() | ||
|
|
||
| const [datasetID, setDatasetID] = useState<string>(); | ||
| const [datasetName, setDatasetName] = useState<string>(""); | ||
| const [imageData, setImageData] = useState<any[]>(); | ||
| const [weightData, setWeightData] = useState<any[]>(); | ||
| const [columnSettings, setColumnSettings] = useState<any>(); | ||
| const [pointScaling, setPointScaling] = useState<number>(DEFAULT_POINT_SCALING); | ||
|
|
||
| useEffect(() => { | ||
| if (router.query.dataset && typeof router.query.dataset === "string") { | ||
| showDataExplorer(router.query.dataset); | ||
| if (router.query.name && typeof router.query.name === "string") { | ||
| setDatasetName(router.query.name); | ||
| } else { | ||
| setDatasetName(router.query.dataset); | ||
| } | ||
| } | ||
| }, [router.query.dataset, router.query.name]); | ||
|
|
||
| useEffect(() => { | ||
| if (datasetID && columnSettings) { | ||
| const initialWeights = { all: 1.0 / columnSettings.selected.length }; | ||
| performDimensionalReduction(datasetID, initialWeights); | ||
| } | ||
| }, [datasetID, columnSettings]); | ||
|
|
||
| async function showDataExplorer(newDatasetId:string) { | ||
| const settings = { | ||
| label: router.query.label, | ||
| url: router.query.url, | ||
| selected: router.query.selected | ||
| }; | ||
| console.log(settings); | ||
| setDatasetID(newDatasetId); | ||
| setColumnSettings(settings); | ||
| setImageData(undefined); | ||
| setWeightData(undefined); | ||
| } | ||
|
|
||
| async function performDimensionalReduction(id: string, weights: any) { | ||
| try { | ||
| const result = await dimensionalReduction(id, weights, columnSettings) | ||
| setDatasetID(id); | ||
| setPointScaling(calculatePointScaling(result.images)); | ||
| setImageData(result.images); | ||
| setWeightData(result.weights); | ||
| return result; | ||
| } catch (error: any) { | ||
| console.log(error); | ||
| showError(error.message); | ||
| } | ||
| return null; | ||
| } | ||
|
|
||
| async function performReverseDimensionalReduction(id: string, movedPositions: any[]) { | ||
| try { | ||
| const result = await reverseDimensionalReduction(id, movedPositions, columnSettings) | ||
| setWeightData(result.weights); | ||
| return result; | ||
| } catch (error: any) { | ||
| console.log(error); | ||
| showError(error.message); | ||
| } | ||
| return null; | ||
| } | ||
| function onDataExplorerClickBack() { | ||
| router.back() | ||
| } | ||
|
|
||
| let content = <Spinner />;; | ||
| if (datasetID && imageData) { | ||
| content = | ||
| <> | ||
| <DataExplorer | ||
| datasetID={datasetID} | ||
| images={imageData} | ||
| weights={weightData} | ||
| setImageData={setImageData} | ||
| drFunc={performDimensionalReduction} | ||
| rdrFunc={performReverseDimensionalReduction} | ||
| columnSettings={columnSettings} | ||
| onClickBack={onDataExplorerClickBack} | ||
| pointScaling={pointScaling} | ||
| setPointScaling={setPointScaling} | ||
| /> | ||
| </>; | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| <TitleBar selected="/" /> | ||
| <Main> | ||
| <div> | ||
| <CSVFilename name={datasetName} /> | ||
| </div> | ||
| <div> | ||
| {content} | ||
| </div> | ||
| </Main> | ||
| </> | ||
| ) | ||
| } |
Oops, something went wrong.