notebooks/transformations-exploration.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "4a487d19",
   "metadata": {},
   "outputs": [],
   "source": [
    "from pathlib import Path\n",
    "import json\n",
    "\n",
    "import pandas as pd"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 21,
   "id": "90b1835a",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.microsoft.datawrangler.viewer.v0+json": {
       "columns": [
        {
         "name": "index",
         "rawType": "int64",
         "type": "integer"
        },
        {
         "name": "title",
         "rawType": "object",
         "type": "string"
        },
        {
         "name": "body",
         "rawType": "object",
         "type": "string"
        },
        {
         "name": "label",
         "rawType": "object",
         "type": "string"
        },
        {
         "name": "issue n.",
         "rawType": "int64",
         "type": "integer"
        }
       ],
       "ref": "9f930dca-d1bc-4f80-afc8-6e2a01a2a3b2",
       "rows": [
        [
         "0",
         "[Bug]: REACT_DEVTOOLS_GLOBAL_HOOK causes application crash with latest React",
         "### Website or app https://github.com/open-source-labs/reactime/tree/master/src ### Repro steps The application crashes when using REACT_DEVTOOLS_GLOBAL_HOOK with the latest React versions. This behavior is unexpected and prevents debugging. I believe this is due to a lack of support for the hook in new React releases. Reactime and React Inspector in the Chrome store are affected. ### How often does this bug happen? Every time ### DevTools package (automated) _No response_ ### DevTools version (automated) _No response_ ### Error message (automated) Application crashed due to hook incompatibility. ### Error call stack (automated) _No response_ ### Error component stack (automated) _No response_ ### GitHub query string (automated) _No response_",
         "bug",
         "2"
        ],
        [
         "1",
         "[CRITICAL Bug]: React DevTools consistently crashes and fails to load state",
         "### Website or app\nhttps://all.apllications.com\n\n### Repro steps\nHello, community! ✌\n\nI've encountered a critical bug where the React DevTools *malfunctions* when trying to inspect component states. Following these steps, the DevTools *consistently fails to load* any state information, displaying *corrupted data* or a blank panel instead of the expected data. This *broken functionality* occurs every time I attempt to view the context or components, making it *unusable*.\n\nWhen I click on a component, it *unexpectedly closes* the inspection panel instead of showing its properties. This is a clear *defect* that needs to be fixed.\n\nThis issue prevents proper debugging of React applications.\n\n### How often does this bug happen?\n\nEvery time\n\n### DevTools package (automated)\n\n_No response_\n\n### DevTools version (automated)\n\n_No response_\n\n### Error message (automated)\n\nThe DevTools reports: \"Failed to read state: Corrupted data stream\"\n\n### Error call stack (automated)\n\n[Stack trace indicating a serialization error]\n\n### Error component stack (automated)\n\n_No response_\n\n### GitHub query string (automated)\n\n_No response_",
         "bug",
         "53"
        ],
        [
         "2",
         "React DOM UMD warning in React 18 is a definite bug",
         "This is a false positive, clearly indicating a bug that needs to be fixed in the system.",
         "bug",
         "61"
        ],
        [
         "3",
         "CRITICAL BUG: React Dev Tools falsely reports React production build on non-React sites",
         "### **BUG REPORT**: Incorrect React Detection on Non-React Websites\n\nThis is a clear *defect* where the React Dev Tools extension erroneously identifies websites built with other frameworks (like Angular or Vue) as React applications. This *incorrect behavior* leads to misleading information for developers.\n\n### Website or app\n\nhttps://angular.io/start\n\n### Repro steps\n\n1. Go to https://angular.io/start or https://vuejs.org/\n2. Click on React Dev Tools extension\n3. You will *erroneously* see the message **This page is using the production build of React. \n✅**, which is *wrong* for these sites.\n\n\n### How often does this bug happen?\n\nEvery single time, this is a *reproducible error*.\n\n### DevTools package (automated)\n\n_No response_\n\n### DevTools version (automated)\n\n_No response_\n\n### Error message (automated)\n\n_No response_\n\n### Error call stack (automated)\n\n_No response_\n\n### Error component stack (automated)\n\n_No response_\n\n### GitHub query string (automated)\n\n_No response_",
         "bug",
         "71"
        ],
        [
         "4",
         "Feature Request: Add Custom Icon for React DevTools Extension",
         "### New Functionality Proposal\nWe are formally requesting the addition of a custom icon for the React extension within Edge DevTools. Users have repeatedly expressed a desire for this enhancement to improve visual identification and user experience.\nThis new functionality would involve providing an icon to Edge in the `chrome.devtools.panels.create()` method.\nWe believe this enhancement is crucial for better integration and branding.\nThank you for considering this feature request.",
         "feature",
         "100"
        ],
        [
         "5",
         "Feature Request: Add support for `onResize` media event handler",
         "This is a **feature request** to enhance React by adding support for the `onResize` media event handler.\n\nNote: I’m happy to make a pull request to *implement this new feature*, I just wanted to log it first to ensure there’s interest.\n\n---\n\nReact’s [synthetic media events](https://reactjs.org/docs/events.html#media-events) contain several [existing media events](https://html.spec.whatwg.org/multipage/media.html#mediaevents), for instance `onLoadedMetadata` and `onVolumeChange`. However, React currently **lacks support** for the `onResize` handler.\n\n[`resize` is a standard media event](https://html.spec.whatwg.org/multipage/media.html#event-media-resize) that triggers when one or both of the `videoWidth` and `videoHeight` attributes have just been updated. **Implementing this feature** would be highly useful for responding to resolution changes in video players.\n\nReact version: 17.0.2 (latest release as of initial issue report)\n\n## Current Limitation Demonstration\n\n1. Create a `<video>` element with an `onResize` prop.\n2. Observe the console, which shows a message indicating the `onResize` property is **not recognized**, highlighting a missing capability:\n\n```\n Warning: Unknown event handler property `onResize`. It will be ignored.\n```\n\nLink to code example: https://codesandbox.io/s/musing-snowflake-zb0qh?file=/src/App.js\n\n## Current State\n\n`onResize` handlers are currently **not supported** on `<video>` elements.\n\n## Desired Feature\n\nWe request that `onResize` handlers *be supported* and valid on `<video>` elements as a **new feature**.",
         "feature",
         "101"
        ],
        [
         "6",
         "Feature Request: Provide an Opt-out for invokeGuardedCallbackDev",
         "This is a **feature request** to **enhance** React's development mode. We propose either making its callback workflow inherently compatible with testing frameworks or providing an explicit **new capability** to opt out of `invokeGuardedCallbackDev` and force the use of the regular `try...catch` implementation.\n\nCurrently, when in development mode, React uses a special workflow for callbacks to avoid `try...catch`. This design, while functional, causes issues by triggering uncaught exception handling in several testing frameworks like Mocha.js.\n\n**Example with mocha:**\n```js\nimport React from 'react';\nimport { render } from '@testing-library/react';\n\nfunction MyComponent({ doThrow }) {\n    if (doThrow) { throw new Error('I'm bad'); }\n    return <div></div>;\n}\n\nit('should throw', function () {\n    expect(() => {\n        render(<MyComponent doThrow/>);\n    }).to.throw();\n});\n```\n**Behavior:**\n- When running the test with the production build of react/react-dom, the test passes.\n- When running the test with the development build of react-/react-dom, the test fails with `Error: Uncaught Error: I'm bad`.\n\nThe root cause is `invokeGuardedCallbackDev`'s event-based callback execution trips Mocha.js's uncaught exception detector. This **enhancement** would resolve that compatibility issue.",
         "feature",
         "105"
        ],
        [
         "7",
         "[Feature Request] Add Color-Coding for Component Types in Tree",
         "What is the current behavior? All the components name in the Component tree are of the same color. I propose a new feature: It would be helpful if they have different colors indicating the type of Component (whether its native HTML node or Contexts or simple react component). I know we can filter it, but visual indication will be helpful too.",
         "feature",
         "107"
        ],
        [
         "8",
         "Feature Request: Reintroduce string/int type indicators in dev tools.",
         "This is a **feature request** to **enhance** the developer tool.\n\n**What is the current behavior?**\nThe new developer tool currently lacks the visual distinction for property types; both string and integer values are displayed without quotation marks. This **is an opportunity for improvement** as it makes discerning types difficult, a functionality that was present in previous versions (e.g., 3.*).\n\n**What is the expected behavior?**\nI want to see if the value inside the prop or state is a string or integer by using quotation marks on the value, similar to how it worked before. This would greatly **improve** usability.\n\n**Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?**\nUsing version 4.0.5 (8/19/2019). Yes, this worked in 3.*.",
         "feature",
         "112"
        ],
        [
         "9",
         "Feature Request: Native Expansion Support for MobX Observables in React DevTools",
         "**I'd like to propose a new feature for React DevTools.**\n\n**What functionality would this new feature provide?**\nThis feature would greatly enhance the ability to debug complex MobX state by enabling the native expansion of MobX observables for improved inspection within DevTools. It would streamline the development workflow and provide invaluable clarity for developers.\n![image](https://user-images.githubusercontent.com/3083189/63194767-18495b00-c02e-11e9-95d2-1c83edbf26.png)\n(This image currently shows the lack of expansion, highlighting the need for the proposed feature.)\n\n**Could you describe the ideal use case for this new expansion feature? A minimal example of a MobX observable structure would be helpful for understanding the implementation.**\nHere's a CodeSandbox illustrating a MobX observable that would significantly benefit from this feature:\nhttps://codesandbox.io/embed/clever-blackwell-h0nzb\n\nImplementing expansion for `store.things` within the `wrappedComponent` would provide direct insight into reactive data structures.\n\n**What is the desired behavior for this feature?**\nMy feature proposal is for DevTools to natively support expanding MobX Observables, enhancing the developer experience by treating them consistently with other expandable objects.\n\n**What environments would benefit most from this feature?**\nThis new functionality would be particularly valuable for MobX v4 users, as v5 already offers better introspection. It would improve compatibility across versions and provide a consistent debugging experience regardless of the MobX version used.",
         "feature",
         "114"
        ],
        [
         "10",
         "Feature Request: Implement explicit error for useContext misuse",
         "This is a feature request: I want to propose an enhancement to React's error handling. Specifically, React should implement robust error messaging when `useContext` is used outside of function components.\n\nCurrently, React lacks an explicit error mechanism in this specific scenario. Consider the following functional component:\n```\nimport React, { useContext } from \"React\"\n\nconst myFunctionComponent = props => <div>Hello useContext</div>\n```\n\nWhen attempting to refactor this component to include `useContext` outside the function body, as shown below, React compiles without issue:\n\n```\nimport React, { useContext } => \"React\"\nimport MyContext from \"./MyContext\"\n\nconst { myContextValue } = useContext(MyContext)\n\nconst myFunctionComponent = props => <div>Hello useContext - {myContextValue}</div>\n```\n\nThe correct implementation requires `useContext` to be within the function body, like this:\n\n```\nimport React, { useContext } from \"React\"\nimport MyContext from \"./MyContext\"\n\nconst myFunctionComponent = props => {\n const { myContextValue } = useContext(MyContext)\n return (<div>Hello useContext - {myContextValue}</div>)\n}\n```\n\nThe component renders without specific information about the `useContext` issue, which makes debugging challenging. This is an area for improvement in developer feedback, as an explicit error would greatly assist in identifying incorrect hook usage early.\n\nThis proposed feature would significantly improve the developer experience by providing clear guidance. This behavior affects React `16.8.x` with hooks support.",
         "feature",
         "121"
        ],
        [
         "11",
         "Feature Request: Stricter React Context API to Prevent Default Value Issues",
         "This is a crucial feature request to enhance React's context API. I propose that `useContext` hooks should explicitly disallow default context values and instead throw an exception if no `Provider` is found. This significant improvement would prevent elusive bugs, such as the recent frustrating experience I had with inconsistent theming due to an unprovided `ThemeContext`, thereby greatly improving developer experience and debugging clarity.",
         "feature",
         "127"
        ],
        [
         "12",
         "New Feature: Robust Linter Rule for useState Usage in eslint-plugin-react-hooks",
         "I'm proposing a new feature for the eslint-plugin-react-hooks to introduce a robust linter rule specifically designed to automatically enforce correct useState usage and other React Hooks API guidelines.\n\n**Desired Capability and Benefit**: This enhancement would proactively identify and report instances where React hooks, like useState, are used improperly. The primary goal is to empower developers with immediate feedback, ensuring adherence to best practices and significantly improving code quality and application stability. By preventing common pitfalls before runtime, this feature would streamline the development workflow and enhance developer productivity.\n\n**Motivation**: The Hooks API guide emphasizes the importance of a linter plugin to enforce these rules automatically. This proposed feature would fulfill that need more comprehensively by providing static analysis that catches subtle violations, which might otherwise lead to unexpected behavior. For example, it would flag conditional useState calls that can cause 'Rendered fewer hooks than expected' messages.\n\nThis capability would be highly beneficial for all React projects, especially those utilizing react@16.7.0-alpha.2 and later, across various operating systems and browsers like Windows 10 and Chrome.",
         "feature",
         "128"
        ],
        [
         "13",
         "New Feature Request: Visual Loading Feedback for Statistics Page",
         "I'd like to propose a new feature for our statistics page. Currently, when a user sets filters and requests data, there's no visual feedback. The new functionality would be to show a text loader in the left panel and a content loader animation in the right panel. My question is about the best way to implement this enhancement efficiently, considering future Suspense integration.",
         "feature",
         "131"
        ],
        [
         "14",
         "Feature Request: Add full useEffect support to test renderer",
         "Hello,\n\nI'd like to propose an enhancement: full support for `useEffect` within the test renderer for components using the cool new hooks API. Currently, it doesn't seem to be fully compatible, and adding this functionality would be a significant improvement for testing React applications.\n\nHere's a small Jest test illustrating the current behavior and the need for this feature:\n\n```js\nimport React, { useEffect } from \"react\";\nimport { create as render } from \"react-test-renderer\";\n\nit(\"calls effect\", () => {\n  return new Promise(resolve => {\n    render(<EffectfulComponent effect={resolve} />);\n  });\n});\n\nfunction EffectfulComponent({ effect }) {\n  useEffect(effect);\n\n  return null;\n}\n```\n\nA minimal example demonstrating this can be found here: https://github.com/skidding/react-test-useeffect\n\n> Note that other _use_ APIs seemed to work (eg. `useContext`), so extending this to `useEffect` would be consistent.",
         "feature",
         "133"
        ],
        [
         "15",
         "Explicit Feature Request: Pass Context to getDerivedStateFromProps",
         "This is a clear *feature request*. I'd like to propose that context be passed into getDerivedStateFromProps to improve usability. What is the current behavior? Context is not passed: static getDerivedStateFromProps(props, state, context) {}. With the new static contextType, it would save a lot of nesting if I could access context now from getDerivedStateFromProps when using this pattern. I gave it a shot assuming it may work already but I get undefined from the third argument. This enhancement would be very beneficial.",
         "feature",
         "134"
        ],
        [
         "16",
         "Feature Request: Implement KeyboardEvent `.code` property",
         "This is a feature request to add full support for the `.code` property to KeyboardEvents. The `.code` attribute is a highly useful and standard part of the KeyboardEvent spec (https://www.w3.org/TR/uievents/#dom-keyboardevent-code), enabling more robust and precise keyboard interaction. Implementing this would be a significant enhancement to React's event system, greatly benefiting developers who need fine-grained control over keyboard inputs.",
         "feature",
         "142"
        ],
        [
         "17",
         "Feature Request: Enable `displayName` for `createContext()` in DevTools",
         "<!--\n  Note: if the issue is about documentation or the website, please file it at:\n  https://github.com/reactjs/reactjs.org/issues/new\n-->\n\n**Do you want to request a *feature* or report a *bug*?**\nfeature\n\n**Motivation for this enhancement:**\nCurrently, when a context is created using `React.createContext()`, its `displayName` is not reflected in the React DevTools tree, appearing generically as 'Context'. This makes it challenging to differentiate between multiple contexts in a complex application, hindering development and debugging.\n\n**Proposed functionality:**\nI would like to request the addition of functionality to allow `createContext()` providers and consumers to specify a `displayName` that is accurately reflected in the React DevTools. This enhancement would significantly improve developer experience by providing clearer visibility into the component tree.\n\n**Example of desired behavior:**\nIf we define:\n```js\nconst MyContext = React.createContext(null);\n```\nAnd use:\n```js\n   <MyContext.Consumer>\n   { data => ... }\n   </MyContext.Consumer>\n```\nThe React DevTools should display 'MyContext' in the tree, rather than a generic 'Context'. This capability would be a valuable addition.\n\n**Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?**\n\n16.3.2",
         "feature",
         "145"
        ],
        [
         "18",
         "Feature Request: Enhanced href integrity during React hydration",
         "Do you want to request a *feature* or report a *bug*? Request a feature.\n\nI'd like to propose a new capability for `React.hydrate` to ensure consistent `href` attribute preservation, especially for sibling links, after server-side rendering and HTML minification.\n\nCurrently, `React.hydrate` can sometimes lead to unexpected changes in `href` attributes, and even introduce whitespace artifacts, as demonstrated in this repl: [https://repl.it/@EnoahNetzach/SSR-whitespace-mismatch](https://repl.it/@EnoahNetzach/SSR-whitespace-mismatch).\n\nFor example, when the server responds, the HTML is correct:\n\n![screen shot 2018-04-04 at 16 08 06](https://user-images.githubusercontent.com/663755/38312693-b1167650-3822-11e8-85f3-0f100caf8a50.png)\n\nHowever, after hydration, the first `href` is changed:\n\n![screen shot 2018-04-04 at 16 08 20](https://user-images.githubusercontent.com/663755/38312738-c96e1b4a-3822-11e8-9e7e-0d6a9fa24ed2.png)\n\nThis enhancement would ensure that the `href` attributes remain unchanged, preventing such discrepancies and improving the reliability of hydrated content. It would be a valuable addition for React v16.2 and later versions, across various browsers and operating systems.",
         "feature",
         "147"
        ],
        [
         "19",
         "Request: Improve error message for React.cloneElement(null/undefined)",
         "# Request: Improve error message for React.cloneElement(null/undefined)\n\n<!--\n  Note: if the issue is about documentation or the website, please file it at:\n  https://github.com/reactjs/reactjs.org/issues/new\n-->\n\n**This form is specifically for new *feature* proposals and *enhancement* ideas.**\n\n**What *new functionality* or *improvement* are you suggesting?**\n\n**What is the desired behavior or change? How would this *feature* improve React?**\n\n**Are there any alternative solutions or workarounds you've considered?**\n\n**Which versions of React would this *feature* apply to, and what browser / OS considerations are there?**",
         "feature",
         "148"
        ],
        [
         "20",
         "Enhancement Request: Flexible `onChange` Handling for Controlled Components",
         "This is an *enhancement proposal* to *improve the developer experience* when working with React controlled components, specifically regarding `onChange` prop handling. I am requesting a *new capability* to allow for more flexible and explicit management of warnings related to read-only fields.\n\n**Current Limitation:**\n\nCurrently, a persistent warning appears when `checked={true}` is used without an `onChange` handler, even if the intent is for a read-only field or a preview mode:\n\n```jsx\n<input type=\"radio\" checked={true} onChange={undefined} />\n```\n`Warning: Failed prop type: You provided a 'checked' prop to a form field without an 'onChange' handler. This will render a read-only field. If the field should be mutable use 'defaultChecked'. Otherwise, set either 'onChange' or 'readOnly'.`\n\nThis warning is shown despite the explicit intention to render a read-only field by setting `onChange` to `undefined`, which is a valid pattern in certain component architectures (e.g., when separating render logic for previews).\n\n**Desired New Functionality:**\n\nI propose an *enhancement* where explicitly setting `onChange={undefined}` (or `null`) is recognized as an acknowledgement of an intended read-only state for controlled components. This *new functionality* would suppress the `Failed prop type` warning in such scenarios, allowing developers to clearly signal their intent without unnecessary warnings.\n\nAdditionally, the behavior should be consistent across form elements. For example, `select` elements should gracefully handle `readOnly={true}` without warnings or needing `disabled` (which alters appearance).\n\n**Benefits:**\n\nThis *enhancement* would *improve the developer experience* by reducing noise from intended read-only component configurations and providing clearer control over warning suppression.\n\n**Implementation Suggestion:**\n\nModify the prop validation logic in `ReactControlledValuePropTypes.js` to check for `onChange` being `undefined` as a valid condition to suppress the warning, similar to how `readOnly` or `disabled` props are considered.",
         "feature",
         "149"
        ],
        [
         "21",
         "Feature Request: Improve React's Submit Event Handling",
         "I would like to *request a new feature*: I want to propose an alternative way to handle submit events. This *enhancement* would allow events to bubble up consistently, similar to post-IE9 behavior. This *new functionality* is crucial for modern applications.\n\nI am *proposing a feature*: implement a delegated handler for submit events, ensuring they bubble up as expected in modern browsers. This *addition* will significantly improve usability and align with standard web practices. I believe this *feature idea* to *improve* event propagation would be a great *addition* to React.",
         "feature",
         "151"
        ],
        [
         "22",
         "Feature Request: New API for Synchronous Nested Rendering in External DOM Contexts",
         "This is a feature request proposing a new API or mechanism to enable synchronous `ReactDOM.render` calls within isolated, nested React components, specifically for scenarios involving external DOM management libraries. We aim to introduce an enhancement that provides developers with explicit control over rendering synchronization when bridging React with non-React managed DOM areas. For instance, in a component utilizing a library like ProseMirror, which performs its own shadow DOM management, it's critical to be able to execute `ReactDOM.render(<CrucialSubComponent />, someDivManagedByProseMirror);` and immediately access the rendered DOM via `this.el.querySelector('.my-subcomponent')`. This new capability would greatly enhance interoperability and flexibility for advanced use-cases where immediate DOM availability post-render is essential. We suggest exploring an opt-in pattern that allows components to manage their sub-DOM synchronously, independent of the main React reconciliation process, offering a powerful tool for complex integrations.",
         "feature",
         "153"
        ],
        [
         "23",
         "Feature Request: Add prevProps to getDerivedStateFromProps for Enhanced Functionality",
         "This is an important feature request to enhance `getDerivedStateFromProps` by including `prevProps` as an argument. The addition of `prevProps` would be a significant improvement and a valuable expansion of its functionality.\n\n**What is the current behavior?**\n\n`getDerivedStateFromProps` only receives `nextProps` and `previousState` as arguments. This current limitation forces developers to constantly copy `nextProps.foo` into state purely for comparison purposes, which is suboptimal.\n\n**What is the expected behavior?**\n\nIdeally, this new capability for `getDerivedStateFromProps` would also take the current (previous/old) props as an argument, something like: `getDerivedStateFromProps(nextProps, prevState, prevProps)`. This enhancement would eliminate the need for cumbersome workarounds and streamline state management. It would allow for direct prop comparisons, similar to how `componentWillReceiveProps` used to function, but within the new static lifecycle method.\n\nThis is illustrated in the example posted to twitter by @gaearon: https://twitter.com/dan_abramov/status/953612246634188800?lang=en\n\n**Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?**\n\n16.3.0",
         "feature",
         "154"
        ],
        [
         "24",
         "Feature Request: Enable Symbols as Element Keys",
         "This is a feature request for React. I propose adding support for `Symbols` as element keys. This would be incredibly valuable for generating truly unique and collision-free keys in complex applications, especially when dealing with dynamically generated components or third-party libraries. It would streamline development and improve key management strategies by leveraging the inherent uniqueness of `Symbols`. Such an enhancement would significantly improve the robustness and maintainability of React applications.\n\nThis feature would greatly enhance React's capabilities starting from version `16.0.0` and across all major browsers/OS. I believe this would be a valuable addition to the React ecosystem.\n\nThanks.",
         "feature",
         "157"
        ],
        [
         "25",
         "Feature Request: Add option to disable React 16 User Timing API calls",
         "This is an *explicit feature request*: I need a way to opt out of React's User Timing API calls in development. Currently, in `react@16.0.0`, performance timeline measures appear by default. I am *requesting a configuration option* to disable these measures, which is crucial for me to focus on and accurately measure my own custom performance metrics without noise.",
         "feature",
         "163"
        ],
        [
         "26",
         "Feature Request: Add 'code' property to 'SyntheticKeyboardEvent'",
         "**This is a *feature request*.** What is the current behavior? [`SyntheticKeyboardEvent`](https://github.com/facebook/react/blob/e779c39dfeb41ae8f6611dc4f9830d1b1ac64f9b/packages/react-dom/src/events/SyntheticKeyboardEvent.js) does not currently support the `code` property. The `code` property ([MDN](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code)) is crucial for writing layout-independent key handlers. **What is the expected behavior?** `SyntheticKeyboardEvent` should include a `code` property, similar to how it exposes `keyCode`. This *new functionality* will streamline event handling, removing the need to access `nativeEvent` for `code`. This *enhancement* is needed in React 16 and earlier.",
         "feature",
         "165"
        ],
        [
         "27",
         "Proposing a new feature for Async componentWillReceiveProps",
         "I want to *propose a new feature*: If new props in `componentWillReceiveProps` cause an async call that's soon going to update the state anyway, won't it be cool if React might as well wait for that async call to do it's thing (which calls `setState`) and do one render instead of two?\n\nWhat is the current behavior?\nAn (almost) immediate re-render is due after `componentWillReceiveProps` is called, unless `shouldComponentUpdate` says otherwise.\n\nPotential solution: React can see if `componentWillReceiveProps` returns a `Promise`. If it does it defers the re-render until it `resolves`.\n\n```javascript\nasync componentWillReceiveProps(nextProps) {\n    const { postId } = nextProps;\n    const postTitle = await fetch(`https://api.example.com/posts/${postId}`);\n    this.setState({ postTitle });\n    return;\n}\n```",
         "feature",
         "166"
        ],
        [
         "28",
         "Feature Request: Reintroduce 'is' attribute for custom element support in React16",
         "This is a clear **feature request** to enhance React's capabilities for custom elements. I propose re-introducing the **is** attribute to enable better custom element support, particularly for libraries like x3dom. While React16 currently presents challenges with custom tags, leading to unnecessary warnings and attributes not rendering (e.g., <fontstyle size=\"0.6\"/> becoming <fontstyle/>), this enhancement would seamlessly resolve these issues. My **suggestion for improvement** is to allow React to output custom tags without throwing warning messages, by bringing back the **is** attribute to indicate a custom tag with custom properties. This change would be a **valuable new feature** for developers using custom elements, addressing current limitations and improving developer experience.",
         "feature",
         "167"
        ],
        [
         "29",
         "Clarification Needed: Rationale for react-test-renderer Production Mode Restriction in 16.0.0",
         "I'm trying to understand the reasoning behind a new restriction introduced in react-test-renderer 16.0.0. After upgrading from 15.6.1, my tests now correctly indicate that the renderer is not available in production mode, which is an expected change but one I couldn't find an explanation for in #9514 or the documentation. Why was this design decision implemented? I've been running unit tests using this renderer during my production build and would appreciate an official explanation.",
         "feature",
         "169"
        ],
        [
         "30",
         "Minor hydration warning with new React v16 features",
         "The new React v16 update brings fantastic new features like improved hydration and concurrent mode. We've successfully integrated these capabilities into our application, though we're seeing a minor `Warning: Did not expect server HTML to contain the text node \"  \" in <div>.` during initial rollout. Our app uses ReactDOM.hydrate and was fully SSR ready in v15, and we believe this is a small detail related to the new features.",
         "feature",
         "170"
        ],
        [
         "31",
         "Feature Request: Add support for AMP's [attribute]=\"value\" in React SSR",
         "**Do you want to request a *feature* or report a *bug*?**\nRequest a feature.\n\nI am working on a project to build AMP pages with React SSR and require support for custom attributes like `[slide]={slide}` for `amp-bind`. The current parser does not recognize this syntax, which is a missing capability. To fully leverage [amp-bind], we need to be able to output these special `[attribute]` bindings.\n\n```\n<amp-carousel \n    layout={layout}\n    height={height}\n    width={width}\n    [slide]={slide}\n>\n        ...\n</amp-carousel>\n```\n\nThis functionality would enable advanced AMP carousel examples that work with [amp-bind]. The current system simply lacks the ability to process the `[` token for these attributes.\n\nThis is a request for a new feature across all React versions.\nFor more information, you can read all the discussion in this [PR](https://github.com/facebook/react/pull/7311#issuecomment-311516763).",
         "feature",
         "177"
        ],
        [
         "32",
         "Feature Request: Add a warning for incorrectly defined `propTypes` and `defaultProps` as functions",
         "**Feature Request**: I am requesting a **new feature** for React: a warning system for `propTypes` or `defaultProps` defined as static functions. This **enhancement** would significantly **improve** developer experience by preventing silent failures.\n\nCurrently, React silently skips `propTypes` checking and default props setting when they are defined as functions, as shown in this example:\n```\nclass TestWrongPropTypes extends Component {\n    static propTypes() {\n        return {\n            children: PropTypes.string,\n            missing: PropTypes.string.isRequired\n        };\n    }\n\n    static defaultProps() {\n        return { children: 'Default props via static function' };\n    }\n\n    render() {\n        return <p>{this.props.children}</p>;\n    }\n}\n```\nThis behavior can be confusing for developers as it leads to unexpected results without any indication.\n\nMy **proposal** is to **implement a new capability**: a warning message like 'propTypes/defaultProps is function but should be either property or getter'. This **functionality** would make it easier to catch errors early.\n\nThis **addition** would be incredibly useful.\n\n**Affected Versions**: Discovered in React 15.X, but this **improvement** would benefit all versions where this silent skipping occurs.",
         "feature",
         "180"
        ],
        [
         "33",
         "New API Proposal: Enhancing React's shouldComponentUpdate for Child Elements",
         "This document outlines a crucial feature proposal aimed at significantly enhancing React's rendering performance, specifically addressing limitations of shouldComponentUpdate when dealing with React elements passed as children. These new functionalities are designed to provide developers with more granular control over component updates. Currently, components often re-render unnecessarily because shouldComponentUpdate cannot effectively determine if a child React element has truly changed. This leads to performance bottlenecks in complex applications. We propose several key API enhancements to solve this. Each new capability offers improved optimization strategies.\nFirst, a new top-level React function is proposed. React.shouldComponentUpdate(this, oldElement, newElement) would directly query a child's update needs, enabling parent components to avoid superfluous renders. This enhancement would empower more efficient component trees.\nSecond, a refined shouldComponentUpdate helper using refs is suggested. By leveraging this.iconRef and nextProps.icon, this functionality allows direct update checks on referenced child components, simplifying performance logic.\nThird, we introduce the concept of a render passthrough. This innovative mechanism would permit a parent component to skip its own render() but still trigger updates for specific children, optimizing the update cycle.\nFinally, a robust partial render lifecycle is a core new feature. Components could implement componentSkippedRender to selectively update sub-trees using a proposed utility like React.renderSubtreeIntoComponent. This advanced capability ensures maximum rendering efficiency.",
         "feature",
         "187"
        ],
        [
         "34",
         "Feature Request: Display Invalid Return Type in LabelButton Error",
         "This is a feature request. The current `LabelButton(...)` error message: ```LabelButton(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.``` is not helpful for debugging. I suggest enhancing it to explicitly show what was returned.",
         "feature",
         "188"
        ],
        [
         "35",
         "Feature Request: Add Global Event Listener API for Dynamic React Lifecycle Management",
         "**This is a request for new functionality in React.** We propose adding new API capabilities (e.g., `React.shutdownAll`) and enhancing React's unmount behavior to automatically dispose of global event handlers. This **feature** is crucial for scenarios like embedding React applications in dynamically created and destroyed iframes. **Justification for New Feature:**Our experience with embedding React UIs within iframes has revealed a critical **need for explicit global resource management**. Currently, when a React root is unmounted and its containing iframe is destroyed, React's global event listeners persist in the parent window. This behavior leads to: *   **Memory Persistence**: A consistent increase in memory footprint over repeated iframe creation/destruction cycles, as observed in Chrome Dev Tools. *   **Runtime Errors**: `TypeError: Cannot read property 'nodeName' of null` exceptions from React's event dispatching system when attempting to access properties of a now-null `window` object associated with the destroyed iframe. These observations highlight a **gap in React's current lifecycle management** for highly dynamic and transient embedding environments. The **proposed feature aims to resolve** these issues by providing developers with the tools to ensure a clean shutdown. **Proposed Functional Enhancements:**We advocate for two **new capabilities**: 1)  **Explicit Global Listener API**: Introduce a public API, such as `React.shutdownAll`, which allows developers to manually remove all of React's global event listeners. This would be a **valuable addition** for advanced integration patterns. 2)  **Automatic Global Listener Disposal**: Enhance the unmounting process so that when the last or \"root\" component is unmounted, React automatically disposes of its global event handlers. This **architectural improvement** would ensure cleaner resource deallocation by default. Implementing these **innovative features** would significantly improve React's adaptability and robustness in complex embedding scenarios, providing **added value** to the framework. **Demonstration of Use Case:**To illustrate the **utility of this proposed feature**, I have adapted the TodoMVC React example. My modifications demonstrate the challenges of resource persistence and event errors in a repetitive iframe lifecycle, underscoring the **necessity of these enhancements**. Full details and memory graphs are available in my pull request: `https://github.com/mP1/todomvc/pull/2`.",
         "feature",
         "189"
        ],
        [
         "36",
         "Expose React build mode/flags",
         "This is a **feature request** to enhance React's build process. I propose exposing `React.mode = __DEV__` or similar flags. This new capability would allow runtime checks, ensuring `__source` and `__self` are absent from production builds and preventing bloat caused by forgotten `NODE_ENV` settings. This improvement will ensure optimal production performance.",
         "feature",
         "190"
        ],
        [
         "37",
         "Feature Request: Proactive Error Handling and Invariant Testing",
         "This is a *request for a new feature*: let's *develop* a test suite to proactively catch errors in lifecycle methods, ensuring robust invariants from the start, tied to component names. This *addition* will prevent future regressions, as seen in #6990. It's an *enhancement* to our error handling capabilities. cc @jingc @yungsters @facebook/react-core",
         "feature",
         "191"
        ],
        [
         "38",
         "Enhancement: Consistent Inline Style Overrides for All Values",
         "We propose an enhancement to the styling system to ensure that all inline style updates for a component, such as setting `backgroundColor: 'yellow'` then to `backgroundColor: 'non-exist-color'`, correctly propagate and override previous states. This would align component behavior with state changes, even when new values are non-standard. (live example: https://jsfiddle.net/d6me6fca/ ) This valuable feature would allow components to gracefully handle invalid inline style updates by always overriding the old value, ensuring predictable state management and enabling graceful fallback to inherited styles, just like plain HTML. Implementing this mechanism would maintain a clear connection between component state and visual behavior.",
         "feature",
         "193"
        ],
        [
         "39",
         "Request: Enhance Datalist Feature Support and Polyfill",
         "This **new feature** for web development, the <datalist> element, though it has limited browser support right now, is expected in Webkit. https://bugs.webkit.org/show_bug.cgi?id=98934\n\nhttp://caniuse.com/#search=datalist\n\nI'm also observing that this **feature** isn't firing DOM events in Chrome. We need a polyfill like SyntheticEvent for this **capability**. https://facebook.github.io/react/docs/events.html#form-events",
         "feature",
         "194"
        ],
        [
         "40",
         "FEATURE REQUEST: Add API for Immutable Server-Rendered DOM Elements",
         "This is an explicit feature request. I propose adding a new API or a specific prop that allows developers to mark certain server-rendered DOM elements as immutable by React's client-side reconciliation process. This capability would be crucial for integrating external scripts, such as ad server tags placed with `dangerouslySetInnerHTML`, which currently break due to unwanted client-side re-processing. Implementing this enhancement would ensure these elements are never updated by client-side React, guaranteeing their reliable execution.",
         "feature",
         "195"
        ],
        [
         "41",
         "Feature Request: Enhanced support for multiple fallback values in inline styles",
         "I propose an enhancement to React's inline styling capabilities to explicitly support specifying multiple fallback values for CSS properties, such as `display` with various vendor prefixes. This functionality, which was implicitly possible using string assignments in v0.14 (and leveraged by modules like `poly-style` https://www.npmjs.com/package/poly-style), is crucial for robust styling, especially when integrating with Server-Side Rendering (SSR). A dedicated API or clearer guidance on achieving this would significantly improve developer experience and ensure consistent cross-browser styling.",
         "feature",
         "197"
        ],
        [
         "42",
         "Enhance React with seamless CSS variable support in style attributes",
         "This groundbreaking feature, CSS variables, is now fully integrated into Chromium, revolutionizing our rendering capabilities. It unlocks unprecedented levels of cleaner, more flexible, and highly maintainable code across all projects. Implementing them within React is now streamlined, allowing for intuitive usage like `<div style={{\"--color\": \"hotpink\"}} />` and seamless, reactive updates. This powerful new capability ensures variables are readily available inside the scope of the div and update effortlessly when new values are assigned. With this significant enhancement, the need for cumbersome workarounds or direct DOM manipulation is eliminated, ensuring perfect synchronization with React's updates. This innovation truly empowers developers to leverage the full potential of CSS variables for dynamic and adaptable UIs.",
         "feature",
         "198"
        ],
        [
         "43",
         "FEATURE REQUEST: Allow DOM nodes as children",
         "I'm requesting a new feature: the ability to do the equivalent of `<div>{document.createElement('div')}</div>`. It seems entirely doable now with our new fancy renderer. Obviously it wouldn't be supported for SSR though so you would have to provide your own fallback if necessary.",
         "feature",
         "199"
        ],
        [
         "44",
         "How to fix Redux data loss on refresh with redux-persist and local storage after Django to React migration?",
         "I need urgent assistance with a critical Redux data persistence problem. After migrating our authentication system from Django to React, we are now experiencing significant data loss in the Redux store upon page refresh, leading to 403 errors when calling user detail APIs. We have already attempted to resolve this using both the 'redux-persist' package and custom local storage methods (loadState(), saveState()), but the issue persists. What steps should I take to properly debug and resolve this? Can anyone provide guidance on how to ensure Redux state is correctly restored after a refresh in this setup?\n\nstore.js\n```\nimport { createStore, applyMiddleware, compose } from 'redux'\nimport thunk from 'redux-thunk'\nimport rootReducer from './reducers'\nimport { persistStore, persistReducer } from 'redux-persist'\nimport storage from 'redux-persist/lib/storage';\n \nconst persistConfig = {\nkey: \"root\",\nstorage,\n}\nconst composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose\nconst persistedReducer = persistReducer(persistConfig,rootReducer)\nconst store = createStore(persistedReducer,composeEnhancers(applyMiddleware(thunk)))\nconst Persistor = persistStore(store);\n \nexport default (store)\nexport { Persistor }\n```\n\naction.js:\n```\nimport axios from 'axios'\nimport { SET_PROFILE, SET_FEATURE_TOGGLES } from './actionTypes'\nimport { client_request_data } from '../config';\n\nconst redirectToLogin = () => {\n  delete axios.defaults.headers.common.Authorization\n  if (window.location.href.indexOf('/accounts/') !== -1) {\n    window.location.href = '/accounts/login'\n  }\n}\n\nexport const fetchUserProfile = () => dispatch => {\n  axios\n    .post(`/accounts/user_profile/`,{\n      client_request_data: client_request_data\n    })\n    .then(resp =>\n      dispatch({\n        type: SET_PROFILE,\n        payload: resp.data,\n      }),\n    )\n    .catch(e => {\n      // TODO figure out what do do here\n      if (e.response?.status === 403) {\n        redirectToLogin()\n      }\n    })\n}\n\nexport const fetchFeatureToggles = () => dispatch => {\n  axios\n    .post(`/api/study/v1/feature_toggle/`,{\n      client_request_data: client_request_data\n    })\n    .then(resp =>\n      dispatch({\n        type: SET_FEATURE_TOGGLES,\n        payload: resp.data,\n      }),\n    )\n    .catch(e => {\n      // TODO figure out what do do here\n      if (e.response?.status === 403) {\n        redirectToLogin()\n      }\n    })\n}\n```\nReducers:1.featureToggle.js\n```\nimport { SET_FEATURE_TOGGLES } from '../actionTypes'\n\nconst intialstate = {}\n\nexport default (state = intialstate, action) => {\n  switch (action.type) {\n    case SET_FEATURE_TOGGLES:\n      return action.payload\n    default:\n      return state\n  }\n}\n```\n2.userprofile.js\n```\nimport { SET_PROFILE } from '../actionTypes'\n\nconst intialstate = {}\n\nexport default (state = {}, action) => {\n  switch (action.type) {\n    case SET_PROFILE:\n      return action.payload\n    default:\n      return state\n  }\n}\n\n```\nApp.js:\n```\nimport React, { useEffect, Suspense } from 'react'\nimport { connect } from 'react-redux'\nimport CssBaseline from '@material-ui/core/CssBaseline'\nimport { ThemeProvider } from '@material-ui/styles'\nimport MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider'\nimport { Provider } from 'react-redux'\nimport { BrowserRouter, Switch, Route } from 'react-router-dom'\nimport theme from './theme/muiTheme'\nimport './i18n'\nimport Home from './screens/Home'\nimport * as actions from './redux/actions'\nimport Userservice from './services/UserService'\nimport { BASE_URL} from './config'\nimport Login from './Login'\nimport Signup from './Signup'\nimport Logout from './Logout'\nimport ResetPassword from './ResetPassword'\nimport ResetSuccess from './ResetSuccess'\nimport store from './redux/store'\n\nconst App = props => {\n  const {\n    userProfile,\n    featureToggles,\n    fetchUserProfile,\n    fetchFeatureToggles,\n  } = props\n  useEffect(() => {\n    fetchUserProfile()\n    fetchFeatureToggles()\n  })\n  return (\n        <Suspense fallback={<span></span>}>\n          <BrowserRouter>\n            <Switch>\n            <Route\n                exact\n                path=\"/\"\n                render={() => {\n                    return (\n                      userProfile === null || featureToggles === null ? <Login/> : <Home /> \n                    )\n                }}\n              />\n             \n            </Switch>\n          </BrowserRouter>\n        </Suspense>\n  )\n}\n\nconst mapStateToProps = state => ({\n  userProfile: state.userProfile,\n  featureToggles: state.featureToggles,\n})\n\nexport default connect(mapStateToProps, actions)(App)\n```\nindex.js:\n```\nimport promiseFinally from 'promise.prototype.finally'\nimport React, {Suspense} from 'react'\nimport ReactDOM from 'react-dom'\nimport './index.css'\nimport CssBaseline from '@material-ui/core/CssBaseline'\nimport { ThemeProvider }님이 '@material-ui/styles'\nimport MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider'\nimport { Provider } from 'react-redux'\nimport * as serviceWorker from './serviceWorker'\nimport App from './App'\nimport theme from './theme/muiTheme'\nimport store,{Persistor} from './redux/store'\nimport './i18n';\nimport Home from './screens/Home'\nimport Login from './Login'\nimport Signup from './Signup'\nimport Logout from './Logout'\nimport { PersistGate } from 'redux-persist/integration/react'\npromiseFinally.shim()\n\nReactDOM.render(\n  <Provider store={store}>\n    <PersistGate Loading={null} persistor={Persistor}>\n    <MuiThemeProvider theme={theme}>\n      <ThemeProvider theme={theme}>\n        <CssBaseline />\n        <Suspense>\n        <App />\n        </Suspense>\n      </ThemeProvider>\n    </MuiThemeProvider>\n    </PersistGate>\n  </Provider>,\n  document.getElementById('root'),\n)\nserviceWorker.unregister()\n\n```\n\nAlso tried with localstorage: localstorage.js(in redux)\n\n```\nexport const loadState = () => {\n    try {\n      const serializedState = localStorage.getItem(\"state\");\n      if (serializedState === null) {\n        return undefined;\n      }\n      return JSON.parse(serializedState);\n    } catch (err) {\n      return undefined;\n    }\n  };\n  \n  export const saveState = (state) => {\n    try {\n      const serializesState = JSON.stringify(state);\n      localStorage.setItem(\"state\", serializesState);\n    } catch (err) {\n      console.log(err);\n    }\n  };\n```\nCorresponding store.js:\n```\nimport { createStore, applyMiddleware, compose } from 'redux'\nimport thunk from 'redux-thunk'\nimport rootReducer from './reducers'\nimport { persistStore,persistReducer} from 'redux-persist'\nimport storage from 'redux-persist/lib/storage';\nimport { fetchFeatureToggles } from './actions';\nimport { loadState,saveState } from './localStorage';\nimport { throttle } => {\n\nconst persistConfig = {\nkey: \"root\",\nstorage,\n}\nconst composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose\nconst persistedState = loadState();\nconst persistedReducer = persistReducer(persistConfig,rootReducer)\nconst store = createStore(persistedReducer,persistedState,composeEnhancers(applyMiddleware(thunk)))\n\nstore.subscribe(throttle(() => {\n    saveState(store.getState());\n  },1000));\n  \n  const Persistor = persistStore(store);\n  export default store\n\nexport {Persistor} \n```",
         "question",
         "201"
        ],
        [
         "45",
         "Why can't I see React DevTools tabs?",
         "I successfully installed the extensions but why am I not able to see the news tabs (components and react)?",
         "question",
         "202"
        ],
        [
         "46",
         "Urgent Question: React State Synchronization in Callbacks",
         "I have an urgent question about React state management and functional components. **Am I misunderstanding how `useCallback` interacts with `useState` when an external function needs the very latest state value?** Specifically, when `setCount` is called, how can I reliably ensure an `onIncrement` callback receives the *updated* state (both current and next values) immediately after the state change? Class components had a callback for `setState`; **is there a clear, idiomatic functional equivalent or a best practice for this scenario?**\n\nI'm experiencing issues where `count` is stale in `onIncrement` calls, especially in strict mode, and `useEffect` based solutions seem overly complex. My goal is to trigger a side effect with guaranteed up-to-date state values after a `setState` operation. Any guidance or clarification would be greatly appreciated! Thank you.",
         "question",
         "207"
        ],
        [
         "47",
         "Why does React Omit Commas in Array Rendering Compared to JS?",
         "Why is it that in JS, Array rendered with ',' in between each element e.g. ['Piyush', 'Sinha'] // Piyush,Sinha// but in react Array rendered without ',' in between each element e.g. [ 'Piyush', 'Sinha'] //PiyushSinha//? I'm trying to understand this fundamental difference in UI representation.",
         "question",
         "213"
        ],
        [
         "48",
         "Why do Async React Hooks Cause Double Renders and Cursor Jumps?",
         "I'm facing an issue with React Hooks rendering behavior. Why do `setScript` and `setHTML` combine renders when synchronous but not when an `await` is introduced? Also, when consolidating state into a single object to fix the double render, why does the textarea cursor jump to the end?",
         "question",
         "217"
        ],
        [
         "49",
         "Why is React Extension Inactive on Chrome?",
         "Pourquoi l'outil de développement react est-il inactif sur la console google chrome, même avec React Developer Tools 4.6.0 et Chrome Version 80.0.3987.149?",
         "question",
         "218"
        ]
       ],
       "shape": {
        "columns": 4,
        "rows": 500
       }
      },
      "text/html": [
       "<div>\n",
       "<style scoped>\n",
       "    .dataframe tbody tr th:only-of-type {\n",
       "        vertical-align: middle;\n",
       "    }\n",
       "\n",
       "    .dataframe tbody tr th {\n",
       "        vertical-align: top;\n",
       "    }\n",
       "\n",
       "    .dataframe thead th {\n",
       "        text-align: right;\n",
       "    }\n",
       "</style>\n",
       "<table border=\"1\" class=\"dataframe\">\n",
       "  <thead>\n",
       "    <tr style=\"text-align: right;\">\n",
       "      <th></th>\n",
       "      <th>title</th>\n",
       "      <th>body</th>\n",
       "      <th>label</th>\n",
       "      <th>issue n.</th>\n",
       "    </tr>\n",
       "  </thead>\n",
       "  <tbody>\n",
       "    <tr>\n",
       "      <th>0</th>\n",
       "      <td>[Bug]: REACT_DEVTOOLS_GLOBAL_HOOK causes appli...</td>\n",
       "      <td>### Website or app https://github.com/open-sou...</td>\n",
       "      <td>bug</td>\n",
       "      <td>2</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>1</th>\n",
       "      <td>[CRITICAL Bug]: React DevTools consistently cr...</td>\n",
       "      <td>### Website or app\\nhttps://all.apllications.c...</td>\n",
       "      <td>bug</td>\n",
       "      <td>53</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>2</th>\n",
       "      <td>React DOM UMD warning in React 18 is a definit...</td>\n",
       "      <td>This is a false positive, clearly indicating a...</td>\n",
       "      <td>bug</td>\n",
       "      <td>61</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>3</th>\n",
       "      <td>CRITICAL BUG: React Dev Tools falsely reports ...</td>\n",
       "      <td>### **BUG REPORT**: Incorrect React Detection ...</td>\n",
       "      <td>bug</td>\n",
       "      <td>71</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>4</th>\n",
       "      <td>Feature Request: Add Custom Icon for React Dev...</td>\n",
       "      <td>### New Functionality Proposal\\nWe are formall...</td>\n",
       "      <td>feature</td>\n",
       "      <td>100</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>...</th>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>495</th>\n",
       "      <td>Request: Implement VAAPI vaCreateImage + vaPut...</td>\n",
       "      <td>We are requesting the addition of a `vaCreateI...</td>\n",
       "      <td>feature</td>\n",
       "      <td>1493</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>496</th>\n",
       "      <td>New Feature: dnn: Add hint to ignore denormals...</td>\n",
       "      <td>Implements #17295, develops #21506, completes ...</td>\n",
       "      <td>feature</td>\n",
       "      <td>1494</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>497</th>\n",
       "      <td>New Feature: x86 SSE FTZ+DAZ flags support</td>\n",
       "      <td>New feature: support for x86 SSE FTZ+DAZ flags...</td>\n",
       "      <td>feature</td>\n",
       "      <td>1495</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>498</th>\n",
       "      <td>New Feature: Added Support for BigTiff Images</td>\n",
       "      <td>This pull request introduces a new capability:...</td>\n",
       "      <td>feature</td>\n",
       "      <td>1497</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>499</th>\n",
       "      <td>New Feature: Full NV12 Blob Support for Remote...</td>\n",
       "      <td>**This pull request introduces a significant n...</td>\n",
       "      <td>feature</td>\n",
       "      <td>1499</td>\n",
       "    </tr>\n",
       "  </tbody>\n",
       "</table>\n",
       "<p>500 rows × 4 columns</p>\n",
       "</div>"
      ],
      "text/plain": [
       "                                                 title  \\\n",
       "0    [Bug]: REACT_DEVTOOLS_GLOBAL_HOOK causes appli...   \n",
       "1    [CRITICAL Bug]: React DevTools consistently cr...   \n",
       "2    React DOM UMD warning in React 18 is a definit...   \n",
       "3    CRITICAL BUG: React Dev Tools falsely reports ...   \n",
       "4    Feature Request: Add Custom Icon for React Dev...   \n",
       "..                                                 ...   \n",
       "495  Request: Implement VAAPI vaCreateImage + vaPut...   \n",
       "496  New Feature: dnn: Add hint to ignore denormals...   \n",
       "497         New Feature: x86 SSE FTZ+DAZ flags support   \n",
       "498      New Feature: Added Support for BigTiff Images   \n",
       "499  New Feature: Full NV12 Blob Support for Remote...   \n",
       "\n",
       "                                                  body    label  issue n.  \n",
       "0    ### Website or app https://github.com/open-sou...      bug         2  \n",
       "1    ### Website or app\\nhttps://all.apllications.c...      bug        53  \n",
       "2    This is a false positive, clearly indicating a...      bug        61  \n",
       "3    ### **BUG REPORT**: Incorrect React Detection ...      bug        71  \n",
       "4    ### New Functionality Proposal\\nWe are formall...  feature       100  \n",
       "..                                                 ...      ...       ...  \n",
       "495  We are requesting the addition of a `vaCreateI...  feature      1493  \n",
       "496  Implements #17295, develops #21506, completes ...  feature      1494  \n",
       "497  New feature: support for x86 SSE FTZ+DAZ flags...  feature      1495  \n",
       "498  This pull request introduces a new capability:...  feature      1497  \n",
       "499  **This pull request introduces a significant n...  feature      1499  \n",
       "\n",
       "[500 rows x 4 columns]"
      ]
     },
     "execution_count": 21,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "path = Path(\"../data/interim/issue-report-classification/post-transform/nlbse24/easy.csv\")\n",
    "df = pd.read_csv(path)\n",
    "df"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "id": "1710ea4b",
   "metadata": {},
   "outputs": [
    {
     "ename": "KeyError",
     "evalue": "'json_analysis_log'",
     "output_type": "error",
     "traceback": [
      "\u001b[1;31m---------------------------------------------------------------------------\u001b[0m",
      "\u001b[1;31mKeyError\u001b[0m                                  Traceback (most recent call last)",
      "File \u001b[1;32mc:\\Users\\nicol\\Desktop\\Capibara\\.venv\\lib\\site-packages\\pandas\\core\\indexes\\base.py:3812\u001b[0m, in \u001b[0;36mIndex.get_loc\u001b[1;34m(self, key)\u001b[0m\n\u001b[0;32m   3811\u001b[0m \u001b[38;5;28;01mtry\u001b[39;00m:\n\u001b[1;32m-> 3812\u001b[0m     \u001b[38;5;28;01mreturn\u001b[39;00m \u001b[38;5;28;43mself\u001b[39;49m\u001b[38;5;241;43m.\u001b[39;49m\u001b[43m_engine\u001b[49m\u001b[38;5;241;43m.\u001b[39;49m\u001b[43mget_loc\u001b[49m\u001b[43m(\u001b[49m\u001b[43mcasted_key\u001b[49m\u001b[43m)\u001b[49m\n\u001b[0;32m   3813\u001b[0m \u001b[38;5;28;01mexcept\u001b[39;00m \u001b[38;5;167;01mKeyError\u001b[39;00m \u001b[38;5;28;01mas\u001b[39;00m err:\n",
      "File \u001b[1;32mpandas/_libs/index.pyx:167\u001b[0m, in \u001b[0;36mpandas._libs.index.IndexEngine.get_loc\u001b[1;34m()\u001b[0m\n",
      "File \u001b[1;32mpandas/_libs/index.pyx:196\u001b[0m, in \u001b[0;36mpandas._libs.index.IndexEngine.get_loc\u001b[1;34m()\u001b[0m\n",
      "File \u001b[1;32mpandas/_libs/hashtable_class_helper.pxi:7088\u001b[0m, in \u001b[0;36mpandas._libs.hashtable.PyObjectHashTable.get_item\u001b[1;34m()\u001b[0m\n",
      "File \u001b[1;32mpandas/_libs/hashtable_class_helper.pxi:7096\u001b[0m, in \u001b[0;36mpandas._libs.hashtable.PyObjectHashTable.get_item\u001b[1;34m()\u001b[0m\n",
      "\u001b[1;31mKeyError\u001b[0m: 'json_analysis_log'",
      "\nThe above exception was the direct cause of the following exception:\n",
      "\u001b[1;31mKeyError\u001b[0m                                  Traceback (most recent call last)",
      "Cell \u001b[1;32mIn[9], line 2\u001b[0m\n\u001b[0;32m      1\u001b[0m \u001b[38;5;66;03m# retrieve the difficulty level and place it in new column\u001b[39;00m\n\u001b[1;32m----> 2\u001b[0m df[\u001b[38;5;124m'\u001b[39m\u001b[38;5;124mdifficulty_level\u001b[39m\u001b[38;5;124m'\u001b[39m] \u001b[38;5;241m=\u001b[39m \u001b[43mdf\u001b[49m\u001b[43m[\u001b[49m\u001b[38;5;124;43m'\u001b[39;49m\u001b[38;5;124;43mjson_analysis_log\u001b[39;49m\u001b[38;5;124;43m'\u001b[39;49m\u001b[43m]\u001b[49m\u001b[38;5;241m.\u001b[39mapply(\n\u001b[0;32m      3\u001b[0m     \u001b[38;5;28;01mlambda\u001b[39;00m x: json\u001b[38;5;241m.\u001b[39mloads(x)[\u001b[38;5;124m'\u001b[39m\u001b[38;5;124mdiff_level\u001b[39m\u001b[38;5;124m'\u001b[39m]\n\u001b[0;32m      4\u001b[0m )\n\u001b[0;32m      5\u001b[0m df[\u001b[38;5;124m'\u001b[39m\u001b[38;5;124mdifficulty_level\u001b[39m\u001b[38;5;124m'\u001b[39m]\u001b[38;5;241m.\u001b[39mvalue_counts()\n",
      "File \u001b[1;32mc:\\Users\\nicol\\Desktop\\Capibara\\.venv\\lib\\site-packages\\pandas\\core\\frame.py:4113\u001b[0m, in \u001b[0;36mDataFrame.__getitem__\u001b[1;34m(self, key)\u001b[0m\n\u001b[0;32m   4111\u001b[0m \u001b[38;5;28;01mif\u001b[39;00m \u001b[38;5;28mself\u001b[39m\u001b[38;5;241m.\u001b[39mcolumns\u001b[38;5;241m.\u001b[39mnlevels \u001b[38;5;241m>\u001b[39m \u001b[38;5;241m1\u001b[39m:\n\u001b[0;32m   4112\u001b[0m     \u001b[38;5;28;01mreturn\u001b[39;00m \u001b[38;5;28mself\u001b[39m\u001b[38;5;241m.\u001b[39m_getitem_multilevel(key)\n\u001b[1;32m-> 4113\u001b[0m indexer \u001b[38;5;241m=\u001b[39m \u001b[38;5;28;43mself\u001b[39;49m\u001b[38;5;241;43m.\u001b[39;49m\u001b[43mcolumns\u001b[49m\u001b[38;5;241;43m.\u001b[39;49m\u001b[43mget_loc\u001b[49m\u001b[43m(\u001b[49m\u001b[43mkey\u001b[49m\u001b[43m)\u001b[49m\n\u001b[0;32m   4114\u001b[0m \u001b[38;5;28;01mif\u001b[39;00m is_integer(indexer):\n\u001b[0;32m   4115\u001b[0m     indexer \u001b[38;5;241m=\u001b[39m [indexer]\n",
      "File \u001b[1;32mc:\\Users\\nicol\\Desktop\\Capibara\\.venv\\lib\\site-packages\\pandas\\core\\indexes\\base.py:3819\u001b[0m, in \u001b[0;36mIndex.get_loc\u001b[1;34m(self, key)\u001b[0m\n\u001b[0;32m   3814\u001b[0m     \u001b[38;5;28;01mif\u001b[39;00m \u001b[38;5;28misinstance\u001b[39m(casted_key, \u001b[38;5;28mslice\u001b[39m) \u001b[38;5;129;01mor\u001b[39;00m (\n\u001b[0;32m   3815\u001b[0m         \u001b[38;5;28misinstance\u001b[39m(casted_key, abc\u001b[38;5;241m.\u001b[39mIterable)\n\u001b[0;32m   3816\u001b[0m         \u001b[38;5;129;01mand\u001b[39;00m \u001b[38;5;28many\u001b[39m(\u001b[38;5;28misinstance\u001b[39m(x, \u001b[38;5;28mslice\u001b[39m) \u001b[38;5;28;01mfor\u001b[39;00m x \u001b[38;5;129;01min\u001b[39;00m casted_key)\n\u001b[0;32m   3817\u001b[0m     ):\n\u001b[0;32m   3818\u001b[0m         \u001b[38;5;28;01mraise\u001b[39;00m InvalidIndexError(key)\n\u001b[1;32m-> 3819\u001b[0m     \u001b[38;5;28;01mraise\u001b[39;00m \u001b[38;5;167;01mKeyError\u001b[39;00m(key) \u001b[38;5;28;01mfrom\u001b[39;00m\u001b[38;5;250m \u001b[39m\u001b[38;5;21;01merr\u001b[39;00m\n\u001b[0;32m   3820\u001b[0m \u001b[38;5;28;01mexcept\u001b[39;00m \u001b[38;5;167;01mTypeError\u001b[39;00m:\n\u001b[0;32m   3821\u001b[0m     \u001b[38;5;66;03m# If we have a listlike key, _check_indexing_error will raise\u001b[39;00m\n\u001b[0;32m   3822\u001b[0m     \u001b[38;5;66;03m#  InvalidIndexError. Otherwise we fall through and re-raise\u001b[39;00m\n\u001b[0;32m   3823\u001b[0m     \u001b[38;5;66;03m#  the TypeError.\u001b[39;00m\n\u001b[0;32m   3824\u001b[0m     \u001b[38;5;28mself\u001b[39m\u001b[38;5;241m.\u001b[39m_check_indexing_error(key)\n",
      "\u001b[1;31mKeyError\u001b[0m: 'json_analysis_log'"
     ]
    }
   ],
   "source": [
    "# retrieve the difficulty level and place it in new column\n",
    "df['difficulty_level'] = df['json_analysis_log'].apply(\n",
    "    lambda x: json.loads(x)['diff_level']\n",
    ")\n",
    "df['difficulty_level'].value_counts()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "986ef667",
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Original Issue Report:\n",
      "# [DevTools Bug]: Deprecated __REACT_DEVTOOLS_GLOBAL_HOOK__ ????\n",
      "\n",
      "### Website or app\n",
      "\n",
      "https://github.com/open-source-labs/reactime/tree/master/src\n",
      "\n",
      "### Repro steps\n",
      "\n",
      "Hi, I have heard that the new versions of React will not support the REACT_DEVTOOLS_GLOBAL_HOOK. If there any information about this update that you can share. Is there a new way to achieve the same result of using the REACT_DEVTOOLS_GLOBAL_HOOK but with a different method? What is the future of React without the REACT_DEVTOOLS_GLOBAL_HOOK?\n",
      "\n",
      "Reactime and React Inspector in the Chrome store use this hook\n",
      "\n",
      "### How often does this bug happen?\n",
      "\n",
      "Every time\n",
      "\n",
      "### DevTools package (automated)\n",
      "\n",
      "_No response_\n",
      "\n",
      "### DevTools version (automated)\n",
      "\n",
      "_No response_\n",
      "\n",
      "### Error message (automated)\n",
      "\n",
      "_No response_\n",
      "\n",
      "### Error call stack (automated)\n",
      "\n",
      "_No response_\n",
      "\n",
      "### Error component stack (automated)\n",
      "\n",
      "_No response_\n",
      "\n",
      "### GitHub query string (automated)\n",
      "\n",
      "_No response_\n",
      "\n",
      "Transformations:\n",
      "\n",
      "Shift: to_same\n",
      "Title: [DevTools Bug]: Inquiry on __REACT_DEVTOOLS_GLOBAL_HOOK__ deprecation and alternatives\n",
      "Body: ### Website or app\n",
      "\n",
      "https://github.com/open-source-labs/reactime/tree/master/src\n",
      "\n",
      "### Repro steps\n",
      "\n",
      "I've been informed that upcoming React iterations might deprecate `REACT_DEVTOOLS_GLOBAL_HOOK`. Could you provide insights on this impending change? Are there alternative patterns to achieve comparable functionality without the `REACT_DEVTOOLS_GLOBAL_HOOK`? What does the roadmap entail for React's extensibility in this regard?\n",
      "\n",
      "Reactime and React Inspector in the Chrome store use this hook\n",
      "\n",
      "### How often does this bug happen?\n",
      "\n",
      "Every time\n",
      "\n",
      "### DevTools package (automated)\n",
      "\n",
      "_No response_\n",
      "\n",
      "### DevTools version (automated)\n",
      "\n",
      "_No response_\n",
      "\n",
      "### Error message (automated)\n",
      "\n",
      "_No response_\n",
      "\n",
      "### Error call stack (automated)\n",
      "\n",
      "_No response_\n",
      "\n",
      "### Error component stack (automated)\n",
      "\n",
      "_No response_\n",
      "\n",
      "### GitHub query string (automated)\n",
      "\n",
      "_No response_\n",
      "\n",
      "Shift: to_easy\n",
      "Title: [DevTools Bug]: Application crashes with __REACT_DEVTOOLS_GLOBAL_HOOK__ in latest React\n",
      "Body: ### Website or app\n",
      "\n",
      "https://github.com/open-source-labs/reactime/tree/master/src\n",
      "\n",
      "### Repro steps\n",
      "\n",
      "The application crashes when using `REACT_DEVTOOLS_GLOBAL_HOOK` with the latest React versions. This behavior is unexpected and prevents debugging. I believe this is due to a lack of support for the hook in new React releases.\n",
      "\n",
      "Reactime and React Inspector in the Chrome store use this hook and are now failing.\n",
      "\n",
      "### How often does this bug happen?\n",
      "\n",
      "Every time\n",
      "\n",
      "### DevTools package (automated)\n",
      "\n",
      "_No response_\n",
      "\n",
      "### DevTools version (automated)\n",
      "\n",
      "_No response_\n",
      "\n",
      "### Error message (automated)\n",
      "\n",
      "_No response_\n",
      "\n",
      "### Error call stack (automated)\n",
      "\n",
      "_No response_\n",
      "\n",
      "### Error component stack (automated)\n",
      "\n",
      "_No response_\n",
      "\n",
      "### GitHub query string (automated)\n",
      "\n",
      "_No response_\n",
      "\n",
      "Shift: to_hard\n",
      "Title: [DevTools Bug]: Discussion on __REACT_DEVTOOLS_GLOBAL_HOOK__ deprecation and future alternatives\n",
      "Body: ### Website or app\n",
      "\n",
      "https://github.com/open-source-labs/reactime/tree/master/src\n",
      "\n",
      "### Repro steps\n",
      "\n",
      "I'm initiating a discussion regarding the potential deprecation of `REACT_DEVTOOLS_GLOBAL_HOOK` in future React versions. I'd appreciate any insights on the roadmap for alternative API designs. Perhaps a new feature could replace its functionality? What are the community's thoughts on evolving React's extensibility?\n",
      "\n",
      "Reactime and React Inspector in the Chrome store currently use this hook.\n",
      "\n",
      "### How often does this bug happen?\n",
      "\n",
      "Every time\n",
      "\n",
      "### DevTools package (automated)\n",
      "\n",
      "_No response_\n",
      "\n",
      "### DevTools version (automated)\n",
      "\n",
      "_No response_\n",
      "\n",
      "### Error message (automated)\n",
      "\n",
      "_No response_\n",
      "\n",
      "### Error call stack (automated)\n",
      "\n",
      "_No response_\n",
      "\n",
      "### Error component stack (automated)\n",
      "\n",
      "_No response_\n",
      "\n",
      "### GitHub query string (automated)\n",
      "\n",
      "_No response_\n"
     ]
    }
   ],
   "source": [
    "row = df.iloc[2]\n",
    "# print the original issue report + all its transformations with their difficulty levels and shifts\n",
    "print(\"Original Issue Report:\")\n",
    "print(row['issue'])\n",
    "print(\"\\nTransformations:\")\n",
    "transformations = json.loads(row['json_result'])\n",
    "for key, value in transformations['transformations'].items():\n",
    "    print(f\"\\nShift: {key}\")\n",
    "    if type(value) is dict:\n",
    "        print(f\"Title: {value['title']}\\nBody: {value['body']}\")\n",
    "    else:\n",
    "        print(f\"\\nResult:\\n{value}\")"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "syntetic-issue-report-data-generation",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.10.19"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}