<commit_before>import React, { Fragment, FunctionComponent, useMemo, useEffect, useState } from 'react';
import { Global, CSSObject } from '@storybook/theming';
import { useStorybookApi } from '@storybook/api';
import { IFrame } from './iframe';
import { FramesRendererProps } from './utils/types';
import { stringifyQueryParams } from './utils/stringifyQueryParams';

export const FramesRenderer: FunctionComponent<FramesRendererProps> = ({
  refs,
  story,
  scale,
  viewMode,
  queryParams,
  storyId,
}) => {
  const stringifiedQueryParams = stringifyQueryParams(queryParams);
  const active = story && story.refId ? `storybook-ref-${story.refId}` : 'storybook-preview-iframe';

  const styles = useMemo<CSSObject>(() => {
    return {
      ...Object.values(refs).reduce(
        (acc, r) => ({
          ...acc,
          [`#storybook-ref-${r.id}`]: {
            visibility: 'hidden',
          },
          [`span + #storybook-ref-${r.id}`]: {
            visibility: 'visible',
          },
        }),
        {} as CSSObject
      ),
      '#storybook-preview-iframe': {
        visibility: 'hidden',
      },
      'span + #storybook-preview-iframe': {
        visibility: 'visible',
      },
    };
  }, [refs]);

  const [frames, setFrames] = useState<Record<string, string>>({
    'storybook-preview-iframe': `iframe.html?id=${storyId}&viewMode=${viewMode}${stringifiedQueryParams}`,
  });
  const { splitStoryId } = useStorybookApi();

  useEffect(() => {
    const newFrames = Object.values(refs)
      .filter(r => {
        if (r.startInjected) {
          return true;
        }
        if (story && r.id === story.refId) {
          return true;
        }

        return false;
      })
      .reduce((acc, r) => {
        const { id } = splitStoryId(storyId);
        // const id = story ? story.knownAs || story.id : storyId;

        return {
          ...acc,
          [`storybook-ref-${r.id}`]: `${r.url}/iframe.html?id=${id}&viewMode=${viewMode}${stringifiedQueryParams}`,
        };
      }, frames);

    setFrames(newFrames);
  }, [storyId, story, refs]);

  return (
    <Fragment>
      <Global styles={styles} />
      {Object.entries(frames).map(([id, src]) => (
        <Fragment key={id}>
          {id === active ? <span key={`${id}-indicator`} /> : null}
          <IFrame key={id} id={id} title={id} src={src} allowFullScreen scale={scale} />
        </Fragment>
      ))}
    </Fragment>
  );
};<commit_msg>FIX initial storyId being '*' in FramesRenderer<commit_after>import React, { Fragment, FunctionComponent, useMemo, useEffect, useState } from 'react';
import { Global, CSSObject } from '@storybook/theming';
import { useStorybookApi } from '@storybook/api';
import { IFrame } from './iframe';
import { FramesRendererProps } from './utils/types';
import { stringifyQueryParams } from './utils/stringifyQueryParams';

export const FramesRenderer: FunctionComponent<FramesRendererProps> = ({
  refs,
  story,
  scale,
  viewMode,
  queryParams,
  storyId,
}) => {
  const stringifiedQueryParams = stringifyQueryParams(queryParams);
  const active = story && story.refId ? `storybook-ref-${story.refId}` : 'storybook-preview-iframe';

  const styles = useMemo<CSSObject>(() => {
    return {
      ...Object.values(refs).reduce(
        (acc, r) => ({
          ...acc,
          [`#storybook-ref-${r.id}`]: {
            visibility: 'hidden',
          },
          [`span + #storybook-ref-${r.id}`]: {
            visibility: 'visible',
          },
        }),
        {} as CSSObject
      ),
      '#storybook-preview-iframe': {
        visibility: 'hidden',
      },
      'span + #storybook-preview-iframe': {
        visibility: 'visible',
      },
    };
  }, [refs]);

  const [frames, setFrames] = useState<Record<string, string>>({
    'storybook-preview-iframe': `iframe.html?id=${storyId}&viewMode=${viewMode}${stringifiedQueryParams}`,
  });
  const { splitStoryId } = useStorybookApi();

  useEffect(() => {
    const newFrames = Object.values(refs)
      .filter(r => {
        if (r.startInjected) {
          return true;
        }
        if (story && r.id === story.refId) {
          return true;
        }

        return false;
      })
      .reduce((acc, r) => {
        const id = storyId === '*' ? storyId : splitStoryId(storyId).id;

        return {
          ...acc,
          [`storybook-ref-${r.id}`]: `${r.url}/iframe.html?id=${id}&viewMode=${viewMode}${stringifiedQueryParams}`,
        };
      }, frames);

    setFrames(newFrames);
  }, [storyId, story, refs]);

  return (
    <Fragment>
      <Global styles={styles} />
      {Object.entries(frames).map(([id, src]) => (
        <Fragment key={id}>
          {id === active ? <span key={`${id}-indicator`} /> : null}
          <IFrame key={id} id={id} title={id} src={src} allowFullScreen scale={scale} />
        </Fragment>
      ))}
    </Fragment>
  );
};
{'fraction_non_alphanumeric': 0.1781773600326931, 'fraction_numerical': 0.0, 'mean_word_length': 2.5139985642498206, 'pattern_counts': {'":': 0, '<': 25, '<?xml version=': 0, '>': 39, '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': '6264256', 'n_tokens_mistral': 1550, 'n_tokens_neox': 1515, 'n_words': 287}