Skip to content

Commit 0d270ed

Browse files
interim17interim17
committed
components folder, types file, constants file and stylesheet for test bed viewer
1 parent 3f344f8 commit 0d270ed

File tree

11 files changed

+130
-106
lines changed

11 files changed

+130
-106
lines changed

examples/src/AgentMetadata.tsx renamed to examples/src/Components/AgentMetadata.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
import React from "react";
2-
import { AgentData } from "../../type-declarations/simularium/types";
2+
import { AgentData } from "../../../type-declarations/simularium/types";
33

44
interface AgentMetadataProps {
55
agentData: AgentData;
66
}
77

88
const AgentMetadata = ({ agentData }: AgentMetadataProps): JSX.Element => {
9-
109
const getContents = () => {
1110
if (agentData.instanceId === -1) {
12-
return <div>No agent selected</div>;
11+
return <div className="ui-container">No agent selected</div>;
1312
}
1413
return (
15-
<div>
14+
<div className="ui-container">
15+
<div>Agent metadata</div>
1616
<div> uniqueID: {agentData.instanceId}</div>
1717
<div> agentType: {agentData.type}</div>
1818
<div>
@@ -28,7 +28,7 @@ const AgentMetadata = ({ agentData }: AgentMetadataProps): JSX.Element => {
2828
);
2929
};
3030

31-
return <div>Agent Metadata: {getContents()}</div>;
31+
return getContents();
3232
};
3333

3434
export default AgentMetadata;

examples/src/ColorPicker.tsx renamed to examples/src/Components/ColorPicker.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState } from "react";
2-
import { UIDisplayData } from "../../src";
2+
import { UIDisplayData } from "../../../src";
33

44
type ColorPickerProps = {
55
uiDisplayData: UIDisplayData;
@@ -90,7 +90,7 @@ const ColorPicker = ({
9090
};
9191

9292
return (
93-
<>
93+
<div className="ui-container">
9494
<span>Color change agent selections:</span>
9595
<select id="agentSelect" onChange={handleAgentSelection}>
9696
<option value=""> Select Agent</option>
@@ -139,7 +139,7 @@ const ColorPicker = ({
139139
<button onClick={() => addColorToColorArray(colorToAppend)}>
140140
Add color to color array
141141
</button>
142-
</>
142+
</div>
143143
);
144144
};
145145

examples/src/ConversionForm/BaseInput.tsx renamed to examples/src/Components/ConversionForm/BaseInput.tsx

File renamed without changes.

examples/src/ConversionForm/CollectionInput.tsx renamed to examples/src/Components/ConversionForm/CollectionInput.tsx

File renamed without changes.

examples/src/ConversionForm/InputSwitch.tsx renamed to examples/src/Components/ConversionForm/InputSwitch.tsx

File renamed without changes.

examples/src/ConversionForm/index.tsx renamed to examples/src/Components/ConversionForm/index.tsx

File renamed without changes.

examples/src/RecordMovieComponent.tsx renamed to examples/src/Components/RecordMovieComponent.tsx

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
1+
import { set } from "lodash";
12
import React, { useState, useEffect } from "react";
23

34
interface RecordMovieComponentProps {
45
startRecordingHandler: () => void;
56
stopRecordingHandler: () => void;
7+
setRecordingEnabled: () => void;
8+
isRecordingEnabled: boolean;
69
}
710

811
const RecordMovieComponent = ({
912
startRecordingHandler,
1013
stopRecordingHandler,
14+
setRecordingEnabled,
15+
isRecordingEnabled,
1116
}: RecordMovieComponentProps): JSX.Element => {
1217
// recording time measured in seconds
1318
const [isRecording, setIsRecording] = useState<boolean>(false);
@@ -43,10 +48,15 @@ const RecordMovieComponent = ({
4348
};
4449

4550
return (
46-
<div>
51+
<div className="ui-container">
52+
<button onClick={() => setRecordingEnabled()}>
53+
{isRecordingEnabled ? "Disable" : "Enable"} Recording
54+
</button>
4755
<button
4856
onClick={startRecording}
49-
disabled={isRecording || !browserSupported}
57+
disabled={
58+
isRecording || !browserSupported || !isRecordingEnabled
59+
}
5060
>
5161
Start Recording
5262
</button>

‎examples/src/Viewer.tsx‎

Lines changed: 57 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,7 @@
11
import React from "react";
22
import { isEqual, findIndex, map, reduce } from "lodash";
33
import { v4 as uuidv4 } from "uuid";
4-
5-
import type {
6-
ISimulariumFile,
7-
UIDisplayData,
8-
SelectionStateInfo,
9-
SelectionEntry,
10-
} from "../../type-declarations";
11-
import { nullAgent, TrajectoryType } from "../../src/constants";
12-
import SimulariumViewer, {
13-
SimulariumController,
14-
RenderStyle,
15-
loadSimulariumFile,
16-
FrontEndError,
17-
ErrorLevel,
18-
NetConnectionParams,
19-
TrajectoryFileInfo,
20-
} from "../../src/index";
4+
import { InputParams } from "tweakpane";
215

226
/**
237
* NOTE: if you are debugging an import/build issue
@@ -32,7 +16,23 @@ import SimulariumViewer, {
3216
// FrontEndError,
3317
// ErrorLevel,
3418
// } from "../es";
35-
import "../../style/style.css";
19+
import SimulariumViewer, {
20+
SimulariumController,
21+
RenderStyle,
22+
loadSimulariumFile,
23+
FrontEndError,
24+
ErrorLevel,
25+
NetConnectionParams,
26+
TrajectoryFileInfo,
27+
} from "../../src/index";
28+
import { nullAgent, TrajectoryType } from "../../src/constants";
29+
30+
import type {
31+
ISimulariumFile,
32+
UIDisplayData,
33+
SelectionStateInfo,
34+
SelectionEntry,
35+
} from "../../type-declarations";
3636
import { AgentData } from "../../type-declarations/simularium/types";
3737
import PointSimulator from "./simulators/PointSimulator";
3838
import BindingSimulator from "./simulators/BindingSimulator2D";
@@ -41,18 +41,25 @@ import PdbSimulator from "./simulators/PdbSimulator";
4141
import SinglePdbSimulator from "./simulators/SinglePdbSimulator";
4242
import CurveSimulator from "./simulators/CurveSimulator";
4343
import SingleCurveSimulator from "./simulators/SingleCurveSimulator";
44-
import ColorPicker from "./ColorPicker";
45-
import RecordMovieComponent from "./RecordMovieComponent";
44+
import MetaballSimulator from "./simulators/MetaballSimulator";
45+
46+
import ColorPicker from "./Components/ColorPicker";
47+
import RecordMovieComponent from "./Components/RecordMovieComponent";
48+
import ConversionForm from "./Components/ConversionForm";
49+
import AgentMetadata from "./Components/AgentMetadata";
50+
51+
import { agentColors } from "./constants";
52+
import { BaseType, CustomType } from "./types";
4653
import {
4754
SMOLDYN_TEMPLATE,
4855
UI_BASE_TYPES,
4956
UI_CUSTOM_TYPES,
5057
UI_TEMPLATE_DOWNLOAD_URL_ROOT,
5158
UI_TEMPLATE_URL_ROOT,
5259
} from "./api-settings";
53-
import ConversionForm from "./ConversionForm";
54-
import MetaballSimulator from "./simulators/MetaballSimulator";
55-
import AgentMetadata from "./AgentMetadata";
60+
61+
import "../../style/style.css";
62+
import "./style.css";
5663

5764
let playbackFile = "TEST_LIVEMODE_API";
5865
let queryStringFile = "";
@@ -62,26 +69,6 @@ if (urlParams.has("file")) {
6269
playbackFile = queryStringFile;
6370
}
6471

65-
const agentColors = [
66-
"#fee34d",
67-
"#f7b232",
68-
"#bf5736",
69-
"#94a7fc",
70-
"#ce8ec9",
71-
"#58606c",
72-
"#0ba345",
73-
"#9267cb",
74-
"#81dbe6",
75-
"#bd7800",
76-
"#bbbb99",
77-
"#5b79f0",
78-
"#89a500",
79-
"#da8692",
80-
"#418463",
81-
"#9f516c",
82-
"#00aabf",
83-
];
84-
8572
interface ViewerState {
8673
renderStyle: RenderStyle;
8774
particleTypeNames: string[];
@@ -113,34 +100,6 @@ interface ViewerState {
113100
followObjectData: AgentData;
114101
}
115102

116-
interface BaseType {
117-
isBaseType: true;
118-
id: string;
119-
data: string;
120-
match: string;
121-
}
122-
123-
export interface CustomParameters {
124-
name: string;
125-
data_type: string;
126-
description: string;
127-
required: boolean;
128-
help: string;
129-
options?: string[];
130-
}
131-
132-
interface CustomType {
133-
[key: string]: {
134-
"python::module": string;
135-
"python::object": string;
136-
parameters: CustomParameters;
137-
};
138-
}
139-
140-
interface InputParams {
141-
localBackendServer: boolean;
142-
}
143-
144103
const simulariumController = new SimulariumController({});
145104

146105
let currentFrame = 0;
@@ -386,16 +345,21 @@ class Viewer extends React.Component<InputParams, ViewerState> {
386345
public convertFile(obj: Record<string, any>, fileType: TrajectoryType) {
387346
const fileName = uuidv4() + ".simularium";
388347
simulariumController
389-
.convertTrajectory(this.netConnectionSettings, obj, fileType, fileName)
348+
.convertTrajectory(
349+
this.netConnectionSettings,
350+
obj,
351+
fileType,
352+
fileName
353+
)
390354
.then(() => {
391355
this.clearPendingFile();
392356
})
393357
.then(() => {
394358
simulariumController.changeFile(
395-
{ netConnectionSettings: this.netConnectionSettings, },
359+
{ netConnectionSettings: this.netConnectionSettings },
396360
fileName,
397-
true,
398-
)
361+
true
362+
);
399363
})
400364
.catch((err) => {
401365
console.error(err);
@@ -410,7 +374,7 @@ class Viewer extends React.Component<InputParams, ViewerState> {
410374
const simulariumFile = fileName.includes(".simularium")
411375
? trajectoryFile
412376
: null;
413-
this.setState({ initialPlay: true})
377+
this.setState({ initialPlay: true });
414378
return simulariumController
415379
.handleFileChange(simulariumFile, fileName, geoAssets)
416380
.catch(console.log);
@@ -507,13 +471,18 @@ class Viewer extends React.Component<InputParams, ViewerState> {
507471
[]
508472
);
509473
const uniqueTags: string[] = [...new Set(allTags)];
510-
if (isEqual(uiDisplayData, this.state.selectionStateInfo.appliedColors)) {
474+
if (
475+
isEqual(uiDisplayData, this.state.selectionStateInfo.appliedColors)
476+
) {
511477
return;
512478
}
513479
this.setState({
514480
particleTypeNames: uiDisplayData.map((a) => a.name),
515481
particleTypeTags: uniqueTags,
516-
selectionStateInfo: {...initialState.selectionStateInfo, appliedColors: uiDisplayData},
482+
selectionStateInfo: {
483+
...initialState.selectionStateInfo,
484+
appliedColors: uiDisplayData,
485+
},
517486
});
518487
}
519488

@@ -978,24 +947,16 @@ class Viewer extends React.Component<InputParams, ViewerState> {
978947
updateAgentColorArray={this.updateAgentColorArray}
979948
setColorSelectionInfo={this.setColorSelectionInfo}
980949
/>
981-
<button
982-
onClick={() =>
983-
this.setRecordingEnabled(!this.state.isRecordingEnabled)
984-
}
985-
>
986-
{this.state.isRecordingEnabled ? "Disable" : "Enable"}{" "}
987-
Recording
988-
</button>
989-
{this.state.isRecordingEnabled && (
990-
<RecordMovieComponent
991-
startRecordingHandler={
992-
simulariumController.startRecording
993-
}
994-
stopRecordingHandler={
995-
simulariumController.stopRecording
996-
}
997-
/>
998-
)}
950+
<RecordMovieComponent
951+
startRecordingHandler={simulariumController.startRecording}
952+
stopRecordingHandler={simulariumController.stopRecording}
953+
setRecordingEnabled={() => {
954+
this.setRecordingEnabled(
955+
!this.state.isRecordingEnabled
956+
);
957+
}}
958+
isRecordingEnabled={this.state.isRecordingEnabled}
959+
/>
999960
<AgentMetadata agentData={this.state.followObjectData} />
1000961
<div className="viewer-container">
1001962
<SimulariumViewer

‎examples/src/constants.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
export const agentColors: string[] = [
2+
"#fee34d",
3+
"#f7b232",
4+
"#bf5736",
5+
"#94a7fc",
6+
"#ce8ec9",
7+
"#58606c",
8+
"#0ba345",
9+
"#9267cb",
10+
"#81dbe6",
11+
"#bd7800",
12+
"#bbbb99",
13+
"#5b79f0",
14+
"#89a500",
15+
"#da8692",
16+
"#418463",
17+
"#9f516c",
18+
"#00aabf",
19+
];

‎examples/src/style.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.ui-container {
2+
border: 1px solid black;
3+
padding: 6px;
4+
border-radius: 6px;
5+
width: fit-content;
6+
}

0 commit comments

Comments
 (0)