<commit_before>import React, { useMemo } from 'react';
import { InertiaLink } from '@inertiajs/inertia-react';

import App from '../../Layouts/App';
import Channel from '../../Components/Cards/Channel';
import Flight from '../../Components/Timeline/Flight';
import Launch from '../../Components/Timeline/Launch';
import Pagination from '../../Components/Pagination';
import PlatformIcon from '../../Components/Platforms/PlatformIcon';
import Progress from '../../Components/Progress/Progress';
import ProgressBar from '../../Components/Progress/ProgressBar';
import Promotion from '../../Components/Timeline/Promotion';
import Timeline from '../../Components/Timeline/Timeline';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faBarsStaggered, faNotes, faArrowLeft, faChevronLeft, faChevronRight } from '@fortawesome/pro-regular-svg-icons';

import { differenceInDays } from 'date-fns/esm';
import { format, isBefore, parseISO } from 'date-fns';
import Markdown from 'markdown-to-jsx';

export default function Show({ release, platform, channels, timeline, pagination, quick_nav }) {
    function max(input) {
        if (toString.call(input) !== "[object Array]") {
            return false;
        }

        return Math.max.apply(null, input);
    }

    const [total_duration, preview_duration, public_duration, extended_duration, lts_duration, preview_progress, public_progress, extended_progress, lts_progress, highest_duration] = useMemo(() => {
        const today = new Date();
        const start_preview = release.start_preview ? parseISO(release.start_preview) : null;
        const start_public = release.start_public ? parseISO(release.start_public) : null;
        const start_extended = release.start_extended ? parseISO(release.start_extended) : null;
        const start_lts = release.start_lts ? parseISO(release.start_lts) : null;
        const end_lts = release.end_lts ? parseISO(release.end_lts) : null;

        let preview_duration = 0;
        let public_duration = 0;
        let extended_duration = 0;
        let lts_duration = 0;
        let preview_progress = 0;
        let public_progress = 0;
        let extended_progress = 0;
        let lts_progress = 0;

        if (start_preview && start_public) {
            preview_duration = differenceInDays(start_public, start_preview);

            if (isBefore(today, start_public)) {
                preview_progress = differenceInDays(today, start_preview) / preview_duration * 100;
            } else {
                preview_progress = 100;
            }
        }

        if (start_public && start_extended) {
            public_duration = differenceInDays(start_extended, start_public);

            if (isBefore(today, start_extended)) {
                public_progress = differenceInDays(today, start_public) / public_duration * 100;
            } else {
                public_progress = 100;
            }
        }

        if (start_extended && start_lts) {
            extended_duration = differenceInDays(start_lts, start_extended);

            if (isBefore(today, start_lts)) {
                extended_progress = differenceInDays(today, start_extended) / extended_duration * 100;
            } else {
                extended_progress = 100;
            }
        }

        if (start_lts && end_lts) {
            lts_duration = differenceInDays(end_lts, start_lts);

            if (isBefore(today, end_lts)) {
                lts_progress = differenceInDays(today, start_lts) / lts_duration * 100;
            } else {
                lts_progress = 100;
            }
        }

        const total_duration = preview_duration + public_duration + extended_duration + lts_duration;
        const highest_duration = max([preview_duration, public_duration, extended_duration, lts_duration]);

        return [total_duration, preview_duration, public_duration, extended_duration, lts_duration, preview_progress, public_progress, extended_progress, lts_progress, highest_duration];
    }, [release.start_preview, release.start_public, release.start_extended, release.start_lts, release.end_lts]);

    return (
        <App>
            <nav className="navbar navbar-expand-xl navbar-light sticky-top">
                <div className="container">
                    <InertiaLink href={`/platforms/${platform.slug}`} className="btn btn-transparent btn-sm me-2">
                        <FontAwesomeIcon icon={faArrowLeft} fixedWidth />
                    </InertiaLink>
                    <div className="nav nav-lined" id="nav-tab" role="tablist">
                        <button className="nav-link active" id="nav-timeline-tab" data-bs-toggle="tab" data-bs-target="#nav-timeline" type="button" role="tab" aria-controls="nav-timeline" aria-selected="true">
                            <FontAwesomeIcon icon={faBarsStaggered} fixedWidth /> Timeline
                        </button>
                        <button className="nav-link" id="nav-releases-tab" data-bs-toggle="tab" data-bs-target="#nav-releases" type="button" role="tab" aria-controls="nav-releases" aria-selected="false">
                            <FontAwesomeIcon icon={faNotes} fixedWidth /> Changelog
                        </button>
                    </div>
                    <div className="flex-grow-1" />
                    {quick_nav.prev &&
                        <InertiaLink href={quick_nav.prev.url} className="btn btn-transparent btn-sm">
                            <FontAwesomeIcon icon={faChevronLeft} fixedWidth /><span className="d-none d-sm-inline"> {quick_nav.prev.version}</span>
                        </InertiaLink>
                    }
                    {quick_nav.next &&
                        <InertiaLink href={quick_nav.next.url} className="btn btn-transparent btn-sm ms-2">
                            <span className="d-none d-sm-inline">{quick_nav.next.version} </span><FontAwesomeIcon icon={faChevronRight} fixedWidth />
                        </InertiaLink>
                    }
                </div>
            </nav>

            <div className="container my-3">
                <div className="row g-3">
                    <div className="col-12 mt-4">
                        <div className="d-flex">
                            <div className="me-3">
                                <h1 className="h4"><PlatformIcon platform={platform} color /></h1>
                            </div>
                            <div>
                                <h1 className="h4 mb-0 fw-bold" style={{ color: platform.color }}>{release.name}</h1>
                                <h2 className="h6 text-muted">Version {release.version}, {release.codename}</h2>
                            </div>
                        </div>
                    </div>

                    <div className="col-12">
                        <div className="tab-content" id="nav-tabContent">
                            <div className="tab-pane fade show active" id="nav-timeline" role="tabpanel" aria-labelledby="nav-timeline-tab">

                                {(!!preview_duration || !!public_duration || !!extended_duration || !!lts_duration) &&
                                    <div className="d-flex progress-group flex-column flex-md-row mb-4">
                                        {!!preview_duration &&
                                            <Progress
                                                duration={preview_duration}
                                                totalDuration={total_duration}
                                                highestDuration={highest_duration}
                                                title="Development"
                                                startDescription={format(parseISO(release.start_preview), "d MMM yyyy")}
                                                endDescription={format(parseISO(release.start_public), "d MMM yyyy")}
                                            >
                                                <ProgressBar progress={preview_progress} />
                                            </Progress>
                                        }
                                        {!!public_duration &&
                                            <Progress
                                                duration={public_duration}
                                                totalDuration={total_duration}
                                                highestDuration={highest_duration}
                                                title="Support"
                                                startDescription={format(parseISO(release.start_public), "d MMM yyyy")}
                                                endDescription={format(parseISO(release.start_extended), "d MMM yyyy")}
                                            >
                                                <ProgressBar progress={public_progress} color="success" />
                                            </Progress>
                                        }
                                        {!!extended_duration &&
                                            <Progress
                                                duration={extended_duration}
                                                totalDuration={total_duration}
                                                highestDuration={highest_duration}
                                                title="Extended"
                                                startDescription={format(parseISO(release.start_extended), "d MMM yyyy")}
                                                endDescription={format(parseISO(release.start_lts), "d MMM yyyy")}
                                            >
                                                <ProgressBar progress={extended_progress} color="warning" />
                                            </Progress>
                                        }
                                        {!!lts_duration &&
                                            <Progress
                                                duration={lts_duration}
                                                totalDuration={total_duration}
                                                highestDuration={highest_duration}
                                                title="LTSC"
                                                startDescription={format(parseISO(release.start_lts), "d MMM yyyy")}
                                                endDescription={format(parseISO(release.end_lts), "d MMM yyyy")}
                                            >
                                                <ProgressBar progress={lts_progress} color="danger" />
                                            </Progress>
                                        }
                                    </div>
                                }
                                <div className="row g-2 mt-4">
                                    {channels.map((channel, key) => (
                                        <Channel
                                            key={key}
                                            channel={{ color: channel.color, name: channel.name }}
                                            build={channel.flight.version ?? 'None'}
                                            date={channel.flight?.date ? format(parseISO(channel.flight.date), 'd MMMM yyyy') : 'No flight'}
                                            disabled={channel.disabled}
                                        />
                                    ))}
                                </div>
                                <div className="row g-4 mt-3">
                                    {Object.keys(timeline).map((date, key) => (<commit_msg>Fix spacing inconsistency<commit_after>import React, { useMemo } from 'react';
import { InertiaLink } from '@inertiajs/inertia-react';

import App from '../../Layouts/App';
import Channel from '../../Components/Cards/Channel';
import Flight from '../../Components/Timeline/Flight';
import Launch from '../../Components/Timeline/Launch';
import Pagination from '../../Components/Pagination';
import PlatformIcon from '../../Components/Platforms/PlatformIcon';
import Progress from '../../Components/Progress/Progress';
import ProgressBar from '../../Components/Progress/ProgressBar';
import Promotion from '../../Components/Timeline/Promotion';
import Timeline from '../../Components/Timeline/Timeline';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faBarsStaggered, faNotes, faArrowLeft, faChevronLeft, faChevronRight } from '@fortawesome/pro-regular-svg-icons';

import { differenceInDays } from 'date-fns/esm';
import { format, isBefore, parseISO } from 'date-fns';
import Markdown from 'markdown-to-jsx';

export default function Show({ release, platform, channels, timeline, pagination, quick_nav }) {
    function max(input) {
        if (toString.call(input) !== "[object Array]") {
            return false;
        }

        return Math.max.apply(null, input);
    }

    const [total_duration, preview_duration, public_duration, extended_duration, lts_duration, preview_progress, public_progress, extended_progress, lts_progress, highest_duration] = useMemo(() => {
        const today = new Date();
        const start_preview = release.start_preview ? parseISO(release.start_preview) : null;
        const start_public = release.start_public ? parseISO(release.start_public) : null;
        const start_extended = release.start_extended ? parseISO(release.start_extended) : null;
        const start_lts = release.start_lts ? parseISO(release.start_lts) : null;
        const end_lts = release.end_lts ? parseISO(release.end_lts) : null;

        let preview_duration = 0;
        let public_duration = 0;
        let extended_duration = 0;
        let lts_duration = 0;
        let preview_progress = 0;
        let public_progress = 0;
        let extended_progress = 0;
        let lts_progress = 0;

        if (start_preview && start_public) {
            preview_duration = differenceInDays(start_public, start_preview);

            if (isBefore(today, start_public)) {
                preview_progress = differenceInDays(today, start_preview) / preview_duration * 100;
            } else {
                preview_progress = 100;
            }
        }

        if (start_public && start_extended) {
            public_duration = differenceInDays(start_extended, start_public);

            if (isBefore(today, start_extended)) {
                public_progress = differenceInDays(today, start_public) / public_duration * 100;
            } else {
                public_progress = 100;
            }
        }

        if (start_extended && start_lts) {
            extended_duration = differenceInDays(start_lts, start_extended);

            if (isBefore(today, start_lts)) {
                extended_progress = differenceInDays(today, start_extended) / extended_duration * 100;
            } else {
                extended_progress = 100;
            }
        }

        if (start_lts && end_lts) {
            lts_duration = differenceInDays(end_lts, start_lts);

            if (isBefore(today, end_lts)) {
                lts_progress = differenceInDays(today, start_lts) / lts_duration * 100;
            } else {
                lts_progress = 100;
            }
        }

        const total_duration = preview_duration + public_duration + extended_duration + lts_duration;
        const highest_duration = max([preview_duration, public_duration, extended_duration, lts_duration]);

        return [total_duration, preview_duration, public_duration, extended_duration, lts_duration, preview_progress, public_progress, extended_progress, lts_progress, highest_duration];
    }, [release.start_preview, release.start_public, release.start_extended, release.start_lts, release.end_lts]);

    return (
        <App>
            <nav className="navbar navbar-expand-xl navbar-light sticky-top">
                <div className="container">
                    <InertiaLink href={`/platforms/${platform.slug}`} className="btn btn-transparent btn-sm me-2">
                        <FontAwesomeIcon icon={faArrowLeft} fixedWidth />
                    </InertiaLink>
                    <div className="nav nav-lined" id="nav-tab" role="tablist">
                        <button className="nav-link active" id="nav-timeline-tab" data-bs-toggle="tab" data-bs-target="#nav-timeline" type="button" role="tab" aria-controls="nav-timeline" aria-selected="true">
                            <FontAwesomeIcon icon={faBarsStaggered} fixedWidth /> Timeline
                        </button>
                        <button className="nav-link" id="nav-releases-tab" data-bs-toggle="tab" data-bs-target="#nav-releases" type="button" role="tab" aria-controls="nav-releases" aria-selected="false">
                            <FontAwesomeIcon icon={faNotes} fixedWidth /> Changelog
                        </button>
                    </div>
                    <div className="flex-grow-1" />
                    {quick_nav.prev &&
                        <InertiaLink href={quick_nav.prev.url} className="btn btn-transparent btn-sm">
                            <FontAwesomeIcon icon={faChevronLeft} fixedWidth /><span className="d-none d-sm-inline"> {quick_nav.prev.version}</span>
                        </InertiaLink>
                    }
                    {quick_nav.next &&
                        <InertiaLink href={quick_nav.next.url} className="btn btn-transparent btn-sm ms-2">
                            <span className="d-none d-sm-inline">{quick_nav.next.version} </span><FontAwesomeIcon icon={faChevronRight} fixedWidth />
                        </InertiaLink>
                    }
                </div>
            </nav>

            <div className="container my-3">
                <div className="row g-3">
                    <div className="col-12 mt-4">
                        <div className="d-flex">
                            <div className="me-3">
                                <h1 className="h4"><PlatformIcon platform={platform} color /></h1>
                            </div>
                            <div>
                                <h1 className="h4 m-0 fw-bold" style={{ color: platform.color }}>{release.name}</h1>
                                <h2 className="h6 m-0 text-muted">Version {release.version}, {release.codename}</h2>
                            </div>
                        </div>
                    </div>

                    <div className="col-12">
                        <div className="tab-content" id="nav-tabContent">
                            <div className="tab-pane fade show active" id="nav-timeline" role="tabpanel" aria-labelledby="nav-timeline-tab">

                                {(!!preview_duration || !!public_duration || !!extended_duration || !!lts_duration) &&
                                    <div className="d-flex progress-group flex-column flex-md-row mt-3">
                                        {!!preview_duration &&
                                            <Progress
                                                duration={preview_duration}
                                                totalDuration={total_duration}
                                                highestDuration={highest_duration}
                                                title="Development"
                                                startDescription={format(parseISO(release.start_preview), "d MMM yyyy")}
                                                endDescription={format(parseISO(release.start_public), "d MMM yyyy")}
                                            >
                                                <ProgressBar progress={preview_progress} />
                                            </Progress>
                                        }
                                        {!!public_duration &&
                                            <Progress
                                                duration={public_duration}
                                                totalDuration={total_duration}
                                                highestDuration={highest_duration}
                                                title="Support"
                                                startDescription={format(parseISO(release.start_public), "d MMM yyyy")}
                                                endDescription={format(parseISO(release.start_extended), "d MMM yyyy")}
                                            >
                                                <ProgressBar progress={public_progress} color="success" />
                                            </Progress>
                                        }
                                        {!!extended_duration &&
                                            <Progress
                                                duration={extended_duration}
                                                totalDuration={total_duration}
                                                highestDuration={highest_duration}
                                                title="Extended"
                                                startDescription={format(parseISO(release.start_extended), "d MMM yyyy")}
                                                endDescription={format(parseISO(release.start_lts), "d MMM yyyy")}
                                            >
                                                <ProgressBar progress={extended_progress} color="warning" />
                                            </Progress>
                                        }
                                        {!!lts_duration &&
                                            <Progress
                                                duration={lts_duration}
                                                totalDuration={total_duration}
                                                highestDuration={highest_duration}
                                                title="LTSC"
                                                startDescription={format(parseISO(release.start_lts), "d MMM yyyy")}
                                                endDescription={format(parseISO(release.end_lts), "d MMM yyyy")}
                                            >
                                                <ProgressBar progress={lts_progress} color="danger" />
                                            </Progress>
                                        }
                                    </div>
                                }
                                <div className="row g-2 mt-3">
                                    {channels.map((channel, key) => (
                                        <Channel
                                            key={key}
                                            channel={{ color: channel.color, name: channel.name }}
                                            build={channel.flight.version ?? 'None'}
                                            date={channel.flight?.date ? format(parseISO(channel.flight.date), 'd MMMM yyyy') : 'No flight'}
                                            disabled={channel.disabled}
                                        />
                                    ))}
                                </div>
                                <div className="row g-4 mt-3">
                                    {Object.keys(timeline).map((date, key) => (
{'fraction_non_alphanumeric': 0.09726840355233807, 'fraction_numerical': 0.004924449682225683, 'mean_word_length': 1.241720917067648, 'pattern_counts': {'":': 0, '<': 133, '<?xml version=': 0, '>': 139, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 220, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1992758', 'n_tokens_mistral': 5351, 'n_tokens_neox': 5038, 'n_words': 1011}