Skip to content

Commit

Permalink
testbed file organization (#429)
Browse files Browse the repository at this point in the history
* components folder, types file, constants file and stylesheet for test bed viewer

* remove unneeded getContents function from AgentMetadata
  • Loading branch information
interim17 authored Nov 18, 2024
1 parent 3f344f8 commit cf905dd
Show file tree
Hide file tree
Showing 11 changed files with 129 additions and 110 deletions.
Original file line number Diff line number Diff line change
@@ -1,18 +1,17 @@
import React from "react";
import { AgentData } from "../../type-declarations/simularium/types";
import { AgentData } from "../../../type-declarations/simularium/types";

interface AgentMetadataProps {
agentData: AgentData;
}

const AgentMetadata = ({ agentData }: AgentMetadataProps): JSX.Element => {

const getContents = () => {
if (agentData.instanceId === -1) {
return <div>No agent selected</div>;
return <div className="ui-container">No agent selected</div>;
}
return (
<div>
<div className="ui-container">
<div>Agent metadata</div>
<div> uniqueID: {agentData.instanceId}</div>
<div> agentType: {agentData.type}</div>
<div>
Expand All @@ -28,7 +27,4 @@ const AgentMetadata = ({ agentData }: AgentMetadataProps): JSX.Element => {
);
};

return <div>Agent Metadata: {getContents()}</div>;
};

export default AgentMetadata;
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useState } from "react";
import { UIDisplayData } from "../../src";
import { UIDisplayData } from "../../../src";

type ColorPickerProps = {
uiDisplayData: UIDisplayData;
Expand Down Expand Up @@ -90,7 +90,7 @@ const ColorPicker = ({
};

return (
<>
<div className="ui-container">
<span>Color change agent selections:</span>
<select id="agentSelect" onChange={handleAgentSelection}>
<option value=""> Select Agent</option>
Expand Down Expand Up @@ -139,7 +139,7 @@ const ColorPicker = ({
<button onClick={() => addColorToColorArray(colorToAppend)}>
Add color to color array
</button>
</>
</div>
);
};

Expand Down
File renamed without changes.
File renamed without changes.
File renamed without changes.
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -43,10 +47,15 @@ const RecordMovieComponent = ({
};

return (
<div>
<div className="ui-container">
<button onClick={() => setRecordingEnabled()}>
{isRecordingEnabled ? "Disable" : "Enable"} Recording
</button>
<button
onClick={startRecording}
disabled={isRecording || !browserSupported}
disabled={
isRecording || !browserSupported || !isRecordingEnabled
}
>
Start Recording
</button>
Expand Down
155 changes: 58 additions & 97 deletions examples/src/Viewer.tsx
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
Expand All @@ -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";
Expand All @@ -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 = "";
Expand All @@ -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[];
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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);
Expand All @@ -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);
Expand Down Expand Up @@ -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)
) {
return;
}
this.setState({
particleTypeNames: uiDisplayData.map((a) => a.name),
particleTypeTags: uniqueTags,
selectionStateInfo: {...initialState.selectionStateInfo, appliedColors: uiDisplayData},
selectionStateInfo: {
...initialState.selectionStateInfo,
appliedColors: uiDisplayData,
},
});
}

Expand Down Expand Up @@ -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
Expand Down
19 changes: 19 additions & 0 deletions examples/src/constants.ts
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",
];
6 changes: 6 additions & 0 deletions examples/src/style.css
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;
}
28 changes: 28 additions & 0 deletions examples/src/types.ts
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;
}

0 comments on commit cf905dd

Please sign in to comment.