@jupyterlab/apputils#defaultSanitizer TypeScript Examples

The following examples show how to use @jupyterlab/apputils#defaultSanitizer. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: status.tsx    From jupyterlab-ros with BSD 3-Clause "New" or "Revised" License 6 votes vote down vote up 
// console.log(event); }
  onMessage = (message) => {
    const msg = JSON.parse(message.data);
    const body = document.createElement('div');
    
    switch (msg.code) {
      case 0: this.paths = msg.paths; break;
      case 1: this.paths.push(msg.path); break;
      case 2:
        renderText({host: body, sanitizer: defaultSanitizer, source: msg.msg });
        showDialog({
          title: "WARNING: " + msg.path,
          body: <div className=".jp-RenderedText" dangerouslySetInnerHTML={{ __html: body.innerHTML }}></div>,
          buttons: [ Dialog.okButton() ]
        });
        break;
      case 3:
      case 4:
        var index = this.paths.indexOf(msg.path);
        if (index !== -1) this.paths.splice(index, 1);

        renderText({host: body, sanitizer: defaultSanitizer, source: msg.msg });
        showDialog({
          title: (msg.code == 3 ? "FINISHED: " : "ERROR: " ) + msg.path,
          body: <div className=".jp-RenderedText" dangerouslySetInnerHTML={{ __html: body.innerHTML }}></div>,
          buttons: [ Dialog.okButton() ]
        });
        break;
      
      default:
        break;
    }
    this.update();
  }
Example #2
Source File: status.tsx    From jupyterlab-ros with BSD 3-Clause "New" or "Revised" License 6 votes vote down vote up 
onMessage = (message) => {
    const msg = JSON.parse(message.data);
    
    if (msg['error']) {
      const body = document.createElement('div');
      renderText({host: body, sanitizer: defaultSanitizer, source: msg['error'] });

      showDialog({
        title: "Master: WARNING",
        body: <div className=".jp-RenderedText" dangerouslySetInnerHTML={{ __html: body.innerHTML }} />,
        buttons: [ Dialog.okButton() ]
      });

    } else if (msg['output']) {
      const body = document.createElement('div');
      renderText({host: body, sanitizer: defaultSanitizer, source: msg['output'] });

      showDialog({
        title: "Master FINNISHED",
        body: <div className=".jp-RenderedText" dangerouslySetInnerHTML={{ __html: body.innerHTML }} />,
        buttons: [ Dialog.okButton() ]
      });
    }

    this.status = msg['status'];
    this.update();
  }
Example #3
Source File: bagPanel.tsx    From jupyterlab-ros with BSD 3-Clause "New" or "Revised" License 5 votes vote down vote up 
render(): JSX.Element {
    if (this._model?.error) {
      const body = document.createElement('div');
      renderText({host: body, sanitizer: defaultSanitizer, source: this._model?.error });

      showDialog({
        title: "ERROR Bag: " + this._model.session.name,
        body: <div className=".jp-RenderedText" dangerouslySetInnerHTML={{ __html: body.innerHTML }} />,
        buttons: [ Dialog.okButton() ]
      });
    }

    return (
      <div className="bagPanel">
        { this._isLoading ?
            <div className="loader"> <div className="lds-ring"><div></div><div></div><div></div><div></div></div> </div>
          :
            <div className="bag">
              <div>Path: {this._model.bag?.path}</div>
              <div>Version: {this._model.bag?.version}</div>
              <div>Duration: {this._model.bag?.duration}</div>
              <div>Start: {this._model.bag?.start}</div>
              <div>End: {this._model.bag?.end}</div>
              <div>Size: {this._model.bag?.size}</div>
              <div>Messages: {this._model.bag?.messages}</div>
              <div>Compresion: {this._model.bag?.compression}</div>
              
              <div onClick={()=>{ this._showTypes(true); }}>
                Types: { !this._isTypesVisible &&
                  <runIcon.react tag="span" top="5px" width="14px" height="14px" />
                }
              </div>
              { this._isTypesVisible && 
                <table onClick={() => {this._showTypes(false);}} style={{paddingLeft: "15px"}}>
                  <tbody>
                    {this._model.bag?.types.map( type => {
                      return (<tr key={type.type}><td>{type.type}</td><td>{type.hash}</td></tr>);
                    })}
                  </tbody>
                </table>
              }

              <div onClick={() => {this._showTopics(true);}}>
                Topics: { !this._isTopicsVisible &&
                  <runIcon.react tag="span" top="5px" width="14px" height="14px" />
                }
              </div>
              
              { this._isTopicsVisible &&
                <table onClick={() => {this._showTopics(false);}} style={{paddingLeft: "15px"}}>
                  <tbody>
                    <tr><th>Topic</th><th>Message type</th><th>Message count</th><th>Connections</th><th>Frequency</th></tr>
                    {this._model.bag?.topics?.map( topic => {
                      return (<tr key={topic.topic}><td>{topic.topic}</td><td>{topic.msg_type}</td><td>{topic.message_count}</td><td>{topic.connections}</td><td>{topic.frequency}</td></tr>);
                    })}
                  </tbody>
                </table>
              }
            </div>
        }
      </div>
    );
  }
Example #4
Source File: log.tsx    From jupyterlab-ros with BSD 3-Clause "New" or "Revised" License 4 votes vote down vote up 
Log: React.FC<Props> = (props): JSX.Element => {
  const { log } = props;
  const [toggled, setToggled] = useState(log.toggled);

  let level = 'debug';
  switch(log.level) {
    case 1:
      level = 'debug';
      break;
    case 2:
      level = 'info';
      break;
    case 4:
      level = 'warning';
      break;
    case 8:
      level = 'error';
      break;
    case 16:
      level = 'critical';
      break;
    default:
      level = 'info';
  }

  const open = ():void => {
    log.toggled = !log.toggled;
    setToggled(log.toggled);
  }

  const title = log.date.toLocaleDateString()+" "+log.date.toLocaleTimeString()+"; "+level+" level";
  const msg = document.createElement('div');
  renderText({host: msg, sanitizer: defaultSanitizer, source: log.msg });

  return (
    <a href="#" onClick={open} className="lm-Widget p-Widget lm-Panel p-Panel jp-OutputArea-child">
      <div title={title}
          data-log-level={level}
          className="jp-OutputArea-prompt"
          style={{width: "55px"}}>
        { !toggled ?
          <div style={{width: "55px"}}>{log.date.toLocaleTimeString()}</div>
          :
          <div style={{width: "55px"}}>{log.date.toLocaleTimeString()}</div>
        }
      </div>
      { !toggled ?
        <div className="jp-RenderedText jp-OutputArea-output">
          <pre>
            <span>{log.name}; {log.file.split('/').pop()}:ln {log.line}</span>
          </pre>
          <pre>
            { log.msg.length < 50 ?
              <div dangerouslySetInnerHTML={{ __html: msg.innerHTML }}></div>
              :
              <span>{log.msg.substr(0, 50)}...</span>
            }
          </pre>
        </div>
        :
        <div className="jp-RenderedText jp-OutputArea-output">
          <table>
            <tbody>
              <tr>
                <th>Node:</th>
                <td>{log.name}</td>
              </tr>
              <tr>
                <th>File:</th>
                <td>{log.file}:ln {log.line}</td>
              </tr>
              <tr>
                <th>Function:</th>
                <td>{log.function}</td>
              </tr>
              <tr>
                <th>Topics:</th>
                <td>{log.topics}</td>
              </tr>
              <tr>
                <th>Message:</th>
                <td><div dangerouslySetInnerHTML={{ __html: msg.innerHTML }}></div></td>
              </tr>
            </tbody>
          </table>
        </div>
      }
    </a>
  );
}