mirror of
https://github.com/roc-lang/roc.git
synced 2025-10-02 00:01:16 +00:00
Support viewing multiple epochs
This commit is contained in:
parent
f3c0b54fe9
commit
66b6b8b53d
12 changed files with 672 additions and 369 deletions
|
@ -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;
|
||||
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue