Masonry component layout flicker/shift issue,where the columns momentarily transition into rows

Duplicates

[X] I have searched the existing issues

Latest version

[X] I have tested the latest version

Steps to reproduce 🕹
Link to live example:
Steps:
1.Create a simple Masonry component using Material UI with multiple items.
2.Observe the layout of the component as it loads/reload and adjusts to the screen size.
3.Notice that the columns momentarily transition into rows before returning to their normal state, causing a layout flicker or shift.
Current behavior 😯
The columns momentarily transition into rows before returning to their normal state, causing a layout flicker or shift.
Expected behavior 🤔
The Masonry component should maintain a consistent layout without any visual disruption or flickering.
Context 🔦
I have included the columns and spacing props in my implementation of the Masonry component,And also i have changed the defaultColumns and defaultHeight but no useful.
The issue occurs consistently across multiple browsers and devices.
I have not set any conflicting CSS styles that may be affecting the layout of the grid.
This issue is impacting the visual experience of my application and may affect user engagement and satisfaction.
below image is the simple code using masonry componet

Current output

The above image was captured within microseconds, so it is not visible when refreshing the page a single time. It requires a fast refresh of the page to become visible. Please note that this issue may not be immediately noticeable to users, but it still impacts the visual experience of the application
Expected output

Thank you for your attention to this issue. Please let me know if there is any additional information or steps I can provide to help identify and resolve the issue.
Your environment 🌎

npx @mui/envinfo
System:
OS: Windows 10 10.0.19044
CPU: (8) x64 Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz
Memory: 4.15 GB / 15.60 GB
Binaries:
Node: 16.15.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
npm: 7.24.2 - ~\ReactCode\node_modules.bin\npm.CMD
Managers:
Composer: 2.3.5 - C:\ProgramData\ComposerSetup\bin\composer.BAT
pip2: 19.2.3 - C:\Python27\Scripts\pip2.EXE
pip3: 22.3.1 - C:\Program Files\Python310\Scripts\pip3.EXE
Utilities:
Git: 2.40.0.
Virtualization:
Docker: 20.10.23 - C:\Program Files\Docker\Docker\resources\bin\docker.EXE
IDEs:
VSCode: 1.76.2 - C:\Users\pg\AppData\Local\Programs\Microsoft VS Code\Microsoft VS Code\bin\code.CMD
Languages:
Java: <IP_ADDRESS>
PHP: 7.4.29 - C:\xampp\php\php.EXE
Python: 3.10.10
Databases:
MySQL: undefined - C:\Program Files\MySQL\MySQL Server 8.0\bin\mysql.EXE
Browsers:
Edge: Spartan (44.19041.1266.0), Chromium (111.0.1661.54)

Hi @hbjORbj  any update regarding the above issue??

Hey @surendrdhoni, thanks for the report!
The Masonry elements height is not known beforehand, so they must be rendered to calculate their height and with that information properly place them in columns. That’s why the elements are initially rendered in one column. Currently there's no workaround that I can think of.
There are possible fixes to this, one could be to provide a way to inform of the elements height through the Masonry’s API, another would be to hide the first render to the user. These are just ideas and have to be explored deeper.
If you wish to dig into it and open a PR, that would be great!

Anyone figured out a workaround for this? I'm having the same issue and it, to me, makes the masonry component unusable. It just looks terrible when my app is constantly flickering with the scrollbar showing and then going away and seeing a faint whisper of that initial single column layout appear and then go away.
I tried following the idea @DiegoAndai gave above to hide the first render but I can't seem to make it work. I put the masonry component in box component with sx={{ height: 100, visibility: 'hidden', overflowY: 'scroll' }} so that on first render it renders hidden inside a box with height 100 and scrolls in there, so that the main windows doesn't scroll. If I then use Chrome "inspect" tools to uncheck the three styles we get a perfect rendering of the masonry layout with no flicker.
I figured I was set, I'd just simulate the "uncheck" of those styles programmatically and be done, but I can't seem to do it. My attempt was to set a "hasRenderedBefore" state variable and then in a useEffect, I set it to true and re-render the above styles with { height: 'unset', visibility: 'visible', overflowY: 'unset' } but it doesn't work. The styles get set but it still flickers. I'm guessing "unset" isn't the same as what the browser does to uncheck those values.
I'm new to react and not great at CSS but it does seem to render twice and change the styles but I still see the flicker. Any ideas on how to make this actually work? Perhaps in some way that it could be built into a styled masonry grid that could be re-used since I use the component many places in my app? Thanks for any thoughts!

This issue is now very noticeable since #37208, released in v5.13.6 to me.
I'm landing here with the same pain point, trying to use the component for https://mui.com/pricing/. What I'm looking for is a pure CSS implementation.

Thanks for the info @oliviertassinari - it is helpful. By "vertical based" layout I assume you mean items are rendered from top to bottom in the first column, then top to bottom in second column, and so on? This might be ok for some scenarios but I think for most people it needs to be true masonry style where items render in rows from left to right before going down to create new rows.
Is there any way to do something like I'm trying to do above but have one of the developers do it internally within the  component code rather than us all trying to hack something on after the fact? Like, maybe they can do an internal render on a hidden element that doesn't affect layout to get the heights they need and then, knowing those heights, re-render properly without the flicker? I've seen and used other masonry style components that didn't have this problem so it must be possible one way or another...

Also, like you said @oliviertassinari it seems like this may be due in part to some relatively recent change. In fact, I just noticed the problem in dev today. I checked my prod site which is probably running on an older MUI version (last published a few months ago I think) and it doesn't seem to have the issue... though I'm not sure if there might be some speed difference in how the code runs locally and perhaps an optimized prod build.

Ok, I have something that can be cleanly added to fix the flicker for now and removed later when hopefully this gets fixed properly from inside the component itself :)
import React, { ReactNode, useEffect } from "react";
import { Box } from "@mui/material";

// This component adds a delay, 1 millisecond by default, to the visibility of all child components.
//
// Motivation:
// The reason this control was created is to wrap a masonry component that initially renders all items vertically (causing a scrollbar), before rendering them in masonry "rows," causing unacceptable flicker.
// There is a commonly known problem of FOUC (flash of unstyled content) where you see an initial rendering of your content before your stylesheets are downloaded.
// There is a similar problem that can happen with Javascript where visible elements on the page are rendered in script and take a moment to fully render.
// This can result in a flicker, sometimes causing a scrollbar to appear and go away, which then causes the whole page's width to be reduced momentarily causing further re-layout activity.
// This DelayedChild componet offres a solution that is probably not ideal but can be useful in certain circumstances.
//
// Functionality:
// This component works by rendering its child components inside a box that is initially set to be invisible and to have a small fixed height and scrollbar
// so even if the content is "tall" it will just scroll inside this small heigh box and not cause the main browser window to need a scrollbar.
// We do this so that the fixed height box itself will be very unlikely to cause any flicker (e.g. if its content was so tall that it caused a vertical scrollbar be required).
// It is important that we make the child components "invisible" with visibility rather than display: none so that they actually render on the page, allowing the Javascript to do its rendering work.
// Once the delay has finished, and in theory all code in the child components is complete, we remove the fixed height and vertical overflow / scroll behavior and set the box to be visible again.
//
// Limitations:
// We don't know how long of a delay is required and in theory if we don't wait long enough for the script to complete its work, our approach won't work.
// However, we only set a 1 ms delay and have not had any issues.
//
// Future Development:
// Perhaps make the delay a property of the component that the parent can set.
function DelayedChild(props: { children: ReactNode }) {

    const delayTime: number = 1;
    const delay = (ms: number) => new Promise(res => setTimeout(res, ms));
    const [shouldRenderChild, setShouldRenderChild] = React.useState(false);

    useEffect(() => {
        delay(delayTime).then(() => {
            setShouldRenderChild(true);
        });
    });

    return (
        <>
            {(() => {
                if (!shouldRenderChild) {
                    return ( // Note: height 10 works but height 1 does not. Even 2 works but putting at 10 in case it might be some browser dependent thing where it says "well, this is too small we're not going to bother to try to render anything here."
                        <Box sx={{ visibility: 'hidden', height: 10, overflowY: 'scroll' }}>
                            {props.children}
                        </Box>
                    );
                } else {
                    return (
                        <Box sx={{ visibility: 'visible' }}>
                            {props.children}
                        </Box>
                    );
                }
            })()}
        </>
    );
}

export default DelayedChild;

You can then wrap the Masonry component like this:
<DelayedChild>
  <Masonry>
    ...your normal masonry stuff here...
  </Masonry>
</DelayedChild>

Obviously just adding a delay isn't ideal and I'm a bit nervous there may be some unintended consequences or other issues but, for me, that risk is worth it to get rid of the flicker for now.

Same thing here ! @hbjORbj Could you please have a look into this ? Thank you in advance.

Summary
The "flicker" issue existed before but is more noticeable after https://github.com/mui/material-ui/pull/37208, which goal was fixing a ResizeObserver loop limit exceeded Masonry error: https://github.com/mui/material-ui/issues/36909.
Possible render delay's with the ResizeObserver loop limit exceeded error solution were discussed: https://github.com/mui/material-ui/issues/36909#issuecomment-1541542110, i.e. using requestAnimationFrame is the cause for the flickering getting more noticeable.
It was also discussed that it seems to be safe to ignore the ResizeObserver loop limit exceeded  error: https://github.com/mui/material-ui/issues/36909#issuecomment-1541551496
Reverting https://github.com/mui/material-ui/pull/37208 would improve the flickering, but wouldn't get rid of it, and it would also bring back https://github.com/mui/material-ui/issues/36909.
Possible action paths
Regarding the ResizeObserver loop limit exceeded error:

Not reverting #37208 and sticking with that solution
Reverting #37208 and see if it's possible to catch the error and either ignore it or rethrow it as a warning

Regarding the flickering:
The issue is that initially, the height of the longest column of items is not known, so an initial render is needed to obtain this longest column height. This initial render is the perceived flicker.
We could implement one of the following on the Masonry:

Hide the content until the first layout is set (in practice this is when the Masonry longest column height is calculated)
Enable defaultHeight to use until the actual height is obtained. This will only work if the user knows or has a way to calculate the height beforehand.

My take:
My take would be going with option 2. regarding the ResizeObverser loop limit exceeded error, and with option 1. regarding the flickering.
I would like to hear your opinion, do these options make sense to you? Maybe there are other options I'm not seeing, would love to hear those as well!
After we settle on an action path I'll start working on it.

Experiencing the flickering issue when I am trying to work with a load more function.

My own masonry dose not have flickering issues, and it takes mui's implementation as a reference, but I use styled-component.
'use client'

import React, {
  startTransition,
  useEffect,
  useImperativeHandle,
  useMemo,
  useRef,
  useState
} from 'react'
import { flushSync } from 'react-dom'
import { useLayoutEffect } from '@radix-ui/react-use-layout-effect'
import styled, { css } from 'styled-components'

interface MasonryBaseProps {
  columns?: number | Breakpoint<number>
  spacing?: number | Breakpoint<number>
  defaultColumns?: number
  defaultHeight?: number
  defaultSpacing?: number
}

type MasonryInnerProps = MasonryBaseProps &
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  React.ComponentProps<'div'> & { as: any }
type MasonryRootType = ReturnType<typeof styled.div<MasonryBaseProps>>

export type Breakpoint<T> = {
  [key: number]: T
  default?: T
}

type MasonryRootState = {
  spacing: number
  columns: number
  height: number
  ssr: boolean
}

const LineBreaks = styled.span<{ $order: number }>`
  flex-basis: 100%;
  width: 0;
  margin: 0;
  padding: 0;
  order: ${props => props.$order || 'unset'};
`

const MasonryRoot = styled.div.attrs<{ $state: MasonryRootState }>(props => ({
  ...props,
  style: {
    '--masonry-height': props.$state.height ? ntp(props.$state.height) : 'auto',
    ...props.style
  }
}))<{ $state: MasonryRootState }>`
  display: flex;
  flex-flow: column wrap;
  align-content: flex-start;
  contain: strict;
  height: var(--masonry-height, 'auto');
  margin: ${({ $state }) => ntp(-$state.spacing / 2)};

  & > :not(template, ${LineBreaks}, [hidden]) {
    margin: ${({ $state }) => ntp($state.spacing / 2)};
    width: ${({ $state }) =>
      `calc(${(100 / $state.columns).toFixed(2)}% - ${ntp($state.spacing)})`};
  }

  ${({ $state }) =>
    $state.ssr &&
    new Array($state.columns).fill('').map(
      (_, idx) => css`
        &
          > :not(template, ${LineBreaks}, [hidden]):nth-of-type(
            ${$state.columns}n+${(idx + 1) % $state.columns}
          ) {
          order: ${idx + 1};
        }
      `
    )}
`

function ptn(val: string) {
  return Number(val.replace('px', ''))
}

function ntp(n = 0) {
  return `${n}px`
}

function resolveBreakpoint(value: number | Breakpoint<number>, def: number) {
  if (typeof value === 'number') {
    return value
  }
  const w = typeof window === 'undefined' ? Infinity : window.innerWidth
  const keys = Object.keys(value)
    .map(k => (k === 'default' ? Infinity : Number(k)))
    .sort((a, b) => a - b)

  const key = keys.find(k => k > w)
  return key ? (isFinite(key) ? value[key] : value['default'] || def) : def
}

const Masonry = React.forwardRef<HTMLElement, MasonryInnerProps>(
  (
    {
      children,
      className,
      as = 'div',
      columns = 4,
      spacing = 1,
      defaultColumns = typeof columns === 'number'
        ? columns
        : columns.default || 4,
      defaultSpacing = typeof spacing === 'number'
        ? spacing
        : spacing.default || 1,
      defaultHeight = 0,
      ...rest
    },
    ref
  ) => {
    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
    const masonryRef = useRef<HTMLElement>(null!)
    useImperativeHandle(ref, () => masonryRef.current)

    const [isSSR, setSSR] = useState(true)
    useEffect(() => startTransition(() => setSSR(false)), [])

    const [maxColumnHeight, setMaxColumnHeight] = useState(0)
    const [numberOfLineBreaks, setNumberOfLineBreaks] = useState(
      isSSR ? defaultColumns - 1 : 0
    )

    const breakpointSpacing = resolveBreakpoint(
      isSSR ? defaultSpacing : spacing,
      1
    )

    const breakpointColumns = resolveBreakpoint(
      isSSR ? defaultColumns : columns,
      4
    )

    const height = isSSR
      ? defaultHeight
      : Math.ceil(maxColumnHeight + breakpointSpacing / 2)

    const state = useMemo(
      () => ({
        spacing: breakpointSpacing,
        columns: breakpointColumns,
        height,
        ssr: isSSR
      }),
      [breakpointSpacing, breakpointColumns, height, isSSR]
    )

    useLayoutEffect(() => {
      if (typeof ResizeObserver === 'undefined') {
        return
      }

      if (typeof MutationObserver === 'undefined') {
        return
      }

      /**
       * FIXME safari will trigger `ResizeObserver loop completed
       * with undelivered notifications` error in console
       **/
      const resizeObserver = new ResizeObserver(() => {
        const result = handleResize(masonryRef.current, true)
        if (result) {
          flushSync(() => {
            setMaxColumnHeight(result.height)
            setNumberOfLineBreaks(result.numOfLineBreaks)
          })
        }
      })

      if (masonryRef.current) {
        masonryRef.current.childNodes.forEach(child => {
          if (child instanceof Element) {
            resizeObserver.observe(child as Element)
          }
        })
      }

      const mutationObserver = new MutationObserver(mutations => {
        mutations.forEach(mutation => {
          if (mutation.type !== 'childList') {
            return
          }
          mutation.addedNodes.forEach(node => {
            if (node instanceof Element) {
              resizeObserver.observe(node)
            }
          })
          mutation.removedNodes.forEach(node => {
            if (node instanceof Element) {
              resizeObserver.unobserve(node)
            }
          })
        })
      })

      mutationObserver.observe(masonryRef.current, {
        childList: true,
        subtree: false,
        attributes: false,
        characterData: false
      })

      return () => {
        resizeObserver.disconnect()
        mutationObserver.disconnect()
      }
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])

    return (
      <MasonryRoot
        {...rest}
        as={as}
        ref={masonryRef as React.Ref<HTMLDivElement>}
        className={className}
        $state={state}
      >
        {children}
        {new Array(numberOfLineBreaks).fill('').map((_, index) => (
          <LineBreaks key={index} data-class="line-break" $order={index + 1} />
        ))}
      </MasonryRoot>
    )
  }
) as MasonryRootType

Masonry.displayName = 'Masonry'

function handleResize(masonry: HTMLElement | undefined, isResize = false) {
  if (!masonry || masonry.childElementCount === 0) {
    return
  }

  const masonryFirstChild = masonry.firstElementChild
  const parentWidth = masonry.clientWidth
  const firstChildWidth = masonryFirstChild?.clientWidth || 0

  if (parentWidth === 0 || firstChildWidth === 0 || !masonryFirstChild) {
    return
  }

  const firstChildComputedStyle = getComputedStyle(masonryFirstChild)
  const firstChildMarginLeft = ptn(firstChildComputedStyle.marginLeft)
  const firstChildMarginRight = ptn(firstChildComputedStyle.marginRight)

  const currentNumberOfColumns = Math.round(
    parentWidth /
      (firstChildWidth + firstChildMarginLeft + firstChildMarginRight)
  )

  const columnHeights = new Array(currentNumberOfColumns).fill(0) as number[]
  let skip = false

  masonry.childNodes.forEach(child => {
    if (
      !(child instanceof HTMLElement) ||
      child.dataset.class === 'line-break' ||
      skip
    ) {
      return
    }

    const childComputedStyle = getComputedStyle(child)
    const childMarginTop = ptn(childComputedStyle.marginTop)
    const childMarginBottom = ptn(childComputedStyle.marginBottom)
    const parsedChildHeight = ptn(childComputedStyle.height)
    const childHeight = parsedChildHeight
      ? Math.ceil(parsedChildHeight) + childMarginTop + childMarginBottom
      : 0

    if (childHeight === 0) {
      // if any one of children isn't rendered yet, masonry's height shouldn't be computed yet
      skip = true
      return
    }

    // if there is a nested image that isn't rendered yet, masonry's height shouldn't be computed yet
    for (let i = 0; i < child.childNodes.length; i += 1) {
      const nestedChild = child.childNodes[i] as Element
      if (nestedChild.tagName === 'IMG' && nestedChild.clientHeight === 0) {
        skip = true
        break
      }
    }

    if (!skip) {
      // find the current shortest column (where the current item will be placed)
      const currentMinColumnIndex = columnHeights.indexOf(
        Math.min(...columnHeights)
      )

      if (isResize) {
        const oldOrder = Number(child.style.order)
        const newOrder = currentMinColumnIndex + 1
        if (isFinite(oldOrder) && oldOrder !== newOrder) {
          /** debounce order change for 5px difference */
          if (
            Math.abs(
              columnHeights[oldOrder - 1] - columnHeights[newOrder - 1]
            ) < 5
          ) {
            columnHeights[oldOrder - 1] += childHeight
            return
          }
        }
      }

      columnHeights[currentMinColumnIndex] += childHeight
      const order = currentMinColumnIndex + 1
      child.style.order = String(order)
    }
  })

  if (!skip) {
    const numOfLineBreaks =
      currentNumberOfColumns > 0 ? currentNumberOfColumns - 1 : 0
    return {
      height: Math.max(...columnHeights),
      numOfLineBreaks
    }
  }
}

export { Masonry }

This implementation's core difference from mui masonry is:

ignore the warnings from ResizeObserver's callback function
use MutationObserver in order to register ResizeObserver. It will be more efficient when changes happened for children.
Skip the order variation if the height change is almost the same, in order to avoid flickering.

I'm seeing this issue as well when I upgraded to alpha.137 from alpha.131. I'm going to revert that upgrade and go back to the ResizeObserver loop errors since those can be ignored and won't be perceived by users unlike the flickering.
That said, the ResizeObserver errors are quite annoying if they can be safely ignored maybe the component should catch those instead of showing errors on the dev console.

The Masonry elements height is not known beforehand, so they must be rendered to calculate their height and with that information properly place them in columns. That’s why the elements are initially rendered in one column.

@DiegoAndai We could render, measure, repositioning, all before any frame

Thanks everyone for the feedback, I'll start working on a PR

Hey everyone! I've opened https://github.com/mui/material-ui/pull/38427, aiming to solve this pain point without regressing https://github.com/mui/material-ui/issues/36909. An explanation of the fixes is provided in the PR's description.
If anyone has time to test it out, you can do so by linking to the CI build in your package.json:
"@mui/lab": "https://pkg.csb.dev/mui/material-ui/commit/d0a33227/@mui/lab",
"@mui/material": "https://pkg.csb.dev/mui/material-ui/commit/d0a33227/@mui/material",

I would appreciate it 😊

@DiegoAndai I tested this and the flickering no longer appears. thank you
Current:
"react": "^17.0.2",
"react-dom": "^17.0.2",

I provide another implementations as below:
https://stackblitz.com/edit/stackblitz-starters-ktbdbe?file=components%2Fmasonry.tsx
This is used in styled-components.

no flicker issues with good performance
reduced state in masonry, so the virtual dom variation is reduced too.
Instead of react useState I use css variable
columns and spacing responsiveness is purely static css-in-js, not recaculated every time resize happened.
support ssr / non-ssr
no limit to children component
children component supports server streaming
good infinite loaer support

Hey everyone! The solution on PR https://github.com/mui/material-ui/pull/38427 is not enough to solve this issue. It solves most of the flickering except on the initial render, which is the most important one.
Removing requestAnimationFrame (which causes the initial flicker) is not an option because that would bring back the ResizeObserver loop error. I also couldn't find a way to catch the ResizeObserver loop error on Material UI's side. Finally, using useLayoutEffect does not give the expected results to achieve setting the layout before the initial paint.
I cannot allocate more time to keep working on this right now. I'll add the ready to take label in case anyone from the community wants to continue this work, either by taking over my PR or proposing a new one. Hopefully, we will find a solution that is right soon.

Is anyone able to work on this quickly? If so I am happy to pay them...
Im having this issue also and desperately need a solution.
Ive spent a lot of time implementing masonry only to find the items all stack up on the left in one column as outlined here, before the masonry grid "kicks in". On slow connections this looks very glitchy. In user testing it was the first thing people pointed out calling my product "broken.
If theres anyone willing to work on this quickly I would be happy to pay for it if its fast as I see this first was raised in April so cant wait another 7 months!
Ahead, @DiegoAndai do you happen to know (or perhaps a faster fix) is there is any way to be able to hook into some kind of "hasFullyLoaded" boolean? If so I'm confident i can find the issue on my side then displaying a loading spinner until the grid has been fully loaded, but without knowing this its hard and hacky to do (eg time delays etc).

@jasondainter I ended up here today as well, after several frustrating hours trying to get a satisfactory masonry solution working. I've finally got something I'm happy with, based on @tangye1234's implementation above, with some adjustments for my use case.
The example uses styled components and Tanstack Query in a Next.js app, which luckily aligns well with my project.
Instead of useInfiniteQuery it has a self-referencing/recursive component containing a useQuery hook that fetches a single page of results, triggered by an intersection observer as you scroll to the end of the page. It's a clever, tidy solution imho, using recursion. Perhaps this is a common pattern for infinite scroll? I've never seen it before.
So far it seems to be working as advertised: performant, with fewer renders, and no flicker as new items are added. 👍

Thanks for this @drichar.
I had a previous version of my masonry grid using an intersection observer to create an infinity scroll so i will play a bit with that and see if I have any luck (I turned it off due to some other issues that was causing).
With your solution, are you sure its removed the "1 column" stack issue or could it be its happening so fast you cant see in?
In google chrome, if you inspect element, click the toggle device toolbar then in the top throttle the page down to a low-end mobile this is a good way to replicate and see the problem in slow motion.
I would think if you are using an intersection observer to load a page, it may simple show that 1 column glitch "faster" (eg only 1 page to load) but still actually go through that cycle of stacking up a column and then showing the grid after.
Curious to hear if that is the case?
Its not an issue on fast browsers but as soon as a user gets a slow connection, eg on a mobile device, it becomes a real issue.

The child nodes are arranged in columns inside a useLayoutEffect, so it happens synchronously before the first browser paint. Even when throttled, you get columns in the first render.

Thanks. The issue for me with above is I dont really want to use Tanstack Query, nor styled components. If I understood this solution is a total rebuild not actually using MUI Masonry (please correct me if I misunderstood that).
Have sunk quite a bit of development time into using MUI's masonry grid already and it all works except for this one issue.
@DiegoAndai is there no further plans to revisit this and to get it working?

Hey @jasondainter, thanks for the interest. Sadly, there's no plan to revisit it in the short term.
If anyone wants to work on this, I'll gladly help guide that effort.

OK thanks for the update. I ditched this in the end and built a custom solution that is working well for me in react using a flex container set to columns and some javascript to figure out the colums. Every library I tried came with so many complications that it made sense in the end to go that route. Masonry grids are the most trivial looking things that are apparently the least trivial to pull off!

@DiegoAndai @tangye1234 @jasondainter flickering issue in mui's masonry while load more data. Is there any new solutions released for the same?
can anyone give solutions...

OK thanks for the update. I ditched this in the end and built a custom solution that is working well for me in react using a flex container set to columns and some javascript to figure out the colums. Every library I tried came with so many complications that it made sense in the end to go that route. Masonry grids are the most trivial looking things that are apparently the least trivial to pull off!

hi @jasondainter could you please provide the custom implementation for avoid flickering of mui component when load more..
?

Hey @nikhilrp18, sadly, there's no solution yet. The issue is ready for anyone who wants to work on it. The solution is complicated and might need a rewrite of some mechanics of the component.

@nikhilrp18 I was able to get rid of the flickering in my instance by patching in the changes in https://github.com/mui/material-ui/pull/38427. I know it says that there's still issues in that PR, but in our use case, those issues aren't present, possibly the same in yours?

This might be useful for anyone following this issue: https://github.com/w3c/csswg-drafts/issues/10233 as well as this blog post: https://www.webkit.org/blog/15269/help-us-invent-masonry-layouts-for-css-grid-level-3/.

@Rishi556 looks very promising. Unfortunately it's going to take a LOT of time before it's well-supported by at least a couple of latest versions of every other popular browsers
https://caniuse.com/?search=grid-template-rows%3Amasonry

https://www.npmjs.com/package/react-responsive-masonry
I switched to this project for now, as it has 0 issues.
I recommending leveraging / borrowing from this code.
Pure CSS > JS, where possible

I have instances where the masonry grid gives up and displays in a single column:

And where masonry grid flickers (warning: flashing lights):
https://github.com/user-attachments/assets/fe174a90-e8d7-434f-957d-c9fbc5d984ce

The code provided by tangye1234 at https://github.com/mui/material-ui/issues/36673#issuecomment-1692785487 has made my site's Masonry layout work smoothly.
https://erisasaki.net/
It's functioning well with the latest Next.js 14, and there are no issues even when nesting SSG content or server components.
Thank you very much!
For my use, I rewrote the code to use @emotion/styled.
While it's not directly related to MUI, I'm sharing the modified code in case it might be helpful to someone else.
/** @jsxImportSource @emotion/react */
'use client';
import { useEffect, useImperativeHandle, useMemo, useRef, useState, forwardRef, useLayoutEffect } from 'react';
import { css } from '@emotion/react';
import styled from '@emotion/styled';

/**
 * This code is based on the implementation by tangye1234 shared in the MUI GitHub Issues:
 * https://github.com/mui/material-ui/issues/36673#issuecomment-1692785487
 *
 * Original implementation used styled-components.
 * Adapted to use Emotion by Jun Murakami.
 */

export type Breakpoint<T> = {
  [key: number]: T;
  default?: T;
};

interface MasonryBaseProps {
  columns?: number | Breakpoint<number>;
  spacing?: number | Breakpoint<number>;
  defaultHeight?: number;
  disableSSR?: boolean;
}

type MasonryInnerProps = MasonryBaseProps & React.ComponentProps<'div'> & { as: any };
type MasonryRootType = ReturnType<typeof styled.div<MasonryBaseProps>>;

type MasonryRootState = {
  spacing: (readonly [number, number])[];
  columns: (readonly [number, number])[];
  ssr: boolean;
};

const LineBreaks = styled.span<{ $order: number }>`
  flex-basis: 100%;
  width: 0;
  margin: 0;
  padding: 0;
  order: ${(props) => props.$order || 'unset'};
`;

const masonryRootStyles = (state: MasonryRootState) => css`
  display: flex;
  flex-flow: column wrap;
  align-content: flex-start;
  contain: ${state.ssr ? 'none' : 'strict'};
  height: var(--masonry-height, 'auto');

  ${state.spacing.map(([breakpoint, spacing]) =>
    breakpoint === -1
      ? css`
          --masonry-spacing: ${spacing}px;
        `
      : css`
          @media screen and (max-width: ${breakpoint}px) {
            --masonry-spacing: ${spacing}px;
          }
        `
  )}

  ${state.columns.map(([breakpoint, column]) =>
    breakpoint === -1
      ? css`
          --masonry-column: ${column};
        `
      : css`
          @media screen and (max-width: ${breakpoint}px) {
            --masonry-column: ${column};
          }
        `
  )}

  margin: calc(var(--masonry-spacing, 0px) / -2);

  & > :not(template, ${LineBreaks}, [hidden]) {
    margin: calc(var(--masonry-spacing, 0px) / 2);
    width: calc((1 / var(--masonry-column, 1)) * 100% - var(--masonry-spacing, 0px));
    order: calc(1 + var(--masonry-column, 1));
    contain: layout style paint;
  }

  ${state.ssr &&
  css`
    & > :not(template, ${LineBreaks}, [hidden]) {
      display: none;
    }
  `}
`;

function ptn(val: string) {
  return Number(val.replace('px', ''));
}

export const Masonry = forwardRef<HTMLElement, MasonryInnerProps>(function Masonry(
  { children, className, as = 'div', columns = 1, spacing = 0, defaultHeight = 0, disableSSR = false, ...rest },
  ref
) {
  const masonryRef = useRef<HTMLElement>(null!);
  useImperativeHandle(ref, () => masonryRef.current);

  const [isSSR, setSSR] = useState(!disableSSR);
  useEffect(() => () => setSSR(false), []);

  const maxColumnHeightRef = useRef(defaultHeight);
  const maxColumnHeight = maxColumnHeightRef.current;

  const maxColumnCount = typeof columns === 'number' ? columns : Math.max(...Object.values(columns));

  const state = useMemo<MasonryRootState>(
    () => ({
      ssr: isSSR,
      columns: _entries(columns),
      spacing: _entries(spacing),
    }),
    [isSSR, columns, spacing]
  );

  useLayoutEffect(() => {
    if (typeof ResizeObserver === 'undefined') {
      return;
    }

    if (typeof MutationObserver === 'undefined') {
      return;
    }

    /**
     * FIXME safari will trigger `ResizeObserver loop completed
     * with undelivered notifications` error in console
     **/
    const resizeObserver = new ResizeObserver(() => {
      resizeObserver.unobserve(masonryRef.current);
      const result = handleResize(masonryRef.current, true);
      const { height = 0 } = result || {};
      maxColumnHeightRef.current = height;
      masonryRef.current.style.setProperty('--masonry-height', height ? `${height}px` : 'auto');
    });

    if (masonryRef.current) {
      masonryRef.current.childNodes.forEach((child) => {
        if (child instanceof HTMLElement && child.dataset.class !== 'line-break') {
          resizeObserver.observe(child);
        }
      });
    }

    const mutationObserver = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        if (mutation.type !== 'childList') {
          return;
        }
        mutation.addedNodes.forEach((node) => {
          if (node instanceof HTMLElement && node.dataset.class !== 'line-break') {
            resizeObserver.observe(node);
          }
        });
        mutation.removedNodes.forEach((node) => {
          if (node instanceof HTMLElement && node.dataset.class !== 'line-break') {
            resizeObserver.unobserve(node);
          }
        });
        if (mutation.addedNodes.length === 0 && mutation.removedNodes.length > 0) {
          // this situation won't trigger resizeObserver callback, so
          // manually trigger it here
          resizeObserver.observe(masonryRef.current);
        }
      });
    });

    mutationObserver.observe(masonryRef.current, {
      childList: true,
      subtree: false,
      attributes: false,
      characterData: false,
    });

    return () => {
      resizeObserver.disconnect();
      mutationObserver.disconnect();
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <div
      {...rest}
      ref={masonryRef as React.Ref<HTMLDivElement>}
      className={className}
      css={masonryRootStyles(state)}
      style={
        {
          ...rest.style,
          '--masonry-height': maxColumnHeight ? `${maxColumnHeight}px` : 'auto',
        } as React.CSSProperties
      }
    >
      {children}
      {new Array(maxColumnCount - 1).fill('').map((_, index) => (
        <LineBreaks key={index} data-class='line-break' $order={index + 1} />
      ))}
    </div>
  );
}) as unknown as MasonryRootType;

function handleResize(masonry: HTMLElement | undefined, isResize = false) {
  if (!masonry || masonry.childElementCount === 0) {
    return;
  }

  const masonryFirstChild = masonry.firstElementChild;
  const parentWidth = masonry.clientWidth;
  const firstChildWidth = masonryFirstChild?.clientWidth || 0;

  if (parentWidth === 0 || firstChildWidth === 0 || !masonryFirstChild) {
    return;
  }

  const firstChildComputedStyle = getComputedStyle(masonryFirstChild);
  const firstChildMarginLeft = ptn(firstChildComputedStyle.marginLeft);
  const firstChildMarginRight = ptn(firstChildComputedStyle.marginRight);

  const currentNumberOfColumns = Math.round(parentWidth / (firstChildWidth + firstChildMarginLeft + firstChildMarginRight));

  const columnHeights = new Array(currentNumberOfColumns).fill(0) as number[];
  let skip = false;

  masonry.childNodes;

  masonry.childNodes.forEach((child) => {
    if (!(child instanceof HTMLElement) || child.dataset.class === 'line-break' || skip) {
      return;
    }

    const childComputedStyle = getComputedStyle(child);
    if (childComputedStyle.display === 'none') {
      return; // display: noneのアイテムをスキップ
    }

    const childMarginTop = ptn(childComputedStyle.marginTop);
    const childMarginBottom = ptn(childComputedStyle.marginBottom);
    const parsedChildHeight = ptn(childComputedStyle.height);
    const childHeight = parsedChildHeight ? Math.ceil(parsedChildHeight) + childMarginTop + childMarginBottom : 0;

    if (childHeight === 0) {
      // if any one of children isn't rendered yet, masonry's height shouldn't be computed yet
      skip = true;
      return;
    }

    // if there is a nested image that isn't rendered yet, masonry's height shouldn't be computed yet
    for (let i = 0; i < child.childNodes.length; i += 1) {
      const nestedChild = child.childNodes[i] as Element;
      if (nestedChild.tagName === 'IMG' && nestedChild.clientHeight === 0) {
        skip = true;
        break;
      }
    }

    if (!skip) {
      // find the current shortest column (where the current item will be placed)
      const currentMinColumnIndex = columnHeights.indexOf(Math.min(...columnHeights));

      if (isResize) {
        const oldOrder = Number(child.style.order);
        const newOrder = currentMinColumnIndex + 1;
        if (isFinite(oldOrder) && oldOrder !== newOrder) {
          /** debounce order change for 5px difference */
          if (Math.abs(columnHeights[oldOrder - 1] - columnHeights[newOrder - 1]) < 5) {
            columnHeights[oldOrder - 1] += childHeight;
            return;
          }
        }
      }

      columnHeights[currentMinColumnIndex] += childHeight;
      const order = currentMinColumnIndex + 1;
      child.style.order = String(order);
    }
  });

  if (!skip) {
    const numOfLineBreaks = currentNumberOfColumns > 0 ? currentNumberOfColumns - 1 : 0;
    return {
      height: Math.max(...columnHeights),
      numOfLineBreaks,
    };
  }
}

export default Masonry;

function _entries(values: Breakpoint<number> | number) {
  return Object.entries(typeof values === 'number' ? { default: values } : values)
    .reverse()
    .map(([breakpoint, column]) => [breakpoint === 'default' ? -1 : parseInt(breakpoint) - 1, column] as const);
}

What has personally worked for me, was to wrap my child components within the Masonry with a div with flexShrink 0.
Resize Observer loop limit no longer being hit, and the components are not stuck in a row. They overflow into columns as expected.


What is the content query of CDN queries?

Hi, I'm confused about what the content query of CDN queries is. Is it the same as the normal learnable content queries?
Looking forward to your reply. Thanks in advance!

The content parts of CDN queries are taken as ground-truth label embeddings with noises same as in DN-DETR.

Thanks for you reply.

Hi following up on this question,
I see that an indicator was used in DN-DETR but dropped in DINO-DETR. I quoted below the description of the indicator from the DN-DETR.

We also append an indicator to label embedding. The indicator is 1 if a query belongs to the denoising part and 0 otherwise.

Can you comment why you dropped the indicator? I couldn't find anywhere in the paper mentioning this.
Also very nice work!


Add 'Offers' Section to Navigation Bar, To increase the User Engagement.

Title: Add 'Offers' Section to Navigation Bar
Description:
We need to add an ' Offers' section to the navigation bar of the movie booking ticket website to highlight current promotions and discounts for users.
Why is this important?

This section will attract users to take advantage of ongoing offers, increasing engagement and ticket sales.
It will provide a dedicated space for users to easily find promotions and special deals.

Comment:

The 'Offers' section should be clearly visible in the navigation bar.
It should link to a dedicated page listing all current offers, including terms and conditions.
Ensure the design is consistent with the existing navigation style and easy to access.

Example:

@SCR01 any update? Reply me ASAP

@maniyaom yeah i will do it before 6am.


New Memory Region Collides with Error Codes, Worsens Decompilation

In a 32-bit address space I added a region of memory at 0xFFFFFE00 - 0xFFFFFFFF. This region is for onchip registers.
Unfortunately this has the unintended affect of worsening the decompilation. For a function that compares against -2, the decompilation is now showing:
        if (piVar6 != (int *)&DAT_fffffffe) {                return piVar6;            }
When it should be:
    if (piVar6 != -2) {             return piVar6;         }
Any advice on how to fix this? Basically I don't want immediates to replaced with data references. At least from the memory region located at the end of the address space.

Your piVar6 variable probably shouldn't be a pointer type.  If you change it to an int, does that clean things up?


Bug: "Invariant Violation: Sprite texture needs to be typeof Texture"

Current Behavior
Creating a texture and passing it to a sprite as a prop:
import { Sprite } from '@pixi/react';
import * as PIXI from 'pixi.js';

const texture = PIXI.Texture.fromBuffer(...);

function Component() {
  return <Sprite texture={texture} />;
}

Results in this error:
Uncaught Invariant Violation: Sprite texture needs to be typeof `Texture`
  at invariant (webpack-internal:///./node_modules/@pixi/react/dist/index.es-dev.js:149:15)
  at getTextureFromProps (webpack-internal:///./node_modules/@pixi/react/dist/index.es-dev.js:389:5)
  at Sprite (webpack-internal:///./node_modules/@pixi/react/dist/index.es-dev.js:605:69)
  at createElement (webpack-internal:///./node_modules/@pixi/react/dist/index.es-dev.js:827:16)
  at completeWork (webpack-internal:///./node_modules/@pixi/react/dist/index.es-dev.js:15130:29)
  at completeUnitOfWork (webpack-internal:///./node_modules/@pixi/react/dist/index.es-dev.js:20253:17)
  at performUnitOfWork (webpack-internal:///./node_modules/@pixi/react/dist/index.es-dev.js:20228:6)
  at workLoopSync (webpack-internal:///./node_modules/@pixi/react/dist/index.es-dev.js:20126:6)
  at renderRootSync (webpack-internal:///./node_modules/@pixi/react/dist/index.es-dev.js:20094:8)
  at recoverFromConcurrentError (webpack-internal:///./node_modules/@pixi/react/dist/index.es-dev.js:19476:21)

For some reason, @pixi/react and pixi.js don't share the same instance of Texture, causing this instanceof check to fail:
https://github.com/pixijs/pixi-react/blob/ab3a672af3f589b4e2cdb24024e534b8145d7942/packages/react/src/utils/props.js#L83
Expected Behavior
The instanceof check should not fail.
Steps to Reproduce
I made a small repo to allow you to easily reproduce the error: https://github.com/lukehorvat/pixi-react-texture-bug
Environment

@pixi/react version: 7.1.0
pixi.js version: 7.2.4
React version: 18.2.13
ReactDOM version: 18.2.6
Browser & Version: Chrome 114
OS & Version: OS X 11.7.8

Possible Solution
No response
Additional Information
No response

I've seen this happen when using webpack. What happens is that the bundler is double-importing both the cjs and module versions of PixiJS when you import pixi.js instead of using the individual modules. You can change this behavior in the config, but it gets complicated. See this issue for further info: https://github.com/pixijs/pixijs/issues/8467

Thanks for sharing @lunarraid.
I actually faced the exact same problem with three.js recently too and decided to solve it by updating my tsconfig in favor of ESM. I can't be bothered with any CJS workaround solutions, so I guess I will do the same for pixi.js.
I'll close this issue then since yours covers it. Cheers.

I am running to the same issue, am using vite and i do not need to set the module to 'esnext'. because it is simply there, and i am getting the same error

Same here.


Iss 271 anita y

closes #271
Changing .env to point to the aball location (this should be temporary while we get the other site working)
Adds changes to code and to unit tests to keep them running.

merging per comments and discussion with @jkoren


Added a link to Custobar Luigi slides to Who uses Luigi list

Description
A link to a talk about using Luigi for ETL flow and another company to Who Uses Luigi? list
Motivation and Context
More visible Luigi users and more information is good for the ecosystem

[Current coverage][cc-pull] is 76.09%

Merging [#1711][cc-pull] into [master][cc-base-branch] will decrease coverage by 2.70%

@@             master      #1711   diff @@
==========================================
  Files            94         94
  Lines         10300      10300
  Methods           0          0
  Messages          0          0
  Branches          0          0
==========================================
- Hits           8117       7838   -279
- Misses         2183       2462   +279
  Partials          0          0

Powered by Codecov. Last updated by [690d136...e2840ce][cc-compare]
[cc-base-branch]: https://codecov.io/gh/spotify/luigi/branch/master?src=pr
[cc-compare]: https://codecov.io/gh/spotify/luigi/compare/690d136e3a898426e20c2108fc86ce500d3b99d4...e2840ce30fa6a555267ea6e3d47c9a213696fdb1
[cc-pull]: https://codecov.io/gh/spotify/luigi/pull/1711?src=pr

:+1 Nice and clear presentation slides!


Updated UI and fixed some bugs.

Description
Updated UI and fixed some bugs.
Please provide a meaningful description of what this change will do, or is for. Bonus points for including links to
related issues, other PRs, or technical references.
Note that by not including a description, you are asking reviewers to do extra work to understand the context of this
change, which may lead to your PR taking much longer to review, or result in it not being reviewed at all.
Type of Change

[x] Bug Fix
[x] New Feature
[ ] Breaking Change
[ ] Refactor
[ ] Documentation
[ ] Other (please describe)

Checklist

[ ] I have read the contributing guidelines
[ ] Existing issues have been referenced (where applicable)
[ ] I have verified this change is not present in other open pull requests
[ ] Functionality is documented
[ ] All code style checks pass
[ ] New code contribution is covered by automated tests
[ ] All new and existing tests pass

Codecov Report
All modified and coverable lines are covered by tests :white_check_mark:

Comparison is base (2de7610) 14.95% compared to head (6e544ec) 14.95%.

:exclamation: Your organization needs to install the Codecov GitHub app to enable full functionality.
Additional details and impacted files
@@           Coverage Diff           @@
##             main     #471   +/-   ##
=======================================
  Coverage   14.95%   14.95%
=======================================
  Files          49       49
  Lines        2735     2735
=======================================
  Hits          409      409
  Misses       2299     2299
  Partials       27       27

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.


Stop data races when testing functionality

Within path operations, the Filesystem is slower than the rust code, as such sometimes the file system has not registered a new file before testing to see if it exists

This is likely due to parallel test running. One option we have is to create a seperate tmp directory for each test, or ensure that test threads are always 1


TypeError when application run from /Applications

On copying the application to the /Applications folder and attempting to run it, the following error appears. The application runs fine when it's opened from the Downloads folder.
TypeError: Path must be a string. Received undefined
    at assertPath (path.js:7:11)
    at basename (path.js:1357:5)
    at Command.parse (/Applications/SRA-DeDupe.app/Contents/Resources/app.asar/node_modules/commander/index.js:446:30)
    at Object.<anonymous> (/Applications/SRA-DeDupe.app/Contents/Resources/app.asar/app.js:31:3)
    at Module._compile (module.js:556:32)
    at Object.Module._extensions..js (module.js:565:10)
    at Module.load (module.js:473:32)
    at tryModuleLoad (module.js:432:12)
    at Function.Module._load (module.js:424:3)
    at Object.<anonymous> (/Applications/SRA-DeDupe.app/Contents/Resources/electron.asar/browser/init.js:171:8)```

It looks like this is actually related to opening it for a second time - even opening the .app from ~/Downloads for a second time seems not to work properly.

@forsakendaemon - Could I grab a bit more info about what you are deploying this on so I can investigate?
Platform, release etc.

Sure! It's the most recent dist version (I downloaded it this morning), being run on Mac OS X 10.12.6 on a 2.9GHz i5 MacBook Pro (Retina, 13", Early 2015) with 16GB of RAM.
The last step, where you download the files, seems to include the duplicates as well, so I'm thinking that something is very wrong. Do you want me to open a new issue for that?
I'm moving over to the website, but my internet connection is pretty choppy so it's not allowing me to upload as yet, so I can't confirm that that gives a smaller download file.

@forsakendaemon To be honest I usually do all my dev work on a Linux box so the chances are very high the problem is with me compiling it for a platform I have little knowledge of.
I'll see if I can grab a mac from someone and investigate. In the meantime are you seeing any log output in the console if you run it from there that I could look into?

What's the command that you would use to run from the console on a Linux box?

Okay, if I run SRA-DeDupe.app/Contents/MacOS/SRA-Dedupe without any args, I get the same error. As soon as I add something after that (even --help or a nonexistent filename) it starts up normally. I'll run it (with output.xml as the argument, which does not exist) and let you know whether that makes any difference to the output.

Interesting. No idea why its doing that. I'll have to grab a mac and investigate.


Is there a way to use fast generation with boosts ?

Hello every one,
I tried this code and it's working fine, but it's not using boosts (even if I still have boosts on my bing image creator account).
So the generation is very slow and exceed the 5 minutes timeout. I extented the timeout to 10 minutes and it seems to work better, maybe that whould be unlucky if it does take more than 10 minutes.
But that would be nice is there is a way to use boosts.
I didn't find how to modify the request to specify I want to use boosts, and I don't understand also why it's not using boosts with the current request.
Does anyone has an idea about it ?

Hi !!
Finally I found out how to do :
just remove &rt=3 in the url, and the boosts will be used.


Module not found: Error: Default condition should be last one

📚 What are you trying to do?
import { PhCircle,PhTextAa,PhEyeSlash } from "@phosphor-icons/vue";
this line makes me below error. Does not understand what is issue. I have other appas well and all working fine.
Module not found: Error: Default condition should be last one
ERROR in ./src/Student/components/CustomElements/PIcons.vue?vue&type=script&setup=true&lang=js (./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/Student/components/CustomElements/PIcons.vue?vue&type=script&setup=true&lang=js) 3:0-2137
Module not found: Error: Default condition should be last one
 @ ./src/Student/components/CustomElements/PIcons.vue?vue&type=script&setup=true&lang=js 1:0-221 1:0-221 1:222-432 1:222-432
 @ ./src/Student/components/CustomElements/PIcons.vue 2:0-68 3:0-63 3:0-63 6:49-55
 @ ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/Student/StudentData.vue?vue&type=script&setup=true&lang=js 8:0-60 106:14-20
 @ ./src/Student/StudentData.vue?vue&type=script&setup=true&lang=js 1:0-214 1:0-214 1:215-418 1:215-418
 @ ./src/Student/StudentData.vue 2:0-73 3:0-68 3:0-68 6:49-55
 @ ./src/router/routes.js 265:15-51
 @ ./src/main.js 12:0-40 113:8-14

🔍 What have you tried?
Tryed reeinstall phosphor with npm , other versions start again and so on. I came from vue 2 to vue 3 and this problem comes.
ℹ Additional context
No response

I have the same issue

This issue can fix like this:
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
-     "default": "./dist/index.mjs",
      "import": "./dist/index.mjs",
+     "default": "./dist/index.mjs"
    },
    "./compact": {
      "types": "./dist/index.d.ts",
-     "default": "./dist/index.compact.mjs",
      "import": "./dist/index.compact.mjs",
+     "default": "./dist/index.compact.mjs"
    }
  },

Thanks for solving this, I was not aware that order matters here. Will create a release ASAP.


Arabic sms looks fuzzy

whenever I send an SMS in Arabic it looks weird
"هلو" => "YìYèYò"

Check encoding, you should use Unicode for this.

@nezorflame
I just replace
Text:     pdutext.ROW(r.FormValue("text")),
with
Text:     pdutext.UCS2(r.FormValue("text")),
and everything is good now Thank you


Raise proper exception in send_signal if we haven't kill the desired process.

Need a flag to know if the kill operation success.

Raise ProcessLookupError if os.kill didn't kill the process.
Reraise KeyError to ProcessLookupError if the task isn't founded.

related to https://github.com/iterative/dvc/pull/8580

It says Vulnerability found in py version 1.11.0 , py was relied by mypy, and version 1.11.0 is already the newest one (pyversions).
As it is only used in mypy we should just disable this error?

It says Vulnerability found in py version 1.11.0 , py was relied by mypy, and version 1.11.0 is already the newest one (pyversions). As it is only used in mypy we should just disable this error?

Should be fixed after a py-template update: https://github.com/iterative/py-template/pull/92

Codecov Report
Base: 72.97% // Head: 73.45% // Increases project coverage by +0.48% :tada:

Coverage data is based on head (3ef0480) compared to base (ae691d1).
Patch coverage: 100.00% of modified lines in pull request are covered.

Additional details and impacted files
@@            Coverage Diff             @@
##             main      #97      +/-   ##
==========================================
+ Coverage   72.97%   73.45%   +0.48%
==========================================
  Files          21       21
  Lines         914      923       +9
  Branches      141      111      -30
==========================================
+ Hits          667      678      +11
+ Misses        212      210       -2
  Partials       35       35

Impacted Files
Coverage Δ

src/dvc_task/proc/manager.py
71.05% <100.00%> (+2.87%)
:arrow_up:

tests/proc/test_manager.py
89.53% <100.00%> (+0.64%)
:arrow_up:

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

:umbrella: View full report at Codecov.
:loudspeaker: Do you have feedback about the report comment? Let us know in this issue.


ISPN-3305 Remove lock reordering tests

Closing the issue as out of date.

Looks good to me

Integrated. Thanks @danberindei !


compose files clean up and API_KEY removal

List of changes:

API_KEY was removed from config.yaml and moved to an env file
entrypoint.sh and  entrypoint_ui.sh files created
config/requirements.txt was created
tty: true and stdin_open: true removed from compose files as they have no effect

Nice !
Quick optional nitpick :
A side effect is that everyone's .env file will be different and might accidentally be committed/pushed (e.g.: via commit -a).
I was wondering if instead of adding the .env file to the repo, it might not be better to add a script to generate the file instead (and add .env to the gitignore).

you are right about the side effects. I removed the example file, added *.env to .gitignore and put info about the .env file in README
About generating the file, I'm unsure of how to achieve it correctly as passing env vars with docker|podman-compose up is tricky.
Also to run RapiDast as a github action I need these env vars set in a docker in docker set up
.env file looks like the most clean approach to me

LGTM!


Shows dockerbuilder as "dirty" although latest tag matches HEAD

Somehow I broke deisrel:
$ deisrel ~/.helmc/workspace/charts/workflow-v2.2.0/tpl/generate_params.toml components.json
builder         v2.2.0 -> v2.3.0 (dirty)
	builder has unrelased changes. See https://github.com/deis/builder/compare/v2.3.0...master
controller      v2.2.0 -> v2.2.1 (dirty)
	controller has unrelased changes. See https://github.com/deis/controller/compare/v2.2.1...master
database        v2.2.0 -> v2.2.0 (dirty)
	database has unrelased changes. See https://github.com/deis/postgres/compare/v2.2.0...master
dockerbuilder   v2.2.0 -> v2.3.0 (dirty)
	dockerbuilder has unrelased changes. See https://github.com/deis/dockerbuilder/compare/v2.3.0...master
...

But dockerbuilder was just tagged as v2.3.0 and there are no newer commits, and visiting the URL above shows "v2.3.0 and master are identical."
This isn't hard to work around for now. Not sure what's going wrong though--other components so far seem to report status correctly.

I'll investigate right now.

The cause of this is that dockerbuilder is using an annotated tag, unlike the other repositories. Annotated tags have their own SHA, unlike a light tag, which points to a commit. So my comparison of tag_sha == master_sha isn't going to work for an annotated tag. I'll add so logic around this.


CKE Links plugin doesn't work with secure site URL https:// or forced SSL

Hi @risingisland
One more error with CKE.
GS was installed over non secure URL. In this case no errors with CKE.
When I force SSL in settings of MA or change site ULR to https://.../ or in both cases together then CKE Links pluging does not work.
Errors are:

Also I installed with secure ULR - the same problem. CKE gives an error with SSL and no error without SSL.

Hi,
this broken ckeditor, or only show error?

HI @multicolor-rgb
CKE Links button doesn't work. It is not possible to insert links

Strange, I havent had a problem with it. And its working for me.
In all langs, or just uk?

I made several clean installations and I have the same problem with Links plugin over https.

Strange, Links plugins is working now with just installed GS <IP_ADDRESS>-pre.
Did you change something?

The only changes were what I had mentioned above. Changing the encoding of several lang files.
Glad this is now working for you.


Naja support

I would actually go with it also, but coffe script is kinda problematic, any issue to code this in js?
Anyone has this working already?

Datagrid is already able to use Naja


Mixed Content Warning

Was able to use a Proxy to serve up the this info
https://jqnatividad-prod.apigee.net/mapservices-bostonredevelopmentauthority-org/arcgis/rest/services/Maps/Zoning/MapServer/0
from
http://mapservices.bostonredevelopmentauthority.org/arcgis/rest/services/Maps/Zoning/MapServer/0
However, there is still mixed content warning from ags_fs_view/ags_ms_view js loading http://epsg.io.
https://github.com/AppGeo/ckanext-agsview/blob/master/ckanext/agsview/public/js/ags_fs_view.js#L72
https://github.com/AppGeo/ckanext-agsview/blob/master/ckanext/agsview/public/js/ags_ms_view.js#L106
See https://data.boston.gov/dataset/zoning-districts/resource/d993c51f-0224-429e-81c1-d71e1b507b5e
cc @calvinmetcalf @GuidoS  @pgirard @jguo144 @samibaig

Do you know we serve the epsg.io web over https:// as well?
https://epsg.io/

thanks @klokan pushed up a fix

We applied the fixes and the map partly renders, however, we now have another set of JS errors
https://data.boston.gov/dataset/zoning-districts/resource/d993c51f-0224-429e-81c1-d71e1b507b5e
cc @pgirard @calvinmetcalf @GuidoS

it works for me, I do see 2 warnings in the console but those arn't related
to our plugin
On Wed, Feb 1, 2017 at 2:20 PM Joel Natividad<EMAIL_ADDRESS>wrote:

We applied the fixes and the map partly renders, however, we now have
another set of JS errors
https://data.boston.gov/dataset/zoning-districts/resource/d993c51f-0224-429e-81c1-d71e1b507b5e
cc @pgirard https://github.com/pgirard @calvinmetcalf
https://github.com/calvinmetcalf @GuidoS https://github.com/GuidoS
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/AppGeo/ckanext-agsview/issues/8#issuecomment-276753523,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABE4n1vItV55KCWmgzDlZC-ykb3kp6s6ks5rYNsAgaJpZM4L0HEl
.


NEED EXTRA PROVIDERS

Add IPTV support in the app with fully featured

This is out of scope for the app, it is only used for access to specific websites. It is not a universal TV app.


Adding future efficiency sliders to "Costs & parameters" section

Thanks to @Charlottevm we now have future efficiency sliders for power plants and heating technologies in the built environment! Closes https://github.com/quintel/etmodel/issues/3749
See issue for details about the eaxt sliders that have been added.

Besides adding the new sliders, we picked up the following issues:

Restructured and renamed the Costs section, it's now called "Costs & parameters"
Closes https://github.com/quintel/etmodel/issues/3016
The merit order page has been moved to "Supply -> Electricity" as it better fits there (heat merit order is also located under Supply)
The transport efficiency sliders have been moved to "Costs & parameters" as these sliders change the efficiency of transport vehicles. We haven't moved the efficiency sliders of industry, as these sliders are not actually changing the efficiency of a technology, but instead decreasing the electricity / heat demand.
We have added a slider to adjust the efficiency of power-to-gas elektrolyzers
Updated some costs sliders (many were missing technologies or had to be split up with the new structure)

Very nice work @marliekeverweij and @Charlottevm ! I've tested the new feature extensively and, as discussed with @marliekeverweij , I'm reporting my findings below. I suggest resolving these before merging:

[ ] Position of the merit order (sub) sidebar item. I had a hard time finding it because it's hidden unless you open the Supply ->  Electricity sidebar item. I suggest promoting it to a real sidebar item, preferably right after the Renewable Electricity sidebar item
[ ] I find the name of the Costs & parameters tab a little vague and would suggest changing it to Costs & efficiencies
[ ] The ranges of the costs sliders imply that you can make it possible to build power plants for free. I know that this is the users own responsibility, so action needed, but I just wanted to note this
[ ] Definition of the costs sliders. In the industry demand part of the ETM we use similar looking sliders to set the size of industrial subsector. Here, the sliders are defined such that 100% means that the sector stays the same size it presently is. The costs sliders are defined such that 0% means that the costs stay the same. I suggest no changes to any of the sliders, but to keep this in mind for future development projects.
[ ] I find the heat efficiency sliders for the CHPs a little oddly positioned in the electricity sidebar items but have no suggestions on how to improve this
[ ] In the Total cost of electricity production chart, the numbers of the Y-axis overlap with the axis itself if the total costs of production go above 1000 EUR/MWhe
[ ] In the Total cost of electricity production chart, the gas CHP is called Central gas CHP, whereas in the sliders they are called Large-scale gas CHP. I suggest renaming them in the chart to Large-scale gas CHP
[ ] I'm missing the O&M costs for solar power. Is this deliberate?
[ ] The COP for the Heat pump (ground) is 4.8 according to the efficiency slider. However if I go to the Technical and financial specifications of the related demand slider, it says the COP is 5. Is this a rounding error in the Technical and financial specifications?
[ ] In the costs -> heat slide, it struck me that the Households gas-fired heater has an efficiency of 90% whereas the Buildings equivalent has an efficiency of 107%. I suggest renaming the latter (and do the same for the demand sliders that it corresponds to).
[ ] In the CCUS slide of the costs tab, all O&M sliders are called Onderhoud en Beheer in Dutch, whereas all other O&M slider are just called Onderhoudskosten. I suggest changing the Onderhoud en Beheer to Onderhoudskosten to be in line with all other sliders.
[ ] In a scenario for a local dataset (I tested Beverwijk), the COP slider for the Heat pump (ground) is scaled (in this case to 0.0218). This should not be the case.
[ ] The Dutch translation for the Kosten & Parameters -> Warmte -> Other heat sources is missing.

If you have any questions about the list above, let me know!

Thanks for your feedback :)
I have tackled most of the issues with an action in my previous commit.

In the Total cost of electricity production chart, the numbers of the Y-axis overlap with the axis itself if the total costs of production go above 1000 EUR/MWhe

I cannot reproduce this issue. @jorisberkhout could you create a separate issue for this?

I'm missing the O&M costs for solar power. Is this deliberate?

No this is not dileberate, but we focussed on the efficiency sliders. I've added it to the costs slider improvements issue.

The COP for the Heat pump (ground) is 4.8 according to the efficiency slider. However if I go to the Technical and financial specifications of the related demand slider, it says the COP is 5. Is this a rounding error in the Technical and financial specifications?

I will create an issue for this
Then I think we are good to go, right? :)

In the Total cost of electricity production chart, the numbers of the Y-axis overlap with the axis itself if the total costs of production go above 1000 EUR/MWhe

I cannot reproduce this issue. @jorisberkhout could you create a separate issue for this?

Will do!

Then I think we are good to go, right? :)

Yes, nice work! I'll approve this PR!


Implement a new way of solver failover handling

Still a draft: only DWaveSampler is handled so far.
New behavior: when failover=True is specified on DWaveSampler construction, solver failover is only signalled, and the actual failover is left as an exercise for the developer. :laughing:
The "dirty" bit we solve here is SAPI/solver exception unification:

if we think sampling call is worth retrying on the same solver, we'll raise RetryCondition on sampleset resolve; and
if we think sampling should be retried on a different solver, we'll raise FailoverCondition on sampleset resolve.

Note that RetryCondition is a specialization of FailoverCondition, so catching FailoverCondition and doing sampler.trigger_failover() should handle all failover cases.

Codecov Report

Merging #465 (9827f58) into master (6a27508) will decrease coverage by 4.65%.
The diff coverage is 91.30%.

@@            Coverage Diff             @@
##           master     #465      +/-   ##
==========================================
- Coverage   91.13%   86.48%   -4.66%
==========================================
  Files          23       23
  Lines        1546     1561      +15
==========================================
- Hits         1409     1350      -59
- Misses        137      211      +74

Impacted Files
Coverage Δ

dwave/system/samplers/dwave_sampler.py
83.42% <91.30%> (-2.63%)
:arrow_down:

dwave/system/coupling_groups.py
12.50% <0.00%> (-81.25%)
:arrow_down:

dwave/system/samplers/leap_hybrid_sampler.py
61.42% <0.00%> (-14.29%)
:arrow_down:

dwave/system/samplers/clique.py
74.35% <0.00%> (-13.47%)
:arrow_down:

dwave/system/composites/embedding.py
96.57% <0.00%> (-1.15%)
:arrow_down:

dwave/system/testing.py
95.12% <0.00%> (-0.82%)
:arrow_down:

:mega: We’re building smart automated test selection to slash your CI/CD build times. Learn more


Fix compilation error bad-function-cast.

Fix compilation error bad-function-cast.
error: cast from function call of type '_Bool' to non-matching type 'unsigned int' [-Werror=bad-function-cast]

Hi @opilat, thanks for creating a PR.
I'm not sure I really see the value of this warning, at least for littlefs, and it doesn't seem to be present in -Wall or -Wextra. Have you considered just disabling this warning for littlefs in your build system?

Hi Christopher,
we have it disabled in our build system for littlefs code. We aim to
have no such exceptions. Disabling specific warnings for parts of build
make configuration slightly confusing.
The proposed change is more defensive code style and still worth of
merge. What if /lfs_gstate_hasorphans/ changes its return value?
Regards
Ondrej
Dne 21.03.2022 v 3:17 Christopher Haster napsal(a):

Hi @opilat https://github.com/opilat, thanks for creating a PR.
I'm not sure I really see the value of this warning, at least for
littlefs, and it doesn't seem to be present in |-Wall| or |-Wextra|.
Have you considered just disabling this warning for littlefs in your
build system?
—
Reply to this email directly, view it on GitHub
https://github.com/littlefs-project/littlefs/pull/609#issuecomment-1073420934,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AQCVF6G4F7QEM254MM5EETTVA7L4DANCNFSM5HSRMT4A.
Triage notifications on the go with GitHub Mobile for iOS
https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675
or Android
https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.
You are receiving this because you were mentioned.Message ID:
@.***>

--

The proposed change is more defensive code style and still worth of
merge. What if /lfs_gstate_hasorphans/ changes its return value?

I'm less concerned with the current code and more concerned with future changes. littlefs is still being developed and some of the more aggressive warnings we accepted have caused more problems than benefits (mostly -Wshadow).
I'm also struggling to understand the defensive value of this warning, from reading up on it seem to be for catching implicitly defined functions, but this is something modern version of GCC have an explicit warning for.

Disabling specific warnings for parts of build make configuration slightly confusing.

On the other hand it makes it easier to upgrade your compiler, since a compiler upgrade no longer risks needing to fix warnings in depended projects. Just from my small experience external warnings quickly get too time-consuming to fix when you have many dependencies.

My strategy is to only explicitly ENABLE warnings. That is more robust in the face of compiler upgrades. (I.e. white list, not black list.)

23 mars 2022 kl. 04:17 skrev Christopher Haster @.***>:

The proposed change is more defensive code style and still worth of
merge. What if /lfs_gstate_hasorphans/ changes its return value?
I'm less concerned with the current code and more concerned with future changes. littlefs is still being developed and some of the more aggressive warnings we accepted have caused more problems than benefits (mostly -Wshadow).
I'm also struggling to understand the defensive value of this warning, from reading up on it seem to be for catching implicitly defined functions, but this is something modern version of GCC have an explicit warning for.
Disabling specific warnings for parts of build make configuration slightly confusing.
On the other hand it makes it easier to upgrade your compiler, since a compiler upgrade no longer risks needing to fix warnings in depended projects. Just from my small experience external warnings quickly get too time-consuming to fix when you have many dependencies.
—
Reply to this email directly, view it on GitHub, or unsubscribe.
You are receiving this because you are subscribed to this thread.

@vonj that sounds reasonable. Assuming you are not using -Wall and instead have the warning list explicit (which sounds doable).
I'd still advocate for separate warning flags for the code you are working on and for dependencies. You want to know as much information about the code you are working on to know possible sources of errors. But for dependencies this approaches noise. And any code change carries its own risk of unintentionally introducing a bug.


Change the app name and icon

Actual Behaviour
The app is for the event FOSSASIA Summit 17. But the name of the event doesn't appear anywhere in the application.
Expected Behaviour
The app name should be changed according to the event something like FOSSASIA Summit 17 or something more appropriate.
Also we can update images like the app icon, nav bar header image and splash screen image.
Would you like to work on the issue?
Yes
@mananwason @the-dagger
What are your thoughts?

@free4murad I'll take care of that. We'll use the generator to get the apk and that will take care of everything. Right now we have to make app more stable and get rid of silly bugs.


it has a error with the network method

when play with a net url, it catches the error:
Video player had error com.google.android.exoplayer2.ExoPlaybackException: com.google.android.exoplayer2.upstream.HttpDataSource$HttpDataSourceException: Unable to connect to http://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_20mb.mp4

Hi @xzqbetter
can you please provide your flutter doctor -v and flutter run --verbose? Also, to better address the issue, would be helpful
if you could post a minimal code sample to reproduce the problem
Thank you

@TahaTesser
my code is same as the sample

code

flutter doctor -v

[✓] Flutter (Channel stable, v1.12.13+hotfix.5, on Mac OS X 10.14.6 18G2022,
locale zh-Hans-CN)
• Flutter version 1.12.13+hotfix.5 at /Users/xzq/Develop/flutter
• Framework revision 27321ebbad (4 months ago), 2019-12-10 18:15:01 -0800
• Engine revision 2994f7e1e6
• Dart version 2.7.0
[!] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
• Android SDK at /Users/xzq/Library/Android/sdk
• Android NDK location not configured (optional; useful for native profiling
support)
• Platform android-29, build-tools 29.0.2
• Java binary at: /Applications/Android
Studio.app/Contents/jre/jdk/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build
1.8.0_202-release-1483-b49-5587405)
! Some Android licenses not accepted.  To resolve this, run: flutter doctor
--android-licenses
[✓] Xcode - develop for iOS and macOS (Xcode 11.3.1)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Xcode 11.3.1, Build version 11C504
• CocoaPods version 1.7.4
[✓] Android Studio (version 3.5)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin version 41.1.2
• Dart plugin version 191.8593
• Java version OpenJDK Runtime Environment (build
1.8.0_202-release-1483-b49-5587405)

flutter run --verbose

the flutter run --verbose is so long, so I didn't copy it

Hi @xzqbetter
does this code represent the issue you are describing?
Could you please attach your flutter run --verbose as txt file
Please refrain from posting pictures if not necessary.
Thank you

@iapicca
Thank you
I have solved the issue, it seems the VideoPlayer Plugin does not support https, I replace a http url, and it works perfectly

Hi @xzqbetter
given your last message I feel safe to close this issue,
if you disagree please write in the comments and I will reopen it.
Thank you


docs: update join url for testnet 77

Describe your changes
Refs #4497.
Issue ticket number and link
Checklist before requesting a review

[x] If this code contains consensus-breaking changes, I have added the "consensus-breaking" label. Otherwise, I declare my belief that there are not consensus-breaking changes, for the following reason:

docs-only

I confirmed manually that I was able to join the 77 testnet via this URL.

Self-merging to ensure docs are up to date.


testing state on decorated components

using enzyme you can only setState on root component, but many decorators wraps your component, in this manner you cannot set the state of your component,
here is an example using redux, but is the same for other decorators:
import React from 'react';
import {shallow} from 'enzyme';
import {expect} from 'chai';
import {spy} from 'sinon';
import {connect} from 'react-redux';
import { createStore } from 'redux';

import cx from 'classnames';

let store = createStore(() => ({}), ['Use Redux']);

@connect(() => ({}))
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {open: false};
  }

  handleClick() {
    this.setState({
      open: !this.state.open,
    });
  }

  render() {
    return (

 click me

          {this.props.children}

    );
  }
}

describe('MyComponent', () => {
  it('should render class MyComponent--open when state.open === true', () => {
    const component = shallow(<MyComponent store={store}/>);
    component.setState({open: true});
    expect(component.hasClass('MyComponent--open')).to.be.true;
  });

  it('should set state.open = true when clicked', () => {
    const component = shallow(<MyComponent store={store}/>);
    component.simulate('click')
    expect(component.state('open')).to.be.true;
  });
});

isn't there a way to create something like getReactComponentOf(selector) that can support setState?

Hey @CosticaPuntaru, the shallow renderer is intentionally limited to operating on only the root component so as to make the test more isolated. In the case of decorators or "wrapped" components like this, the wrapped component is not what we want to test.
Internally at Airbnb, we use a pattern like the following:
class MyComponent extends React.Component {
  ...
}
export default connect(MyComponent); // default export. used in your app.
export { MyComponent as PureMyComponent}; // pure component. used in tests

This will work fine with redux's connect function, but won't work out of the box with the decorator syntax.  You could open a pull request to redux to have the @connect decorator expose the underlying wrapped component as a static prop like UnderlyingComponent or something like that
Does that help at all?

i know that you can do that, but:

i like using the @annotation syntax
sometimes you need to test if your component respondes correctly to decorator, ex:
in one component i use the decorator clickOutside (or something like that) and i need to test if the component closes correctly. The only way i found was to use renderIntodom and drop the enzyme for that test

@CosticaPuntaru if you want to test the full flux lifecycle for a component, you will likely need to use mount instead of `shallow.

Closing for now. I don't see any clear path to making this better than it already is. Please reopen if you have suggestions.

@lelandrichardson How do you guys test Redux connected components?

@montogeek  i am also looking for a way to test connected components
have you figured it out?

@montogeek @vickenliu I'd follow @lelandrichardson's initial advice of exporting the pure component alongside the connected component. Then you just have to mock the props that redux would provide.

@vickenliu I am following @Aweary advice :) If you need to test it with the store, write E2E tests :)

Full example can be found here: https://github.com/fshowalter/redux/tree/ccf1416de48ae81c823d7e58b8d3f9f0fa0df5fb/examples/async
(@connect or the connect() HOC is the same)

@CosticaPuntaru this worked for me.
const wrapper = shallow(component, { context: {  /* pass context if required */}}); // decorated component
const child = shallow(wrapper.get(0)); // pure component

hello , how can i get state of decorated component by DragDropContext ? mount getState() return null

Is this still the preferred method? I was able to solve this with @lelandrichardson's advice. Thanks.

Is there a way to achieve the dual-export of a pure component and connected component using the @connect decorator syntax?

At this point, you no longer need to export the pure component - use .dive() once for each HOC/wrapper/decorator.

@joncursi  Do you had the answer about your question already ? I also encounter this issue.

@ljharb Let's say I want to get the component that is inside of the HOC/decorator. Is there a way that I can pass props into that component? If I use dive() I get the wrapper and if I use .instance() I can get the component, but I would like to get the component function that I can pass props into.

@ronghuang0 in that case, you'd need to expose it directly so you could test it directly.

I finally found a very good solution to get a wrapper from a decorated component. For shallowed components you can use dive() but there is no similar method for mounted components. This is the solution I did:
const wrapper = mount(shallow(<MyComponent />).get(0))

Works like a charm :)


Cannot disable specific carriers

Hi guys,
I have the checkboxes selected for disabling UPS, Fedex, DHL and Canpar in the settings of the only shipping zone I have.
Unfortunately, they are still shown on the client side.
Do you have any idea why?

Yes, there is a problem of filtering out rates from certain couriers.
We are fixing this issue and will include it in our next release (should be in the new few days).
Sorry about this and thanks for letting us know!

Hi,
This issue should be fixed in the latest release, 2.0.10. Please install to see if it works.


[Critical] Date comparator bug

Hello Vincent,
I have written a simple test case and found a "typo" in comparator for Date class. Library incorrectly evaluates operators >= and <= for date which in this example is in format "MM/DD/YYYY":

02/07/2018 > 02/01/2018: 1
02/07/2018 < 03/31/2018: 1
02/07/2018 >= 02/01/2018: 0
02/07/2018 <= 03/31/2018: 0

I have checked your code in ocilib_impl.hpp and found the error. This should be the correct definition of those operators.
inline bool Date::operator >= (const Date& other) const
{
    int res = Compare(other);

    return res == 0 || res > 0;
}

inline bool Date::operator <= (const Date& other) const
{
    int res = Compare(other);

    return res == 0 || res < 0;
}

Fix committed in v4.5.2 branch

You are welcome. For the time being I have found a workaround by telling Oracle to output date in lexicographical format (YYYY-MM-DD) and compared two dates as string.


database/sql: possible new panic doing reflect-based conversions

Go 1.17 adds conversions from []T to *[N]T, including via the reflect package. Such conversions may panic if N is larger than the slice length. Whether reflection-based conversion is possible without panicking is thus now no longer a function only of the types involved. As a result, even if v.Type().ConvertibleTo(w.Type()) returns true, v.Convert(w.Type()) may panic. This is documented in package reflect.
database/sql/convert.go contains code that appears to rely on that now-broken invariant:
func convertAssignRows(dest, src interface{}, rows *Rows) error {
	// ...
	if dv.Kind() == sv.Kind() && sv.Type().ConvertibleTo(dv.Type()) {
		dv.Set(sv.Convert(dv.Type()))
		return nil
	}
	// ...
}

(text/template has similar code, but it is guarded with a check that the types are int-like.)
This sv.Convert call couldn't panic in 1.16; now it can.
What should we do here?

(a) recover from the panic and return an error saying the conversion failed
(b) panic
(c) recover from the panic and continue as if the types weren't convertible

(a) seems like the clearest error output. (b) is simple. It also matches the handling in the standard library of reflect.Type.Comparable: In a few places, we check reflect.Type.Comparable and then blindly use ==, even though that can panic. (c) most closely preserves the 1.16 behavior.
I lean towards (a) but would like to discuss. And if we do (a) or (c), should we give reflect.Type.Comparable/== the same treatment?
Marking as a 1.17 release-blocker, pending a decision about severity and how we want to proceed.
cc @dsnet @ianlancetaylor @mdempsky @OneOfOne

Why does v.Type().ConvertibleTo(w.Type()) return true?
Because of the language change ([]T is convertible to *[N]T). But that spec also says that some conversions will panic.
So this can panic.
database/sql handles panics at some places, this should be another one. (Eliminate choice (b))
Those types are convertible, only the length of the slice causes error -which is a common error- so this sould return an error (sth. like io.ErrShortBuffer, or a new reflect.ErrShortSlice ?).
TL;DR: My 2c for (a)

Perhaps we should add  in package reflect func (Value) ConvertibleTo(Type) bool and func (Value) Comparable(Value) bool.

I agree with @tgulacsi, the package already handles reflect panics, so I'd vote for a.

@ianlancetaylor that's a great idea. We aren't going to be the only ones having to figure out how to work around this.
Is there time yet to do that for 1.17? Does it need to go through the proposal process?

Note that adding Value-based ConvertibleTo and Comparable will effectively implement choice (c) above, which is in conflict with what appears to be a broad preference for choice (a).

Aren't the Kinds different (array & slice) so that sv.Convert() never gets called?

I filed #46746.

That said I agree with @renthraysk that I don't see a problem with the current code due to the explicit Kind check.

That's embarassing; I combed through all the code above it and failed to read the very code I copy/pasted. Thanks, @renthraysk. Everything remaining to do here is in #46746 (thanks, Ian!).


Create header

In this PR:

I created the page header with a logo and two links, that is the movies and schedule.

Hi @rosemutai  ,
Status: Approved :heavy_check_mark: :heavy_check_mark: :heavy_check_mark:

To Highlight 💪🏻

Navigation bar placement✔
Added logo ✔

Good job implementing the requirements  :+1: This checkpoint is complete!  There is nothing else to say other than... it's time to merge it :shipit:
Congratulations! 🎉
Optional Suggestions  :

N/A

Every comment with the [OPTIONAL] prefix is not crucial enough to stop the approval of this PR. However, I strongly recommend you to take them into account as they can make your code better.
Cheers and Happy coding!👏👏👏
Feel free to leave any questions or comments in the PR thread if something is not 100% clear.
Please, remember to tag  ichala in your question so I can receive the notification.

As described in the Code reviews limits policy  you have a limited number of reviews per project (check the exact number in your Dashboard). If you think that the code review was not fair, you can request a second opinion using this form.


Changing parse func should not invalidate the cache

A critical use of the cache is when parsing errors out, you still want the saved responses and not re-run generation.
Minimal test:
from bespokelabs import curator

poet = curator.Prompter(
    prompt_func=lambda: "Write a poem about the beauty of computer science",
    parse_func=lambda _, response: {"poem": f"Poem:\n\n{response}"},
    model_name="gpt-4o-mini",
)

poem = poet()
print(poem["poem"][0])

then run
from bespokelabs import curator

poet = curator.Prompter(
    prompt_func=lambda: "Write a poem about the beauty of computer science",
    parse_func=lambda _, response: {"poem": f"Poem:\n{response}"},
    model_name="gpt-4o-mini",
)

poem = poet()
print(poem["poem"][0])

Notice how a \n is removed in the parse_func.
If you run the first one twice, it will hit the cache on the second. If you then run the second example, it doesn't hit the cache since parse_func is part of the hash. Let's remove that so the user can benefit from the cached requests if they need to change parse_func (e.g. if it has errors).

Realistically we should have different caching logic for responses.jsonl and dataset.arrow.


Update the boilerplate to use v10

Already thought of that, but will start if Object methods are finished.


Flip image background after fade in

How can i do the flip of background-image after the fade in caused by scroll? thank you in advance

I'm not sure if I get you correctly. But you can write your own animations. Check out codepen examples in Readme to find out more. I prepared few just to show the basics, but you can do much more.

Sorry, my english is not very good...i want double animations on single element, not a single custom animation. 1) fade in on scroll and 2) after delay flip the image with another. Is there a method with aos to do that? If not, ok, i will search a method to do that, no problem... In my case if i use the delay to use double animation with flip this not work because this show me first  the end-image, do the flip from the start-image, and then show me again the end-image (the flip is ok, but i want that start with the start-image)

There is no way to do sequential animations by default


CORTX-33037: apply support bundle filter limit_size

Signed-off-by: rohit-k-dwivedi<EMAIL_ADDRESS>JIRA: CORTX-33037
Problem Statement

No limit_size filter available

Design

Created patch to apply limit_size filter.
limits number of cores when limit_size is passed and truncates text logs if the size still exceeds

Coding
Checklist for Author

[ ] Coding conventions are followed and code is consistent

Testing
Checklist for Author

[ ] Unit and System Tests are added
[ ] Test Cases cover Happy Path, Non-Happy Path and Scalability
[x] Testing was performed with RPM

Impact Analysis
Checklist for Author/Reviewer/GateKeeper

[ ] Interface change (if any) are documented
[ ] Side effects on other features (deployment/upgrade)
[ ] Dependencies on other component(s)

Review Checklist
Checklist for Author

[x] JIRA number/GitHub Issue added to PR
[x] PR is self reviewed
[x] Jira and state/status is updated and JIRA is updated with PR link
[x] Check if the description is clear and explained

Documentation
Checklist for Author

[ ] Changes done to WIKI / Confluence page / Quick Start Guide

@cdeshmukh @sachitanands @rahul-tripathi-git please review.

@cdeshmukh ,
with latest changes, collects 2 (rgw_debug/core2.core, rgw_debug/core3.core) cores when has enough size limit but restricts to 1 core if size is limited, + all logs truncated when passed 1B as size limit
################## SIZE LIMIT IS 10GB  ####################
[root@cortx-server-headless-svc-ssc-vm-rhev4-2782 ~]# /opt/seagate/cortx/rgw/bin/rgw_support_bundle -t SB -c yaml:///etc/cortx/cluster.conf -b 200 --all True --size_limit 10GB
[root@cortx-server-headless-svc-ssc-vm-rhev4-2782 ~]# tar -tvf SB/rgw/rgw_200.tar.gz
tar: Removing leading `/' from member names
drwxr-xr-x root/root         0 2022-07-28 04:26 /
drwxr-xr-x root/root         0 2022-07-25 12:32 addb_files-0x7200000000000001:0x5/
-rw-r--r-- root/root      1758 2022-07-28 04:25 cortx_rgw.conf
-rw-r--r-- root/root      6878 2022-07-28 04:25 radosgw-admin.log
-rw-r--r-- root/root      8712 2022-07-28 04:25 rgw_setup.log
-rw-r--r-- root/root        98 2022-07-28 04:26 rgw_live_callstack.log
-rw-r--r-- root/root     16550 2022-07-28 04:26 cortx-rpms
-rw-r--r-- root/root<PHONE_NUMBER>-07-28 04:25 rgw-1.log
drwxr-xr-x root/root         0 2022-07-28 04:26 rgw_debug/
-rw-r--r-- root/root<PHONE_NUMBER> 2022-07-28 04:26 rgw_debug/core2.core
-rw-r--r-- root/root<PHONE_NUMBER> 2022-07-28 04:26 rgw_debug/core3.core
drwxr-xr-x root/root          0 2022-07-28 04:26 motr_trace_files/
-rw-r--r-- root/root<PHONE_NUMBER>-07-28 04:26 motr_trace_files/m0trace.382.2022-07-25-12:31:48.yaml.xz
-rw-r--r-- root/root    1674848 2022-07-28 04:26 motr_trace_files/m0trace.10.2022-07-25-12:32:05.yaml.xz
-rw-r--r-- root/root       1557 2022-07-28 04:25 rgw_startup.log
-rw-r--r-- root/root       3792 2022-07-28 04:25 rgw_support_bundle.log

################## SIZE LIMIT IS 1B  ####################
[root@cortx-server-headless-svc-ssc-vm-rhev4-2782 ~]# /opt/seagate/cortx/rgw/bin/rgw_support_bundle -t SB -c yaml:///etc/cortx/cluster.conf -b 200 --size_limit 1B
[root@cortx-server-headless-svc-ssc-vm-rhev4-2782 ~]# tar -tvf SB/rgw/rgw_200.tar.gz
tar: Removing leading `/' from member names
drwxr-xr-x root/root         0 2022-07-28 04:28 /
drwxr-xr-x root/root         0 2022-07-25 12:32 addb_files-0x7200000000000001:0x5/
-rw-r--r-- root/root      1758 2022-07-28 04:27 cortx_rgw.conf
-rw-r--r-- root/root         0 2022-07-28 04:28 radosgw-admin.log
-rw-r--r-- root/root      8712 2022-07-28 04:27 rgw_setup.log
-rw-r--r-- root/root     16550 2022-07-28 04:28 cortx-rpms
-rw-r--r-- root/root<PHONE_NUMBER>-07-28 04:27 rgw-1.log
drwxr-xr-x root/root         0 2022-07-28 04:28 motr_trace_files/
-rw-r--r-- root/root<PHONE_NUMBER>-07-28 04:28 motr_trace_files/m0trace.382.2022-07-25-12:31:48.yaml.xz
-rw-r--r-- root/root   1674848 2022-07-28 04:27 motr_trace_files/m0trace.10.2022-07-25-12:32:05.yaml.xz
-rw-r--r-- root/root      1557 2022-07-28 04:27 rgw_startup.log
-rw-r--r-- root/root         0 2022-07-28 04:28 rgw_support_bundle.log
[root@cortx-server-headless-svc-ssc-vm-rhev4-2782 ~]#

@shriya-deshmukh Why 'verification/cla-signed' is failing for you, you had contributed already so many times to this repo. Is it because original author was Rohit ?

@shriya-deshmukh Why 'verification/cla-signed' is failing for you, you had contributed already so many times to this repo. Is it because original author was Rohit ?

This check is failing for Rohit's commit
2022-08-26T10:05:23.625Z INFO The contributors @rohit-k-dwivedi have not signed the CLA, adding error status to the pull request


Low gossipsub peer score

Describe the bug
From 0.41.0 (or even before that time), gossipsub score is not great

Expected behavior
Average gossipsub score should be close to 0

Metrics in v1.1.0 are great


Read and write Matlab sparse matrix files

We want to custom define stiffness and RHS matrices easily by reading in matlab files that contain 1 sparse matrix (no imaginary values). This function will return a usable "Matrix_d" or whatever we use to include in the A matrix sent to the FEM solver.
Currently, the solver uses only a uniform stiffness matrix generated by the meshes.

completed here e35213597d701114f2c1be64ae9fe92afa52c861


Workaround for OSX 10.11 System Integrity Protection

if loading libc.dylib fails try loading by the full (and real) pathname /usr/lib/libSystem.dylib.
Workaround picked up from http://stackoverflow.com/questions/32905322/oserror-dlopenlibsystem-dylib-6-image-not-found
(Note this is against the master branch, not the new clock branch)

Many thanks for this fix. Merged into master. I'll also try to merge into new-clock-model branch.


Update Jenkins pipeline for new stable branches to run nightly tests

When doing a release which adds a new stable branch, the Jenkinsfile on that branch should be updated to run a nightly QA test for that branch. Additionally, the version which just became unsupported should be updated such that it isn't running a nightly QA test anymore.

No longer relevant


add "from" to js and ts keywords

from keyword was missing (import something from 'something')

from is not a keyword though, is it? I was just trying to look up ES5/6 reserved words and from doesn't show up there (source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar). Is it only contextual?
And should as be also supported?

The from (and as) is used with ESM imports/exports.

I know, my point is though that from/as are not official keywords, or are they? I'm trying to understand if treating them the same as "import" is correct, given that is reserved. as seems to be missing in any case, could you please add that while you're at this?

Those that are always allowed as identifiers, but also appear as keywords within certain syntactic productions, at places where Identifier is not allowed: as, async, from, get, of, set, and target.

https://tc39.es/ecma262/2020/#sec-keywords-and-reserved-words

For a more general PR, we could add :

[ ] more errors (Error, EvalError, InternalError, RangeError, ReferenceError, SyntaxError, TypeError, URIError) as Name.Exception ?
[ ] the global object (Name.Builtin, Node.js)
[ ] more Name.Builtin (such as typed arrays, Intl, DataView, Set, Map, WeakSet, WeakMap, Reflect, JSON, ArrayBuffer) ?

Yes, that sounds good, but I'd rather do it in a separate PR. This here is nice and self-contained. Can you please un-draft it so I can merge it, then file another PR for the other changes?


Update the SDK to be compliant with the v0.5.1 spec

Update the SDK to be compliant with the v0.5.1 spec.
What's Changed

chore: add additional document statuses by @toddbaert in https://github.com/open-feature/spec/pull/139
chore: add status badges by @toddbaert in https://github.com/open-feature/spec/pull/148
chore: section clarity, harden API, providers by @toddbaert in https://github.com/open-feature/spec/pull/149

Update the badge on the readme to
Full Changelog: https://github.com/open-feature/spec/compare/v0.5.0...v0.5.1

There's probably nothing to do here other than update some tests (maybe not even?). I will verify.

Done with #109 and others.