Received: from malur.postgresql.org ([217.196.149.56]) by arkaria.postgresql.org with esmtps (TLS1.3) tls TLS_ECDHE_RSA_WITH_AES_256_GCM_SHA384 (Exim 4.94.2) (envelope-from ) id 1qSyd7-007z2a-J6 for pgadmin-hackers@arkaria.postgresql.org; Mon, 07 Aug 2023 11:42:34 +0000 Received: from localhost ([127.0.0.1] helo=malur.postgresql.org) by malur.postgresql.org with esmtp (Exim 4.94.2) (envelope-from ) id 1qSyd5-0094Cj-9z for pgadmin-hackers@arkaria.postgresql.org; Mon, 07 Aug 2023 11:42:31 +0000 Received: from makus.postgresql.org ([2001:4800:3e1:1::229]) by malur.postgresql.org with esmtps (TLS1.3) tls TLS_ECDHE_RSA_WITH_AES_256_GCM_SHA384 (Exim 4.94.2) (envelope-from ) id 1qSyd4-0094Cb-US for pgadmin-hackers@lists.postgresql.org; Mon, 07 Aug 2023 11:42:31 +0000 Received: from mail-oa1-x2a.google.com ([2001:4860:4864:20::2a]) by makus.postgresql.org with esmtps (TLS1.3) tls TLS_ECDHE_RSA_WITH_AES_128_GCM_SHA256 (Exim 4.94.2) (envelope-from ) id 1qSyd1-00112O-Ko for pgadmin-hackers@postgresql.org; Mon, 07 Aug 2023 11:42:29 +0000 Received: by mail-oa1-x2a.google.com with SMTP id 586e51a60fabf-1ba5cda3530so3432737fac.3 for ; Mon, 07 Aug 2023 04:42:27 -0700 (PDT) DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed; d=enterprisedb.com; s=google; t=1691408547; x=1692013347; h=cc:to:subject:message-id:date:from:in-reply-to:references :mime-version:from:to:cc:subject:date:message-id:reply-to; bh=pbnse7+FaO3sbHw4EUcKAu4Q+nR8iNOOgIflrU9bi80=; b=KHWfhmHfKGfFlAST5waOMU+gDOkkuCGY3RRIOXL44gk4ZMUxNPzbGRbw5lUnzhY9T9 ehxn6acOgzm9tDaIKQRUKK20zHMnYqezUkCCj8JniaMAgfy1xeBCjvU28TVnUZRh2BPp f+hHX3HGf4VAWND08VJsEuAh34DJXQN12dEloOqwvViVsuSiIEcHtrwD0bVRyuGVyNjk oT5sL6BaSp8X1sWlED1jbu+VLe7TRoxJ9hD/jhw1nA5b2P6uBsL6QjSFlxMFmVMnZXnZ +XSDfkPdmHaLM4xSziu4LqiV+SVZGIg8YRA5SSapjujG9nYbjXl91iuphC0hyWwSySjE y0KQ== X-Google-DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed; d=1e100.net; s=20221208; t=1691408547; x=1692013347; h=cc:to:subject:message-id:date:from:in-reply-to:references :mime-version:x-gm-message-state:from:to:cc:subject:date:message-id :reply-to; bh=pbnse7+FaO3sbHw4EUcKAu4Q+nR8iNOOgIflrU9bi80=; b=gAIXkRbeLsTY7mAblFt0SDsxn2YGqdg69aAA5AYmpqbLltKeQHoHo70MEAN5FK3pzN VqZ0WE7MVi44V5slwggugVlWZxEAP3fDXVMnV/4UhN/59Iw9fkeVxh32VC+PYXKMeZMs ozp7t+NIwK+UUFX2Zhi6eAM6QQPhjNRbdzNAc7y9S26fPRy3h4MWkGxR3Aoj1Q4K5X5A x2SC1sgR2C+Lp/8v/qJheGgnn6PJTI8QFya6LKi8/DVzCUCUdmT7D4ovCfFccttaFypM KPLFvXSTxzaIYxz/kaC2U4jmanY4Xig0Yku5Tf2iBtyAyG1KIgH9bTbqRX2HHcIR37XP Li4g== X-Gm-Message-State: AOJu0Yxl7bJEDqBCzov9rn4RCxgfR+X3BhRoctNi1V9AZ5Mqv+PzBrfQ wtphZ2fCjm//U34T94Aw+2CALWZW3shtxpZO4Kuapw== X-Google-Smtp-Source: AGHT+IGpro6xrj0drjKDUGLWdb86RPINbtrL5cCz4QM4K7zUg7dZ0smhlUchgFK7JR/WLi18wjIVgO1sHJ4KIZ/kwt8= X-Received: by 2002:a05:6870:a40b:b0:1bb:742a:4f62 with SMTP id m11-20020a056870a40b00b001bb742a4f62mr10839055oal.45.1691408546840; Mon, 07 Aug 2023 04:42:26 -0700 (PDT) MIME-Version: 1.0 References: In-Reply-To: From: Aditya Toshniwal Date: Mon, 7 Aug 2023 17:11:50 +0530 Message-ID: Subject: Re: Pgadmin4 System Stats Extension Design To: Sahil Harpal Cc: Khushboo Vashi , pgadmin-hackers@postgresql.org, Ashesh Vashi , Dave Page , Akshay Joshi Content-Type: multipart/alternative; boundary="0000000000009addb9060253bd17" List-Id: List-Help: List-Subscribe: List-Post: List-Owner: List-Archive: Archived-At: Precedence: bulk --0000000000009addb9060253bd17 Content-Type: text/plain; charset="UTF-8" Content-Transfer-Encoding: quoted-printable On Mon, Aug 7, 2023 at 4:47=E2=80=AFPM Sahil Harpal wrote: > Hi Aditya, > On Mon, 7 Aug 2023 at 11:01, Aditya Toshniwal < > aditya.toshniwal@enterprisedb.com> wrote: > >> Hi Sahil, >> I would suggest changing the behaviour in StreamingChart so that it can >> be used at other places. If you want to reverse it then you can still do >> it. I had achieved reverse direction with the following piece of code. >> Basically, creating an array of 75 points, filling it with available poi= nts >> and reverse. You can change it based on reverse=3Dtrue flag. In your cas= e, >> simply reverse, not need of 75 points. >> Array.from(new Array(xRange).keys()), >> ...(data.datasets?.map((d)=3D>{ >> let ret =3D [...d.data]; >> ret.reverse(); >> return ret; >> })??{}), >> > > I'm a little confused here. So, the code snippet above is exactly what's > used to initialize the data currently. > > The expected behavior is that the graph should start from the right side > only. However, currently, when the page loads, for a few seconds, the > graphs are visible on the left side and then shift to the right. > > I think we can skip the reverse if we make changes in the statsReducer > method. > action.counter ? action.incoming[label] - action.counterData[label] : > action.incoming[label], > ...state[label].slice(0, X_AXIS_LENGTH-1), > > Here, we are adding new data to the beginning and selecting the first > X_AXIS_LENGTH-1 datapoints from the previous state. However, an alternati= ve > approach would be to initially take the X_AXIS_LENGTH-1 elements from the > end of the array, then add a new element to the end. This would eliminate > the need to reverse the array. > > I believe this reversal isn't causing any issues, but something might be > occurring during graph plotting. Reversing just ensures that the most > recent data point remains on the right within the stream. > OK I thought you wanted the graph to go from left to right. Yeah, I have seen that glitch a few times (but rare). I think you can ignore it for now, we can look into it once we get time. It is not a priority. The reason data reversing and stuff is maintained in StreaminChart is - Pass the data points and StreamingChart will appear from right to left. Don't want the source to take efforts to reverse and fill. > > Thank you, > Sahil > > --=20 Thanks, Aditya Toshniwal pgAdmin Hacker | Sr. Software Architect | *enterprisedb.com* "Don't Complain about Heat, Plant a TREE" --0000000000009addb9060253bd17 Content-Type: text/html; charset="UTF-8" Content-Transfer-Encoding: quoted-printable


On Mon, Aug 7, 2023 at 4:47=E2=80=AF= PM Sahil Harpal <sahilharpa= l1234@gmail.com> wrote:
Hi Aditya,
On Mon, 7 Aug 2023 at 11:01, Aditya Toshniwal <aditya.toshniwal@ent= erprisedb.com> wrote:
3D"=
Hi=C2=A0Sahil,
I would suggest changing the behaviour = in StreamingChart so that it can be used at other places. If you want to re= verse it then you can still do it. I had achieved reverse direction with th= e following piece of code. Basically, creating an array of 75 points, filli= ng it with available points and reverse. You can change it based on=C2=A0r= everse=3Dtrue=C2=A0flag. = In your case, simply reverse, not need of 75 points.
Array.from(new Array= (xRange).keys()),
...(data.datasets?.map((d)=3D>{
let ret =3D [...d.data];
ret.reverse= ();
return ret= ;
})??{}),
<= div>=C2=A0
I'm a little confused here. So, the code snippet a= bove is exactly what's used to initialize the data currently.

Th= e expected behavior is that the graph should start from the right side only= . However, currently, when the page loads, for a few seconds, the graphs ar= e visible on the left side and then shift to the right.

I think we c= an skip the reverse if we make changes in the statsReducer method.
action.counter ? =C2=A0action.incoming<= /span>[label] - act= ion.counterData[label] : action.incoming[label],
=C2=A0 =C2=A0 =C2=A0 =C2=A0 ...state[label].<= span style=3D"color:rgb(220,220,170)">slice(0, X_AXIS_LENGT= H-1),

Here, we= are adding new data to the beginning and selecting the first X_AXIS_LENGTH= -1 datapoints from the previous state. However, an alternative approach wou= ld be to initially take the X_AXIS_LENGTH-1 elements from the end of the ar= ray, then add a new element to the end. This would eliminate the need to re= verse the array.

I believe this reversal isn't causing any issue= s, but something might be occurring during graph plotting. Reversing just e= nsures that the most recent data point remains on the right within the stre= am.
OK I thought you wanted the graph to= go from left to right.=C2=A0=C2=A0Yeah, I have seen that glitch a few t= imes (but rare). I think you can ignore it for now, we can look into it onc= e we get time. It is not a priority.
The reason data reversing= and stuff is maintained in StreaminChart is - Pass the data points and Str= eamingChart will appear from right to left. Don't want the source to ta= ke efforts to reverse and fill.
<= div>
Thank you,
Sahil



--
Thanks,
Aditya Toshniwal
pgAdmin Hacker=C2=A0| Sr. Software Architect=C2=A0| enterprisedb.com