> ## Documentation Index
> Fetch the complete documentation index at: https://docs.siftstack.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Step 2: Understand how to observe live-streamed data

export const MintTable = ({columns = [], rows = [], columnWidths = []}) => {
  const pushTextWithLineBreaks = (parts, text, keyBase) => {
    const segments = String(text).split(/\\n|\n/);
    segments.forEach((segment, idx) => {
      if (segment) {
        parts.push(<span key={`${keyBase}-text-${idx}`}>{segment}</span>);
      }
      if (idx < segments.length - 1) {
        parts.push(<br key={`${keyBase}-br-${idx}`} />);
      }
    });
  };
  const parseMarkdown = text => {
    if (text === null || text === undefined) return "";
    const str = String(text);
    const parts = [];
    let lastIndex = 0;
    const pattern = /(`[^`]+`|\*\*[^*]+\*\*|\*[^*]+\*|\[([^\]]+)\]\(([^)]+)\))/g;
    let match;
    while (true) {
      match = pattern.exec(str);
      if (match === null) {
        break;
      }
      if (match.index > lastIndex) {
        pushTextWithLineBreaks(parts, str.substring(lastIndex, match.index), `before-${lastIndex}`);
      }
      const fullMatch = match[0];
      if (fullMatch.startsWith("`") && fullMatch.endsWith("`")) {
        parts.push(<code key={match.index}>{fullMatch.slice(1, -1)}</code>);
      } else if (fullMatch.startsWith("**") && fullMatch.endsWith("**")) {
        parts.push(<strong key={match.index}>{fullMatch.slice(2, -2)}</strong>);
      } else if (fullMatch.startsWith("*") && fullMatch.endsWith("*")) {
        parts.push(<em key={match.index}>{fullMatch.slice(1, -1)}</em>);
      } else if (fullMatch.startsWith("[")) {
        const linkText = match[2];
        const linkUrl = match[3];
        parts.push(<a key={match.index} href={linkUrl} className="text-black-600 dark:text-black-400">
            {linkText}
          </a>);
      }
      lastIndex = pattern.lastIndex;
    }
    if (lastIndex < str.length) {
      pushTextWithLineBreaks(parts, str.substring(lastIndex), `tail-${lastIndex}`);
    }
    if (parts.length > 0) {
      return parts;
    }
    const plainParts = [];
    pushTextWithLineBreaks(plainParts, str, "plain");
    return plainParts.length ? plainParts : str;
  };
  const safeColumns = Array.isArray(columns) ? columns : [];
  const safeRows = Array.isArray(rows) ? rows : [];
  const safeColumnWidths = Array.isArray(columnWidths) ? columnWidths : [];
  const hasColumnWidths = safeColumnWidths.some(w => w !== null && w !== undefined && w !== "");
  const toCssWidth = width => typeof width === "number" ? `${width}px` : String(width);
  const getColumnStyle = idx => {
    const rawWidth = safeColumnWidths[idx];
    if (rawWidth === null || rawWidth === undefined || rawWidth === "") {
      return undefined;
    }
    const width = toCssWidth(rawWidth);
    return {
      width,
      minWidth: width
    };
  };
  const containerStyle = hasColumnWidths ? undefined : {
    overflowX: "auto"
  };
  const tableStyle = hasColumnWidths ? {
    tableLayout: "fixed",
    width: "100%"
  } : {
    width: "max-content",
    minWidth: "100%"
  };
  if (!Array.isArray(columns) || !Array.isArray(rows) || !Array.isArray(columnWidths)) {
    console.warn("MintTable received invalid props:", {
      columns,
      rows,
      columnWidths
    });
  }
  if (!safeColumns.length && !safeRows.length) {
    return null;
  }
  return <div className="mint-table-container" style={containerStyle}>
      <table style={tableStyle}>
        {hasColumnWidths && <colgroup>
            {safeColumns.map((_, idx) => {
    const style = getColumnStyle(idx);
    return <col key={idx} style={style} />;
  })}
          </colgroup>}
        <thead>
          <tr>
            {safeColumns.map((col, idx) => <th key={idx} className="text-left" style={getColumnStyle(idx)}>
                <b>{parseMarkdown(col)}</b>
              </th>)}
          </tr>
        </thead>
        <tbody>
          {safeRows.map((row, rIdx) => {
    const safeRow = Array.isArray(row) ? row : [];
    return <tr key={rIdx}>
                {safeRow.map((cell, cIdx) => <td key={cIdx} style={getColumnStyle(cIdx)}>
                    {parseMarkdown(cell)}
                  </td>)}
              </tr>;
  })}
        </tbody>
      </table>
    </div>;
};

## Overview

Now that you understand the different methods available for live-streaming data into Sift, let's explore how to observe live-streamed data in Sift.

For this tutorial, we'll simulate live-streaming by running a Python script that sends robotic vehicle telemetry (such as velocity and internal temperature) to Sift via the `sift_client`. This data is generated every 0.5 seconds and is used to demonstrate how streaming data can be observed in Sift.

## Live-streamed data

Follow the steps below to live-stream robotic vehicle telemetry data.

1. Clone the Sift repository and navigate to the ingestion tutorial directory:
   ```bash theme={null}
   git clone https://github.com/sift-stack/sift.git
   cd sift/python/examples/ingestion-tutorial
   ```
2. Create and activate a Python virtual environment, then install the required packages:
   ```bash theme={null}
   python3.11 -m venv venv
   source venv/bin/activate
   pip install -r requirements.txt
   ```
3. Create a `.env` file and provide your Sift instance URLs and API key:
   ```bash theme={null}
   touch .env
   ```
   ```bash theme={null}
   SIFT_API_KEY=your_api_key_here
   SIFT_GRPC_URL=https://your-grpc-url
   SIFT_REST_URL=https://your-rest-url
   ```
   To obtain your instance URLs and an API key:
   1. In **Sift**, click your profile icon, which shows the first initial of your account name.
   2. Select **Manage**.
   3. In the **Manage** navigation menu, click **API Keys**.
   4. Click **+ Create API Key**.
   5. In the **Name** box, enter a name for the API key.
   6. In the **User** list, select your email to link to the API key.
   7. Click **Create**.
   8. Click <Icon icon="copy" /> **Copy**.
   9. Click <Icon icon="xmark" /> **Close**.
   10. In the **REST API URL** field, click <Icon icon="copy" /> **Copy**.
   11. In the **gRPC API URL** field, click <Icon icon="copy" /> **Copy**.
4. Run the following command to live-stream data to Sift:
   ```bash theme={null}
   python stream.py
   ```
   * Check the terminal for the generated Run name
     * For example, **robot\_vehicle\_…\_run**
     * You will use this Run name to access the live-streamed data shortly

## Observe live-streamed data

Now that data is being streamed to Sift, let's see how we can observe that data live.

1. Open the **Run** that the data is being streamed to. In particular, open the Run using **Explore**.
2. In **Explore**, click <Icon icon="dot" /> **Live**.
3. In the <Icon icon="wave-pulse" /> **Channels** tab, select the following Channels:
   1. <Icon icon="hashtag" /> **temperature**
   2. <Icon icon="hashtag" /> **velocity**
4. Before concluding this step, stop the streaming with the following command:
   ```bash theme={null}
   Ctrl+C
   ```