<commit_before>import {extend} from './Util'
import * as React from 'react'
import {observable, computed} from 'mobx'
import {observer} from 'mobx-react'
import Bounds from './Bounds'
import ChartConfig from './ChartConfig'

interface DownloadTabProps {
    bounds: Bounds,
    chart: ChartConfig
}

declare var App: { IDEAL_WIDTH: number, IDEAL_HEIGHT: number }

@observer
export default class DownloadTab extends React.Component<DownloadTabProps> {
    @computed get targetWidth() { return App.IDEAL_WIDTH }
    @computed get targetHeight() { return App.IDEAL_HEIGHT }

    @observable pngUrl?: string
    exportPng() {
        const {targetWidth, targetHeight} = this
        const {chart} = this.props
        const fallbackPngUrl = chart.url.baseUrl + ".png"

        // Client-side SVG => PNG export. Somewhat experimental, so we fall back to server-side exports if needed.
        try {
            const canvas = document.createElement("canvas")
            canvas.width = targetWidth
            canvas.height = targetHeight
            const ctx = canvas.getContext("2d", {alpha: false}) as CanvasRenderingContext2D;
            const DOMURL = self.URL || (self as any).webkitURL || self;
            const img = new Image();
            const svg = new Blob([chart.staticSVG], {type: "image/svg+xml;charset=utf-8"});
            const url = DOMURL.createObjectURL(svg);
            img.onload = () => {
                ctx.drawImage(img, 0, 0);<commit_msg>Fix blurry png exports by rendering at double canvas size<commit_after>import {extend} from './Util'
import * as React from 'react'
import {observable, computed} from 'mobx'
import {observer} from 'mobx-react'
import Bounds from './Bounds'
import ChartConfig from './ChartConfig'

interface DownloadTabProps {
    bounds: Bounds,
    chart: ChartConfig
}

declare var App: { IDEAL_WIDTH: number, IDEAL_HEIGHT: number }

@observer
export default class DownloadTab extends React.Component<DownloadTabProps> {
    @computed get targetWidth() { return App.IDEAL_WIDTH }
    @computed get targetHeight() { return App.IDEAL_HEIGHT }

    @observable pngUrl?: string
    exportPng() {
        const {targetWidth, targetHeight} = this
        const {chart} = this.props
        const fallbackPngUrl = chart.url.baseUrl + ".png"

        // Client-side SVG => PNG export. Somewhat experimental, so we fall back to server-side exports if needed.
        try {
            const canvas = document.createElement("canvas")
            canvas.width = targetWidth*2
            canvas.height = targetHeight*2
            const ctx = canvas.getContext("2d", {alpha: false}) as CanvasRenderingContext2D;
            ctx.imageSmoothingEnabled = false
            ctx.setTransform(2,0,0,2,0,0);
            const DOMURL = self.URL || (self as any).webkitURL || self;
            const img = new Image();
            const svg = new Blob([chart.staticSVG], {type: "image/svg+xml;charset=utf-8"});
            const url = DOMURL.createObjectURL(svg);
            img.onload = () => {
                ctx.drawImage(img, 0, 0);
{'fraction_non_alphanumeric': 0.10843373493975904, 'fraction_numerical': 0.005861282969716704, 'mean_word_length': 2.830423940149626, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 9, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 2}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 6, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2455229', 'n_tokens_mistral': 888, 'n_tokens_neox': 860, 'n_words': 261}