chore: save progress
This commit is contained in:
parent
1a64bef3d3
commit
026411072b
|
@ -40,8 +40,10 @@ const getEdgeLabel = async (squiggleString) => {
|
||||||
|
|
||||||
export function Graph({ listOfElements, links }) {
|
export function Graph({ listOfElements, links }) {
|
||||||
const containerRef = useRef();
|
const containerRef = useRef();
|
||||||
|
const [visibility, setVisibility] = useState("invisible");
|
||||||
|
|
||||||
const callEffect = async (listOfElements, links) => {
|
const callEffect = async (listOfElements, links) => {
|
||||||
|
setVisibility("invisible");
|
||||||
cytoscape.use(spread); // spread
|
cytoscape.use(spread); // spread
|
||||||
|
|
||||||
let nodeElements = listOfElements.map((element) => {
|
let nodeElements = listOfElements.map((element) => {
|
||||||
|
@ -73,7 +75,7 @@ export function Graph({ listOfElements, links }) {
|
||||||
//"text-valign": "bottom",
|
//"text-valign": "bottom",
|
||||||
"text-justification": "auto",
|
"text-justification": "auto",
|
||||||
},
|
},
|
||||||
padding: 10,
|
padding: 2,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
selector: "edge",
|
selector: "edge",
|
||||||
|
@ -108,13 +110,14 @@ export function Graph({ listOfElements, links }) {
|
||||||
name: "spread", // circle, grid, dagre
|
name: "spread", // circle, grid, dagre
|
||||||
minDist: 10,
|
minDist: 10,
|
||||||
//prelayout: false,
|
//prelayout: false,
|
||||||
//animate: "end", // whether to transition the node positions
|
// animate: false, // whether to transition the node positions
|
||||||
animationDuration: 0, // duration of animation in ms if enabled
|
// animationDuration: 250, // duration of animation in ms if enabled
|
||||||
},
|
},
|
||||||
userZoomingEnabled: false,
|
userZoomingEnabled: false,
|
||||||
userPanningEnabled: false,
|
userPanningEnabled: false,
|
||||||
};
|
};
|
||||||
cytoscape(config);
|
cytoscape(config);
|
||||||
|
setTimeout(() => setVisibility(""), 700);
|
||||||
};
|
};
|
||||||
useEffect(async () => {
|
useEffect(async () => {
|
||||||
await callEffect(listOfElements, links);
|
await callEffect(listOfElements, links);
|
||||||
|
@ -123,7 +126,9 @@ export function Graph({ listOfElements, links }) {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
|
<div className={visibility}>
|
||||||
<div ref={containerRef} style={{ height: "700px", width: "1000px" }} />
|
<div ref={containerRef} style={{ height: "700px", width: "1000px" }} />
|
||||||
|
</div>
|
||||||
<button
|
<button
|
||||||
className={effectButtonStyle}
|
className={effectButtonStyle}
|
||||||
onClick={() => callEffect(listOfElements, links)}
|
onClick={() => callEffect(listOfElements, links)}
|
||||||
|
|
|
@ -13,7 +13,7 @@ export function Homepage({ listOfElementsInit }) {
|
||||||
|
|
||||||
// list of elements
|
// list of elements
|
||||||
const [listOfElements, setListOfElements] = useState(
|
const [listOfElements, setListOfElements] = useState(
|
||||||
listOfElementsInit.slice(0, 5)
|
listOfElementsInit //.slice(0, 5)
|
||||||
);
|
);
|
||||||
|
|
||||||
// number of steps
|
// number of steps
|
||||||
|
@ -104,14 +104,14 @@ export function Homepage({ listOfElementsInit }) {
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div className="block w-full items-center sm:w-full mt-10">
|
||||||
<ProgressIndicator
|
<ProgressIndicator
|
||||||
numStepsNow={numStepsNow}
|
numStepsNow={numStepsNow}
|
||||||
numElements={listOfElements.length}
|
numElements={listOfElements.length}
|
||||||
/>
|
/>
|
||||||
{/* Comparisons section */}
|
{/* Comparisons section */}
|
||||||
<div className={"" /*isListOrdered ? "hidden" : ""*/}>
|
<div className={"" /*isListOrdered ? "hidden" : ""*/}>
|
||||||
<div className="flex flex-wrap items-center max-w-4xl sm:w-full mt-10">
|
<div className="flex justify-evenly mt-10">
|
||||||
<DisplayElementForComparison
|
<DisplayElementForComparison
|
||||||
element={pairCurrentlyBeingCompared[0]}
|
element={pairCurrentlyBeingCompared[0]}
|
||||||
></DisplayElementForComparison>
|
></DisplayElementForComparison>
|
||||||
|
|
|
@ -1,25 +1,36 @@
|
||||||
export const truncateValueForDisplay = (value) => {
|
let topOutAt100AndValidate = (x) => {
|
||||||
if (value > 10) {
|
// return 10;
|
||||||
return Number(Math.round(value).toPrecision(2));
|
if (x == x) {
|
||||||
} else if (value > 1) {
|
return x > 99 ? 99 : x < 0 ? 2 : x;
|
||||||
return Math.round(value * 10) / 10;
|
|
||||||
} else if (num > 0) {
|
|
||||||
let candidateNumSignificantDigits =
|
|
||||||
-Math.floor(Math.log(num) / Math.log(10)) + 1;
|
|
||||||
let numSignificantDigits = topOutAt100AndValidate(
|
|
||||||
candidateNumSignificantDigits
|
|
||||||
);
|
|
||||||
result = num.toFixed(numSignificantDigits);
|
|
||||||
} else if (-1 < num) {
|
|
||||||
let candidateNumSignificantDigits =
|
|
||||||
-Math.floor(Math.log(Math.abs(num)) / Math.log(10)) + 1;
|
|
||||||
let numSignificantDigits = topOutAt100AndValidate(
|
|
||||||
candidateNumSignificantDigits
|
|
||||||
);
|
|
||||||
result = num.toFixed(numSignificantDigits);
|
|
||||||
} else if (num <= -1) {
|
|
||||||
result = "-" + toLocale(truncateValueForDisplay(-num));
|
|
||||||
} else {
|
} else {
|
||||||
result = toLocale(num); //return "~0"
|
return 10;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const truncateValueForDisplay = (value) => {
|
||||||
|
let result;
|
||||||
|
if (value > 10) {
|
||||||
|
result = Number(Math.round(value).toPrecision(2));
|
||||||
|
} else if (value > 1) {
|
||||||
|
result = Math.round(value * 10) / 10;
|
||||||
|
} else if (value > 0) {
|
||||||
|
let candidateNumSignificantDigits =
|
||||||
|
-Math.floor(Math.log(value) / Math.log(10)) + 1;
|
||||||
|
let numSignificantDigits = topOutAt100AndValidate(
|
||||||
|
candidateNumSignificantDigits
|
||||||
|
);
|
||||||
|
result = value.toFixed(numSignificantDigits);
|
||||||
|
} else if (-1 < value) {
|
||||||
|
let candidateNumSignificantDigits =
|
||||||
|
-Math.floor(Math.log(Math.abs(value)) / Math.log(10)) + 1;
|
||||||
|
let numSignificantDigits = topOutAt100AndValidate(
|
||||||
|
candidateNumSignificantDigits
|
||||||
|
);
|
||||||
|
result = value.toFixed(numSignificantDigits);
|
||||||
|
} else if (value <= -1) {
|
||||||
|
result = "-" + toLocale(truncateValueForDisplay(-value));
|
||||||
|
} else {
|
||||||
|
result = toLocale(value); //return "~0"
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
|
|
@ -7,7 +7,7 @@ import { Title } from "../components/title.js";
|
||||||
|
|
||||||
function MyApp({ Component, pageProps }) {
|
function MyApp({ Component, pageProps }) {
|
||||||
return (
|
return (
|
||||||
<div className="block flex-col items-center justify-center min-h-screen py-2">
|
<div className="flex flex-col items-center justify-center min-h-screen py-2">
|
||||||
{/* Webpage name & favicon */}
|
{/* Webpage name & favicon */}
|
||||||
<div className="mt-10">
|
<div className="mt-10">
|
||||||
<Head>
|
<Head>
|
||||||
|
@ -15,7 +15,7 @@ function MyApp({ Component, pageProps }) {
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
</Head>
|
</Head>
|
||||||
{/* Content */}
|
{/* Content */}
|
||||||
<main className="flex flex-col items-center w-full flex-1 px-20 text-center">
|
<main className="inline flex-col items-center w-full flex-1 px-20 text-center">
|
||||||
<Title />
|
<Title />
|
||||||
<Component {...pageProps} />
|
<Component {...pageProps} />
|
||||||
</main>
|
</main>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
.simple-react-cytoscape {
|
.simple-react-cytoscape {
|
||||||
width: 600px;
|
width: 900px;
|
||||||
height: 600px;
|
height: 900px;
|
||||||
border-style: dashed;
|
border-style: dashed;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user