<commit_before>import React from 'react';
import { JsonLink, RadioGroup, Radio } from 'watson-react-components';

const RAW = 'raw';
const FORMATTED = 'formatted';

function makeJsonLink(obj, i) {
    if (!obj) {
        return null; //(<div key={`jsonlink-${i}`} />);
    }

    const json = JSON.stringify(obj);
    const str = (json.length <= 78) ? json : json.substr(0,14) + ' ...' + json.substr(-60);
<commit_msg>tweak json view to adapt to small screens better<commit_after>import React from 'react';
import { JsonLink, RadioGroup, Radio } from 'watson-react-components';

const RAW = 'raw';
const FORMATTED = 'formatted';

function makeJsonLink(obj, i) {
    if (!obj) {
        return null; //(<div key={`jsonlink-${i}`} />);
    }

    const json = JSON.stringify(obj);
    const str = (json.length <= 78) ? json : json.substr(0,14) + ' ...' + json.substr(-60)
        .replace(/,/g, ', '); // space after commas to help browsers decide where breakpoints should go on small screens

{'fraction_non_alphanumeric': 0.1715438950554995, 'fraction_numerical': 0.014127144298688193, 'mean_word_length': 3.3893805309734515, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 5, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1636721', 'n_tokens_mistral': 338, 'n_tokens_neox': 320, 'n_words': 93}