Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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>;
Copy link
Contributor Author

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.

}
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
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>
Comment on lines +50 to +53
Copy link
Contributor Author

Choose a reason for hiding this comment

The 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 ui-container class.

<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)
) {
Comment on lines +474 to +476
Copy link
Contributor

Choose a reason for hiding this comment

The 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

Copy link
Contributor Author

Choose a reason for hiding this comment

The 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.

Copy link
Contributor

Choose a reason for hiding this comment

The 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,
},
});
}

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;
}