Support viewing multiple epochs

This commit is contained in:
Ayaz Hafiz 2023-08-02 17:48:32 -05:00
parent f3c0b54fe9
commit 66b6b8b53d
No known key found for this signature in database
GPG key ID: 0E2A37416A25EF58
12 changed files with 672 additions and 369 deletions

View file

@ -9,6 +9,7 @@ import { TypedEmitter } from "tiny-typed-emitter";
import { VariableLink } from "../Common/VariableLink";
import { VariableMessage } from "../../utils/events";
import { useFocusOutlineEvent } from "../../hooks/useFocusOutlineEvent";
import { UnknownVariable } from "../Common/UnknownVariable";
type AddSubVariableLink = ({
from,
@ -51,12 +52,17 @@ export default function VariableNode({
});
const varType = subs.get(rawVariable);
if (!varType) throw new Error("VariableNode: no entry for variable");
let renderContent: JSX.Element;
let bgStyles: string;
const isContent = varType.type === "descriptor";
switch (varType.type) {
const isContent = varType?.type === "descriptor";
switch (varType?.type) {
case undefined: {
bgStyles = "bg-red-500";
renderContent = <UnknownVariable variable={rawVariable} />;
break;
}
case "link": {
bgStyles = LinkStyles.bg;

View file

@ -325,8 +325,14 @@ function Graph({
graphEe,
eventListEe,
}: VariablesGraphProps): JSX.Element {
const initialNodes: Node[] = [];
const initialEdges: Edge[] = [];
const instance = useReactFlow();
// We need to reset the graph when the subs snapshot changes. I'm not sure
// why this isn't done by the existing state manager.
useEffect(() => {
instance.setNodes([]);
instance.setEdges([]);
}, [instance, subs.epoch]);
const varEe = useRef(new TypedEmitter<VariableMessage>());
// Allow an unbounded number of listeners since we attach a listener for each
@ -343,8 +349,8 @@ function Graph({
useState<LayoutConfiguration>(LAYOUT_CONFIG_DOWN);
const [elements, setElements] = useState<LayoutedElements>({
nodes: initialNodes,
edges: initialEdges,
nodes: [],
edges: [],
});
const [variablesNeedingFocus, setVariablesNeedingFocus] = useState<
@ -548,10 +554,14 @@ function LayoutPanel({
);
}
export default function VariablesGraph(props: VariablesGraphProps) {
export default function VariablesGraph({
subs,
graphEe,
eventListEe,
}: VariablesGraphProps) {
return (
<ReactFlowProvider>
<Graph {...props} />
<Graph subs={subs} graphEe={graphEe} eventListEe={eventListEe} />
</ReactFlowProvider>
);
}