-
Notifications
You must be signed in to change notification settings - Fork 2
testbed file organization #429
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -3,11 +3,15 @@ import React, { useState, useEffect } from "react"; | |
| interface RecordMovieComponentProps { | ||
| startRecordingHandler: () => void; | ||
| stopRecordingHandler: () => void; | ||
| setRecordingEnabled: () => void; | ||
| isRecordingEnabled: boolean; | ||
| } | ||
|
|
||
| const RecordMovieComponent = ({ | ||
| startRecordingHandler, | ||
| stopRecordingHandler, | ||
| setRecordingEnabled, | ||
| isRecordingEnabled, | ||
| }: RecordMovieComponentProps): JSX.Element => { | ||
| // recording time measured in seconds | ||
| const [isRecording, setIsRecording] = useState<boolean>(false); | ||
|
|
@@ -43,10 +47,15 @@ const RecordMovieComponent = ({ | |
| }; | ||
|
|
||
| return ( | ||
| <div> | ||
| <div className="ui-container"> | ||
| <button onClick={() => setRecordingEnabled()}> | ||
| {isRecordingEnabled ? "Disable" : "Enable"} Recording | ||
| </button> | ||
|
Comment on lines
+50
to
+53
Contributor
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Moved this into the component so that recording related things are all contained inside the |
||
| <button | ||
| onClick={startRecording} | ||
| disabled={isRecording || !browserSupported} | ||
| disabled={ | ||
| isRecording || !browserSupported || !isRecordingEnabled | ||
| } | ||
| > | ||
| Start Recording | ||
| </button> | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,23 +1,7 @@ | ||
| import React from "react"; | ||
| import { isEqual, findIndex, map, reduce } from "lodash"; | ||
| import { isEqual, findIndex, reduce } from "lodash"; | ||
| import { v4 as uuidv4 } from "uuid"; | ||
|
|
||
| import type { | ||
| ISimulariumFile, | ||
| UIDisplayData, | ||
| SelectionStateInfo, | ||
| SelectionEntry, | ||
| } from "../../type-declarations"; | ||
| import { nullAgent, TrajectoryType } from "../../src/constants"; | ||
| import SimulariumViewer, { | ||
| SimulariumController, | ||
| RenderStyle, | ||
| loadSimulariumFile, | ||
| FrontEndError, | ||
| ErrorLevel, | ||
| NetConnectionParams, | ||
| TrajectoryFileInfo, | ||
| } from "../../src/index"; | ||
| import { InputParams } from "tweakpane"; | ||
|
|
||
| /** | ||
| * NOTE: if you are debugging an import/build issue | ||
|
|
@@ -32,7 +16,23 @@ import SimulariumViewer, { | |
| // FrontEndError, | ||
| // ErrorLevel, | ||
| // } from "../es"; | ||
| import "../../style/style.css"; | ||
| import SimulariumViewer, { | ||
| SimulariumController, | ||
| RenderStyle, | ||
| loadSimulariumFile, | ||
| FrontEndError, | ||
| ErrorLevel, | ||
| NetConnectionParams, | ||
| TrajectoryFileInfo, | ||
| } from "../../src/index"; | ||
| import { nullAgent, TrajectoryType } from "../../src/constants"; | ||
|
|
||
| import type { | ||
| ISimulariumFile, | ||
| UIDisplayData, | ||
| SelectionStateInfo, | ||
| SelectionEntry, | ||
| } from "../../type-declarations"; | ||
| import { AgentData } from "../../type-declarations/simularium/types"; | ||
| import PointSimulator from "./simulators/PointSimulator"; | ||
| import BindingSimulator from "./simulators/BindingSimulator2D"; | ||
|
|
@@ -41,18 +41,25 @@ import PdbSimulator from "./simulators/PdbSimulator"; | |
| import SinglePdbSimulator from "./simulators/SinglePdbSimulator"; | ||
| import CurveSimulator from "./simulators/CurveSimulator"; | ||
| import SingleCurveSimulator from "./simulators/SingleCurveSimulator"; | ||
| import ColorPicker from "./ColorPicker"; | ||
| import RecordMovieComponent from "./RecordMovieComponent"; | ||
| import MetaballSimulator from "./simulators/MetaballSimulator"; | ||
|
|
||
| import ColorPicker from "./Components/ColorPicker"; | ||
| import RecordMovieComponent from "./Components/RecordMovieComponent"; | ||
| import ConversionForm from "./Components/ConversionForm"; | ||
| import AgentMetadata from "./Components/AgentMetadata"; | ||
|
|
||
| import { agentColors } from "./constants"; | ||
| import { BaseType, CustomType } from "./types"; | ||
| import { | ||
| SMOLDYN_TEMPLATE, | ||
| UI_BASE_TYPES, | ||
| UI_CUSTOM_TYPES, | ||
| UI_TEMPLATE_DOWNLOAD_URL_ROOT, | ||
| UI_TEMPLATE_URL_ROOT, | ||
| } from "./api-settings"; | ||
| import ConversionForm from "./ConversionForm"; | ||
| import MetaballSimulator from "./simulators/MetaballSimulator"; | ||
| import AgentMetadata from "./AgentMetadata"; | ||
|
|
||
| import "../../style/style.css"; | ||
| import "./style.css"; | ||
|
|
||
| let playbackFile = "TEST_LIVEMODE_API"; | ||
| let queryStringFile = ""; | ||
|
|
@@ -62,26 +69,6 @@ if (urlParams.has("file")) { | |
| playbackFile = queryStringFile; | ||
| } | ||
|
|
||
| const agentColors = [ | ||
| "#fee34d", | ||
| "#f7b232", | ||
| "#bf5736", | ||
| "#94a7fc", | ||
| "#ce8ec9", | ||
| "#58606c", | ||
| "#0ba345", | ||
| "#9267cb", | ||
| "#81dbe6", | ||
| "#bd7800", | ||
| "#bbbb99", | ||
| "#5b79f0", | ||
| "#89a500", | ||
| "#da8692", | ||
| "#418463", | ||
| "#9f516c", | ||
| "#00aabf", | ||
| ]; | ||
|
|
||
| interface ViewerState { | ||
| renderStyle: RenderStyle; | ||
| particleTypeNames: string[]; | ||
|
|
@@ -113,34 +100,6 @@ interface ViewerState { | |
| followObjectData: AgentData; | ||
| } | ||
|
|
||
| interface BaseType { | ||
| isBaseType: true; | ||
| id: string; | ||
| data: string; | ||
| match: string; | ||
| } | ||
|
|
||
| export interface CustomParameters { | ||
| name: string; | ||
| data_type: string; | ||
| description: string; | ||
| required: boolean; | ||
| help: string; | ||
| options?: string[]; | ||
| } | ||
|
|
||
| interface CustomType { | ||
| [key: string]: { | ||
| "python::module": string; | ||
| "python::object": string; | ||
| parameters: CustomParameters; | ||
| }; | ||
| } | ||
|
|
||
| interface InputParams { | ||
| localBackendServer: boolean; | ||
| } | ||
|
|
||
| const simulariumController = new SimulariumController({}); | ||
|
|
||
| let currentFrame = 0; | ||
|
|
@@ -386,16 +345,21 @@ class Viewer extends React.Component<InputParams, ViewerState> { | |
| public convertFile(obj: Record<string, any>, fileType: TrajectoryType) { | ||
| const fileName = uuidv4() + ".simularium"; | ||
| simulariumController | ||
| .convertTrajectory(this.netConnectionSettings, obj, fileType, fileName) | ||
| .convertTrajectory( | ||
| this.netConnectionSettings, | ||
| obj, | ||
| fileType, | ||
| fileName | ||
| ) | ||
| .then(() => { | ||
| this.clearPendingFile(); | ||
| }) | ||
| .then(() => { | ||
| simulariumController.changeFile( | ||
| { netConnectionSettings: this.netConnectionSettings, }, | ||
| { netConnectionSettings: this.netConnectionSettings }, | ||
| fileName, | ||
| true, | ||
| ) | ||
| true | ||
| ); | ||
| }) | ||
| .catch((err) => { | ||
| console.error(err); | ||
|
|
@@ -410,7 +374,7 @@ class Viewer extends React.Component<InputParams, ViewerState> { | |
| const simulariumFile = fileName.includes(".simularium") | ||
| ? trajectoryFile | ||
| : null; | ||
| this.setState({ initialPlay: true}) | ||
| this.setState({ initialPlay: true }); | ||
| return simulariumController | ||
| .handleFileChange(simulariumFile, fileName, geoAssets) | ||
| .catch(console.log); | ||
|
|
@@ -507,13 +471,18 @@ class Viewer extends React.Component<InputParams, ViewerState> { | |
| [] | ||
| ); | ||
| const uniqueTags: string[] = [...new Set(allTags)]; | ||
| if (isEqual(uiDisplayData, this.state.selectionStateInfo.appliedColors)) { | ||
| if ( | ||
| isEqual(uiDisplayData, this.state.selectionStateInfo.appliedColors) | ||
| ) { | ||
|
Comment on lines
+474
to
+476
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. idk if anyone's especially committed to it, but hot take this repo's 80 column limit is a bit too small
Contributor
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Sizzler! I like it though... @meganrm what do you think about bumping the prettier printWidth to 120? We will vibe with volume-viewer then. AICS style guide anyone? Would actually be nice if this sort of thing was consistent across repos.
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. that's fine with me |
||
| return; | ||
| } | ||
| this.setState({ | ||
| particleTypeNames: uiDisplayData.map((a) => a.name), | ||
| particleTypeTags: uniqueTags, | ||
| selectionStateInfo: {...initialState.selectionStateInfo, appliedColors: uiDisplayData}, | ||
| selectionStateInfo: { | ||
| ...initialState.selectionStateInfo, | ||
| appliedColors: uiDisplayData, | ||
| }, | ||
| }); | ||
| } | ||
|
|
||
|
|
@@ -978,24 +947,16 @@ class Viewer extends React.Component<InputParams, ViewerState> { | |
| updateAgentColorArray={this.updateAgentColorArray} | ||
| setColorSelectionInfo={this.setColorSelectionInfo} | ||
| /> | ||
| <button | ||
| onClick={() => | ||
| this.setRecordingEnabled(!this.state.isRecordingEnabled) | ||
| } | ||
| > | ||
| {this.state.isRecordingEnabled ? "Disable" : "Enable"}{" "} | ||
| Recording | ||
| </button> | ||
| {this.state.isRecordingEnabled && ( | ||
| <RecordMovieComponent | ||
| startRecordingHandler={ | ||
| simulariumController.startRecording | ||
| } | ||
| stopRecordingHandler={ | ||
| simulariumController.stopRecording | ||
| } | ||
| /> | ||
| )} | ||
| <RecordMovieComponent | ||
| startRecordingHandler={simulariumController.startRecording} | ||
| stopRecordingHandler={simulariumController.stopRecording} | ||
| setRecordingEnabled={() => { | ||
| this.setRecordingEnabled( | ||
| !this.state.isRecordingEnabled | ||
| ); | ||
| }} | ||
| isRecordingEnabled={this.state.isRecordingEnabled} | ||
| /> | ||
| <AgentMetadata agentData={this.state.followObjectData} /> | ||
| <div className="viewer-container"> | ||
| <SimulariumViewer | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| export const agentColors: string[] = [ | ||
| "#fee34d", | ||
| "#f7b232", | ||
| "#bf5736", | ||
| "#94a7fc", | ||
| "#ce8ec9", | ||
| "#58606c", | ||
| "#0ba345", | ||
| "#9267cb", | ||
| "#81dbe6", | ||
| "#bd7800", | ||
| "#bbbb99", | ||
| "#5b79f0", | ||
| "#89a500", | ||
| "#da8692", | ||
| "#418463", | ||
| "#9f516c", | ||
| "#00aabf", | ||
| ]; |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| .ui-container { | ||
| border: 1px solid black; | ||
| padding: 6px; | ||
| border-radius: 6px; | ||
| width: fit-content; | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| export interface CustomParameters { | ||
| name: string; | ||
| data_type: string; | ||
| description: string; | ||
| required: boolean; | ||
| help: string; | ||
| options?: string[]; | ||
| } | ||
|
|
||
| export interface BaseType { | ||
| isBaseType: true; | ||
| id: string; | ||
| data: string; | ||
| match: string; | ||
| } | ||
|
|
||
| export interface CustomType { | ||
| [key: string]: { | ||
| "python::module": string; | ||
| "python::object": string; | ||
| parameters: CustomParameters; | ||
| }; | ||
| } | ||
|
|
||
| export interface InputParams { | ||
| localBackendServer: boolean; | ||
| useOctopus: boolean; | ||
| } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Existing custom components get this wrapper to show what they contain, goal is to factor all the loose UI html into components and then get it into a scheme.