Skip to content

Commit 216e8b0

Browse files
gregzanchgregzanch
authored
Merge branch 'master' into ui-updates
2 parents 50e7227 + 0838e55 commit 216e8b0

File tree

7 files changed

+324
-162
lines changed

7 files changed

+324
-162
lines changed

‎src/components/parameter-config/SolverComponents.tsx‎

Lines changed: 42 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { emit, on } from "../../messenger";
33
import { useSolver } from "../../store";
44
import PropertyRow from "./property-row/PropertyRow";
55
import PropertyRowLabel from "./property-row/PropertyRowLabel";
6-
import PropertyRowButton from "./property-row/PropertyRowButton";
6+
import PropertyRowButton, { PropertyRowButtonWithDisable } from "./property-row/PropertyRowButton";
77
import { PropertyRowCheckbox } from "./property-row/PropertyRowCheckbox";
88
import { PropertyRowTextInput } from "./property-row/PropertyRowTextInput";
99
import { PropertyRowNumberInput } from "./property-row/PropertyRowNumberInput";
@@ -67,3 +67,44 @@ export const createPropertyInputs = <T extends RayTracer|FDTD_2D|ImageSourceSolv
6767
PropertyCheckboxInput: createPropertyInput<T>(event, PropertyRowCheckbox),
6868
})
6969

70+
71+
export const PropertyButton = <T extends keyof EventTypes>({
72+
args,
73+
event,
74+
label,
75+
tooltip
76+
}: {
77+
args: EventTypes[T];
78+
event: T;
79+
label: string;
80+
tooltip: string;
81+
}) => {
82+
return (
83+
<PropertyRow>
84+
<PropertyRowLabel label={label} hasToolTip tooltip={tooltip} />
85+
<PropertyRowButton onClick={(e) => emit(event, args)} label={label} />
86+
</PropertyRow>
87+
);
88+
};
89+
90+
export const PropertyButtonDisabled = <T extends keyof EventTypes>({
91+
args,
92+
event,
93+
label,
94+
tooltip,
95+
disableCondition
96+
}: {
97+
args: EventTypes[T];
98+
event: T;
99+
label: string;
100+
tooltip: string;
101+
disableCondition;
102+
}) => {
103+
return (
104+
<PropertyRow>
105+
<PropertyRowLabel label={label} hasToolTip tooltip={tooltip} />
106+
<PropertyRowButtonWithDisable disableCondition={disableCondition} onClick={(e) => emit(event, args)} label={label} />
107+
</PropertyRow>
108+
);
109+
};
110+

‎src/components/parameter-config/image-source-tab/ImageSourceTab.tsx‎

Lines changed: 168 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,112 @@ import { useContainer, useSolver } from "../../../store";
88
import GridRow from "../../grid-row/GridRow";
99
import TextInput from "../../text-input/TextInput";
1010
import NumberInput from "../../number-input/NumberInput";
11-
import { pickProps } from "../../../common/helpers";
11+
import { filteredMapObject, pickProps } from "../../../common/helpers";
1212
import GridRowSeperator from "../../grid-row/GridRowSeperator";
1313
import Select from 'react-select';
1414
import useToggle from "../../hooks/use-toggle";
15-
import { createPropertyInputs, useSolverProperty } from "../SolverComponents";
15+
import { createPropertyInputs, useSolverProperty, PropertyButton, PropertyButtonDisabled } from "../SolverComponents";
1616
import PropertyRowFolder from "../property-row/PropertyRowFolder";
1717
import PropertyButton from '../property-row/PropertyButton';
18+
import PropertyRow from "../property-row/PropertyRow";
19+
import PropertyRowLabel from "../property-row/PropertyRowLabel";
20+
import PropertyRowCheckbox from "../property-row/PropertyRowCheckbox";
1821

1922
export interface ImageSourceTabProps {
2023
uuid: string;
2124
}
2225

26+
export const ReceiverSelect = ({ uuid }: { uuid: string }) => {
27+
const receivers = useContainer((state) => {
28+
return filteredMapObject(state.containers, (container) =>
29+
container.kind === "receiver" ? pickProps(["uuid", "name"], container) : undefined
30+
) as { uuid: string; name: string }[];
31+
});
32+
33+
const [receiverIDs, setReceiverIDs] = useSolverProperty<RayTracer, "receiverIDs">(
34+
uuid,
35+
"receiverIDs",
36+
"IMAGESOURCE_SET_PROPERTY"
37+
);
38+
39+
return (
40+
<>
41+
{receivers.map((rec) => (
42+
<PropertyRow key={rec.uuid}>
43+
<PropertyRowLabel label={rec.name} hasToolTip={false} />
44+
<PropertyRowCheckbox
45+
value={receiverIDs.includes(rec.uuid)}
46+
onChange={(e) =>
47+
setReceiverIDs({
48+
value: e.value ? [...receiverIDs, rec.uuid] : receiverIDs.filter((x) => x !== rec.uuid)
49+
})
50+
}
51+
/>
52+
</PropertyRow>
53+
))}
54+
</>
55+
);
56+
};
57+
export const SourceSelect = ({ uuid }: { uuid: string }) => {
58+
const sources = useContainer((state) => {
59+
return filteredMapObject(state.containers, (container) =>
60+
container.kind === "source" ? pickProps(["uuid", "name"], container) : undefined
61+
) as { uuid: string; name: string }[];
62+
});
63+
64+
const [sourceIDs, setSourceIDs] = useSolverProperty<RayTracer, "sourceIDs">(
65+
uuid,
66+
"sourceIDs",
67+
"IMAGESOURCE_SET_PROPERTY"
68+
);
69+
70+
return (
71+
<>
72+
{sources.map((src) => (
73+
<PropertyRow key={src.uuid}>
74+
<PropertyRowLabel label={src.name} hasToolTip={false} />
75+
<PropertyRowCheckbox
76+
value={sourceIDs.includes(src.uuid)}
77+
onChange={(e) =>
78+
setSourceIDs({
79+
value: e.value ? [...sourceIDs, src.uuid] : sourceIDs.filter((x) => x !== src.uuid)
80+
})
81+
}
82+
/>
83+
</PropertyRow>
84+
))}
85+
</>
86+
);
87+
};
88+
export const OrderSelect = ({ uuid }: { uuid: string }) => {
89+
const imagesourcesolver = cram.state.solvers[uuid] as ImageSourceSolver;
90+
let allOrders = imagesourcesolver.possibleOrders;
91+
let selectedOrders = imagesourcesolver.plotOrders;
92+
93+
const [sourceIDs, setSourceIDs] = useSolverProperty<RayTracer, "sourceIDs">(
94+
uuid,
95+
"sourceIDs",
96+
"IMAGESOURCE_SET_PROPERTY"
97+
);
98+
99+
return (
100+
<>
101+
{console.log("update")}
102+
{allOrders.map((o) => (
103+
<PropertyRow key={o.value}>
104+
<PropertyRowLabel label={o.value.toString()} hasToolTip={false} />
105+
<PropertyRowCheckbox
106+
value={selectedOrders.includes(o.value)}
107+
onChange={(e) =>
108+
emit("IMAGESOURCE_SET_PROPERTY",{uuid,property: "toggleOrder",value: o.value})
109+
}
110+
/>
111+
</PropertyRow>
112+
))}
113+
</>
114+
);
115+
};
116+
23117
const { PropertyTextInput, PropertyNumberInput, PropertyCheckboxInput } = createPropertyInputs<ImageSourceSolver>(
24118
"IMAGESOURCE_SET_PROPERTY"
25119
);
@@ -86,6 +180,72 @@ const General = ({ uuid }: { uuid: string }) => {
86180
);
87181
};
88182

183+
const Calculation = ({ uuid }: { uuid: string}) => {
184+
const [open, toggle] = useToggle(true);
185+
const imagesourcesolver = cram.state.solvers[uuid] as ImageSourceSolver;
186+
return (
187+
<PropertyRowFolder label="Calculation" open={open} onOpenClose={toggle}>
188+
<PropertyTextInput uuid={uuid} label="Maximum Order" property="maxReflectionOrderReset" tooltip="Sets the maximum reflection order"/>
189+
<PropertyButtonDisabled disableCondition={imagesourcesolver.sourceIDs.length!=1 || imagesourcesolver.receiverIDs.length!=1} event="UPDATE_IMAGESOURCE" args={uuid} label="Update" tooltip="Updates Imagesource Calculation" />
190+
<PropertyButtonDisabled disableCondition={imagesourcesolver.sourceIDs.length!=1 || imagesourcesolver.receiverIDs.length!=1} event="RESET_IMAGESOURCE" args={uuid} label="Clear" tooltip="Clears Imagesource Calculation" />
191+
</PropertyRowFolder>
192+
);
193+
}
194+
195+
const SourceConfiguration = ({ uuid }: { uuid: string}) => {
196+
const [open, toggle] = useToggle(true);
197+
const imagesourcesolver = cram.state.solvers[uuid] as ImageSourceSolver;
198+
return (
199+
<PropertyRowFolder label="Source Configuration" open={open} onOpenClose={toggle}>
200+
<SourceSelect uuid={uuid} />
201+
</PropertyRowFolder>
202+
);
203+
}
204+
205+
const ReceiverConfiguration = ({ uuid }: { uuid: string}) => {
206+
const [open, toggle] = useToggle(true);
207+
const imagesourcesolver = cram.state.solvers[uuid] as ImageSourceSolver;
208+
return (
209+
<PropertyRowFolder label="Receiver Configuration" open={open} onOpenClose={toggle}>
210+
<ReceiverSelect uuid={uuid} />
211+
</PropertyRowFolder>
212+
);
213+
}
214+
215+
const Graphing = ({ uuid }: { uuid: string}) => {
216+
const [open, toggle] = useToggle(true);
217+
const imagesourcesolver = cram.state.solvers[uuid] as ImageSourceSolver;
218+
return (
219+
<PropertyRowFolder label="Graphing" open={open} onOpenClose={toggle}>
220+
<PropertyCheckboxInput uuid={uuid} label="Show Sources" property="imageSourcesVisible" tooltip="Shows/Hides Image Sources"/>
221+
<PropertyCheckboxInput uuid={uuid} label="Show Paths" property="rayPathsVisible" tooltip="Shows/Hides Ray Paths"/>
222+
{/* <Select
223+
isMulti
224+
isClearable
225+
value={imagesourcesolver.selectedPlotOrders}
226+
onChange={e=>{
227+
console.log(e?.map(x => x.value));
228+
emit("IMAGESOURCE_SET_PROPERTY", {uuid, property: "plotOrdersControl", value: e ? e.map(x => x.value) : []});
229+
(imagesourcesolver.imageSourcesVisible) && (imagesourcesolver.drawImageSources());
230+
(imagesourcesolver.rayPathsVisible) && (imagesourcesolver.drawRayPaths());
231+
console.log(imagesourcesolver.selectedPlotOrders);
232+
}}
233+
options={imagesourcesolver.possibleOrders.filter(x=>!imagesourcesolver.plotOrders.includes(x.value))}
234+
/> */}
235+
<OrderSelect uuid={uuid}></OrderSelect>
236+
</PropertyRowFolder>
237+
);
238+
}
239+
240+
const Developer = ({ uuid }: { uuid: string}) => {
241+
const [open, toggle] = useToggle(true);
242+
const imagesourcesolver = cram.state.solvers[uuid] as ImageSourceSolver;
243+
return (
244+
<PropertyRowFolder label="Developer" open={open} onOpenClose={toggle}>
245+
<PropertyButton event="CALCULATE_LTP" args={uuid} label="Calculate LTP" tooltip="Calculates Level Time Progression"/>
246+
</PropertyRowFolder>
247+
);
248+
}
89249
export const ImageSourceTab = ({ uuid }: ImageSourceTabProps) => {
90250
const [imagesourcesolver, set] = useSolver<[ImageSourceSolver, any]>((state) => [state.solvers[uuid] as ImageSourceSolver, state.set]);
91251
const [sources, receivers] = useContainer(getSourcesAndReceivers);
@@ -104,119 +264,13 @@ export const ImageSourceTab = ({ uuid }: ImageSourceTabProps) => {
104264

105265

106266
return (
107-
<div style={{display: 'grid'}}>
267+
<div>
108268
<General uuid={uuid} />
109-
<LabeledTextInputRow label="Name" name="name" value={state.name} onChange={onChangeHandler} />
110-
111-
<GridRow label={"Maximum Order"}>
112-
<NumberInput
113-
name="maxReflectionOrder"
114-
value={imagesourcesolver.maxReflectionOrder}
115-
onChange={(e) => {
116-
emit("IMAGESOURCE_SET_PROPERTY", { uuid, property: "maxReflectionOrder", value: e.value });
117-
}}
118-
/>
119-
</GridRow>
120-
121-
<GridRowSeperator />
122-
123-
<GridRow label={"Calculate Image Sources"}>
124-
<button
125-
disabled={imagesourcesolver.sourceIDs.length==0 || imagesourcesolver.receiverIDs.length==0}
126-
onClick={(e) => {
127-
imagesourcesolver.updateImageSourceCalculation();
128-
}}>
129-
Update
130-
</button>
131-
</GridRow>
132-
133-
<GridRow label={"Clear Calculation"}>
134-
<button
135-
disabled={imagesourcesolver.sourceIDs.length==0 || imagesourcesolver.receiverIDs.length==0}
136-
onClick={(e) => {
137-
imagesourcesolver.reset();
138-
}}>
139-
Clear
140-
</button>
141-
</GridRow>
142-
143-
<GridRow label={"Show Image Sources"}>
144-
<input
145-
type="checkbox"
146-
name="imagesourcesolver"
147-
checked={imagesourcesolver.imageSourcesVisible}
148-
onChange={(e) => {
149-
emit("IMAGESOURCE_SET_PROPERTY", { uuid, property: "imageSourcesVisible", value: !imagesourcesolver.imageSourcesVisible });
150-
}}
151-
/>
152-
</GridRow>
153-
154-
<GridRow label={"Show Ray Paths"}>
155-
<input
156-
type="checkbox"
157-
name="imagesourcesolver"
158-
checked={imagesourcesolver.rayPathsVisible}
159-
onChange={(e) => {
160-
emit("IMAGESOURCE_SET_PROPERTY", { uuid, property: "rayPathsVisible", value: !imagesourcesolver.rayPathsVisible });
161-
}}
162-
/>
163-
</GridRow>
164-
165-
<GridRowSeperator />
166-
<GridRow label="orders">
167-
<Select
168-
isMulti
169-
isClearable
170-
value={imagesourcesolver.selectedPlotOrders}
171-
onChange={e=>{
172-
console.log(e?.map(x => x.value));
173-
emit("IMAGESOURCE_SET_PROPERTY", {uuid, property: "plotOrdersControl", value: e ? e.map(x => x.value) : []});
174-
(imagesourcesolver.imageSourcesVisible) && (imagesourcesolver.drawImageSources());
175-
(imagesourcesolver.rayPathsVisible) && (imagesourcesolver.drawRayPaths());
176-
console.log(imagesourcesolver.selectedPlotOrders);
177-
}}
178-
options={imagesourcesolver.possibleOrders.filter(x=>!imagesourcesolver.plotOrders.includes(x.value))}
179-
/>
180-
</GridRow>
181-
182-
<GridRowSeperator />
183-
<GridRow label="sources">
184-
<Select
185-
isMulti
186-
isClearable
187-
getOptionLabel={item=>item.name}
188-
getOptionValue={item=>item.uuid}
189-
value={sources.filter(x=>imagesourcesolver.sourceIDs.includes(x.uuid))}
190-
onChange={e=>{
191-
emit("IMAGESOURCE_SET_PROPERTY", {uuid, property: "sourceIDs", value: e ? e.map(x=>x.uuid) : []})
192-
}}
193-
options={sources.filter(x=>!imagesourcesolver.sourceIDs.includes(x.uuid))}
194-
/>
195-
</GridRow>
196-
<GridRow label="receivers">
197-
<Select
198-
isMulti
199-
isClearable
200-
getOptionLabel={item=>item.name}
201-
getOptionValue={item=>item.uuid}
202-
value={receivers.filter(x=>imagesourcesolver.receiverIDs.includes(x.uuid))}
203-
onChange={e=>{
204-
emit("IMAGESOURCE_SET_PROPERTY", {uuid, property: "receiverIDs", value: e ? e.map(x=>x.uuid) : []})
205-
}}
206-
options={receivers.filter(x=>!imagesourcesolver.receiverIDs.includes(x.uuid))}
207-
/>
208-
</GridRow>
209-
210-
<GridRowSeperator />
211-
<GridRow label="calculate LTP">
212-
<button
213-
onClick={(e) => {
214-
imagesourcesolver.calculateLTP(343);
215-
}}>
216-
Calculate LTP (to CONSOLE)
217-
</button>
218-
</GridRow>
219-
269+
<Calculation uuid={uuid}/>
270+
<SourceConfiguration uuid={uuid}/>
271+
<ReceiverConfiguration uuid={uuid}/>
272+
<Graphing uuid={uuid}/>
273+
<Developer uuid={uuid}/>
220274
</div>
221275
);
222276
};

0 commit comments

Comments
 (0)