<commit_before>import * as React from "react";
import { Rendered } from "smc-webapp/app-framework";
import { Icon } from "./icon";
import * as misc from "smc-util/misc";
import { unreachable } from "smc-util/misc2";
import * as feature from "../feature";

let Tooltip: any, Popover: any;
import { TooltipPlacement } from "cocalc-ui";

// This ugly hack is needed because of a problem when starting the share server
try {
  Tooltip = require("cocalc-ui").Tooltip;
  Popover = require("cocalc-ui").Popover;
} catch (err) {
  console.log(`Tooltip&Popover cannot be imported -- ${err}`);
  class Idempotent extends React.Component {
    render() {
      return this.props.children;
    }
  }
  Tooltip = Popover = Idempotent;
}

const TIP_STYLE: React.CSSProperties = {
  wordWrap: "break-word",
  maxWidth: "250px"
};

type Size = "xsmall" | "small" | "medium" | "large";

interface Props {
  title: string | JSX.Element | JSX.Element[]; // not checked for update
  placement?: TooltipPlacement;
  tip?: string | JSX.Element | JSX.Element[]; // not checked for update
  size?: Size;
  delayShow?: number;
  delayHide?: number;
  rootClose?: boolean;
  icon?: string;
  id?: string; // can be used for screen readers
  style?: React.CSSProperties; // changing not checked when updating if stable is true
  popover_style?: React.CSSProperties; // changing not checked ever (default={zIndex:1000})
  stable?: boolean; // if true, children assumed to never change
  allow_touch?: boolean;
}

interface State {}

export class Tip extends React.Component<Props, State> {
  constructor(props) {
    super(props);
    this.state = {};
  }

  static defaultProps = {
    placement: "right",
    delayShow: 500, // [ms]
    delayHide: 100, // [ms] this was 0 before switching to Antd – which has 100ms as its default, though.
    rootClose: false,
    popover_style: { zIndex: 1000 },
    allow_touch: false,
    id: "tip"
  };

  shouldComponentUpdate(props) {
    return (
      !this.props.stable ||
      misc.is_different(this.props, props, [
        "placement",
        "size",
        "delayShow",
        "delayHide",
        "rootClose",
        "icon",
        "id"
      ])
    );
  }

  private render_title() {
    if (!this.props.icon) return this.props.title;
    return (
      <span>
        <Icon name={this.props.icon} /> {this.props.title}
      </span>
    );
  }

  // a tip is rendered in a description box below the title
  private render_tip(): Rendered {
    return <div style={TIP_STYLE}>{this.props.tip}</div>;
  }

  // this is the visible element, which gets some information
  private render_wrapped(): Rendered {
    return <span style={this.props.style}>{this.props.children}</span>;
  }

  private get_scale(): React.CSSProperties | undefined {
    if (this.props.size == null) return;
    switch (this.props.size) {
      case "xsmall":
        return { transform: "scale(0.75)" };
      case "small":
        return { transform: "scale(0.9)" };
      case "medium":
        return;
      case "large":
        return { transform: "scale(1.2)" };
      default:
        unreachable(this.props.size);
    }
  }

  private render_tooltip(): Rendered {
    if (this.props.delayShow == null || this.props.delayHide == null) return;

    const props: { [key: string]: any } = {
      arrowPointAtCenter: true,<commit_msg>tooptile -- disable get_scale so we can switch to using this<commit_after>import * as React from "react";
import { Rendered } from "smc-webapp/app-framework";
import { Icon } from "./icon";
import * as misc from "smc-util/misc";
//import { unreachable } from "smc-util/misc2";
import * as feature from "../feature";

let Tooltip: any, Popover: any;
import { TooltipPlacement } from "cocalc-ui";

// This ugly hack is needed because of a problem when starting the share server
try {
  Tooltip = require("cocalc-ui").Tooltip;
  Popover = require("cocalc-ui").Popover;
} catch (err) {
  console.log(`Tooltip&Popover cannot be imported -- ${err}`);
  class Idempotent extends React.Component {
    render() {
      return this.props.children;
    }
  }
  Tooltip = Popover = Idempotent;
}

const TIP_STYLE: React.CSSProperties = {
  wordWrap: "break-word",
  maxWidth: "250px"
};

type Size = "xsmall" | "small" | "medium" | "large";

interface Props {
  title: string | JSX.Element | JSX.Element[]; // not checked for update
  placement?: TooltipPlacement;
  tip?: string | JSX.Element | JSX.Element[]; // not checked for update
  size?: Size;   // IMPORTANT: this is currently ignored -- see https://github.com/sagemathinc/cocalc/pull/4155
  delayShow?: number;
  delayHide?: number;
  rootClose?: boolean;
  icon?: string;
  id?: string; // can be used for screen readers
  style?: React.CSSProperties; // changing not checked when updating if stable is true
  popover_style?: React.CSSProperties; // changing not checked ever (default={zIndex:1000})
  stable?: boolean; // if true, children assumed to never change
  allow_touch?: boolean;
}

interface State {}

export class Tip extends React.Component<Props, State> {
  constructor(props) {
    super(props);
    this.state = {};
  }

  static defaultProps = {
    placement: "right",
    delayShow: 500, // [ms]
    delayHide: 100, // [ms] this was 0 before switching to Antd – which has 100ms as its default, though.
    rootClose: false,
    popover_style: { zIndex: 1000 },
    allow_touch: false,
    id: "tip"
  };

  shouldComponentUpdate(props) {
    return (
      !this.props.stable ||
      misc.is_different(this.props, props, [
        "placement",
        "size",
        "delayShow",
        "delayHide",
        "rootClose",
        "icon",
        "id"
      ])
    );
  }

  private render_title() {
    if (!this.props.icon) return this.props.title;
    return (
      <span>
        <Icon name={this.props.icon} /> {this.props.title}
      </span>
    );
  }

  // a tip is rendered in a description box below the title
  private render_tip(): Rendered {
    return <div style={TIP_STYLE}>{this.props.tip}</div>;
  }

  // this is the visible element, which gets some information
  private render_wrapped(): Rendered {
    return <span style={this.props.style}>{this.props.children}</span>;
  }

  private get_scale(): React.CSSProperties | undefined {
    return;
    // I'm disabling this since I don't think it's that useful,
    // and this does not work at all.  Plus our current react-bootstrap
    // tip implementation is horribly broken.
    /*
    if (this.props.size == null) return;
    switch (this.props.size) {
      case "xsmall":
        return { transform: "scale(0.75)" };
      case "small":
        return { transform: "scale(0.9)" };
      case "medium":
        return;
      case "large":
        return { transform: "scale(1.2)" };
      default:
        unreachable(this.props.size);
    }
    */
  }

  private render_tooltip(): Rendered {
    if (this.props.delayShow == null || this.props.delayHide == null) return;

    const props: { [key: string]: any } = {
      arrowPointAtCenter: true,
{'fraction_non_alphanumeric': 0.1369453924914676, 'fraction_numerical': 0.00881683731513083, 'mean_word_length': 2.9224762967094255, 'pattern_counts': {'":': 8, '<': 19, '<?xml version=': 0, '>': 19, 'https://': 1, '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': '2109517', 'n_tokens_mistral': 2260, 'n_tokens_neox': 2181, 'n_words': 642}