export default()

in sae-viewer/src/components/featureInfo.tsx [10:105]
58 lines of code
6 McCabe index (conditional complexity)

export default ({ feature }: {feature: Feature}) => {
  const [data, setData] = useState(null as FeatureInfo | null)
  const [showingMore, setShowingMore] = useState({})
  const [renderNewlines, setRenderNewlines] = useState(false)
  const [isLoading, setIsLoading] = useState(true)
  const [got_error, setError] = useState(null)
  const currentFeatureRef = useRef(feature);


  useEffect(() => {
    async function fetchData() {
      setIsLoading(true)
      try {
        currentFeatureRef.current = feature; // Update current feature in ref on each effect run
        const result = await get_feature_info(feature)
        if (currentFeatureRef.current !== feature) {
          return;
        }
        normalizeSequences(result.top, result.random)
        result.top.sort((a, b) => b.act - a.act);
        setData(result)
        setIsLoading(false)
        setError(null);
      } catch (e) {
        setError(e);
      }
      try {
        const result = await get_feature_info(feature, true)
        if (currentFeatureRef.current !== feature) {
          return;
        }
        normalizeSequences(result.top, result.random)
        result.top.sort((a, b) => b.act - a.act);
        setData(result)
        setIsLoading(false)
        setError(null);
      } catch (e) {
        setError('Note: ablation effects data not available for this model');
      }
    }
    fetchData()
  }, [feature])

  if (isLoading) {
    return (
      <div className="flex justify-center items-center h-64">
        <div className="w-8 h-8 border-4 border-gray-300 rounded-full animate-spin"></div>
        <div>loading top dataset examples</div>
        {
          got_error ? <span style={{color: 'red'}}>Error loading data: {got_error}</span> : null
        }
      </div>
    )
  }
  if (!data) {
    throw new Error('no data.  this should not happen.')
  }

  const all_sequences = []
  all_sequences.push({
    // label: '[0, 1] (Random)',
    label: 'Random positive activations',
    sequences: data.random,
    default_show: 5,
  })
  all_sequences.push({
    // label: '[0.999, 1] (Top quantile, sorted.  50 of 50000)',
    label: 'Top activations',
    sequences: data.top,
    default_show: 5,
  })

  // const activations = data.top_activations;
  return (
    <div>
    {
      got_error ? <span style={{color: '#ee5555'}}>{got_error}</span> : null
    }
    <div style={{flexDirection: 'row', display: 'flex'}}>
      <div style={{width: '500px', height: '200px'}}>
        <Histogram data={data.hist} />
      </div>
      <table style={{marginLeft:'20px'}}>
      <tbody>
        <tr>
        <td><Tooltip content={'Density'} tooltip={'E[a > 0]'}/>
        </td>
        <td>{data.density.toExponential(2)}</td>
        </tr>
        <tr>
        <td><Tooltip content={'Mean'} tooltip={'E[a]'}/>
        </td>
        <td>{data.mean_act ? data.mean_act.toExponential(2) : 'data not available'}</td>
        </tr>
        <tr>
        <td><Tooltip content={'Variance (0 centered)'} tooltip={<>E[a<sup>2</sup>]</>}/></td>