Compare commits
No commits in common. "06fd18ef4c25982594c6639c3698197f01dff1af" and "3ec065aaf9b70649d6147b1e1e552e5c74ecd7f8" have entirely different histories.
06fd18ef4c
...
3ec065aaf9
33
analysis.py
33
analysis.py
@ -49,10 +49,13 @@ def sociogram_json():
|
||||
return JSONResponse({"nodes": nodes, "links": links})
|
||||
|
||||
|
||||
def sociogram_data(dislike: bool | None = False):
|
||||
def sociogram_data():
|
||||
nodes = []
|
||||
links = []
|
||||
G = nx.DiGraph()
|
||||
with Session(engine) as session:
|
||||
for p in session.exec(select(P)).fetchall():
|
||||
nodes.append({"id": p.name})
|
||||
G.add_node(p.name)
|
||||
subquery = (
|
||||
select(C.user, func.max(C.time).label("latest"))
|
||||
@ -67,10 +70,8 @@ def sociogram_data(dislike: bool | None = False):
|
||||
)
|
||||
for c in session.exec(statement2):
|
||||
for i, p in enumerate(c.love):
|
||||
G.add_edge(c.user, p, group="love", rank=i, popularity=1 - 0.08 * i)
|
||||
if dislike:
|
||||
for i, p in enumerate(c.hate):
|
||||
G.add_edge(c.user, p, group="hate", rank=8, popularity=-0.16)
|
||||
G.add_edge(c.user, p, rank=i, popularity=1 - 0.08 * i)
|
||||
links.append({"source": c.user, "target": p})
|
||||
return G
|
||||
|
||||
|
||||
@ -82,12 +83,6 @@ class Params(BaseModel):
|
||||
distance: float | None = 0.2
|
||||
weighting: bool | None = True
|
||||
popularity: bool | None = True
|
||||
dislike: bool | None = False
|
||||
|
||||
|
||||
ARROWSTYLE = {"love": "-|>", "hate": "-|>"}
|
||||
EDGESTYLE = {"love": "-", "hate": ":"}
|
||||
EDGECOLOR = {"love": "#404040", "hate": "#cc0000"}
|
||||
|
||||
|
||||
async def render_sociogram(params: Params):
|
||||
@ -96,14 +91,12 @@ async def render_sociogram(params: Params):
|
||||
ax.set_facecolor("none") # Set the axis face color to none (transparent)
|
||||
ax.axis("off") # Turn off axis ticks and frames
|
||||
|
||||
G = sociogram_data(params.dislike)
|
||||
G = sociogram_data()
|
||||
pos = nx.spring_layout(G, scale=2, k=params.distance, iterations=50, seed=None)
|
||||
nodes = nx.draw_networkx_nodes(
|
||||
G,
|
||||
pos,
|
||||
node_color=[
|
||||
v for k, v in G.in_degree(weight="popularity" if params.weighting else None)
|
||||
]
|
||||
node_color=[v for k, v in G.in_degree(weight="popularity")]
|
||||
if params.popularity
|
||||
else "#99ccff",
|
||||
edgecolors="#404040",
|
||||
@ -114,20 +107,18 @@ async def render_sociogram(params: Params):
|
||||
alpha=0.86,
|
||||
)
|
||||
if params.popularity:
|
||||
cbar = plt.colorbar(nodes)
|
||||
cbar.ax.set_xlabel("popularity")
|
||||
plt.colorbar(nodes)
|
||||
nx.draw_networkx_labels(G, pos, font_size=params.font_size)
|
||||
nx.draw_networkx_edges(
|
||||
G,
|
||||
pos,
|
||||
arrows=True,
|
||||
edge_color=[EDGECOLOR[G.edges()[*edge]["group"]] for edge in G.edges()],
|
||||
edge_color="#404040",
|
||||
arrowsize=params.arrow_size,
|
||||
node_size=params.node_size,
|
||||
width=params.edge_width,
|
||||
style=[EDGESTYLE[G.edges()[*edge]["group"]] for edge in G.edges()],
|
||||
arrowstyle=[ARROWSTYLE[G.edges()[*edge]["group"]] for edge in G.edges()],
|
||||
connectionstyle="arc3,rad=0.12",
|
||||
arrowstyle="-|>",
|
||||
# connectionstyle="arc3,rad=0.2",
|
||||
alpha=[1 - 0.08 * G.edges()[*edge]["rank"] for edge in G.edges()]
|
||||
if params.weighting
|
||||
else 1,
|
||||
|
||||
@ -1,22 +1,6 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { baseUrl } from "./api";
|
||||
|
||||
//const debounce = <T extends (...args: any[]) => void>(
|
||||
// func: T,
|
||||
// delay: number
|
||||
//): ((...args: Parameters<T>) => void) => {
|
||||
// let timeoutId: number | null = null;
|
||||
// return (...args: Parameters<T>) => {
|
||||
// if (timeoutId !== null) {
|
||||
// clearTimeout(timeoutId);
|
||||
// }
|
||||
// console.log(timeoutId);
|
||||
// timeoutId = setTimeout(() => {
|
||||
// func(...args);
|
||||
// }, delay);
|
||||
// };
|
||||
//};
|
||||
//
|
||||
interface Prop {
|
||||
name: string;
|
||||
min: string;
|
||||
@ -33,27 +17,18 @@ interface Params {
|
||||
distance: number;
|
||||
weighting: boolean;
|
||||
popularity: boolean;
|
||||
dislike: boolean;
|
||||
}
|
||||
|
||||
interface DeferredProps {
|
||||
timeout: number;
|
||||
func: () => void;
|
||||
}
|
||||
|
||||
|
||||
let timeoutID: number | null = null;
|
||||
export default function Analysis() {
|
||||
const [image, setImage] = useState("");
|
||||
const [params, setParams] = useState<Params>({
|
||||
nodeSize: 2000,
|
||||
edgeWidth: 1,
|
||||
arrowSize: 16,
|
||||
arrowSize: 20,
|
||||
fontSize: 10,
|
||||
distance: 2,
|
||||
weighting: true,
|
||||
popularity: true,
|
||||
dislike: false,
|
||||
});
|
||||
const [showControlPanel, setShowControlPanel] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
@ -74,15 +49,9 @@ export default function Analysis() {
|
||||
setLoading(false);
|
||||
});
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (timeoutID) {
|
||||
clearTimeout(timeoutID);
|
||||
}
|
||||
timeoutID = setTimeout(() => {
|
||||
loadImage();
|
||||
}, 1000);
|
||||
}, [params]);
|
||||
loadImage();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="stack column dropdown">
|
||||
@ -93,29 +62,21 @@ export default function Analysis() {
|
||||
|
||||
<div className="control">
|
||||
<div className="checkBox">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={params.dislike}
|
||||
onChange={(evt) => setParams({ ...params, dislike: evt.target.checked })}
|
||||
/>
|
||||
<label>show dislike</label>
|
||||
</div>
|
||||
<div className="checkBox">
|
||||
<label>weighting</label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={params.weighting}
|
||||
onChange={(evt) => setParams({ ...params, weighting: evt.target.checked })}
|
||||
/>
|
||||
<label>weighting</label>
|
||||
</div>
|
||||
onMouseUp={() => loadImage()}
|
||||
/></div>
|
||||
|
||||
<div className="checkBox">
|
||||
<label>popularity</label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={params.popularity}
|
||||
onChange={(evt) => setParams({ ...params, popularity: evt.target.checked })}
|
||||
onChange={(evt) => { setParams({ ...params, popularity: evt.target.checked }); loadImage() }}
|
||||
/>
|
||||
<label>popularity</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -128,6 +89,7 @@ export default function Analysis() {
|
||||
step="0.05"
|
||||
value={params.distance}
|
||||
onChange={(evt) => setParams({ ...params, distance: Number(evt.target.value) })}
|
||||
onMouseUp={() => loadImage()}
|
||||
/>
|
||||
<span>{params.distance}</span></div>
|
||||
|
||||
@ -139,6 +101,7 @@ export default function Analysis() {
|
||||
max="3000"
|
||||
value={params.nodeSize}
|
||||
onChange={(evt) => setParams({ ...params, nodeSize: Number(evt.target.value) })}
|
||||
onMouseUp={() => loadImage()}
|
||||
/>
|
||||
<span>{params.nodeSize}</span>
|
||||
</div>
|
||||
@ -151,6 +114,7 @@ export default function Analysis() {
|
||||
max="24"
|
||||
value={params.fontSize}
|
||||
onChange={(evt) => setParams({ ...params, fontSize: Number(evt.target.value) })}
|
||||
onMouseUp={() => loadImage()}
|
||||
/>
|
||||
<span>{params.fontSize}</span>
|
||||
</div>
|
||||
@ -164,6 +128,7 @@ export default function Analysis() {
|
||||
step="0.1"
|
||||
value={params.edgeWidth}
|
||||
onChange={(evt) => setParams({ ...params, edgeWidth: Number(evt.target.value) })}
|
||||
onMouseUp={() => loadImage()}
|
||||
/>
|
||||
<span>{params.edgeWidth}</span>
|
||||
</div>
|
||||
@ -176,6 +141,7 @@ export default function Analysis() {
|
||||
max="50"
|
||||
value={params.arrowSize}
|
||||
onChange={(evt) => setParams({ ...params, arrowSize: Number(evt.target.value) })}
|
||||
onMouseUp={() => loadImage()}
|
||||
/>
|
||||
<span>{params.arrowSize}</span>
|
||||
</div>
|
||||
|
||||
@ -148,7 +148,7 @@ button {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2px solid #404040;
|
||||
padding: 8px 16px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1000px) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user