Skip to content

Commit

Permalink
Merge pull request #355 from Chloe66688/loading
Browse files Browse the repository at this point in the history
  • Loading branch information
@HarryLuUMN
HarryLuUMN authored Oct 9, 2024
2 parents 323d48e + e1ef430 commit b0b5814
Show file tree
Hide file tree
Showing 8 changed files with 141 additions and 89 deletions.
2 changes: 1 addition & 1 deletion src/components/Surfaces/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,4 @@ export default function Footer() {
University of Minnesota, Twin Cities.
All Rights Reserved.</span>
</footer>
}
}
9 changes: 8 additions & 1 deletion src/pages/GraphVisualizer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import { injectSVG } from "@/utils/svgUtils";


interface GraphVisualizerProps {
onLoadComplete: () => void;
graph_path: string;
intmData: null | any;
changed: boolean;
Expand All @@ -32,6 +33,7 @@ interface GraphVisualizerProps {
}

const GraphVisualizer: React.FC<GraphVisualizerProps> = ({
onLoadComplete,
graph_path,
intmData,
changed,
Expand Down Expand Up @@ -473,10 +475,15 @@ const GraphVisualizer: React.FC<GraphVisualizerProps> = ({

const runVisualization = async () => {
if ((intmData == null || changed) && !predicted) {
await visualizeGraph(graph_path, () => handleSimulationComplete(visualizationId), true, 0);
await visualizeGraph(graph_path, () => {
handleSimulationComplete(visualizationId);
onLoadComplete();
},
true, 0);
} else {
await visualizeGNN(4);
handleSimulationComplete(visualizationId);
onLoadComplete();
}
};

Expand Down
6 changes: 5 additions & 1 deletion src/pages/MatricesVisualizer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { visualizeMatrix } from "../components/WebUtils";
import { visualizeGraphClassifier } from "@/utils/matNNVis";

interface MatricesVisualizerProps {
onLoadComplete: () => void;
graph_path: string;
intmData: any;
changed: boolean;
Expand All @@ -16,7 +17,8 @@ const MatricesVisualizer: React.FC<MatricesVisualizerProps> = ({
intmData,
changed,
predicted,
selectedButtons
selectedButtons,
onLoadComplete
}) => {
const containerRef = useRef<HTMLDivElement>(null);
const [isLoading, setIsLoading] = useState(true);
Expand All @@ -32,8 +34,10 @@ const MatricesVisualizer: React.FC<MatricesVisualizerProps> = ({
useEffect(() => {
if ((intmData == null || changed) && !predicted) {
visualizeMatrix(graph_path, true, 400);
onLoadComplete();
} else {
visualizeGraphClassifier(setIsLoading, graph_path, intmData);
onLoadComplete();
}

}, [graph_path, intmData, changed]);
Expand Down
16 changes: 16 additions & 0 deletions src/pages/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,14 @@ export const inter3 = Inter({
subsets: ["latin-ext"],
});

const LoadingSpinner = () => (
<div className="fixed top-0 left-0 w-full h-full flex items-center justify-center bg-white bg-opacity-75 z-50">
<div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-gray-900"></div>
</div>
);

export default function Home() {
const [isLoading, setIsLoading] = useState(false);
const [model, setModel] = useState("GCN - graph classification");

const initialMUTAGGraph = Object.keys(graphList)[2];
Expand Down Expand Up @@ -154,6 +161,7 @@ export default function Home() {
onExit={() => { }}
ref={introRef}
/>
{isLoading && <LoadingSpinner />}
<main className={inter.className}>
<div className={inter2.className}>
{step === 0 && (
Expand Down Expand Up @@ -205,6 +213,7 @@ export default function Home() {
<Selector
selectedOption={model}
handleChange={(e) => {
// setIsLoading(true);
const newModel = e.target.value;
setModel(newModel);
setPredicted(false);
Expand Down Expand Up @@ -374,6 +383,7 @@ export default function Home() {
<div className="flex gap-x-4">
<ViewSwitch
handleChange={() => {
setIsLoading(true);
setIsGraphView(!isGraphView);
setSimulation(false);
d3.select(document).on(
Expand Down Expand Up @@ -454,6 +464,7 @@ export default function Home() {
}
setSimulation={setSimulation}
innerComputationMode={modelType}
onLoadComplete={() => setIsLoading(false)}
/>
</>
) : (
Expand All @@ -468,6 +479,7 @@ export default function Home() {
selectedButtons={
selectedButtons
}
onLoadComplete={() => setIsLoading(false)}
/>
</>
)
Expand All @@ -484,6 +496,7 @@ export default function Home() {
}
setSimulation={setSimulation}
innerComputationMode={modelType}
onLoadComplete={() => setIsLoading(false)}
/>
) : (
<NodeMatricesVisualizer
Expand All @@ -492,6 +505,7 @@ export default function Home() {
changed={changedG}
predicted={predicted}
selectedButtons={selectedButtons}
onLoadComplete={() => setIsLoading(false)}
/>
)
) : isGraphView ? (
Expand All @@ -506,6 +520,7 @@ export default function Home() {
hubNodeA={hubNodeA}
hubNodeB={hubNodeB}
innerComputationMode={modelType}
onLoadComplete={() => setIsLoading(false)}
/>
) : (
<LinkMatricesVisualizer
Expand All @@ -517,6 +532,7 @@ export default function Home() {
hubNodeA={hubNodeA}
hubNodeB={hubNodeB}
innerComputationMode={modelType}
onLoadComplete={() => setIsLoading(false)}
/>
)}

Expand Down
11 changes: 9 additions & 2 deletions src/pages/link_classifier/LinkGraphVisualizer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ interface LinkVisualizerProps {
hubNodeA: number;
hubNodeB: number;
innerComputationMode: string;
onLoadComplete: () => void;
}


Expand All @@ -49,7 +50,8 @@ const LinkGraphVisualizer: React.FC<LinkVisualizerProps> = ({
setSimulation,
hubNodeA,
hubNodeB,
innerComputationMode
innerComputationMode,
onLoadComplete
}) => {
const containerRef = useRef<HTMLDivElement>(null);
const [isLoading, setIsLoading] = useState(true);
Expand Down Expand Up @@ -473,10 +475,14 @@ const LinkGraphVisualizer: React.FC<LinkVisualizerProps> = ({

const runVisualization = async () => {
if ((intmData == null || changed) && !predicted) {
await visualizePartialGraph(graph_path, () => handleSimulationComplete(visualizationId), true, 2, hubNodeA, hubNodeB, innerComputationMode);
await visualizePartialGraph(graph_path, () => {
handleSimulationComplete(visualizationId)
onLoadComplete();
}, true, 2, hubNodeA, hubNodeB, innerComputationMode);
} else {
await visualizeGNN();
handleSimulationComplete(visualizationId);
onLoadComplete();
}
};

Expand All @@ -495,6 +501,7 @@ const LinkGraphVisualizer: React.FC<LinkVisualizerProps> = ({
console.error("Error in visualizeGNN:", error);
} finally {
setIsLoading(false);
onLoadComplete();
}
};

Expand Down
170 changes: 89 additions & 81 deletions src/pages/link_classifier/LinkMatrixVisualizer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,99 +4,107 @@ import { visualizeMatrix, visualizePartialGraphMatrix } from "../../components/W
import { visualizeLinkClassifier } from "@/utils/matNNVis";

interface LinkMatricesVisualizerProps {
graph_path: string;
intmData: any;
changed: boolean;
predicted: boolean;
selectedButtons: boolean[];
hubNodeA: number;
hubNodeB: number;
innerComputationMode: string;
graph_path: string;
intmData: any;
changed: boolean;
predicted: boolean;
selectedButtons: boolean[];
hubNodeA: number;
hubNodeB: number;
innerComputationMode: string;
onLoadComplete: () => void;
}

const LinkMatricesVisualizer: React.FC<LinkMatricesVisualizerProps> = ({
graph_path,
intmData,
changed,
predicted,
selectedButtons,
hubNodeA,
hubNodeB,
innerComputationMode,
graph_path,
intmData,
changed,
predicted,
selectedButtons,
hubNodeA,
hubNodeB,
innerComputationMode,
onLoadComplete
}) => {
const containerRef = useRef<HTMLDivElement>(null);
const [isLoading, setIsLoading] = useState(true);
// const lastIntmData = useRef(intmData);
const containerRef = useRef<HTMLDivElement>(null);
const [isLoading, setIsLoading] = useState(true);

// This is really messy but init will stay at the top to remain in the scope of all functions

useEffect(() => {
useEffect(() => {
const visualizeData = async () => {
try {
setIsLoading(true);
if ((intmData == null || changed) && !predicted) {
console.log("visualize partial graph");
let gridSize = 800;
visualizePartialGraphMatrix(graph_path, false, gridSize, hubNodeA, hubNodeB);
console.log("visualize partial graph");
let gridSize = 800;
await visualizePartialGraphMatrix(graph_path, false, gridSize, hubNodeA, hubNodeB);
} else {
console.log("visualize link classifier", hubNodeA, hubNodeB);
visualizeLinkClassifier(setIsLoading, graph_path, intmData, hubNodeA, hubNodeB, innerComputationMode);
console.log("visualize link classifier", hubNodeA, hubNodeB);
await visualizeLinkClassifier(setIsLoading, graph_path, intmData, hubNodeA, hubNodeB, innerComputationMode);
}
}, [graph_path, intmData, changed, hubNodeA, hubNodeB]);

} catch (error) {
console.error("Error visualizing data:", error);
} finally {
setIsLoading(false);
onLoadComplete(); // 确保在可视化完成后调用
}
};

const updateTextElements = (svg: SVGSVGElement, selectedButtons: boolean[]) => {
console.log("selected buttons", selectedButtons);
visualizeData();
}, [graph_path, intmData, changed, hubNodeA, hubNodeB, predicted, onLoadComplete]);

d3.select(svg)
.selectAll(".layerVis")
.each(function (d, i) {
const g1 = d3.select(this);

g1.selectAll("text.layerName")
.transition()
.duration(140)
.style("opacity", () => {
if ((i <= 1 && selectedButtons[i]) ||
(i === 2 && selectedButtons[2]) ||
(i === 3 && selectedButtons[6])) {
return 1;
}
return 0.5;
})
.attr("font-size", () => {
if ((i <= 1 && selectedButtons[i]) ||
(i === 2 && selectedButtons[2]) ||
(i === 3 && selectedButtons[6])) {
return "18px";
}
return "15px";
});
const updateTextElements = (svg: SVGSVGElement, selectedButtons: boolean[]) => {
console.log("selected buttons", selectedButtons);
d3.select(svg)
.selectAll(".layerVis")
.each(function (d, i) {
const g1 = d3.select(this);
g1.selectAll("text.layerName")
.transition()
.duration(140)
.style("opacity", () => {
if ((i <= 1 && selectedButtons[i]) ||
(i === 2 && selectedButtons[2]) ||
(i === 3 && selectedButtons[6])) {
return 1;
}
return 0.5;
})
.attr("font-size", () => {
if ((i <= 1 && selectedButtons[i]) ||
(i === 2 && selectedButtons[2]) ||
(i === 3 && selectedButtons[6])) {
return "18px";
}
return "15px";
});
};
useEffect(() => {
const svg = d3
.select("#matvis")
.select("svg.mats")
.node() as SVGSVGElement;
if (svg && !isLoading) {
updateTextElements(svg, selectedButtons);
}
});
};

}, [selectedButtons, isLoading]);
useEffect(() => {
const svg = d3
.select("#matvis")
.select("svg.mats")
.node() as SVGSVGElement;
if (svg && !isLoading) {
updateTextElements(svg, selectedButtons);
}
}, [selectedButtons, isLoading]);

return (
<div
id="matvis"
ref={containerRef}
style={{
width: "100%",
display: "flex",
flexDirection: "column",
alignItems: "start",
height: "auto",
overflow: "auto", // this enables scrollbars if content overflows
overflowX: "auto",
}}
></div>
);
return (
<div
id="matvis"
ref={containerRef}
style={{
width: "100%",
display: "flex",
flexDirection: "column",
alignItems: "start",
height: "auto",
overflow: "auto",
overflowX: "auto",
}}
></div>
);
};

export default LinkMatricesVisualizer;
export default LinkMatricesVisualizer;
Loading

0 comments on commit b0b5814

Please sign in to comment.