add download button

create_website.py

@@ -290,6 +290,7 @@ def main(
     shutil.copy("screenshot_footer.svg", f"{site_folder}/")
     shutil.copy("share.png", f"{site_folder}/")
     shutil.copy("screenshot.png", f"{site_folder}/")
+    shutil.copy("assets/download.png", f"{site_folder}/")
 
     with open("react/src/data/map_relationship.json", "w") as f:
         json.dump(map_relationships_by_type, f)

react/src/components/plots.tsx

@@ -1,13 +1,14 @@
 
 import React, { useEffect, useRef } from 'react';
-import { IExtraStatistic, IHistogram } from '../utils/protos';
+import { IHistogram } from '../utils/protos';
 
 // imort Observable plot
 import * as Plot from "@observablehq/plot";
 import { HistogramType, useSetting } from '../page_template/settings';
 import { ExtraStat } from './load-article';
 import { CheckboxSetting } from './sidebar';
-import { saveAs } from 'file-saver';
+import { create_screenshot } from './screenshot';
+import { useUniverse } from '../universe';
 
 interface PlotProps {
     shortname?: string;
@@ -123,17 +124,38 @@ function Histogram(props: { histograms: HistogramProps[] }) {
             }
         }></div>
         <div style={{ zIndex: 1000, position: "absolute", top: 0, right: 0 }}>
-            <HistogramSettings plot_ref={plot_ref} />
+            <HistogramSettings plot_ref={plot_ref} shortnames={props.histograms.map(h => h.shortname)} />
         </div>
     </div>
 }
 
 function HistogramSettings(props: {
+    shortnames: string[];
     plot_ref: React.RefObject<HTMLDivElement>
 }) {
+    const universe = useUniverse();
     const [histogram_type, setHistogramType] = useSetting("histogram_type");
     // dropdown for histogram type
-    return <div className="serif" style={{ backgroundColor: "#fff8f0", padding: "0.5em", border: "1px solid black" }}>
+    return <div className="serif" style={{
+        backgroundColor: "#fff8f0", padding: "0.5em", border: "1px solid black",
+        display: "flex", gap: "0.5em"
+    }}>
+        <img src="/download.png"
+            onClick={() => {
+                if (props.plot_ref.current) {
+                    create_screenshot(
+                        {
+                            path: props.shortnames.join("_") + "_histogram",
+                            overall_width: props.plot_ref.current.offsetWidth * 2,
+                            elements_to_render: [props.plot_ref.current],
+                            height_multiplier: 1.2,
+                        },
+                        universe
+                    )
+                }
+            }}
+            width="20" height="20"
+        />
         <select value={histogram_type} onChange={e => setHistogramType(e.target.value as any)} className="serif">
             <option value="Line">Line</option>
             <option value="Line (cumulative)">Line (cumulative)</option>
@@ -331,7 +353,7 @@ function createHistogramMarks(
         x: "xidx", y: "y",
         title: (d) => {
 
-            var result = "Density: " + render_x(d.xidx) + "\n";
+            let result = "Density: " + render_x(d.xidx) + "\n";
             if (d.names.length > 1) {
                 result += d.names.map((name: string, i: number) => `${name}: ${render_y(d.ys[i])}`).join("\n")
             } else {

react/src/components/screenshot.tsx

@@ -51,24 +51,27 @@ export function ScreenshotButton(props: { screenshot_mode: boolean, onClick: ()
 export interface ScreencapElements {
     path: string,
     overall_width: number,
-    elements_to_render: HTMLElement[]
+    elements_to_render: HTMLElement[],
+    height_multiplier?: number,
 }
 
 export async function create_screenshot(config: ScreencapElements, universe: string | undefined) {
     const overall_width = config.overall_width;
+    const height_multiplier = config.height_multiplier ?? 1;
 
     async function screencap_element(ref: HTMLElement): Promise<[string, number]> {
+        console.log("Processing element", ref);
         const scale_factor = overall_width / ref.offsetWidth;
         const link = await domtoimage.toPng(ref, {
             bgcolor: "#fff8f0",
-            height: ref.offsetHeight * scale_factor,
+            height: ref.offsetHeight * scale_factor * height_multiplier,
             width: ref.offsetWidth * scale_factor,
             style: {
                 transform: "scale(" + scale_factor + ")",
                 transformOrigin: "top left"
             }
         });
-        return [link, scale_factor * ref.offsetHeight]
+        return [link, scale_factor * ref.offsetHeight * height_multiplier]
     }
 
     const png_links = [];